From 5307fa7215caba88b95de89ad36fbcec6116ebb7 Mon Sep 17 00:00:00 2001
From: Ben de Roo <ben@de-roo.org>
Date: Sat, 21 Feb 2026 11:11:20 +0100
Subject: [PATCH] Update install/index.html

---
 install/index.html | 303 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 301 insertions(+), 2 deletions(-)

diff --git a/install/index.html b/install/index.html
index 51c408f..c822777 100644
--- a/install/index.html
+++ b/install/index.html
@@ -369,16 +369,132 @@
     }
     .fade-in.visible { opacity: 1; transform: translateY(0); }
 
+    /* ===== INTERACTIVE TERMINAL DOTS ===== */
+    .terminal-bar-dots span:first-child,
+    .install-dots span:first-child {
+      cursor: pointer;
+      transition: transform 0.15s, box-shadow 0.15s;
+    }
+    .terminal-bar-dots span:first-child:hover,
+    .install-dots span:first-child:hover {
+      transform: scale(1.3);
+      box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
+    }
+
+    /* Terminal closing animation */
+    .terminal-closing {
+      animation: terminalClose 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
+    }
+    @keyframes terminalClose {
+      0% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.98, 0.5); }
+      100% { opacity: 0; transform: scale(0.95, 0.01); }
+    }
+    .terminal-opening {
+      animation: terminalOpen 0.5s cubic-bezier(0, 0.55, 0.45, 1) forwards;
+    }
+    @keyframes terminalOpen {
+      0% { opacity: 0; transform: scale(0.95, 0.01); }
+      50% { opacity: 0.7; transform: scale(0.98, 0.5); }
+      100% { opacity: 1; transform: scale(1); }
+    }
+
+    /* ===== CONTRIBUTE SECTION ===== */
+    .contribute-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 16px;
+    }
+    .contribute-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 24px;
+      transition: all 0.3s;
+      position: relative;
+      overflow: hidden;
+    }
+    .contribute-card::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 12px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .contribute-card:hover {
+      border-color: var(--border-hover);
+      background: var(--bg-card-hover);
+      transform: translateY(-2px);
+    }
+    .contribute-card:hover::after { opacity: 1; }
+    .contribute-card .card-number {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 48px;
+      font-weight: 700;
+      line-height: 1;
+      margin-bottom: 16px;
+      background: linear-gradient(135deg, var(--green), transparent);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      opacity: 0.25;
+    }
+
+    /* ===== FLOATING PARTICLES ===== */
+    .particles {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+      overflow: hidden;
+    }
+    .particle {
+      position: absolute;
+      width: 2px;
+      height: 2px;
+      border-radius: 50%;
+      background: var(--green);
+      opacity: 0;
+      animation: floatUp linear infinite;
+    }
+    @keyframes floatUp {
+      0% { opacity: 0; transform: translateY(100vh) scale(0); }
+      10% { opacity: 0.3; }
+      90% { opacity: 0.1; }
+      100% { opacity: 0; transform: translateY(-10vh) scale(1); }
+    }
+
+    /* ===== GLOW CURSOR FOLLOWER ===== */
+    .cursor-glow {
+      position: fixed;
+      width: 300px;
+      height: 300px;
+      border-radius: 50%;
+      background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);
+      pointer-events: none;
+      z-index: 1;
+      transform: translate(-50%, -50%);
+      transition: left 0.3s ease-out, top 0.3s ease-out;
+    }
+
     /* ===== RESPONSIVE ===== */
     @media (max-width: 768px) {
-      .features-grid, .docs-grid { grid-template-columns: 1fr; }
+      .features-grid, .docs-grid, .contribute-grid { grid-template-columns: 1fr; }
       .hero { padding: 130px 24px 60px; }
       .hero p { font-size: 16px; }
+      .cursor-glow { display: none; }
     }
   </style>
 </head>
 <body>
 
+  <!-- FLOATING PARTICLES -->
+  <div class="particles" id="particles"></div>
+
+  <!-- CURSOR GLOW -->
+  <div class="cursor-glow" id="cursorGlow"></div>
+
   <!-- NAV -->
   <nav id="navbar">
     <div class="nav-inner">
