replace user buzzer with big red button

public/buzzer.html

@@ -5,6 +5,7 @@
     Error:
     <code></code>
   </div>
+
   <div id="points-admin" class="admin-only">
     <h2>Admin</h2>
     <div><a href="monitor.html" onclick="this.href='monitor.html'+location.hash">Monitor</a></div>
@@ -45,24 +46,37 @@
       </label>
     </div>
   </div>
-  <div id="info">
-    <label class="myname player-only"
+
+  <div id="userinfo" class="player-only">
+    <label
       >You:
       <input
         type="text"
         name="username"
         id="username"
         placeholder="Please put your name here ..."
-    /></label>
+        data-onchange="q('#set-name').disabled = false"
+    /><button id="set-name" data-onclick="
+      set_name(named.username.value)
+      target.disabled = true
+      ">set name</button>
+    </label>
+  </div>
+
+  <div id="info" class="admin-only">
     <h2>All Players</h2>
     <ul class="players">
       <!-- players (see template#player) will be inserted here -->
     </ul>
   </div>
+
   <div id="buzzbox" class="player-only">
-    <p id="active">BZZZZZ!</p>
-    <p id="ready">Press <strong id="bkey">{key.name}</strong> to activate buzzer.</p>
-    <p id="inactive">Please focus the window to allow the buzzer to work.</p>
+    <button id="buzzbutton">
+      <div class="ready">Press the big red button</div>
+      <div class="active">BZZZZZ!</div>
+    </button>
+    <p>or press <strong id="bkey">{key.name}</strong> to activate buzzer.</p>
+    <p class="inactive">Please focus the window to allow the buzzer to work.</p>
   </div>
 </body>