# Loki Mode -- Interactive Content Index

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

## Walkthroughs (6 HTML files)

Located in `docs/walkthrough/`.

| File | Title | Description |
|------|-------|-------------|
| `index.html` | Build Your First App | Step-by-step tutorial from PRD to deployment |
| `architecture.html` | System Architecture | Interactive SVG diagram of the full system |
| `comparison.html` | Feature Comparison | Loki Mode vs competitor feature matrix |
| `gallery.html` | Project Gallery | Example projects across categories |
| `video-placeholder.html` | Build Process Animation | CSS-animated build walkthrough |
| `hub.html` | Walkthrough Hub | Links to all walkthroughs with categories and estimated durations |

An earlier version of this page also listed `build-demo.html`, `ide-demo.html`,
`enterprise-demo.html`, `provider-race-demo.html`, `memory-demo.html`, and
`dashboard-demo.html`. None of those files exist in the repository; they have
been removed from the list rather than left as broken references.

## 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 |
|----------|-------|
| Walkthroughs | 6 |
| Demo Apps | 6 |
| Product Website | 1 |
| **Total** | **13** |

## 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