|
| 1 | +# Loki Mode -- Interactive Content Index |
| 2 | + |
| 3 | +Complete listing of all interactive HTML experiences in the Loki Mode repository. 18 files total across three categories. |
| 4 | + |
| 5 | +## Walkthroughs (11 HTML files) |
| 6 | + |
| 7 | +Located in `docs/walkthrough/`. |
| 8 | + |
| 9 | +| File | Title | Description | Size | |
| 10 | +|------|-------|-------------|------| |
| 11 | +| `index.html` | Build Your First App | Step-by-step tutorial from PRD to deployment | 43 KB | |
| 12 | +| `architecture.html` | System Architecture | Interactive SVG diagram of the full system | 34 KB | |
| 13 | +| `comparison.html` | Feature Comparison | Loki Mode vs competitor feature matrix | 26 KB | |
| 14 | +| `gallery.html` | Project Gallery | 24 example projects across categories | 37 KB | |
| 15 | +| `video-placeholder.html` | Build Process Animation | CSS-animated build walkthrough | 25 KB | |
| 16 | +| `build-demo.html` | Full Build Video Demo | 12-iteration build replay with timeline | 18 KB | |
| 17 | +| `ide-demo.html` | Purple Lab IDE Demo | Browser-based IDE mockup with editor and build panel | 17 KB | |
| 18 | +| `enterprise-demo.html` | Enterprise Features Demo | Audit logging, RBAC, security, compliance | 13 KB | |
| 19 | +| `provider-race-demo.html` | Multi-Provider Race Demo | Claude vs Codex vs Gemini animated race | 17 KB | |
| 20 | +| `memory-demo.html` | Memory System Demo | Three-layer memory with interactive exploration | 19 KB | |
| 21 | +| `dashboard-demo.html` | Dashboard Monitoring Demo | Real-time dashboard with live build log | 17 KB | |
| 22 | + |
| 23 | +**Hub page**: `docs/walkthrough/hub.html` links to all walkthroughs with categories and estimated durations. |
| 24 | + |
| 25 | +## Demo Apps (6 HTML files) |
| 26 | + |
| 27 | +Located in `examples/`. Each was generated by Loki Mode from a single prompt. |
| 28 | + |
| 29 | +| File | Title | Description | Size | |
| 30 | +|------|-------|-------------|------| |
| 31 | +| `demo-saas-dashboard.html` | SaaS Dashboard | KPI cards, sparklines, revenue chart, activity feed | 9 KB | |
| 32 | +| `demo-task-manager.html` | Task Manager | Kanban board with drag-and-drop and localStorage | 9 KB | |
| 33 | +| `demo-chat-app.html` | Chat App | Real-time chat with typing indicators and auto-scroll | 8 KB | |
| 34 | +| `demo-landing-page.html` | Landing Page | Hero, features, pricing, FAQ accordion, newsletter | 15 KB | |
| 35 | +| `demo-portfolio.html` | Portfolio | Animated gradients, skill bars, project cards, contact form | 12 KB | |
| 36 | +| `demo-ecommerce.html` | E-Commerce | Product filters, sorting, star ratings, cart counter | 12 KB | |
| 37 | + |
| 38 | +## Product Website (1 HTML file) |
| 39 | + |
| 40 | +| File | Title | Description | Size | |
| 41 | +|------|-------|-------------|------| |
| 42 | +| `website/index.html` | Loki Mode Product Website | Full landing page with hero, terminal animation, features, pricing | 38 KB | |
| 43 | + |
| 44 | +## Summary |
| 45 | + |
| 46 | +| Category | Count | Total Size | |
| 47 | +|----------|-------|------------| |
| 48 | +| Walkthroughs | 11 | 266 KB | |
| 49 | +| Demo Apps | 6 | 65 KB | |
| 50 | +| Product Website | 1 | 38 KB | |
| 51 | +| **Total** | **18** | **369 KB** | |
| 52 | + |
| 53 | +## Viewing Locally |
| 54 | + |
| 55 | +All files are self-contained HTML. Open directly in any browser: |
| 56 | + |
| 57 | +```bash |
| 58 | +# Open the demo hub (links to everything) |
| 59 | +open docs/walkthrough/hub.html |
| 60 | + |
| 61 | +# Open a specific walkthrough |
| 62 | +open docs/walkthrough/architecture.html |
| 63 | + |
| 64 | +# Open a demo app |
| 65 | +open examples/demo-saas-dashboard.html |
| 66 | + |
| 67 | +# Or serve the entire repo with a local server |
| 68 | +python3 -m http.server 8080 |
| 69 | +# Then visit http://localhost:8080/docs/walkthrough/hub.html |
| 70 | +``` |
| 71 | + |
| 72 | +## Design |
| 73 | + |
| 74 | +All interactive content shares these characteristics: |
| 75 | + |
| 76 | +- **Self-contained** -- Single HTML file with embedded CSS and JavaScript |
| 77 | +- **No build step** -- Open in any browser, works offline (except Google Fonts) |
| 78 | +- **Dark theme** -- Consistent dark design with purple accent (#553DE9) |
| 79 | +- **Responsive** -- Adapts to mobile, tablet, and desktop viewports |
| 80 | +- **No external dependencies** -- No npm packages, no CDN libraries, no frameworks |
0 commit comments