1 files changed, 103 insertions, 0 deletions
diff --git a/viewer/index.html b/viewer/index.html
new file mode 100644
index 0000000..125f10d
--- /dev/null
+++ b/viewer/index.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>World Maps</title>
+  <link rel="stylesheet" href="style.css">
+  <script type="importmap">
+  {"imports": {"three": "./vendor/three.module.js", "three/addons/": "./vendor/addons/"}}
+  </script>
+</head>
+<body>
+  <div id="map"></div>
+  <div id="markers"></div>
+  <div id="toolbar">
+    <button id="menu-toggle" class="box" title="Layers, views, overlays">☰</button>
+    <select id="world" class="box" title="World" hidden></select>
+    <select id="layer" class="box" title="Layer"></select>
+    <select id="era" class="box" title="Era" hidden></select>
+    <select id="over" class="box" title="Second layer drawn over the first"></select>
+    <input id="opacity" class="box" type="range" min="0" max="100" value="50" title="Opacity of the over-layer" hidden>
+    <div id="views" class="seg box">
+      <button data-view="globe">Globe</button><button data-view="equal_earth">Equal Earth</button><button data-view="plate_carree">Plate carrée</button>
+    </div>
+    <details id="overlays" class="box"><summary>Overlays</summary><div id="overlay-list"></div></details>
+    <button id="sky-toggle" class="box" title="Sky & seasons">☀</button>
+    <div id="searchbox">
+      <input id="search" class="box" type="search" placeholder="Search: pin, 40N 10W, H3 cell  (/)" autocomplete="off" spellcheck="false">
+      <div id="suggest" class="box" hidden></div>
+    </div>
+  </div>
+  <div id="legend" class="box" hidden></div>
+  <div id="status" class="box">
+    <span id="scale" hidden><span id="scale-bar"></span> <span id="scale-text"></span></span>
+    <span id="cursor">–</span>
+    <span id="hover" class="muted"></span>
+    <span id="detail-badge" class="warn" title="Below ~10 km the map shows seeded procedural detail, not build data" hidden>procedural detail — not data</span>
+  </div>
+  <div id="nav" class="box">
+    <button id="nav-in" title="Zoom in (+)">+</button>
+    <button id="nav-out" title="Zoom out (−)">−</button>
+    <button id="nav-north" title="North up, look straight down (N) · Shift+arrows turn and tilt · right-drag"><span>N</span></button>
+    <button id="nav-ground" title="Ground view: down to the ground here, looking out (G) · then right-drag to look around">👁</button>
+    <button id="nav-3d" title="3D terrain (procedural heights)">3D</button>
+    <button id="nav-water" title="Water on/off (3D): off shows the sea floor">≈</button>
+    <button id="nav-home" title="Whole planet (Home)">⌂</button>
+    <button id="nav-full" title="Fullscreen (F)">⤢</button>
+    <button id="nav-link" title="Copy a link to this view">🔗</button>
+    <button id="nav-export" title="Save this view as PNG">⤓</button>
+    <button id="nav-help" title="Controls (?)">?</button>
+  </div>
+  <div id="help" class="box" hidden>
+    <b>Controls</b>
+    <dl>
+      <dt>Drag</dt><dd>move the map</dd>
+      <dt>Wheel, + / −</dt><dd>zoom (toward the ground)</dd>
+      <dt>Right-drag, Shift+drag</dt><dd>turn sideways, tilt up toward the horizon</dd>
+      <dt>Shift+arrows</dt><dd>turn and tilt</dd>
+      <dt>👁, G</dt><dd>ground view: down to the ground here, looking out</dd>
+      <dt>N</dt><dd>north up, look straight down</dd>
+      <dt>3D, slider</dt><dd>terrain heights on/off, exaggeration 1–5×</dd>
+      <dt>≈</dt><dd>3D water on/off: off shows the sea floor</dd>
+      <dt>Arrows</dt><dd>move</dd>
+      <dt>Double-click</dt><dd>centre there</dd>
+      <dt>Click</dt><dd>inspect a place (Inspector tab)</dd>
+      <dt>Pins tab</dt><dd>saved places: click one to fly there</dd>
+      <dt>Regions tab</dt><dd>outline an area to re-simulate at ≈ 5 km</dd>
+      <dt>Export tab</dt><dd>save the square around the map centre as files for a game engine</dd>
+      <dt>/</dt><dd>search: pin, 40N 10W, H3 cell</dd>
+      <dt>Home, F</dt><dd>whole planet, fullscreen</dd>
+    </dl>
+    <p class="muted">Click or Esc to close.</p>
+  </div>
+  <div id="exag-box" class="box" hidden title="Terrain exaggeration"><input id="exag" type="range" min="1" max="5" step="0.5"> <span id="exag-text">1×</span></div>
+  <div id="skybar" class="box" hidden>
+    <button id="sky-play" title="Play / pause (one day per 10 s)">▶</button>
+    <label>Day <input id="sky-day" type="range" min="0" max="364" step="1"></label> <span id="sky-day-label"></span>
+    <label>Time <input id="sky-mo" type="range" min="0" max="1439" step="1"></label> <span id="sky-mo-label"></span>
+    <span id="sky-daylen" class="muted"></span>
+    <span class="muted" title="Day 0 = northern spring equinox; moment 0 = midnight at 0° longitude. Viewer convention.">ⓘ</span>
+  </div>
+  <aside id="panel" class="box">
+    <nav>
+      <button data-tab="inspector" class="on">Inspector</button><button data-tab="measure">Measure</button><button data-tab="pins">Pins</button><button data-tab="regions">Regions</button><button data-tab="export">Export</button>
+      <button id="panel-toggle" title="Collapse panel">–</button>
+    </nav>
+    <section id="tab-inspector"><p class="muted">Click the map to inspect a cell.</p></section>
+    <section id="tab-measure" hidden></section>
+    <section id="tab-pins" hidden></section>
+    <section id="tab-regions" hidden></section>
+    <section id="tab-export" hidden></section>
+  </aside>
+  <div id="toast"></div>
+  <script type="module">
+    import('./js/planet.js').then(p => p.loadPlanet()).then(() => import('./js/app.js')).then(m => m.main()).catch(e => {
+      console.error(e);
+      const t = document.getElementById('toast');
+      t.textContent = `Viewer failed to start: ${e.message || e}`;
+      t.classList.add('show');
+    });
+  </script>
+</body>
+</html>