12dc13c089
- Trust-Section (Unser Versprechen) wandert vor die Contact-CTA, damit Vertrauen vor der Conversion-Aufforderung steht - Divider angepasst: Demos -> Trust (diagonal-dark), Trust -> Contact (gradient-dark-to-base), Contact -> Footer (diagonal-dark mit Footer-Navy als Fill) - Navbar-Label Versprechen -> Über uns (klarer fuer Erstbesucher) und neue Reihenfolge: Funktionen, Live-Lagebilder, Über uns, Kontakt (folgt der Scroll-Reihenfolge) - Mobile-Menu identisch angepasst Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
483 Zeilen
25 KiB
HTML
483 Zeilen
25 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="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.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="#features">Funktionen</a></li>
|
|
<li><a href="#demos">Live-Lagebilder</a></li>
|
|
<li><a href="#trust">Über uns</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="#features">Funktionen</a></li>
|
|
<li><a href="#demos">Live-Lagebilder</a></li>
|
|
<li><a href="#trust">Über uns</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="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 (Video) -->
|
|
<div class="hero-slide active" data-slide="0">
|
|
<div class="hero-slide-video">
|
|
<video muted playsinline preload="auto">
|
|
<source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="hero-slide-bottom">
|
|
<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="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Automatischer Faktencheck (Video) -->
|
|
<div class="hero-slide" data-slide="1">
|
|
<div class="hero-slide-video">
|
|
<video muted playsinline preload="metadata">
|
|
<source src="videos/hero-slide-2-monitoring.mp4?v=3" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: KI-Recherche (Video) -->
|
|
<div class="hero-slide" data-slide="2">
|
|
<div class="hero-slide-video">
|
|
<video muted playsinline preload="metadata">
|
|
<source src="videos/hero-slide-3-monitoring.mp4?v=2" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="hero-slide-bottom">
|
|
<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" onclick="positionCards(2)">Recherche-Beispiel ansehen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Globale Quellenabdeckung (Video) -->
|
|
<div class="hero-slide" data-slide="3">
|
|
<div class="hero-slide-video">
|
|
<video muted playsinline preload="metadata">
|
|
<source src="videos/hero-slide-4-monitoring.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="hero-slide-bottom">
|
|
<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="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: Flexibel einsetzbar (Video) -->
|
|
<div class="hero-slide" data-slide="4">
|
|
<div class="hero-slide-video">
|
|
<video muted playsinline preload="metadata">
|
|
<source src="videos/hero-slide-5-monitoring.mp4?v=2" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="hero-slide-bottom">
|
|
<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="#demos" class="btn btn-primary" onclick="positionCards(1)">Live-Beispiel ansehen</a>
|
|
</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>
|
|
<div class="hero-slider-arrows">
|
|
<button class="hero-arrow hero-arrow-prev" aria-label="Vorheriger Slide">←</button>
|
|
<button class="hero-arrow hero-arrow-next" aria-label="Nächster Slide">→</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="section section-dark" 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>
|
|
|
|
<!-- Gradient: Features -> Problem -->
|
|
<div class="divider divider-gradient-dark-to-base"></div>
|
|
|
|
<!-- Problem Statement -->
|
|
<section class="section section-base" id="problem">
|
|
<div class="container">
|
|
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
|
|
<p class="section-subtitle">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
|
|
<div class="grid-3">
|
|
<div class="problem-card">
|
|
<div class="problem-icon">
|
|
<img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
|
|
</div>
|
|
<h3>Quellenvielfalt</h3>
|
|
<p>Hunderte Nachrichtenagenturen, Telegram-Kanäle und soziale Medien in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
|
|
</div>
|
|
<div class="problem-card">
|
|
<div class="problem-icon">
|
|
<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">
|
|
<div class="problem-icon">
|
|
<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-base-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>
|
|
<!-- Cyberangriffe -->
|
|
<div class="carousel-card card-live" data-index="1" data-lage="cyberangriffe">
|
|
<div class="demo-badge">LIVE</div>
|
|
<h3 class="demo-title">Cyberangriffe auf deutsche Infrastruktur</h3>
|
|
|
|
<div class="demo-excerpt" id="demo-excerpt-cyberangriffe">
|
|
<div class="excerpt-text" id="excerpt-text-cyberangriffe">Lagebild wird geladen...</div>
|
|
</div>
|
|
<a href="/lagen/cyberangriffe/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
|
|
</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>
|
|
|
|
<!-- Diagonal: Demos -> 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>
|
|
|
|
<!-- Gradient: Trust -> Contact -->
|
|
<div class="divider divider-gradient-dark-to-base"></div>
|
|
|
|
<!-- 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: Contact -> Footer -->
|
|
<div class="divider divider-diagonal-dark">
|
|
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#0A1832"/></svg>
|
|
</div>
|
|
|
|
<!-- 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">© 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()">×</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="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|