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

Fix: Logo-Hintergrund, Scroll-Reveal-Bug, Timeline-Dropdown, UI-Cleanup

Quellcode durchsuchen 
- 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 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-03-07 14:35:50 +01:00
Ursprung 500f6129f1
Commit 23b6a7036d
3 geänderte Dateien mit 174 neuen und 104 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

11
lagebild/index.html
Datei anzeigen

@@ -63,15 +63,6 @@
<!-- Stat Cards -->
<div class="hero-stats" id="hero-stats"></div>
<!-- FC Quick Stats -->
<div class="hero-fc-stats" id="hero-fc-stats"></div>
<!-- Powered By -->
<div class="hero-powered-by">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
<span>Daten durch AegisSight Monitor — KI-gestützte OSINT-Analyse</span>
</div>
</div>
</section>
@@ -80,6 +71,7 @@
<div class="container">
<div class="timeline-wrapper">
<div class="timeline-strip" id="timeline-strip"></div>
<div class="timeline-dropdown" id="timeline-dropdown"></div>
</div>
<div class="tab-nav" id="tab-nav">
<button class="tab-btn active" data-tab="lagebild">Lagebild</button>
@@ -152,7 +144,6 @@
<!-- CTA -->
<section class="lagebild-cta">
<p class="cta-powered-text">Dieses Lagebild wird automatisch durch unseren KI-Monitor erstellt.</p>
<div class="cta-content">
<h3>Interesse an AegisSight Monitor?</h3>
<p>Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.</p>

137
lagebild/lagebild.css
Datei anzeigen

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

130
lagebild/lagebild.js
Datei anzeigen

@@ -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: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>',
globe: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 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-10 15.3 15.3 0 0 1 4-10z"/></svg>',
shieldCheck: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>',
checkCircle: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
helpCircle: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
xCircle: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
externalLink: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>'
},
@@ -70,23 +68,6 @@ var Lagebild = {
statsHtml += this.statCard(this.icons.shieldCheck, '<span class="count-up" data-target="' + d.incident.factcheck_count + '">0</span>', '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 += '<span class="fc-quick-badge success">' + this.icons.checkCircle + ' <span class="count-up" data-target="' + confirmed + '">0</span>&nbsp;Bestätigt</span>';
fcHtml += '<span class="fc-quick-badge warning">' + this.icons.helpCircle + ' <span class="count-up" data-target="' + open + '">0</span>&nbsp;Offen</span>';
fcHtml += '<span class="fc-quick-badge error">' + this.icons.xCircle + ' <span class="count-up" data-target="' + contradicted + '">0</span>&nbsp;Widerlegt</span>';
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 = '<div class="timeline-dropdown-header">' + dateLabel + ' &mdash; ' + snaps.length + ' Updates</div>';
h += '<div class="timeline-snap-list">';
for (var i = 0; i < snaps.length; i++) {
var snap = snaps[i];
var isActive = (String(snap.id) === String(activeSnapId));
h += '<button class="timeline-snap-item' + (isActive ? ' active' : '') + '"';
h += ' data-snapshot-id="' + snap.id + '">';
h += '<span class="timeline-snap-time">' + this.fmtTimeOnly(snap.created_at) + ' Uhr</span>';
h += '<span class="timeline-snap-meta">' + snap.article_count + ' Artikel, ' + snap.fact_check_count + ' FC</span>';
h += '</button>';
}
h += '</div>';
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 }); }