Add Simplex in 5 Minutes interactive overview

- Add /overview route with vanilla JS interactive presentation
- Add floating "Simplex in 5 Minutes" badge on all pages (right-aligned below nav)
- Create 7-episode walkthrough covering Simplex fundamentals
- Include hero, text, cards, code examples, pillars, landmarks, and planner sections
- Implement smooth transitions, fade-ins, and keyboard navigation
- Badge scales responsively with page content
- Overview module bundled from proposals/ directory (untracked)
- Zero dependencies: pure vanilla JavaScript, no React/Babel overhead

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: brannn

.gitignore

@@ -36,3 +36,7 @@ Gemfile.lock
 
 # Planning (internal drafts)
 planning/
+
+# Proposals (internal demos - bundled but not tracked)
+proposals/simplex-overview.js
+proposals/simplex-overview.jsx

web/Dockerfile

@@ -18,6 +18,10 @@ RUN go mod download
 # Copy web source code
 COPY web/ ./
 
+# Copy proposals directory for bundling (simplex-overview.js)
+COPY proposals/ /app/proposals/
+RUN cp /app/proposals/simplex-overview.js ./cmd/server/static/js/simplex-overview.js || true
+
 # Build the binary
 RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o simplex-web ./cmd/server
 

web/cmd/server/static/css/styles.css

@@ -148,6 +148,59 @@ body {
     color: white;
 }
 
+/* Floating Overview Badge */
+.overview-badge {
+    position: fixed;
+    top: 73px;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 1400px;
+    width: 100%;
+    z-index: 999;
+    pointer-events: none;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 2rem;
+}
+
+.overview-badge-inner {
+    pointer-events: auto;
+    background: linear-gradient(135deg, rgba(218, 119, 86, 0.95), rgba(232, 149, 110, 0.95));
+    color: white;
+    padding: 0.25rem 0.625rem;
+    border-radius: 9999px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-decoration: none;
+    box-shadow: 0 2px 6px rgba(218, 119, 86, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.overview-badge-inner:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 8px rgba(218, 119, 86, 0.5), 0 2px 3px rgba(0, 0, 0, 0.4);
+    color: white;
+}
+
+.overview-badge-icon {
+    font-size: 0.625rem;
+}
+
+@media (max-width: 768px) {
+    .overview-badge {
+        top: 70px;
+        padding: 0 1rem;
+    }
+
+    .overview-badge-inner {
+        font-size: 0.625rem;
+        padding: 0.2rem 0.5rem;
+    }
+}
+
 /* GitHub star count badge */
 .github-star-count {
     display: inline-block;

web/cmd/server/static/js/common.js

@@ -72,6 +72,20 @@ document.addEventListener('DOMContentLoaded', () => {
             })
             .catch(() => {});
     }
+
+    // Add floating overview badge (except on overview page itself)
+    if (!window.location.pathname.includes('/overview')) {
+        const badgeContainer = document.createElement('div');
+        badgeContainer.className = 'overview-badge';
+
+        const badgeLink = document.createElement('a');
+        badgeLink.href = '/overview';
+        badgeLink.className = 'overview-badge-inner';
+        badgeLink.innerHTML = '<span class="overview-badge-icon">▶</span><span>Simplex in 5 Minutes</span>';
+
+        badgeContainer.appendChild(badgeLink);
+        document.body.appendChild(badgeContainer);
+    }
 });
 
 // Smooth scroll with offset for fixed navbar