static/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Nova</title>
  <link rel="icon" href="data:,">
  <link rel="stylesheet" href="/static/nova.css">
</head>
<body>
  <main id="app" data-state="idle">
    <header class="topbar">
      <span class="brand">NOVA</span>
      <button id="llm" class="chip" type="button" hidden title="Switch between the Pi's Hailo model and the cloud LLM">—</button>
      <span id="phase" class="phase">Idle</span>
    </header>

    <section id="gate" class="gate">
      <p class="lede">Talk to Nova on its Raspberry Pi — the speech models run on the device;
        this page only connects you to it.</p>
      <form id="login" autocomplete="off">
        <label for="passcode">Passcode</label>
        <input id="passcode" type="password" required autocomplete="current-password" placeholder="Enter passcode">
        <button id="connect" type="submit">Connect</button>
      </form>
      <p id="gate-msg" class="msg" role="status"></p>
    </section>

    <section id="live" class="live" hidden>
      <div class="orb-wrap"><canvas id="orb" width="320" height="320" aria-hidden="true"></canvas></div>
      <p id="live-msg" class="msg" role="status"></p>
      <ol id="transcript" class="transcript" aria-live="polite"></ol>
      <footer class="controls">
        <button id="mute" type="button" class="ghost">Mute</button>
        <span id="metrics" class="metrics"></span>
        <button id="hangup" type="button" class="danger">End</button>
      </footer>
    </section>
  </main>
  <script src="/static/vendor/livekit-client.umd.min.js"></script>
  <script src="/static/nova.js"></script>
</body>
</html>