Stage 0. Zero-dependency serve.py (static + allowlisted horizons/sbdb/cad proxy, sha256 disk cache with past-span immutability). Three.js via pinned importmap, logarithmic depth, procedural starfield sky (+ Milky Way panorama swap-in), Sun with additive glow, OrbitControls, brass-and-void HUD, scrubbable time bar, central bodyWorld position pass, focus/camera system, hash state. Boots clean, no console errors. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>SOLARGOD ▸ Orrery</title>
|
||
<link rel="stylesheet" href="css/style.css" />
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
|
||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="scene"></div>
|
||
<div id="labels"></div>
|
||
|
||
<!-- breadcrumb (top-left) -->
|
||
<div id="breadcrumb"></div>
|
||
|
||
<!-- HUD (right) -->
|
||
<aside id="hud">
|
||
<header>
|
||
<div class="brand">SOLARGOD <span>▸ ORRERY</span></div>
|
||
<div id="live-chip" data-state="live">LIVE</div>
|
||
</header>
|
||
|
||
<div class="ctl-row">
|
||
<div class="seg" id="scale-toggle">
|
||
<button data-mode="mega" class="active" type="button">MEGA</button>
|
||
<button data-mode="true" type="button">TRUE</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ctl-row slider-row">
|
||
<label class="ctl-label">Body scale</label>
|
||
<div class="seg" id="bodyscale-toggle">
|
||
<button data-e="1" type="button">1×</button>
|
||
<button data-e="100" type="button">100×</button>
|
||
<button data-e="1200" class="active" type="button">1200×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-row">
|
||
<label class="ctl-label">Focus</label>
|
||
<select id="focus-menu"></select>
|
||
</div>
|
||
|
||
<div id="layers"></div>
|
||
|
||
<footer>
|
||
<div>Positions: JPL SSD approximate elements · live feeds: JPL Horizons / SBDB / CAD</div>
|
||
<div id="credits-textures">Textures: <a href="https://www.solarsystemscope.com/textures/" target="_blank" rel="noopener">Solar System Scope</a> (CC BY 4.0)</div>
|
||
</footer>
|
||
</aside>
|
||
|
||
<!-- time bar (bottom) -->
|
||
<div id="timebar">
|
||
<div class="tb-controls">
|
||
<button id="tb-now" type="button" title="Jump to wall-clock now">NOW</button>
|
||
<button id="tb-reverse" type="button" title="Reverse">◀</button>
|
||
<button id="tb-play" type="button" title="Play / pause">❚❚</button>
|
||
<select id="tb-rate" title="Time rate"></select>
|
||
<div id="date-readout">—</div>
|
||
</div>
|
||
<div id="timeline-outer" title="Scrub 1800 → 2050">
|
||
<div id="timeline-fill"></div>
|
||
<div id="timeline-cursor"></div>
|
||
</div>
|
||
<div class="tb-ends"><span>1800</span><span>2050</span></div>
|
||
</div>
|
||
|
||
<!-- info panel (left, Stage 6) -->
|
||
<aside id="infopanel" hidden></aside>
|
||
|
||
<div id="toast"></div>
|
||
<div id="debug" hidden></div>
|
||
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|