gods-eye-view/src/ui/templates/context.html

  <!-- Global Context is deliberately independent from the left layer accordion. -->
  <aside id="right-context-rail">
    <div id="weather-panel" class="panel-collapsible" data-panel-id="weather-panel" hidden>
      <div class="panel-glow"></div>
      <div class="weather-panel-inner" data-rail-scroller>
        <div class="panel-header">
          <span class="panel-title" data-i18n>WEATHER</span>
          <span id="weather-panel-count" aria-label="Active weather products" data-i18n-aria-label>0</span>
          <span class="panel-divider"></span>
          <button class="panel-collapse-btn" data-collapse-target="weather-panel" type="button" title="Collapse panel" data-i18n-title>▼</button>
        </div>
        <div id="weather-panel-body" data-rail-scroller></div>
      </div>
    </div>
    <div id="recent-imagery-panel" class="panel-collapsible" data-panel-id="recent-imagery-panel" hidden>
      <div class="panel-glow"></div>
      <div class="recent-imagery-panel-inner" data-rail-scroller>
        <div class="panel-header">
          <span class="panel-title" data-i18n>RECENT IMAGERY</span>
          <span id="recent-imagery-panel-count" aria-label="Imagery days in the box" data-i18n-aria-label></span>
          <span class="panel-divider"></span>
          <button class="panel-collapse-btn" data-collapse-target="recent-imagery-panel" type="button" title="Collapse panel" data-i18n-title>▼</button>
        </div>
        <div id="recent-imagery-panel-body" data-rail-scroller></div>
      </div>
    </div>
    <div id="global-context-panel" class="panel-collapsible collapsed" data-panel-id="global-context-panel">
      <div class="panel-glow"></div>
      <div class="global-context-panel-inner" data-rail-scroller>
        <div class="panel-header">
          <span class="panel-title" data-i18n>CONTEXT</span>
          <span class="panel-divider"></span>
          <div id="context-radio-dock" class="context-radio-dock">
            <button id="context-radio-toggle-btn" class="context-radio-toggle" type="button" aria-expanded="false" aria-controls="context-radio-mini" aria-label="Open compact Radio controls" title="Open compact Radio controls" data-i18n-aria-label data-i18n-title>
              <span class="material-symbols-outlined" aria-hidden="true">radio</span>
            </button>
            <div id="context-radio-mini" class="context-radio-mini" role="group" aria-label="Compact Radio controls" hidden data-i18n-aria-label>
              <div class="context-radio-mini-heading">
                <span data-i18n>RADIO</span>
                <strong id="context-radio-mini-station" data-i18n>RADIO READY</strong>
                <span class="context-radio-mini-actions">
                  <button id="context-radio-details-btn" type="button" aria-label="Open detailed Radio controls" aria-expanded="false" aria-controls="radio-panel" title="Open detailed Radio controls" data-i18n-aria-label data-i18n-title>
                    <span class="material-symbols-outlined" aria-hidden="true">open_in_full</span>
                  </button>
                  <button id="context-radio-mini-close-btn" type="button" aria-label="Close compact Radio controls" title="Close compact Radio controls" data-i18n-aria-label data-i18n-title>
                    <span class="material-symbols-outlined" aria-hidden="true">close</span>
                  </button>
                </span>
              </div>
              <button id="context-radio-mini-enable-btn" class="panel-layer-toggle" type="button" aria-pressed="false" data-i18n>ENABLE</button>
              <div class="context-radio-mini-transport">
                <button id="context-radio-mini-prev-btn" type="button" aria-label="Previous filtered radio station" title="Previous station" disabled data-i18n-aria-label data-i18n-title>◀◀</button>
                <button id="context-radio-mini-play-btn" type="button" aria-label="Play selected radio station" title="Play" disabled data-i18n-aria-label data-i18n-title>▶</button>
                <button id="context-radio-mini-next-btn" type="button" aria-label="Next filtered radio station" title="Next station" disabled data-i18n-aria-label data-i18n-title>▶▶</button>
              </div>
              <label class="context-radio-mini-volume" for="context-radio-mini-volume">
                <span data-i18n>VOLUME</span>
                <input id="context-radio-mini-volume" class="gev-quantitative-slider" type="range" min="0" max="100" value="80" aria-label="Compact Radio volume" disabled data-i18n-aria-label />
                <output id="context-radio-mini-volume-value" class="gev-slider-value" for="context-radio-mini-volume">80%</output>
              </label>
            </div>
          </div>
          <button class="panel-collapse-btn" data-collapse-target="global-context-panel" title="Expand panel" data-i18n-title>▶</button>
        </div>
        <div class="cyber-panel-body" data-rail-scroller>
        <div class="global-context-modes" role="tablist" aria-label="Context mode" data-i18n-aria-label>
          <button id="global-context-flights-btn" class="context-mode-button" type="button" role="tab" tabindex="0" aria-selected="false" aria-controls="context-flights-view" aria-label="CONTACTS" title="Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently." data-i18n-aria-label data-i18n-title>
            <span class="material-symbols-outlined" aria-hidden="true">radar</span>
            <span data-i18n>CONTACTS</span>
          </button>
          <button id="global-context-missions-btn" class="context-mode-button" type="button" role="tab" tabindex="0" aria-selected="false" aria-controls="context-missions-view">
            <span class="material-symbols-outlined" aria-hidden="true">rocket_launch</span>
            <span data-i18n>SPACE MISSIONS</span>
          </button>
        </div>
        <div id="context-mode-standby" class="context-mode-standby">
          <strong data-i18n>SELECT CONTEXT</strong>
          <span data-i18n-runtime>CONTACTS — nearest planes · vessels · sites<br>SPACE MISSIONS — launches &amp; orbital assets</span>
        </div>
        <section id="context-flights-view" class="context-mode-view" role="tabpanel" aria-labelledby="global-context-flights-btn" hidden>
          <div class="global-context-actions" aria-label="Contact Context actions" data-i18n-aria-label>
            <button id="cockpit-entry" type="button" hidden>
              <span class="material-symbols-outlined" aria-hidden="true">flight</span>
              <span data-i18n>COCKPIT</span>
            </button>
            <button id="installations-search-btn" class="panel-layer-toggle" type="button" data-i18n>SEARCH NEARBY SITES</button>
            <button id="tr3b-toggle" class="tr3b-toggle" type="button" aria-pressed="false" hidden aria-label="Reclassify tracked contact as TR-3B" title="Reclassify as TR-3B" data-i18n-aria-label data-i18n-title>🛸</button>
          </div>
          <aside id="military-awareness-panel">
            <div class="military-awareness-standby">
              <strong data-i18n>CONTACTS CONTEXT OFF</strong>
              <span data-i18n>SELECT CONTACTS TO LOAD OBSERVED / MAPPED PROXIMITY</span>
            </div>
          </aside>
        </section>
        <section id="context-missions-view" class="context-mode-view" role="tabpanel" aria-labelledby="global-context-missions-btn" hidden>
          <div id="space-mission-panel-host">
            <div id="space-mission-roster" class="space-mission-roster" aria-label="Available Space Missions" data-i18n-aria-label>
              <div class="space-mission-roster-header">
                <div>
                  <strong data-i18n>AVAILABLE MISSIONS</strong>
                  <span data-i18n>SELECT A MISSION TO INSPECT</span>
                </div>
                <output data-mission-roster-count>—</output>
              </div>
              <div class="space-mission-roster-list" data-mission-roster-list>
                <div class="space-mission-roster-empty" data-i18n>LOADING 30-DAY MISSION INDEX</div>
              </div>
              <p class="space-mission-roster-focus-continuation" tabindex="-1" data-mission-roster-focus-continuation data-i18n>TAB PREVIEWS · ENTER / SPACE SELECTS</p>
            </div>
          </div>
        </section>
        <section id="radio-panel" class="panel-collapsible collapsed" data-panel-id="radio-panel" aria-label="Internet radio and local SDR" data-i18n-aria-label>
          <div class="radio-panel-inner">
            <div class="panel-header">
              <span class="panel-title" data-i18n>RADIO</span>
              <span id="radio-layer-state" class="radio-layer-state" data-i18n>OFF</span>
              <span class="panel-divider"></span>
              <button class="panel-collapse-btn" data-collapse-target="radio-panel" title="Expand Radio" aria-label="Expand Radio section" data-i18n-title data-i18n-aria-label>+</button>
            </div>
            <div class="radio-directory-row">
              <button id="radio-enable-btn" class="panel-layer-toggle" type="button" aria-pressed="false" data-i18n>ENABLE</button>
              <label class="radio-filter-label" for="radio-filter" data-i18n>STATION TAG</label>
              <select class="gev-field" id="radio-filter" aria-label="Filter stations by station tag" disabled data-i18n-aria-label>
                <option value="all" data-i18n>All</option>
              </select>
            </div>
            <div id="radio-station-card" class="radio-station-card" aria-live="polite">
              <strong id="radio-station-name" data-i18n>NO STATION SELECTED</strong>
              <span id="radio-station-meta" data-i18n>Enable Radio, then choose a globe marker or use next.</span>
              <span id="radio-station-tags"></span>
            </div>
            <div id="radio-tuner" class="radio-tuner" hidden>
              <div class="radio-tuner-header">
                <span data-i18n id="radio-tuner-band-label">DIRECTORY BAND</span>
                <output id="radio-tuner-value" for="radio-tuner-slider" data-i18n>DRAG TO TUNE</output>
              </div>
              <div class="radio-tuner-dial">
                <div class="radio-tuner-scale" aria-hidden="true"></div>
                <div id="radio-tuner-needle" class="radio-tuner-needle" aria-hidden="true"></div>
                <input id="radio-tuner-slider" type="range" min="0" max="0" step="1" value="0"
                  aria-label="Tune available internet radio stations" aria-valuetext="No station available" disabled data-i18n-aria-label />
              </div>
              <div class="radio-tuner-readout">
                <span id="radio-tuner-station" data-i18n>ALL · DRAG THE NEEDLE</span>
                <span data-i18n>SNAPS TO AVAILABLE STATIONS</span>
              </div>
            </div>
            <div class="radio-transport" role="group" aria-label="Radio playback" data-i18n-aria-label>
              <button id="radio-prev-btn" type="button" aria-label="Previous filtered station" disabled data-i18n-aria-label data-i18n>PREV</button>
              <button id="radio-play-btn" type="button" aria-label="Play selected station" disabled data-i18n-aria-label data-i18n>PLAY</button>
              <button id="radio-next-btn" type="button" aria-label="Next filtered station" disabled data-i18n-aria-label data-i18n>NEXT</button>
              <button id="radio-stop-btn" type="button" aria-label="Stop radio playback" disabled data-i18n-aria-label data-i18n>STOP</button>
            </div>
            <label class="radio-volume-row" for="radio-volume">
              <span data-i18n>VOLUME</span>
              <input id="radio-volume" class="gev-quantitative-slider" type="range" min="0" max="100" value="80" aria-label="Radio volume" data-i18n-aria-label />
              <output id="radio-volume-value" class="gev-slider-value" for="radio-volume">80%</output>
            </label>
            <div id="radio-playback-state" class="radio-playback-state" role="status" aria-live="polite" data-i18n>Radio off</div>
            <div class="radio-links">
              <a id="radio-station-homepage" href="#" target="_blank" rel="noopener noreferrer" hidden data-i18n>STATION SITE</a>
              <a href="https://www.radio-browser.info/" target="_blank" rel="noopener noreferrer" data-i18n>DIRECTORY: RADIO BROWSER</a>
            </div>
            <p class="radio-privacy" data-i18n>Audio connects directly to the broadcaster after you press play. Your IP is visible to that broadcaster.</p>
            <div id="sdr-radio-card" class="sdr-radio-card" role="group" aria-label="Local RTL-SDR receiver" data-i18n-aria-label>
              <div class="sdr-radio-heading">
                <strong data-i18n>LOCAL RTL-SDR</strong>
                <span id="sdr-connection-state" data-i18n-runtime>NO USB</span>
              </div>
              <p data-i18n>Chrome/Edge · WebUSB · one local tuner shared by FM and the Local ADS-B layer.</p>
              <div class="sdr-radio-actions">
                <button id="sdr-connect-btn" class="panel-layer-toggle" type="button" aria-pressed="false" data-i18n>CONNECT</button>
                <button id="sdr-locate-btn" type="button" title="Use your location for faster ADS-B position decoding" data-i18n-title data-i18n>LOCATE</button>
                <button id="sdr-change-device-btn" type="button" title="Choose a different RTL-SDR or receiver channel" data-i18n-title data-i18n>CHANGE DEVICE</button>
              </div>
              <div class="sdr-mode-row" role="group" aria-label="RTL-SDR receiver mode" data-i18n-aria-label>
                <button id="sdr-mode-fm-btn" class="active" type="button" aria-pressed="true" translate="no">FM</button>
                <button id="sdr-mode-adsb-btn" type="button" aria-pressed="false" translate="no">ADS-B · 1090</button>
              </div>
              <div class="sdr-gain-row">
                <label for="sdr-gain-select" data-i18n>GAIN</label>
                <select class="gev-field" id="sdr-gain-select" aria-label="RTL-SDR tuner gain for the current mode" data-i18n-aria-label>
                  <option value="auto" data-i18n>AUTO</option>
                  <option value="0.0" translate="no">0.0 dB</option>
                  <option value="0.9" translate="no">0.9 dB</option>
                  <option value="1.4" translate="no">1.4 dB</option>
                  <option value="2.7" translate="no">2.7 dB</option>
                  <option value="3.7" translate="no">3.7 dB</option>
                  <option value="7.7" translate="no">7.7 dB</option>
                  <option value="8.7" translate="no">8.7 dB</option>
                  <option value="12.5" translate="no">12.5 dB</option>
                  <option value="14.4" translate="no">14.4 dB</option>
                  <option value="15.7" translate="no">15.7 dB</option>
                  <option value="16.6" translate="no">16.6 dB</option>
                  <option value="19.7" translate="no">19.7 dB</option>
                  <option value="20.7" translate="no">20.7 dB</option>
                  <option value="22.9" translate="no">22.9 dB</option>
                  <option value="25.4" translate="no">25.4 dB</option>
                  <option value="28.0" translate="no">28.0 dB</option>
                  <option value="29.7" translate="no">29.7 dB</option>
                  <option value="32.8" translate="no">32.8 dB</option>
                  <option value="33.8" translate="no">33.8 dB</option>
                  <option value="36.4" translate="no">36.4 dB</option>
                  <option value="37.2" translate="no">37.2 dB</option>
                  <option value="38.6" translate="no">38.6 dB</option>
                  <option value="40.2" translate="no">40.2 dB</option>
                  <option value="42.1" translate="no">42.1 dB</option>
                  <option value="43.4" translate="no">43.4 dB</option>
                  <option value="43.9" translate="no">43.9 dB</option>
                  <option value="44.5" translate="no">44.5 dB</option>
                  <option value="48.0" translate="no">48.0 dB</option>
                  <option value="49.6" translate="no">49.6 dB</option>
                </select>
              </div>
              <div id="sdr-adsb-stats" class="sdr-adsb-stats" role="status" aria-live="off" hidden>
                <span><output id="sdr-stat-rate">--</output> <span data-i18n>MSG/S</span></span>
                <span><output id="sdr-stat-heard">0</output> <span data-i18n>HEARD</span></span>
                <span><output id="sdr-stat-positioned">0</output> <span data-i18n>POSITIONED</span></span>
                <span translate="no">IQ <output id="sdr-stat-iq">--</output></span>
              </div>
              <div class="sdr-frequency-row">
                <label for="sdr-frequency-input" data-i18n>FM MHZ</label>
                <input class="gev-field" id="sdr-frequency-input" type="number" min="87.5" max="108" step="0.1" value="98.5" inputmode="decimal" />
                <button id="sdr-tune-btn" type="button" data-i18n>TUNE</button>
              </div>
              <div class="sdr-seek-row" role="group" aria-label="Seek broadcast FM stations" data-i18n-aria-label>
                <button id="sdr-seek-back-btn" type="button" disabled data-i18n>◀ SEEK</button>
                <button id="sdr-seek-forward-btn" type="button" disabled data-i18n>SEEK ▶</button>
              </div>
              <label class="radio-volume-row" for="sdr-volume">
                <span data-i18n>SDR VOL</span>
                <input id="sdr-volume" class="gev-quantitative-slider" type="range" min="0" max="100" value="80" aria-label="Local SDR volume" data-i18n-aria-label />
                <output id="sdr-volume-value" class="gev-slider-value" for="sdr-volume">80%</output>
              </label>
              <div id="sdr-status" class="radio-playback-state" role="status" aria-live="polite" data-i18n>Connect an RTL-SDR to begin.</div>
              <div id="sdr-feed-status" class="sdr-feed-status" role="status" aria-live="off" hidden></div>
            </div>
          </div>
        </section>
        </div>
      </div>
    </div>
  </aside>

  <div id="scene-runtime"></div>