375 Zeilen
20 KiB
HTML
375 Zeilen
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IntelSight - Sicherheit Made in Germany</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Skip Navigation -->
|
|
<a href="#features" class="skip-nav">Zum Hauptinhalt springen</a>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar" role="navigation" aria-label="Hauptnavigation">
|
|
<div class="nav-container">
|
|
<div class="logo">
|
|
<img src="Logo/intelsight-dark-no-tagline-website-cropped.svg" alt="IntelSight" class="logo-img">
|
|
</div>
|
|
<ul class="nav-menu">
|
|
<li><a href="#features">Funktionen</a></li>
|
|
<li><a href="#security">Sicherheit</a></li>
|
|
<li><a href="#about">Über uns</a></li>
|
|
<li><a href="#contact">Kontakt</a></li>
|
|
</ul>
|
|
<div class="nav-extras">
|
|
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln">DE | EN</button>
|
|
<button class="cta-button" aria-label="Demo anfordern">Demo anfordern</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<video class="hero-video" autoplay muted loop playsinline>
|
|
<source src="assets/videos/background.mp4" type="video/mp4">
|
|
<source src="assets/videos/background.webm" type="video/webm">
|
|
</video>
|
|
<div class="video-overlay"></div>
|
|
<canvas id="particleCanvas" aria-hidden="true"></canvas>
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">
|
|
<span class="subtitle">IntelSight</span>
|
|
<span class="main-title">SICHERHEIT MADE IN GERMANY</span>
|
|
</h1>
|
|
<p class="hero-text">Fortschrittliche Software für moderne Strafverfolgung</p>
|
|
|
|
<div class="hero-cta">
|
|
<button class="primary-button" aria-label="Mehr über IntelSight erfahren">Entdecken Sie mehr</button>
|
|
<button class="secondary-button">Live-Demo</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trust-indicators">
|
|
<div class="indicator">
|
|
<span class="indicator-value" data-target="99.9">0</span>%
|
|
<span class="indicator-label">Verfügbarkeit</span>
|
|
</div>
|
|
<div class="indicator">
|
|
<span class="indicator-value" data-target="500">0</span>+
|
|
<span class="indicator-label">Behörden vertrauen uns</span>
|
|
</div>
|
|
<div class="indicator">
|
|
<span class="indicator-value" data-target="24">0</span>/7
|
|
<span class="indicator-label">Support</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Digital Beat Section -->
|
|
<section class="digital-beat" id="features">
|
|
<div class="container">
|
|
<h2 class="section-title">Der Digitale Takt</h2>
|
|
<p class="section-subtitle">Ein Tag mit IntelSight</p>
|
|
|
|
<div class="timeline">
|
|
<div class="liquid-timeline"></div>
|
|
<div class="timeline-item" data-time="06:00" tabindex="0" role="article" aria-label="06:00 Uhr - Schichtbeginn">
|
|
<div class="timeline-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<h3>Schichtbeginn</h3>
|
|
<p>Automatische Zusammenfassung der Nacht-Ereignisse</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item" data-time="09:00" tabindex="0" role="article" aria-label="09:00 Uhr - Echtzeit-Analyse">
|
|
<div class="timeline-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<h3>Echtzeit-Analyse</h3>
|
|
<p>KI-gestützte Mustererkennung in laufenden Fällen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item" data-time="14:00" tabindex="0" role="article" aria-label="14:00 Uhr - Präventive Sicherheit">
|
|
<div class="timeline-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L2 7V12C2 16.5 5 20.74 12 22C19 20.74 22 16.5 22 12V7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<h3>Präventive Sicherheit</h3>
|
|
<p>Vorhersage-Algorithmen identifizieren Risikobereiche</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item" data-time="22:00" tabindex="0" role="article" aria-label="22:00 Uhr - Tagesbericht">
|
|
<div class="timeline-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 11V17L12 15.5L15 17V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<h3>Tagesbericht</h3>
|
|
<p>Automatisierte Dokumentation und Übergabe</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Intelligence Visualization Section -->
|
|
<section class="intelligence-viz" id="security">
|
|
<canvas id="neuralCanvas"></canvas>
|
|
<div class="data-particles" id="dataParticles"></div>
|
|
<div class="container">
|
|
<h2 class="section-title">Intelligenz visualisiert</h2>
|
|
<div class="viz-container">
|
|
|
|
<div class="feature-nodes">
|
|
<div class="node" data-feature="encryption" tabindex="0" role="article" aria-label="Ende-zu-Ende Verschlüsselung">
|
|
<div class="node-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L3 7V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V7L12 2Z" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M12 11V14M12 14V17M12 14H9M12 14H15" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="node-info">
|
|
<h4>Ende-zu-Ende Verschlüsselung</h4>
|
|
<p>Militärgrade Sicherheit für sensible Daten</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node" data-feature="ai" tabindex="0" role="article" aria-label="KI-Analyse">
|
|
<div class="node-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M12 2V6M12 18V22M22 12H18M6 12H2" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M19.07 4.93L16.24 7.76M7.76 16.24L4.93 19.07" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="node-info">
|
|
<h4>KI-Analyse</h4>
|
|
<p>Mustererkennung in Echtzeit</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node" data-feature="integration" tabindex="0" role="article" aria-label="Nahtlose Integration">
|
|
<div class="node-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 12H16M12 8V16" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="12" cy="5" r="2" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="19" cy="12" r="2" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="12" cy="19" r="2" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="5" cy="12" r="2" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="node-info">
|
|
<h4>Nahtlose Integration</h4>
|
|
<p>Verbindung zu bestehenden Systemen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node" data-feature="compliance" tabindex="0" role="article" aria-label="100% DSGVO-konform">
|
|
<div class="node-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L2 7V12C2 16.5 5 20.74 12 22C19 20.74 22 16.5 22 12V7L12 2Z" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="node-info">
|
|
<h4>100% DSGVO-konform</h4>
|
|
<p>Entwickelt nach deutschem Datenschutzrecht</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- German Engineering Section -->
|
|
<section class="german-engineering" id="about">
|
|
<div class="container">
|
|
<h2 class="section-title">Deutsche Ingenieurskunst</h2>
|
|
<div class="engineering-grid">
|
|
<div class="engineering-card">
|
|
<div class="card-icon">
|
|
<div class="icon-bg"></div>
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Geschwindigkeit</h3>
|
|
<p>Millisekunden-Reaktionszeit bei kritischen Alarmen</p>
|
|
<div class="stat-bar">
|
|
<div class="stat-fill" style="width: 95%"></div>
|
|
<span class="stat-value">95%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="engineering-card">
|
|
<div class="card-icon">
|
|
<div class="icon-bg"></div>
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="12" cy="12" r="6" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="12" cy="12" r="2" fill="currentColor"/>
|
|
<path d="M12 2V6M12 18V22M22 12H18M6 12H2" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Präzision</h3>
|
|
<p>99.97% Genauigkeit bei der Datenanalyse</p>
|
|
<div class="stat-bar">
|
|
<div class="stat-fill" style="width: 99%"></div>
|
|
<span class="stat-value">99%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="engineering-card">
|
|
<div class="card-icon">
|
|
<div class="icon-bg"></div>
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L4 7V11C4 15.42 6.67 19.44 12 20.5C17.33 19.44 20 15.42 20 11V7L12 2Z" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M12 7V12L15 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Zuverlässigkeit</h3>
|
|
<p>Ausfallsichere Redundanz-Systeme</p>
|
|
<div class="stat-bar">
|
|
<div class="stat-fill" style="width: 100%"></div>
|
|
<span class="stat-value">100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Command Center Preview -->
|
|
<section class="command-center">
|
|
<div class="container">
|
|
<h2 class="section-title">Kommandozentrale</h2>
|
|
<div class="preview-container">
|
|
<div class="preview-header">
|
|
<div class="window-controls">
|
|
<span class="control red"></span>
|
|
<span class="control yellow"></span>
|
|
<span class="control green"></span>
|
|
</div>
|
|
<div class="preview-tabs" role="tablist" aria-label="Dashboard Ansichten">
|
|
<button class="tab active" role="tab" aria-selected="true" aria-controls="tab-overview" tabindex="0">Übersicht</button>
|
|
<button class="tab" role="tab" aria-selected="false" aria-controls="tab-analysis" tabindex="-1">Analyse</button>
|
|
<button class="tab" role="tab" aria-selected="false" aria-controls="tab-reports" tabindex="-1">Berichte</button>
|
|
</div>
|
|
</div>
|
|
<div class="preview-content">
|
|
<div class="dashboard-grid">
|
|
<div class="widget threat-level" data-value="LOW">
|
|
<h4>Bedrohungsstufe</h4>
|
|
<div class="threat-indicator low">NIEDRIG</div>
|
|
</div>
|
|
<div class="widget active-cases" data-value="247">
|
|
<h4>Aktive Fälle</h4>
|
|
<div class="case-count" id="liveCounter">0</div>
|
|
</div>
|
|
<div class="widget response-time" data-value="3.2s">
|
|
<h4>Ø Reaktionszeit</h4>
|
|
<div class="time-display" id="responseTimer">0.0s</div>
|
|
</div>
|
|
<div class="widget map-view">
|
|
<h4>Einsatzkarte</h4>
|
|
<div class="map-placeholder">
|
|
<div class="map-points" id="mapPoints"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="final-cta" id="contact">
|
|
<div class="container">
|
|
<div class="cta-content">
|
|
<h2 class="cta-title" data-text="Bereit für die Zukunft der Strafverfolgung?">Bereit für die Zukunft der Strafverfolgung?</h2>
|
|
<p class="cta-subtitle">Erleben Sie IntelSight in Aktion</p>
|
|
<div class="cta-buttons">
|
|
<button class="primary-button large">Demo vereinbaren</button>
|
|
<button class="secondary-button large">Kontakt aufnehmen</button>
|
|
</div>
|
|
<div class="certifications">
|
|
<div class="cert-card">
|
|
<div class="cert-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L3 7V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V7L12 2Z" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M8 12L12 16L16 8" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="cert-name">ISO 27001</div>
|
|
</div>
|
|
<div class="cert-card">
|
|
<div class="cert-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L2 7V12C2 17 6.5 21 12 22C17.5 21 22 17 22 12V7L12 2Z" stroke="currentColor" stroke-width="1.5"/>
|
|
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="cert-name">BSI</div>
|
|
</div>
|
|
<div class="cert-card">
|
|
<div class="cert-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M7 7H17M7 12H17M7 17H12" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="cert-name">DSGVO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h4>IntelSight UG</h4>
|
|
<p>Sicherheit Made in Germany</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Rechtliches</h4>
|
|
<ul>
|
|
<li><a href="#">Impressum</a></li>
|
|
<li><a href="#">Datenschutz</a></li>
|
|
<li><a href="#">AGB</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Kontakt</h4>
|
|
<p>info@intelsight.de</p>
|
|
<p>+49 (0) 30 123456789</p>
|
|
</div>
|
|
</div>
|
|
<p class="copyright">© 2025 IntelSight. Alle Rechte vorbehalten.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |