Deepfakes-Recherche als Lagebild-Seite + Vorschau-Updates

Neue Seite /lagen/deepfakes/ mit vollstaendiger Recherche zur
rechtlichen Lage von Deepfakes in Deutschland (121 Artikel, 90 Quellen).
Nutzt bestehendes lagebild.css/js aus iran-konflikt.

Vorschau: Dritte Carousel-Card mit Deepfakes-Recherche befuellt,
Hero-Slide Label von KI-Recherche zu KI-gestuetzte Recherche geaendert.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-09 17:27:18 +02:00
Ursprung a9c1c73c2a
Commit d462d6d37e
3 geänderte Dateien mit 218 neuen und 7 gelöschten Zeilen

184
lagen/deepfakes/index.html Normale Datei
Datei anzeigen

@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recherche: Rechtliche Lage von Deepfakes in Deutschland - AegisSight</title>
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/mobile.css">
<link rel="stylesheet" href="/lagen/iran-konflikt/lagebild.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body class="lagebild-page">
<!-- Scroll Progress Bar -->
<div class="scroll-progress" id="scroll-progress"></div>
<!-- Navigation -->
<nav class="navbar" role="navigation">
<div class="nav-container">
<div class="logo">
<a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
</div>
<ul class="nav-menu">
<li><a href="/">Startseite</a></li>
<li><a href="/#about">\u00dcber uns</a></li>
<li><a href="/#products">L\u00f6sungen</a></li>
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
</ul>
<div class="nav-extras">
<button class="mobile-menu-toggle" aria-label="Men\u00fc \u00f6ffnen" aria-expanded="false">
<span class="hamburger"><span></span><span></span><span></span></span>
</button>
</div>
</div>
</nav>
<!-- Mobile Navigation -->
<div class="nav-menu-mobile" aria-hidden="true">
<button class="mobile-menu-close" aria-label="Men\u00fc schlie\u00dfen">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
</button>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/#about">\u00dcber uns</a></li>
<li><a href="/#products">L\u00f6sungen</a></li>
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
</ul>
</div>
<div class="mobile-menu-overlay"></div>
<!-- Hero Section -->
<section class="lagebild-hero">
<canvas id="hero-particles"></canvas>
<div class="hero-bg-pattern"></div>
<div class="container">
<h1 id="hero-title">RECHERCHE</h1>
<p class="hero-incident-title" id="incident-title"></p>
<div class="hero-stats" id="hero-stats"></div>
</div>
</section>
<!-- 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">Recherche</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>
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
</div>
</div>
</div>
<!-- Main Content -->
<main class="lagebild-main">
<div class="container">
<!-- Tab: Lagebild -->
<div class="tab-panel active" id="panel-lagebild">
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
<section class="content-card">
<div class="card-header">
<h2 id="lagebild-date-title">Recherche</h2>
<span class="card-timestamp" id="lagebild-timestamp"></span>
</div>
<div class="card-body" id="summary-content">
<div class="loading-skeleton">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line short"></div>
</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</h2>
<p class="card-description">Alle vom AegisSight Monitor ausgewerteten Quellen</p>
</div>
<div class="card-body" id="sources-grid-container">
<div class="loading-skeleton">
<div class="skeleton-line"></div>
<div class="skeleton-line short"></div>
</div>
</div>
</section>
</div>
<!-- Tab: Karte -->
<div class="tab-panel" id="panel-karte">
<section class="content-card">
<div class="card-header">
<h2>Karte</h2>
<p class="card-description">Geografische Einordnung der Quellen</p>
</div>
<div class="card-body">
<div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div>
</div>
</section>
</div>
<!-- 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\u00fctzte Verifizierung aller zentralen Aussagen gegen unabh\u00e4ngige Quellen.</p>
</div>
<div class="card-body" id="factchecks-content"></div>
</section>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>AegisSight UG (haftungsbeschr\u00e4nkt)</h4>
<p>Gladbacher Strasse 3-5</p>
<p>40764 Langenfeld</p>
</div>
<div class="footer-section">
<h4>Navigation</h4>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/#about">\u00dcber uns</a></li>
<li><a href="/#products">L\u00f6sungen</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Rechtliches</h4>
<ul>
<li><a href="/impressum.html">Impressum</a></li>
<li><a href="/datenschutz.html">Datenschutz</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Kontakt</h4>
<p>info@aegis-sight.de</p>
</div>
</div>
<p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschr\u00e4nkt). Alle Rechte vorbehalten.</p>
</div>
</footer>
<!-- Scripts -->
<script src="/js/config.js"></script>
<script src="/js/translations.js"></script>
<script src="/js/mobile-nav.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="/lagen/iran-konflikt/lagebild.js"></script>
</body>
</html>

