From 23b6a7036da4f4c5c97a06ba5c1495899fe2f3f5 Mon Sep 17 00:00:00 2001 From: Claude Code Date: Sat, 7 Mar 2026 14:35:50 +0100 Subject: [PATCH] Fix: Logo-Hintergrund, Scroll-Reveal-Bug, Timeline-Dropdown, UI-Cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Logo: Blau-grauer Hintergrund für Lesbarkeit auf dunkler Navbar - Scroll-Reveal Fix: Cards in hidden tabs sofort revealed, nur sichtbare via Observer - Tab-Wechsel: Reveal-Trigger für Cards im neu aktiven Panel - Timeline-Dropdown: Aufklappbare Uhrzeiten pro Tag, neuester Tag standardmäßig offen - Entfernt: FC-Quick-Stats im Hero, Powered-by Badge, CTA-Powered-Text - CSS: Timeline-Dropdown Styles, unused hero-fc/powered-by Styles entfernt Co-Authored-By: Claude Opus 4.6 --- lagebild/index.html | 11 +--- lagebild/lagebild.css | 137 ++++++++++++++++++++++-------------------- lagebild/lagebild.js | 130 ++++++++++++++++++++++++++++++--------- 3 files changed, 174 insertions(+), 104 deletions(-) diff --git a/lagebild/index.html b/lagebild/index.html index 0575477..1857d04 100644 --- a/lagebild/index.html +++ b/lagebild/index.html @@ -63,15 +63,6 @@
- - -
- - -
- - Daten durch AegisSight Monitor — KI-gestützte OSINT-Analyse -
@@ -80,6 +71,7 @@
+
@@ -152,7 +144,6 @@
-

Dieses Lagebild wird automatisch durch unseren KI-Monitor erstellt.

Interesse an AegisSight Monitor?

Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.

