src/time_machine/ui/assets/cockpit.html

<section
  id="tm-cockpit"
  class="tte-cockpit tm-state-dormant"
  data-machine-state="dormant"
  data-visual-state="dormant"
  data-direction="hold"
  data-route-selection=""
  data-conversation-state="not_ready"
  data-speech-state="idle"
  aria-label="Trans-Temporal Express train cab"
>
  <div class="tte-reference-stage" aria-hidden="true">
    <span class="tte-reference-stage__image tte-reference-stage__image--departure"></span>
    <span class="tte-reference-stage__image tte-reference-stage__image--warp"></span>
    <span class="tte-reference-stage__image tte-reference-stage__image--arrival"></span>
    <span class="tte-reference-stage__vortex"></span>
  </div>

  <div class="tte-windscreen" aria-hidden="true">
    <div class="tte-skywash"></div>
    <div id="tm-era-strip" class="tte-era-strip"></div>
    <div id="tm-landmark-layer" class="tte-landmark-layer"></div>
    <div class="tte-track-bed">
      <span class="tte-rail tte-rail--left"></span>
      <span class="tte-rail tte-rail--right"></span>
      <span class="tte-sleepers"></span>
    </div>
    <div id="tm-era-signs" class="tte-era-signs"></div>
    <div id="tm-steam-curtain" class="tte-steam-curtain"></div>
    <div id="tm-generated-world" class="tte-generated-world"></div>
    <img id="tm-generated-person" class="tte-generated-person" alt="" />
    <div class="tte-window-glow"></div>
    <div class="tte-window-glass"></div>
  </div>

  <div class="tte-cab-shell" aria-hidden="true">
    <span class="tte-cab-shell__top"></span>
    <span class="tte-cab-shell__left"></span>
    <span class="tte-cab-shell__right"></span>
    <span class="tte-cab-shell__bottom"></span>
    <span class="tte-cab-shell__trim"></span>
    <span class="tte-side-window tte-side-window--left"></span>
    <span class="tte-side-window tte-side-window--right"></span>
  </div>

  <div class="tte-start-signs" aria-label="Choose a route through time">
    <button id="tm-route-future" class="tte-route-sign tte-route-sign--future tm-engine-button" type="button" data-route="future">
      <span>Future</span>
    </button>
    <button id="tm-route-past" class="tte-route-sign tte-route-sign--past tm-engine-button" type="button" data-route="past">
      <span>Past</span>
    </button>
  </div>

  <button id="tm-back-start" class="tte-back-button" type="button">Back to Start</button>

  <div class="tte-cab-shine" aria-hidden="true"></div>
  <div class="tte-speed-field" aria-hidden="true">
    <span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="tte-vignette" aria-hidden="true"></div>
  <div class="tte-film-grain" aria-hidden="true"></div>

  <div class="tte-dashboard" aria-hidden="true">
    <div class="tte-gauge-bank">
      <span class="tte-gauge"><i></i></span>
      <span class="tte-gauge"><i></i></span>
      <span class="tte-gauge"><i></i></span>
    </div>
    <div id="tm-throttle" class="tte-throttle">
      <span class="tte-throttle__base"></span>
      <span class="tte-throttle__slot"></span>
      <span class="tte-throttle__stem"></span>
      <span class="tte-throttle__handle"></span>
      <span id="tm-throttle-label" class="tte-throttle__label">Neutral</span>
    </div>
    <div class="tte-console-lights">
      <span></span><span></span><span></span>
    </div>
  </div>

  <div class="tte-destination-plaque" aria-live="polite">
    <span id="tm-route-kicker">Destination</span>
    <strong id="tm-route-title">Between Times</strong>
    <span id="tm-route-atmosphere">Choose Past or Future.</span>
  </div>

  <div id="tm-year-module" class="tte-year-module" aria-live="polite">
    <span class="tte-year-label">Year</span>
    <strong id="tm-year-counter" class="tte-year-counter" data-year="----">----</strong>
  </div>

  <p id="tm-narration-caption" class="tte-narration" data-caption-state="idle" aria-live="polite">
    The cab is quiet. Pick a direction and pull time onto the rails.
  </p>

  <div id="tm-conversation-panel" class="tte-conversation-panel" data-ready="false">
    <div class="tte-contact-card">
      <span>At the window</span>
      <strong id="tm-persona-name">A curious traveler</strong>
      <em id="tm-persona-role">Waiting for the train to arrive.</em>
    </div>
    <div id="tm-dialogue-bubbles" class="tte-dialogue-bubbles" aria-live="polite"></div>
    <form id="tm-dialogue-form" class="tte-dialogue-form">
      <input id="tm-dialogue-input" type="text" autocomplete="off" placeholder="Say something through the open window" />
      <button id="tm-dialogue-submit" type="submit">Speak</button>
    </form>
    <div class="tm-live-voice" aria-label="Live voice channel">
      <button id="tm-live-toggle" type="button" class="tm-live-button" disabled>Live voice</button>
      <div class="tm-live-meter" aria-hidden="true">
        <span id="tm-live-meter-fill"></span>
      </div>
      <div id="tm-live-status" class="tm-live-status">Launch first</div>
    </div>
    <div id="tm-live-transcript" class="tm-live-transcript" aria-live="polite"></div>
  </div>

  <aside id="tm-artifact-panel" class="tte-artifact-panel" data-artifact-state="hidden" aria-label="Recovered artifact">
    <strong id="tm-artifact-title">Unresolved relic</strong>
    <span id="tm-artifact-kind">Artifact</span>
    <p id="tm-artifact-description"></p>
  </aside>

  <div id="tm-image-warning" class="tm-dev-warning" role="status" aria-live="polite" hidden></div>

  <audio id="tm-narration-audio" preload="auto"></audio>
  <audio id="tm-ambient-audio" preload="none" loop></audio>
</section>