Open-ended predictions, faded past six weeks; upcoming periods list

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

static/index.html

@@ -14,7 +14,7 @@
     <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-    <link rel="stylesheet" href="/styles.css?v=1.2.0">
+    <link rel="stylesheet" href="/styles.css?v=1.3.0">
   </head>
   <body>
     <header class="topbar">
@@ -48,6 +48,7 @@
           <li><span class="key key-period"></span>Period</li>
           <li><span class="key key-predicted"></span>Predicted period</li>
           <li><span class="key key-fertile"></span>Fertile window (estimate)</li>
+          <li><span class="key key-predicted faded"></span>More than 6 weeks ahead, less certain</li>
           <li><span class="key key-ovulation"></span>Estimated ovulation</li>
           <li><span class="flow" aria-hidden="true"><i class="on"></i><i class="on"></i><i></i></span>Flow strength, logged or usual</li>
           <li><span class="key key-spotting"></span>Spotting</li>
@@ -57,6 +58,11 @@
 
       <section class="view" id="view-stats" aria-labelledby="tab-stats" hidden>
         <div class="tiles" id="tiles"></div>
+        <div class="card">
+          <h2>Upcoming periods</h2>
+          <p class="subtitle">The next year, for planning ahead. The likely range widens the further out it is.</p>
+          <ul class="upcoming" id="upcoming"></ul>
+        </div>
         <div class="card" id="chart-card">
           <h2>Cycle length</h2>
           <p class="subtitle">Days from one period to the next, most recent on the right</p>
@@ -130,7 +136,7 @@
       </form>
     </dialog>
 
-    <script src="/cycle.js?v=1.2.0"></script>
-    <script src="/app.js?v=1.2.0"></script>
+    <script src="/cycle.js?v=1.3.0"></script>
+    <script src="/app.js?v=1.3.0"></script>
   </body>
 </html>