83 lines
3.2 KiB
HTML
83 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Walker Linkage Simulator</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three@0.161.0/build/three.module.js",
|
|
"tweakpane": "https://esm.sh/tweakpane@4.0.4"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="status-light" aria-hidden="true"></div>
|
|
<main class="app">
|
|
<section class="views-wrap">
|
|
<div class="mobile-view-toggle" id="mobile-view-toggle">
|
|
<button class="toggle-btn active" data-view="3d">3D View</button>
|
|
<button class="toggle-btn" data-view="2d">2D View</button>
|
|
</div>
|
|
|
|
<section class="view-panel" id="view-2d-panel">
|
|
<h2>2D View</h2>
|
|
<div class="canvas-container">
|
|
<canvas id="sim-canvas"></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view-panel" id="view-3d-panel">
|
|
<h2>3D View</h2>
|
|
<div id="sim-3d" class="sim-3d" aria-label="3D mechanism viewport"></div>
|
|
</section>
|
|
</section>
|
|
|
|
<aside class="panel" id="controls-panel">
|
|
<h1>Walker Sim (Kinematic)</h1>
|
|
<div id="tweakpane-root"></div>
|
|
<section class="audio-debug" id="audio-debug-section" hidden>
|
|
<h2>Audio Debug</h2>
|
|
<div class="audio-debug-meta">
|
|
<span id="audio-beat-bpm">BPM: --</span>
|
|
<span id="audio-beat-intensity">Beat: 0.00</span>
|
|
<span id="audio-beat-flash" class="beat-flash" aria-hidden="true"></span>
|
|
</div>
|
|
<canvas id="audio-debug-canvas" aria-label="Audio spectrum debug view"></canvas>
|
|
</section>
|
|
|
|
<details class="mujoco-import settings-section" id="mujoco-import-section" open>
|
|
<summary>MuJoCo Import</summary>
|
|
<p>Load JSON exported by <code>walker-export-web</code> (v1 overlay or v2 true playback).</p>
|
|
<input id="mujoco-trace-file" type="file" accept="application/json,.json" />
|
|
<div class="buttons single">
|
|
<button id="clear-mujoco-trace" type="button">Clear MuJoCo overlay</button>
|
|
</div>
|
|
<div class="mujoco-playback" id="mujoco-playback-controls" hidden>
|
|
<div class="buttons">
|
|
<button id="mujoco-playback-toggle" type="button">Pause playback</button>
|
|
<label class="check">
|
|
<input id="mujoco-playback-loop" type="checkbox" checked />
|
|
<span>Loop</span>
|
|
</label>
|
|
</div>
|
|
<label for="mujoco-playback-time">Playback time</label>
|
|
<input id="mujoco-playback-time" type="range" min="0" max="1" step="0.001" value="0" />
|
|
<output id="mujoco-playback-label">0.00s / 0.00s</output>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="diag settings-section" id="diagnostics-section" open>
|
|
<summary>Diagnostics</summary>
|
|
<pre id="diag">loading…</pre>
|
|
</details>
|
|
</aside>
|
|
</main>
|
|
|
|
<script type="module" src="./src/main.js"></script>
|
|
</body>
|
|
</html>
|