diff --git a/lagebild/index.html b/lagebild/index.html index 267b3c1..0575477 100644 --- a/lagebild/index.html +++ b/lagebild/index.html @@ -1,194 +1,205 @@ - - - - - - Lagebild Irankonflikt - AegisSight - - - - - - - - - - - - - - -
- - -
-
-
-
- - LIVE-LAGEBILD -
-

LAGEBILD

-

-
-
-
- - -
-
-
- - -
-
- - - - -
-
-
- - -
-
- -
-
-
-

Lagebild

- -
-
-
-
-
-
-
-
- -
-
- - -
-
-
-

Quellen & Quellenberichte

-

Alle vom AegisSight Monitor aggregierten Quellen und Artikel

-
-
-
-

Alle Artikel

-
-
-
-
- - -
-
-
-

Karte

-

Geografische Einordnung der Meldungen

-
-
-
-
-
-
- - -
-
-
-

Faktenchecks

-

KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen

-
-
-
-
- - -
-
-

Interesse an AegisSight Monitor?

-

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

- Kontakt aufnehmen -
-
-
-
- - - - - - - - - - - - + + + + + + Lagebild Irankonflikt - AegisSight + + + + + + + + + + + + + + +
+ + +
+
+
+
+ + LIVE-LAGEBILD +
+

LAGEBILD

+

+ + +
+ + +
+ + +
+ + Daten durch AegisSight Monitor — KI-gestützte OSINT-Analyse +
+
+
+ + +
+
+
+
+
+
+ + + + +
+
+
+ + +
+
+ +
+
+
+

Lagebild

+ +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+

Quellen & Quellenberichte

+

Alle vom AegisSight Monitor aggregierten Quellen und Artikel

+
+
+
+

Alle Artikel

+
+
+
+
+ + +
+
+
+

Karte

+

Geografische Einordnung der Meldungen

+
+
+
+
+
+
+ + +
+
+
+

Faktenchecks

+

KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen

+
+
+
+
+ + +
+

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.