diff --git a/lagebild/lagebild.css b/lagebild/lagebild.css index 4198a24..c288617 100644 --- a/lagebild/lagebild.css +++ b/lagebild/lagebild.css @@ -32,6 +32,11 @@ border-bottom: 1px solid var(--lb-border) !important; box-shadow: none !important; } +.lagebild-page .logo-img { + background: rgba(160, 175, 200, 0.85); + padding: 4px 10px; + border-radius: 6px; +} .lagebild-page .nav-menu a { color: var(--lb-text) !important; } @@ -201,57 +206,6 @@ margin-top: 2px; } -/* Hero FC Quick Stats */ -.hero-fc-stats { - display: flex; - justify-content: center; - gap: 10px; - margin-top: 1.5rem; - flex-wrap: wrap; -} -.fc-quick-badge { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 5px 14px; - border-radius: 20px; - font-size: 0.82rem; - font-weight: 600; -} -.fc-quick-badge svg { - flex-shrink: 0; -} -.fc-quick-badge.success { - background: rgba(16, 185, 129, 0.12); - border: 1px solid rgba(16, 185, 129, 0.25); - color: #34d399; -} -.fc-quick-badge.warning { - background: rgba(245, 158, 11, 0.12); - border: 1px solid rgba(245, 158, 11, 0.25); - color: #fbbf24; -} -.fc-quick-badge.error { - background: rgba(239, 68, 68, 0.12); - border: 1px solid rgba(239, 68, 68, 0.25); - color: #f87171; -} - -/* Powered By */ -.hero-powered-by { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - margin-top: 1.5rem; - font-size: 0.8rem; - color: var(--lb-text-sec); -} -.hero-powered-by svg { - color: var(--lb-accent); - flex-shrink: 0; -} - /* ---------- Control Bar ---------- */ .control-bar { background: var(--lb-bg-card); @@ -364,6 +318,62 @@ margin-top: 2px; } +/* Timeline Dropdown */ +.timeline-dropdown { + display: none; + background: var(--lb-bg-secondary); + border: 1px solid var(--lb-border); + border-top: none; + border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px); + padding: 10px 14px; + margin-top: 4px; +} +.timeline-dropdown.open { + display: block; +} +.timeline-dropdown-header { + font-size: 0.78rem; + color: var(--lb-text-sec); + margin-bottom: 8px; + font-weight: 500; +} +.timeline-snap-list { + display: flex; + gap: 6px; + flex-wrap: wrap; +} +.timeline-snap-item { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + border-radius: var(--radius-sm, 4px); + border: 1px solid var(--lb-border); + background: transparent; + color: var(--lb-text-sec); + font-size: 0.78rem; + cursor: pointer; + font-family: inherit; + transition: all 0.2s; +} +.timeline-snap-item:hover { + background: var(--lb-bg-card); + border-color: rgba(200, 168, 81, 0.4); + color: var(--lb-text); +} +.timeline-snap-item.active { + background: rgba(200, 168, 81, 0.1); + border-color: var(--lb-accent); + color: var(--lb-accent); +} +.timeline-snap-time { + font-weight: 600; +} +.timeline-snap-meta { + font-size: 0.7rem; + opacity: 0.7; +} + /* Tab Navigation */ .tab-nav { display: flex; @@ -911,11 +921,6 @@ margin-top: 2rem; text-align: center; } -.cta-powered-text { - font-size: 0.85rem; - color: var(--lb-text-sec); - margin-bottom: 1rem; -} .cta-content { background: linear-gradient(135deg, #111B30 0%, #1a2744 50%, #0f1a2e 100%); border: 1px solid var(--lb-border); @@ -1033,16 +1038,6 @@ .stat-card-label { font-size: 0.65rem; } - .hero-fc-stats { - gap: 6px; - } - .fc-quick-badge { - font-size: 0.75rem; - padding: 4px 10px; - } - .hero-powered-by { - font-size: 0.72rem; - } .control-bar .container { flex-direction: column; @@ -1058,6 +1053,16 @@ .timeline-day-num { font-size: 0.95rem; } + .timeline-dropdown { + padding: 8px 10px; + } + .timeline-snap-list { + gap: 4px; + } + .timeline-snap-item { + padding: 5px 10px; + font-size: 0.72rem; + } .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; diff --git a/lagebild/lagebild.js b/lagebild/lagebild.js index 1bf3548..6866863 100644 --- a/lagebild/lagebild.js +++ b/lagebild/lagebild.js @@ -1,6 +1,6 @@ /** * AegisSight Lagebild Page - Dark Theme Design Refresh - * Count-Up, Timeline, Scroll-Reveal, Smooth-Scroll, Favicons + * Count-Up, Timeline mit Dropdown, Scroll-Reveal, Smooth-Scroll, Favicons */ /** Feste Zeitzone fuer alle Anzeigen — NIEMALS aendern. */ @@ -11,6 +11,7 @@ var Lagebild = { allSnapshots: {}, currentView: null, map: null, + timelineGroups: null, /* ===== Inline SVG Icons ===== */ icons: { @@ -18,9 +19,6 @@ var Lagebild = { fileText: '', globe: '', shieldCheck: '', - checkCircle: '', - helpCircle: '', - xCircle: '', externalLink: '' }, @@ -70,23 +68,6 @@ var Lagebild = { statsHtml += this.statCard(this.icons.shieldCheck, '0', 'Faktenchecks'); document.getElementById('hero-stats').innerHTML = statsHtml; - // FC Quick Stats - var checks = d.fact_checks || []; - var stats = { confirmed: 0, unconfirmed: 0, contradicted: 0, developing: 0, established: 0, disputed: 0 }; - for (var k = 0; k < checks.length; k++) { - var st = checks[k].status || 'developing'; - if (stats[st] !== undefined) stats[st]++; - } - var confirmed = stats.confirmed + stats.established; - var open = stats.unconfirmed + stats.developing; - var contradicted = stats.contradicted + stats.disputed; - - var fcHtml = ''; - fcHtml += '' + this.icons.checkCircle + ' 0 Bestätigt'; - fcHtml += '' + this.icons.helpCircle + ' 0 Offen'; - fcHtml += '' + this.icons.xCircle + ' 0 Widerlegt'; - document.getElementById('hero-fc-stats').innerHTML = fcHtml; - // Start count-up animations var self = this; requestAnimationFrame(function() { @@ -149,6 +130,7 @@ var Lagebild = { }); } + this.timelineGroups = groups; var dates = Object.keys(groups).sort(); var strip = document.getElementById('timeline-strip'); var h = ''; @@ -190,7 +172,7 @@ var Lagebild = { }, 150); } - // Click handler + // Click handler for day buttons var self = this; strip.addEventListener('click', function(e) { var btn = e.target.closest('.timeline-day'); @@ -200,7 +182,13 @@ var Lagebild = { for (var k = 0; k < allDays.length; k++) allDays[k].classList.remove('active'); btn.classList.add('active'); + var dateKey = btn.getAttribute('data-date'); var snapId = btn.getAttribute('data-snapshot-id'); + + // Show dropdown for this day + self.showTimelineDropdown(dateKey, snapId); + + // Load latest snapshot if (snapId === 'current') { self.currentView = { summary: self.data.current_lagebild.summary_markdown, @@ -214,6 +202,67 @@ var Lagebild = { self.loadSnapshot(parseInt(snapId)); } }); + + // Click handler for dropdown snapshot items (delegated, set up once) + var dropdown = document.getElementById('timeline-dropdown'); + dropdown.addEventListener('click', function(e) { + var item = e.target.closest('.timeline-snap-item'); + if (!item) return; + + var items = dropdown.querySelectorAll('.timeline-snap-item'); + for (var k = 0; k < items.length; k++) items[k].classList.remove('active'); + item.classList.add('active'); + + var snapId = item.getAttribute('data-snapshot-id'); + if (snapId === 'current') { + self.currentView = { + summary: self.data.current_lagebild.summary_markdown, + sources_json: self.data.current_lagebild.sources_json, + updated_at: self.data.current_lagebild.updated_at || self.data.generated_at, + articles: self.data.articles, + fact_checks: self.data.fact_checks + }; + self.renderCurrentView(); + } else { + self.loadSnapshot(parseInt(snapId)); + } + }); + + // Show dropdown for newest day by default + var newestDate = dates[dates.length - 1]; + if (newestDate && groups[newestDate].length > 1) { + this.showTimelineDropdown(newestDate, groups[newestDate][0].id); + } + }, + + showTimelineDropdown: function(dateKey, activeSnapId) { + var dropdown = document.getElementById('timeline-dropdown'); + var snaps = this.timelineGroups[dateKey]; + + if (!snaps || snaps.length <= 1) { + dropdown.classList.remove('open'); + dropdown.innerHTML = ''; + return; + } + + var d = new Date(dateKey + 'T12:00:00Z'); + var dateLabel = d.toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' }); + + var h = '
' + dateLabel + ' — ' + snaps.length + ' Updates
'; + h += '
'; + for (var i = 0; i < snaps.length; i++) { + var snap = snaps[i]; + var isActive = (String(snap.id) === String(activeSnapId)); + h += ''; + } + h += '
'; + + dropdown.innerHTML = h; + dropdown.classList.add('open'); }, toDateKey: function(iso) { @@ -410,9 +459,12 @@ var Lagebild = { legend.addTo(this.map); // Dark popup styling - var style = document.createElement('style'); - style.textContent = '.lagebild-page .leaflet-popup-content-wrapper{background:#151D2E;color:#E8ECF4;border:1px solid #1E2D45;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,0.4);}.lagebild-page .leaflet-popup-tip{background:#151D2E;}'; - document.head.appendChild(style); + if (!document.getElementById('leaflet-dark-style')) { + var style = document.createElement('style'); + style.id = 'leaflet-dark-style'; + style.textContent = '.lagebild-page .leaflet-popup-content-wrapper{background:#151D2E;color:#E8ECF4;border:1px solid #1E2D45;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,0.4);}.lagebild-page .leaflet-popup-tip{background:#151D2E;}'; + document.head.appendChild(style); + } setTimeout(function() { if (Lagebild.map) Lagebild.map.invalidateSize(); }, 300); }, @@ -493,7 +545,15 @@ var Lagebild = { this.classList.add('active'); var panels = document.querySelectorAll('.tab-panel'); for (var j = 0; j < panels.length; j++) panels[j].classList.remove('active'); - document.getElementById('panel-' + tab).classList.add('active'); + var activePanel = document.getElementById('panel-' + tab); + activePanel.classList.add('active'); + + // Trigger reveal for cards in newly active panel + var revealCards = activePanel.querySelectorAll('.reveal:not(.revealed)'); + for (var k = 0; k < revealCards.length; k++) { + revealCards[k].classList.add('revealed'); + } + if (tab === 'karte') self.renderMap(); }); } @@ -535,7 +595,6 @@ var Lagebild = { initScrollReveal: function() { var cards = document.querySelectorAll('.content-card, .lagebild-cta'); if (!('IntersectionObserver' in window)) { - // Fallback: show all immediately for (var i = 0; i < cards.length; i++) cards[i].classList.add('revealed'); return; } @@ -550,7 +609,13 @@ var Lagebild = { for (var i = 0; i < cards.length; i++) { cards[i].classList.add('reveal'); - observer.observe(cards[i]); + // Immediately reveal cards in the active (visible) tab panel + var panel = cards[i].closest('.tab-panel'); + if (!panel || panel.classList.contains('active')) { + cards[i].classList.add('revealed'); + } else { + observer.observe(cards[i]); + } } }, @@ -634,6 +699,15 @@ var Lagebild = { } catch(e) { return iso; } }, + fmtTimeOnly: function(iso) { + if (!iso) return ''; + try { + var d = new Date(this.toUTC(iso)); + if (isNaN(d.getTime())) return iso; + return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE }); + } catch(e) { return iso; } + }, + fmtShort: function(iso) { if (!iso) return ''; try { return new Date(this.toUTC(iso)).toLocaleDateString('de-DE', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE }); }