From 2be1f6a37db4023dbe688ffc1e349475d3cc6054 Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Tue, 24 Mar 2026 23:41:25 +0100 Subject: [PATCH] UI Overhaul: Groessere Elemente, bessere InfoBox-Platzierung PANEL (links): - 240px breit (war 200px) - Checkboxen 16x16px (war 12x12) - Dots 10px (war 8px) - Layer-Namen 13px (war 11px) - Counts 12px (war 10px) - Mehr Padding pro Toggle-Zeile INFOBOX (bei Klick): - Links neben dem Panel platziert (254px vom Rand) - 420px breit, max 60vh hoch, scrollbar - Kollidiert nicht mit Panel oder Sidebar - Groesserer Titel (14px), mehr Padding PUNKTE AUF DEM GLOBUS: - Flugzeuge: 3/4/5px (war 2/2.5/3) - Schiffe: 3/4/5px (war 2/2.5/3) - Militaer: 6px (war 4) - Katastrophen: 10px (war 8) - Erdbeben: 6-15px (war 4-10) - GDELT: 7px (war 5) - ISS: 14px (war 10) - Cluster: +30% groesser HEADER + FOOTER: - Header 48px (war 44px) - Footer 32px (war 28px) - Titel 15px, Stats 12px - Lage-Select + Suche groesser --- static/css/globe.css | 83 ++++++++++++++++++----------------- static/js/layers/disasters.js | 4 +- static/js/layers/flights.js | 4 +- static/js/layers/gdelt.js | 2 +- static/js/layers/infra.js | 4 +- static/js/layers/iss.js | 2 +- static/js/layers/military.js | 2 +- static/js/layers/monitor.js | 2 +- static/js/layers/ships.js | 2 +- 9 files changed, 54 insertions(+), 51 deletions(-) diff --git a/static/css/globe.css b/static/css/globe.css index f961e1d..27d44b7 100644 --- a/static/css/globe.css +++ b/static/css/globe.css @@ -26,13 +26,13 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo /* === Header === */ #header { - position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 100; + position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 100; display: flex; align-items: center; padding: 0 16px; gap: 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } .header-brand { display: flex; align-items: center; gap: 8px; } -.header-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); } +.header-title { font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); } .header-stats { text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; } .header-actions { display: flex; gap: 8px; } .header-btn { @@ -43,28 +43,28 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo /* === Layer Panel === */ .layer-panel { - position: fixed; top: 52px; left: 12px; z-index: 100; - width: 200px; background: var(--bg-panel); border: 1px solid var(--border); + position: fixed; top: 56px; left: 12px; z-index: 100; + width: 240px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .panel-title { - font-size: 9px; font-weight: 700; letter-spacing: 3px; color: var(--accent); + font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--accent); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .panel-section { display: flex; flex-direction: column; gap: 4px; } .panel-divider { height: 1px; background: var(--border); margin: 8px 0; } .layer-toggle { - display: flex; align-items: center; gap: 6px; padding: 4px 6px; + display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: background 0.15s; } .layer-toggle:hover { background: rgba(255,255,255,0.04); } .layer-toggle input[type="checkbox"] { - accent-color: var(--accent); width: 12px; height: 12px; cursor: pointer; flex-shrink: 0; + accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } .layer-dot { - width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; + width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dot-flights { background: var(--accent); } .dot-ships { background: #4499ff; } @@ -72,22 +72,22 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo .dot-gdelt { background: #ff8800; } .dot-daynight { background: #8866cc; } .dot-labels { background: #aaaaaa; } -.layer-name { font-size: 11px; color: var(--text); flex: 1; } -.layer-count { font-size: 10px; color: var(--text-dim); } +.layer-name { font-size: 13px; color: var(--text); flex: 1; } +.layer-count { font-size: 12px; color: var(--text-dim); } .panel-coords { - font-size: 10px; color: var(--accent); letter-spacing: 0.5px; - padding: 6px 0 0; text-align: center; + font-size: 12px; color: var(--accent); letter-spacing: 0.5px; + padding: 8px 0 0; text-align: center; } /* === Bottom Bar === */ #bottom-bar { - position: fixed; bottom: 0; left: 0; right: 0; height: 28px; z-index: 100; + position: fixed; bottom: 0; left: 0; right: 0; height: 32px; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border-top: 1px solid var(--border); backdrop-filter: blur(8px); } -.bottom-stats { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; } +.bottom-stats { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; } /* === Cesium InfoBox Override === */ .cesium-infoBox { background: var(--bg-panel) !important; border: 1px solid var(--border) !important; } @@ -103,7 +103,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo .cesium-infoBox-title { color: var(--accent) !important; font-family: var(--font-mono) !important; - font-size: 12px !important; + font-size: 14px !important; + padding: 8px 12px !important; background: rgba(0,255,136,0.08) !important; } .cesium-infoBox-iframe { @@ -158,9 +159,9 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo /* === Visual Mode Buttons === */ .vmode-btn { - padding: 4px 8px; + padding: 6px 10px; font-family: var(--font-mono); - font-size: 9px; + font-size: 11px; font-weight: 700; letter-spacing: 1px; background: rgba(255,255,255,0.05); @@ -261,9 +262,9 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo /* === Rechte Sidebar === */ .sidebar-right { position: fixed; - top: 44px; + top: 48px; right: 0; - bottom: 28px; + bottom: 32px; width: 280px; z-index: 100; display: flex; @@ -350,7 +351,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo text-align: center; } .sb-title { - font-size: 10px; + font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; @@ -358,7 +359,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo flex: 1; } .sb-badge { - font-size: 9px; + font-size: 11px; color: var(--accent); background: rgba(0,255,136,0.1); padding: 1px 6px; @@ -387,14 +388,14 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo } .sb-item-text { min-width: 0; flex: 1; } .sb-item-name { - font-size: 11px; + font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-item-sub { - font-size: 9px; + font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; @@ -422,8 +423,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo border-radius: 4px; color: var(--accent); font-family: var(--font-mono); - font-size: 11px; - padding: 4px 8px; + font-size: 13px; + padding: 6px 10px; cursor: pointer; max-width: 300px; outline: none; @@ -434,21 +435,23 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo color: var(--text); } -/* === InfoBox zentriert oben === */ +/* === InfoBox: Links neben dem Layer-Panel === */ .cesium-viewer-infoBoxContainer { position: absolute !important; - top: 44px !important; + top: 52px !important; + left: 254px !important; right: auto !important; - left: 50% !important; - transform: translateX(-50%) !important; - max-width: 500px !important; - width: 90% !important; - max-height: 50vh !important; + transform: none !important; + max-width: 420px !important; + width: 420px !important; + max-height: 60vh !important; z-index: 150 !important; } .cesium-infoBox { - max-height: 50vh !important; + max-height: 60vh !important; overflow-y: auto !important; + border-radius: 8px !important; + box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } @@ -459,8 +462,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo /* === Search Bar === */ .header-search { position: relative; } .globe-search { - width: 180px; - padding: 4px 10px; + width: 200px; + padding: 6px 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 4px; @@ -470,7 +473,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo outline: none; transition: width 0.3s, border-color 0.2s; } -.globe-search:focus { width: 260px; border-color: var(--accent); } +.globe-search:focus { width: 300px; border-color: var(--accent); } .globe-search::placeholder { color: var(--text-dim); } .search-results { position: absolute; @@ -497,8 +500,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo /* === City Quick-Links === */ .city-links { position: fixed; - top: 44px; - left: 220px; + top: 48px; + left: 254px; right: 290px; z-index: 90; display: flex; @@ -557,13 +560,13 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo /* === Imagery Selector === */ .imagery-select { width: 100%; - padding: 4px 6px; + padding: 6px 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; cursor: pointer; outline: none; } diff --git a/static/js/layers/disasters.js b/static/js/layers/disasters.js index 41853d8..dd6f48e 100644 --- a/static/js/layers/disasters.js +++ b/static/js/layers/disasters.js @@ -119,7 +119,7 @@ const DisastersLayer = { name: icon.label + ': ' + (evt.title || '?'), position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 0), point: { - pixelSize: 8, + pixelSize: 10, color: Cesium.Color.fromCssColorString(icon.color), outlineColor: Cesium.Color.fromCssColorString(icon.color).withAlpha(0.4), outlineWidth: 3, @@ -160,7 +160,7 @@ const DisastersLayer = { name: 'Erdbeben M' + mag.toFixed(1) + ' ' + (p.place || ''), position: Cesium.Cartesian3.fromDegrees(c[0], c[1], 0), point: { - pixelSize: Math.max(mag * 2.5, 4), + pixelSize: Math.max(mag * 3, 6), color: Cesium.Color.fromCssColorString(color), outlineColor: Cesium.Color.fromCssColorString(color).withAlpha(0.4), outlineWidth: 2, diff --git a/static/js/layers/flights.js b/static/js/layers/flights.js index 641a704..11d0441 100644 --- a/static/js/layers/flights.js +++ b/static/js/layers/flights.js @@ -100,7 +100,7 @@ const FlightsLayer = { var c = clusters[keys[j]]; var avgLat = c.sumLat / c.count; var avgLon = c.sumLon / c.count; - var size = Math.min(Math.max(Math.sqrt(c.count) * 1.5, 4), 20); + var size = Math.min(Math.max(Math.sqrt(c.count) * 2, 6), 24); this._points.add({ position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000), @@ -114,7 +114,7 @@ const FlightsLayer = { this._labels.add({ position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000), text: c.count.toString(), - font: '11px sans-serif', + font: '13px sans-serif bold', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, diff --git a/static/js/layers/gdelt.js b/static/js/layers/gdelt.js index 0966625..8acaaff 100644 --- a/static/js/layers/gdelt.js +++ b/static/js/layers/gdelt.js @@ -47,7 +47,7 @@ const GdeltLayer = { self._dataSource.entities.add({ position: Cesium.Cartesian3.fromDegrees(c[0], c[1]), point: { - pixelSize: 5, + pixelSize: 7, color: Cesium.Color.fromCssColorString('#ff8800'), outlineColor: Cesium.Color.fromCssColorString('#663300'), outlineWidth: 1, diff --git a/static/js/layers/infra.js b/static/js/layers/infra.js index a835005..f0e9f9d 100644 --- a/static/js/layers/infra.js +++ b/static/js/layers/infra.js @@ -23,7 +23,7 @@ const InfraLayer = { .then(function(data) { var yellow = Cesium.Color.fromCssColorString('#ffdd00'); (data.plants || []).forEach(function(p) { - self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 5, color: yellow, + self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 7, color: yellow, outlineColor: Cesium.Color.fromCssColorString('#ff8800'), outlineWidth: 2 }); self._labels.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), text: p.name, @@ -47,7 +47,7 @@ const InfraLayer = { .then(function(data) { var red = Cesium.Color.fromCssColorString('#ff4444'); (data.bases || []).forEach(function(b) { - self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 4, color: red, + self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 6, color: red, outlineColor: Cesium.Color.fromCssColorString('#aa0000'), outlineWidth: 1 }); self._labels.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), text: b.name, diff --git a/static/js/layers/iss.js b/static/js/layers/iss.js index 10603e8..b042d2a 100644 --- a/static/js/layers/iss.js +++ b/static/js/layers/iss.js @@ -7,7 +7,7 @@ const ISSLayer = { this._entity = viewer.entities.add({ name: 'ISS - International Space Station', position: Cesium.Cartesian3.fromDegrees(0, 0, 420000), - point: { pixelSize: 10, color: Cesium.Color.fromCssColorString('#ff4444'), + point: { pixelSize: 14, color: Cesium.Color.fromCssColorString('#ff4444'), outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: 'ISS', font: '12px monospace bold', fillColor: Cesium.Color.fromCssColorString('#ff4444'), diff --git a/static/js/layers/military.js b/static/js/layers/military.js index 02192f5..cf00b31 100644 --- a/static/js/layers/military.js +++ b/static/js/layers/military.js @@ -71,7 +71,7 @@ const MilitaryLayer = { for (var i = 0; i < this._data.length; i++) { var a = this._data[i]; var altM = (a.alt_baro || 10000) * 0.3048; - this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 4, color: red }); + this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 6, color: red }); var cs = a.flight || a.reg || ''; if (cs) { this._labels.add({ diff --git a/static/js/layers/monitor.js b/static/js/layers/monitor.js index de43317..f326ad6 100644 --- a/static/js/layers/monitor.js +++ b/static/js/layers/monitor.js @@ -126,7 +126,7 @@ const MonitorLayer = { var p = f.properties; var color = colors[p.category] || colors.mentioned; var count = p.article_count || 1; - var size = Math.min(Math.max(Math.sqrt(count) * 2.5, 4), 14); + var size = Math.min(Math.max(Math.sqrt(count) * 3, 6), 18); this._points.add({ position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000), pixelSize: size, color: color, diff --git a/static/js/layers/ships.js b/static/js/layers/ships.js index c99683b..5fba9d7 100644 --- a/static/js/layers/ships.js +++ b/static/js/layers/ships.js @@ -120,7 +120,7 @@ const ShipsLayer = { count++; var colorStr = this._getColor(cat); var color = Cesium.Color.fromCssColorString(colorStr); - var r = level === 'close' ? 3 : level === 'medium' ? 2.5 : 2; + var r = level === 'close' ? 5 : level === 'medium' ? 4 : 3; this._points.add({ position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),