mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
191 lines
14 KiB
HTML
191 lines
14 KiB
HTML
<!-- 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 data-i18n 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" data-i18n-title>◀</button>
|
||
</div>
|
||
<div class="pp-panel-body" data-rail-scroller>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="hud-toggle" title="Intelligence HUD (H)" data-i18n-title>
|
||
<span class="pp-icon">◎</span>
|
||
<span class="pp-label" translate="no">HUD</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="hud-layout-row">
|
||
<span class="pp-slider-mini-label" data-i18n>Layout</span>
|
||
<select id="hud-layout-select" class="pp-select gev-field gev-field--compact" aria-label="HUD layout" data-i18n-aria-label>
|
||
<option value="tactical" data-i18n>Tactical</option>
|
||
<option value="operator" data-i18n>Operator</option>
|
||
<option value="minimal" data-i18n>Minimal</option>
|
||
<option value="cyber" data-i18n>Cyber</option>
|
||
</select>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-toggle-row" id="cyber-sonar-row">
|
||
<span class="pp-slider-mini-label" data-i18n>Sonar</span>
|
||
<button class="pp-mode-btn active" id="cyber-sonar-toggle" title="Cyber sonar contact scanner" aria-label="Cyber sonar contact scanner" aria-pressed="true" data-i18n-title data-i18n-aria-label data-i18n>ON</button>
|
||
</div>
|
||
<output id="cyber-sonar-status" class="cyber-sonar-control" role="status"></output>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-rings-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-rings" data-i18n>Rings</label>
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="cyber-sonar-rings" min="3" max="12" step="1" value="8" aria-label="Sonar ring count" data-i18n-aria-label />
|
||
<span class="pp-slider-value" id="cyber-sonar-rings-value">8</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-range-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-range" data-i18n>Range</label>
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="cyber-sonar-range" min="60" max="120" step="1" value="100" aria-label="Sonar ring range" data-i18n-aria-label />
|
||
<span class="pp-slider-value" id="cyber-sonar-range-value">100%</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-intensity-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-intensity" data-i18n>Power</label>
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="cyber-sonar-intensity" min="0" max="100" step="1" value="70" aria-label="Sonar intensity" data-i18n-aria-label />
|
||
<span class="pp-slider-value" id="cyber-sonar-intensity-value">70%</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-opacity-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-opacity" data-i18n>Opacity</label>
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="cyber-sonar-opacity" min="35" max="100" step="1" value="84" aria-label="Cyber contact and label opacity" title="Minimum opacity for map dots, icons, models, brackets, and labels between sonar passes" data-i18n-aria-label data-i18n-title />
|
||
<span class="pp-slider-value" id="cyber-sonar-opacity-value">84%</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-sector-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-sector" data-i18n>Sector</label>
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="cyber-sonar-sector" min="8" max="60" step="1" value="24" aria-label="Sonar sector width" data-i18n-aria-label />
|
||
<span class="pp-slider-value" id="cyber-sonar-sector-value">24°</span>
|
||
</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" data-i18n-title data-i18n-aria-label>
|
||
<span class="pp-icon">▣</span>
|
||
<span class="pp-label" data-i18n>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" data-i18n>Density</label>
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="detection-density-slider" min="0" max="100" step="25" value="50" aria-label="Detection label density" data-i18n-aria-label />
|
||
<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" data-i18n>Allocation</span>
|
||
<div class="gev-segmented pp-mode-seg detection-allocation-seg" role="radiogroup" aria-label="Detection label allocation" data-i18n-aria-label>
|
||
<button class="gev-segment pp-mode-btn active" id="detection-allocation-elastic" data-allocation="ELASTIC" role="radio" aria-checked="true" data-i18n>Elastic</button>
|
||
<button class="gev-segment pp-mode-btn" id="detection-allocation-weighted" data-allocation="WEIGHTED" role="radio" aria-checked="false" data-i18n>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" data-i18n>Fade</label>
|
||
<input type="range" class="gev-quantitative-slider 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" data-i18n-aria-label data-i18n-title />
|
||
<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" data-i18n>Outside</label>
|
||
<input type="range" class="gev-quantitative-slider 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" data-i18n-aria-label data-i18n-title />
|
||
<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" data-i18n>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" data-i18n-title>−</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" data-i18n-title>
|
||
<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" data-i18n>Models</span>
|
||
<div class="gev-segmented pp-mode-seg" role="radiogroup" aria-label="3D model coverage" data-i18n-aria-label>
|
||
<button class="gev-segment pp-mode-btn active" id="models3d-mode-proximity" data-mode="proximity" role="radio" aria-checked="true" data-i18n>Proximity</button>
|
||
<button class="gev-segment pp-mode-btn" id="models3d-mode-all" data-mode="all" role="radio" aria-checked="false" data-i18n>All</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<label class="pp-toggle-btn pp-scope-toggle" title="Scope — the circular viewport mask" data-i18n-title>
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">adjust</span>
|
||
<span class="pp-label" data-i18n>Scope</span>
|
||
<input type="checkbox" id="scope-toggle" checked />
|
||
</label>
|
||
<div class="pp-slider-row visible" id="scope-slider-row">
|
||
<span class="pp-slider-mini-label" data-i18n>Feather</span>
|
||
<!-- First-run feather is 100% (owner preference 2026-10-25), matching
|
||
SCOPE_FEATHER_RATIO_DEFAULT in src/scopeMask.js. Feather softens
|
||
the black mask edge; detection fading uses the separate Fade slider. -->
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="scope-feather-slider" min="0" max="200" value="100" aria-label="Scope edge feather" title="Scope edge feather as a percentage of the keyhole radius" data-i18n-aria-label data-i18n-title />
|
||
<span class="pp-slider-value" id="scope-feather-value">100%</span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="draw-toggle" title="Draw on the world — click vertices, double-click or Enter to finish, Esc to cancel" aria-pressed="false" data-i18n-title>
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">draw</span>
|
||
<span class="pp-label" data-i18n>Draw</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="draw-mode-row">
|
||
<span class="pp-slider-mini-label" data-i18n>Shape</span>
|
||
<div class="gev-segmented pp-mode-seg" role="radiogroup" aria-label="Shape to draw" data-i18n-aria-label>
|
||
<button class="gev-segment pp-mode-btn active" data-shape="area" role="radio" aria-checked="true" data-i18n>Area</button>
|
||
<button class="gev-segment pp-mode-btn" data-shape="line" role="radio" aria-checked="false" data-i18n>Line</button>
|
||
<button class="gev-segment pp-mode-btn" data-shape="pin" role="radio" aria-checked="false" data-i18n>Pin</button>
|
||
</div>
|
||
</div>
|
||
<div class="pp-slider-row" id="draw-label-row">
|
||
<input type="text" class="pp-text-input" id="draw-label-input" maxlength="120" placeholder="Label (optional)" aria-label="Label for the drawn shape" data-i18n-placeholder data-i18n-aria-label autocomplete="off" spellcheck="false">
|
||
<select class="pp-select draw-color-select gev-field gev-field--compact" id="draw-color-select" aria-label="Colour of the drawn shape" data-i18n-aria-label>
|
||
<option value="primary" data-i18n>Primary</option>
|
||
<option value="amber" data-i18n>Amber</option>
|
||
<option value="cyan" data-i18n>Cyan</option>
|
||
<option value="green" data-i18n>Green</option>
|
||
<option value="red" data-i18n>Red</option>
|
||
</select>
|
||
<button class="pp-mode-btn draw-clear-btn" id="draw-clear" type="button" title="Remove every mark from the board" data-i18n-title data-i18n>Clear</button>
|
||
<span class="draw-hint" id="draw-hint" aria-live="polite"></span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group" id="geo-import-group">
|
||
<button class="pp-toggle-btn" id="geo-import-button" type="button" title="Show your own GeoJSON, KML, KMZ or GPX files on the globe (or drop them onto it). File bytes stay on this device; overlays can appear in map screenshots shared with voice." data-i18n-title>
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">upload_file</span>
|
||
<span class="pp-label" data-i18n>Import</span>
|
||
</button>
|
||
<input type="file" id="geo-import-input" accept=".geojson,.json,.kml,.kmz,.gpx" multiple hidden aria-label="Choose GeoJSON, KML, KMZ or GPX files" data-i18n-aria-label>
|
||
<ul class="geo-import-list" id="geo-import-list" aria-label="Imported files" data-i18n-aria-label></ul>
|
||
<span class="draw-hint geo-import-hint" id="geo-import-hint" aria-live="polite"></span>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="celestial-toggle" title="Celestial ring — reveal the full globe" aria-pressed="false" data-i18n-title>
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">flare</span>
|
||
<span class="pp-label" data-i18n>Celestial</span>
|
||
</button>
|
||
</div>
|
||
<button class="pp-toggle-btn" id="clean-view-toggle" title="Hide UI chrome" data-i18n-title>
|
||
<span class="pp-icon">□</span>
|
||
<span class="pp-label" data-i18n>Clean UI</span>
|
||
</button>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="bloom-toggle" title="Bloom / Glow" data-i18n-title>
|
||
<span class="pp-icon">✨</span>
|
||
<span class="pp-label" data-i18n>Bloom</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="bloom-slider-row">
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="bloom-intensity-slider" min="0" max="200" value="0" aria-label="Bloom intensity" data-i18n-aria-label />
|
||
<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" data-i18n-title>
|
||
<span class="pp-icon">🔍</span>
|
||
<span class="pp-label" data-i18n>Sharpen</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="sharpen-slider-row">
|
||
<input type="range" class="gev-quantitative-slider pp-slider" id="sharpen-intensity-slider" min="0" max="100" value="49" aria-label="Sharpen intensity" data-i18n-aria-label />
|
||
<span class="pp-slider-value" id="sharpen-intensity-value">49%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button id="clean-view-exit" title="Return UI controls" data-i18n-title data-i18n>EXIT CLEAN VIEW</button>
|