6f4c5ab3a6
- Animierter Ladebalken unter jedem Layer-Toggle bei Datenabruf - Status-Text (Lade Daten.../Fehler beim Laden) - Fetch-Wrapper: nur 401 redirected zum Login, nicht 403 - Ortsnamen: minimumLevel, tileWidth/Height, LINEAR Texture-Filter fuer konsistente Schriftgroessen beim Laden
119 Zeilen
5.3 KiB
HTML
119 Zeilen
5.3 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-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>
|
|
<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" checked>
|
|
<span class="layer-dot dot-ships"></span>
|
|
<span class="layer-name">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">
|
|
<span class="layer-dot dot-quakes"></span>
|
|
<span class="layer-name">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">
|
|
<span class="layer-dot dot-gdelt"></span>
|
|
<span class="layer-name">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>
|
|
</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" checked>
|
|
<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>
|