| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
| <title>NEMOCITY — ask for a building, watch it rise</title> |
| <meta name="description" content="One tiny persistent city the whole internet builds. Petition city hall — a 9B Nemotron reads it, the deterministic engine zones it, and everyone watches it rise." /> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Schibsted+Grotesk:wght@400;500&family=Spline+Sans+Mono:wght@400;500&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="./style.css" /> |
| <script type="importmap"> |
| { |
| "imports": { |
| "three": "./lib/three.module.js", |
| "three/addons/": "./lib/addons/" |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <canvas id="scene" aria-label="Nemocity — a miniature shared city"></canvas> |
|
|
| |
| <header class="hud placard brand"> |
| <h1 class="brand__mark">NEMOCITY</h1> |
| <p class="brand__tag">the tiny city the internet builds</p> |
| <div class="stats"> |
| <span class="chip"><span class="chip__label">pop</span><span class="chip__num odo" id="hud-pop"></span></span> |
| <span class="chip"><span class="chip__label">bldgs</span><span class="chip__num" id="hud-buildings">0</span></span> |
| <span class="chip chip--traffic" id="chip-traffic"><span class="chip__label">traffic</span><span class="chip__num" id="hud-traffic">–</span></span> |
| <span class="chip"><span class="chip__label">clock</span><span class="chip__num" id="hud-clock">--:--</span></span> |
| <span class="chip chip--visitors" id="hud-visitors">built by 0 visitors</span> |
| </div> |
| </header> |
|
|
| |
| <nav class="hud modes"> |
| <button class="mode-btn" id="btn-walk" type="button" title="walk the streets (F)">walk</button> |
| <button class="mode-btn" id="btn-photo" type="button" title="hide the HUD for a clean shot (P)">photo</button> |
| <button class="mode-btn" id="btn-sound" type="button" aria-pressed="false" title="city sound (synthesized, off by default)">sound</button> |
| <button class="mode-btn" id="btn-heatmap" type="button" aria-pressed="false" title="congestion heatmap">heatmap</button> |
| </nav> |
|
|
| |
| <div class="hud placard traffic-alert" id="traffic-alert" hidden> |
| <span class="traffic-alert__dot" aria-hidden="true"></span> |
| <span id="traffic-alert-text">Traffic alert</span> |
| <button id="btn-fix" type="button">Ask the City Engineer</button> |
| </div> |
|
|
| |
| <aside class="hud paperwork" id="paperwork"> |
| <button class="paperwork__toggle" id="paperwork-toggle" type="button" aria-expanded="false">city hall paperwork</button> |
| <div class="paperwork__body" id="paperwork-body" role="log"></div> |
| </aside> |
|
|
| |
| <section class="hud petition"> |
| <div class="queue-chip" id="queue-chip" hidden></div> |
| <div class="lifecycle" id="lifecycle"></div> |
| <form class="petition__form placard" id="petition-form" autocomplete="off"> |
| <input class="petition__input" id="petition-input" type="text" maxlength="160" |
| placeholder="ask the city for a building…" aria-label="petition city hall" /> |
| <button class="petition__send" id="petition-send" type="submit">Build</button> |
| </form> |
| <div class="toast" id="toast" hidden></div> |
| </section> |
|
|
| |
| <div class="hud ticker" id="ticker"><div class="ticker__inner" id="ticker-inner"></div></div> |
|
|
| |
| <div class="fpv-ui" id="fpv-ui" hidden> |
| <div class="fpv-ui__crosshair" aria-hidden="true"></div> |
| <div class="fpv-ui__hint">WASD to walk · Shift to run · ESC to exit</div> |
| </div> |
|
|
| <div class="photo-hint" id="photo-hint" aria-hidden="true">photo mode — press Esc to return</div> |
| <div class="status" id="status" role="status"></div> |
|
|
| <script type="module" src="./main.js"></script> |
| </body> |
| </html> |
|
|
