demo/web/index.html

<!doctype html>
<html lang="en" data-test-status="starting">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" href="data:,">
  <title>MotionBricks G1</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <section id="viewport" aria-label="Animated G1 skeleton"></section>
    <aside>
      <p class="eyebrow">MOTIONBRICKS / G1</p>
      <h1>Whole-body motion</h1>
      <p class="lede">Move with WASD. The character faces its travel direction; arrow keys turn independently.</p>
      <div class="legend" aria-label="Skeleton legend">
        <span><i class="animated-swatch"></i>Animated model</span>
        <span><i class="target-swatch"></i>Target keyframes</span>
      </div>
      <label for="style-select">Upstream pose style</label>
      <select id="style-select" aria-label="Motion style"></select>
      <div class="target-frame-control">
        <label for="target-frame">Inspect placed target <output id="target-frame-label" for="target-frame">T3</output></label>
        <input id="target-frame" type="range" min="0" max="3" step="1" value="3" aria-label="Target frame">
      </div>
      <div class="view-options">
        <label><input id="show-all-targets" type="checkbox"> Overlay all four consecutive poses</label>
        <button id="reset-camera" type="button">Reset camera</button>
      </div>
      <p class="target-help">T0–T3 are consecutive 30 FPS constraints, so their exact positions are intentionally close.</p>
      <p class="camera-help">Drag to orbit · wheel to zoom · tap a pad direction to move, tap it again to stop</p>
      <div class="pad" aria-label="Directional controls">
        <button data-key="w" data-x="0" data-z="1" aria-label="Walk forward">W</button>
        <button data-key="a" data-x="-1" data-z="0" aria-label="Walk left">A</button>
        <button data-key="s" data-x="0" data-z="-1" aria-label="Walk backward">S</button>
        <button data-key="d" data-x="1" data-z="0" aria-label="Walk right">D</button>
      </div>
      <dl>
        <div><dt>Status</dt><dd id="status">Loading model…</dd></div>
        <div><dt>Plan</dt><dd id="plan-info">—</dd></div>
        <div><dt>Targets</dt><dd id="target-info">—</dd></div>
        <div><dt>Backend</dt><dd>native GGML</dd></div>
      </dl>
      <p id="test-result" role="status"></p>
    </aside>
  </main>
  <script type="module" src="app.js"></script>
</body>
</html>