+ Kontakt aufnehmen +
+
+
+
+ + + + + + + + + + + + diff --git a/lagebild/lagebild.css b/lagebild/lagebild.css index bf2801c..4198a24 100644 --- a/lagebild/lagebild.css +++ b/lagebild/lagebild.css @@ -1,271 +1,1116 @@ -/* ========================================================================== - AegisSight Lagebild Page v2 - ========================================================================== */ -.lagebild-page { background: #f4f6f9; min-height: 100vh; } - -/* Hero */ -.lagebild-hero { - background: linear-gradient(135deg, #0a0f1c 0%, #1a2744 50%, #0f2035 100%); - padding: 150px 20px 70px; - text-align: center; - color: #fff; - position: relative; - overflow: hidden; -} -.hero-bg-pattern { - position: absolute; inset: 0; - background: radial-gradient(circle at 20% 80%, rgba(15,114,181,0.15) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(212,175,55,0.1) 0%, transparent 50%); - pointer-events: none; -} -.lagebild-hero .container { position: relative; z-index: 1; } -.hero-badge { - display: inline-flex; align-items: center; gap: 8px; - background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); - padding: 6px 16px; border-radius: 20px; - font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; color: #4ade80; - margin-bottom: 1.5rem; -} -.badge-dot { - width: 8px; height: 8px; background: #22c55e; border-radius: 50%; - animation: pulse-dot 2s infinite; -} -@keyframes pulse-dot { - 0%,100% { opacity:1; transform:scale(1); } - 50% { opacity:0.5; transform:scale(0.8); } -} -.lagebild-hero h1 { - font-family: 'Bebas Neue', sans-serif; - font-size: 3.5rem; letter-spacing: 5px; color: #fff; margin: 0 0 0.3rem; line-height: 1; -} -.hero-incident-title { - font-size: 1.5rem; font-weight: 300; color: rgba(255,255,255,0.9); margin: 0 0 1.5rem; -} -.hero-meta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } -.meta-badge { - display: inline-flex; align-items: center; gap: 8px; - background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); - padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.85); -} -.meta-badge svg { opacity: 0.7; flex-shrink: 0; } - -/* Control Bar (Snapshot + Tabs) */ -.control-bar { - background: #fff; border-bottom: 1px solid #e5e7eb; - padding: 0 20px; position: sticky; top: 70px; z-index: 50; -} -.control-bar .container { - display: flex; justify-content: space-between; align-items: center; - max-width: 1000px; margin: 0 auto; flex-wrap: wrap; gap: 8px; -} -.snapshot-selector { display: flex; align-items: center; gap: 10px; padding: 10px 0; } -.snapshot-selector label { font-size: 0.9rem; color: #666; font-weight: 500; } -.snapshot-selector select { - padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; - font-size: 0.9rem; background: #fff; cursor: pointer; color: #333; - max-width: 350px; -} - -/* Tab Navigation */ -.tab-nav { display: flex; gap: 0; } -.tab-btn { - padding: 12px 20px; border: none; background: transparent; cursor: pointer; - font-size: 0.9rem; font-weight: 600; color: #888; border-bottom: 3px solid transparent; - transition: all 0.2s; -} -.tab-btn:hover { color: #333; } -.tab-btn.active { color: #0f72b5; border-bottom-color: #0f72b5; } - -/* Tab Panels */ -.tab-panel { display: none; } -.tab-panel.active { display: block; } - -/* Main Content */ -.lagebild-main { padding: 2rem 20px 4rem; } -.lagebild-main .container { max-width: 1000px; margin: 0 auto; } - -/* Content Cards */ -.content-card { - background: #fff; border-radius: 16px; - box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); - margin-bottom: 1.5rem; overflow: hidden; -} -.card-header { padding: 24px 32px 0; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; } -.card-header h2 { font-size: 1.3rem; font-weight: 700; color: #1a1a2e; margin: 0; } -.card-timestamp { font-size: 0.85rem; color: #888; font-weight: 500; } -.card-description { font-size: 0.85rem; color: #888; margin: 4px 0 0; width: 100%; } -.card-body { padding: 20px 32px 28px; } -.card-footer { padding: 0 32px 28px; border-top: 1px solid #f0f0f0; padding-top: 20px; margin: 0 32px; } - -/* Lagebild Summary */ -#summary-content { line-height: 1.85; font-size: 1.02rem; color: #333; } -#summary-content h2 { - font-size: 1.15rem; font-weight: 700; color: #0f72b5; - margin: 1.8rem 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid #e5e7eb; -} -#summary-content h2:first-child { margin-top: 0; } -#summary-content h3 { font-size: 1.05rem; font-weight: 600; color: #1a1a2e; margin: 1.5rem 0 0.6rem; } -#summary-content p { margin: 0 0 1rem; } - -/* Citations */ -.citation-ref { - color: #0f72b5; font-weight: 700; cursor: pointer; text-decoration: none; - font-size: 0.78em; vertical-align: super; line-height: 1; padding: 0 1px; transition: color 0.2s; -} -.citation-ref:hover { color: #d4af37; text-decoration: underline; } - -/* Sources List */ -.sources-section h3 { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 12px; } -.section-subtitle { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin: 2rem 0 12px; padding-top: 1.5rem; border-top: 1px solid #f0f0f0; } -.sources-list { list-style: none; padding: 0; margin: 0; counter-reset: src; } -.sources-list li { - counter-increment: src; padding: 10px 0; border-bottom: 1px solid #f0f0f0; - font-size: 0.92rem; display: flex; align-items: baseline; gap: 10px; -} -.sources-list li:last-child { border-bottom: none; } -.sources-list li::before { content: "[" counter(src) "]"; color: #0f72b5; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } -.sources-list a { color: #0f72b5; text-decoration: none; word-break: break-all; } -.sources-list a:hover { text-decoration: underline; } -.source-name { font-weight: 600; color: #333; } - -/* Inline sources in Lagebild tab footer */ -.inline-sources-list { list-style: none; padding: 0; margin: 0; } -.inline-sources-list li { padding: 6px 0; font-size: 0.85rem; color: #666; display: flex; gap: 8px; align-items: baseline; } -.inline-sources-list .src-nr { color: #0f72b5; font-weight: 700; min-width: 24px; } -.inline-sources-list a { color: #0f72b5; text-decoration: none; } -.inline-sources-list a:hover { text-decoration: underline; } - -/* Article Cards */ -.article-card { - display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; -} -.article-card:last-child { border-bottom: none; } -.article-date { flex-shrink: 0; width: 60px; text-align: center; } -.article-date .day { display: block; font-size: 1.3rem; font-weight: 700; color: #0f72b5; line-height: 1; } -.article-date .month { display: block; font-size: 0.72rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } -.article-info { flex: 1; min-width: 0; } -.article-headline { font-size: 0.95rem; font-weight: 600; color: #1a1a2e; margin: 0 0 6px; line-height: 1.4; } -.article-headline a { color: inherit; text-decoration: none; } -.article-headline a:hover { color: #0f72b5; } -.article-meta { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: #888; flex-wrap: wrap; } -.article-source { font-weight: 600; color: #555; } -.article-lang { background: #f0f0f0; padding: 1px 6px; border-radius: 3px; font-size: 0.7rem; text-transform: uppercase; } - -/* Fact Check Cards */ -.factcheck-card { - background: #fafbfc; border-radius: 12px; padding: 20px; margin-bottom: 12px; - border-left: 4px solid #d1d5db; transition: transform 0.2s, box-shadow 0.2s; -} -.factcheck-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } -.factcheck-card.highlight { - background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); - border-left-color: #d4af37; box-shadow: 0 2px 12px rgba(212,175,55,0.15); -} -.factcheck-card[data-status="confirmed"], .factcheck-card[data-status="established"] { border-left-color: #22c55e; } -.factcheck-card[data-status="unconfirmed"], .factcheck-card[data-status="unverified"] { border-left-color: #f59e0b; } -.factcheck-card[data-status="contradicted"], .factcheck-card[data-status="disputed"] { border-left-color: #ef4444; } -.factcheck-card[data-status="developing"] { border-left-color: #3b82f6; } -.factcheck-card[data-status="false"] { border-left-color: #dc2626; } -.factcheck-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } -.factcheck-sources { font-size: 0.8rem; color: #888; } -.factcheck-claim { font-size: 0.95rem; color: #333; margin: 0 0 4px; line-height: 1.5; } -.factcheck-evidence { font-size: 0.82rem; color: #666; margin: 8px 0 0; line-height: 1.5; } - -/* Status Badges */ -.status-badge { - display: inline-block; padding: 3px 10px; border-radius: 4px; - font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; -} -.status-badge.confirmed, .status-badge.established { background: rgba(34,197,94,0.12); color: #166534; } -.status-badge.unconfirmed, .status-badge.unverified { background: rgba(245,158,11,0.12); color: #92400e; } -.status-badge.contradicted, .status-badge.disputed { background: rgba(239,68,68,0.12); color: #991b1b; } -.status-badge.developing { background: rgba(59,130,246,0.12); color: #1e40af; } -.status-badge.false { background: rgba(220,38,38,0.12); color: #7f1d1d; } - -/* Status Progression */ -.status-progression { - display: flex; align-items: center; gap: 6px; margin-top: 10px; - padding-top: 10px; border-top: 1px solid #e5e7eb; font-size: 0.78rem; -} -.progression-label { color: #888; font-weight: 500; margin-right: 4px; } -.progression-arrow { color: #ccc; font-size: 1rem; } -.progression-step { display: flex; align-items: center; gap: 4px; } -.progression-time { color: #aaa; font-size: 0.7rem; } - -/* CTA */ -.lagebild-cta { margin-top: 1rem; text-align: center; } -.cta-content { - background: linear-gradient(135deg, #0a0f1c 0%, #1a2744 100%); - border-radius: 16px; padding: 48px 32px; color: #fff; -} -.cta-content h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.8rem; } -.cta-content p { font-size: 1rem; color: rgba(255,255,255,0.7); margin: 0 0 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } -.cta-button { - display: inline-block; background: #d4af37; color: #0a0f1c; padding: 12px 32px; - border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 0.95rem; - transition: background 0.2s, transform 0.2s; -} -.cta-button:hover { background: #e5c04b; transform: translateY(-2px); } - -/* Loading Skeleton */ -.loading-skeleton { padding: 20px 0; } -.skeleton-line { - height: 16px; - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); - background-size: 200% 100%; animation: shimmer 1.5s infinite; - border-radius: 4px; margin-bottom: 12px; -} -.skeleton-line.short { width: 60%; } -@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } - -/* Error */ -.lagebild-error { text-align: center; padding: 40px 20px; color: #888; } - -/* Map */ -#map-container { background: #e5e7eb; } - -/* Responsive */ -@media (max-width: 768px) { - .lagebild-hero { padding: 120px 16px 50px; } - .lagebild-hero h1 { font-size: 2.5rem; letter-spacing: 3px; } - .hero-incident-title { font-size: 1.2rem; } - .hero-meta { gap: 8px; } - .meta-badge { font-size: 0.75rem; padding: 6px 10px; } - .control-bar .container { flex-direction: column; align-items: stretch; } - .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } - .tab-btn { padding: 10px 14px; font-size: 0.82rem; white-space: nowrap; } - .card-header { padding: 16px 20px 0; } - .card-body { padding: 16px 20px 20px; } - .card-footer { margin: 0 20px; padding: 16px 20px 20px; } - .lagebild-main { padding: 1rem 12px 3rem; } - .factcheck-header { flex-direction: column; align-items: flex-start; gap: 6px; } - .article-card { flex-direction: column; gap: 8px; } - .article-date { width: auto; text-align: left; display: flex; gap: 6px; align-items: baseline; } - .article-date .day { font-size: 1rem; } - #map-container { height: 350px !important; } -} - -/* Fact Check Statistics */ -.fc-stats { - display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; -} -.fc-stat { - background: #f8f9fa; border-radius: 10px; padding: 14px 20px; - text-align: center; min-width: 80px; border: 1px solid #e5e7eb; -} -.fc-stat.confirmed { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.2); } -.fc-stat.unconfirmed { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.2); } -.fc-stat.contradicted { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.2); } -.fc-stat-num { display: block; font-size: 1.6rem; font-weight: 800; color: #1a1a2e; } -.fc-stat.confirmed .fc-stat-num { color: #166534; } -.fc-stat.unconfirmed .fc-stat-num { color: #92400e; } -.fc-stat.contradicted .fc-stat-num { color: #991b1b; } -.fc-stat-label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } - -/* Evidenz in Faktenchecks */ -.factcheck-evidence { - font-size: 0.82rem; color: #555; margin: 10px 0 0; line-height: 1.6; - padding: 10px 14px; background: rgba(0,0,0,0.02); border-radius: 8px; - border: 1px solid #f0f0f0; -} -.factcheck-evidence a { word-break: break-all; } +/* ========================================================================== + AegisSight Lagebild Page - Dark Theme Design Refresh + ========================================================================== */ + +/* ---------- Variables ---------- */ +.lagebild-page { + --lb-bg: #0B1121; + --lb-bg-card: #151D2E; + --lb-bg-secondary: #1A2440; + --lb-border: #1E2D45; + --lb-text: #E8ECF4; + --lb-text-sec: #8896AB; + --lb-accent: #C8A851; + --lb-accent-hover: #B5923E; + --lb-success: #10B981; + --lb-warning: #F59E0B; + --lb-error: #EF4444; +} + +/* ---------- Page Base ---------- */ +.lagebild-page { + background: var(--lb-bg); + min-height: 100vh; + color: var(--lb-text); +} + +/* ---------- Navigation Dark Override ---------- */ +.lagebild-page .navbar { + background: rgba(11, 17, 33, 0.95) !important; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--lb-border) !important; + box-shadow: none !important; +} +.lagebild-page .nav-menu a { + color: var(--lb-text) !important; +} +.lagebild-page .nav-menu a:hover { + color: var(--lb-accent) !important; +} +.lagebild-page .nav-menu a.nav-active { + color: var(--lb-accent) !important; +} +.lagebild-page .lang-toggle { + color: var(--lb-text-sec) !important; + border-color: var(--lb-border) !important; +} +.lagebild-page .lang-toggle:hover { + color: var(--lb-accent) !important; + border-color: var(--lb-accent) !important; +} +.lagebild-page .hamburger span { + background: var(--lb-text) !important; +} + +/* ---------- Footer Dark Override ---------- */ +.lagebild-page .footer { + background: #080D1A !important; + border-top: 1px solid var(--lb-border); +} +.lagebild-page .footer h4 { + color: var(--lb-accent) !important; +} +.lagebild-page .footer p, +.lagebild-page .footer a, +.lagebild-page .footer li, +.lagebild-page .footer ul li a { + color: var(--lb-text-sec) !important; +} +.lagebild-page .footer a:hover { + color: var(--lb-accent) !important; +} +.lagebild-page .copyright { + color: var(--lb-text-sec) !important; + opacity: 0.5; +} + +/* ---------- Hero Section ---------- */ +.lagebild-hero { + background: linear-gradient(135deg, #0a0f1c 0%, #111B30 50%, #0B1121 100%); + padding: 150px 20px 70px; + text-align: center; + color: #fff; + position: relative; + overflow: hidden; +} +.hero-bg-pattern { + position: absolute; + inset: 0; + background: + radial-gradient(circle at 20% 80%, rgba(200, 168, 81, 0.08) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(200, 168, 81, 0.05) 0%, transparent 50%), + radial-gradient(circle at 50% 50%, rgba(15, 114, 181, 0.06) 0%, transparent 60%); + pointer-events: none; +} +.lagebild-hero .container { + position: relative; + z-index: 1; +} + +/* Hero Badge */ +.hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(200, 168, 81, 0.12); + border: 1px solid rgba(200, 168, 81, 0.25); + padding: 6px 16px; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 1.5px; + color: var(--lb-accent); + margin-bottom: 1.5rem; +} +.badge-dot { + width: 8px; + height: 8px; + background: var(--lb-accent); + border-radius: 50%; + animation: pulse-dot 2s infinite; +} +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.7); } +} + +/* Hero Title */ +.lagebild-hero h1 { + font-family: 'Bebas Neue', sans-serif; + font-size: 3.5rem; + letter-spacing: 5px; + color: #fff; + margin: 0 0 0.3rem; + line-height: 1; +} +.hero-incident-title { + font-size: 1.5rem; + font-weight: 300; + color: rgba(255, 255, 255, 0.85); + margin: 0 0 0.5rem; +} + +/* Hero Stat Cards */ +.hero-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 14px; + margin-top: 2rem; + max-width: 820px; + margin-left: auto; + margin-right: auto; +} +.stat-card { + display: flex; + align-items: center; + gap: 12px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + padding: 14px 16px; + border-radius: var(--radius-md, 8px); + transition: border-color 0.3s, background 0.3s; +} +.stat-card:hover { + border-color: rgba(200, 168, 81, 0.3); + background: rgba(255, 255, 255, 0.08); +} +.stat-card-icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(200, 168, 81, 0.1); + border-radius: var(--radius-md, 8px); + color: var(--lb-accent); + flex-shrink: 0; +} +.stat-card-icon svg { + width: 18px; + height: 18px; +} +.stat-card-content { + min-width: 0; +} +.stat-card-value { + display: block; + font-size: 1.35rem; + font-weight: 700; + color: #fff; + line-height: 1.1; +} +.stat-card-label { + display: block; + font-size: 0.72rem; + color: rgba(255, 255, 255, 0.55); + text-transform: uppercase; + letter-spacing: 0.5px; + 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); + border-bottom: 1px solid var(--lb-border); + padding: 0 20px; + position: sticky; + top: 70px; + z-index: 50; +} +.control-bar .container { + max-width: 1000px; + margin: 0 auto; +} + +/* Timeline Strip */ +.timeline-wrapper { + padding: 12px 0; + border-bottom: 1px solid var(--lb-border); +} +.timeline-strip { + display: flex; + gap: 4px; + overflow-x: auto; + scroll-behavior: smooth; + padding: 4px 0; + scrollbar-width: thin; + scrollbar-color: var(--lb-border) transparent; +} +.timeline-strip::-webkit-scrollbar { + height: 4px; +} +.timeline-strip::-webkit-scrollbar-track { + background: transparent; +} +.timeline-strip::-webkit-scrollbar-thumb { + background: var(--lb-border); + border-radius: 2px; +} +.timeline-day { + display: flex; + flex-direction: column; + align-items: center; + padding: 8px 14px; + border-radius: var(--radius-sm, 4px); + border: 1px solid var(--lb-border); + background: transparent; + cursor: pointer; + transition: all 0.2s; + flex-shrink: 0; + min-width: 64px; + position: relative; + color: var(--lb-text-sec); + font-family: inherit; +} +.timeline-day:hover { + background: var(--lb-bg-secondary); + border-color: rgba(200, 168, 81, 0.4); +} +.timeline-day.active { + background: rgba(200, 168, 81, 0.1); + border-color: var(--lb-accent); +} +.timeline-dot { + position: absolute; + top: -4px; + right: -4px; + width: 10px; + height: 10px; + background: var(--lb-accent); + border-radius: 50%; + animation: pulse-dot 2s infinite; + border: 2px solid var(--lb-bg-card); +} +.timeline-day-num { + font-size: 1.1rem; + font-weight: 700; + line-height: 1; +} +.timeline-day.active .timeline-day-num { + color: var(--lb-accent); +} +.timeline-day-month { + font-size: 0.62rem; + text-transform: uppercase; + letter-spacing: 0.5px; + opacity: 0.7; + margin-top: 1px; +} +.timeline-day-count { + font-size: 0.68rem; + margin-top: 4px; + padding-top: 4px; + border-top: 1px solid var(--lb-border); + width: 100%; + text-align: center; + opacity: 0.6; +} +.timeline-day.active .timeline-day-count { + opacity: 1; + color: var(--lb-accent); +} +.timeline-day-updates { + font-size: 0.58rem; + opacity: 0.4; +} +.timeline-day-label { + font-size: 0.58rem; + color: var(--lb-accent); + font-weight: 600; + margin-top: 2px; +} + +/* Tab Navigation */ +.tab-nav { + display: flex; + gap: 0; +} +.tab-btn { + padding: 12px 20px; + border: none; + background: transparent; + cursor: pointer; + font-size: 0.9rem; + font-weight: 600; + color: var(--lb-text-sec); + border-bottom: 3px solid transparent; + transition: all 0.2s; + font-family: inherit; +} +.tab-btn:hover { + color: var(--lb-text); +} +.tab-btn.active { + color: var(--lb-accent); + border-bottom-color: var(--lb-accent); +} +.tab-badge { + display: inline-block; + background: rgba(200, 168, 81, 0.12); + color: var(--lb-accent); + padding: 1px 8px; + border-radius: 10px; + font-size: 0.7rem; + font-weight: 600; + margin-left: 4px; + vertical-align: middle; +} +.tab-btn.active .tab-badge { + background: rgba(200, 168, 81, 0.22); +} + +/* Tab Panels */ +.tab-panel { display: none; } +.tab-panel.active { display: block; } + +/* ---------- Main Content ---------- */ +.lagebild-main { + padding: 2rem 20px 4rem; +} +.lagebild-main .container { + max-width: 1000px; + margin: 0 auto; +} + +/* ---------- Content Cards ---------- */ +.content-card { + background: var(--lb-bg-card); + border-radius: var(--radius-sm, 4px); + border: 1px solid var(--lb-border); + margin-bottom: 1.5rem; + overflow: hidden; + position: relative; +} +.content-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--lb-accent); +} +.card-header { + padding: 24px 32px 0; + display: flex; + justify-content: space-between; + align-items: baseline; + flex-wrap: wrap; + gap: 8px; +} +.card-header h2 { + font-size: 1.3rem; + font-weight: 700; + color: var(--lb-text); + margin: 0; +} +.card-timestamp { + font-size: 0.85rem; + color: var(--lb-text-sec); + font-weight: 500; +} +.card-description { + font-size: 0.85rem; + color: var(--lb-text-sec); + margin: 4px 0 0; + width: 100%; +} +.card-body { + padding: 20px 32px 28px; +} +.card-footer { + padding: 0 32px 28px; + border-top: 1px solid var(--lb-border); + padding-top: 20px; + margin: 0 32px; +} + +/* ---------- Lagebild Summary ---------- */ +#summary-content { + line-height: 1.85; + font-size: 1.02rem; + color: var(--lb-text); +} +#summary-content h2 { + font-size: 1.15rem; + font-weight: 700; + color: var(--lb-accent); + margin: 1.8rem 0 0.8rem; + padding-bottom: 0.4rem; + border-bottom: 2px solid var(--lb-border); +} +#summary-content h2:first-child { + margin-top: 0; +} +#summary-content h3 { + font-size: 1.05rem; + font-weight: 600; + color: var(--lb-text); + margin: 1.5rem 0 0.6rem; +} +#summary-content p { + margin: 0 0 1rem; +} +#summary-content ul { + margin: 0 0 1rem; + padding-left: 1.5rem; +} +#summary-content li { + margin-bottom: 0.4rem; + color: var(--lb-text); +} +#summary-content strong { + color: #fff; +} + +/* Citations */ +.citation-ref { + color: var(--lb-accent); + font-weight: 700; + cursor: pointer; + text-decoration: none; + font-size: 0.78em; + vertical-align: super; + line-height: 1; + padding: 0 1px; + transition: color 0.2s; +} +.citation-ref:hover { + color: var(--lb-accent-hover); + text-decoration: underline; +} + +/* Source Highlight (smooth scroll target) */ +.source-highlight { + background: rgba(200, 168, 81, 0.15) !important; + border-radius: 4px; + transition: background 1.5s ease-out; +} + +/* Sources List */ +.sources-section h3 { + font-size: 1.1rem; + font-weight: 700; + color: var(--lb-text); + margin: 0 0 12px; +} +.section-subtitle { + font-size: 1.1rem; + font-weight: 700; + color: var(--lb-text); + margin: 2rem 0 12px; + padding-top: 1.5rem; + border-top: 1px solid var(--lb-border); +} +.sources-list { + list-style: none; + padding: 0; + margin: 0; + counter-reset: src; +} +.sources-list li { + counter-increment: src; + padding: 10px 0; + border-bottom: 1px solid var(--lb-border); + font-size: 0.92rem; + display: flex; + align-items: baseline; + gap: 10px; + color: var(--lb-text); +} +.sources-list li:last-child { border-bottom: none; } +.sources-list li::before { + content: "[" counter(src) "]"; + color: var(--lb-accent); + font-weight: 700; + font-size: 0.85rem; + flex-shrink: 0; +} +.sources-list a { + color: var(--lb-accent); + text-decoration: none; + word-break: break-all; +} +.sources-list a:hover { text-decoration: underline; } +.source-name { + font-weight: 600; + color: var(--lb-text); +} + +/* Inline sources (Lagebild tab footer) */ +.inline-sources-title { + font-size: 1rem; + font-weight: 700; + color: var(--lb-text); + margin: 0 0 12px; +} +.inline-sources-list { + list-style: none; + padding: 0; + margin: 0; +} +.inline-sources-list li { + padding: 6px 0; + font-size: 0.85rem; + color: var(--lb-text-sec); + display: flex; + gap: 8px; + align-items: baseline; +} +.inline-sources-list .src-nr { + color: var(--lb-accent); + font-weight: 700; + min-width: 24px; +} +.inline-sources-list a { + color: var(--lb-accent); + text-decoration: none; +} +.inline-sources-list a:hover { text-decoration: underline; } +.inline-sources-list strong { + color: var(--lb-text); +} + +/* ---------- Article Cards ---------- */ +.article-card { + display: flex; + gap: 16px; + padding: 16px 0; + border-bottom: 1px solid var(--lb-border); +} +.article-card:last-child { border-bottom: none; } +.article-date { + flex-shrink: 0; + width: 60px; + text-align: center; +} +.article-date .day { + display: block; + font-size: 1.3rem; + font-weight: 700; + color: var(--lb-accent); + line-height: 1; +} +.article-date .month { + display: block; + font-size: 0.72rem; + color: var(--lb-text-sec); + text-transform: uppercase; + letter-spacing: 0.5px; +} +.article-info { + flex: 1; + min-width: 0; +} +.article-headline { + font-size: 0.95rem; + font-weight: 600; + color: var(--lb-text); + margin: 0 0 6px; + line-height: 1.4; +} +.article-headline a { + color: inherit; + text-decoration: none; +} +.article-headline a:hover { + color: var(--lb-accent); +} +.article-meta { + display: flex; + align-items: center; + gap: 12px; + font-size: 0.8rem; + color: var(--lb-text-sec); + flex-wrap: wrap; +} +.article-source { + font-weight: 600; + color: var(--lb-text); + display: inline-flex; + align-items: center; + gap: 4px; +} +.article-favicon { + width: 16px; + height: 16px; + border-radius: 2px; + vertical-align: middle; +} +.article-lang { + background: var(--lb-bg-secondary); + border: 1px solid var(--lb-border); + padding: 1px 6px; + border-radius: 3px; + font-size: 0.7rem; + text-transform: uppercase; + color: var(--lb-text-sec); +} +.article-link { + color: var(--lb-accent) !important; + text-decoration: none !important; + font-size: 0.78rem; + display: inline-flex; + align-items: center; + gap: 3px; +} +.article-link:hover { + text-decoration: underline !important; +} + +/* ---------- Map ---------- */ +#map-container { + background: var(--lb-bg-secondary); +} +.lagebild-page .map-legend { + background: var(--lb-bg-card) !important; + color: var(--lb-text) !important; + border: 1px solid var(--lb-border) !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; +} +/* Leaflet controls dark */ +.lagebild-page .leaflet-control-zoom a { + background: var(--lb-bg-card) !important; + color: var(--lb-text) !important; + border-color: var(--lb-border) !important; +} +.lagebild-page .leaflet-control-zoom a:hover { + background: var(--lb-bg-secondary) !important; +} +.lagebild-page .leaflet-control-attribution { + background: rgba(11, 17, 33, 0.8) !important; + color: var(--lb-text-sec) !important; +} +.lagebild-page .leaflet-control-attribution a { + color: var(--lb-accent) !important; +} + +/* ---------- Fact Check Cards ---------- */ +.fc-stats { + display: flex; + gap: 12px; + margin-bottom: 24px; + flex-wrap: wrap; +} +.fc-stat { + background: var(--lb-bg-secondary); + border-radius: var(--radius-sm, 4px); + padding: 14px 20px; + text-align: center; + min-width: 80px; + border: 1px solid var(--lb-border); +} +.fc-stat.confirmed { + background: rgba(16, 185, 129, 0.08); + border-color: rgba(16, 185, 129, 0.2); +} +.fc-stat.unconfirmed { + background: rgba(245, 158, 11, 0.08); + border-color: rgba(245, 158, 11, 0.2); +} +.fc-stat.contradicted { + background: rgba(239, 68, 68, 0.08); + border-color: rgba(239, 68, 68, 0.2); +} +.fc-stat-num { + display: block; + font-size: 1.6rem; + font-weight: 800; + color: var(--lb-text); +} +.fc-stat.confirmed .fc-stat-num { color: var(--lb-success); } +.fc-stat.unconfirmed .fc-stat-num { color: var(--lb-warning); } +.fc-stat.contradicted .fc-stat-num { color: var(--lb-error); } +.fc-stat-label { + font-size: 0.75rem; + color: var(--lb-text-sec); + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 600; +} + +.factcheck-card { + background: var(--lb-bg-secondary); + border-radius: var(--radius-sm, 4px); + padding: 20px; + margin-bottom: 12px; + border-left: 4px solid var(--lb-border); + transition: transform 0.2s, box-shadow 0.2s; +} +.factcheck-card:hover { + transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} +.factcheck-card.highlight { + background: rgba(200, 168, 81, 0.06); + border-left-color: var(--lb-accent); + box-shadow: 0 2px 12px rgba(200, 168, 81, 0.1); +} +.factcheck-card[data-status="confirmed"], +.factcheck-card[data-status="established"] { + border-left-color: var(--lb-success); +} +.factcheck-card[data-status="unconfirmed"], +.factcheck-card[data-status="unverified"] { + border-left-color: var(--lb-warning); +} +.factcheck-card[data-status="contradicted"], +.factcheck-card[data-status="disputed"] { + border-left-color: var(--lb-error); +} +.factcheck-card[data-status="developing"] { + border-left-color: #3b82f6; +} +.factcheck-card[data-status="false"] { + border-left-color: #dc2626; +} + +.factcheck-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; +} +.factcheck-sources { + font-size: 0.8rem; + color: var(--lb-text-sec); +} +.factcheck-claim { + font-size: 0.95rem; + color: var(--lb-text); + margin: 0 0 4px; + line-height: 1.5; +} + +/* Status Badges */ +.status-badge { + display: inline-block; + padding: 3px 10px; + border-radius: var(--radius-sm, 4px); + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; +} +.status-badge.confirmed, .status-badge.established { + background: rgba(16, 185, 129, 0.15); + color: #34d399; +} +.status-badge.unconfirmed, .status-badge.unverified { + background: rgba(245, 158, 11, 0.15); + color: #fbbf24; +} +.status-badge.contradicted, .status-badge.disputed { + background: rgba(239, 68, 68, 0.15); + color: #f87171; +} +.status-badge.developing { + background: rgba(59, 130, 246, 0.15); + color: #60a5fa; +} +.status-badge.false { + background: rgba(220, 38, 38, 0.15); + color: #f87171; +} + +/* Status Progression */ +.status-progression { + display: flex; + align-items: center; + gap: 6px; + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid var(--lb-border); + font-size: 0.78rem; + flex-wrap: wrap; +} +.progression-label { + color: var(--lb-text-sec); + font-weight: 500; + margin-right: 4px; +} +.progression-arrow { + color: var(--lb-accent); + font-size: 1rem; +} +.progression-step { + display: flex; + align-items: center; + gap: 4px; +} +.progression-time { + color: var(--lb-text-sec); + font-size: 0.7rem; +} + +/* Evidence block */ +.factcheck-evidence { + font-size: 0.82rem; + color: var(--lb-text-sec); + margin: 10px 0 0; + line-height: 1.6; + padding: 10px 14px; + background: rgba(0, 0, 0, 0.2); + border-radius: var(--radius-sm, 4px); + border: 1px solid var(--lb-border); +} +.factcheck-evidence strong { + color: var(--lb-text); +} +.factcheck-evidence a { + color: var(--lb-accent) !important; + word-break: break-all; +} + +/* ---------- CTA Section ---------- */ +.lagebild-cta { + 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); + border-radius: var(--radius-sm, 4px); + padding: 48px 32px; + color: #fff; +} +.cta-content h3 { + font-size: 1.5rem; + font-weight: 700; + margin: 0 0 0.8rem; + color: #fff; +} +.cta-content p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.6); + margin: 0 0 1.5rem; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} +.cta-button { + display: inline-block; + background: var(--lb-accent); + color: #0a0f1c; + padding: 12px 32px; + border-radius: var(--radius-sm, 4px); + font-weight: 700; + text-decoration: none; + font-size: 0.95rem; + transition: background 0.2s, transform 0.2s; +} +.cta-button:hover { + background: var(--lb-accent-hover); + transform: translateY(-2px); +} + +/* ---------- Loading Skeleton ---------- */ +.loading-skeleton { padding: 20px 0; } +.skeleton-line { + height: 16px; + background: linear-gradient(90deg, var(--lb-bg-secondary) 25%, var(--lb-border) 50%, var(--lb-bg-secondary) 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + border-radius: var(--radius-sm, 4px); + margin-bottom: 12px; +} +.skeleton-line.short { width: 60%; } +@keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +/* Error */ +.lagebild-error { + text-align: center; + padding: 40px 20px; + color: var(--lb-text-sec); +} + +/* ---------- Scroll Reveal ---------- */ +.reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.4s ease-out, transform 0.4s ease-out; +} +.reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +/* ---------- Responsive ---------- */ + +/* Tablet */ +@media (max-width: 1024px) { + .hero-stats { + max-width: 600px; + } + .stat-card { + padding: 12px 14px; + } + .stat-card-value { + font-size: 1.15rem; + } +} + +/* Mobile */ +@media (max-width: 768px) { + .lagebild-hero { + padding: 120px 16px 50px; + } + .lagebild-hero h1 { + font-size: 2.5rem; + letter-spacing: 3px; + } + .hero-incident-title { + font-size: 1.2rem; + } + .hero-stats { + grid-template-columns: repeat(2, 1fr); + gap: 10px; + margin-top: 1.5rem; + } + .stat-card { + padding: 10px 12px; + gap: 10px; + } + .stat-card-icon { + width: 32px; + height: 32px; + } + .stat-card-value { + font-size: 1.1rem; + } + .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; + align-items: stretch; + } + .timeline-strip { + gap: 3px; + } + .timeline-day { + padding: 6px 10px; + min-width: 54px; + } + .timeline-day-num { + font-size: 0.95rem; + } + .tab-nav { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .tab-btn { + padding: 10px 14px; + font-size: 0.82rem; + white-space: nowrap; + } + + .card-header { + padding: 16px 20px 0; + } + .card-body { + padding: 16px 20px 20px; + } + .card-footer { + margin: 0 20px; + padding: 16px 20px 20px; + } + .lagebild-main { + padding: 1rem 12px 3rem; + } + .factcheck-header { + flex-direction: column; + align-items: flex-start; + gap: 6px; + } + .article-card { + flex-direction: column; + gap: 8px; + } + .article-date { + width: auto; + text-align: left; + display: flex; + gap: 6px; + align-items: baseline; + } + .article-date .day { + font-size: 1rem; + } + #map-container { + height: 350px !important; + } + .fc-stats { + gap: 8px; + } + .fc-stat { + padding: 10px 14px; + min-width: 70px; + } + .status-progression { + gap: 4px; + } +} diff --git a/lagebild/lagebild.js b/lagebild/lagebild.js index 443d769..1bf3548 100644 --- a/lagebild/lagebild.js +++ b/lagebild/lagebild.js @@ -1,460 +1,649 @@ -/** - * AegisSight Lagebild Page v3 - * Vollständige Darstellung aller Daten mit Tabs - */ - -/** Feste Zeitzone fuer alle Anzeigen — NIEMALS aendern. */ -var TIMEZONE = 'Europe/Berlin'; - -var Lagebild = { - data: null, - allSnapshots: {}, - currentView: null, - map: null, - - async init() { - if (typeof initTranslations === 'function') { - try { initTranslations(); } catch(e) {} - } - try { - var resp = await fetch('data/current.json?t=' + Date.now()); - if (!resp.ok) throw new Error('HTTP ' + resp.status); - this.data = await resp.json(); - this.currentView = { - summary: this.data.current_lagebild.summary_markdown, - sources_json: this.data.current_lagebild.sources_json, - updated_at: this.data.current_lagebild.updated_at || this.data.generated_at, - articles: this.data.articles, - fact_checks: this.data.fact_checks - }; - this.render(); - this.initTabs(); - this.initLangToggle(); - } catch (e) { - console.error('Lagebild laden fehlgeschlagen:', e); - this.showError(); - } - }, - - render: function() { - this.renderHero(); - this.renderSnapshotSelector(); - this.renderCurrentView(); - }, - - renderHero: function() { - var d = this.data; - document.getElementById('incident-title').textContent = this.fixUmlauts(d.incident.title); - var metaHtml = ''; - metaHtml += this.metaBadge('clock', 'Stand: ' + this.fmtDT(this.data.generated_at)); - metaHtml += this.metaBadge('doc', d.incident.article_count + ' Artikel'); - metaHtml += this.metaBadge('globe', d.incident.source_count + ' Quellen'); - metaHtml += this.metaBadge('check', d.incident.factcheck_count + ' Faktenchecks'); - document.getElementById('hero-meta').innerHTML = metaHtml; - }, - - metaBadge: function(icon, text) { - var icons = { - clock: '', - doc: '', - globe: '', - check: '' - }; - return '
' + icons[icon] + '' + text + '
'; - }, - - renderSnapshotSelector: function() { - var select = document.getElementById('snapshot-select'); - select.innerHTML = ''; - var optC = document.createElement('option'); - optC.value = 'current'; - optC.textContent = this.fmtDT(this.data.current_lagebild.updated_at || this.data.generated_at) + ' — Aktuell'; - optC.selected = true; - select.appendChild(optC); - var snaps = this.data.available_snapshots || []; - for (var i = 0; i < snaps.length; i++) { - var s = snaps[i]; - var opt = document.createElement('option'); - opt.value = s.id; - opt.textContent = this.fmtDT(s.created_at) + ' — ' + s.article_count + ' Artikel, ' + s.fact_check_count + ' Faktenchecks'; - select.appendChild(opt); - } - var self = this; - select.addEventListener('change', function() { - if (this.value === '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(this.value)); - } - }); - }, - - loadSnapshot: async function(id) { - if (this.allSnapshots[id]) { - this.currentView = this.allSnapshots[id]; - this.renderCurrentView(); - return; - } - try { - var resp = await fetch('data/snapshot-' + id + '.json'); - if (!resp.ok) throw new Error('HTTP ' + resp.status); - var sd = await resp.json(); - var sj = sd.sources_json; - if (typeof sj === 'string') { try { sj = JSON.parse(sj); } catch(e) { sj = []; } } - this.currentView = { - summary: sd.summary, - sources_json: sj || [], - updated_at: sd.created_at, - articles: this.data.articles, - fact_checks: this.data.fact_checks - }; - this.allSnapshots[id] = this.currentView; - this.renderCurrentView(); - } catch (e) { console.error('Snapshot Fehler:', e); } - }, - - renderCurrentView: function() { - this.renderSummary(); - this.renderInlineSources(); - this.renderSourcesTab(); - this.renderArticlesTab(); - this.renderFactChecksTab(); - if (document.getElementById('panel-karte').classList.contains('active')) { - this.renderMap(); - } - }, - - // ===== TAB: LAGEBILD ===== - renderSummary: function() { - var v = this.currentView; - document.getElementById('lagebild-timestamp').textContent = this.fmtDT(v.updated_at); - var md = this.fixUmlauts(v.summary || ''); - var html = this.mdToHtml(md); - html = html.replace(/\[(\d+)\]/g, '[$1]'); - document.getElementById('summary-content').innerHTML = html; - }, - - renderInlineSources: function() { - var sources = this.currentView.sources_json || []; - if (!sources.length) { document.getElementById('inline-sources').innerHTML = ''; return; } - var h = '

