Seasons

static/index.html

@@ -19,6 +19,7 @@
     <div class="game-panel">
     <p class="eyebrow game-eyebrow">A SHARED EXPERIMENT</p>
     <h1>THE BUTTON</h1>
+    <p id="season-subtitle" class="season-subtitle">Loading season&hellip;</p>
     <p class="game-tagline">One clock. Everyone's nerve.</p>
 
     <section id="timer-section">
@@ -27,6 +28,7 @@
       <div id="zone-bar"><div id="zone-marker"></div></div>
       <p id="history-global-summary" aria-live="polite"></p>
       <p id="presence-count" class="presence-count" role="status">Checking who's here&hellip;</p>
+      <p id="season-label" class="season-label"></p>
     </section>
 
     <section id="button-section">
@@ -41,6 +43,7 @@
     <nav id="section-nav" aria-label="Game sections">
       <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="seasons-section" aria-controls="seasons-section" aria-expanded="false">Seasons</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>
@@ -58,6 +61,21 @@
       <p class="welcome-hint">Choose a section above to join in, compare scores, or say hello.</p>
     </div>
 
+    <section id="seasons-section" data-panel hidden aria-labelledby="seasons-heading">
+      <header class="panel-header"><p class="eyebrow">A NEW CHAPTER, FOUR TIMES A YEAR</p>
+        <h2 id="seasons-heading">The seasonal leaderboard.</h2>
+        <p class="panel-description">New scores. Familiar faces. Every equinox and solstice brings a fresh start.</p>
+      </header>
+      <div class="panel-body">
+        <div id="season-current" class="rival-card"></div>
+        <h3 class="subheading">Season champions</h3>
+        <p class="fine-print">Starts at 00:00 UTC on the astronomical equinox/solstice date. Joint top scorers share the win. Only players who pressed can win, including zero-point presses.</p>
+        <p id="seasons-status" role="status">Loading seasons&hellip;</p>
+        <div class="table-scroll"><table id="season-winners" aria-label="Season winners and durations"></table></div>
+        <div id="season-standings"></div>
+      </div>
+    </section>
+
     <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>
@@ -168,7 +186,7 @@
       <header class="panel-header">
       <div class="header-topline"><p class="eyebrow">THE LONG GAME</p><span class="site-badge">Updates every 5s</span></div>
       <h2 id="leaderboard-heading">Leaderboard</h2>
-      <p class="panel-description">A little patience. A little nerve. See who's making every second count.</p>
+      <p class="panel-description">This season's scores. A little patience. A little nerve. See who's making every second count.</p>
       </header>
       <div class="panel-body">
       <p id="leaderboard-status" role="status">Loading scores&hellip;</p>
@@ -213,7 +231,7 @@
     <section id="stats-section" data-panel hidden>
       <header class="panel-header"><p class="eyebrow">THE FINAL CHAPTER</p>
       <h2>Every second had a story.</h2>
-      <p class="panel-description">The clock has stopped. Here's how we got here.</p></header>
+      <p class="panel-description">This season's clock has stopped. Here's how we got here. A new game starts next season.</p></header>
       <div class="panel-body">
       <div id="stats-summary"></div>
       <h3>Presses per zone</h3>
@@ -235,7 +253,7 @@
       <ol class="rules-list">
         <li><div><h3>Keep the clock alive</h3><p>Every press resets the countdown for everyone.</p></div></li>
         <li><div><h3>Wait for your moment</h3><p>The lower the countdown, the more you score. Each zone awards a fixed number of points per press.</p></div></li>
-        <li><div><h3>Don't wait too long</h3><p>If the countdown reaches zero, the game is over. Forever.</p></div></li>
+        <li><div><h3>Don't wait too long</h3><p>If the countdown reaches zero, this season's game ends. The next equinox or solstice starts a new countdown and resets scores. Accounts and chat stay.</p></div></li>
       </ol>
       <h3 class="subheading">Six zones. Increasing stakes.</h3>
       <div id="rules-zones" class="zone-guide"></div>