30410f95dc
Eigenstaendige GEOINT-Anwendung mit CesiumJS 3D-Globus. Echtzeit-Datenlayer: Flugverkehr (airplanes.live, 64 Stuetzpunkte), Schiffsverkehr (AISStream.io WebSocket), Erdbeben (USGS), Nachrichten (GDELT GEO). FastAPI Backend, taktisches Dark-UI.
94 Zeilen
4.0 KiB
HTML
94 Zeilen
4.0 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>
|
|
<!-- 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-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" checked>
|
|
<span class="layer-dot dot-flights"></span>
|
|
<span class="layer-name">Flugverkehr</span>
|
|
<span class="layer-count" id="count-flights">-</span>
|
|
</label>
|
|
<label class="layer-toggle">
|
|
<input type="checkbox" id="layer-ships" checked>
|
|
<span class="layer-dot dot-ships"></span>
|
|
<span class="layer-name">Schiffsverkehr</span>
|
|
<span class="layer-count" id="count-ships">-</span>
|
|
</label>
|
|
<label class="layer-toggle">
|
|
<input type="checkbox" id="layer-quakes">
|
|
<span class="layer-dot dot-quakes"></span>
|
|
<span class="layer-name">Erdbeben</span>
|
|
<span class="layer-count" id="count-quakes">-</span>
|
|
</label>
|
|
<label class="layer-toggle">
|
|
<input type="checkbox" id="layer-gdelt">
|
|
<span class="layer-dot dot-gdelt"></span>
|
|
<span class="layer-name">Nachrichten</span>
|
|
<span class="layer-count" id="count-gdelt">-</span>
|
|
</label>
|
|
</div>
|
|
<div class="panel-divider"></div>
|
|
<div class="panel-section">
|
|
<label class="layer-toggle">
|
|
<input type="checkbox" id="layer-daynight" checked>
|
|
<span class="layer-dot dot-daynight"></span>
|
|
<span class="layer-name">Tag/Nacht</span>
|
|
</label>
|
|
<label class="layer-toggle">
|
|
<input type="checkbox" id="layer-labels">
|
|
<span class="layer-dot dot-labels"></span>
|
|
<span class="layer-name">Ortsnamen</span>
|
|
</label>
|
|
</div>
|
|
<div class="panel-divider"></div>
|
|
<div class="panel-coords" id="coords-display">
|
|
LAT: -- LON: --
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- CesiumJS Container -->
|
|
<div id="cesiumContainer"></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>
|
|
</body>
|
|
</html>
|