AegisSight/AegisSight-Globe
2
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

UI Overhaul: Groessere Elemente, bessere InfoBox-Platzierung

Quellcode durchsuchen 
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
Dieser Commit ist enthalten in:
Claude Dev
2026-03-24 23:41:25 +01:00
Ursprung 5658754629
Commit 2be1f6a37d
9 geänderte Dateien mit 54 neuen und 51 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

83
static/css/globe.css
Datei anzeigen

@@ -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;
}

4
static/js/layers/disasters.js
Datei anzeigen

@@ -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,

4
static/js/layers/flights.js
Datei anzeigen

@@ -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,

2
static/js/layers/gdelt.js
Datei anzeigen

@@ -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,

4
static/js/layers/infra.js
Datei anzeigen

@@ -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,

2
static/js/layers/iss.js
Datei anzeigen

@@ -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'),

2
static/js/layers/military.js
Datei anzeigen

@@ -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({

2
static/js/layers/monitor.js
Datei anzeigen

@@ -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,

2
static/js/layers/ships.js
Datei anzeigen

@@ -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),