@@ -773,13 +889,83 @@
     </div>
   </section>
 
+  <!-- CONTRIBUTE / JOIN THE PROJECT -->
+  <section id="contribute">
+    <div class="container fade-in">
+      <div class="section-label">// contribute</div>
+      <h2 class="section-title">Make it yours</h2>
+      <p class="section-desc">Terminal Chat is open source and built to be extended. Whether you want to add new features, build mods, or fix bugs &mdash; you're welcome to join.</p>
+
+      <div class="contribute-grid">
+
+        <div class="contribute-card">
+          <div class="card-number">01</div>
+          <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
+            <div class="feature-icon">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            </div>
+            <h3 style="font-size:16px;font-weight:600;">Build mods</h3>
+          </div>
+          <p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Add new commands, custom themes, message encryption, file sharing, or anything else you can think of. The codebase is simple and easy to extend.</p>
+        </div>
+
+        <div class="contribute-card">
+          <div class="card-number">02</div>
+          <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
+            <div class="feature-icon" style="background:rgba(6,182,212,0.15);">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg>
+            </div>
+            <h3 style="font-size:16px;font-weight:600;">Improve the core</h3>
+          </div>
+          <p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Help fix bugs, improve Windows/macOS compatibility, optimize performance, or refactor the codebase. Every PR matters.</p>
+        </div>
+
+        <div class="contribute-card">
+          <div class="card-number">03</div>
+          <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
+            <div class="feature-icon" style="background:rgba(234,179,8,0.15);">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
+            </div>
+            <h3 style="font-size:16px;font-weight:600;">Share ideas</h3>
+          </div>
+          <p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Open an issue to suggest features, report bugs, or discuss improvements. Even if you don't code, your input helps shape the project.</p>
+        </div>
+
+        <div class="contribute-card">
+          <div class="card-number">04</div>
+          <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
+            <div class="feature-icon" style="background:rgba(249,115,22,0.15);">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
+            </div>
+            <h3 style="font-size:16px;font-weight:600;">Fork & experiment</h3>
+          </div>
+          <p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Fork the repo and go wild. Build your own version, add a GUI, make it work with Discord bots &mdash; the code is yours to play with.</p>
+        </div>
+
+      </div>
+
+      <!-- CTA -->
+      <div style="margin-top:48px;text-align:center;">
+        <p style="font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text-dim);margin-bottom:20px;">Ready to contribute? Start here:</p>
+        <div class="code-block" style="max-width:500px;margin:0 auto 24px;text-align:left;">
+          <span class="t-dim"># Clone and start hacking</span><br>
+          <span class="t-green">$</span> git clone &lt;repo-url&gt;<br>
+          <span class="t-green">$</span> cd terminal-chat<br>
+          <span class="t-green">$</span> python3 server.py <span class="t-dim">&amp;</span> python3 client.py
+        </div>
+        <p style="font-size:13px;color:var(--text-muted);">No complex setup. No build tools. Just Python.</p>
+      </div>
+    </div>
+  </section>
+
   <!-- FOOTER -->
   <footer>
     <p>Terminal Chat &mdash; Built with Python &amp; TCP Sockets</p>
     <p style="margin-top: 8px;">
       <a href="#installatie">Install</a> &nbsp;&middot;&nbsp;
       <a href="#docs">Documentation</a> &nbsp;&middot;&nbsp;
-      <a href="#features">Features</a>
+      <a href="#features">Features</a> &nbsp;&middot;&nbsp;
+      <a href="#contribute">Contribute</a>
     </p>
   </footer>
 
@@ -972,6 +1158,119 @@
     }, { threshold: 0.15 });
 
     document.querySelectorAll('.fade-in').forEach(el => fadeObserver.observe(el));
