index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AXEOFF // Web Flasher</title>
<meta name="description" content="AXEOFF firmware installer — headless Axon detector. Plug in your XIAO ESP32-S3, click Flash, done.">
<style>
  :root {
    --bg:        #0b0b09;
    --bg-grid:   #1b1b12;
    --panel:     rgba(17, 17, 11, 0.85);
    --yellow:    #ffd60a;
    --yellow-dk: #b39400;
    --grey:      #9a9a8e;
    --text:      #c9c9bc;
    --muted:     #7d7d72;
    --white:     #f6f6ea;
    --warn-bg:   #0f0e04;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    text-align: center;
  }
  body {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,214,10,0.05), transparent 60%),
      linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0 / 44px 44px,
      var(--bg);
    padding: 0 16px 48px;
  }
  main { max-width: 780px; margin: 0 auto; }
  a { color: var(--yellow); text-decoration: none; border-bottom: 1px dotted rgba(255,214,10,0.4); }
  a:hover { color: var(--white); border-bottom-color: var(--white); }
  b { color: var(--white); font-weight: normal; }

  /* ─── TERMINAL HEADER ─── */
  .terminal {
    background: var(--warn-bg);
    color: var(--yellow);
    padding: 28px 16px 22px;
    margin: 0 -16px 32px;
    border-bottom: 1px solid var(--yellow-dk);
    text-shadow: 0 0 4px rgba(255,214,10,0.4);
    position: relative;
    overflow: hidden;
  }
  .terminal::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at center, rgba(255,214,10,0.07), transparent 60%),
      repeating-linear-gradient(0deg,
        transparent 0 2px,
        rgba(0,0,0,0.4) 3px 3px);
    pointer-events: none;
  }
  .banner {
    color: var(--yellow);
    text-shadow: 0 0 8px rgba(255,214,10,0.7);
    font-size: 11px;
    line-height: 1.1;
    white-space: pre;
    margin: 0 auto;
    display: inline-block;
    text-align: left;
    position: relative;
  }
  .subtitle {
    color: var(--grey);
    letter-spacing: 5px;
    font-size: 12px;
    margin: 12px 0 0;
    text-shadow: 0 0 6px rgba(255,214,10,0.3);
    position: relative;
  }
  .subtitle .yellow {
    color: var(--yellow);
    text-shadow: 0 0 8px rgba(255,214,10,0.6);
  }
  .subtitle .sep { color: var(--yellow-dk); margin: 0 10px; opacity: 0.6; }

  /* ─── PANELS ─── */
  .panel {
    border: 1px solid rgba(255,214,10,0.22);
    background: var(--panel);
    margin: 24px auto;
    max-width: 720px;
  }
  .panel > header {
    padding: 10px 20px;
    background: rgba(255,214,10,0.06);
    border-bottom: 1px solid rgba(255,214,10,0.22);
    color: var(--yellow);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .panel > header .right { color: var(--muted); font-size: 10px; letter-spacing: 2px; }
  .panel > .body { padding: 24px 22px; }

  /* ─── STEPS ─── */
  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 0;
    border-bottom: 1px dashed rgba(255,214,10,0.12);
  }
  .step:last-child { border-bottom: none; }
  .step .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--yellow);
    color: var(--yellow);
    font-size: 18px;
    font-weight: 700;
    background: rgba(255,214,10,0.04);
    border-radius: 50%;
  }
  .step h3 {
    margin: 4px 0 0;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .step p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    max-width: 520px;
  }

  /* ─── FLASH BUTTON ─── */
  .dev-warn b { color: var(--yellow); }
  esp-web-install-button { display: inline-block; margin-top: 10px; }
  esp-web-install-button::part(button) {
    background: #0b0b09;
    color: var(--yellow);
    border: 1px solid var(--yellow);
    padding: 12px 26px;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  esp-web-install-button::part(button):hover {
    background: var(--yellow);
    color: #0b0b09;
  }
  .unsupported, .not-allowed {
    color: var(--grey);
    padding: 10px 14px;
    border: 1px dashed var(--grey);
    display: inline-block;
    font-size: 13px;
    max-width: 520px;
  }

  /* ─── SOUNDS ─── */
  .sound {
    padding: 22px 0;
    border-bottom: 1px dashed rgba(255,214,10,0.12);
  }
  .sound:last-child { border-bottom: none; }
  .sound .tag {
    display: inline-block;
    color: var(--yellow);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 2px 12px;
    border: 1px solid var(--yellow);
    background: rgba(255,214,10,0.04);
    margin-bottom: 10px;
  }
  .sound h3 {
    margin: 6px 0 4px;
    color: var(--white);
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
  }
  .sound p {
    margin: 0 auto 12px;
    max-width: 560px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
  }
  .creds {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 4px 18px;
    text-align: left;
    padding: 10px 16px;
    background: rgba(255,214,10,0.03);
    border: 1px solid rgba(255,214,10,0.18);
    font-size: 13px;
    margin: 4px auto 0;
  }
  .creds dt {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    align-self: center;
  }
  .creds dd { margin: 0; color: var(--yellow); }
  .creds dd.url { color: var(--text); }
  .creds dd.none { color: var(--grey); }

  .kbd {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--yellow);
    color: var(--white);
    background: rgba(255,214,10,0.05);
    font-size: 12px;
    letter-spacing: 1px;
  }

  footer {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 3px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255,214,10,0.12);
  }

  @media (max-width: 520px) {
    .banner { font-size: 7px; }
    .subtitle { letter-spacing: 3px; font-size: 11px; }
  }
</style>
</head>
<body>

<header class="terminal">
  <pre class="banner"> █████╗ ██╗  ██╗███████╗ ██████╗ ███████╗███████╗
