Lagebild: Tab-Navigation wiederhergestellt (Revert Scroll-Narrative)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
@@ -66,22 +66,28 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Control Bar: Timeline + Section Nav -->
|
||||
<div class="control-bar" id="control-bar">
|
||||
<!-- Control Bar: Timeline + Tabs -->
|
||||
<div class="control-bar">
|
||||
<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>
|
||||
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
|
||||
<button class="tab-btn" data-tab="karte">Karte</button>
|
||||
<button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content: All sections visible (Scroll-Narrative) -->
|
||||
<!-- Main Content -->
|
||||
<main class="lagebild-main">
|
||||
<!-- Section: Lagebild -->
|
||||
<div class="container">
|
||||
<section id="section-lagebild" class="content-section">
|
||||
<div class="content-card">
|
||||
<!-- Tab: Lagebild -->
|
||||
<div class="tab-panel active" id="panel-lagebild">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2 id="lagebild-date-title">Lagebild</h2>
|
||||
<span class="card-timestamp" id="lagebild-timestamp"></span>
|
||||
@@ -94,43 +100,49 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" id="inline-sources"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Quellen -->
|
||||
<div class="tab-panel" id="panel-quellen">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Quellen & Quellenberichte</h2>
|
||||
<p class="card-description">Alle vom AegisSight Monitor aggregierten Quellen und Artikel</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="sources-cited" class="sources-section"></div>
|
||||
<h3 class="section-subtitle" id="articles-heading">Alle Artikel</h3>
|
||||
<div id="articles-content"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Section: Karte (full-width) -->
|
||||
<section id="section-karte" class="content-section section-karte">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<!-- Tab: Karte -->
|
||||
<div class="tab-panel" id="panel-karte">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Karte</h2>
|
||||
<p class="section-description">Geografische Einordnung der Meldungen</p>
|
||||
<p class="card-description">Geografische Einordnung der Meldungen</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div>
|
||||
</div>
|
||||
<div id="map-container"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Section: Faktenchecks -->
|
||||
<div class="container">
|
||||
<section id="section-faktenchecks" class="content-section">
|
||||
<div class="content-card">
|
||||
<!-- Tab: Faktenchecks -->
|
||||
<div class="tab-panel" id="panel-faktenchecks">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Faktenchecks</h2>
|
||||
<p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen</p>
|
||||
</div>
|
||||
<div class="card-body" id="factchecks-content"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Section: Artikel -->
|
||||
<section id="section-artikel" class="content-section">
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<h2 id="articles-heading">Artikel</h2>
|
||||
<p class="card-description">Alle vom AegisSight Monitor aggregierten Artikel</p>
|
||||
</div>
|
||||
<div class="card-body" id="articles-content"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* ==========================================================================
|
||||
AegisSight Lagebild Page - Dark Theme / Scroll-Narrative
|
||||
AegisSight Lagebild Page - Dark Theme Design Refresh
|
||||
========================================================================== */
|
||||
|
||||
/* ---------- Variables ---------- */
|
||||
@@ -211,7 +211,7 @@
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ---------- Control Bar (Sticky) ---------- */
|
||||
/* ---------- Control Bar ---------- */
|
||||
.control-bar {
|
||||
background: var(--lb-bg-card);
|
||||
border-bottom: 1px solid var(--lb-border);
|
||||
@@ -376,19 +376,56 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ---------- Main Content ---------- */
|
||||
.lagebild-main {
|
||||
padding: 2rem 0 4rem;
|
||||
/* Tab Navigation */
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
.lagebild-main > .container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ---------- Content Sections ---------- */
|
||||
.content-section {
|
||||
margin-bottom: 3rem;
|
||||
/* 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 ---------- */
|
||||
@@ -443,34 +480,6 @@
|
||||
padding-top: 20px;
|
||||
margin: 0 32px;
|
||||
}
|
||||
.card-footer:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---------- Karte Section (Full-Width) ---------- */
|
||||
.section-karte {
|
||||
padding: 0;
|
||||
}
|
||||
.section-karte .section-heading {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.section-karte .section-heading h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--lb-text);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.section-description {
|
||||
font-size: 0.85rem;
|
||||
color: var(--lb-text-sec);
|
||||
margin: 0;
|
||||
}
|
||||
#map-container {
|
||||
height: 500px;
|
||||
background: var(--lb-bg-secondary);
|
||||
border-top: 1px solid var(--lb-border);
|
||||
border-bottom: 1px solid var(--lb-border);
|
||||
}
|
||||
|
||||
/* ---------- Lagebild Summary ---------- */
|
||||
#summary-content {
|
||||
@@ -534,6 +543,113 @@
|
||||
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;
|
||||
columns: 2;
|
||||
column-gap: 24px;
|
||||
}
|
||||
.sources-list li {
|
||||
counter-increment: src;
|
||||
padding: 4px 0;
|
||||
font-size: 0.88rem;
|
||||
color: var(--lb-text);
|
||||
break-inside: avoid;
|
||||
}
|
||||
.sources-list li::before {
|
||||
content: "[" counter(src) "]";
|
||||
color: var(--lb-accent);
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.sources-list a {
|
||||
color: var(--lb-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
.sources-list a:hover { text-decoration: underline; }
|
||||
.source-name {
|
||||
font-weight: 600;
|
||||
color: var(--lb-text);
|
||||
}
|
||||
|
||||
/* Inline sources (Lagebild tab footer) - Collapsible */
|
||||
.inline-sources-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--lb-text-sec);
|
||||
cursor: pointer;
|
||||
padding: 10px 16px;
|
||||
user-select: none;
|
||||
transition: all 0.2s;
|
||||
background: var(--lb-bg-secondary);
|
||||
border: 1px solid var(--lb-border);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
}
|
||||
.inline-sources-toggle:hover {
|
||||
color: var(--lb-accent);
|
||||
border-color: rgba(200, 168, 81, 0.4);
|
||||
background: rgba(200, 168, 81, 0.06);
|
||||
}
|
||||
.inline-sources-arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 1.1rem;
|
||||
transition: transform 0.2s;
|
||||
color: var(--lb-accent);
|
||||
}
|
||||
#inline-sources.open .inline-sources-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.inline-sources-body {
|
||||
display: none;
|
||||
padding: 8px 0 0;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.8;
|
||||
color: var(--lb-text-sec);
|
||||
}
|
||||
#inline-sources.open .inline-sources-body {
|
||||
display: block;
|
||||
}
|
||||
.src-inline .src-nr {
|
||||
color: var(--lb-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.src-sep {
|
||||
color: var(--lb-border);
|
||||
margin: 0 2px;
|
||||
}
|
||||
.inline-sources-body a {
|
||||
color: var(--lb-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
.inline-sources-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ---------- Article Cards ---------- */
|
||||
.article-card {
|
||||
display: flex;
|
||||
@@ -621,29 +737,10 @@
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* Show All Button */
|
||||
.show-all-wrapper {
|
||||
text-align: center;
|
||||
padding: 24px 0 8px;
|
||||
}
|
||||
.show-all-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 28px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--lb-accent);
|
||||
color: var(--lb-accent);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.show-all-btn:hover {
|
||||
background: rgba(200, 168, 81, 0.1);
|
||||
}
|
||||
|
||||
/* ---------- Map ---------- */
|
||||
#map-container {
|
||||
background: var(--lb-bg-secondary);
|
||||
}
|
||||
.lagebild-page .map-legend {
|
||||
background: var(--lb-bg-card) !important;
|
||||
color: var(--lb-text) !important;
|
||||
@@ -1044,13 +1141,14 @@
|
||||
padding: 5px 10px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.section-nav {
|
||||
.tab-nav {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.section-nav-link {
|
||||
.tab-btn {
|
||||
padding: 10px 14px;
|
||||
font-size: 0.82rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -1064,13 +1162,7 @@
|
||||
padding: 16px 20px 20px;
|
||||
}
|
||||
.lagebild-main {
|
||||
padding: 1rem 0 3rem;
|
||||
}
|
||||
.lagebild-main > .container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.content-section {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 12px 3rem;
|
||||
}
|
||||
.factcheck-header {
|
||||
flex-direction: column;
|
||||
@@ -1105,7 +1197,7 @@
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.section-karte .section-heading {
|
||||
margin-bottom: 1rem;
|
||||
.sources-list {
|
||||
columns: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* AegisSight Lagebild Page - Dark Theme / Scroll-Narrative
|
||||
* Count-Up, Timeline, Scroll-Spy, Scroll-Reveal, Favicons
|
||||
* AegisSight Lagebild Page - Dark Theme Design Refresh
|
||||
* Count-Up, Timeline mit Dropdown, Scroll-Reveal, Smooth-Scroll, Favicons
|
||||
*/
|
||||
|
||||
/** Feste Zeitzone fuer alle Anzeigen - NIEMALS aendern. */
|
||||
@@ -12,7 +12,6 @@ var Lagebild = {
|
||||
currentView: null,
|
||||
map: null,
|
||||
timelineGroups: null,
|
||||
articlesShowAll: false,
|
||||
|
||||
/* ===== Inline SVG Icons ===== */
|
||||
icons: {
|
||||
@@ -39,6 +38,7 @@ var Lagebild = {
|
||||
fact_checks: this.data.fact_checks
|
||||
};
|
||||
this.render();
|
||||
this.initTabs();
|
||||
this.initLangToggle();
|
||||
this.initScrollReveal();
|
||||
this.initFloatingCta();
|
||||
@@ -51,7 +51,7 @@ var Lagebild = {
|
||||
render: function() {
|
||||
this.renderHero();
|
||||
this.renderTimeline();
|
||||
this.renderSectionBadges();
|
||||
this.renderTabBadges();
|
||||
this.renderCurrentView();
|
||||
},
|
||||
|
||||
@@ -60,7 +60,7 @@ var Lagebild = {
|
||||
var d = this.data;
|
||||
document.getElementById('incident-title').innerHTML =
|
||||
this.esc(this.fixUmlauts(d.incident.title)) +
|
||||
' <span class="hero-date-info">\u2013 Stand: ' + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + ' Uhr</span>';
|
||||
' <span class="hero-date-info">- Stand: ' + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + ' Uhr</span>';
|
||||
|
||||
// Stat Cards (3: Artikel, Quellen, Faktenchecks)
|
||||
var statsHtml = '';
|
||||
@@ -204,7 +204,7 @@ var Lagebild = {
|
||||
}
|
||||
});
|
||||
|
||||
// Click handler for dropdown snapshot items (delegated)
|
||||
// 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');
|
||||
@@ -249,7 +249,7 @@ var Lagebild = {
|
||||
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 + ' \u2013 ' + snaps.length + ' Updates</div>';
|
||||
var h = '<div class="timeline-dropdown-header">' + dateLabel + ' - ' + snaps.length + ' Updates</div>';
|
||||
h += '<div class="timeline-snap-list">';
|
||||
for (var i = 0; i < snaps.length; i++) {
|
||||
var snap = snaps[i];
|
||||
@@ -272,11 +272,11 @@ var Lagebild = {
|
||||
return d.toLocaleDateString('en-CA', { timeZone: TIMEZONE });
|
||||
},
|
||||
|
||||
/* ===== SECTION BADGES ===== */
|
||||
renderSectionBadges: function() {
|
||||
var artikelBadge = document.getElementById('badge-artikel');
|
||||
var fcBadge = document.getElementById('badge-faktenchecks');
|
||||
if (artikelBadge) artikelBadge.textContent = this.data.incident.article_count;
|
||||
/* ===== 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;
|
||||
},
|
||||
|
||||
@@ -308,12 +308,15 @@ var Lagebild = {
|
||||
renderCurrentView: function() {
|
||||
this.renderSummary();
|
||||
this.renderInlineSources();
|
||||
this.renderArtikelSection();
|
||||
this.renderSourcesTab();
|
||||
this.renderArticlesTab();
|
||||
this.renderFactChecksTab();
|
||||
if (!this.map) this.renderMap();
|
||||
if (document.getElementById('panel-karte').classList.contains('active')) {
|
||||
this.renderMap();
|
||||
}
|
||||
},
|
||||
|
||||
/* ===== SECTION: LAGEBILD ===== */
|
||||
/* ===== TAB: LAGEBILD ===== */
|
||||
renderSummary: function() {
|
||||
var v = this.currentView;
|
||||
document.getElementById('lagebild-timestamp').textContent = this.fmtDT(v.updated_at);
|
||||
@@ -342,18 +345,32 @@ var Lagebild = {
|
||||
document.getElementById('inline-sources').innerHTML = '';
|
||||
},
|
||||
|
||||
/* ===== SECTION: ARTIKEL ===== */
|
||||
renderArtikelSection: function() {
|
||||
/* ===== TAB: QUELLEN ===== */
|
||||
renderSourcesTab: function() {
|
||||
var sources = this.currentView.sources_json || [];
|
||||
var articles = this.currentView.articles || [];
|
||||
var limit = 20;
|
||||
var showAll = this.articlesShowAll || articles.length <= limit;
|
||||
var displayArticles = showAll ? articles : articles.slice(0, limit);
|
||||
var h = '';
|
||||
|
||||
document.getElementById('articles-heading').textContent = 'Artikel (' + articles.length + ')';
|
||||
h += '<div class="sources-section"><h3>Im Lagebild zitierte Quellen (' + sources.length + ')</h3>';
|
||||
if (sources.length) {
|
||||
h += '<ol class="sources-list">';
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var s = sources[i];
|
||||
if (s.url) {
|
||||
h += '<li><a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.name || '') + '</a></li>';
|
||||
} else {
|
||||
h += '<li><span class="source-name">' + this.esc(s.name || '') + '</span></li>';
|
||||
}
|
||||
}
|
||||
h += '</ol>';
|
||||
}
|
||||
h += '</div>';
|
||||
document.getElementById('sources-cited').innerHTML = h;
|
||||
|
||||
document.getElementById('articles-heading').textContent = 'Alle gesammelten Artikel (' + articles.length + ')';
|
||||
var ah = '';
|
||||
for (var i = 0; i < displayArticles.length; i++) {
|
||||
var a = displayArticles[i];
|
||||
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 || '');
|
||||
@@ -381,25 +398,12 @@ var Lagebild = {
|
||||
if (a.source_url) ah += '<a class="article-link" href="' + this.esc(a.source_url) + '" target="_blank" rel="noopener">Artikel lesen ' + this.icons.externalLink + '</a>';
|
||||
ah += '</div></div></div>';
|
||||
}
|
||||
|
||||
if (!showAll) {
|
||||
ah += '<div class="show-all-wrapper">';
|
||||
ah += '<button class="show-all-btn" id="show-all-articles">Alle ' + articles.length + ' Artikel anzeigen</button>';
|
||||
ah += '</div>';
|
||||
}
|
||||
|
||||
document.getElementById('articles-content').innerHTML = ah;
|
||||
|
||||
if (!showAll) {
|
||||
var self = this;
|
||||
document.getElementById('show-all-articles').addEventListener('click', function() {
|
||||
self.articlesShowAll = true;
|
||||
self.renderArtikelSection();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* ===== SECTION: KARTE ===== */
|
||||
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);
|
||||
@@ -428,12 +432,12 @@ var Lagebild = {
|
||||
});
|
||||
|
||||
var locs = [
|
||||
{n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschl\u00e4ge. \u00dcber 1.000 Tote nach f\u00fcnf Tagen Krieg.',ic:redIcon},
|
||||
{n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschl\u00e4ge auf Beirut und Teheran [6].',ic:redIcon},
|
||||
{n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis \u2013 Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon},
|
||||
{n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenst\u00fctzpunkt \u2013 Ziel iranischer Gegenangriffe.',ic:orangeIcon},
|
||||
{n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis f\u00fcr israelische Angriffe auf den Iran.',ic:blueIcon},
|
||||
{n:'Ankara, T\u00fcrkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf T\u00fcrkei [10]. Keine NATO-Beteiligung geplant.',ic:orangeIcon},
|
||||
{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},
|
||||
@@ -471,11 +475,11 @@ var Lagebild = {
|
||||
setTimeout(function() { if (Lagebild.map) Lagebild.map.invalidateSize(); }, 300);
|
||||
},
|
||||
|
||||
/* ===== SECTION: FAKTENCHECKS ===== */
|
||||
/* ===== TAB: FAKTENCHECKS ===== */
|
||||
renderFactChecksTab: function() {
|
||||
var checks = this.currentView.fact_checks || [];
|
||||
if (!checks.length) {
|
||||
document.getElementById('factchecks-content').innerHTML = '<p style="color:#8896AB">Keine Faktenchecks verf\u00fcgbar.</p>';
|
||||
document.getElementById('factchecks-content').innerHTML = '<p style="color:#8896AB">Keine Faktenchecks verfügbar.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -487,7 +491,7 @@ var Lagebild = {
|
||||
|
||||
var h = '<div class="fc-stats">';
|
||||
h += '<div class="fc-stat"><span class="fc-stat-num">' + checks.length + '</span><span class="fc-stat-label">Gesamt</span></div>';
|
||||
h += '<div class="fc-stat confirmed"><span class="fc-stat-num">' + (stats.confirmed + stats.established) + '</span><span class="fc-stat-label">Best\u00e4tigt</span></div>';
|
||||
h += '<div class="fc-stat confirmed"><span class="fc-stat-num">' + (stats.confirmed + stats.established) + '</span><span class="fc-stat-label">Bestätigt</span></div>';
|
||||
h += '<div class="fc-stat unconfirmed"><span class="fc-stat-num">' + (stats.unconfirmed + stats.developing) + '</span><span class="fc-stat-label">Offen</span></div>';
|
||||
if (stats.contradicted + stats.disputed > 0)
|
||||
h += '<div class="fc-stat contradicted"><span class="fc-stat-num">' + (stats.contradicted + stats.disputed) + '</span><span class="fc-stat-label">Widerlegt</span></div>';
|
||||
@@ -508,7 +512,7 @@ var Lagebild = {
|
||||
h += '<div class="factcheck-card' + (hasProg ? ' highlight' : '') + '" data-status="' + status + '">';
|
||||
h += '<div class="factcheck-header">';
|
||||
h += '<span class="status-badge ' + status + '">' + this.stLabel(status) + '</span>';
|
||||
h += '<span class="factcheck-sources">' + (fc.sources_count || 0) + ' unabh\u00e4ngige Quellen</span>';
|
||||
h += '<span class="factcheck-sources">' + (fc.sources_count || 0) + ' unabhängige Quellen</span>';
|
||||
h += '</div>';
|
||||
h += '<p class="factcheck-claim">' + this.esc(this.fixUmlauts(fc.claim || '')) + '</p>';
|
||||
|
||||
@@ -536,7 +540,30 @@ var Lagebild = {
|
||||
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');
|
||||
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();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
initLangToggle: function() {
|
||||
var btn = document.querySelector('.lang-toggle');
|
||||
@@ -579,7 +606,7 @@ var Lagebild = {
|
||||
|
||||
/* ===== SCROLL REVEAL ===== */
|
||||
initScrollReveal: function() {
|
||||
var cards = document.querySelectorAll('.content-card, .section-karte');
|
||||
var cards = document.querySelectorAll('.content-card, .lagebild-cta');
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
for (var i = 0; i < cards.length; i++) cards[i].classList.add('revealed');
|
||||
return;
|
||||
@@ -595,8 +622,14 @@ var Lagebild = {
|
||||
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
cards[i].classList.add('reveal');
|
||||
// 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]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* ===== HILFSFUNKTIONEN ===== */
|
||||
@@ -624,7 +657,7 @@ var Lagebild = {
|
||||
},
|
||||
|
||||
stLabel: function(s) {
|
||||
return { confirmed: 'Best\u00e4tigt', unconfirmed: 'Unbest\u00e4tigt', established: 'Gesichert',
|
||||
return { confirmed: 'Bestätigt', unconfirmed: 'Unbestätigt', established: 'Gesichert',
|
||||
unverified: 'Nicht verifiziert', contradicted: 'Widerlegt', disputed: 'Umstritten',
|
||||
developing: 'In Entwicklung', 'false': 'Falsch' }[s] || s;
|
||||
},
|
||||
@@ -696,7 +729,7 @@ var Lagebild = {
|
||||
|
||||
showError: function() {
|
||||
document.getElementById('summary-content').innerHTML =
|
||||
'<div class="lagebild-error"><p>Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es sp\u00e4ter erneut.</p></div>';
|
||||
'<div class="lagebild-error"><p>Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es später erneut.</p></div>';
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren