Dateien
Website/index.html
Claude Code 7ac09a41aa OSINT Monitor Card: Icon, Name und Emdash korrigiert
- Neues Weltkugel-Icon (world-globe.svg) statt generischem globe.svg
- Titel zu AegisSight Monitor geändert (ohne OSINT)
- Emdashes durch normale Bindestriche ersetzt (DE + EN)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 00:08:41 +01:00

373 Zeilen
21 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-translate="pageTitle">AegisSight - Sicherheit Made in Germany</title>
<!-- Prevent search engine indexing -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
<link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations-enhanced.css">
<link rel="stylesheet" href="css/section-transitions.css">
<link rel="stylesheet" href="css/about-modern.css">
<link rel="stylesheet" href="css/products-modern.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="cookie-consent.css">
</head>
<body>
<!-- Skip Navigation -->
<a href="#features" class="skip-nav" data-translate="skipNav">Zum Hauptinhalt springen</a>
<!-- Navigation -->
<nav class="navbar" role="navigation" aria-label="Hauptnavigation">
<div class="nav-container">
<div class="logo">
<img src="assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
</div>
<ul class="nav-menu">
<li><a href="#home" data-translate="navHome">Startseite</a></li>
<li><a href="#about" data-translate="navAbout">Über uns</a></li>
<li><a href="#products" data-translate="navProducts">Lösungen</a></li>
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
</ul>
<div class="nav-extras">
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
<!-- Mobile Menu Toggle -->
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
</button>
</div>
</div>
</nav>
<!-- Mobile Navigation Menu -->
<div class="nav-menu-mobile" aria-hidden="true">
<button class="mobile-menu-close" aria-label="Menü schließen">
<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="#home" data-translate="navHome">Startseite</a></li>
<li><a href="#about" data-translate="navAbout">Über uns</a></li>
<li><a href="#products" data-translate="navProducts">Lösungen</a></li>
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
</ul>
</div>
<!-- Mobile Menu Overlay -->
<div class="mobile-menu-overlay"></div>
<!-- Hero Section -->
<section class="hero" id="home">
<!-- Animated Background Gradient -->
<div class="gradient-animated" style="position: absolute; inset: 0; opacity: 0.3; z-index: 0;"></div>
<!-- Rotating Background Videos -->
<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>
<!-- Light Overlay for better text readability -->
<div class="hero-overlay"></div>
<!-- Particle Animation Canvas -->
<canvas id="particleCanvas" aria-hidden="true"></canvas>
<div class="hero-content animate-in">
<h1 class="hero-title">
<span class="main-title" data-translate="heroTitle">SICHERHEIT MADE IN GERMANY</span>
</h1>
<p class="hero-text animate-in stagger-2" data-translate="heroSubtitle">Spezialist für hochsichere, maßgeschneiderte IT-Lösungen für Behörden</p>
</div>
<!-- Scroll Indicator -->
<div class="scroll-indicator">
<span class="scroll-text" data-translate="scrollToExplore">Scroll to Explore</span>
<div class="scroll-arrow">
<img src="assets/images/icons/arrow-down.svg" alt="Scroll Down" width="24" height="24">
</div>
</div>
</section>
<!-- About Us Section -->
<section class="about-section" id="about">
<div class="container">
<h2 class="section-title" data-translate="aboutTitle">ÜBER UNS</h2>
<p class="section-subtitle" data-translate="aboutSubtitle">Ihr Partner für sichere Behördensoftware</p>
<!-- About Tabs Navigation -->
<div class="about-tabs">
<button class="about-tab active" data-tab="who-we-are" data-translate="tabWhoWeAre">Unternehmen</button>
<button class="about-tab" data-tab="mission" data-translate="tabMission">Mission & Werte</button>
<button class="about-tab" data-tab="competencies" data-translate="tabCompetencies">Kernkompetenzen</button>
<button class="about-tab" data-tab="why-us" data-translate="tabWhyUs">Unser Versprechen</button>
</div>
<!-- About Content Panels -->
<div class="about-content">
<!-- Wer wir sind -->
<div class="about-panel active reveal" id="who-we-are">
<div class="panel-text">
<div class="company-cards-wrapper">
<div class="company-card">
<h4>
<span class="company-card-icon">
<img src="assets/images/icons/shield.svg" alt="Security" width="24" height="24">
</span>
<span data-translate="companyCardTitle1">Spezialist für Behördensoftware</span>
</h4>
<p data-translate="whoWeArePara1">AegisSight UG ist Ihr <strong>Spezialist für hochsichere, maßgeschneiderte IT-Lösungen</strong> aus Nordrhein-Westfalen. Wir entwickeln innovative Software speziell für staatliche Sicherheits- und Ermittlungsbehörden.</p>
</div>
<div class="company-card">
<h4>
<span class="company-card-icon">
<img src="assets/images/icons/plus-circle.svg" alt="Future" width="24" height="24">
</span>
<span data-translate="companyCardTitle2">Unser Ansatz</span>
</h4>
<p data-translate="whoWeArePara2">Unser Ansatz vereint modernste Technologie mit einem tiefen Verständnis für die besonderen Anforderungen von Behörden. Dabei steht die Balance zwischen Sicherheit, Effizienz und rechtskonformer Umsetzung im Mittelpunkt unserer Arbeit.</p>
</div>
</div>
<div class="location-section">
<div class="mini-germany-map">
<img src="assets/images/nrw.png" alt="NRW Map" />
</div>
<div class="location-badge">
<img src="assets/images/icons/location.svg" alt="Location" width="24" height="24">
<span data-translate="locationBadge">Nordrhein-Westfalen, Deutschland</span>
</div>
</div>
</div>
</div>
<!-- Mission & Werte -->
<div class="about-panel" id="mission">
<div class="mission-grid">
<div class="mission-header">
<h3 data-translate="missionTitle">Unsere Mission</h3>
<p data-translate="missionStatement">Wir schaffen <strong>effiziente, sichere und datenschutzkonforme Lösungen</strong> für moderne Strafverfolgung und Sicherheitsbehörden.</p>
</div>
<div class="values-grid">
<div class="value-card card-hover-lift tilt-card">
<div class="value-icon">
<img src="assets/images/icons/shield-check.svg" alt="Verified" width="48" height="48">
</div>
<h4 data-translate="valueIntegrityTitle">Integrität</h4>
<p data-translate="valueIntegrityDesc">Höchste ethische Standards in allem was wir tun</p>
</div>
<div class="value-card card-hover-lift tilt-card">
<div class="value-icon">
<img src="assets/images/icons/clock-circle.svg" alt="Time" width="48" height="48">
</div>
<h4 data-translate="valueTransparencyTitle">Transparenz</h4>
<p data-translate="valueTransparencyDesc">Offene Kommunikation und nachvollziehbare Prozesse</p>
</div>
<div class="value-card card-hover-lift tilt-card">
<div class="value-icon">
<img src="assets/images/icons/pyramid.svg" alt="Scale" width="48" height="48">
</div>
<h4 data-translate="valueDemocracyTitle">Demokratische Prinzipien</h4>
<p data-translate="valueDemocracyDesc">Kooperation nur mit Behörden im Einklang mit der freiheitlich demokratischen Grundordnung</p>
</div>
</div>
<div class="principle-note">
<p data-translate="principleNote"><strong>Unser Ziel:</strong> Technologie, die Recht und Sicherheit stärkt und die freiheitlich demokratische Grundordnung schützt.</p>
</div>
</div>
</div>
<!-- Kernkompetenzen -->
<div class="about-panel" id="competencies">
<div class="competencies-list">
<div class="competency-item">
<div class="competency-number">01</div>
<div class="competency-content">
<h4 data-translate="comp1Title">Behördenspezifische Software</h4>
<p data-translate="comp1Desc">Entwicklung mit höchsten Sicherheitsstandards, maßgeschneidert für staatliche Anforderungen</p>
</div>
</div>
<div class="competency-item">
<div class="competency-number">02</div>
<div class="competency-content">
<h4 data-translate="comp2Title">Intuitive Bedienkonzepte</h4>
<p data-translate="comp2Desc">Benutzerfreundliche Oberflächen trotz komplexer Funktionen für effizientes Arbeiten</p>
</div>
</div>
<div class="competency-item">
<div class="competency-number">03</div>
<div class="competency-content">
<h4 data-translate="comp3Title">Langzeit-Support</h4>
<p data-translate="comp3Desc">Kontinuierliche Sicherheitsupdates und zuverlässige Wartung über den gesamten Lebenszyklus</p>
</div>
</div>
</div>
</div>
<!-- Warum AegisSight -->
<div class="about-panel" id="why-us">
<div class="why-grid">
<div class="why-card card-hover-lift">
<div class="why-icon">
<img src="assets/images/icons/check-circle-filled.svg" alt="Check" width="48" height="48">
</div>
<h4 data-translate="why1Title">Enge Zusammenarbeit</h4>
<p data-translate="why1Desc">Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
</div>
<div class="why-card card-hover-lift">
<div class="why-icon german-flag-icon">
<img src="assets/images/icons/german-flag.svg" alt="German Flag" width="60" height="36">
</div>
<h4 data-translate="why2Title">Made in Germany</h4>
<p data-translate="why2Desc">Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
</div>
<div class="why-card card-hover-lift">
<div class="why-icon">
<img src="assets/handshake.svg" alt="Handshake" width="50" height="50" />
</div>
<h4 data-translate="why3Title">Verlässliche Partnerschaft</h4>
<p data-translate="why3Desc">Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
</div>
<div class="why-card card-hover-lift">
<div class="why-icon">
<img src="assets/images/icons/clock.svg" alt="Clock" width="48" height="48">
</div>
<h4 data-translate="why4Title">Nachhaltigkeit</h4>
<p data-translate="why4Desc">Fokus auf Sicherheit, Professionalität & zukunftssichere Lösungen</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Products & Solutions Section -->
<section class="products-section" id="products">
<div class="tech-particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="products-container">
<div style="text-align: center; margin-bottom: 60px;">
<h2 class="section-title" data-translate="productsTitle">PRODUKTE & LÖSUNGEN</h2>
<p class="section-subtitle" data-translate="productsSubtitle">Professionelle Werkzeuge für moderne Ermittlungsarbeit</p>
</div>
<div class="products-grid">
<!-- Product: AegisSight Monitor -->
<div class="product-card">
<div class="product-header">
<div class="product-icon-wrapper">
<div class="product-icon-bg"></div>
<img class="product-icon" src="assets/images/icons/world-globe.svg" alt="AegisSight Monitor">
</div>
<div class="product-title-wrapper">
<h3 class="product-title" data-translate="productOsintMonitorTitle">AegisSight Monitor</h3>
<p class="product-tagline" data-translate="productOsintMonitorTagline">Open Source Intelligence - automatisiert</p>
</div>
</div>
<div class="product-body">
<p class="product-description" data-translate="productOsintMonitorDesc">Unser OSINT-Monitor aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen in Echtzeit. Erleben Sie die Plattform live am Beispiel des Iran-Livetickers.</p>
<a href="/lagebild/" class="product-learn-more" style="text-decoration: none; text-align: center;">
<span data-translate="osintMonitorButton">Iran-Liveticker öffnen</span>
</a>
</div>
</div>
<!-- Product: AccountForger -->
<div class="product-card">
<div class="product-header">
<div class="product-icon-wrapper">
<div class="product-icon-bg"></div>
<img class="product-icon" src="assets/images/icons/lock.svg" alt="AccountForger">
</div>
<div class="product-title-wrapper">
<h3 class="product-title" data-translate="productAccountForgerTitle">AccountForger</h3>
<p class="product-tagline">Zugang nur mit Berechtigung</p>
</div>
</div>
<div class="product-body">
<p class="product-description" data-translate="protectedProductDesc">Dieses Produkt ist speziell für autorisierte Behörden entwickelt und erfordert eine Authentifizierung.</p>
<button class="product-learn-more" onclick="showLoginModal()">
<span data-translate="loginForAccess">Anmelden für Zugriff</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
</div>
<div class="footer-section">
<h4 data-translate="footerNavTitle">Navigation</h4>
<ul>
<li><a href="#home" data-translate="footerNavHome">Startseite</a></li>
<li><a href="#about" data-translate="footerNavAbout">Über uns</a></li>
<li><a href="#products" data-translate="footerNavProducts">Lösungen</a></li>
</ul>
</div>
<div class="footer-section">
<h4 data-translate="footerLegalTitle">Rechtliches</h4>
<ul>
<li><a href="impressum.html" data-translate="footerImprint">Impressum</a></li>
<li><a href="datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
<li><a href="#" id="cookie-settings-link" data-translate="footerCookies">Cookie-Einstellungen</a></li>
</ul>
</div>
<div class="footer-section">
<h4 data-translate="footerContactTitle">Kontakt</h4>
<p>info@aegis-sight.de</p>
</div>
</div>
<p class="copyright" data-translate="copyright">© {year} AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
</div>
</footer>
<!-- JavaScript Files -->
<script src="js/protection.js"></script>
<script src="js/config.js"></script>
<!-- Cookie Consent (MUSS vor Analytics geladen werden!) -->
<script src="cookie-consent.js"></script>
<script src="js/translations.js"></script>
<script src="js/animations.js"></script>
<script src="js/animations-enhanced.js"></script>
<script src="js/section-transitions.js"></script>
<script src="js/hero-videos.js"></script>
<script src="js/components.js"></script>
<script src="js/main.js"></script>
<script src="js/mobile-nav.js"></script>
<!-- AegisSight Analytics wird automatisch durch Cookie Consent geladen -->
<!-- <script async src="/insights/t.js"></script> ENTFERNT - wird nur bei Zustimmung geladen! -->
</body>
</html>