From bd2c274dd21043f6df220508dea0f090e4a185b4 Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Tue, 24 Mar 2026 23:49:17 +0100 Subject: [PATCH] UI: Submenu eingerueckt + Punkte deutlich groesser SUBMENU (Schiffstypen etc.): - Links eingerueckt (28px padding-left + 12px margin) - Gruene Linie am linken Rand zur Abgrenzung - Leicht dunklerer Hintergrund - Klar als Untermenue erkennbar PUNKTGROESSEN (alle Layer nochmals ~60% groesser): - Flugzeuge: 5/6/8px (war 3/4/5) - Schiffe: 4/5/7px (war 3/4/5) - Militaer: 8px (war 6) - Katastrophen: 14px (war 10) - Erdbeben: 8-20px (war 6-15) - GDELT: 10px (war 7) - ISS: 18px (war 14) - AKWs: 10px (war 7) - Satelliten: 3/5px (war 1.5/3) - Cluster: +40% groesser --- static/css/globe.css | 9 ++++++--- static/js/layers/disasters.js | 4 ++-- static/js/layers/flights.js | 2 +- 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/satellites.js | 2 +- static/js/layers/ships.js | 2 +- 10 files changed, 17 insertions(+), 14 deletions(-) diff --git a/static/css/globe.css b/static/css/globe.css index 27d44b7..fdba375 100644 --- a/static/css/globe.css +++ b/static/css/globe.css @@ -581,8 +581,11 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo .dot-terminator { background: #ff8800; } .dot-timezones { background: #8888ff; } -/* === Ship Filters === */ +/* === Ship Filters (Submenu) === */ .ship-filters { - padding: 4px 12px 6px; - border-top: 1px solid rgba(255,255,255,0.04); + padding: 6px 8px 8px 28px; + margin-left: 12px; + border-left: 2px solid rgba(0, 255, 136, 0.2); + background: rgba(255,255,255,0.02); + border-radius: 0 4px 4px 0; } diff --git a/static/js/layers/disasters.js b/static/js/layers/disasters.js index dd6f48e..9e06800 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: 10, + pixelSize: 14, 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 * 3, 6), + pixelSize: Math.max(mag * 4, 8), 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 11d0441..ac4e958 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) * 2, 6), 24); + var size = Math.min(Math.max(Math.sqrt(c.count) * 3, 8), 30); this._points.add({ position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000), diff --git a/static/js/layers/gdelt.js b/static/js/layers/gdelt.js index 8acaaff..5ad9dc4 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: 7, + pixelSize: 10, 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 f0e9f9d..60aa277 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: 7, color: yellow, + self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 10, 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: 6, color: red, + self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 8, 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 b042d2a..a57a9b7 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: 14, color: Cesium.Color.fromCssColorString('#ff4444'), + point: { pixelSize: 18, 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 cf00b31..6e10cb3 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: 6, color: red }); + this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 8, 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 f326ad6..50c0f6f 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) * 3, 6), 18); + var size = Math.min(Math.max(Math.sqrt(count) * 4, 8), 22); this._points.add({ position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000), pixelSize: size, color: color, diff --git a/static/js/layers/satellites.js b/static/js/layers/satellites.js index 44723be..f84a24a 100644 --- a/static/js/layers/satellites.js +++ b/static/js/layers/satellites.js @@ -105,7 +105,7 @@ const SatellitesLayer = { var color = colors[this._data[i].group] || Cesium.Color.WHITE; this._points.add({ position: Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt), - pixelSize: this._data[i].group === 'starlink' ? 1.5 : 3, + pixelSize: this._data[i].group === 'starlink' ? 3 : 5, color: color, }); } diff --git a/static/js/layers/ships.js b/static/js/layers/ships.js index d21ea6c..6ca35a2 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' ? 5 : level === 'medium' ? 4 : 3; + var r = level === 'close' ? 7 : level === 'medium' ? 5 : 4; this._points.add({ position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),