Dateien
Website/vorschau/index.html
Claude Code d462d6d37e 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>
2026-04-09 17:27:18 +02:00

486 Zeilen
27 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AegisSight Monitor - Echtzeit-Lagebilder aus offenen Quellen</title>
<meta name="robots" content="noindex, nofollow, noarchive">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Password Gate -->
<style>
#login-gate{position:fixed;inset:0;z-index:10000;background:#0A1832;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Inter',system-ui,sans-serif}
#login-gate .gate-logo{width:80px;height:80px;margin-bottom:2rem}
#login-gate .gate-logo img{width:100%;height:100%;background:#fff;border-radius:12px;padding:6px}
#login-gate h1{font-size:1.6rem;font-weight:700;color:#C8A851;margin-bottom:.5rem}
#login-gate p{font-size:.95rem;color:#A0A8B8;margin-bottom:1.5rem}
#login-gate .pw-form{display:flex;gap:.5rem}
#login-gate .pw-input{padding:.7rem 1rem;border:1px solid rgba(200,168,81,.3);border-radius:6px;background:rgba(255,255,255,.05);color:#E8E8E8;font-family:inherit;font-size:.95rem;width:220px;outline:none}
#login-gate .pw-input:focus{border-color:#C8A851}
#login-gate .pw-input::placeholder{color:#5A6478}
#login-gate .pw-btn{padding:.7rem 1.2rem;border:none;border-radius:6px;background:#C8A851;color:#0A1832;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
#login-gate .pw-btn:hover{background:#D4B96A}
#login-gate .pw-error{color:#E85454;font-size:.85rem;margin-top:.75rem;display:none}
body.locked{overflow:hidden}
</style>
<div id="login-gate">
<div class="gate-logo"><img src="/assets/images/logos/AegisSightLogo_NavyGold.svg" alt="AegisSight"></div>
<h1>Vorschau</h1>
<p>Zugang nur mit Passwort</p>
<form class="pw-form" onsubmit="return checkPassword(event)">
<input type="password" class="pw-input" id="pw-input" placeholder="Passwort" autofocus>
<button type="submit" class="pw-btn">Weiter</button>
</form>
<div class="pw-error" id="pw-error">Falsches Passwort</div>
</div>
<script>
var PW_HASH='feab257468bdb1b836bae5bc439db625d9a1b9a56ca60e0916ab04fb04c2ec31';
function sha256(s){return crypto.subtle.digest('SHA-256',new TextEncoder().encode(s)).then(function(b){return Array.from(new Uint8Array(b)).map(function(x){return x.toString(16).padStart(2,'0')}).join('')})}
function getCookie(n){var m=document.cookie.match(new RegExp('(?:^|; )'+n+'=([^;]*)'));return m?m[1]:null}
function setCookie(n,v,d){var e=new Date();e.setTime(e.getTime()+d*864e5);document.cookie=n+'='+v+';expires='+e.toUTCString()+';path=/vorschau/;SameSite=Strict;Secure'}
function unlock(){document.getElementById('login-gate').style.display='none';document.body.classList.remove('locked')}
function checkPassword(e){e.preventDefault();sha256(document.getElementById('pw-input').value).then(function(h){if(h===PW_HASH){setCookie('vorschau_auth',h,30);unlock()}else{document.getElementById('pw-error').style.display='block';document.getElementById('pw-input').value='';document.getElementById('pw-input').focus()}});return false}
if(getCookie('vorschau_auth')===PW_HASH){unlock()}else{document.body.classList.add('locked')}
</script>
<!-- Navigation -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<a href="#hero" class="nav-logo">
<img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
</a>
<ul class="nav-menu">
<li><a href="#demos">Live-Lagebilder</a></li>
<li><a href="#features">Funktionen</a></li>
<li><a href="#trust">Versprechen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu" aria-hidden="true">
<ul>
<li><a href="#demos">Live-Lagebilder</a></li>
<li><a href="#features">Funktionen</a></li>
<li><a href="#trust">Versprechen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div>
<div class="mobile-overlay" id="mobile-overlay"></div>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-overlay"></div>
<div class="container hero-content">
<div class="hero-brand">
<h1 class="hero-title">AegisSight Monitor</h1>
<p class="hero-tagline">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, <span class="gold">vollautomatisch.</span></p>
</div>
<div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
<!-- Slide 1: Echtzeit-Monitoring -->
<div class="hero-slide active" data-slide="0">
<div class="hero-slide-inner">
<div class="hero-slide-text-col">
<span class="hero-slide-label">Echtzeit-Monitoring</span>
<h2 class="hero-slide-headline">Lagebilder in Echtzeit. Vollautomatisch.</h2>
<p class="hero-slide-text">Der AegisSight Monitor überwacht hunderte Quellen rund um die Uhr und erstellt strukturierte Lagebilder, ohne manuellen Aufwand. Neue Entwicklungen werden in Minuten erfasst, analysiert und eingeordnet. Sie entscheiden, was überwacht wird, der Monitor liefert das Lagebild.</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">
<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>
</div>
</div>
<!-- Slide 2: Automatischer Faktencheck -->
<div class="hero-slide" data-slide="1">
<div class="hero-slide-inner">
<div class="hero-slide-text-col">
<span class="hero-slide-label">Faktencheck</span>
<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">
<a href="#demos" class="btn btn-primary">Live-Demo ansehen</a>
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
<div class="hero-slide-media-col"><!-- Screenshot Faktencheck-UI --></div>
</div>
</div>
<!-- Slide 3: KI-Recherche -->
<div class="hero-slide" data-slide="2">
<div class="hero-slide-inner">
<div class="hero-slide-text-col">
<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>
<div class="hero-slide-cta">
<a href="#demos" 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>
</div>
</div>
<!-- Slide 4: Globale Quellenabdeckung -->
<div class="hero-slide" data-slide="3">
<div class="hero-slide-inner">
<div class="hero-slide-text-col">
<span class="hero-slide-label">Globale Abdeckung</span>
<h2 class="hero-slide-headline">Dutzende Sprachen. Hunderte Quellen. Null blinde Flecken.</h2>
<p class="hero-slide-text">Arabisch, Persisch, Hebräisch, Russisch, Chinesisch: Der Monitor verarbeitet Quellen, die den meisten Analystenteams sprachlich verschlossen bleiben. Automatische Übersetzung, Kontextanalyse und Einordnung. Globale Abdeckung ohne globale Personalkosten.</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">
<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>
</div>
</div>
<!-- Slide 5: Flexibel einsetzbar -->
<div class="hero-slide" data-slide="4">
<div class="hero-slide-inner">
<div class="hero-slide-text-col">
<span class="hero-slide-label">Flexibel einsetzbar</span>
<h2 class="hero-slide-headline">Von der Grosslage bis zum Einzelthema.</h2>
<p class="hero-slide-text">Geopolitische Konflikte, Unternehmensrisiken, regionale Krisen oder Einzelpersonen: Der AegisSight Monitor skaliert mit Ihrem Bedarf. Definieren Sie Ihr Thema, wählen Sie Ihre Quellen, der Rest läuft automatisch. Jede Lage erhält ihr eigenes Lagebild mit Quellenbelegen, Karte und Faktencheck.</p>
<p class="hero-slide-example">Weitere Live-Beispiele folgen in Kürze.</p>
<div class="hero-slide-cta">
<a href="#" class="btn btn-outline-light btn-placeholder" aria-disabled="true">Demnächst verfügbar</a>
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</div>
<div class="hero-slide-media-col"></div>
</div>
</div>
</div>
<div class="hero-slider-nav">
<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-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>
<div class="hero-slider-arrows">
<button class="hero-arrow hero-arrow-prev" aria-label="Vorheriger Slide">&#8592;</button>
<button class="hero-arrow hero-arrow-next" aria-label="Nächster Slide">&#8594;</button>
</div>
</div>
</div>
</section>
<!-- Problem Statement (dark) -->
<section class="section section-dark" id="problem">
<div class="container">
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
<p class="section-subtitle section-subtitle-light">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
<div class="grid-3">
<div class="problem-card problem-card-dark">
<div class="problem-icon problem-icon-dark">
<img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
</div>
<h3>Tausende Quellen</h3>
<p>Hunderte Quellen in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
</div>
<div class="problem-card problem-card-dark">
<div class="problem-icon problem-icon-dark">
<img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
</div>
<h3>Zeitdruck</h3>
<p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
</div>
<div class="problem-card problem-card-dark">
<div class="problem-icon problem-icon-dark">
<img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
</div>
<h3>Informationsflut</h3>
<p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
</div>
</div>
</div>
</section>
<!-- Gradient: Problem -> Workflow -->
<div class="divider divider-gradient-dark-to-alt"></div>
<!-- Solution / Workflow -->
<section class="section section-alt" id="solution">
<div class="container">
<h2 class="section-title">So funktioniert der AegisSight Monitor</h2>
<div class="workflow">
<div class="workflow-step">
<div class="step-number">1</div>
<h3>Erfassen</h3>
<p>Hunderte Quellen werden kontinuierlich überwacht. Nachrichtenagenturen, Telegram, Social Media und mehr.</p>
</div>
<div class="workflow-connector"></div>
<div class="workflow-step">
<div class="step-number">2</div>
<h3>Analysieren</h3>
<p>Meldungen werden automatisch ausgewertet, Fakten geprüft und geografisch verortet.</p>
</div>
<div class="workflow-connector"></div>
<div class="workflow-step">
<div class="step-number">3</div>
<h3>Berichten</h3>
<p>Strukturierte Lagebilder mit Quellenbelegen, Faktencheck und Kartenansicht. In Echtzeit.</p>
</div>
</div>
</div>
</section>
<!-- Gradient: Solution -> Demos -->
<div class="divider divider-gradient-alt-to-base"></div>
<!-- Live Demos / Showcase -->
<section class="section section-base" id="demos">
<div class="container">
<!-- Live Stats Bar -->
<div class="live-stats-bar">
<div class="live-stats-title">Großlage - Irankonflikt</div>
<div class="live-stats-row">
<div class="live-stat">
<span class="live-stat-value" id="stat-articles">...</span>
<span class="live-stat-label">Artikel</span>
</div>
<div class="live-stat">
<span class="live-stat-value" id="stat-sources">...</span>
<span class="live-stat-label">Quellen</span>
</div>
<div class="live-stat">
<span class="live-stat-value" id="stat-factchecks">...</span>
<span class="live-stat-label">Faktenchecks</span>
</div>
</div>
</div>
<!-- 3D Carousel -->
<div class="carousel-viewport">
<button class="carousel-arrow carousel-prev" aria-label="Vorherige Lage">&#8249;</button>
<button class="carousel-arrow carousel-next" aria-label="Nächste Lage">&#8250;</button>
<div class="carousel-track" id="carousel">
<!-- Iran Card -->
<div class="carousel-card card-live active" data-index="0" data-lage="iran-konflikt">
<div class="demo-badge">LIVE</div>
<h3 class="demo-title">Iran-Konflikt</h3>
<div class="demo-excerpt" id="demo-excerpt">
<div class="excerpt-text" id="excerpt-text">Lagebild wird geladen...</div>
</div>
<a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
</div>
<!-- Placeholder 2 -->
<div class="carousel-card card-placeholder" data-index="1" 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>
</div>
<!-- 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">
<button class="carousel-dot active" data-index="0"></button>
<button class="carousel-dot" data-index="1"></button>
<button class="carousel-dot" data-index="2"></button>
</div>
</div>
<!-- Map -->
<div class="map-section" id="map-section">
<h3 class="map-title" id="map-title">Geografische Verortung der Meldungen</h3>
<div id="map-container"></div>
<div class="map-empty" id="map-empty" style="display:none">Kartendaten folgen</div>
</div>
</div>
</section>
<!-- Gradient: Solution -> Features -->
<div class="divider divider-gradient-alt-to-base"></div>
<!-- Features -->
<section class="section section-base" id="features">
<div class="container">
<h2 class="section-title">Was der Monitor leistet</h2>
<!-- Highlight: Faktenprüfung -->
<div class="feature-statement">
<p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
<p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
</div>
<div class="grid-3">
<div class="feature-card">
<div class="feature-icon">
<img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
</div>
<h3>Echtzeit-Monitoring</h3>
<p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
</div>
<h3>Quellenanalyse</h3>
<p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
</div>
<h3>Geografische Verortung</h3>
<p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
</div>
<h3>Mehrsprachige Auswertung</h3>
<p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
</div>
<h3>Strukturierte Lagebilder</h3>
<p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
</div>
</div>
</div>
</section>
<!-- Contact CTA -->
<section class="section section-base" id="contact">
<div class="container cta-container">
<h2 class="section-title">Interesse am AegisSight Monitor?</h2>
<p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
<button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
</div>
</section>
<!-- Diagonal: -> Trust -->
<div class="divider divider-diagonal-dark">
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#132844"/></svg>
</div>
<!-- Trust / Unser Versprechen -->
<section class="section section-dark" id="trust">
<div class="container">
<h2 class="section-title">Unser Versprechen</h2>
<div class="grid-4 trust-grid">
<div class="trust-card">
<div class="trust-icon-wrap">
<img src="/assets/images/icons/check-circle-filled.svg" alt="" width="48" height="48">
</div>
<h3>Enge Zusammenarbeit</h3>
<p>Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
</div>
<div class="trust-card">
<div class="trust-icon-wrap trust-flag">
<img src="/assets/images/icons/german-flag.svg" alt="" width="60" height="36">
</div>
<h3>Made in Germany</h3>
<p>Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
</div>
<div class="trust-card">
<div class="trust-icon-wrap">
<img src="/assets/handshake.svg" alt="" width="50" height="50">
</div>
<h3>Verlässliche Partnerschaft</h3>
<p>Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
</div>
<div class="trust-card">
<div class="trust-icon-wrap">
<img src="/assets/images/icons/shield-check.svg" alt="" width="48" height="48">
</div>
<h3>Nachhaltigkeit</h3>
<p>Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-info">
<p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
<p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
</div>
<div class="footer-links">
<a href="/impressum.html">Impressum</a>
<a href="/datenschutz.html">Datenschutz</a>
</div>
</div>
<p class="footer-copyright">&copy; 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
</div>
</footer>
<!-- Contact Modal -->
<div class="modal-overlay" id="contact-modal" style="display:none">
<div class="modal-content">
<button class="modal-close" onclick="closeContactModal()">&times;</button>
<h2>Kontakt aufnehmen</h2>
<p class="modal-sub">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
<form id="contact-form" onsubmit="return submitContact(event)">
<div class="form-row">
<div class="form-group">
<label for="cf-name">Name</label>
<input type="text" id="cf-name" name="name" required>
</div>
<div class="form-group">
<label for="cf-org">Organisation</label>
<input type="text" id="cf-org" name="organisation">
</div>
</div>
<div class="form-group">
<label for="cf-email">E-Mail</label>
<input type="email" id="cf-email" name="email" required>
</div>
<div class="form-group">
<label for="cf-message">Nachricht</label>
<textarea id="cf-message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
</form>
<div class="form-success" id="form-success" style="display:none">
<p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
</div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="js/app.js"></script>
</body>
</html>