Update install/index.html

install/index.html

@@ -492,6 +492,61 @@
       100% { opacity: 0; transform: translateY(-10vh) scale(1); }
     }
 
+    /* ===== UPDATES / CHANGELOG ===== */
+    .updates-list { display: flex; flex-direction: column; gap: 0; max-width: 680px; margin: 0 auto; }
+    .update-item {
+      position: relative;
+      padding: 20px 20px 20px 40px;
+      border-left: 2px solid var(--border);
+      transition: border-color 0.2s;
+    }
+    .update-item:hover { border-left-color: var(--green); }
+    .update-item:last-child { border-left-color: transparent; }
+    .update-dot {
+      position: absolute; left: -6px; top: 24px;
+      width: 10px; height: 10px; border-radius: 50%;
+      background: var(--border); border: 2px solid var(--bg);
+      transition: background 0.2s, box-shadow 0.2s;
+    }
+    .update-item:hover .update-dot {
+      background: var(--green);
+      box-shadow: 0 0 8px rgba(34,197,94,0.4);
+    }
+    .update-meta {
+      display: flex; align-items: center; gap: 10px;
+      margin-bottom: 6px;
+    }
+    .update-badge {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 2px 10px; border-radius: 9999px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px; font-weight: 600;
+      text-transform: uppercase; letter-spacing: 0.5px;
+    }
+    .update-badge[data-type="release"] { background: var(--green-glow); color: var(--green); }
+    .update-badge[data-type="patch"] { background: rgba(6,182,212,0.12); color: var(--cyan); }
+    .update-badge[data-type="news"] { background: rgba(234,179,8,0.12); color: var(--yellow); }
+    .update-date {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px; color: var(--text-muted);
+    }
+    .update-title {
+      font-size: 15px; font-weight: 600; color: var(--text);
+      margin-bottom: 4px;
+    }
+    .update-desc {
+      font-size: 13px; color: var(--text-dim); line-height: 1.6;
+    }
+    .update-version {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px; color: var(--text-muted);
+    }
+    .updates-empty {
+      text-align: center; padding: 40px 20px;
+      color: var(--text-muted); font-size: 14px;
+      font-family: 'JetBrains Mono', monospace;
+    }
+
     /* ===== GLOW CURSOR FOLLOWER ===== */
     .cursor-glow {
       position: fixed;
@@ -1007,6 +1062,18 @@
     </div>
   </section>
 
+  <!-- UPDATES / CHANGELOG -->
+  <section id="updates">
+    <div class="container fade-in">
+      <div class="section-label">// changelog</div>
+      <h2 class="section-title">Updates & News</h2>
+      <p class="section-desc">Latest releases, patches, and project news.</p>
+      <div class="updates-list" id="updatesList">
+        <div class="updates-empty">Loading updates...</div>
+      </div>
+    </div>
+  </section>
+
   <!-- FOOTER -->
   <footer>
     <p>Terminal Chat &mdash; Built with Python &amp; TCP Sockets</p>
@@ -1015,6 +1082,7 @@
       <a href="#docs">Documentation</a> &nbsp;&middot;&nbsp;
       <a href="#features">Features</a> &nbsp;&middot;&nbsp;
       <a href="#contribute">Contribute</a> &nbsp;&middot;&nbsp;
+      <a href="#updates">Updates</a> &nbsp;&middot;&nbsp;
       <a href="https://git.de-roo.org/ben/pychat" target="_blank" rel="noopener noreferrer">Source Code</a>
     </p>
   </footer>
@@ -1321,6 +1389,36 @@
         glow.style.top = e.clientY + 'px';
       });
     })();
+
+    // === LOAD UPDATES FROM JSON ===
+    (async function loadUpdates() {
+      const container = document.getElementById('updatesList');
+      try {
+        const res = await fetch('/updates.json?v=' + Date.now());
+        if (!res.ok) throw new Error('Failed to load');
+        const updates = await res.json();
+
+        if (!updates.length) {
+          container.innerHTML = '<div class="updates-empty">No updates yet. Check back soon.</div>';
+          return;
+        }
+
+        container.innerHTML = updates.map(item => `
+          <div class="update-item">
+            <div class="update-dot"></div>
+            <div class="update-meta">
+              <span class="update-badge" data-type="${item.type}">${item.type}</span>
+              ${item.version ? `<span class="update-version">${item.version}</span>` : ''}
+              <span class="update-date">${new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
+            </div>
+            <div class="update-title">${item.title}</div>
+            <div class="update-desc">${item.description}</div>
+          </div>
+        `).join('');
+      } catch (e) {
+        container.innerHTML = '<div class="updates-empty">Could not load updates.</div>';
+      }
+    })();
   </script>
 </body>
 </html>