Alerts

static/index.html

@@ -42,6 +42,7 @@
       <button type="button" data-section="account-section" aria-controls="account-section" aria-expanded="false">Log in / Join</button>
       <button type="button" data-section="leaderboard-section" aria-controls="leaderboard-section" aria-expanded="false">Leaderboard</button>
       <button type="button" data-section="chat-section" aria-controls="chat-section" aria-expanded="false">Chat</button>
+      <button type="button" data-section="alerts-section" aria-controls="alerts-section" aria-expanded="false">Alerts</button>
       <button type="button" data-section="stats-section" aria-controls="stats-section" aria-expanded="false" hidden>Final stats</button>
       <button type="button" data-section="rules" aria-controls="rules" aria-expanded="false">Rules</button>
       <button type="button" data-section="share-controls" aria-controls="share-controls" aria-expanded="false" hidden>Share</button>
@@ -57,6 +58,25 @@
       <p class="welcome-hint">Choose a section above to join in, compare scores, or say hello.</p>
     </div>
 
+    <section id="alerts-section" data-panel hidden aria-labelledby="alerts-heading">
+      <header class="panel-header"><p class="eyebrow">WAIT ON YOUR TERMS</p>
+        <h2 id="alerts-heading">Don't miss your moment.</h2>
+        <p class="panel-description">Choose a zone. We'll give you a nudge when the clock gets there.</p>
+      </header>
+      <div class="panel-body">
+        <form id="alerts-form">
+          <label class="alert-option"><input id="alerts-enabled" type="checkbox"> Enable zone alerts</label>
+          <label class="field" for="alerts-zone"><span>Notify me on entering</span><select id="alerts-zone" required><option value="blue">Blue zone</option><option value="yellow">Yellow zone</option><option value="red">Red zone</option><option value="black">Black zone</option><option value="white">White zone</option></select></label>
+          <label class="alert-option"><input id="alerts-sound" type="checkbox"> Play a gentle chime</label>
+          <label class="alert-option"><input id="alerts-notification" type="checkbox"> Show a browser notification</label>
+          <div class="form-actions"><button class="primary-button" id="alerts-save" type="submit">Save alerts</button><button id="alerts-test" type="button">Test chime</button></div>
+        </form>
+        <p id="alerts-status" role="status" class="fine-print">Alerts are off by default.</p>
+        <p id="alerts-error" class="error" role="status"></p>
+        <div class="alert-note"><h3 class="subheading">A heads-up, not a guarantee</h3><p>Keep this page open. Alerts follow server updates, usually every five seconds. Background tabs may be delayed or suspended, and very short zones can be missed. Alerts do not work after the page is closed.</p><p>Opening the page, saving settings, or someone resetting the clock won't trigger an alert. Each selected zone alerts once per countdown. Preferences stay in this browser; no account is required.</p><p>Sound may need a click on Test chime after reopening the page. Browser notifications require permission and a supported secure browser (HTTPS or localhost).</p></div>
+      </div>
+    </section>
+
       <section id="share-controls" data-panel hidden>
         <header class="panel-header">
         <p class="eyebrow">A MOMENT WORTH SHARING</p>