Add icon, toast about sound moves to more appropriate location

static/index.html

@@ -11,6 +11,8 @@
 		<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
 
 		<!-- Vail stuff -->
+        <link rel="icon" href="vail.png" sizes="128x128" type="image/png">
+        <link rel="icon" href="vail.svg" sizes="any" type="image/svg+xml">
 		<script src="vail.js"></script>
 		<link rel="stylesheet" href="vail.css">
 	</head>
@@ -162,14 +164,14 @@
 											<td rowspan="1">l .-..</td>
 										</tr>
 										<tr> 
-											<td rowspan="1">j .---</td>
+											<td rowspan="1"></td>
 										</tr> 
 										<tr>
 											<td rowspan="2">w .--</td>
 											<td rowspan="1">p .--.</td>
 										</tr> 
 										<tr> 
-											<td rowspan="1"></td>
+											<td rowspan="1">j .---</td>
 										</tr>
 
 										<tr>

static/vail.js

@@ -206,6 +206,10 @@ class Buzzer {
 		let acWhen = this.acTime(when)
 
 		this.ac.resume()
+        if (this.ac.state != "running") {
+            toast("Browser won't let me play sound yet. Try pressing a button first.")
+            return
+        }
 		gain.setTargetAtTime(this.txGain, acWhen, 0.001)
 	}
 
@@ -502,9 +506,6 @@ class Vail {
 				this.beginTx()
 			} else {
 				this.endTx()
-				if (this.buzzer.ac.state != "running") {
-					this.error("Browser won't let me play sound yet. Try pressing a button first.")
-				}
 			}
 		}
 	}

static/vail.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+  <defs>
+    <mask id="mask-0">
+      <rect x="234.28" y="129.248" width="247.019" height="167.227" style="fill: rgb(255, 255, 255);"/>
+    </mask>
+  </defs>
+  <g style="" transform="matrix(0.95245, 0, 0, 1.139872, 6.889973, -7.454849)">
+    <path d="M 327.185 337.24 L 360.06 463.215 L 214.596 463.215 L 327.185 337.24 Z" style="fill: rgb(0, 150, 136);" transform="matrix(0.859836, -0.51057, 0.51057, 0.859836, -104.141418, 118.932152)" bx:shape="triangle 214.596 337.24 145.464 125.975 0.774 0 1@97556a29"/>
+    <rect x="24.773" y="44.071" width="460.948" height="294.539" style="fill: rgb(0, 150, 136);" rx="66.036" ry="66.036"/>
+  </g>
+  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" d="M 296.4 154.545"/>
+  <g transform="matrix(1.584063, 0, 0, 1.70527, -312.019287, -153.773422)" style="mask: url(#mask-0);">
+    <rect x="43.405" y="231.448" width="284.629" height="38.553" style="fill: rgb(255, 255, 255);" rx="7.898" ry="7.898"/>
+    <path d="M 55.235 167.548 L 306.103 167.548 L 308.543 167.548 L 310.582 168.864 L 360.729 201.228 L 448.168 201.228 L 448.168 217.228 L 434.05 217.228 L 358.289 217.228 L 355.848 217.228 L 353.809 215.912 L 303.663 183.548 L 55.235 183.548 L 55.235 167.548 Z" style="fill: rgb(255, 255, 255);"/>
+    <rect x="412.367" y="179.765" width="32.602" height="27.855" style="fill: rgb(255, 255, 255);"/>
+    <path d="M 383.813 153.485 C 388.547 139.021 466.546 139.043 472.225 153.485 C 477.511 166.926 445.092 184.036 445.092 184.036 L 412.726 184.036 C 412.726 184.036 379.124 167.804 383.813 153.485 Z" style="stroke-linejoin: round; fill: rgb(255, 255, 255);"/>
+    <path d="M 257.196 232.936 L 280.351 232.936 L 273.245 196.76 L 264.768 196.76 L 257.196 232.936 Z" style="fill: rgb(255, 255, 255);"/>
+    <rect x="119.534" y="151.839" width="36.544" height="98.388" style="fill: rgb(255, 255, 255);" rx="10.068" ry="10.068"/>
+    <rect x="265.233" y="170.764" width="7.081" height="19.702" style="fill: rgb(255, 255, 255);"/>
+    <rect y="201.262" width="16.756" height="33.909" style="fill: rgb(255, 255, 255);" x="61.162"/>
+    <rect x="66" y="163.211" width="7.081" height="31.292" style="fill: rgb(255, 255, 255);"/>
+    <rect y="156.105" width="16.756" height="8.523" style="fill: rgb(255, 255, 255);" x="61.162"/>
+  </g>
+</svg>