Add HTML files for new website design
Dieser Commit ist enthalten in:
Claude Project Manager
639
index.html
639
index.html
@ -3,341 +3,370 @@
|
||||
<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">
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Skip Navigation -->
|
||||
<a href="#features" class="skip-nav">Zum Hauptinhalt springen</a>
|
||||
<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="Logo/intelsight-dark-no-tagline-website-cropped.svg" alt="IntelSight" class="logo-img">
|
||||
<img src="assets/images/logos/intelsight-name-light.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>
|
||||
<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">DE | EN</button>
|
||||
<button class="cta-button" aria-label="Demo anfordern">Demo anfordern</button>
|
||||
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</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>
|
||||
<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">
|
||||
|
||||
<div class="hero-content animate-in">
|
||||
<h1 class="hero-title">
|
||||
<span class="subtitle">IntelSight</span>
|
||||
<span class="main-title">SICHERHEIT MADE IN GERMANY</span>
|
||||
<span class="main-title" data-translate="heroTitle">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>
|
||||
<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>
|
||||
|
||||
<div class="trust-indicators">
|
||||
<div class="indicator">
|
||||
<span class="indicator-value" data-target="99.9">0</span>%
|
||||
<span class="indicator-label">Verfügbarkeit</span>
|
||||
<span class="indicator-label" data-translate="indicatorAvailability">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>
|
||||
<span class="indicator-label" data-translate="indicatorTrust">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>
|
||||
<span class="indicator-label" data-translate="indicatorSupport">Support</span>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Digital Beat Section -->
|
||||
<section class="digital-beat" id="features">
|
||||
<!-- About Us Section -->
|
||||
<section class="about-section" id="about">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Der Digitale Takt</h2>
|
||||
<p class="section-subtitle">Ein Tag mit IntelSight</p>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
Spezialist für Behördensoftware
|
||||
</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>
|
||||
Unser Ansatz
|
||||
</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="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 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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 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 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>
|
||||
@ -349,27 +378,45 @@
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>IntelSight UG</h4>
|
||||
<p>Sicherheit Made in Germany</p>
|
||||
<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>Rechtliches</h4>
|
||||
<h4 data-translate="footerNavTitle">Navigation</h4>
|
||||
<ul>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
<li><a href="#">AGB</a></li>
|
||||
<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>Kontakt</h4>
|
||||
<p>info@intelsight.de</p>
|
||||
<p>+49 (0) 30 123456789</p>
|
||||
<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="#" data-translate="footerTerms">AGB</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">© 2025 IntelSight. Alle Rechte vorbehalten.</p>
|
||||
<p class="copyright" data-translate="copyright">© 2025 IntelSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<!-- JavaScript Files -->
|
||||
<script src="js/protection.js"></script>
|
||||
<script src="js/config.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>
|
||||
</body>
|
||||
</html>
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren