<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>FSD Tracker</title>
  <meta name="description" content="Live FSD engagement and driving dynamics from a Raspberry Pi reading the car's CAN bus.">
  <meta name="theme-color" content="#121211">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%230ca30c'/%3E%3Cpath d='M9 19l7-9 7 9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="topbar">
    <div class="brand">
      <svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="14" class="brand-ring"/><path d="M9 19l7-9 7 9" class="brand-mark"/></svg>
      <span>FSD Tracker</span>
    </div>
    <nav class="sources" aria-label="Data source">
      <button type="button" data-source="ble">Bluetooth</button>
      <button type="button" data-source="wifi" hidden>Pi Wi-Fi</button>
      <button type="button" data-source="demo">Demo</button>
    </nav>
    <div class="conn" id="conn" data-state="idle"><span class="dot" aria-hidden="true"></span><span id="conn-text">Not connected</span></div>
    <span class="badge" id="sim-badge" hidden>Simulated data</span>
    <button type="button" class="ghost" id="settings-btn" hidden>Pi settings</button>
    <button type="button" class="ghost" id="units" aria-label="Switch units">mph</button>
  </header>

  <dialog id="settings" aria-labelledby="settings-title">
    <form method="dialog" class="settings-head">
      <h2 id="settings-title">Pi settings</h2>
      <button class="ghost small" value="close" aria-label="Close">Close</button>
    </form>
    <label class="field">Setup code
      <span class="row"><input id="code" autocomplete="off" autocapitalize="characters" spellcheck="false" maxlength="16" placeholder="8 characters"><button type="button" class="ghost small" id="code-save">Unlock</button></span>
    </label>
    <p class="hint">Find it in <code>/etc/fsd-tracker/config.json</code> on the Pi. It's stored only in this browser.</p>
    <div id="settings-body" hidden>
      <dl class="pi-status">
        <div><dt>Wi-Fi</dt><dd id="pi-wifi">—</dd></div>
        <div><dt>Clock</dt><dd id="pi-clock">—</dd></div>
      </dl>
      <div class="row">
        <button type="button" class="ghost small" id="sync-clock">Set Pi clock from this device</button>
        <button type="button" class="ghost small" id="scan">Scan for Wi-Fi</button>
      </div>
      <ul id="networks" class="networks"></ul>
      <form id="join" class="join" hidden>
        <label class="field">Network <input id="join-ssid" required maxlength="32" autocomplete="off"></label>
        <label class="field">Password <input id="join-psk" type="password" minlength="8" maxlength="63" autocomplete="off" placeholder="leave empty for open networks"></label>
        <label class="check"><input type="checkbox" id="join-hidden"> Hidden network</label>
        <button type="submit" class="primary" id="join-btn">Join</button>
      </form>
      <button type="button" class="link" id="other-net">Join a network that isn't listed</button>
    </div>
    <p class="settings-msg" id="settings-msg" role="status"></p>
  </dialog>

  <p class="notice" id="notice" hidden></p>

  <main class="grid">
    <section class="card fsd" id="fsd-card" data-mode="unknown" aria-live="polite">
      <h2>FSD / Autopilot</h2>
      <div class="fsd-state" id="fsd-state">No data</div>
      <div class="fsd-sub"><span id="fsd-raw">—</span><span class="sep">·</span><span id="hands">—</span></div>
      <div class="fsd-meta">
        <div><b id="eng-timer">—</b><small>this engagement</small></div>
        <div><b id="fsd-pct">—</b><small>of drive time on FSD</small></div>
      </div>
    </section>

    <section class="card speed">
      <h2>Speed</h2>
      <div class="hero"><span id="speed">—</span><span class="unit" id="speed-unit">mph</span></div>
      <div class="gear-row">
        <div class="gears" id="gears"><span>P</span><span>R</span><span>N</span><span>D</span></div>
        <div class="turns"><span class="turn" id="turn-left" aria-label="Left signal">◀</span><span class="turn" id="turn-right" aria-label="Right signal">▶</span></div>
      </div>
      <div class="pedals">
        <div class="pedal"><span>Accelerator</span><div class="bar"><i id="pedal-bar"></i></div><b id="pedal">—</b></div>
        <div class="pedal"><span>Brake</span><div class="brake-lamp" id="brake">OFF</div></div>
      </div>
    </section>

    <section class="card gforce">
      <h2>G-force <span class="tag" id="g-tag" hidden>est.</span></h2>
      <canvas id="gg" width="260" height="260" aria-label="Friction circle: lateral against longitudinal acceleration"></canvas>
      <div class="readouts">
        <div><small>Longitudinal</small><b id="g-long">—</b></div>
        <div><small>Lateral</small><b id="g-lat">—</b></div>
      </div>
    </section>

    <section class="card roll">
      <h2>Body roll <span class="tag" id="roll-tag" hidden>est.</span></h2>
      <svg viewBox="0 0 240 150" class="attitude" aria-hidden="true">
        <line x1="10" y1="128" x2="230" y2="128" class="ground"/>
        <g id="roll-car">
          <path d="M52 112 L58 70 Q64 46 90 42 L150 42 Q176 46 182 70 L188 112 Z" class="body"/>
          <path d="M70 70 Q76 54 94 52 L146 52 Q164 54 170 70 Z" class="glass"/>
          <rect x="48" y="96" width="144" height="18" rx="6" class="bumper"/>
          <rect x="60" y="112" width="26" height="16" rx="4" class="tire"/>
          <rect x="154" y="112" width="26" height="16" rx="4" class="tire"/>
          <rect x="62" y="82" width="22" height="7" rx="3" class="lamp"/>
          <rect x="156" y="82" width="22" height="7" rx="3" class="lamp"/>
        </g>
      </svg>
      <div class="readouts">
        <div><small>Roll</small><b id="roll">—</b></div>
        <div><small>Yaw rate</small><b id="yaw">—</b></div>
      </div>
    </section>

    <section class="card steer">
      <h2>Steering</h2>
      <svg viewBox="0 0 160 160" class="wheel" aria-hidden="true">
        <g id="wheel">
          <circle cx="80" cy="80" r="62" class="rim"/>
          <path d="M18 80 H58 M102 80 H142 M80 102 V142" class="spoke"/>
          <circle cx="80" cy="80" r="22" class="hub"/>
          <rect x="76" y="14" width="8" height="12" rx="2" class="marker"/>
        </g>
      </svg>
      <div class="readouts">
        <div><small>Angle</small><b id="steer">—</b></div>
        <div><small>Rate</small><b id="steer-rate">—</b></div>
      </div>
    </section>

    <section class="card chart">
      <h2>Speed · last 60 s</h2>
      <div class="chart-wrap"><canvas id="chart-speed" aria-label="Speed over the last 60 seconds"></canvas><div class="tip" hidden></div></div>
    </section>

    <section class="card chart">
      <h2>Acceleration · last 60 s</h2>
      <div class="legend"><span class="key k-long"></span>Longitudinal<span class="key k-lat"></span>Lateral</div>
      <div class="chart-wrap"><canvas id="chart-accel" aria-label="Longitudinal and lateral acceleration over the last 60 seconds"></canvas><div class="tip" hidden></div></div>
    </section>

    <section class="card map">
      <h2>Location <span class="tag" id="gps-src">—</span></h2>
      <div id="map" class="map-box"><canvas id="trail"></canvas></div>
      <div class="map-foot">
        <span id="coords">No position</span>
        <button type="button" class="ghost small" id="phone-gps">Use this device's GPS</button>
      </div>
    </section>

    <section class="card trip">
      <h2>This drive</h2>
      <dl class="stats">
        <div><dt>Drive time</dt><dd id="drive-time">—</dd></div>
        <div><dt>On FSD</dt><dd id="fsd-time">—</dd></div>
        <div><dt>Distance</dt><dd id="drive-dist">—</dd></div>
        <div><dt>FSD distance</dt><dd id="fsd-dist">—</dd></div>
        <div><dt>Engagements</dt><dd id="engagements">—</dd></div>
        <div><dt>Disengagements</dt><dd id="disengagements">—</dd></div>
      </dl>
      <div class="reasons" id="reasons"></div>
    </section>

    <section class="card events">
      <h2>Events</h2>
      <ol id="events" class="event-list"><li class="empty">Engagements and takeovers will appear here.</li></ol>
    </section>
  </main>

  <footer class="statusbar">
    <span>MX+ <b id="mx">—</b></span>
    <span>CAN <b id="fps">—</b></span>
    <span>Battery <b id="soc">—</b></span>
    <span>Logging <b id="logging">—</b></span>
    <span>Updated <b id="age">—</b></span>
    <a id="drives-link" href="api/drives" hidden>Drive logs</a>
  </footer>

  <script src="protocol.js"></script>
  <script src="sim.js"></script>
  <script src="app.js"></script>
</body>
</html>
