Vorschau: Stats-Bar dynamisch pro Lage, Hero-Kontakt-Buttons entfernt, Deepfakes-Excerpt gekürzt

- Stats-Bar (Titel, Artikel, Quellen, Faktenchecks) wechselt beim Carousel-Wechsel
- countUp-Animation in äußeren Scope verschoben für Wiederverwendung
- lageTitles-Mapping für Anzeigenamen der Lagen
- Kontakt-Buttons aus allen Hero-Slides entfernt
- Deepfakes-Excerpt auf Stichpunkte beschränkt (Fließtext gefiltert)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-09 23:36:29 +02:00
Ursprung 0f3cc972a5
Commit 3cd5623fa6
2 geänderte Dateien mit 44 neuen und 23 gelöschten Zeilen

Datei anzeigen

@@ -96,7 +96,6 @@
<p class="hero-slide-example">Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.</p>
<div class="hero-slide-cta">
<a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
<div class="hero-slide-media-col"></div>
@@ -111,7 +110,6 @@
<h2 class="hero-slide-headline">Jede Behauptung geprüft. Automatisch.</h2>
<p class="hero-slide-text">Kernaussagen werden automatisch gegen unabhängige Quellen verifiziert und mit einem Verifikationsstatus versehen: bestätigt, widersprüchlich oder unbelegt. Widersprechen sich Quellen, wird das transparent dargestellt. Wenn neue Belege auftauchen, aktualisiert sich die Bewertung automatisch. Keine blinden Flecken, keine manuelle Nachrecherche, systematische Verifikation über alle Lagebilder hinweg.</p>
<div class="hero-slide-cta">
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
<div class="hero-slide-media-col"><!-- Screenshot Faktencheck-UI --></div>
@@ -128,7 +126,6 @@
<p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
<div class="hero-slide-cta">
<a href="/lagen/deepfakes/" class="btn btn-primary">Recherche-Beispiel ansehen</a>
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
<div class="hero-slide-media-col"></div>
@@ -145,7 +142,6 @@
<p class="hero-slide-example">Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.</p>
<div class="hero-slide-cta">
<a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
<div class="hero-slide-media-col"></div>
@@ -162,7 +158,6 @@
<p class="hero-slide-example">Beispiel: Cyberangriffe auf deutsche Infrastruktur, 93 Artikel aus 41 Quellen, automatisch überwacht.</p>
<div class="hero-slide-cta">
<a href="/lagen/cyberangriffe/" class="btn btn-primary">Live-Beispiel ansehen</a>
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
<div class="hero-slide-media-col"></div>

Datei anzeigen

@@ -129,6 +129,12 @@
var lageData = {};
var dataLoaded = false;
var lageTitles = {
'iran-konflikt': 'Gro\u00dflage - Irankonflikt',
'cyberangriffe': 'Cyberangriffe auf deutsche Infrastruktur',
'deepfakes': 'Rechtliche Lage von Deepfakes in Deutschland'
};
/* ==================== 3D CAROUSEL ==================== */
var cards = document.querySelectorAll('.carousel-card');
var dots = document.querySelectorAll('.carousel-dot');
@@ -153,6 +159,12 @@
if (lage && lageData[lage]) {
mapSection.classList.remove('map-hidden');
showMarkers(lageData[lage].locations, lageData[lage].category_labels);
// Stats-Bar aktualisieren
var titleEl = document.querySelector('.live-stats-title');
if (titleEl) titleEl.textContent = lageTitles[lage] || lage;
countUp(document.getElementById('stat-articles'), lageData[lage].article_count);
countUp(document.getElementById('stat-sources'), lageData[lage].source_count);
countUp(document.getElementById('stat-factchecks'), lageData[lage].factcheck_count);
} else {
if (mapSection) mapSection.classList.add('map-hidden');
clearMarkers();
@@ -212,6 +224,23 @@ function mdToHtml(md) {
if (inList) html += '</ul>';
return html;
}
/* ==================== COUNT-UP ANIMATION ==================== */
function countUp(el, target) {
if (!el) return;
if (!target) { el.textContent = '0'; return; }
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
el.textContent = Math.floor(ease * target).toLocaleString('de-DE');
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
/* ==================== LIVE DATA ==================== */
function timeAgo(dateStr) {
var diffMin = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
@@ -233,20 +262,6 @@ function mdToHtml(md) {
var ea = document.getElementById('stat-articles');
var es = document.getElementById('stat-sources');
var ef = document.getElementById('stat-factchecks');
function countUp(el, target) {
if (!el || !target) return;
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
el.textContent = Math.floor(ease * target).toLocaleString('de-DE');
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
countUp(ea, inc.article_count);
countUp(es, inc.source_count);
countUp(ef, inc.factcheck_count);
@@ -260,7 +275,10 @@ function mdToHtml(md) {
// Store data and init map
lageData['iran-konflikt'] = {
locations: data.locations || [],
category_labels: data.category_labels || {}
category_labels: data.category_labels || {},
article_count: inc.article_count || 0,
source_count: inc.source_count || 0,
factcheck_count: inc.factcheck_count || 0
};
dataLoaded = true;
createMap();
@@ -442,13 +460,18 @@ function mdToHtml(md) {
.then(function (data) {
var excerptEl = document.getElementById('excerpt-text-deepfakes');
if (excerptEl && data.zusammenfassung) {
excerptEl.innerHTML = mdToHtml(data.zusammenfassung);
var lines = data.zusammenfassung.split("\n");
var filtered = lines.filter(function(l) { var t = l.trim(); return !t || t.indexOf("## ") === 0 || t.indexOf("- ") === 0; });
excerptEl.innerHTML = mdToHtml(filtered.join("\n"));
}
// Store data for map
lageData['deepfakes'] = {
locations: data.locations || [],
category_labels: data.category_labels || {}
category_labels: data.category_labels || {},
article_count: (data.incident || {}).article_count || 0,
source_count: (data.incident || {}).source_count || 0,
factcheck_count: (data.incident || {}).factcheck_count || 0
};
})
.catch(function () {
@@ -468,7 +491,10 @@ function mdToHtml(md) {
}
lageData['cyberangriffe'] = {
locations: data.locations || [],
category_labels: data.category_labels || {}
category_labels: data.category_labels || {},
article_count: (data.incident || {}).article_count || 0,
source_count: (data.incident || {}).source_count || 0,
factcheck_count: (data.incident || {}).factcheck_count || 0
};
})
.catch(function () {