Quellenverzeichnis

'; - h += '
    '; - for (var i = 0; i < sources.length; i++) { - var s = sources[i]; - h += '
  • [' + s.nr + ']'; - h += '' + this.esc(s.name || '') + ''; - if (s.url) h += ' — ' + this.esc(s.url) + ''; - h += '
  • '; - } - h += '
'; - document.getElementById('inline-sources').innerHTML = h; - }, - - // ===== TAB: QUELLEN ===== - renderSourcesTab: function() { - var sources = this.currentView.sources_json || []; - var articles = this.currentView.articles || []; - var h = ''; - - // Zitierte Quellen - h += '

Im Lagebild zitierte Quellen (' + sources.length + ')

'; - if (sources.length) { - h += '
    '; - for (var i = 0; i < sources.length; i++) { - var s = sources[i]; - h += '
  1. ' + this.esc(s.name || '') + ''; - if (s.url) h += ' — ' + this.esc(s.url) + ''; - h += '
  2. '; - } - h += '
'; - } - h += '
'; - document.getElementById('sources-cited').innerHTML = h; - - // Alle Artikel - document.getElementById('articles-heading').textContent = 'Alle gesammelten Artikel (' + articles.length + ')'; - var ah = ''; - for (var i = 0; i < articles.length; i++) { - var a = articles[i]; - var dt = a.published_at || a.collected_at || ''; - var dObj = dt ? new Date(this.toUTC(dt)) : null; - var hl = this.fixUmlauts(a.headline_de || a.headline || ''); - ah += '
'; - ah += '
'; - } - document.getElementById('articles-content').innerHTML = ah; - }, - - // Placeholder for separate articles render (not used in tab structure) - renderArticlesTab: function() {}, - - // ===== TAB: KARTE ===== - renderMap: function() { - if (this.map) { this.map.remove(); this.map = null; } - this.map = L.map('map-container').setView([33.0, 48.0], 5); - - // Deutsche Kartenbeschriftungen via OpenStreetMap DE - L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap', - maxZoom: 18 - }).addTo(this.map); - - var redIcon = L.icon({ - iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', - shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', - iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] - }); - var blueIcon = L.icon({ - iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png', - shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', - iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] - }); - var orangeIcon = L.icon({ - iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png', - shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', - iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] - }); - - var locs = [ - {n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschläge. Über 1.000 Tote nach fünf Tagen Krieg.',ic:redIcon}, - {n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschläge auf Beirut und Teheran [6].',ic:redIcon}, - {n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis — Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon}, - {n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenstützpunkt — Ziel iranischer Gegenangriffe.',ic:orangeIcon}, - {n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis für israelische Angriffe auf den Iran.',ic:blueIcon}, - {n:'Ankara, Türkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf Türkei [10]. Keine NATO-Beteiligung geplant.',ic:orangeIcon}, - {n:'Bagdad, Irak',lat:33.3152,lng:44.3661,d:'Lage im Irak als Faktor im Kriegsverlauf [2].',ic:blueIcon}, - {n:'Persischer Golf',lat:27.0,lng:51.5,d:'Iran greift Energieinfrastruktur und diplomatische Einrichtungen in der Golfregion an.',ic:orangeIcon}, - {n:'Dubai, VAE',lat:25.2048,lng:55.2708,d:'US-Botschaft in Dubai durch iranischen Angriff getroffen.',ic:redIcon}, - {n:'Washington D.C., USA',lat:38.9072,lng:-77.0369,d:'War-Powers-Abstimmung im Senat gescheitert (47:53). Trump verteidigt Iran-Krieg vor Kongress.',ic:blueIcon} - ]; - - for (var i = 0; i < locs.length; i++) { - var l = locs[i]; - L.marker([l.lat, l.lng], {icon: l.ic}) - .addTo(this.map) - .bindPopup('' + l.n + '
' + l.d + ''); - } - - // Legende - var legend = L.control({position: 'bottomright'}); - legend.onAdd = function() { - var div = L.DomUtil.create('div', 'map-legend'); - div.style.cssText = 'background:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);font-size:0.8rem;line-height:1.8;'; - div.innerHTML = 'Legende
' - + ' Angegriffene Ziele
' - + ' Vergeltung / Eskalation
' - + ' Strategische Akteure'; - return div; - }; - legend.addTo(this.map); - - setTimeout(function() { if (Lagebild.map) Lagebild.map.invalidateSize(); }, 300); - }, - - // ===== TAB: FAKTENCHECKS ===== - renderFactChecksTab: function() { - var checks = this.currentView.fact_checks || []; - if (!checks.length) { - document.getElementById('factchecks-content').innerHTML = '

Keine Faktenchecks verfügbar.

'; - return; - } - - // Statistik - 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 h = '
'; - h += '
' + checks.length + 'Gesamt
'; - h += '
' + (stats.confirmed + stats.established) + 'Bestätigt
'; - h += '
' + (stats.unconfirmed + stats.developing) + 'Offen
'; - if (stats.contradicted + stats.disputed > 0) - h += '
' + (stats.contradicted + stats.disputed) + 'Widerlegt
'; - h += '
'; - - // Sortierung: mit History zuerst, dann sources_count - checks = checks.slice().sort(function(a, b) { - var aH = (a.status_history || []).length; - var bH = (b.status_history || []).length; - if (bH !== aH) return bH - aH; - return (b.sources_count || 0) - (a.sources_count || 0); - }); - - for (var i = 0; i < checks.length; i++) { - var fc = checks[i]; - var status = fc.status || 'developing'; - var hasProg = fc.status_history && fc.status_history.length > 1; - - h += '
'; - h += '
'; - h += '' + this.stLabel(status) + ''; - h += '' + (fc.sources_count || 0) + ' unabhängige Quellen'; - h += '
'; - h += '

' + this.esc(this.fixUmlauts(fc.claim || '')) + '

'; - - // Vollständige Evidenz anzeigen - if (fc.evidence) { - var ev = this.fixUmlauts(fc.evidence); - // URLs in der Evidenz klickbar machen - ev = this.esc(ev).replace(/(https?:\/\/[^\s,)]+)/g, '$1'); - h += '
Evidenz: ' + ev + '
'; - } - - // Status-Verlauf - if (hasProg) { - h += '
'; - h += 'Verlauf:'; - for (var j = 0; j < fc.status_history.length; j++) { - var step = fc.status_history[j]; - if (j > 0) h += ''; - h += ''; - h += '' + this.stLabel(step.status) + ''; - if (step.at) h += '' + this.fmtShort(step.at) + ''; - h += ''; - } - h += '
'; - } - h += '
'; - } - document.getElementById('factchecks-content').innerHTML = h; - }, - - // ===== TABS ===== - initTabs: function() { - var btns = document.querySelectorAll('.tab-btn'); - var self = this; - for (var i = 0; i < btns.length; i++) { - btns[i].addEventListener('click', function() { - var tab = this.getAttribute('data-tab'); - for (var j = 0; j < btns.length; j++) btns[j].classList.remove('active'); - 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'); - if (tab === 'karte') self.renderMap(); - }); - } - }, - - initLangToggle: function() { - var btn = document.querySelector('.lang-toggle'); - if (!btn) return; - btn.addEventListener('click', function(e) { - e.preventDefault(); - if (typeof switchLanguage === 'function') { - var cur = (typeof getCurrentLanguage === 'function') ? getCurrentLanguage() : 'de'; - switchLanguage(cur === 'de' ? 'en' : 'de'); - } - }); - }, - - // ===== HILFSFUNKTIONEN ===== - fixUmlauts: function(text) { - if (!text) return text; - var skip = ['Israel','Israelis','Jazeera','Euronews','Reuters','Februar', - 'Juffair','abgefeuert','Feindseligkeiten','Gegenschlag','neuesten', - 'auszuweiten','befeuert','feuerte','Feuer','feuer','neue','neuen', - 'neuer','neues','Neue','Aero','aero','Manoeuvre','Dauerfeuer']; - var ph = []; var c = 0; - for (var i = 0; i < skip.length; i++) { - var re = new RegExp('\\b' + skip[i] + '\\b', 'g'); - text = text.replace(re, function(m) { ph.push(m); return '##S' + (c++) + '##'; }); - } - text = text.replace(/ae/g, '\u00e4').replace(/Ae/g, '\u00c4'); - text = text.replace(/oe/g, '\u00f6').replace(/Oe/g, '\u00d6'); - text = text.replace(/ue/g, '\u00fc').replace(/Ue/g, '\u00dc'); - text = text.replace(/##S(\d+)##/g, function(m, idx) { return ph[parseInt(idx)]; }); - return text; - }, - - stLabel: function(s) { - return {confirmed:'Bestätigt',unconfirmed:'Unbestätigt',established:'Gesichert', - unverified:'Nicht verifiziert',contradicted:'Widerlegt',disputed:'Umstritten', - developing:'In Entwicklung','false':'Falsch'}[s] || s; - }, - - mdToHtml: function(md) { - if (!md) return ''; - var lines = md.split('\n'), html = '', inList = false; - for (var i = 0; i < lines.length; i++) { - var l = lines[i]; - if (/^### (.+)$/.test(l)) { if(inList){html+='';inList=false;} html+='

'+l.replace(/^### /,'')+'

'; continue; } - if (/^## (.+)$/.test(l)) { if(inList){html+='';inList=false;} html+='

'+l.replace(/^## /,'')+'

'; continue; } - if (/^[-*] (.+)$/.test(l)) { if(!inList){html+='
    ';inList=true;} html+='
  • '+l.replace(/^[-*] /,'')+'
  • '; continue; } - if (inList) { html+='
'; inList=false; } - if (l.trim()==='') continue; - html += '

' + l + '

'; - } - if (inList) html += ''; - html = html.replace(/\*\*(.+?)\*\*/g, '$1'); - html = html.replace(/\*(.+?)\*/g, '$1'); - return html; - }, - - esc: function(s) { if(!s)return''; var d=document.createElement('div'); d.textContent=s; return d.innerHTML; }, - truncUrl: function(u) { try{return new URL(u).hostname;}catch(e){return u;} }, - - // Timestamps aus der DB sind UTC, aber ohne Zeitzone-Suffix. - // Diese Funktion haengt 'Z' an falls noetig, damit der Browser korrekt nach CET konvertiert. - toUTC: function(s) { - if (!s) return s; - s = String(s).trim(); - // Hat schon Zeitzone (+00:00, Z, +01:00 etc.)? Dann nichts tun. - if (/[Zz]$/.test(s) || /[+-]\d{2}:?\d{2}$/.test(s)) return s; - // "2026-03-07 00:42:01" -> "2026-03-07T00:42:01Z" - return s.replace(' ', 'T') + 'Z'; - }, - - fmtDT: function(iso) { - if (!iso) return ''; - try { - var d = new Date(this.toUTC(iso)); - if (isNaN(d.getTime())) return iso; - var opts = {timeZone:TIMEZONE, weekday:'long', day:'numeric', month:'long', year:'numeric', hour:'2-digit', minute:'2-digit', hour12:false}; - var parts = new Intl.DateTimeFormat('de-DE', opts).formatToParts(d); - var p = {}; - parts.forEach(function(x){ p[x.type] = x.value; }); - return p.weekday + ', ' + p.day + '. ' + p.month + ' ' + p.year - + ' um ' + p.hour + ':' + p.minute + ' Uhr'; - } 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}); } - catch(e) { return iso; } - }, - - showError: function() { - document.getElementById('summary-content').innerHTML = - '

Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es sp\u00e4ter erneut.

