afe25fc728
- Implement custom cookie consent banner with opt-in gating pattern - Add comprehensive privacy documentation (DSGVO/GDPR compliant) - Integrate consent management into production (index.html) - Add multilingual support for cookie settings (DE/EN) - Fix navbar font-size inconsistency across legal pages - Include mobile.css in datenschutz.html and impressum.html - Add complete implementation documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
443 Zeilen
25 KiB
HTML
443 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 data-translate="pageTitle">IntelSight - Sicherheit Made in Germany</title>
|
|
<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/intelsight-name-light.svg" alt="IntelSight" 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">Produkte & Lösungen</a></li>
|
|
<li><a href="mailto:info@intelsight.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">Produkte & Lösungen</a></li>
|
|
<li><a href="mailto:info@intelsight.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">IntelSight 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 IntelSight -->
|
|
<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: IntelSight Professional Toolbox -->
|
|
<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/cube.svg" alt="Toolbox">
|
|
</div>
|
|
<div class="product-title-wrapper">
|
|
<h3 class="product-title" data-translate="productToolboxTitle">Professional Toolbox</h3>
|
|
<p class="product-tagline">Professional OSINT Suite</p>
|
|
</div>
|
|
</div>
|
|
<div class="product-body">
|
|
<p class="product-description" data-translate="productToolboxDesc">Eine leistungsstarke Desktop-Anwendung mit fünf essentiellen Tools für behördliche OSINT-Ermittler und Analysten. Modernes Design, intuitive Bedienung, professionelle Funktionen.</p>
|
|
<button class="product-learn-more expand-button" data-expanded="false" onclick="toggleTools(this)">
|
|
<span data-translate="expandDetails">Details anzeigen</span>
|
|
</button>
|
|
|
|
<!-- Tools Grid (Hidden by default, shown on expand) -->
|
|
<div class="tools-grid collapsed" id="toolsGrid">
|
|
<!-- Tool 1: Metadata Analyzer -->
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<img src="assets/images/icons/document.svg" alt="Document" width="48" height="48">
|
|
</div>
|
|
<h4 data-translate="tool1Title">Metadata Analyzer</h4>
|
|
<div class="tool-features">
|
|
<ul>
|
|
<li data-translate="tool1Feature1">Extrahiert versteckte Informationen (EXIF, GPS, Erstellungsdaten)</li>
|
|
<li data-translate="tool1Feature2">Forensische Analyse von Dokumenten & Bildern</li>
|
|
<li data-translate="tool1Feature3">Export als JSON</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool 2: Screen Recorder -->
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<img src="assets/images/icons/video-camera.svg" alt="Video" width="48" height="48">
|
|
</div>
|
|
<h4 data-translate="tool2Title">Screen Recorder</h4>
|
|
<div class="tool-features">
|
|
<ul>
|
|
<li data-translate="tool2Feature1">Bildschirmaufnahme mit Audio (System & Mikrofon)</li>
|
|
<li data-translate="tool2Feature2">Bereichsauswahl oder Vollbild</li>
|
|
<li data-translate="tool2Feature3">Wählbare Qualitätsstufen</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool 3: Video Crawler -->
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<img src="assets/images/icons/shield-play.svg" alt="Security" width="48" height="48">
|
|
</div>
|
|
<h4 data-translate="tool3Title">Video Crawler</h4>
|
|
<div class="tool-features">
|
|
<ul>
|
|
<li data-translate="tool3Feature1">Download von Videos aus 1000+ Plattformen</li>
|
|
<li data-translate="tool3Feature2">Automatischer Untertitel-Download</li>
|
|
<li data-translate="tool3Feature3">Qualitätsauswahl</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool 4: Website Crawler -->
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<img src="assets/images/icons/globe.svg" alt="Global" width="48" height="48">
|
|
</div>
|
|
<h4 data-translate="tool4Title">Website Crawler</h4>
|
|
<div class="tool-features">
|
|
<ul>
|
|
<li data-translate="tool4Feature1">Archiviert Webseiten offline</li>
|
|
<li data-translate="tool4Feature2">Einstellbare Crawling-Tiefe</li>
|
|
<li data-translate="tool4Feature3">Erhält Originalstruktur inkl. CSS, JS & Medien</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool 5: Multimedia Converter -->
|
|
<div class="tool-card">
|
|
<div class="tool-icon">
|
|
<img src="assets/images/icons/cube.svg" alt="Architecture" width="48" height="48">
|
|
</div>
|
|
<h4 data-translate="tool5Title">Multimedia Converter</h4>
|
|
<div class="tool-features">
|
|
<ul>
|
|
<li data-translate="tool5Feature1">Konvertierung von Bildern, Videos, Audio</li>
|
|
<li data-translate="tool5Feature2">Batch-Verarbeitung</li>
|
|
<li data-translate="tool5Feature3">Drag & Drop Unterstützung</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">IntelSight 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">Produkte</a></li>
|
|
<li><a href="mailto:info@intelsight.de" data-translate="footerNavContact">Kontakt</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><a href="mailto:info@intelsight.de">info@intelsight.de</a></p>
|
|
</div>
|
|
</div>
|
|
<p class="copyright" data-translate="copyright">© 2025 IntelSight 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>
|
|
|
|
<!-- IntelSight Analytics wird automatisch durch Cookie Consent geladen -->
|
|
<!-- <script async src="/insights/t.js"></script> ENTFERNT - wird nur bei Zustimmung geladen! -->
|
|
</body>
|
|
</html> |