926 lines
54 KiB
HTML
926 lines
54 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>God's Eye View</title>
|
||
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||
<link rel="stylesheet" href="/style.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0" rel="stylesheet" />
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
|
||
</head>
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<div id="world-overlay-root" aria-hidden="true">
|
||
<canvas id="world-overlay-canvas"></canvas>
|
||
</div>
|
||
<div id="world-overlay-actions" class="world-overlay-accessibility" role="region" aria-label="Visible map targets">
|
||
<div id="world-overlay-action-list"></div>
|
||
<div id="world-overlay-status" role="status" aria-live="polite" aria-atomic="true"></div>
|
||
</div>
|
||
|
||
<!-- Title -->
|
||
<div id="title-bar">
|
||
<div class="title-glow"></div>
|
||
<h1><span class="title-logo brand-logo" data-logo-gaze data-logo-src="/logo.svg" aria-hidden="true"><img src="/logo.svg" alt="" /></span> <span>GOD'S EYE <span class="title-accent">VIEW</span></span></h1>
|
||
<p class="subtitle">NO PLACE LEFT BEHIND</p>
|
||
</div>
|
||
|
||
<!-- Style indicator -->
|
||
<div id="style-indicator">
|
||
<span class="indicator-label">ACTIVE STYLE</span>
|
||
<span class="indicator-value" id="active-style-name">NORMAL</span>
|
||
</div>
|
||
|
||
<!-- Top-center camera and share actions -->
|
||
<nav id="top-center-actions" aria-label="Globe actions">
|
||
<button id="clear-selected-layers" type="button" aria-label="Clear selected data layers" title="Turn off all selected data layers">
|
||
<span class="material-symbols-outlined" aria-hidden="true">layers_clear</span>
|
||
</button>
|
||
<button id="share-btn" type="button" aria-label="Copy share link" title="Copy share link">
|
||
<span class="share-icon" aria-hidden="true">🔗</span>
|
||
</button>
|
||
<button id="reset-globe-view" type="button" aria-label="Reset to full globe view" title="Reset camera and return to full globe view">
|
||
<span class="material-symbols-outlined" aria-hidden="true">public</span>
|
||
</button>
|
||
</nav>
|
||
<div id="global-loading-status" role="status" aria-live="polite" aria-atomic="true" hidden>
|
||
<span id="global-loading-label">LOADING LIVE DATA</span>
|
||
<span id="global-loading-detail"></span>
|
||
</div>
|
||
<div id="traffic-sync-chip" aria-live="polite">
|
||
<span id="traffic-sync-label">syncing road network</span>
|
||
<span id="traffic-sync-progress">0%</span>
|
||
</div>
|
||
<div id="cctv-sync-chip" aria-live="polite">
|
||
<span id="cctv-sync-label">loading frames</span>
|
||
<span id="cctv-sync-progress">0/0</span>
|
||
</div>
|
||
|
||
<!-- Toast notification -->
|
||
<div id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
|
||
|
||
<!-- Safe frame guides for recording composition -->
|
||
<div id="safe-frame-overlay">
|
||
<div id="safe-frame-box"></div>
|
||
</div>
|
||
|
||
<!-- Aircraft first-person view. It can be entered from the visible view switcher. -->
|
||
<section id="cockpit-hud" aria-label="Aircraft cockpit view" hidden>
|
||
<div class="cockpit-visor-shell" aria-hidden="true">
|
||
<div class="cockpit-roll-arc">
|
||
<span style="--slot:-3;--depth:3">−30</span>
|
||
<span style="--slot:-2;--depth:2">−20</span>
|
||
<span style="--slot:-1;--depth:1">−10</span>
|
||
<span class="active" style="--slot:0;--depth:0">0</span>
|
||
<span style="--slot:1;--depth:1">+10</span>
|
||
<span style="--slot:2;--depth:2">+20</span>
|
||
<span style="--slot:3;--depth:3">+30</span>
|
||
</div>
|
||
<div class="cockpit-pitch-rail cockpit-pitch-rail-left">
|
||
<span>+20</span><span>+10</span><span class="active">00</span><span>−10</span><span>−20</span>
|
||
</div>
|
||
<div class="cockpit-pitch-rail cockpit-pitch-rail-right">
|
||
<span>+20</span><span>+10</span><span class="active">00</span><span>−10</span><span>−20</span>
|
||
</div>
|
||
<div class="cockpit-horizon-guide">
|
||
<span></span><small>LEVEL</small><span></span>
|
||
</div>
|
||
<div id="cockpit-route-direction" class="cockpit-route-direction" hidden aria-label="Estimated destination direction">
|
||
<svg class="cockpit-route-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||
<path d="M12 2 4.58 19.93c-.34.83.51 1.63 1.31 1.27L12 18.47l6.11 2.73c.8.36 1.65-.44 1.31-1.27L12 2Z" />
|
||
</svg>
|
||
<small id="cockpit-route-direction-label">DEST ---°</small>
|
||
</div>
|
||
<div class="cockpit-visor-status cockpit-visor-status-left">OPTICAL PLANE · 01</div>
|
||
<div class="cockpit-visor-status cockpit-visor-status-right">VISOR LOCK · ACTIVE</div>
|
||
</div>
|
||
<div id="cockpit-speed-rim" class="cockpit-altitude-rim cockpit-speed-rim">
|
||
<span class="cockpit-altitude-rim-label">GROUND SPEED · KTS</span>
|
||
<div class="cockpit-altitude-rim-rail"></div>
|
||
<div class="cockpit-altitude-rim-scale">
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
<span data-speed-rim-tick><b></b><i></i></span>
|
||
</div>
|
||
<div class="cockpit-altitude-rim-pointer">
|
||
<span class="material-symbols-outlined">arrow_right</span>
|
||
<strong id="cockpit-speed-rim-value">---</strong>
|
||
</div>
|
||
</div>
|
||
<div id="cockpit-altitude-rim" class="cockpit-altitude-rim">
|
||
<span class="cockpit-altitude-rim-label">ALTITUDE · FT</span>
|
||
<div class="cockpit-altitude-rim-rail"></div>
|
||
<div class="cockpit-altitude-rim-scale">
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
<span data-altitude-rim-tick><b></b><i></i></span>
|
||
</div>
|
||
<div class="cockpit-altitude-rim-pointer">
|
||
<strong id="cockpit-altitude-rim-value">-----</strong>
|
||
<span class="material-symbols-outlined">arrow_left</span>
|
||
</div>
|
||
</div>
|
||
<div class="cockpit-topline">
|
||
<div>
|
||
<span class="cockpit-kicker">FIRST PERSON</span>
|
||
<strong id="cockpit-callsign">AIRCRAFT</strong>
|
||
<span id="cockpit-aircraft-meta" class="cockpit-aircraft-meta">LIVE TRACK · COURSE ALIGNED</span>
|
||
</div>
|
||
<div class="cockpit-vision-controls" role="group" aria-label="Cockpit vision style">
|
||
<button id="cockpit-vision-previous" class="cockpit-vision-nav" type="button" aria-label="Previous cockpit vision style" title="Previous vision style">
|
||
<span class="material-symbols-outlined" aria-hidden="true">chevron_left</span>
|
||
<small>PREV</small>
|
||
</button>
|
||
<button id="cockpit-vision-current" class="cockpit-vision-current" type="button" data-cockpit-vision="optical" aria-label="Current cockpit vision style: NORMAL. Activate for next style." title="Current style: NORMAL — click for next">
|
||
<small>CURRENT</small>
|
||
<strong id="cockpit-vision-current-label" aria-live="polite">NORMAL</strong>
|
||
</button>
|
||
<button id="cockpit-vision-next" class="cockpit-vision-nav" type="button" aria-label="Next cockpit vision style" title="Next vision style">
|
||
<small>NEXT</small>
|
||
<span class="material-symbols-outlined" aria-hidden="true">chevron_right</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="cockpit-reticle material-symbols-outlined" aria-hidden="true">my_location</div>
|
||
<div class="cockpit-compass" aria-label="Current aircraft heading">
|
||
<div class="cockpit-instrument-row">
|
||
<div class="cockpit-readout cockpit-speed">
|
||
<span class="cockpit-readout-label">GROUND SPEED</span>
|
||
<strong id="cockpit-speed-value">---</strong>
|
||
<span class="cockpit-readout-unit">KTS</span>
|
||
</div>
|
||
<div class="cockpit-heading-value"><span id="cockpit-heading-value">---</span><small>°</small></div>
|
||
<div class="cockpit-readout cockpit-altitude">
|
||
<span class="cockpit-readout-label">ALTITUDE</span>
|
||
<strong id="cockpit-altitude-value">-----</strong>
|
||
<span class="cockpit-readout-unit">FT</span>
|
||
</div>
|
||
</div>
|
||
<span class="cockpit-heading-caret material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
|
||
<div class="cockpit-compass-tape" id="cockpit-compass-tape" aria-hidden="true"></div>
|
||
</div>
|
||
<div class="cockpit-position-readout">
|
||
<span id="cockpit-clock">--:--:--Z</span>
|
||
<span id="cockpit-position">--° · --°</span>
|
||
</div>
|
||
<aside id="cockpit-context" class="cockpit-context-window" aria-label="Contact cockpit summary" hidden>
|
||
<header class="cockpit-context-header">
|
||
<div>
|
||
<span class="cockpit-context-kicker">CONTACT</span>
|
||
<strong id="cockpit-context-subject">CONTACTS · 250 KM</strong>
|
||
</div>
|
||
<nav class="cockpit-context-actions" aria-label="Contact navigation">
|
||
<button id="cockpit-context-previous" type="button" aria-label="Previous — prior visited contact in the 250 km window" title="Previous — prior visited contact in the 250 km window">
|
||
<span class="material-symbols-outlined" aria-hidden="true">skip_previous</span>
|
||
</button>
|
||
<button id="cockpit-context-next" type="button" aria-label="Next — nearest unvisited contact in the 250 km window" title="Next — nearest unvisited contact in the 250 km window">
|
||
<span class="material-symbols-outlined" aria-hidden="true">skip_next</span>
|
||
</button>
|
||
<button id="cockpit-context-toggle" type="button" aria-label="Collapse Contact panel" aria-expanded="true" title="Collapse contact panel">
|
||
<span class="material-symbols-outlined" aria-hidden="true">chevron_left</span>
|
||
</button>
|
||
</nav>
|
||
<span class="cockpit-context-qualifier">CONTEXT ONLY</span>
|
||
</header>
|
||
<div class="cockpit-context-cohorts" role="list" aria-label="Nearby cohort counts">
|
||
<div role="listitem" data-context-cohort="flights"><span>FLT</span><strong>—</strong><small>OpenSky</small></div>
|
||
<div role="listitem" data-context-cohort="military"><span>MIL</span><strong>—</strong><small>adsb.lol</small></div>
|
||
<div role="listitem" data-context-cohort="ais-live-vessels"><span>AIS</span><strong>—</strong><small>AISStream</small></div>
|
||
<div role="listitem" data-context-cohort="military-installations"><span>SITE</span><strong>—</strong><small>OpenStreetMap</small></div>
|
||
</div>
|
||
<div class="cockpit-context-nearest">
|
||
<span id="cockpit-context-direction" class="material-symbols-outlined" aria-hidden="true">navigation</span>
|
||
<div>
|
||
<small>NEAREST OBSERVED / MAPPED</small>
|
||
<strong id="cockpit-context-nearest-label">NO AVAILABLE EXAMPLE</strong>
|
||
</div>
|
||
<span id="cockpit-context-bearing">—</span>
|
||
<span id="cockpit-context-distance">—</span>
|
||
</div>
|
||
<footer class="cockpit-context-footer">
|
||
<span id="cockpit-context-uncertainty">AVAILABLE INPUTS ONLY · NOT AN ALL-CLEAR</span>
|
||
<button
|
||
id="cockpit-weather-toggle"
|
||
class="cockpit-context-weather"
|
||
type="button"
|
||
aria-label="Enable cockpit weather effects"
|
||
aria-pressed="false"
|
||
title="Enable cockpit weather effects"
|
||
>
|
||
<span>WX</span>
|
||
<strong id="cockpit-weather-state">OFF</strong>
|
||
</button>
|
||
<time id="cockpit-context-updated">--:--:--Z</time>
|
||
</footer>
|
||
</aside>
|
||
<aside id="cockpit-signal-stream" class="cockpit-signal-window" aria-label="Cockpit briefing carousel" hidden>
|
||
<section id="cockpit-route" class="cockpit-route-card" aria-label="Estimated flight plan" hidden>
|
||
<div class="cockpit-route-heading">
|
||
<span class="cockpit-route-kicker">ESTIMATED FLIGHT PLAN</span>
|
||
<small id="cockpit-route-status">ROUTE DATA UNAVAILABLE</small>
|
||
</div>
|
||
<div class="cockpit-route-endpoints">
|
||
<div class="cockpit-route-airport">
|
||
<span>FROM</span>
|
||
<strong id="cockpit-route-from">UNKNOWN</strong>
|
||
</div>
|
||
<span class="cockpit-route-arrow material-symbols-outlined" aria-hidden="true">east</span>
|
||
<div class="cockpit-route-airport">
|
||
<span>TO</span>
|
||
<strong id="cockpit-route-to">UNKNOWN</strong>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<header class="cockpit-signal-header">
|
||
<div class="cockpit-brief-heading">
|
||
<span id="cockpit-brief-kicker" class="cockpit-signal-kicker"><i aria-hidden="true"></i> LIVE SIGNALS</span>
|
||
<strong id="cockpit-brief-subtitle">OBSERVED / MAPPED PINGS</strong>
|
||
</div>
|
||
<nav class="cockpit-brief-actions" aria-label="Cockpit briefing controls">
|
||
<button id="cockpit-brief-previous" type="button" aria-label="Previous briefing page" title="Previous briefing page">
|
||
<span class="material-symbols-outlined" aria-hidden="true">chevron_left</span>
|
||
</button>
|
||
<span id="cockpit-brief-position" aria-live="polite">1 / 3</span>
|
||
<button id="cockpit-brief-next" type="button" aria-label="Next briefing page" title="Next briefing page">
|
||
<span class="material-symbols-outlined" aria-hidden="true">chevron_right</span>
|
||
</button>
|
||
<button
|
||
id="cockpit-brief-auto"
|
||
type="button"
|
||
aria-label="CYCLE OFF"
|
||
aria-pressed="false"
|
||
title="Cycle briefing pages automatically every 9 seconds (Signals → News → Local). Pauses while you hover or focus the panel. Live signal data refreshes continuously either way."
|
||
>CYCLE OFF</button>
|
||
<button id="cockpit-signal-toggle" type="button" aria-label="Collapse cockpit briefing panel" aria-expanded="true" title="Collapse briefing panel">
|
||
<span class="material-symbols-outlined" aria-hidden="true">right_panel_close</span>
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
<div class="cockpit-brief-stage">
|
||
<section data-cockpit-brief-page="signals" aria-label="Live signals">
|
||
<ol id="cockpit-signal-list" class="cockpit-signal-list" aria-live="polite"></ol>
|
||
</section>
|
||
<section data-cockpit-brief-page="news" aria-label="Latest regional news" hidden>
|
||
<div id="cockpit-news-status" class="cockpit-brief-status">ACQUIRING REGIONAL NEWS</div>
|
||
<ol id="cockpit-news-list" class="cockpit-news-list" aria-live="polite"></ol>
|
||
</section>
|
||
<section data-cockpit-brief-page="local" aria-label="Location-based information" hidden>
|
||
<div class="cockpit-local-place">
|
||
<strong id="cockpit-local-place">RESOLVING REGION</strong>
|
||
<small id="cockpit-local-coordinates">--</small>
|
||
</div>
|
||
<div class="cockpit-local-grid">
|
||
<div><span>TEMP</span><strong id="cockpit-local-temperature">—</strong><small>OPEN-METEO</small></div>
|
||
<div><span>WIND</span><strong id="cockpit-local-wind">—</strong><small id="cockpit-local-wind-direction">—</small></div>
|
||
<div><span>SKY</span><strong id="cockpit-local-condition">UNKNOWN</strong><small id="cockpit-local-cloud">—</small></div>
|
||
<div><span>PRECIP</span><strong id="cockpit-local-precipitation">—</strong><small>MM</small></div>
|
||
</div>
|
||
<a class="cockpit-weather-credit" href="https://open-meteo.com/" target="_blank" rel="noopener">Weather data by Open-Meteo.com</a>
|
||
</section>
|
||
</div>
|
||
<footer class="cockpit-signal-footer">
|
||
<span id="cockpit-brief-source">SOURCE-BACKED EVENTS · NO SYNTHETIC NEWS</span>
|
||
<nav class="cockpit-brief-tabs" aria-label="Cockpit briefing pages">
|
||
<button type="button" data-cockpit-brief-index="0" aria-label="Show Live Signals" aria-current="true">SIG</button>
|
||
<button type="button" data-cockpit-brief-index="1" aria-label="Show Regional News">NEWS</button>
|
||
<button type="button" data-cockpit-brief-index="2" aria-label="Show Local Info">LOCAL</button>
|
||
</nav>
|
||
</footer>
|
||
</aside>
|
||
<aside id="cockpit-utility-controls" class="cockpit-utility-controls" aria-label="Cockpit display and Radio controls">
|
||
<div class="cockpit-utility-control">
|
||
<div class="cockpit-utility-launcher" data-cockpit-launcher="display">
|
||
<span>DISPLAY</span>
|
||
<span class="cockpit-utility-divider" aria-hidden="true"></span>
|
||
<button id="cockpit-display-toggle-btn" class="cockpit-utility-glyph" type="button" aria-expanded="false" aria-controls="cockpit-display-panel" aria-label="Expand Cockpit display options" title="Expand Cockpit display options">◀</button>
|
||
</div>
|
||
<div id="cockpit-display-panel" class="cockpit-utility-popover" role="group" aria-label="Cockpit display options" hidden>
|
||
<div class="cockpit-display-slot" data-cockpit-display-slot="hud"></div>
|
||
<div class="cockpit-display-slot" data-cockpit-display-slot="detection"></div>
|
||
<div class="cockpit-display-slot" data-cockpit-display-slot="parameters"></div>
|
||
<div class="cockpit-display-slot" data-cockpit-display-slot="models3d"></div>
|
||
</div>
|
||
</div>
|
||
<div class="cockpit-utility-control">
|
||
<div class="cockpit-utility-launcher" data-cockpit-launcher="radio">
|
||
<span>RADIO</span>
|
||
<span class="cockpit-utility-divider" aria-hidden="true"></span>
|
||
<button id="cockpit-radio-toggle-btn" class="cockpit-utility-glyph" type="button" aria-expanded="false" aria-controls="cockpit-radio-panel" aria-label="Expand Cockpit Radio controls" title="Expand Cockpit Radio controls">◀</button>
|
||
</div>
|
||
<div id="cockpit-radio-panel" class="cockpit-utility-popover cockpit-radio-compact" role="group" aria-label="Cockpit compact Radio controls" hidden>
|
||
<strong id="cockpit-radio-station" class="cockpit-radio-station">READY</strong>
|
||
<button id="cockpit-radio-enable-btn" class="panel-layer-toggle" type="button" aria-pressed="false">ENABLE</button>
|
||
<div class="cockpit-radio-transport">
|
||
<button id="cockpit-radio-prev-btn" type="button" aria-label="Previous filtered radio station" disabled>◀◀</button>
|
||
<button id="cockpit-radio-play-btn" type="button" aria-label="Play selected radio station" disabled>▶</button>
|
||
<button id="cockpit-radio-next-btn" type="button" aria-label="Next filtered radio station" disabled>▶▶</button>
|
||
</div>
|
||
<label class="cockpit-radio-volume" for="cockpit-radio-volume">
|
||
<span>VOLUME</span>
|
||
<input id="cockpit-radio-volume" class="gev-quantitative-slider" type="range" min="0" max="100" value="80" aria-label="Cockpit Radio volume" disabled />
|
||
<output id="cockpit-radio-volume-value" class="gev-slider-value" for="cockpit-radio-volume">80%</output>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div class="cockpit-help">ESC EXIT <span>·</span> C TOGGLE</div>
|
||
</section>
|
||
|
||
<nav id="view-switcher" aria-label="View switcher">
|
||
<button id="cockpit-reset-globe" type="button" aria-label="Reset cockpit to full globe view" title="Exit cockpit and return to full globe view" hidden>
|
||
<span class="material-symbols-outlined" aria-hidden="true">public</span>
|
||
<span>RESET</span>
|
||
</button>
|
||
<button id="map-view-switch" type="button" aria-label="Exit cockpit view" aria-keyshortcuts="Escape C" title="Exit cockpit view" hidden>
|
||
<span class="material-symbols-outlined" aria-hidden="true">close_fullscreen</span>
|
||
<span>EXIT COCKPIT</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Post-processing toggles (top-right) -->
|
||
<div id="pp-toggles" class="panel-collapsible collapsed" data-panel-id="pp-toggles">
|
||
<div class="compact pp-header-row">
|
||
<span class="pp-header-label">DISPLAY</span>
|
||
<span class="panel-divider" aria-hidden="true"></span>
|
||
<button class="panel-collapse-btn pp-collapse-btn" data-collapse-target="pp-toggles" title="Collapse panel">◀</button>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="hud-toggle" title="Intelligence HUD (H)">
|
||
<span class="pp-icon">◎</span>
|
||
<span class="pp-label">HUD</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="hud-layout-row">
|
||
<span class="pp-slider-mini-label">Layout</span>
|
||
<select id="hud-layout-select" class="pp-select" aria-label="HUD layout">
|
||
<option value="tactical">Tactical</option>
|
||
<option value="operator">Operator</option>
|
||
<option value="minimal">Minimal</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="detection-toggle" title="Detection Overlay (D)" aria-label="Detection overlay" aria-pressed="false">
|
||
<span class="pp-icon">▣</span>
|
||
<span class="pp-label">DETECT</span>
|
||
</button>
|
||
<div class="pp-slider-row detection-slider-row" id="detection-slider-row">
|
||
<label class="pp-slider-mini-label" for="detection-density-slider">Density</label>
|
||
<input type="range" class="pp-slider" id="detection-density-slider" min="0" max="100" step="25" value="50" aria-label="Detection label density" />
|
||
<span class="pp-slider-value" id="detection-density-value">50%</span>
|
||
</div>
|
||
<div class="pp-slider-row detection-allocation-row" id="detection-allocation-row">
|
||
<span class="pp-slider-mini-label">Allocation</span>
|
||
<div class="pp-mode-seg detection-allocation-seg" role="radiogroup" aria-label="Detection label allocation">
|
||
<button class="pp-mode-btn active" id="detection-allocation-elastic" data-allocation="ELASTIC" role="radio" aria-checked="true">Elastic</button>
|
||
<button class="pp-mode-btn" id="detection-allocation-weighted" data-allocation="WEIGHTED" role="radio" aria-checked="false">Weighted</button>
|
||
</div>
|
||
</div>
|
||
<div class="pp-slider-row detection-fade-row" id="detection-fade-row">
|
||
<label class="pp-slider-mini-label" for="detection-fade-slider">Fade</label>
|
||
<input type="range" class="pp-slider" id="detection-fade-slider" min="0" max="40" step="1" value="7" aria-label="Detection fade distance" title="World-overlay fade distance outside the keyhole as a percentage of its radius" />
|
||
<span class="pp-slider-value" id="detection-fade-value">7%</span>
|
||
</div>
|
||
<div class="pp-slider-row detection-opacity-row" id="detection-opacity-row">
|
||
<label class="pp-slider-mini-label" for="detection-opacity-slider">Outside</label>
|
||
<input type="range" class="pp-slider" id="detection-opacity-slider" min="0" max="100" step="1" value="1" aria-label="Detection opacity outside the keyhole" title="World-overlay label and card opacity beyond the fade distance" />
|
||
<span class="pp-slider-value" id="detection-opacity-value">1%</span>
|
||
</div>
|
||
</div>
|
||
<!-- The one shared preset-parameter surface is inserted here at runtime. -->
|
||
<div id="param-slider-panel">
|
||
<div class="param-panel-header">
|
||
<span class="param-panel-title">PARAMETERS</span>
|
||
<span class="param-panel-divider"></span>
|
||
<button class="panel-collapse-btn" id="param-panel-collapse-btn" data-collapse-target="param-slider-panel" title="Collapse panel">−</button>
|
||
</div>
|
||
<div id="param-sliders"></div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<!-- 3D aircraft is DEFAULT-ON in Proximity (owner directive 2026-08-22), so the
|
||
button ships lit and the mode row ships open — the same markup-carries-the-default
|
||
convention as #scope-toggle. ui.js re-syncs both from durable layer state, which
|
||
is what flips them back for a share link or a stored session carrying 3D off. -->
|
||
<button class="pp-toggle-btn active" id="models3d-toggle" aria-pressed="true" title="3D aircraft — flat icons zoomed out, 3D models up close">
|
||
<span class="pp-icon">✈</span>
|
||
<span class="pp-label">3D</span>
|
||
</button>
|
||
<div class="pp-slider-row visible" id="models3d-mode-row">
|
||
<span class="pp-slider-mini-label">Models</span>
|
||
<div class="pp-mode-seg" role="radiogroup" aria-label="3D model coverage">
|
||
<button class="pp-mode-btn active" id="models3d-mode-proximity" data-mode="proximity" role="radio" aria-checked="true">Proximity</button>
|
||
<button class="pp-mode-btn" id="models3d-mode-all" data-mode="all" role="radio" aria-checked="false">All</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn active" id="scope-toggle" title="Scope — the circular viewport mask" aria-pressed="true">
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">adjust</span>
|
||
<span class="pp-label">Scope</span>
|
||
</button>
|
||
<div class="pp-slider-row visible" id="scope-slider-row">
|
||
<span class="pp-slider-mini-label">Feather</span>
|
||
<!-- Feather starts at an 11% soft scope-mask edge (owner final lock
|
||
2026-08-24, superseding the 08-22 hard-crop and 08-23 8% rulings);
|
||
mirrors SCOPE_FEATHER_RATIO_DEFAULT in src/scopeMask.js. Feather
|
||
softens the black mask edge; label fading is the separate Fade
|
||
slider. -->
|
||
<input type="range" class="pp-slider" id="scope-feather-slider" min="0" max="100" value="11" title="Scope edge feather as a percentage of the keyhole radius" />
|
||
<span class="pp-slider-value" id="scope-feather-value">11%</span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="celestial-toggle" title="Celestial ring — reveal the full globe" aria-pressed="false">
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">flare</span>
|
||
<span class="pp-label">Celestial</span>
|
||
</button>
|
||
</div>
|
||
<button class="pp-toggle-btn" id="clean-view-toggle" title="Hide UI chrome">
|
||
<span class="pp-icon">□</span>
|
||
<span class="pp-label">Clean UI</span>
|
||
</button>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="bloom-toggle" title="Bloom / Glow">
|
||
<span class="pp-icon">✨</span>
|
||
<span class="pp-label">Bloom</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="bloom-slider-row">
|
||
<input type="range" class="pp-slider" id="bloom-intensity-slider" min="0" max="200" value="0" />
|
||
<span class="pp-slider-value" id="bloom-intensity-value">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="sharpen-toggle" title="Sharpening">
|
||
<span class="pp-icon">🔍</span>
|
||
<span class="pp-label">Sharpen</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="sharpen-slider-row">
|
||
<input type="range" class="pp-slider" id="sharpen-intensity-slider" min="0" max="100" value="49" />
|
||
<span class="pp-slider-value" id="sharpen-intensity-value">49%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button id="clean-view-exit" title="Return UI controls">EXIT CLEAN VIEW</button>
|
||
|
||
<!-- Unified bottom command dock: locations, voice (injected at runtime), visual presets -->
|
||
<div id="command-dock" aria-label="Navigation, voice, and visual preset controls">
|
||
<!-- Control panel -->
|
||
<div id="control-panel" class="panel-collapsible collapsed">
|
||
<div class="panel-glow"></div>
|
||
<div class="panel-inner">
|
||
<button id="control-panel-toggle" class="panel-header dock-tray-toggle" type="button"
|
||
data-dock-toggle-target="control-panel" aria-expanded="false"
|
||
aria-controls="control-panel-popover" aria-label="Expand Visual Presets">
|
||
<span class="panel-title"><span class="dock-label-icon dock-label-icon-presets" aria-hidden="true"></span>VISUAL PRESETS</span>
|
||
<span class="panel-divider"></span>
|
||
</button>
|
||
<div id="control-panel-popover" class="dock-popover-content">
|
||
<button class="dock-pin-btn" data-pin-target="control-panel" type="button" aria-label="Pin visual presets" aria-pressed="false" title="Keep visual presets open"><img src="/pin.svg" alt="" /></button>
|
||
<div id="style-buttons" class="button-grid">
|
||
<button class="style-btn active" data-style="normal">
|
||
<span class="btn-icon">◯</span>
|
||
<span class="btn-label">Normal</span>
|
||
<span class="btn-key">1</span>
|
||
</button>
|
||
<button class="style-btn" data-style="retro">
|
||
<span class="btn-icon">▦</span>
|
||
<span class="btn-label">CRT</span>
|
||
<span class="btn-key">2</span>
|
||
</button>
|
||
<button class="style-btn" data-style="surveillance">
|
||
<span class="btn-icon">🌙</span>
|
||
<span class="btn-label">NVG</span>
|
||
<span class="btn-key">3</span>
|
||
</button>
|
||
<button class="style-btn" data-style="thermal">
|
||
<span class="btn-icon">🌡️</span>
|
||
<span class="btn-label">FLIR</span>
|
||
<span class="btn-key">4</span>
|
||
</button>
|
||
<button class="style-btn" data-style="anime">
|
||
<span class="btn-icon">✦</span>
|
||
<span class="btn-label">Anime</span>
|
||
<span class="btn-key">5</span>
|
||
</button>
|
||
<button class="style-btn" data-style="noir">
|
||
<span class="btn-icon">◐</span>
|
||
<span class="btn-label">Noir</span>
|
||
<span class="btn-key">6</span>
|
||
</button>
|
||
<button class="style-btn" data-style="snow">
|
||
<span class="btn-icon">❄</span>
|
||
<span class="btn-label">Snow</span>
|
||
<span class="btn-key">7</span>
|
||
</button>
|
||
</div>
|
||
<section class="map-source-section" aria-labelledby="map-source-label">
|
||
<div class="map-source-heading">
|
||
<span id="map-source-label">MAP SOURCE</span>
|
||
<span id="map-stack-status" class="pp-stack-status" aria-live="polite">3D</span>
|
||
</div>
|
||
<div id="map-stack-chips" class="map-stack-chip-row" role="group" aria-label="Map source"></div>
|
||
</section>
|
||
</div>
|
||
<div id="style-mini-status" class="panel-mini-status" aria-live="polite">
|
||
<span class="panel-mini-label">Style</span>
|
||
<span id="style-mini-value" class="panel-mini-value">NORMAL</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Location bar -->
|
||
<div id="location-bar" class="panel-collapsible collapsed">
|
||
<div class="panel-glow"></div>
|
||
<div class="location-inner">
|
||
<div class="location-toolbar">
|
||
<span class="location-toolbar-label"><span class="dock-label-icon dock-label-icon-location" aria-hidden="true"></span>LOCATION</span>
|
||
<button class="panel-collapse-btn" data-collapse-target="location-bar" title="Collapse panel">+</button>
|
||
</div>
|
||
<div id="location-mini-status" class="location-mini-status" aria-live="polite">
|
||
<div id="location-mini-city" class="location-mini-city">📍 Location: --</div>
|
||
<div id="location-mini-poi" class="location-mini-poi">Landmark: --</div>
|
||
</div>
|
||
<div class="dock-popover-content">
|
||
<button class="dock-pin-btn" data-pin-target="location-bar" type="button" aria-label="Pin location tray" aria-pressed="false" title="Keep location tray open"><img src="/pin.svg" alt="" /></button>
|
||
<div id="poi-row" class="poi-row-container"></div>
|
||
<div class="location-bar-divider" id="location-bar-divider"></div>
|
||
<div class="location-city-row">
|
||
<div id="location-pills" class="location-pills"></div>
|
||
<div class="location-search-wrap">
|
||
<button id="search-toggle" class="search-toggle-btn" title="Search any location">
|
||
<span>🔎</span>
|
||
</button>
|
||
<input type="text" id="location-search" placeholder="Search any location..." autocomplete="off" spellcheck="false" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="left-panel-stack">
|
||
<!-- Data Layer Toggle Panel -->
|
||
<div id="data-panel" class="panel-collapsible collapsed active" data-panel-id="data-panel">
|
||
<div class="panel-glow"></div>
|
||
<div class="data-panel-inner">
|
||
<div class="panel-header">
|
||
<span class="panel-title">DATA LAYERS</span>
|
||
<span class="panel-divider"></span>
|
||
<button class="panel-collapse-btn" data-collapse-target="data-panel" title="Collapse panel">+</button>
|
||
</div>
|
||
<div id="data-toggles" class="data-toggle-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CCTV Coverage Panel -->
|
||
<div id="cctv-panel" class="panel-collapsible collapsed" data-panel-id="cctv-panel">
|
||
<div class="panel-glow"></div>
|
||
<div class="cctv-panel-inner">
|
||
<div class="panel-header">
|
||
<span class="panel-title">CCTV</span>
|
||
<span class="panel-divider"></span>
|
||
<button class="panel-collapse-btn" data-collapse-target="cctv-panel" title="Collapse panel">+</button>
|
||
</div>
|
||
<div id="cctv-frame-wrap" class="cctv-frame-wrap">
|
||
<img id="cctv-frame" alt="CCTV feed frame" />
|
||
</div>
|
||
<div id="cctv-source-badge" role="status" aria-live="polite">SOURCE · UNKNOWN</div>
|
||
<div id="cctv-meta">Enable CCTV to load camera intersections</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-enable-btn" class="scene-btn">CCTV OFF</button>
|
||
<button id="cctv-nearest-btn" class="scene-btn">NEAREST</button>
|
||
</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-prev-btn" class="scene-btn">PREV</button>
|
||
<select id="cctv-camera-select" aria-label="CCTV camera"></select>
|
||
<button id="cctv-next-btn" class="scene-btn">NEXT</button>
|
||
</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-focus-btn" class="scene-btn">FOCUS</button>
|
||
<button id="cctv-coverage-btn" class="scene-btn">COVERAGE OFF</button>
|
||
<button id="cctv-auto-hop-btn" class="scene-btn">AUTO HOP OFF</button>
|
||
</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-projection-btn" class="scene-btn">PROJECTION ON</button>
|
||
<span id="cctv-quality-chip">CAL · --</span>
|
||
</div>
|
||
<div class="cctv-calibration-block">
|
||
<div class="cctv-calibration-header">
|
||
<div class="cctv-summary-label">CALIBRATION</div>
|
||
<button id="cctv-adjust-btn" class="scene-btn" title="Drag the camera in the world: rings rotate, arrows move, handles set range/FOV">ADJUST</button>
|
||
</div>
|
||
<div id="cctv-cal-readout" class="cctv-cal-readout" aria-label="Camera pose — click a value to type">
|
||
<button class="cctv-cal-value" data-cal-field="heading" title="Heading (compass °) — click to type">HDG --</button>
|
||
<button class="cctv-cal-value" data-cal-field="pitch" title="Pitch (° up/down) — click to type">PITCH --</button>
|
||
<button class="cctv-cal-value" data-cal-field="fov" title="Horizontal FOV (°) — click to type">FOV --</button>
|
||
<button class="cctv-cal-value" data-cal-field="range" title="Range / monitor-plane distance (m) — click to type">RANGE --</button>
|
||
<button class="cctv-cal-value" data-cal-field="height" title="Mount height above ground (m) — click to type">HGT --</button>
|
||
<button class="cctv-cal-value" data-cal-field="north" title="North offset from catalog position (m) — click to type">ΔN --</button>
|
||
<button class="cctv-cal-value" data-cal-field="east" title="East offset from catalog position (m) — click to type">ΔE --</button>
|
||
</div>
|
||
<div class="cctv-controls cctv-calibration-actions">
|
||
<button id="cctv-calib-save-btn" class="scene-btn">SAVE CAL</button>
|
||
<button id="cctv-calib-reset-btn" class="scene-btn">RESET CAL</button>
|
||
</div>
|
||
</div>
|
||
<div class="cctv-summary-label">SCENE SUMMARY</div>
|
||
<div id="cctv-summary">Enable CCTV to start camera-linked intelligence summaries.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scene Director Panel -->
|
||
<div id="scene-panel" class="panel-collapsible collapsed" data-panel-id="scene-panel">
|
||
<div class="panel-glow"></div>
|
||
<div class="scene-panel-inner">
|
||
<div class="panel-header">
|
||
<span class="panel-title">SCENES</span>
|
||
<span class="panel-divider"></span>
|
||
<button class="panel-collapse-btn" data-collapse-target="scene-panel" title="Collapse panel">+</button>
|
||
</div>
|
||
<div class="scene-controls">
|
||
<select id="scene-select" aria-label="Scene recipe"></select>
|
||
<button id="scene-new-btn" class="scene-btn">NEW</button>
|
||
<button id="scene-delete-btn" class="scene-btn scene-btn-danger">DEL</button>
|
||
</div>
|
||
<div class="scene-controls">
|
||
<button id="scene-capture-btn" class="scene-btn">CAPTURE SHOT</button>
|
||
<button id="scene-update-shot-btn" class="scene-btn">UPDATE SHOT</button>
|
||
</div>
|
||
<div id="scene-shot-list" class="scene-shot-list"></div>
|
||
<div class="scene-controls">
|
||
<button id="scene-start-btn" class="scene-btn">START</button>
|
||
<button id="scene-stop-btn" class="scene-btn scene-btn-danger">STOP</button>
|
||
<button id="scene-next-btn" class="scene-btn">NEXT</button>
|
||
</div>
|
||
<div class="scene-controls">
|
||
<button id="scene-export-btn" class="scene-btn">EXPORT PRESETS</button>
|
||
<button id="scene-import-btn" class="scene-btn">IMPORT</button>
|
||
<button id="scene-download-btn" class="scene-btn">RUN LOG</button>
|
||
<input type="file" id="scene-import-file" accept="application/json,.json" hidden />
|
||
</div>
|
||
<div class="scene-progress">
|
||
<div id="scene-progress-fill">0%</div>
|
||
</div>
|
||
<div id="scene-status">Ready</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Global Context is deliberately independent from the left layer accordion. -->
|
||
<aside id="right-context-rail">
|
||
<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">
|
||
<div class="panel-header">
|
||
<span class="panel-title">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">
|
||
<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>
|
||
<div class="context-radio-mini-heading">
|
||
<span>RADIO</span>
|
||
<strong id="context-radio-mini-station">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">
|
||
<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">
|
||
<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">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>◀◀</button>
|
||
<button id="context-radio-mini-play-btn" type="button" aria-label="Play selected radio station" title="Play" disabled>▶</button>
|
||
<button id="context-radio-mini-next-btn" type="button" aria-label="Next filtered radio station" title="Next station" disabled>▶▶</button>
|
||
</div>
|
||
<label class="context-radio-mini-volume" for="context-radio-mini-volume">
|
||
<span>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 />
|
||
<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">▶</button>
|
||
</div>
|
||
<div class="global-context-modes" role="tablist" aria-label="Context mode">
|
||
<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.">
|
||
<span class="material-symbols-outlined" aria-hidden="true">radar</span>
|
||
<span>CONTACTS</span>
|
||
</button>
|
||
<button id="global-context-missions-btn" class="context-mode-button" type="button" role="tab" tabindex="-1" aria-selected="false" aria-controls="context-missions-view">
|
||
<span class="material-symbols-outlined" aria-hidden="true">rocket_launch</span>
|
||
<span>SPACE MISSIONS</span>
|
||
</button>
|
||
</div>
|
||
<div id="context-mode-standby" class="context-mode-standby">
|
||
<strong>SELECT CONTEXT</strong>
|
||
<span>CONTACTS — nearest planes · vessels · sites<br>SPACE MISSIONS — launches & 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">
|
||
<button id="cockpit-entry" type="button" hidden>
|
||
<span class="material-symbols-outlined" aria-hidden="true">flight</span>
|
||
<span>COCKPIT</span>
|
||
</button>
|
||
<button id="installations-search-btn" class="panel-layer-toggle" type="button">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">🛸</button>
|
||
</div>
|
||
<aside id="military-awareness-panel">
|
||
<div class="military-awareness-standby">
|
||
<strong>CONTACTS CONTEXT OFF</strong>
|
||
<span>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">
|
||
<div class="space-mission-roster-header">
|
||
<div>
|
||
<strong>AVAILABLE MISSIONS</strong>
|
||
<span>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">LOADING 30-DAY MISSION INDEX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="radio-panel" class="panel-collapsible collapsed" data-panel-id="radio-panel" aria-label="Internet radio companion">
|
||
<div class="radio-panel-inner">
|
||
<div class="panel-header">
|
||
<span class="panel-title">RADIO</span>
|
||
<span id="radio-layer-state" class="radio-layer-state">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">+</button>
|
||
</div>
|
||
<div class="radio-directory-row">
|
||
<button id="radio-enable-btn" class="panel-layer-toggle" type="button" aria-pressed="false">ENABLE</button>
|
||
<label class="radio-filter-label" for="radio-filter">STATION TAG</label>
|
||
<select id="radio-filter" aria-label="Filter stations by station tag" disabled>
|
||
<option value="all">All</option>
|
||
</select>
|
||
</div>
|
||
<div id="radio-station-card" class="radio-station-card" aria-live="polite">
|
||
<strong id="radio-station-name">NO STATION SELECTED</strong>
|
||
<span id="radio-station-meta">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 id="radio-tuner-band-label">DIRECTORY BAND</span>
|
||
<output id="radio-tuner-value" for="radio-tuner-slider">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 />
|
||
</div>
|
||
<div class="radio-tuner-readout">
|
||
<span id="radio-tuner-station">ALL · DRAG THE NEEDLE</span>
|
||
<span>SNAPS TO AVAILABLE STATIONS</span>
|
||
</div>
|
||
</div>
|
||
<div class="radio-transport" role="group" aria-label="Radio playback">
|
||
<button id="radio-prev-btn" type="button" aria-label="Previous filtered station" disabled>PREV</button>
|
||
<button id="radio-play-btn" type="button" aria-label="Play selected station" disabled>PLAY</button>
|
||
<button id="radio-next-btn" type="button" aria-label="Next filtered station" disabled>NEXT</button>
|
||
<button id="radio-stop-btn" type="button" aria-label="Stop radio playback" disabled>STOP</button>
|
||
</div>
|
||
<label class="radio-volume-row" for="radio-volume">
|
||
<span>VOLUME</span>
|
||
<input id="radio-volume" class="gev-quantitative-slider" type="range" min="0" max="100" value="80" aria-label="Radio volume" />
|
||
<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">Radio off</div>
|
||
<div class="radio-links">
|
||
<a id="radio-station-homepage" href="#" target="_blank" rel="noopener noreferrer" hidden>STATION SITE</a>
|
||
<a href="https://www.radio-browser.info/" target="_blank" rel="noopener noreferrer">DIRECTORY: RADIO BROWSER</a>
|
||
</div>
|
||
<p class="radio-privacy">Audio connects directly to the broadcaster after you press play. Your IP is visible to that broadcaster.</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div id="scene-runtime"></div>
|
||
|
||
<!-- Explicit mission choice on a fresh session. Live feeds are not auto-enabled
|
||
until the visitor asks; shared links skip this surface entirely. It returns
|
||
every session until "Don't show this again" is ticked — see
|
||
src/firstRunExperience.js for the full show policy. -->
|
||
<aside id="first-run-launcher" role="dialog" aria-labelledby="first-run-title" aria-describedby="first-run-description" hidden>
|
||
<div class="first-run-scanline" aria-hidden="true"></div>
|
||
<header class="first-run-header">
|
||
<span class="first-run-kicker">MISSION CONTROL · FIRST LAUNCH</span>
|
||
</header>
|
||
<h2 id="first-run-title">Choose your first view</h2>
|
||
<!-- The card's one persuasive line, owner-authored and VERBATIM (2026-08-23)
|
||
— including the unspaced em dash. The arc it has to carry: this looks
|
||
like something you should not have access to → the sources are all
|
||
public → the data is real. Tile subcopy stays purely functional. -->
|
||
<p id="first-run-description">It feels like a forbidden cockpit—then you realize the sources are public and the data is real.</p>
|
||
<div class="first-run-choices">
|
||
<button type="button" data-first-run-choice="contacts">
|
||
<span class="material-symbols-outlined" aria-hidden="true">radar</span>
|
||
<span><strong>LIVE CONTACTS</strong><small>Aircraft, vessels and nearby intelligence</small></span>
|
||
<span class="material-symbols-outlined first-run-arrow" aria-hidden="true">arrow_forward</span>
|
||
</button>
|
||
<button type="button" data-first-run-choice="space-missions">
|
||
<span class="material-symbols-outlined" aria-hidden="true">rocket_launch</span>
|
||
<span><strong>SPACE MISSIONS</strong><small>Launches, spacecraft and orbital context</small></span>
|
||
<span class="material-symbols-outlined first-run-arrow" aria-hidden="true">arrow_forward</span>
|
||
</button>
|
||
<button type="button" data-first-run-choice="environmental">
|
||
<span class="material-symbols-outlined" aria-hidden="true">local_fire_department</span>
|
||
<!-- Title text is painted from ENVIRONMENTAL_LABEL_CHOICE at init. -->
|
||
<!-- Subcopy names BOTH feeds this tile turns on, because the launcher
|
||
optimizes for the fully configured experience (owner ruling,
|
||
2026-08-23) — see the mission table in src/firstRunExperience.js. -->
|
||
<span><strong data-first-run-environmental-title>ENVIRONMENTAL</strong><small>Live earthquakes and active fires, from USGS and NASA</small></span>
|
||
<span class="material-symbols-outlined first-run-arrow" aria-hidden="true">arrow_forward</span>
|
||
</button>
|
||
<button type="button" class="first-run-explore" data-first-run-choice="explore">
|
||
<span class="material-symbols-outlined" aria-hidden="true">public</span>
|
||
<span><strong>EXPLORE MANUALLY</strong><small>Begin with a clean globe</small></span>
|
||
<span class="material-symbols-outlined first-run-arrow" aria-hidden="true">arrow_forward</span>
|
||
</button>
|
||
</div>
|
||
<div class="first-run-footer">
|
||
<label class="first-run-suppress">
|
||
<input type="checkbox" data-first-run-suppress />
|
||
<span>Don't show this again</span>
|
||
</label>
|
||
<span>ESC to dismiss</span>
|
||
</div>
|
||
<!-- Kept out of the footer row: it swaps to mission progress and errors, and
|
||
a live region that also holds layout makes the row jump as it speaks. -->
|
||
<p class="first-run-note" data-first-run-status role="status" aria-live="polite">Tip: the GEV MIC button in the dock lets you talk to the map.</p>
|
||
</aside>
|
||
|
||
<!-- POWER UP — in-app key setup. Dev-server only: src/keySetup.js removes
|
||
both the chip and this dialog outright when /api/setup/status is not
|
||
there to answer (prod builds, LAN visitors). Rows are rendered from
|
||
that payload, so the key registry lives in src/keySetupCore.mjs alone. -->
|
||
<button id="key-setup-chip" type="button" hidden aria-haspopup="dialog" aria-controls="key-setup">
|
||
<span class="material-symbols-outlined" aria-hidden="true">bolt</span>
|
||
<span data-key-setup-chip-label>POWER UP</span>
|
||
</button>
|
||
<aside id="key-setup" role="dialog" aria-labelledby="key-setup-title" aria-describedby="key-setup-description" hidden>
|
||
<div class="key-setup-scanline" aria-hidden="true"></div>
|
||
<header class="key-setup-header">
|
||
<span class="key-setup-kicker">GROUND STATION · PROVIDER SETTINGS</span>
|
||
<button type="button" class="key-setup-close" data-key-setup-close aria-label="Close key setup">
|
||
<span class="material-symbols-outlined" aria-hidden="true">close</span>
|
||
</button>
|
||
</header>
|
||
<h2 id="key-setup-title">Power up the globe</h2>
|
||
<p id="key-setup-description">The globe already flies keyless. Every key below switches on another real feed — paste one and it's saved into this app's local configuration, then the server restarts itself. Server-side keys stay on this machine; Google Maps and Cesium ion run in the browser and must be provider-restricted. Keys you configured elsewhere are shown but never touched.</p>
|
||
<div class="key-setup-rows" data-key-setup-rows></div>
|
||
<div class="key-setup-footer">
|
||
<button type="button" class="key-setup-apply" data-key-setup-apply>SAVE KEYS</button>
|
||
<span class="key-setup-hint">ESC to close</span>
|
||
</div>
|
||
<p class="key-setup-note" data-key-setup-status role="status" aria-live="polite">The Google Maps key buys the photorealistic planet — everything else stacks on top.</p>
|
||
</aside>
|
||
|
||
<!-- Intelligence HUD Overlay -->
|
||
<div id="intel-hud"></div>
|
||
|
||
<!-- Loading screen -->
|
||
<div id="loading-screen">
|
||
<div class="loader-content">
|
||
<span class="loader-logo brand-logo" data-logo-gaze data-logo-src="/logo.svg" aria-hidden="true"><img src="/logo.svg" alt="" /></span>
|
||
<h2>GOD'S EYE <span class="title-accent">VIEW</span></h2>
|
||
<p class="loader-status">Initializing photorealistic world...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="/src/main.js"></script>
|
||
</body>
|
||
</html>
|