Datei anzeigen

@@ -123,7 +123,7 @@
<div class="hero-slide" data-slide="2">
<div class="hero-slide-inner">
<div class="hero-slide-text-col">
<span class="hero-slide-label">KI-Recherche</span>
<span class="hero-slide-label">KI-gestützte Recherche</span>
<h2 class="hero-slide-headline">Umfassende Recherche in Minuten statt Tagen.</h2>
<p class="hero-slide-text">Definieren Sie ein Thema, der Monitor recherchiert, strukturiert und belegt vollautomatisch. Quellenbasierte Analyse mit Faktenprüfung, kein Copy-Paste aus Suchmaschinen. Das Ergebnis: ein vollständiges Dossier mit Quellenbelegen und Faktenchecks.</p>
<p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
@@ -175,7 +175,7 @@
<div class="hero-slider-dots">
<button class="hero-dot active" data-slide="0" aria-label="Echtzeit-Monitoring"></button>
<button class="hero-dot" data-slide="1" aria-label="Faktencheck"></button>
<button class="hero-dot" data-slide="2" aria-label="KI-Recherche"></button>
<button class="hero-dot" data-slide="2" aria-label="KI-gestützte Recherche"></button>
<button class="hero-dot" data-slide="3" aria-label="Globale Abdeckung"></button>
<button class="hero-dot" data-slide="4" aria-label="Flexibel einsetzbar"></button>
</div>
@@ -293,11 +293,15 @@
<h3 class="demo-title placeholder-title">Weitere Lage</h3>
<p class="placeholder-text">In Vorbereitung</p>
</div>
<!-- Placeholder 3 -->
<div class="carousel-card card-placeholder" data-index="2" data-lage="">
<div class="demo-badge badge-soon">Demnächst</div>
<h3 class="demo-title placeholder-title">Weitere Lage</h3>
<p class="placeholder-text">In Vorbereitung</p>
<!-- Deepfakes Recherche -->
<div class="carousel-card card-live" data-index="2" data-lage="deepfakes">
<div class="demo-badge">RECHERCHE</div>
<h3 class="demo-title">Rechtliche Lage von Deepfakes in Deutschland</h3>
<div class="demo-excerpt" id="demo-excerpt-deepfakes">
<div class="excerpt-text" id="excerpt-text-deepfakes">Recherche wird geladen...</div>
</div>
<a href="/lagen/deepfakes/" class="btn btn-primary btn-block">Vollständige Recherche öffnen</a>
</div>
</div>
<div class="carousel-nav">

Datei anzeigen

@@ -435,6 +435,29 @@ function mdToHtml(md) {
return false;
};
/* ==================== LOAD DEEPFAKES DATA ==================== */
function loadDeepfakesData() {
fetch('/lagen/deepfakes/data/summary.json?t=' + Date.now())
.then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
.then(function (data) {
var excerptEl = document.getElementById('excerpt-text-deepfakes');
if (excerptEl && data.zusammenfassung) {
excerptEl.innerHTML = mdToHtml(data.zusammenfassung);
}
// Store data for map
lageData['deepfakes'] = {
locations: data.locations || [],
category_labels: data.category_labels || {}
};
})
.catch(function () {
var el = document.getElementById('excerpt-text-deepfakes');
if (el) el.textContent = 'Daten konnten nicht geladen werden.';
});
}
/* ==================== INIT ==================== */
loadLiveData();
loadDeepfakesData();
})();