Atlas

The exact prompt

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".

Acceptance criteria (14)

1. The initial inline SVG contains exactly 20 station elements with role='button' and tabindex='0', and the explicit graph contains five intersecting named lines.
2. Setting Origin to northgate and Destination to airport and activating Find shortest route runs Dijkstra, highlights a connected SVG path, and reports 5 stops, 1 transfer, and a positive estimated time.
3. Line checkboxes change route visibility, zoom and drag change the SVG viewBox, Reset View restores it, and Clear Route removes the route layer and route station highlighting.
4. The document has one h1, semantic header/nav/main/footer, labeled form controls, empty window.__DEMO__.errors after initialization, and no horizontal overflow at 390px, 768px, or 1440px.
5. window.__DEMO__.ready becomes true within 5s
6. window.__DEMO__.frames advances (>= 20 frames in 1.2s)
7. window.__DEMO__.errors is empty
8. zero console errors and zero page errors
9. zero failed network requests
10. exactly one <h1> with non-empty text
11. header, main, footer landmarks present
12. no horizontal overflow at 390 / 768 / 1440 widths
13. no horizontal overflow after 2s of animation
14. prefers-reduced-motion: reduce leaves the page usable and errors empty