+
+    // === INTERACTIVE RED DOTS (close & reboot terminals) ===
+    function setupRedDots() {
+      // Main terminal red dot
+      const terminalDots = document.querySelectorAll('.terminal-bar-dots');
+      terminalDots.forEach(dotsContainer => {
+        const redDot = dotsContainer.querySelector('span:first-child');
+        const termWindow = dotsContainer.closest('.terminal-window');
+        if (!redDot || !termWindow) return;
+
+        redDot.title = 'Close terminal';
+        redDot.addEventListener('click', () => {
+          if (termWindow.classList.contains('terminal-closing') || termWindow.classList.contains('terminal-opening')) return;
+
+          termWindow.classList.add('terminal-closing');
+          termWindow.addEventListener('animationend', function onClose() {
+            termWindow.removeEventListener('animationend', onClose);
+            termWindow.style.visibility = 'hidden';
+            termWindow.classList.remove('terminal-closing');
+
+            // After 2 seconds, reopen and restart animation
+            setTimeout(() => {
+              // Reset the terminal contents
+              const loginPhase = document.getElementById('loginPhase');
+              const chatPhase = document.getElementById('chatPhase');
+              const chatMessages = document.getElementById('chatMessages');
+              const greenLine = document.getElementById('greenLine');
+              const inputArea = document.getElementById('inputArea');
+              const typingText = document.getElementById('typingText');
+
+              // Reset phases
+              loginPhase.style.display = 'block';
+              loginPhase.style.opacity = '1';
+              chatPhase.style.display = 'none';
+              chatMessages.innerHTML = '';
+              greenLine.style.opacity = '0';
+              inputArea.style.opacity = '0';
+              typingText.textContent = '';
+
+              // Reset all login lines
+              document.querySelectorAll('#loginPhase .terminal-line').forEach(line => {
+                line.classList.remove('visible');
+              });
+
+              termWindow.style.visibility = 'visible';
+              termWindow.classList.add('terminal-opening');
+              termWindow.addEventListener('animationend', function onOpen() {
+                termWindow.removeEventListener('animationend', onOpen);
+                termWindow.classList.remove('terminal-opening');
+                // Restart the login animation
+                startLoginPhase();
+              });
+            }, 2000);
+          });
+        });
+      });
+
+      // Install box red dot
+      const installDots = document.querySelectorAll('.install-dots');
+      installDots.forEach(dotsContainer => {
+        const redDot = dotsContainer.querySelector('span:first-child');
+        const installBox = dotsContainer.closest('.install-box');
+        if (!redDot || !installBox) return;
+
+        redDot.title = 'Close terminal';
+        redDot.addEventListener('click', () => {
+          if (installBox.classList.contains('terminal-closing') || installBox.classList.contains('terminal-opening')) return;
+
+          installBox.classList.add('terminal-closing');
+          installBox.addEventListener('animationend', function onClose() {
+            installBox.removeEventListener('animationend', onClose);
+            installBox.style.visibility = 'hidden';
+            installBox.classList.remove('terminal-closing');
+
+            setTimeout(() => {
+              installBox.style.visibility = 'visible';
+              installBox.classList.add('terminal-opening');
+              installBox.addEventListener('animationend', function onOpen() {
+                installBox.removeEventListener('animationend', onOpen);
+                installBox.classList.remove('terminal-opening');
+              });
+            }, 2000);
+          });
+        });
+      });
+    }
+
+    setupRedDots();
+
+    // === FLOATING PARTICLES ===
+    (function createParticles() {
+      const container = document.getElementById('particles');
+      if (!container) return;
+      for (let i = 0; i < 20; i++) {
+        const p = document.createElement('div');
+        p.classList.add('particle');
+        p.style.left = Math.random() * 100 + '%';
+        p.style.animationDuration = (12 + Math.random() * 18) + 's';
+        p.style.animationDelay = (Math.random() * 15) + 's';
+        p.style.width = p.style.height = (1.5 + Math.random() * 2) + 'px';
+        container.appendChild(p);
+      }
+    })();
+
+    // === CURSOR GLOW FOLLOWER ===
+    (function cursorGlow() {
+      const glow = document.getElementById('cursorGlow');
+      if (!glow) return;
+      document.addEventListener('mousemove', (e) => {
+        glow.style.left = e.clientX + 'px';
+        glow.style.top = e.clientY + 'px';
+      });
+    })();
   </script>
 </body>
 </html>