AegisSight/AegisSight-Globe
2
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Mouse-Over Tooltips fuer alle Layer und Visual Modes

Quellcode durchsuchen 
Jedes interaktive Element hat einen erklaerenden Tooltip:
- Layer-Checkboxen: Datenquelle, Refresh-Rate, Anzahl
- Layer-Namen: Inhalt und Farbkodierung
- Visual Modes: Erklaerung des Effekts
- Custom CSS-Tooltips passend zum Dark-Theme
Dieser Commit ist enthalten in:
Claude Dev
2026-03-24 12:54:46 +01:00
Ursprung 9b4ea4cd28
Commit 15725e9f81
2 geänderte Dateien mit 45 neuen und 20 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

25
static/css/globe.css
Datei anzeigen

@@ -230,3 +230,28 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
pointer-events: none;
z-index: 40;
}
/* === Tooltip-Styling === */
.layer-toggle[title]:hover::after,
.layer-name[title]:hover::after,
.vmode-btn[title]:hover::after {
content: attr(title);
position: absolute;
left: 110%;
top: 50%;
transform: translateY(-50%);
background: rgba(11, 17, 33, 0.95);
border: 1px solid var(--border);
border-radius: 4px;
padding: 6px 10px;
font-size: 10px;
color: var(--text);
white-space: nowrap;
z-index: 200;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
max-width: 280px;
white-space: normal;
line-height: 1.4;
}
.layer-toggle, .layer-name, .vmode-btn { position: relative; }

40
static/index.html
Datei anzeigen

@@ -47,49 +47,49 @@
<h3 class="panel-title">LAYER</h3>
<div class="panel-section">
<label class="layer-toggle">
<input type="checkbox" id="layer-flights">
<input type="checkbox" id="layer-flights" title="Echtzeit-Flugverkehr weltweit (OpenSky Network, ~7.000 Flugzeuge, 15s Refresh)">
<span class="layer-dot dot-flights"></span>
<span class="layer-name">Flugverkehr</span>
<span class="layer-name" title="~7.000 Flugzeuge weltweit, Position + Hoehe + Geschwindigkeit">Flugverkehr</span>
<span class="layer-count" id="count-flights">-</span>
</label>
<div class="layer-loading" id="loading-flights"></div>
<div class="layer-status" id="status-flights"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-ships">
<input type="checkbox" id="layer-ships" title="Echtzeit-Schiffsverkehr weltweit (AISStream AIS-Daten, kontinuierlich)">
<span class="layer-dot dot-ships"></span>
<span class="layer-name">Schiffsverkehr</span>
<span class="layer-name" title="Tausende Schiffe global, MMSI + SOG + COG">Schiffsverkehr</span>
<span class="layer-count" id="count-ships">-</span>
</label>
<div class="layer-loading" id="loading-ships"></div>
<div class="layer-status" id="status-ships"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-quakes">
<input type="checkbox" id="layer-quakes" title="Erdbeben M2.5+ der letzten 24h (USGS Earthquake Hazards, 5min Refresh)">
<span class="layer-dot dot-quakes"></span>
<span class="layer-name">Erdbeben</span>
<span class="layer-name" title="Magnitude 2.5+, Farbe nach Alter (rot=frisch, gelb=aelter)">Erdbeben</span>
<span class="layer-count" id="count-quakes">-</span>
</label>
<div class="layer-loading" id="loading-quakes"></div>
<div class="layer-status" id="status-quakes"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-gdelt">
<input type="checkbox" id="layer-gdelt" title="Geokodierte Nachrichten der letzten 24h (GDELT Global Event Database)">
<span class="layer-dot dot-gdelt"></span>
<span class="layer-name">Nachrichten</span>
<span class="layer-name" title="Geokodierte News-Events, thematisch zur aktuellen Weltlage">Nachrichten</span>
<span class="layer-count" id="count-gdelt">-</span>
</label>
<div class="layer-loading" id="loading-gdelt"></div>
<div class="layer-status" id="status-gdelt"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-satellites">
<input type="checkbox" id="layer-satellites" title="Satelliten-Orbits in Echtzeit (CelesTrak TLE: ISS, GPS, Galileo, Starlink)">
<span class="layer-dot dot-satellites"></span>
<span class="layer-name">Satelliten</span>
<span class="layer-name" title="ISS (rot), GPS (orange), Galileo (blau), Starlink (grau)">Satelliten</span>
<span class="layer-count" id="count-satellites">-</span>
</label>
<div class="layer-loading" id="loading-satellites"></div>
<div class="layer-status" id="status-satellites"></div>
<label class="layer-toggle">
<input type="checkbox" id="layer-disasters">
<input type="checkbox" id="layer-disasters" title="Aktive Naturkatastrophen (NASA EONET: Waldbraende, Vulkane, Stuerme, Fluten)">
<span class="layer-dot dot-disasters"></span>
<span class="layer-name">Katastrophen</span>
<span class="layer-name" title="Waldbraende, Vulkane, Stuerme, Fluten, Erdrutsche, Eisschmelze">Katastrophen</span>
<span class="layer-count" id="count-disasters">-</span>
</label>
<div class="layer-loading" id="loading-disasters"></div>
@@ -98,14 +98,14 @@
<div class="panel-divider"></div>
<div class="panel-section">
<label class="layer-toggle">
<input type="checkbox" id="layer-daynight">
<input type="checkbox" id="layer-daynight" title="Tag/Nacht-Beleuchtung basierend auf aktueller Sonnenposition">
<span class="layer-dot dot-daynight"></span>
<span class="layer-name">Tag/Nacht</span>
<span class="layer-name" title="Sonnenlicht-Simulation zeigt aktuelle Tages-/Nachtseite">Tag/Nacht</span>
</label>
<label class="layer-toggle">
<input type="checkbox" id="layer-labels" checked>
<input type="checkbox" id="layer-labels" title="Laendergrenzen, Staedte und Gewaessernamen (Esri World Boundaries)" checked>
<span class="layer-dot dot-labels"></span>
<span class="layer-name">Ortsnamen</span>
<span class="layer-name" title="Laendergrenzen, Hauptstaedte, Fluesse, Meere">Ortsnamen</span>
</label>
</div>
<div class="panel-divider"></div>
@@ -113,10 +113,10 @@
<div class="panel-section">
<div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;">ANSICHT</div>
<div style="display:flex;gap:4px;flex-wrap:wrap;">
<button class="vmode-btn active" data-mode="standard" onclick="VisualModes.set('standard')">STD</button>
<button class="vmode-btn" data-mode="nvg" onclick="VisualModes.set('nvg')">NVG</button>
<button class="vmode-btn" data-mode="flir" onclick="VisualModes.set('flir')">FLIR</button>
<button class="vmode-btn" data-mode="crt" onclick="VisualModes.set('crt')">CRT</button>
<button class="vmode-btn active" data-mode="standard" title="Standard: Photorealistische Darstellung" onclick="VisualModes.set('standard')">STD</button>
<button class="vmode-btn" data-mode="nvg" title="Night Vision: Gruener Monochrom-Filter (Nachtsichtgeraet)" onclick="VisualModes.set('nvg')">NVG</button>
<button class="vmode-btn" data-mode="flir" title="FLIR Thermal: Infrarot-Darstellung fuer Waermesignaturen" onclick="VisualModes.set('flir')">FLIR</button>
<button class="vmode-btn" data-mode="crt" title="CRT Monitor: Retro-Ueberwachungsbildschirm mit Scanlines" onclick="VisualModes.set('crt')">CRT</button>
</div>
</div>
<div class="panel-divider"></div>