e8a9e49dba
REGENRADAR (RainViewer): - Weltweit Niederschlagsradar als Overlay, kostenlos, kein API-Key - 5min Refresh, 60% Transparenz ORTSSUCHE (Nominatim/OpenStreetMap): - Suchfeld im Header, Ergebnisse als Dropdown - Klick fliegt zur Position - Deutsche Ergebnisse CITY QUICK-LINKS: - 12 strategische Staedte als Schnellnavigation unter dem Header - Berlin, Washington, Moskau, Peking, Tokio, London, Paris, Teheran, Kiew, Jerusalem, Taipei, Hormuz FADENKREUZ + RANGE RINGS: - Zuschaltbar im Panel - Horizontale/vertikale Linie + 3 konzentrische Ringe - Gruener taktischer Stil
190 Zeilen
10 KiB
HTML
190 Zeilen
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AegisSight Globe</title>
|
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Cesium.js"></script>
|
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/css/globe.css">
|
|
</head>
|
|
<body>
|
|
<script>
|
|
// Auth-Check: Ohne Token zum Login
|
|
if (!localStorage.getItem('globe_token')) { window.location.href = '/login'; }
|
|
// Auth-Header fuer alle Fetch-Calls
|
|
var _origFetch = window.fetch;
|
|
window.fetch = function(url, opts) {
|
|
opts = opts || {};
|
|
if (typeof url === 'string' && url.startsWith('/api/') && !url.includes('/auth/')) {
|
|
opts.headers = opts.headers || {};
|
|
opts.headers['Authorization'] = 'Bearer ' + localStorage.getItem('globe_token');
|
|
}
|
|
return _origFetch(url, opts).then(function(r) {
|
|
if (r.status === 401) { localStorage.removeItem('globe_token'); window.location.href = '/login'; }
|
|
return r;
|
|
});
|
|
};
|
|
</script>
|
|
<!-- Header -->
|
|
<header id="header">
|
|
<div class="header-brand">
|
|
<svg class="header-logo" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#00ff88" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z"/>
|
|
</svg>
|
|
<span class="header-title">AegisSight Globe</span>
|
|
</div>
|
|
<div class="header-lage"><select id="lage-select" class="lage-select" onchange="Globe._onLageChange(this.value)"><option value="">-- Lage waehlen --</option></select></div><div class="header-search">
|
|
<input type="text" id="globe-search" class="globe-search" placeholder="Ort suchen..." autocomplete="off">
|
|
<div id="search-results" class="search-results" style="display:none"></div>
|
|
</div>
|
|
<div class="header-stats" id="header-stats"></div>
|
|
<div class="header-actions">
|
|
<button class="header-btn" id="btn-fullscreen" title="Vollbild">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Layer Panel -->
|
|
<aside id="layer-panel" class="layer-panel">
|
|
<h3 class="panel-title">LAYER</h3>
|
|
<div class="panel-section">
|
|
|
|
<label class="layer-toggle">
|
|
<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" 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" title="Echtzeit-Schiffsverkehr weltweit (AISStream AIS-Daten, kontinuierlich)">
|
|
<span class="layer-dot dot-ships"></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-gdelt" title="Geokodierte Nachrichten der letzten 24h (GDELT Global Event Database)">
|
|
<span class="layer-dot dot-gdelt"></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" title="Satelliten-Orbits in Echtzeit (CelesTrak TLE: ISS, GPS, Galileo, Starlink)">
|
|
<span class="layer-dot dot-satellites"></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" title="Naturkatastrophen + Erdbeben (NASA EONET + USGS: Waldbraende, Vulkane, Stuerme, Erdbeben M2.5+)">
|
|
<span class="layer-dot dot-disasters"></span>
|
|
<span class="layer-name" title="Waldbraende, Vulkane, Stuerme, Erdbeben, Fluten, Erdrutsche">Katastrophen</span>
|
|
<span class="layer-count" id="count-disasters">-</span>
|
|
</label>
|
|
<div class="layer-loading" id="loading-disasters"></div>
|
|
<div class="layer-status" id="status-disasters"></div>
|
|
<label class="layer-toggle">
|
|
<input type="checkbox" id="layer-weather" title="Regenradar weltweit (RainViewer, 5min Refresh)">
|
|
<span class="layer-dot dot-weather"></span>
|
|
<span class="layer-name" title="Niederschlagsradar als Overlay auf dem Globus">Regenradar</span>
|
|
</label>
|
|
<div class="layer-status" id="status-weather"></div>
|
|
</div>
|
|
<div class="panel-divider"></div>
|
|
<div class="panel-section">
|
|
<label class="layer-toggle">
|
|
<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" title="Sonnenlicht-Simulation zeigt aktuelle Tages-/Nachtseite">Tag/Nacht</span>
|
|
</label>
|
|
<label class="layer-toggle">
|
|
<input type="checkbox" id="layer-crosshairs" title="Fadenkreuz und Entfernungsringe">
|
|
<span class="layer-dot dot-crosshairs"></span>
|
|
<span class="layer-name">Fadenkreuz</span>
|
|
</label>
|
|
<label class="layer-toggle">
|
|
<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" title="Laendergrenzen, Hauptstaedte, Fluesse, Meere">Ortsnamen</span>
|
|
</label>
|
|
</div>
|
|
<div class="panel-divider"></div>
|
|
<div class="panel-divider"></div>
|
|
<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" 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>
|
|
<div class="panel-coords" id="coords-display">
|
|
LAT: -- LON: --
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
<!-- City Quick-Links -->
|
|
<div id="city-links" class="city-links"></div>
|
|
|
|
<!-- Rechte Sidebar: Datenpunkt-Uebersicht -->
|
|
<aside id="sidebar-right" class="sidebar-right">
|
|
<button id="sidebar-toggle" class="sidebar-toggle" title="Seitenleiste ein-/ausblenden">
|
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</button>
|
|
<div class="sidebar-inner">
|
|
<div class="sidebar-search-wrap">
|
|
<input type="text" id="sidebar-search" class="sidebar-search" placeholder="Suchen...">
|
|
</div>
|
|
<div id="sidebar-content" class="sidebar-content">
|
|
<div class="sb-empty">Keine Layer aktiv</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- CesiumJS Container -->
|
|
<div id="cesiumContainer"></div>
|
|
<div id="crosshairs-overlay" class="crosshairs-overlay" style="display:none">
|
|
<div class="ch-h"></div><div class="ch-v"></div>
|
|
<div class="ch-ring ch-ring-1"></div>
|
|
<div class="ch-ring ch-ring-2"></div>
|
|
<div class="ch-ring ch-ring-3"></div>
|
|
<div class="ch-center"></div>
|
|
</div>
|
|
<div id="visual-overlay" class="visual-overlay" style="display:none"></div>
|
|
|
|
<!-- Bottom Bar -->
|
|
<footer id="bottom-bar">
|
|
<div class="bottom-stats" id="bottom-stats">
|
|
Initialisiere...
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/static/js/app.js"></script>
|
|
<script src="/static/js/layers/flights.js"></script>
|
|
<script src="/static/js/layers/ships.js"></script>
|
|
<script src="/static/js/layers/quakes.js"></script>
|
|
<script src="/static/js/layers/gdelt.js"></script>
|
|
<script src="/static/js/layers/satellites.js"></script>
|
|
<script src="/static/js/layers/disasters.js"></script>
|
|
<script src="/static/js/ui/sidebar.js"></script>
|
|
<script src="/static/js/layers/monitor.js"></script>
|
|
<script src="/static/js/layers/weather.js"></script>
|
|
<script src="/static/js/ui/search.js"></script>
|
|
<script src="/static/js/ui/crosshairs.js"></script>
|
|
<script src="/static/js/layers/visualmodes.js"></script>
|
|
</body>
|
|
</html>
|