12<html lang="en">3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <title>marbles</title>7 <link rel="icon"8 href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%237fd4ff'/%3E%3Ccircle cx='11' cy='11' r='5' fill='%23e8f7ff'/%3E%3C/svg%3E" />9 <link rel="stylesheet" href="/ui.css" />10 </head>11 <body>12 <div id="app"></div>13 <div id="hud" data-hud>14 <header class="run-topbar">15 <div16 class="run-identity"><span class="wordmark"><i></i>marbles</span><span id="run-mode">Endless run</span><span id="seed" title="World seed"></span></div>17 <nav class="run-actions" aria-label="Run options">18 <button id="new-track" class="primary"19 title="Generate another world">New run <span aria-hidden="true">↗</span></button>20 <button id="menu-btn"21 title="Choose a mode, field size, or seed">Settings</button>22 </nav>23 </header>24 <nav class="control-dock" aria-label="Playback and camera controls">25 <button id="cam-mode" title="Switch camera (C)"26 aria-pressed="false">Follow cam</button>27 <button id="leader-cam" hidden28 title="Follow the leader or your marble (Space)"29 aria-pressed="false">Your marble</button>30 <span class="dock-divider" aria-hidden="true"></span>31 <button id="pause-run" title="Pause or resume (K)"32 aria-pressed="false">Pause</button>33 <button id="fullscreen" title="Toggle full screen (F)"34 aria-pressed="false">Full screen</button>35 <button id="share-run" title="Copy this world's link">Share</button>36 <details id="controls-help">37 <summary aria-label="Show controls" title="Controls">?</summary>38 <div39 class="controls-card"><strong>Enjoy the ride</strong><p>Marbles steer themselves. Switch cameras to find your favorite view.</p>40 <dl><dt>C</dt><dd>Change camera</dd><dt>K</dt><dd>Pause / resume</dd><dt>F</dt><dd>Full screen</dd><dt class="endless-help">Space</dt><dd class="endless-help">Your marble / race leader</dd><dt>Drag</dt><dd>Rotate in orbit view</dd><dt>Scroll / pinch</dt><dd>Zoom in orbit view</dd></dl>41 </div>42 </details>43 <button id="mode-toggle" hidden title="Change run mode"></button>44 <button id="audio-toggle" hidden title="Toggle audio (M)"></button>45 </nav>46 <div id="paused-label"47 hidden>Paused <span>Take a look around. Resume when you're ready.</span></div>48 <div id="share-status" role="status" aria-live="polite"></div>49 </div>50 <div id="loading" role="status"51 aria-live="polite"><div class="loading-orb"></div><strong id="loading-message">Building your world…</strong><span>Finding a few unexpected turns.</span></div>52 <div id="stats"></div>53 <script type="module" src="/dist/app.js"></script>54 <script>55 if (["localhost", "127.0.0.1"].includes(location.hostname)) {56 new EventSource("/_reload").onmessage = () => location.reload();57 }58 </script>59 </body>60</html>