Initial commit
Dieser Commit ist enthalten in:
Claude Project Manager
15
.claude/settings.local.json
Normale Datei
15
.claude/settings.local.json
Normale Datei
@ -0,0 +1,15 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(grep:*)",
|
||||
"Bash(mkdir:*)",
|
||||
"Bash(ls:*)",
|
||||
"Bash(git lfs:*)",
|
||||
"Bash(sudo apt-get:*)",
|
||||
"Bash(sudo apt-get install:*)",
|
||||
"Bash(git add:*)",
|
||||
"Bash(rm:*)"
|
||||
],
|
||||
"deny": []
|
||||
}
|
||||
}
|
||||
2
.gitattributes
vendored
Normale Datei
2
.gitattributes
vendored
Normale Datei
@ -0,0 +1,2 @@
|
||||
# Video files
|
||||
# Large image files
|
||||
56
CLAUDE_PROJECT_README.md
Normale Datei
56
CLAUDE_PROJECT_README.md
Normale Datei
@ -0,0 +1,56 @@
|
||||
# website-main
|
||||
|
||||
*This README was automatically generated by Claude Project Manager*
|
||||
|
||||
## Project Overview
|
||||
|
||||
- **Path**: `A:/GiTea/website-main`
|
||||
- **Files**: 11 files
|
||||
- **Size**: 103.7 KB
|
||||
- **Last Modified**: 2025-07-12 15:48
|
||||
|
||||
## Technology Stack
|
||||
|
||||
### Languages
|
||||
- JavaScript
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
CLAUDE_PROJECT_README.md
|
||||
de.svg
|
||||
en.svg
|
||||
index.html
|
||||
README.md
|
||||
robots.txt
|
||||
script.js
|
||||
styles.css
|
||||
Logo/
|
||||
├── intelsight-dark-no-tagline-website-cropped.svg
|
||||
├── intelsight-dark-no-tagline-website.svg
|
||||
└── intelsight-icon-transparent-dark.svg
|
||||
```
|
||||
|
||||
## Key Files
|
||||
|
||||
- `README.md`
|
||||
|
||||
## Claude Integration
|
||||
|
||||
This project is managed with Claude Project Manager. To work with this project:
|
||||
|
||||
1. Open Claude Project Manager
|
||||
2. Click on this project's tile
|
||||
3. Claude will open in the project directory
|
||||
|
||||
## Notes
|
||||
|
||||
*Add your project-specific notes here*
|
||||
|
||||
---
|
||||
|
||||
## Development Log
|
||||
|
||||
- README generated on 2025-07-03 23:25:48
|
||||
- README updated on 2025-07-12 15:48:18
|
||||
- README updated on 2025-07-16 22:31:38
|
||||
53
Logo/intelsight-dark-no-tagline-website-cropped.svg
Normale Datei
53
Logo/intelsight-dark-no-tagline-website-cropped.svg
Normale Datei
@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="360" height="90" viewBox="0 0 360 90" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Accurate shield matching original -->
|
||||
<g id="shield-eye-accurate">
|
||||
<!-- Angular shield shape -->
|
||||
<path d="M 35 30
|
||||
L 65 30
|
||||
L 75 40
|
||||
L 75 80
|
||||
L 50 115
|
||||
L 25 80
|
||||
L 25 40
|
||||
L 35 30 Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3.5"
|
||||
stroke-linejoin="miter"/>
|
||||
|
||||
<!-- Eye centered in shield -->
|
||||
<g transform="translate(50, 65)">
|
||||
<!-- Almond/football shaped eye -->
|
||||
<ellipse cx="0" cy="0" rx="24" ry="13"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3.5"/>
|
||||
|
||||
<!-- Circular iris -->
|
||||
<circle cx="0" cy="0" r="10"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3.5"/>
|
||||
|
||||
<!-- Pupil -->
|
||||
<circle cx="0" cy="0" r="4" fill="currentColor"/>
|
||||
</g>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- Dark version for website - NO BACKGROUND, NO TAGLINE -->
|
||||
<g transform="translate(0, -30)">
|
||||
<!-- Shield centered vertically with text -->
|
||||
<g transform="translate(0, 0)" color="white">
|
||||
<use href="#shield-eye-accurate"/>
|
||||
</g>
|
||||
<!-- Text aligned with shield center - NO TAGLINE -->
|
||||
<text x="90" y="77" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="white">IntelSight</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Nachher Breite: | Höhe: | Größe: 1.7 KiB |
53
Logo/intelsight-dark-no-tagline-website.svg
Normale Datei
53
Logo/intelsight-dark-no-tagline-website.svg
Normale Datei
@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Accurate shield matching original -->
|
||||
<g id="shield-eye-accurate">
|
||||
<!-- Angular shield shape -->
|
||||
<path d="M 35 30
|
||||
L 65 30
|
||||
L 75 40
|
||||
L 75 80
|
||||
L 50 115
|
||||
L 25 80
|
||||
L 25 40
|
||||
L 35 30 Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3.5"
|
||||
stroke-linejoin="miter"/>
|
||||
|
||||
<!-- Eye centered in shield -->
|
||||
<g transform="translate(50, 65)">
|
||||
<!-- Almond/football shaped eye -->
|
||||
<ellipse cx="0" cy="0" rx="24" ry="13"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3.5"/>
|
||||
|
||||
<!-- Circular iris -->
|
||||
<circle cx="0" cy="0" r="10"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3.5"/>
|
||||
|
||||
<!-- Pupil -->
|
||||
<circle cx="0" cy="0" r="4" fill="currentColor"/>
|
||||
</g>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- Dark version for website - NO BACKGROUND, NO TAGLINE -->
|
||||
<g transform="translate(40, 200)">
|
||||
<!-- Shield centered vertically with text -->
|
||||
<g transform="translate(0, -72.5)" color="white">
|
||||
<use href="#shield-eye-accurate"/>
|
||||
</g>
|
||||
<!-- Text aligned with shield center - NO TAGLINE -->
|
||||
<text x="110" y="5" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="white">IntelSight</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Nachher Breite: | Höhe: | Größe: 1.7 KiB |
40
Logo/intelsight-icon-transparent-dark.svg
Normale Datei
40
Logo/intelsight-icon-transparent-dark.svg
Normale Datei
@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Shield only - dark version (white on transparent) -->
|
||||
<g transform="translate(100, 100)">
|
||||
<!-- Center the shield -->
|
||||
<g transform="translate(-50, -72.5)">
|
||||
<!-- Angular shield shape -->
|
||||
<path d="M 35 30
|
||||
L 65 30
|
||||
L 75 40
|
||||
L 75 80
|
||||
L 50 115
|
||||
L 25 80
|
||||
L 25 40
|
||||
L 35 30 Z"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-width="3.5"
|
||||
stroke-linejoin="miter"/>
|
||||
|
||||
<!-- Eye centered in shield -->
|
||||
<g transform="translate(50, 65)">
|
||||
<!-- Almond/football shaped eye -->
|
||||
<ellipse cx="0" cy="0" rx="24" ry="13"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-width="3.5"/>
|
||||
|
||||
<!-- Circular iris -->
|
||||
<circle cx="0" cy="0" r="10"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-width="3.5"/>
|
||||
|
||||
<!-- Pupil -->
|
||||
<circle cx="0" cy="0" r="4" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Nachher Breite: | Höhe: | Größe: 1.2 KiB |
1
README.md
Normale Datei
1
README.md
Normale Datei
@ -0,0 +1 @@
|
||||
# website
|
||||
2
de.svg
Normale Datei
2
de.svg
Normale Datei
@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet"><path d="M31.9 2C18.8 2 7.7 10.4 3.6 22h56.6C56.1 10.4 45 2 31.9 2z" fill="#3e4347"></path><path d="M31.9 62c13.1 0 24.2-8.3 28.3-20H3.6c4.1 11.7 15.2 20 28.3 20z" fill="#ffe62e"></path><path d="M3.6 22c-1.1 3.1-1.7 6.5-1.7 10s.6 6.9 1.7 10h56.6c1.1-3.1 1.7-6.5 1.7-10s-.6-6.9-1.7-10H3.6" fill="#ed4c5c"></path></svg>
|
||||
|
Nachher Breite: | Höhe: | Größe: 668 B |
50
en.svg
Normale Datei
50
en.svg
Normale Datei
@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g fill="#2a5f9e">
|
||||
|
||||
<path d="M22 60.3V46.5l-10.3 7.6c2.9 2.7 6.4 4.8 10.3 6.2">
|
||||
|
||||
</path>
|
||||
|
||||
<path d="M42 60.3c3.9-1.4 7.4-3.5 10.3-6.2L42 46.4v13.9">
|
||||
|
||||
</path>
|
||||
|
||||
<path d="M3.7 42c.3 1 .7 1.9 1.2 2.9L8.8 42H3.7">
|
||||
|
||||
</path>
|
||||
|
||||
<path d="M55.2 42l3.9 2.9c.4-.9.8-1.9 1.2-2.9h-5.1">
|
||||
|
||||
</path>
|
||||
|
||||
</g>
|
||||
|
||||
<g fill="#ffffff">
|
||||
|
||||
<path d="M23.5 38H2.6c.3 1.4.7 2.7 1.1 4h5.1l-3.9 2.9c.8 1.7 1.7 3.2 2.8 4.7L18 42h4v2l-11.7 8.6l1.4 1.4L22 46.5v13.8c1.3.5 2.6.8 4 1.1V38h-2.5">
|
||||
|
||||
</path>
|
||||
|
||||
<path d="M61.4 38H38v23.4c1.4-.3 2.7-.7 4-1.1V46.5L52.3 54c1.4-1.3 2.6-2.7 3.8-4.2L45.4 42h6.8l6.1 4.5c.3-.5.6-1.1.8-1.6L55.2 42h5.1c.4-1.3.8-2.6 1.1-4">
|
||||
|
||||
</path>
|
||||
|
||||
</g>
|
||||
|
||||
<g fill="#ed4c5c">
|
||||
|
||||
<path d="M7.7 49.6c.8 1.1 1.6 2.1 2.5 3.1L22 44.1v-2h-4L7.7 49.6">
|
||||
|
||||
</path>
|
||||
|
||||
<path d="M45.5 42l10.7 7.8c.4-.5.7-1 1.1-1.5c.1-.1.1-.2.2-.2c.3-.5.7-1.1 1-1.6L52.2 42h-6.7">
|
||||
|
||||
</path>
|
||||
|
||||
</g>
|
||||
|
||||
<g fill="#2a5f9e">
|
||||
|
Nachher Breite: | Höhe: | Größe: 2.2 KiB |
375
index.html
Normale Datei
375
index.html
Normale Datei
@ -0,0 +1,375 @@
|
||||
<!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>
|
||||
2
robots.txt
Normale Datei
2
robots.txt
Normale Datei
@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
689
script.js
Normale Datei
689
script.js
Normale Datei
@ -0,0 +1,689 @@
|
||||
// Particle Canvas Animation
|
||||
const canvas = document.getElementById('particleCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const particles = [];
|
||||
const particleCount = 100;
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.size = Math.random() * 3 + 1;
|
||||
this.speedX = Math.random() * 3 - 1.5;
|
||||
this.speedY = Math.random() * 3 - 1.5;
|
||||
this.opacity = Math.random() * 0.5 + 0.2;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
|
||||
if (this.x > canvas.width) this.x = 0;
|
||||
else if (this.x < 0) this.x = canvas.width;
|
||||
|
||||
if (this.y > canvas.height) this.y = 0;
|
||||
else if (this.y < 0) this.y = canvas.height;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = `rgba(0, 212, 255, ${this.opacity})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
particles[i].update();
|
||||
particles[i].draw();
|
||||
}
|
||||
|
||||
connectParticles();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function connectParticles() {
|
||||
for (let a = 0; a < particles.length; a++) {
|
||||
for (let b = a; b < particles.length; b++) {
|
||||
const distance = Math.sqrt(
|
||||
Math.pow(particles[a].x - particles[b].x, 2) +
|
||||
Math.pow(particles[a].y - particles[b].y, 2)
|
||||
);
|
||||
|
||||
if (distance < 100) {
|
||||
ctx.strokeStyle = `rgba(0, 212, 255, ${0.2 * (1 - distance / 100)})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particles[a].x, particles[a].y);
|
||||
ctx.lineTo(particles[b].x, particles[b].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
// Resize canvas
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
});
|
||||
|
||||
// Navbar scroll effect - DEAKTIVIERT
|
||||
// const navbar = document.querySelector('.navbar');
|
||||
// window.addEventListener('scroll', () => {
|
||||
// if (window.scrollY > 50) {
|
||||
// navbar.classList.add('scrolled');
|
||||
// } else {
|
||||
// navbar.classList.remove('scrolled');
|
||||
// }
|
||||
// });
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Interactive Icon Animation
|
||||
const icon = document.getElementById('interactiveIcon');
|
||||
if (icon) {
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const rect = icon.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
mouseX = (e.clientX - centerX) / 20;
|
||||
mouseY = (e.clientY - centerY) / 20;
|
||||
|
||||
icon.style.transform = `perspective(1000px) rotateY(${mouseX}deg) rotateX(${-mouseY}deg)`;
|
||||
});
|
||||
}
|
||||
|
||||
// Trust Indicators Counter Animation
|
||||
const counters = document.querySelectorAll('.indicator-value');
|
||||
const speed = 200;
|
||||
|
||||
const animateCounter = (counter) => {
|
||||
const target = +counter.getAttribute('data-target');
|
||||
const increment = target / speed;
|
||||
|
||||
const updateCounter = () => {
|
||||
const current = +counter.innerText.replace('%', '').replace('+', '').replace('/7', '');
|
||||
|
||||
if (current < target) {
|
||||
counter.innerText = Math.ceil(current + increment);
|
||||
setTimeout(updateCounter, 10);
|
||||
} else {
|
||||
if (counter.getAttribute('data-target') === '99.9') {
|
||||
counter.innerText = target + '%';
|
||||
} else if (counter.getAttribute('data-target') === '500') {
|
||||
counter.innerText = target + '+';
|
||||
} else if (counter.getAttribute('data-target') === '24') {
|
||||
counter.innerText = target + '/7';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
updateCounter();
|
||||
};
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observerOptions = {
|
||||
threshold: 0.3,
|
||||
rootMargin: '0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// Animate counters
|
||||
if (entry.target.classList.contains('trust-indicators')) {
|
||||
counters.forEach(counter => animateCounter(counter));
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
|
||||
// Animate timeline items with new effect
|
||||
if (entry.target.classList.contains('timeline')) {
|
||||
const items = entry.target.querySelectorAll('.timeline-item');
|
||||
items.forEach((item, index) => {
|
||||
setTimeout(() => {
|
||||
item.classList.add('visible');
|
||||
}, index * 300);
|
||||
});
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
|
||||
// Animate feature nodes
|
||||
if (entry.target.classList.contains('feature-nodes')) {
|
||||
const nodes = entry.target.querySelectorAll('.node');
|
||||
nodes.forEach((node, index) => {
|
||||
setTimeout(() => {
|
||||
node.style.opacity = '1';
|
||||
node.style.transform = 'translateY(0)';
|
||||
}, index * 150);
|
||||
});
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements
|
||||
document.querySelector('.trust-indicators').style.opacity = '0';
|
||||
observer.observe(document.querySelector('.trust-indicators'));
|
||||
observer.observe(document.querySelector('.timeline'));
|
||||
|
||||
// Set initial states for feature nodes
|
||||
document.querySelectorAll('.node').forEach(node => {
|
||||
node.style.opacity = '0';
|
||||
node.style.transform = 'translateY(30px)';
|
||||
node.style.transition = 'all 0.6s ease';
|
||||
});
|
||||
observer.observe(document.querySelector('.feature-nodes'));
|
||||
|
||||
// Language Toggle
|
||||
const langToggle = document.querySelector('.lang-toggle');
|
||||
const translations = {
|
||||
de: {
|
||||
features: 'Funktionen',
|
||||
security: 'Sicherheit',
|
||||
about: 'Über uns',
|
||||
contact: 'Kontakt',
|
||||
requestDemo: 'Demo anfordern',
|
||||
heroTitle: 'SICHERHEIT MADE IN GERMANY',
|
||||
heroText: 'Fortschrittliche Software für moderne Strafverfolgung',
|
||||
discoverMore: 'Entdecken Sie mehr',
|
||||
liveDemo: 'Live-Demo',
|
||||
availability: 'Verfügbarkeit',
|
||||
trustedBy: 'Behörden vertrauen uns',
|
||||
support: 'Support',
|
||||
digitalBeat: 'Der Digitale Takt',
|
||||
dayWithIntelSight: 'Ein Tag mit IntelSight',
|
||||
shiftStart: 'Schichtbeginn',
|
||||
shiftStartDesc: 'Automatische Zusammenfassung der Nacht-Ereignisse',
|
||||
realTimeAnalysis: 'Echtzeit-Analyse',
|
||||
realTimeAnalysisDesc: 'KI-gestützte Mustererkennung in laufenden Fällen',
|
||||
preventiveSecurity: 'Präventive Sicherheit',
|
||||
preventiveSecurityDesc: 'Vorhersage-Algorithmen identifizieren Risikobereiche',
|
||||
dailyReport: 'Tagesbericht',
|
||||
dailyReportDesc: 'Automatisierte Dokumentation und Übergabe',
|
||||
intelligenceViz: 'Intelligenz visualisiert',
|
||||
encryption: 'Ende-zu-Ende Verschlüsselung',
|
||||
encryptionDesc: 'Militärgrade Sicherheit für sensible Daten',
|
||||
aiAnalysis: 'KI-Analyse',
|
||||
aiAnalysisDesc: 'Mustererkennung in Echtzeit',
|
||||
integration: 'Nahtlose Integration',
|
||||
integrationDesc: 'Verbindung zu bestehenden Systemen',
|
||||
compliance: '100% DSGVO-konform',
|
||||
complianceDesc: 'Entwickelt nach deutschem Datenschutzrecht',
|
||||
germanEngineering: 'Deutsche Ingenieurskunst',
|
||||
speed: 'Geschwindigkeit',
|
||||
speedDesc: 'Millisekunden-Reaktionszeit bei kritischen Alarmen',
|
||||
precision: 'Präzision',
|
||||
precisionDesc: '99.97% Genauigkeit bei der Datenanalyse',
|
||||
reliability: 'Zuverlässigkeit',
|
||||
reliabilityDesc: 'Ausfallsichere Redundanz-Systeme',
|
||||
commandCenter: 'Kommandozentrale',
|
||||
overview: 'Übersicht',
|
||||
analysis: 'Analyse',
|
||||
reports: 'Berichte',
|
||||
threatLevel: 'Bedrohungsstufe',
|
||||
low: 'NIEDRIG',
|
||||
activeCases: 'Aktive Fälle',
|
||||
responseTime: 'Ø Reaktionszeit',
|
||||
deploymentMap: 'Einsatzkarte',
|
||||
ctaTitle: 'Bereit für die Zukunft der Strafverfolgung?',
|
||||
ctaSubtitle: 'Erleben Sie IntelSight in Aktion',
|
||||
scheduleDemo: 'Demo vereinbaren',
|
||||
getInTouch: 'Kontakt aufnehmen',
|
||||
legal: 'Rechtliches',
|
||||
imprint: 'Impressum',
|
||||
privacy: 'Datenschutz',
|
||||
terms: 'AGB',
|
||||
contact: 'Kontakt',
|
||||
allRights: 'Alle Rechte vorbehalten.'
|
||||
},
|
||||
en: {
|
||||
features: 'Features',
|
||||
security: 'Security',
|
||||
about: 'About',
|
||||
contact: 'Contact',
|
||||
requestDemo: 'Request Demo',
|
||||
heroTitle: 'SECURITY MADE IN GERMANY',
|
||||
heroText: 'Advanced Software for Modern Law Enforcement',
|
||||
discoverMore: 'Discover More',
|
||||
liveDemo: 'Live Demo',
|
||||
availability: 'Availability',
|
||||
trustedBy: 'Authorities trust us',
|
||||
support: 'Support',
|
||||
digitalBeat: 'The Digital Beat',
|
||||
dayWithIntelSight: 'A Day with IntelSight',
|
||||
shiftStart: 'Shift Start',
|
||||
shiftStartDesc: 'Automatic summary of night events',
|
||||
realTimeAnalysis: 'Real-time Analysis',
|
||||
realTimeAnalysisDesc: 'AI-powered pattern recognition in ongoing cases',
|
||||
preventiveSecurity: 'Preventive Security',
|
||||
preventiveSecurityDesc: 'Predictive algorithms identify risk areas',
|
||||
dailyReport: 'Daily Report',
|
||||
dailyReportDesc: 'Automated documentation and handover',
|
||||
intelligenceViz: 'Intelligence Visualized',
|
||||
encryption: 'End-to-End Encryption',
|
||||
encryptionDesc: 'Military-grade security for sensitive data',
|
||||
aiAnalysis: 'AI Analysis',
|
||||
aiAnalysisDesc: 'Real-time pattern recognition',
|
||||
integration: 'Seamless Integration',
|
||||
integrationDesc: 'Connection to existing systems',
|
||||
compliance: '100% GDPR Compliant',
|
||||
complianceDesc: 'Developed according to German data protection law',
|
||||
germanEngineering: 'German Engineering',
|
||||
speed: 'Speed',
|
||||
speedDesc: 'Millisecond response time for critical alerts',
|
||||
precision: 'Precision',
|
||||
precisionDesc: '99.97% accuracy in data analysis',
|
||||
reliability: 'Reliability',
|
||||
reliabilityDesc: 'Fail-safe redundancy systems',
|
||||
commandCenter: 'Command Center',
|
||||
overview: 'Overview',
|
||||
analysis: 'Analysis',
|
||||
reports: 'Reports',
|
||||
threatLevel: 'Threat Level',
|
||||
low: 'LOW',
|
||||
activeCases: 'Active Cases',
|
||||
responseTime: 'Avg Response Time',
|
||||
deploymentMap: 'Deployment Map',
|
||||
ctaTitle: 'Ready for the Future of Law Enforcement?',
|
||||
ctaSubtitle: 'Experience IntelSight in Action',
|
||||
scheduleDemo: 'Schedule Demo',
|
||||
getInTouch: 'Get in Touch',
|
||||
legal: 'Legal',
|
||||
imprint: 'Imprint',
|
||||
privacy: 'Privacy',
|
||||
terms: 'Terms',
|
||||
contact: 'Contact',
|
||||
allRights: 'All rights reserved.'
|
||||
}
|
||||
};
|
||||
|
||||
let currentLang = 'de';
|
||||
|
||||
langToggle.addEventListener('click', () => {
|
||||
currentLang = currentLang === 'de' ? 'en' : 'de';
|
||||
langToggle.textContent = currentLang === 'de' ? 'DE | EN' : 'EN | DE';
|
||||
langToggle.setAttribute('data-lang', currentLang);
|
||||
updateLanguage();
|
||||
});
|
||||
|
||||
function updateLanguage() {
|
||||
const t = translations[currentLang];
|
||||
|
||||
// Navigation
|
||||
document.querySelector('.nav-menu li:nth-child(1) a').textContent = t.features;
|
||||
document.querySelector('.nav-menu li:nth-child(2) a').textContent = t.security;
|
||||
document.querySelector('.nav-menu li:nth-child(3) a').textContent = t.about;
|
||||
document.querySelector('.nav-menu li:nth-child(4) a').textContent = t.contact;
|
||||
document.querySelector('.cta-button').textContent = t.requestDemo;
|
||||
|
||||
// Hero
|
||||
document.querySelector('.main-title').textContent = t.heroTitle;
|
||||
document.querySelector('.hero-text').textContent = t.heroText;
|
||||
document.querySelector('.primary-button').textContent = t.discoverMore;
|
||||
document.querySelector('.secondary-button').textContent = t.liveDemo;
|
||||
|
||||
// Trust Indicators
|
||||
document.querySelectorAll('.indicator-label')[0].textContent = t.availability;
|
||||
document.querySelectorAll('.indicator-label')[1].textContent = t.trustedBy;
|
||||
document.querySelectorAll('.indicator-label')[2].textContent = t.support;
|
||||
|
||||
// Update all other sections similarly...
|
||||
}
|
||||
|
||||
// Interactive Node Effects
|
||||
document.querySelectorAll('.node').forEach(node => {
|
||||
node.addEventListener('mouseenter', function() {
|
||||
const icon = this.querySelector('.node-icon');
|
||||
icon.style.transform = 'scale(1.2) rotate(5deg)';
|
||||
});
|
||||
|
||||
node.addEventListener('mouseleave', function() {
|
||||
const icon = this.querySelector('.node-icon');
|
||||
icon.style.transform = 'scale(1) rotate(0deg)';
|
||||
});
|
||||
});
|
||||
|
||||
// Dashboard Widget Animations
|
||||
document.querySelectorAll('.widget').forEach(widget => {
|
||||
widget.addEventListener('mouseenter', function() {
|
||||
this.style.boxShadow = '0 5px 20px rgba(0, 212, 255, 0.3)';
|
||||
});
|
||||
|
||||
widget.addEventListener('mouseleave', function() {
|
||||
this.style.boxShadow = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// Tab Switching
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Form handling for demo requests
|
||||
document.querySelectorAll('.primary-button, .secondary-button, .cta-button').forEach(button => {
|
||||
if (button.textContent.includes('Demo') || button.textContent.includes('demo')) {
|
||||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
alert('Demo-Anfrage-Funktion würde hier implementiert werden');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Glitch effect on hover for main title
|
||||
const mainTitle = document.querySelector('.main-title');
|
||||
let glitchInterval;
|
||||
|
||||
mainTitle.addEventListener('mouseenter', () => {
|
||||
let count = 0;
|
||||
glitchInterval = setInterval(() => {
|
||||
mainTitle.style.textShadow = `
|
||||
${Math.random() * 5}px ${Math.random() * 5}px 0 rgba(0, 212, 255, 0.5),
|
||||
${Math.random() * -5}px ${Math.random() * 5}px 0 rgba(255, 0, 128, 0.5)
|
||||
`;
|
||||
count++;
|
||||
if (count > 5) {
|
||||
clearInterval(glitchInterval);
|
||||
mainTitle.style.textShadow = 'none';
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// Mouse parallax effect for hero content - DEAKTIVIERT
|
||||
// const heroContent = document.querySelector('.hero-content');
|
||||
// document.addEventListener('mousemove', (e) => {
|
||||
// const x = (window.innerWidth / 2 - e.clientX) / 50;
|
||||
// const y = (window.innerHeight / 2 - e.clientY) / 50;
|
||||
//
|
||||
// heroContent.style.transform = `translateX(${x}px) translateY(${y}px)`;
|
||||
// });
|
||||
|
||||
// Neural Network Visualization
|
||||
function initNeuralNetwork() {
|
||||
const canvas = document.getElementById('neuralCanvas');
|
||||
if (!canvas) return;
|
||||
|
||||
const section = document.querySelector('.intelligence-viz');
|
||||
if (!section) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = section.offsetHeight;
|
||||
|
||||
const nodes = [];
|
||||
const connections = [];
|
||||
const nodeCount = 20;
|
||||
|
||||
// Create nodes
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
vx: (Math.random() - 0.5) * 0.5,
|
||||
vy: (Math.random() - 0.5) * 0.5,
|
||||
radius: Math.random() * 3 + 2,
|
||||
pulsePhase: Math.random() * Math.PI * 2
|
||||
});
|
||||
}
|
||||
|
||||
// Create connections
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
for (let j = i + 1; j < nodeCount; j++) {
|
||||
if (Math.random() < 0.15) {
|
||||
connections.push({ from: i, to: j, strength: Math.random() });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.02)'; // Weniger opak für subtileren Effekt
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Update and draw connections
|
||||
connections.forEach(conn => {
|
||||
const from = nodes[conn.from];
|
||||
const to = nodes[conn.to];
|
||||
const distance = Math.sqrt((to.x - from.x) ** 2 + (to.y - from.y) ** 2);
|
||||
|
||||
if (distance < 300) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(from.x, from.y);
|
||||
ctx.lineTo(to.x, to.y);
|
||||
ctx.strokeStyle = `rgba(0, 212, 255, ${(1 - distance / 300) * 0.15 * conn.strength})`; // Schwächere Linien
|
||||
ctx.lineWidth = conn.strength * 1.5;
|
||||
ctx.stroke();
|
||||
|
||||
// Data flow animation
|
||||
const flowProgress = (Date.now() / 1000) % 1;
|
||||
const flowX = from.x + (to.x - from.x) * flowProgress;
|
||||
const flowY = from.y + (to.y - from.y) * flowProgress;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(flowX, flowY, 2, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, 0.8)';
|
||||
ctx.fill();
|
||||
}
|
||||
});
|
||||
|
||||
// Update and draw nodes
|
||||
nodes.forEach((node, i) => {
|
||||
// Update position
|
||||
node.x += node.vx;
|
||||
node.y += node.vy;
|
||||
|
||||
// Bounce off walls
|
||||
if (node.x < 0 || node.x > canvas.width) node.vx *= -1;
|
||||
if (node.y < 0 || node.y > canvas.height) node.vy *= -1;
|
||||
|
||||
// Keep in bounds
|
||||
node.x = Math.max(0, Math.min(canvas.width, node.x));
|
||||
node.y = Math.max(0, Math.min(canvas.height, node.y));
|
||||
|
||||
// Draw node with pulse effect
|
||||
const pulseSize = Math.sin(Date.now() / 500 + node.pulsePhase) * 0.3 + 1;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, node.radius * pulseSize, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(0, 212, 255, 0.4)'; // Weniger intensive Nodes
|
||||
ctx.fill();
|
||||
|
||||
// Glow effect
|
||||
const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, node.radius * pulseSize * 4);
|
||||
gradient.addColorStop(0, 'rgba(0, 212, 255, 0.15)');
|
||||
gradient.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, node.radius * pulseSize * 4, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
// Data Particles
|
||||
function initDataParticles() {
|
||||
const container = document.getElementById('dataParticles');
|
||||
if (!container) return;
|
||||
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'data-particle';
|
||||
particle.style.left = Math.random() * 100 + '%';
|
||||
particle.style.top = Math.random() * 100 + '%';
|
||||
particle.style.animationDelay = Math.random() * 20 + 's';
|
||||
particle.style.animationDuration = (20 + Math.random() * 10) + 's';
|
||||
container.appendChild(particle);
|
||||
}
|
||||
}
|
||||
|
||||
// Live Dashboard Functions
|
||||
function initLiveDashboard() {
|
||||
// Animated Counter
|
||||
const counter = document.getElementById('liveCounter');
|
||||
if (counter) {
|
||||
let currentValue = 0;
|
||||
const targetValue = 247;
|
||||
const increment = targetValue / 100;
|
||||
|
||||
const updateCounter = () => {
|
||||
currentValue += increment;
|
||||
if (currentValue < targetValue) {
|
||||
counter.textContent = Math.floor(currentValue);
|
||||
requestAnimationFrame(updateCounter);
|
||||
} else {
|
||||
counter.textContent = targetValue;
|
||||
// Continue with live updates
|
||||
setInterval(() => {
|
||||
const variation = Math.floor(Math.random() * 10) - 5;
|
||||
counter.textContent = Math.max(0, parseInt(counter.textContent) + variation);
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
updateCounter();
|
||||
}
|
||||
|
||||
// Response Timer
|
||||
const timer = document.getElementById('responseTimer');
|
||||
if (timer) {
|
||||
setInterval(() => {
|
||||
const time = (Math.random() * 2 + 2).toFixed(1);
|
||||
timer.textContent = time + 's';
|
||||
timer.style.color = time < 3 ? '#4CAF50' : time < 4 ? '#FFC107' : '#FF4444';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Map Points
|
||||
const mapPoints = document.getElementById('mapPoints');
|
||||
if (mapPoints) {
|
||||
// Create initial points
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const point = document.createElement('div');
|
||||
point.className = 'map-point';
|
||||
point.style.left = Math.random() * 80 + 10 + '%';
|
||||
point.style.top = Math.random() * 80 + 10 + '%';
|
||||
point.style.animationDelay = Math.random() * 2 + 's';
|
||||
mapPoints.appendChild(point);
|
||||
}
|
||||
|
||||
// Add new points periodically
|
||||
setInterval(() => {
|
||||
if (mapPoints.children.length < 10) {
|
||||
const point = document.createElement('div');
|
||||
point.className = 'map-point';
|
||||
point.style.left = Math.random() * 80 + 10 + '%';
|
||||
point.style.top = Math.random() * 80 + 10 + '%';
|
||||
point.style.animation = 'pointPulse 2s ease-in-out infinite, fadeIn 0.5s ease-out';
|
||||
mapPoints.appendChild(point);
|
||||
|
||||
setTimeout(() => {
|
||||
point.style.animation = 'pointPulse 2s ease-in-out infinite';
|
||||
}, 500);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// Parallax Scrolling
|
||||
function initParallax() {
|
||||
const sections = document.querySelectorAll('section');
|
||||
const transitions = document.querySelectorAll('.section-transition');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
|
||||
// Parallax for sections
|
||||
sections.forEach((section, index) => {
|
||||
const rate = scrolled * -0.5;
|
||||
const yPos = -(scrolled * 0.01 * index);
|
||||
|
||||
if (section.classList.contains('digital-beat') ||
|
||||
section.classList.contains('intelligence-viz') ||
|
||||
section.classList.contains('german-engineering') ||
|
||||
section.classList.contains('command-center')) {
|
||||
section.style.transform = `translateY(${yPos}px)`;
|
||||
}
|
||||
});
|
||||
|
||||
// Parallax for transitions
|
||||
transitions.forEach((transition, index) => {
|
||||
const rect = transition.getBoundingClientRect();
|
||||
const speed = 0.5;
|
||||
|
||||
if (rect.bottom >= 0 && rect.top <= window.innerHeight) {
|
||||
const yPos = -(scrolled * speed * 0.1);
|
||||
transition.style.transform = `translateY(${yPos}px)`;
|
||||
}
|
||||
});
|
||||
|
||||
// Parallax for specific elements
|
||||
// Hero content bleibt statisch (keine Parallax)
|
||||
// const heroContent = document.querySelector('.hero-content');
|
||||
// if (heroContent) {
|
||||
// heroContent.style.transform = `translateY(${scrolled * 0.3}px)`;
|
||||
// }
|
||||
|
||||
// Hero video bleibt statisch
|
||||
// const heroVideo = document.querySelector('.hero-video');
|
||||
// if (heroVideo) {
|
||||
// heroVideo.style.transform = `translate(-50%, ${-50 + scrolled * 0.1}%)`;
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize everything
|
||||
window.addEventListener('load', () => {
|
||||
// Add loaded class for animations
|
||||
document.body.classList.add('loaded');
|
||||
|
||||
// Start animations
|
||||
setTimeout(() => {
|
||||
document.querySelector('.hero-content').style.opacity = '1';
|
||||
document.querySelector('.hero-content').style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
|
||||
// Initialize neural network
|
||||
initNeuralNetwork();
|
||||
initDataParticles();
|
||||
initLiveDashboard();
|
||||
initParallax();
|
||||
});
|
||||
2213
styles.css
Normale Datei
2213
styles.css
Normale Datei
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
In neuem Issue referenzieren
Einen Benutzer sperren