# Loki Mode -- Interactive Content Index

Complete listing of all interactive HTML experiences in the Loki Mode repository. 18 files total across three categories.

## Walkthroughs (11 HTML files)

Located in `docs/walkthrough/`.

| File | Title | Description | Size |
|------|-------|-------------|------|
| `index.html` | Build Your First App | Step-by-step tutorial from PRD to deployment | 43 KB |
| `architecture.html` | System Architecture | Interactive SVG diagram of the full system | 34 KB |
| `comparison.html` | Feature Comparison | Loki Mode vs competitor feature matrix | 26 KB |
| `gallery.html` | Project Gallery | 24 example projects across categories | 37 KB |
| `video-placeholder.html` | Build Process Animation | CSS-animated build walkthrough | 25 KB |
| `build-demo.html` | Full Build Video Demo | 12-iteration build replay with timeline | 18 KB |
| `ide-demo.html` | Purple Lab IDE Demo | Browser-based IDE mockup with editor and build panel | 17 KB |
| `enterprise-demo.html` | Enterprise Features Demo | Audit logging, RBAC, security, compliance | 13 KB |
| `provider-race-demo.html` | Multi-Provider Race Demo | Claude vs Codex vs Gemini animated race | 17 KB |
| `memory-demo.html` | Memory System Demo | Three-layer memory with interactive exploration | 19 KB |
| `dashboard-demo.html` | Dashboard Monitoring Demo | Real-time dashboard with live build log | 17 KB |

**Hub page**: `docs/walkthrough/hub.html` links to all walkthroughs with categories and estimated durations.

## Demo Apps (6 HTML files)

Located in `examples/`. Each was generated by Loki Mode from a single prompt.

| File | Title | Description | Size |
|------|-------|-------------|------|
| `demo-saas-dashboard.html` | SaaS Dashboard | KPI cards, sparklines, revenue chart, activity feed | 9 KB |
| `demo-task-manager.html` | Task Manager | Kanban board with drag-and-drop and localStorage | 9 KB |
| `demo-chat-app.html` | Chat App | Real-time chat with typing indicators and auto-scroll | 8 KB |
| `demo-landing-page.html` | Landing Page | Hero, features, pricing, FAQ accordion, newsletter | 15 KB |
| `demo-portfolio.html` | Portfolio | Animated gradients, skill bars, project cards, contact form | 12 KB |
| `demo-ecommerce.html` | E-Commerce | Product filters, sorting, star ratings, cart counter | 12 KB |

## Product Website (1 HTML file)

| File | Title | Description | Size |
|------|-------|-------------|------|
| `website/index.html` | Loki Mode Product Website | Full landing page with hero, terminal animation, features, pricing | 38 KB |

## Summary

| Category | Count | Total Size |
|----------|-------|------------|
| Walkthroughs | 11 | 266 KB |
| Demo Apps | 6 | 65 KB |
| Product Website | 1 | 38 KB |
| **Total** | **18** | **369 KB** |

## Viewing Locally

All files are self-contained HTML. Open directly in any browser:

```bash
# Open the demo hub (links to everything)
open docs/walkthrough/hub.html

# Open a specific walkthrough
open docs/walkthrough/architecture.html

# Open a demo app
open examples/demo-saas-dashboard.html

# Or serve the entire repo with a local server
python3 -m http.server 8080
# Then visit http://localhost:8080/docs/walkthrough/hub.html
```

## Design

All interactive content shares these characteristics:

- **Self-contained** -- Single HTML file with embedded CSS and JavaScript
- **No build step** -- Open in any browser, works offline (except Google Fonts)
- **Dark theme** -- Consistent dark design with purple accent (#553DE9)
- **Responsive** -- Adapts to mobile, tablet, and desktop viewports
- **No external dependencies** -- No npm packages, no CDN libraries, no frameworks