'; - } -}; - -document.addEventListener('DOMContentLoaded', function() { Lagebild.init(); }); +/** + * AegisSight Lagebild Page - Dark Theme Design Refresh + * Count-Up, Timeline, Scroll-Reveal, Smooth-Scroll, Favicons + */ + +/** Feste Zeitzone fuer alle Anzeigen — NIEMALS aendern. */ +var TIMEZONE = 'Europe/Berlin'; + +var Lagebild = { + data: null, + allSnapshots: {}, + currentView: null, + map: null, + + /* ===== Inline SVG Icons ===== */ + icons: { + clock: '', + fileText: '', + globe: '', + shieldCheck: '', + checkCircle: '', + helpCircle: '', + xCircle: '', + externalLink: '' + }, + + async init() { + if (typeof initTranslations === 'function') { + try { initTranslations(); } catch(e) {} + } + try { + var resp = await fetch('data/current.json?t=' + Date.now()); + if (!resp.ok) throw new Error('HTTP ' + resp.status); + this.data = await resp.json(); + this.currentView = { + summary: this.data.current_lagebild.summary_markdown, + sources_json: this.data.current_lagebild.sources_json, + updated_at: this.data.current_lagebild.updated_at || this.data.generated_at, + articles: this.data.articles, + fact_checks: this.data.fact_checks + }; + this.render(); + this.initTabs(); + this.initLangToggle(); + this.initSmoothScroll(); + this.initScrollReveal(); + } catch (e) { + console.error('Lagebild laden fehlgeschlagen:', e); + this.showError(); + } + }, + + render: function() { + this.renderHero(); + this.renderTimeline(); + this.renderTabBadges(); + this.renderCurrentView(); + }, + + /* ===== HERO ===== */ + renderHero: function() { + var d = this.data; + document.getElementById('incident-title').textContent = this.fixUmlauts(d.incident.title); + + // Stat Cards + var statsHtml = ''; + statsHtml += this.statCard(this.icons.clock, this.fmtDateOnly(d.generated_at), 'Stand'); + statsHtml += this.statCard(this.icons.fileText, '0', 'Artikel'); + statsHtml += this.statCard(this.icons.globe, '0', 'Quellen'); + 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() { + var els = document.querySelectorAll('.count-up'); + for (var i = 0; i < els.length; i++) { + self.animateCount(els[i], parseInt(els[i].getAttribute('data-target')), 800); + } + }); + }, + + statCard: function(icon, value, label) { + return '
' + + '
' + icon + '
' + + '
' + + '' + value + '' + + '' + label + '' + + '
'; + }, + + /* ===== COUNT-UP ANIMATION ===== */ + animateCount: function(element, target, duration) { + var start = performance.now(); + function update(now) { + var elapsed = now - start; + var progress = Math.min(elapsed / duration, 1); + var eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic + var current = Math.round(target * eased); + element.textContent = current.toLocaleString('de-DE'); + if (progress < 1) { + requestAnimationFrame(update); + } + } + requestAnimationFrame(update); + }, + + /* ===== TIMELINE STRIP ===== */ + renderTimeline: function() { + var snaps = this.data.available_snapshots || []; + var current = { + id: 'current', + article_count: this.data.incident.article_count, + fact_check_count: this.data.incident.factcheck_count, + created_at: this.data.generated_at + }; + var all = [current].concat(snaps); + + // Group by date + var groups = {}; + for (var i = 0; i < all.length; i++) { + var s = all[i]; + var dateKey = this.toDateKey(s.created_at); + if (!groups[dateKey]) groups[dateKey] = []; + groups[dateKey].push(s); + } + + // Sort each group descending (newest first) + for (var dk in groups) { + groups[dk].sort(function(a, b) { + return new Date(Lagebild.toUTC(b.created_at)) - new Date(Lagebild.toUTC(a.created_at)); + }); + } + + var dates = Object.keys(groups).sort(); + var strip = document.getElementById('timeline-strip'); + var h = ''; + + for (var j = 0; j < dates.length; j++) { + var date = dates[j]; + var daySnaps = groups[date]; + var latest = daySnaps[0]; + var isActive = (j === dates.length - 1); + var d = new Date(date + 'T12:00:00Z'); + + h += ''; + } + + strip.innerHTML = h; + + // Scroll to active day + var active = strip.querySelector('.timeline-day.active'); + if (active) { + setTimeout(function() { + active.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' }); + }, 150); + } + + // Click handler + var self = this; + strip.addEventListener('click', function(e) { + var btn = e.target.closest('.timeline-day'); + if (!btn) return; + + var allDays = strip.querySelectorAll('.timeline-day'); + for (var k = 0; k < allDays.length; k++) allDays[k].classList.remove('active'); + btn.classList.add('active'); + + var snapId = btn.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)); + } + }); + }, + + toDateKey: function(iso) { + if (!iso) return ''; + var d = new Date(this.toUTC(iso)); + return d.toLocaleDateString('en-CA', { timeZone: TIMEZONE }); + }, + + /* ===== TAB BADGES ===== */ + renderTabBadges: function() { + var quellenBadge = document.getElementById('tab-badge-quellen'); + var fcBadge = document.getElementById('tab-badge-faktenchecks'); + if (quellenBadge) quellenBadge.textContent = this.data.incident.source_count; + if (fcBadge) fcBadge.textContent = this.data.incident.factcheck_count; + }, + + /* ===== SNAPSHOT LOADING ===== */ + loadSnapshot: async function(id) { + if (this.allSnapshots[id]) { + this.currentView = this.allSnapshots[id]; + this.renderCurrentView(); + return; + } + try { + var resp = await fetch('data/snapshot-' + id + '.json'); + if (!resp.ok) throw new Error('HTTP ' + resp.status); + var sd = await resp.json(); + var sj = sd.sources_json; + if (typeof sj === 'string') { try { sj = JSON.parse(sj); } catch(e) { sj = []; } } + this.currentView = { + summary: sd.summary, + sources_json: sj || [], + updated_at: sd.created_at, + articles: this.data.articles, + fact_checks: this.data.fact_checks + }; + this.allSnapshots[id] = this.currentView; + this.renderCurrentView(); + } catch (e) { console.error('Snapshot Fehler:', e); } + }, + + renderCurrentView: function() { + this.renderSummary(); + this.renderInlineSources(); + this.renderSourcesTab(); + this.renderArticlesTab(); + this.renderFactChecksTab(); + if (document.getElementById('panel-karte').classList.contains('active')) { + this.renderMap(); + } + }, + + /* ===== TAB: LAGEBILD ===== */ + renderSummary: function() { + var v = this.currentView; + document.getElementById('lagebild-timestamp').textContent = this.fmtDT(v.updated_at); + var md = this.fixUmlauts(v.summary || ''); + var html = this.mdToHtml(md); + html = html.replace(/\[(\d+)\]/g, '[$1]'); + document.getElementById('summary-content').innerHTML = html; + }, + + renderInlineSources: function() { + var sources = this.currentView.sources_json || []; + if (!sources.length) { document.getElementById('inline-sources').innerHTML = ''; return; } + var h = '

