<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Rosmaster 麦克纳姆轮控制台</title>
    <style>
      :root { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
      body { display: grid; place-items: center; min-height: 100vh; background: #0b1020; color: #f3f4f6; margin: 0; }
      .pad { background: #111827; padding: 24px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
      h1 { margin: 0 0 16px; font-size: 20px; opacity: .9; }
      .grid { display: grid; grid-template-columns: 80px 80px 80px; grid-template-rows: 80px 80px 80px; gap: 12px; }
      button {
        border: 0; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer;
        background: #1f2937; color: #f9fafb; transition: transform .06s ease, background .2s ease;
      }
      button:hover { transform: translateY(-2px); background: #374151; }
      button:active { transform: translateY(0); }
      .danger { background:#ef4444; }
      .slider { width: 100%; margin: 10px 0 0; }
      .row { display:flex; align-items:center; gap:10px; margin-top:12px; }
      .badge { font-size:12px; opacity:.8; }
    </style>
  </head>
  <body>
    <div class="pad">
      <h1>Rosmaster 麦克纳姆轮控制台</h1>
      <div class="grid">
        <div></div>
        <button id="btn-forward">↑</button>
        <div></div>

        <button id="btn-left">←</button>
        <button id="btn-stop" class="danger">■</button>
        <button id="btn-right">→</button>

        <div></div>
        <button id="btn-back">↓</button>
        <div></div>

        <div style="grid-column: 1 / span 3;">
          <div class="row">
            <label for="speed">速度</label>
            <input id="speed" class="slider" type="range" min="0" max="100" value="70"/>
            <span class="badge" id="speed-val">70%</span>
            <button id="btn-panic" class="danger">急停</button>
          </div>
        </div>
      </div>
    </div>

    <script>
      const speed = document.getElementById('speed');
      const speedVal = document.getElementById('speed-val');
      speed.addEventListener('input', () => speedVal.textContent = speed.value + '%');
      speedVal.textContent = speed.value + '%';

      async function send(dir) {
        try {
          const res = await fetch('/move', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ dir, speed: Number(speed.value) })
          });
          const data = await res.json();
          if (!data.ok) throw new Error(data.error || 'failed');
        } catch (e) {
          alert('指令失败: ' + e.message);
        }
      }

      document.getElementById('btn-forward').onclick = () => send('forward');
      document.getElementById('btn-back').onclick = () => send('back');
      document.getElementById('btn-left').onclick = () => send('left');
      document.getElementById('btn-right').onclick = () => send('right');
      document.getElementById('btn-stop').onclick = () => send('stop');
      document.getElementById('btn-panic').onclick = () => send('stop');

      window.addEventListener('keydown', (e) => {
        if (e.repeat) return;
        if (e.key === 'w' || e.key === 'W' || e.key === 'ArrowUp') send('forward');
        if (e.key === 's' || e.key === 'S' || e.key === 'ArrowDown') send('back');
        if (e.key === 'a' || e.key === 'A' || e.key === 'ArrowLeft') send('left');
        if (e.key === 'd' || e.key === 'D' || e.key === 'ArrowRight') send('right');
        if (e.code === 'Space') send('stop');
      });
    </script>
  </body>
</html>
