# Claude.md — Single-File HTML Application ## Project Overview This is a **standalone, single-file HTML application** (internal tool / dashboard). Everything — HTML structure, CSS styles, and JavaScript logic — lives in **one `.html` file** with no external dependencies, no build step, and no backend. The developer (John) is the domain expert and product visionary. Claude Code is the technical lead. **Always explain technical decisions in plain language alongside the code.** --- ## Hard Rules 1. **One file only.** All markup, styles, and scripts go in `index.html`. No separate `.css` or `.js` files. No imports, no npm, no bundlers. 2. **Zero external dependencies.** No CDN links, no framework scripts, no Google Fonts links. Everything is self-contained so it works offline and without a network. 3. **Vanilla only.** Plain HTML, CSS, and JavaScript. No React, no jQuery, no Tailwind, no libraries. 4. **No backend calls.** No `fetch()` to remote APIs, no Supabase, no authentication. Data lives in the browser (variables, `localStorage`, or user-supplied file input). 5. **Single responsibility per prompt.** When asked to add a feature, implement *only* that feature. Do not refactor unrelated code, rename existing functions, or "improve" things that weren't requested. --- ## Code Architecture ### File Structure (inside the single file) ```html ``` ### Conventions - **CSS variables** for all colors, spacing, and font sizes — defined in `:root`. This makes theming and future dark-mode trivial. - **Semantic HTML** (`

`, `

`, `

`, `