Quellenverzeichnis

'; + h += '
    '; + for (var i = 0; i < sources.length; i++) { + var s = sources[i]; + h += '
  • [' + s.nr + ']'; + h += '' + this.esc(s.name || '') + ''; + if (s.url) h += ' — ' + this.esc(s.url) + ''; + h += '
  • '; + } + h += '
'; + document.getElementById('inline-sources').innerHTML = h; + }, + + /* ===== TAB: QUELLEN ===== */ + renderSourcesTab: function() { + var sources = this.currentView.sources_json || []; + var articles = this.currentView.articles || []; + var h = ''; + + h += '

Im Lagebild zitierte Quellen (' + sources.length + ')

'; + if (sources.length) { + h += '
    '; + for (var i = 0; i < sources.length; i++) { + var s = sources[i]; + h += '
  1. ' + this.esc(s.name || '') + ''; + if (s.url) h += ' — ' + this.esc(s.url) + ''; + h += '
  2. '; + } + h += '
'; + } + h += '
'; + document.getElementById('sources-cited').innerHTML = h; + + document.getElementById('articles-heading').textContent = 'Alle gesammelten Artikel (' + articles.length + ')'; + var ah = ''; + for (var i = 0; i < articles.length; i++) { + var a = articles[i]; + var dt = a.published_at || a.collected_at || ''; + var dObj = dt ? new Date(this.toUTC(dt)) : null; + var hl = this.fixUmlauts(a.headline_de || a.headline || ''); + var domain = this.extractDomain(a.source_url); + + ah += '
'; + ah += '
'; + } + document.getElementById('articles-content').innerHTML = ah; + }, + + renderArticlesTab: function() {}, + + /* ===== TAB: KARTE ===== */ + renderMap: function() { + if (this.map) { this.map.remove(); this.map = null; } + this.map = L.map('map-container').setView([33.0, 48.0], 5); + + // Dark map tiles (CartoDB Dark Matter) + L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { + attribution: '© OpenStreetMap © CARTO', + maxZoom: 19, + subdomains: 'abcd' + }).addTo(this.map); + + var redIcon = L.icon({ + iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', + shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', + iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] + }); + var blueIcon = L.icon({ + iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png', + shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', + iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] + }); + var orangeIcon = L.icon({ + iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png', + shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png', + iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] + }); + + var locs = [ + {n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschläge. Über 1.000 Tote nach fünf Tagen Krieg.',ic:redIcon}, + {n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschläge auf Beirut und Teheran [6].',ic:redIcon}, + {n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis — Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon}, + {n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenstützpunkt — Ziel iranischer Gegenangriffe.',ic:orangeIcon}, + {n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis für israelische Angriffe auf den Iran.',ic:blueIcon}, + {n:'Ankara, Türkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf Türkei [10]. Keine NATO-Beteiligung geplant.',ic:orangeIcon}, + {n:'Bagdad, Irak',lat:33.3152,lng:44.3661,d:'Lage im Irak als Faktor im Kriegsverlauf [2].',ic:blueIcon}, + {n:'Persischer Golf',lat:27.0,lng:51.5,d:'Iran greift Energieinfrastruktur und diplomatische Einrichtungen in der Golfregion an.',ic:orangeIcon}, + {n:'Dubai, VAE',lat:25.2048,lng:55.2708,d:'US-Botschaft in Dubai durch iranischen Angriff getroffen.',ic:redIcon}, + {n:'Washington D.C., USA',lat:38.9072,lng:-77.0369,d:'War-Powers-Abstimmung im Senat gescheitert (47:53). Trump verteidigt Iran-Krieg vor Kongress.',ic:blueIcon} + ]; + + for (var i = 0; i < locs.length; i++) { + var l = locs[i]; + L.marker([l.lat, l.lng], { icon: l.ic }) + .addTo(this.map) + .bindPopup('' + l.n + '
' + l.d + ''); + } + + // Dark legend + var legend = L.control({ position: 'bottomright' }); + legend.onAdd = function() { + var div = L.DomUtil.create('div', 'map-legend'); + div.style.cssText = 'background:#151D2E;padding:10px 14px;border-radius:4px;border:1px solid #1E2D45;box-shadow:0 2px 8px rgba(0,0,0,0.3);font-size:0.8rem;line-height:1.8;color:#E8ECF4;'; + div.innerHTML = 'Legende
' + + ' Angegriffene Ziele
' + + ' Vergeltung / Eskalation
' + + ' Strategische Akteure'; + return div; + }; + 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); + + setTimeout(function() { if (Lagebild.map) Lagebild.map.invalidateSize(); }, 300); + }, + + /* ===== TAB: FAKTENCHECKS ===== */ + renderFactChecksTab: function() { + var checks = this.currentView.fact_checks || []; + if (!checks.length) { + document.getElementById('factchecks-content').innerHTML = '

Keine Faktenchecks verfügbar.

'; + return; + } + + 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 h = '
'; + h += '
' + checks.length + 'Gesamt
'; + h += '
' + (stats.confirmed + stats.established) + 'Bestätigt
'; + h += '
' + (stats.unconfirmed + stats.developing) + 'Offen
'; + if (stats.contradicted + stats.disputed > 0) + h += '
' + (stats.contradicted + stats.disputed) + 'Widerlegt
'; + h += '
'; + + checks = checks.slice().sort(function(a, b) { + var aH = (a.status_history || []).length; + var bH = (b.status_history || []).length; + if (bH !== aH) return bH - aH; + return (b.sources_count || 0) - (a.sources_count || 0); + }); + + for (var i = 0; i < checks.length; i++) { + var fc = checks[i]; + var status = fc.status || 'developing'; + var hasProg = fc.status_history && fc.status_history.length > 1; + + h += '
'; + h += '
'; + h += '' + this.stLabel(status) + ''; + h += '' + (fc.sources_count || 0) + ' unabhängige Quellen'; + h += '
'; + h += '

' + this.esc(this.fixUmlauts(fc.claim || '')) + '

'; + + if (fc.evidence) { + var ev = this.fixUmlauts(fc.evidence); + ev = this.esc(ev).replace(/(https?:\/\/[^\s,)]+)/g, '$1'); + h += '
Evidenz: ' + ev + '
'; + } + + if (hasProg) { + h += '
'; + h += 'Verlauf:'; + for (var j = 0; j < fc.status_history.length; j++) { + var step = fc.status_history[j]; + if (j > 0) h += ''; + h += ''; + h += '' + this.stLabel(step.status) + ''; + if (step.at) h += '' + this.fmtShort(step.at) + ''; + h += ''; + } + h += '
'; + } + h += '
'; + } + document.getElementById('factchecks-content').innerHTML = h; + }, + + /* ===== TABS ===== */ + initTabs: function() { + var btns = document.querySelectorAll('.tab-btn'); + var self = this; + for (var i = 0; i < btns.length; i++) { + btns[i].addEventListener('click', function() { + var tab = this.getAttribute('data-tab'); + for (var j = 0; j < btns.length; j++) btns[j].classList.remove('active'); + 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'); + if (tab === 'karte') self.renderMap(); + }); + } + }, + + initLangToggle: function() { + var btn = document.querySelector('.lang-toggle'); + if (!btn) return; + btn.addEventListener('click', function(e) { + e.preventDefault(); + if (typeof switchLanguage === 'function') { + var cur = (typeof getCurrentLanguage === 'function') ? getCurrentLanguage() : 'de'; + switchLanguage(cur === 'de' ? 'en' : 'de'); + } + }); + }, + + /* ===== SMOOTH SCROLL FOR CITATIONS ===== */ + initSmoothScroll: function() { + document.addEventListener('click', function(e) { + var link = e.target.closest('.citation-ref'); + if (!link) return; + e.preventDefault(); + var href = link.getAttribute('href'); + if (!href) return; + var targetId = href.substring(1); + var target = document.getElementById(targetId); + if (!target) return; + + target.scrollIntoView({ behavior: 'smooth', block: 'center' }); + target.classList.add('source-highlight'); + setTimeout(function() { + target.classList.remove('source-highlight'); + }, 1500); + }); + }, + + /* ===== SCROLL REVEAL ===== */ + 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; + } + var observer = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.1 }); + + for (var i = 0; i < cards.length; i++) { + cards[i].classList.add('reveal'); + observer.observe(cards[i]); + } + }, + + /* ===== HILFSFUNKTIONEN ===== */ + extractDomain: function(url) { + if (!url) return null; + try { return new URL(url).hostname; } catch(e) { return null; } + }, + + fixUmlauts: function(text) { + if (!text) return text; + var skip = ['Israel','Israelis','Jazeera','Euronews','Reuters','Februar', + 'Juffair','abgefeuert','Feindseligkeiten','Gegenschlag','neuesten', + 'auszuweiten','befeuert','feuerte','Feuer','feuer','neue','neuen', + 'neuer','neues','Neue','Aero','aero','Manoeuvre','Dauerfeuer']; + var ph = []; var c = 0; + for (var i = 0; i < skip.length; i++) { + var re = new RegExp('\\b' + skip[i] + '\\b', 'g'); + text = text.replace(re, function(m) { ph.push(m); return '##S' + (c++) + '##'; }); + } + text = text.replace(/ae/g, '\u00e4').replace(/Ae/g, '\u00c4'); + text = text.replace(/oe/g, '\u00f6').replace(/Oe/g, '\u00d6'); + text = text.replace(/ue/g, '\u00fc').replace(/Ue/g, '\u00dc'); + text = text.replace(/##S(\d+)##/g, function(m, idx) { return ph[parseInt(idx)]; }); + return text; + }, + + stLabel: function(s) { + return { confirmed: 'Bestätigt', unconfirmed: 'Unbestätigt', established: 'Gesichert', + unverified: 'Nicht verifiziert', contradicted: 'Widerlegt', disputed: 'Umstritten', + developing: 'In Entwicklung', 'false': 'Falsch' }[s] || s; + }, + + mdToHtml: function(md) { + if (!md) return ''; + var lines = md.split('\n'), html = '', inList = false; + for (var i = 0; i < lines.length; i++) { + var l = lines[i]; + if (/^### (.+)$/.test(l)) { if (inList) { html += ''; inList = false; } html += '

' + l.replace(/^### /, '') + '

'; continue; } + if (/^## (.+)$/.test(l)) { if (inList) { html += ''; inList = false; } html += '

' + l.replace(/^## /, '') + '

'; continue; } + if (/^[-*] (.+)$/.test(l)) { if (!inList) { html += '
    '; inList = true; } html += '
  • ' + l.replace(/^[-*] /, '') + '
  • '; continue; } + if (inList) { html += '
'; inList = false; } + if (l.trim() === '') continue; + html += '

' + l + '

'; + } + if (inList) html += ''; + html = html.replace(/\*\*(.+?)\*\*/g, '$1'); + html = html.replace(/\*(.+?)\*/g, '$1'); + return html; + }, + + esc: function(s) { if (!s) return ''; var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }, + + toUTC: function(s) { + if (!s) return s; + s = String(s).trim(); + if (/[Zz]$/.test(s) || /[+-]\d{2}:?\d{2}$/.test(s)) return s; + return s.replace(' ', 'T') + 'Z'; + }, + + fmtDT: function(iso) { + if (!iso) return ''; + try { + var d = new Date(this.toUTC(iso)); + if (isNaN(d.getTime())) return iso; + var opts = { timeZone: TIMEZONE, weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }; + var parts = new Intl.DateTimeFormat('de-DE', opts).formatToParts(d); + var p = {}; + parts.forEach(function(x) { p[x.type] = x.value; }); + return p.weekday + ', ' + p.day + '. ' + p.month + ' ' + p.year + + ' um ' + p.hour + ':' + p.minute + ' Uhr'; + } catch(e) { return iso; } + }, + + fmtDateOnly: function(iso) { + if (!iso) return ''; + try { + var d = new Date(this.toUTC(iso)); + if (isNaN(d.getTime())) return iso; + return d.toLocaleDateString('de-DE', { day: 'numeric', month: 'short', year: 'numeric', 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 }); } + catch(e) { return iso; } + }, + + showError: function() { + document.getElementById('summary-content').innerHTML = + '

Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es später erneut.

'; + } +}; + +document.addEventListener('DOMContentLoaded', function() { Lagebild.init(); });