mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 18:34:02 +00:00
Replaces the EN/ES/RU buttons in the Visual Presets dock with a picker that scales to many languages: a globe button with the current code next to the POWER UP chip, opening a list of languages named in their own language with their codes, the current one first and checked. A search field appears past 8 languages. Keyboard: arrows, Home/End, Enter/Space, Esc, type-ahead; keys stay in the list while it is open. Choosing a language still asks before dropping unsaved work, then reloads. Phones get the globe alone and a full-width sheet; the layout uses logical properties for right-to-left languages. Co-Authored-By: Claude Opus 5.5 <[email protected]>
98 lines
6.0 KiB
HTML
98 lines
6.0 KiB
HTML
<!-- Unified bottom command dock: locations, voice (injected at runtime), visual presets -->
|
|
<div id="command-dock" aria-label="Navigation, voice, and visual preset controls" data-i18n-aria-label>
|
|
<!-- 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" data-i18n-aria-label>
|
|
<span class="panel-title" data-i18n-runtime><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" data-i18n-aria-label data-i18n-title><img src="/pin.svg" alt="" /></button>
|
|
<div id="style-buttons" class="button-grid">
|
|
<button class="style-btn active" data-style="normal" title="Show the globe without a visual filter." data-i18n-title>
|
|
<span class="btn-icon">◯</span>
|
|
<span class="btn-label" data-i18n>Normal</span>
|
|
<span class="btn-key">1</span>
|
|
</button>
|
|
<button class="style-btn" data-style="retro" title="Emulate a green phosphor CRT with scanlines and screen curvature." data-i18n-title>
|
|
<span class="btn-icon">▦</span>
|
|
<span class="btn-label" data-i18n>CRT</span>
|
|
<span class="btn-key">2</span>
|
|
</button>
|
|
<button class="style-btn" data-style="surveillance" title="Simulate night-vision goggles with green intensification and a tube vignette." data-i18n-title>
|
|
<span class="btn-icon">🌙</span>
|
|
<span class="btn-label" data-i18n>NVG</span>
|
|
<span class="btn-key">3</span>
|
|
</button>
|
|
<button class="style-btn" data-style="thermal" title="Simulate FLIR-style thermal contrast. Turn up Ironbow for color." data-i18n-title>
|
|
<span class="btn-icon">🌡️</span>
|
|
<span class="btn-label" data-i18n>FLIR</span>
|
|
<span class="btn-key">4</span>
|
|
</button>
|
|
<button class="style-btn" data-style="anime" title="Apply bright cel-shaded color and illustrated outlines." data-i18n-title>
|
|
<span class="btn-icon">✦</span>
|
|
<span class="btn-label" data-i18n>Anime</span>
|
|
<span class="btn-key">5</span>
|
|
</button>
|
|
<button class="style-btn" data-style="noir" title="Apply high-contrast monochrome film-noir grading." data-i18n-title>
|
|
<span class="btn-icon">◐</span>
|
|
<span class="btn-label" data-i18n>Noir</span>
|
|
<span class="btn-key">6</span>
|
|
</button>
|
|
<button class="style-btn" data-style="snow" title="Add a cold, snowy whiteout treatment to the scene." data-i18n-title>
|
|
<span class="btn-icon">❄</span>
|
|
<span class="btn-label" data-i18n>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 data-i18n 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" data-i18n-aria-label></div>
|
|
</section>
|
|
</div>
|
|
<div id="style-mini-status" class="panel-mini-status" aria-live="polite">
|
|
<span class="panel-mini-label" data-i18n>Style</span>
|
|
<span id="style-mini-value" class="panel-mini-value" data-i18n>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">
|
|
<button id="location-bar-toggle" class="dock-tray-toggle" type="button" data-dock-toggle-target="location-bar" aria-controls="location-bar-popover" aria-expanded="false" aria-label="Expand LOCATION" title="Expand LOCATION" data-i18n-aria-label data-i18n-title>
|
|
<span class="location-toolbar-label" data-i18n-runtime><span class="dock-label-icon dock-label-icon-location" aria-hidden="true"></span>LOCATION</span>
|
|
</button>
|
|
<button class="panel-collapse-btn" data-collapse-target="location-bar" title="Collapse panel" data-i18n-title>+</button>
|
|
</div>
|
|
<div id="location-mini-status" class="location-mini-status" aria-live="polite">
|
|
<div id="location-mini-city" class="location-mini-city" data-i18n>📍 Location: --</div>
|
|
<div id="location-mini-poi" class="location-mini-poi" data-i18n>Landmark: --</div>
|
|
</div>
|
|
<div id="location-bar-popover" 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" data-i18n-aria-label data-i18n-title><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" data-i18n-title>
|
|
<span>🔎</span>
|
|
</button>
|
|
<input type="text" id="location-search" placeholder="Search any location..." autocomplete="off" spellcheck="false" aria-label="Search location by name or coordinates" data-i18n-aria-label data-i18n-placeholder />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|