d61dcf49d3
clip-path auf der Hero-Section selbst schneidet sauber spitz ab, kein separates SVG-Element mehr. Video, Overlay und Content werden alle gleichmässig abgeschnitten. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
367 Zeilen
19 KiB
HTML
367 Zeilen
19 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-video-container">
|
|
<video class="hero-video active" autoplay muted loop playsinline>
|
|
<source src="/assets/videos/hero-data-flow.mp4" type="video/mp4">
|
|
</video>
|
|
<video class="hero-video" autoplay muted loop playsinline>
|
|
<source src="/assets/videos/hero-network-viz.mp4" type="video/mp4">
|
|
</video>
|
|
<video class="hero-video" autoplay muted loop playsinline>
|
|
<source src="/assets/videos/hero-code-abstract.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="hero-overlay"></div>
|
|
<div class="container hero-content">
|
|
<h1 class="hero-title">AegisSight Monitor</h1>
|
|
<p class="hero-claim">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen,<br><span class="gold">vollautomatisch.</span></p>
|
|
<p class="hero-sub">Aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen.</p>
|
|
<div class="hero-cta">
|
|
<a href="#demos" class="btn btn-primary">Live-Demo ansehen</a>
|
|
<a href="mailto:info@aegis-sight.de" class="btn btn-outline-light">Kontakt aufnehmen</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
n <!-- Chevron: Hero -> Problem -->
|
|
<div class="divider" style="background:var(--navy);line-height:0">
|
|
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,0 L720,60 L1440,0 Z" fill="#0A1832" /><rect y="0" width="1440" height="1" fill="#1a2d4a" opacity="0.3"/></svg>
|
|
</div>
|
|
|
|
<!-- Problem Statement (dark) -->
|
|
<section class="section section-dark" id="problem">
|
|
<div class="container">
|
|
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
|
|
<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">‹</button>
|
|
<button class="carousel-arrow carousel-next" aria-label="Nächste Lage">›</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>
|
|
<!-- 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>
|
|
</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>
|
|
<a href="mailto:info@aegis-sight.de" class="btn btn-primary btn-lg">Kontakt aufnehmen</a>
|
|
</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 Strasse 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">© 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|