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> <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"> <div class="hero-slide-cta">
<a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a> <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> </div>
<div class="hero-slide-media-col"></div> <div class="hero-slide-media-col"></div>
@@ -111,7 +110,6 @@
<h2 class="hero-slide-headline">Jede Behauptung geprüft. Automatisch.</h2> <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> <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"> <div class="hero-slide-cta">
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div> </div>
</div> </div>
<div class="hero-slide-media-col"><!-- Screenshot Faktencheck-UI --></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> <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"> <div class="hero-slide-cta">
<a href="/lagen/deepfakes/" class="btn btn-primary">Recherche-Beispiel ansehen</a> <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> </div>
<div class="hero-slide-media-col"></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> <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"> <div class="hero-slide-cta">
<a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a> <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> </div>
<div class="hero-slide-media-col"></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> <p class="hero-slide-example">Beispiel: Cyberangriffe auf deutsche Infrastruktur, 93 Artikel aus 41 Quellen, automatisch überwacht.</p>
<div class="hero-slide-cta"> <div class="hero-slide-cta">
<a href="/lagen/cyberangriffe/" class="btn btn-primary">Live-Beispiel ansehen</a> <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> </div>
<div class="hero-slide-media-col"></div> <div class="hero-slide-media-col"></div>

Datei anzeigen

@@ -129,6 +129,12 @@
var lageData = {}; var lageData = {};
var dataLoaded = false; var dataLoaded = false;
var lageTitles = {
'iran-konflikt': 'Gro\u00dflage - Irankonflikt',
'cyberangriffe': 'Cyberangriffe auf deutsche Infrastruktur',
'deepfakes': 'Rechtliche Lage von Deepfakes in Deutschland'
};
/* ==================== 3D CAROUSEL ==================== */ /* ==================== 3D CAROUSEL ==================== */
var cards = document.querySelectorAll('.carousel-card'); var cards = document.querySelectorAll('.carousel-card');
var dots = document.querySelectorAll('.carousel-dot'); var dots = document.querySelectorAll('.carousel-dot');
@@ -153,6 +159,12 @@
if (lage && lageData[lage]) { if (lage && lageData[lage]) {
mapSection.classList.remove('map-hidden'); mapSection.classList.remove('map-hidden');
showMarkers(lageData[lage].locations, lageData[lage].category_labels); 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 { } else {
if (mapSection) mapSection.classList.add('map-hidden'); if (mapSection) mapSection.classList.add('map-hidden');
clearMarkers(); clearMarkers();
@@ -212,6 +224,23 @@ function mdToHtml(md) {
if (inList) html += '</ul>'; if (inList) html += '</ul>';
return html; 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 ==================== */ /* ==================== LIVE DATA ==================== */
function timeAgo(dateStr) { function timeAgo(dateStr) {
var diffMin = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000); 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 ea = document.getElementById('stat-articles');
var es = document.getElementById('stat-sources'); var es = document.getElementById('stat-sources');
var ef = document.getElementById('stat-factchecks'); 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(ea, inc.article_count);
countUp(es, inc.source_count); countUp(es, inc.source_count);
countUp(ef, inc.factcheck_count); countUp(ef, inc.factcheck_count);
@@ -260,7 +275,10 @@ function mdToHtml(md) {
// Store data and init map // Store data and init map
lageData['iran-konflikt'] = { lageData['iran-konflikt'] = {
locations: data.locations || [], 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; dataLoaded = true;
createMap(); createMap();
@@ -442,13 +460,18 @@ function mdToHtml(md) {
.then(function (data) { .then(function (data) {
var excerptEl = document.getElementById('excerpt-text-deepfakes'); var excerptEl = document.getElementById('excerpt-text-deepfakes');
if (excerptEl && data.zusammenfassung) { 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 // Store data for map
lageData['deepfakes'] = { lageData['deepfakes'] = {
locations: data.locations || [], 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 () { .catch(function () {
@@ -468,7 +491,10 @@ function mdToHtml(md) {
} }
lageData['cyberangriffe'] = { lageData['cyberangriffe'] = {
locations: data.locations || [], 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 () { .catch(function () {