██╔══██╗╚██╗██╔╝██╔════╝██╔═══██╗██╔════╝██╔════╝
███████║ ╚███╔╝ █████╗  ██║   ██║█████╗  █████╗
██╔══██║ ██╔██╗ ██╔══╝  ██║   ██║██╔══╝  ██╔══╝
██║  ██║██╔╝ ██╗███████╗╚██████╔╝██║     ██║
╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝     ╚═╝</pre>
  <div class="subtitle">HEADLESS AXON DETECTOR<span class="sep">//</span>WEB FLASHER<span class="sep">//</span><span class="yellow">XIAO ESP32-S3</span></div>
</header>

<main>

<section class="panel">
  <header><span>Install</span><span class="right">3 steps</span></header>
  <div class="body">

    <div class="step">
      <div class="n">1</div>
      <h3>Plug the board in</h3>
      <p>Use a real USB-C <b>data</b> cable — charge-only cables won't show up as a serial port. If it's your first flash, hold the <span class="kbd">BOOT</span> button while plugging in.</p>
    </div>

    <div class="step">
      <div class="n">2</div>
      <h3>Click Flash</h3>
      <p>Chrome, Edge, or Opera on desktop. Your browser will show a list of serial ports — pick the XIAO. The install takes about 30 seconds and wipes the board clean before installing.</p>

      <esp-web-install-button id="flashBtn" manifest="./manifest.json">
        <button slot="activate">&gt;&gt; CONNECT &amp; FLASH &lt;&lt;</button>
        <span slot="unsupported" class="unsupported">Your browser doesn't support Web Serial. Open this page in Chrome, Edge, or Opera on a desktop.</span>
        <span slot="not-allowed" class="not-allowed">This page must be served over HTTPS. GitHub Pages handles that automatically.</span>
      </esp-web-install-button>
    </div>

    <div class="step">
      <div class="n">3</div>
      <h3>Listen for the boot jingle</h3>
      <p>The board reboots on its own and plays four ascending beeps — it's awake and already scanning for Axon gear. That's the whole setup. There is deliberately no Wi-Fi to join and no portal to open.</p>
      <dl class="creds">
        <dt>Wi-Fi</dt><dd class="none">none</dd>
        <dt>Portal</dt><dd class="none">none</dd>
        <dt>Interface</dt><dd>beeps only</dd>
      </dl>
    </div>

  </div>
</section>

<section class="panel">
  <header><span>The Sounds</span><span class="right">the entire UX</span></header>
  <div class="body">

    <div class="sound">
      <span class="tag">[ BOOT ]</span>
      <h3>4 ascending beeps</h3>
      <p>G4 → C5 → E5 → G5. Power on, jingle, scanning. Armed in about a second and a half, no buttons, no config.</p>
    </div>

    <div class="sound">
      <span class="tag">[ DETECTION ]</span>
      <h3>8-bit ascending arpeggio</h3>
      <p>An Axon device was just heard — body cam, Taser 7/10, Signal sidearm, Fleet. Seven signatures across BLE and WiFi: company ID <b>0x034D</b>, service UUIDs <b>0xFC81 / 0xFE6B / 0xFE6C</b>, IEEE OUI <b>00:25:DF</b> on both radios.</p>
    </div>

    <div class="sound">
      <span class="tag">[ HEARTBEAT ]</span>
      <h3>Lub-dub, rate = proximity</h3>
      <p>While the target stays in range a two-beep heartbeat keeps time — about every 2 seconds when it's far or weak, down to every 250 ms when it's close and strong. Walk it down like a foxhunt.</p>
    </div>

    <div class="sound">
      <span class="tag">[ LOST ]</span>
      <h3>Descending 2-beep</h3>
      <p>8 seconds of silence and the target is gone — one falling pair of beeps, then AXEOFF goes back to idle and the next fresh hit re-triggers the arpeggio.</p>
    </div>

    <div class="sound">
      <span class="tag">[ STEALTH ]</span>
      <h3>All passive, all the time</h3>
      <p>AXEOFF <b>never transmits</b>: passive BLE scan (no SCAN_REQ) plus promiscuous listen-only WiFi, with a randomized MAC on every boot. It hears everything, says nothing.</p>
    </div>

  </div>
</section>

<section class="panel">
  <header><span>Troubleshooting</span><span class="right">common snags</span></header>
  <div class="body">

    <div class="step">
      <div class="n">?</div>
      <h3>Nothing shows up in the port picker</h3>
      <p>Try a different USB-C cable (charge-only won't work), or hold <span class="kbd">BOOT</span> while plugging in to force download mode.</p>
    </div>

    <div class="step">
      <div class="n">?</div>
      <h3>Flashed but completely silent</h3>
      <p>AXEOFF needs a buzzer on <b>GPIO3 (D2)</b> — a bare XIAO ESP32-S3 doesn't have one onboard, and it must be a <b>passive</b> buzzer (active ones just wail). The OUI-SPY board already has it integrated.</p>
    </div>

    <div class="step">
      <div class="n">?</div>
      <h3>I want to see what's happening</h3>
      <p>Serial at 115200 baud prints one JSON line per detection — MAC, RSSI, signature, human note. <code>pio device monitor -b 115200</code>, or any serial terminal.</p>
    </div>

    <div class="step">
      <div class="n">?</div>
      <h3>Where's the web portal?</h3>
      <p>There isn't one — that's the point. No AP, no config page, no MQTT. Power, buzzer, ears. If you want the full dashboard experience, run <b>OUI-SPY Unified</b> — AXEOFF is also Mode 7 there.</p>
    </div>

  </div>
</section>

<footer>
  Source &middot; <a href="https://github.com/colonelpanichacks/axeoff">github.com/colonelpanichacks/axeoff</a>
</footer>

</main>

<script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
</body>
</html>