# Atlas

> **Category:** Interactive
> **Effect:** An interactive SVG transit map with pan and zoom, line filtering, station inspection, and a Dijkstra-powered route planner that traces the fastest journey.
> **Platform:** cmd-code (`qoder`)
> **Model:** `qoder` — Qoder
> **License:** Free / MIT — copy, paste, ship.
> **Self-contained:** yes — one `index.html`, no build step, no external media.

---

## 🎬 Live demo

Open [`public/demos/atlas/index.html`](../public/demos/atlas/index.html) — generated by the model
above from the prompt below, with no human edits to the markup.

## ✅ Verification

<!-- VERIFICATION:START -->
**Verified:** 17/17 checks passed — ✅ fully passing
**Verified at:** 2026-10-26T01:14:09.043Z
**Demo size:** 44.3 KB (single self-contained file)

### Provenance

| Field | Value |
|---|---|
| Platform | qoder — `` |
| Model | `qoder` |
| Prompt sent | — characters (sha256:—) |
| Prompt tokens | 0 |
| Completion tokens | 0 |
| Reasoning tokens | 0 |
| **Total tokens** | **0** |
| API calls | 0 (0 attempts) |
| Latency | 0.0 s |
| Finish reason | `—` |

### Automated checks

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 45356 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: svg-pan-zoom, station-inspector, dijkstra-route |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "ATLAS" |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Atlas \| City Transit Field Guide |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1530 pageErrors=0 |

_Cross-check pending._

*Reproduce: `node tools/runner.mjs --jobs data/jobs.json` then `node tools/verify.mjs --only atlas`.*
<!-- VERIFICATION:END -->

## 📋 Prompt

```text
Build ATLAS as one complete, dependency-free HTML document with inline CSS, JavaScript, and SVG. It is a polished fictional metropolitan transit map and route planner, not a landing page with a decorative mockup. Use an off-white cartographic paper background, dark ink typography, cobalt #2457d6 as the interface accent, and distinct vermilion, teal, gold, and plum route colors. The visual language combines a transit authority field guide with a precise city atlas: fine grid lines, contour marks, a river, district labels, compact uppercase metadata, crisp station labels, rounded route strokes, and double-ring interchange stations. Include exactly one h1 and semantic header, nav, main, and footer elements.

Create an explicit graph containing 20 named stations and five intersecting lines: Cobalt, Vermilion, Teal, Gold, and Plum. Define each line as an ordered list of station IDs and derive weighted bidirectional edges from adjacent stops. Share Northgate, Central, Market, University, Library, and Harbor between lines to form a connected network with meaningful transfers. Render every route and unique station into one inline SVG. Include a station inspector that lists line memberships and directly connected stations.

All controls must be functional. Support pointer drag panning, wheel zoom centered on the pointer, zoom in and out buttons, and Reset View. Provide accessible checkboxes that show and hide each line and update station visibility. Provide labeled native selects for Origin and Destination, a swap button, and a shortest route button. Implement Dijkstra over currently active lines, using geometry-derived travel weights. Highlight the computed station sequence on the SVG and report stops, transfers, estimated minutes, and the ordered journey. Clear Route removes the path and its highlighting without resetting the selected stations. Selecting an SVG station by click, Enter, or Space inspects it; each station must be an SVG element with role button, tabindex, and an informative accessible name. Inspector buttons assign the inspected station as origin or destination.

Use a responsive two-column workspace on wide screens and a stacked map and control panel on smaller screens. The page must not overflow horizontally at 390, 768, or 1440 pixels. Controls need clear focus styles and adequate touch targets. Respect reduced motion by removing transitions and stopping the animation frame counter loop. No external assets, requests, fonts, libraries, media, console output, or em dash characters in visible copy.

At script start initialize window.__DEMO__ = { name: 'atlas', ready: false, frames: 0, effects: ['svg-pan-zoom', 'station-inspector', 'dijkstra-route'], errors: [] }. Install an error listener, set ready after first paint, increment frames in a requestAnimationFrame loop during normal motion mode, and keep errors empty.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
```

---

*LandingPagePrompts Prompt Library — free, verified, model-attributed.*