Archiv: Letzter Stand der Webseite vor Promotion der Vorschau
Vollstaendiger Snapshot des Live-Standes von /opt/v2-Docker/aegis-website/html am 2026-04-26, kurz bevor die Inhalte aus /vorschau/ in den Root verschoben und die alte Webseite ausgemustert wurde. Dient als historische Referenz; nicht fuer aktive Entwicklung gedacht. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
claude-dev
16
.claude/settings.local.json
Normale Datei
16
.claude/settings.local.json
Normale Datei
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"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:*)",
|
||||||
|
"Bash(hostname)"
|
||||||
|
],
|
||||||
|
"deny": []
|
||||||
|
}
|
||||||
|
}
|
||||||
3
.gitattributes
vendored
Normale Datei
3
.gitattributes
vendored
Normale Datei
@@ -0,0 +1,3 @@
|
|||||||
|
# Video files
|
||||||
|
# Large image files
|
||||||
|
*.mp4 filter=lfs diff=lfs merge=lfs -text
|
||||||
3
.gitignore
vendored
Normale Datei
3
.gitignore
vendored
Normale Datei
@@ -0,0 +1,3 @@
|
|||||||
|
# Lagebild-Daten (werden per Cron-Sync vom Monitor regeneriert)
|
||||||
|
lagebild/data/
|
||||||
|
lagen/*/data/
|
||||||
148
CLAUDE.md
Normale Datei
148
CLAUDE.md
Normale Datei
@@ -0,0 +1,148 @@
|
|||||||
|
# CLAUDE.md - AegisSight Website
|
||||||
|
|
||||||
|
RELATED_DOCS:
|
||||||
|
COOKIE_CONSENT_IMPLEMENTATION.md: "Cookie-Banner Implementierung, GDPR, Testing"
|
||||||
|
DATENSCHUTZ_ANALYTICS.md: "Textbausteine fuer Datenschutzerklaerung"
|
||||||
|
PROFESSIONAL_TOOLBOX_CONTENT.md: "Backup-HTML fuer entfernte Produktkarte"
|
||||||
|
VIDEO_UPLOAD_INSTRUCTIONS.md: "Anleitung fuer manuelle Video-Uploads (Git-Limit)"
|
||||||
|
|
||||||
|
PROJECT: Website
|
||||||
|
STATUS: PRODUCTION
|
||||||
|
URL: https://aegis-sight.de
|
||||||
|
CONTAINER: aegis-website-nginx
|
||||||
|
|
||||||
|
COMPANY:
|
||||||
|
name: AegisSight UG (haftungsbeschraenkt)
|
||||||
|
domain: aegis-sight.de
|
||||||
|
email: info@aegis-sight.de
|
||||||
|
|
||||||
|
TECHNOLOGY:
|
||||||
|
type: Static Website
|
||||||
|
build_process: NONE
|
||||||
|
deployment: Docker/nginx
|
||||||
|
|
||||||
|
frontend:
|
||||||
|
- HTML5
|
||||||
|
- CSS3 (modular)
|
||||||
|
- JavaScript ES6+
|
||||||
|
- SVG
|
||||||
|
|
||||||
|
features:
|
||||||
|
- multi_language: [DE, EN]
|
||||||
|
- responsive: mobile-first
|
||||||
|
- video_backgrounds: true
|
||||||
|
- cookie_consent: GDPR-compliant
|
||||||
|
- security_headers: enabled
|
||||||
|
|
||||||
|
STRUCTURE:
|
||||||
|
root_files:
|
||||||
|
- index.html: Hauptseite
|
||||||
|
- impressum.html: Impressum DE
|
||||||
|
- impressum-en.html: Impressum EN
|
||||||
|
- datenschutz.html: Datenschutz DE
|
||||||
|
- datenschutz-en.html: Datenschutz EN
|
||||||
|
- accountforger-video.html: Produkt-Demo
|
||||||
|
- robots.txt: SEO-Konfiguration
|
||||||
|
- cookie-consent.js: GDPR Cookie-System
|
||||||
|
- cookie-consent.css: Cookie-Banner Styles
|
||||||
|
|
||||||
|
directories:
|
||||||
|
assets:
|
||||||
|
fonts: [Inter, Bebas Neue]
|
||||||
|
images:
|
||||||
|
icons: UI-Icons (SVG)
|
||||||
|
flags: Laenderflaggen
|
||||||
|
logos: "Logo+Schrift_Rechts.svg"
|
||||||
|
videos: "~300MB - Hero-Videos, AFv6.mp4"
|
||||||
|
|
||||||
|
css:
|
||||||
|
- main.css: Kern-Styles
|
||||||
|
- animations-enhanced.css: Animationen
|
||||||
|
- mobile.css: Mobile Responsive
|
||||||
|
- fonts.css: Typografie
|
||||||
|
|
||||||
|
js:
|
||||||
|
- main.js: Einstiegspunkt
|
||||||
|
- translations.js: Mehrsprachigkeit
|
||||||
|
- components.js: UI-Komponenten
|
||||||
|
- animations.js: Animationssystem
|
||||||
|
|
||||||
|
docs: Rechtliche PDFs
|
||||||
|
|
||||||
|
lagen:
|
||||||
|
iran-konflikt:
|
||||||
|
- index.html: Lagebild-Seite (Leaflet, Tabs, Timeline)
|
||||||
|
- lagebild.js: Datenladung, Rendering, Interaktionen
|
||||||
|
- lagebild.css: Dark-Theme Styling
|
||||||
|
- data/: current.json + Snapshots (sync alle 5min)
|
||||||
|
|
||||||
|
vorschau:
|
||||||
|
- index.html: Produktseite AegisSight Monitor (Passwort-Gate)
|
||||||
|
css:
|
||||||
|
- style.css: Light-Mode Design (Navy/Gold Akzente)
|
||||||
|
js:
|
||||||
|
- app.js: Hero-Videos, 3D-Karussell, Leaflet-Karte, Live-Daten, Kontaktformular
|
||||||
|
|
||||||
|
PAGES:
|
||||||
|
homepage:
|
||||||
|
sections: [Hero mit Video, Ueber uns, Loesungen, Kontakt]
|
||||||
|
legal:
|
||||||
|
- Impressum (DE/EN)
|
||||||
|
- Datenschutz (DE/EN)
|
||||||
|
product:
|
||||||
|
- AccountForger Video-Demo
|
||||||
|
lagen:
|
||||||
|
url_struktur: /lagen/{thema}/
|
||||||
|
redirect: /lagebild/ -> 301 -> /lagen/iran-konflikt/
|
||||||
|
aktiv:
|
||||||
|
- iran-konflikt: Live-Lagebild Irankonflikt (ehemals /lagebild/)
|
||||||
|
geplant:
|
||||||
|
- (2 weitere Lagen in Vorbereitung)
|
||||||
|
vorschau:
|
||||||
|
url: /vorschau/
|
||||||
|
zweck: Produktseite AegisSight Monitor (ersetzt spaeter die Hauptseite)
|
||||||
|
auth: JavaScript SHA-256 Passwort-Gate (kein Benutzername)
|
||||||
|
design: Light-Mode, Navy/Gold Akzente, SVG-Wellen/Diagonale Divider
|
||||||
|
sections: [Hero mit Video (clip-path Chevron), Problem (dark), Workflow 3-Schritte, Live-Stats, 3D-Karussell mit Lagebild-Text, Leaflet-Karte (gekoppelt an Karussell), Faktenprüfung-Statement, Features (5 Cards zentriert), CTA, Unser Versprechen]
|
||||||
|
daten: Fetcht /lagen/iran-konflikt/data/summary.json (~116 KB)
|
||||||
|
karussell: 3D-Perspektive, 3 Cards (Iran live + 2 Platzhalter), Karte wechselt mit
|
||||||
|
karte: Leaflet mit Pulse-Markern, Dark Popups/Legende, gekoppelt an aktive Lage
|
||||||
|
kontaktformular: Popup-Modal (Name, Organisation, E-Mail, Nachricht) -> /api/contact -> SMTP
|
||||||
|
icons: monitor.svg + languages.svg (Lucide) hinzugefuegt
|
||||||
|
|
||||||
|
DEVELOPMENT:
|
||||||
|
translations: js/translations.js
|
||||||
|
large_files: "assets/videos/ (~300MB)"
|
||||||
|
design: mobile-first responsive
|
||||||
|
|
||||||
|
SERVICES:
|
||||||
|
contact-form:
|
||||||
|
script: /opt/v2-Docker/aegis-website/contact-form.py
|
||||||
|
service: aegis-contact.service
|
||||||
|
port: 127.0.0.1:8074
|
||||||
|
nginx: /api/contact -> 127.0.0.1:8074
|
||||||
|
zweck: Kontaktformular-Handler (SMTP an info@aegis-sight.de)
|
||||||
|
rate_limit: 3 Anfragen pro IP / 10 Min
|
||||||
|
|
||||||
|
DEPLOYMENT:
|
||||||
|
container: aegis-website-nginx
|
||||||
|
server: nginx (static files)
|
||||||
|
ssl: enabled
|
||||||
|
security_headers: enabled
|
||||||
|
rate_limiting: configured
|
||||||
|
|
||||||
|
CHANGE_LOG:
|
||||||
|
2026-01-08:
|
||||||
|
- "Rebrand: IntelSight -> AegisSight"
|
||||||
|
- "Neues Logo: Logo+Schrift_Rechts.svg"
|
||||||
|
- "Email: info@aegis-sight.de"
|
||||||
|
- "Footer: Dynamisches Jahr, AGB entfernt"
|
||||||
|
|
||||||
|
Last-Updated: 2026-04-06
|
||||||
|
|
||||||
|
RULES:
|
||||||
|
neue_html_seiten:
|
||||||
|
- "Jede neue HTML-Datei MUSS im <head> folgende Favicon-Tags enthalten:"
|
||||||
|
- "<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\">"
|
||||||
|
- "<link rel=\"apple-touch-icon\" href=\"/assets/images/logos/AegisSightLogo_NavyGold.svg\">"
|
||||||
|
- "Fuer Unterverzeichnisse relative Pfade anpassen, z.B. ../favicon.svg"
|
||||||
535
COOKIE_CONSENT_IMPLEMENTATION.md
Normale Datei
535
COOKIE_CONSENT_IMPLEMENTATION.md
Normale Datei
@@ -0,0 +1,535 @@
|
|||||||
|
# ANALYTICS IMPLEMENTATION - KOMPLETT-GUIDE
|
||||||
|
|
||||||
|
**AegisSight UG**
|
||||||
|
**Datum:** 2026-03-20
|
||||||
|
**Version:** 2.0
|
||||||
|
**Status:** Implementation Complete
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PHASE 1: BESTANDSAUFNAHME
|
||||||
|
|
||||||
|
## Dienste & Tracking Katalog
|
||||||
|
|
||||||
|
### **Dienste im Einsatz:**
|
||||||
|
- **AegisSight Analytics (Umami v3.0.3)** - Self-Hosted, Deutschland
|
||||||
|
- Keine Google Analytics
|
||||||
|
- Keine Facebook Pixel
|
||||||
|
- Keine Third-Party CDNs
|
||||||
|
- Keine Social Media Widgets
|
||||||
|
|
||||||
|
### **Cookies:**
|
||||||
|
|
||||||
|
**Keine.** Umami arbeitet vollständig cookieless. Es werden weder Session-Cookies noch Tracking-Cookies gesetzt. Die Identifikation erfolgt ohne Cookies und ohne Fingerprinting.
|
||||||
|
|
||||||
|
| Eintrag | Zweck | Typ | Opt-In? |
|
||||||
|
|---------|-------|-----|---------|
|
||||||
|
| `analytics-consent` (LocalStorage) | Consent-Status | LocalStorage | Nein (technisch) |
|
||||||
|
|
||||||
|
### **Tracking-Daten (anonymisiert):**
|
||||||
|
- Browser, OS, Device, Screen Resolution
|
||||||
|
- Land, Region (kein Stadtlevel, kein GeoIP-Lookup)
|
||||||
|
- Seiten, Referrer, Session-Dauer
|
||||||
|
- Traffic Source, UTM-Parameter
|
||||||
|
|
||||||
|
### **Personenbezug:** Nein
|
||||||
|
|
||||||
|
Umami speichert keine IP-Adressen und verwendet kein Fingerprinting. Alle Daten sind aggregiert und nicht auf einzelne Nutzer rückführbar.
|
||||||
|
|
||||||
|
**Rechtsgrundlage:** Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse) - da cookieless und ohne Personenbezug ist kein Opt-In zwingend erforderlich. Der Consent-Banner wird dennoch aus Transparenzgründen eingesetzt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PHASE 2: ENTSCHEIDUNG & DESIGN
|
||||||
|
|
||||||
|
## **Entscheidung: CUSTOM BANNER**
|
||||||
|
|
||||||
|
**Gründe:**
|
||||||
|
- Nur 1 Dienst - CMP wäre Overkill
|
||||||
|
- Volle Kontrolle, keine Abhängigkeiten
|
||||||
|
- Schneller (<5KB vs. 50-100KB für CMP)
|
||||||
|
- Kostenlos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **UI-Design: Slim Layer**
|
||||||
|
|
||||||
|
### Banner (Primary):
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ Website-Analyse │
|
||||||
|
│ │
|
||||||
|
│ Text: Cookieless Analytics, Self- │
|
||||||
|
│ Hosted in Deutschland, keine │
|
||||||
|
│ Weitergabe an Dritte... │
|
||||||
|
│ │
|
||||||
|
│ [Details & Einstellungen] │
|
||||||
|
│ [Alles akzeptieren] [Nur notwendige] │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Settings Modal:
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Analyse-Einstellungen [×] │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ☑ Notwendig (immer aktiv) │
|
||||||
|
│ ☐ Statistik & Analyse │
|
||||||
|
│ └─ AegisSight Analytics (Umami) │
|
||||||
|
│ • Keine Cookies │
|
||||||
|
│ • Keine IP-Speicherung │
|
||||||
|
│ • Self-Hosted, Deutschland │
|
||||||
|
│ │
|
||||||
|
│ [Auswahl speichern] [Alle akz.] │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Texte (DE/EN)**
|
||||||
|
|
||||||
|
**Deutsch:**
|
||||||
|
- Titel: "Website-Analyse"
|
||||||
|
- Text: "Wir nutzen cookielose Analyse-Software auf unserem eigenen Server in Deutschland. Es werden keine persönlichen Daten gespeichert und nichts an Dritte weitergegeben."
|
||||||
|
- Buttons: "Alles akzeptieren" / "Nur notwendige"
|
||||||
|
|
||||||
|
**Englisch:**
|
||||||
|
- Title: "Website Analytics"
|
||||||
|
- Text: "We use cookieless analytics software on our own server in Germany. No personal data is stored and nothing is shared with third parties."
|
||||||
|
- Buttons: "Accept all" / "Only necessary"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PHASE 3: IMPLEMENTATIONSPLAN
|
||||||
|
|
||||||
|
## **3.1 Gating-Pattern**
|
||||||
|
|
||||||
|
```
|
||||||
|
Page Load
|
||||||
|
↓
|
||||||
|
Check LocalStorage['analytics-consent']
|
||||||
|
↓
|
||||||
|
├─→ null → Show Banner + Block Tracking
|
||||||
|
├─→ 'accepted' → Load Umami Script
|
||||||
|
└─→ 'rejected' → Block Tracking
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ablauf:** Das Umami-Script `/analytics-und-so/datenblick.js` wird erst nach Zustimmung geladen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **3.2 Script-Einbindung**
|
||||||
|
|
||||||
|
### Umami Tracking-Script (wird dynamisch geladen bei Consent):
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
src="/analytics-und-so/datenblick.js"
|
||||||
|
data-website-id="598ef5fd-d2dc-4540-9e65-602889981dac"
|
||||||
|
></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### API-Endpoint:
|
||||||
|
```
|
||||||
|
POST /analytics-und-so/api/erfassen
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **3.3 Storage-Schema**
|
||||||
|
|
||||||
|
### LocalStorage Keys:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Consent Status
|
||||||
|
"analytics-consent": {
|
||||||
|
value: "accepted" | "rejected",
|
||||||
|
expires: 1774051200000 // Timestamp (12 Monate)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Consent Details (Audit-Trail)
|
||||||
|
"analytics-consent-details": {
|
||||||
|
timestamp: "2026-03-20T12:00:00Z",
|
||||||
|
version: "2.0",
|
||||||
|
categories: { necessary: true, analytics: true },
|
||||||
|
language: "de",
|
||||||
|
gpcSignal: false
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **3.4 Footer-Link (Persistent)**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<footer>
|
||||||
|
<a href="#" id="cookie-settings-link">Analyse-Einstellungen</a>
|
||||||
|
</footer>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Funktion:** Öffnet Banner erneut, ermöglicht Widerruf
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **3.5 Re-Prompt Regeln**
|
||||||
|
|
||||||
|
**Banner erneut zeigen bei:**
|
||||||
|
1. Consent abgelaufen (nach 12 Monaten)
|
||||||
|
2. Version-Change (z.B. 2.0 → 2.1)
|
||||||
|
3. User löscht LocalStorage
|
||||||
|
4. Klick auf "Analyse-Einstellungen"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **3.6 Global Privacy Control (GPC)**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
if (navigator.globalPrivacyControl === true) {
|
||||||
|
// Auto-reject analytics
|
||||||
|
localStorage.setItem('analytics-consent', JSON.stringify({
|
||||||
|
value: 'rejected',
|
||||||
|
expires: Date.now() + 365 * 24 * 60 * 60 * 1000
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PHASE 4: UMSETZUNG + TESTS
|
||||||
|
|
||||||
|
## **4.1 Dateien**
|
||||||
|
|
||||||
|
### **1. cookie-consent.css**
|
||||||
|
- Responsive Design (Mobile-First)
|
||||||
|
- Accessibility (Focus-Trap, ARIA, Keyboard)
|
||||||
|
- Animations (Fade-In, Slide-Up)
|
||||||
|
- Dark Mode kompatibel
|
||||||
|
|
||||||
|
### **2. cookie-consent.js**
|
||||||
|
- Consent Management Logic
|
||||||
|
- GPC Detection
|
||||||
|
- LocalStorage mit Expiry
|
||||||
|
- Multilingual (DE/EN)
|
||||||
|
- Public API
|
||||||
|
- Version Control
|
||||||
|
- Dynamisches Laden von `/analytics-und-so/datenblick.js`
|
||||||
|
|
||||||
|
### **3. DATENSCHUTZ_ANALYTICS.md**
|
||||||
|
- Fertige Datenschutzerklärung
|
||||||
|
- DSGVO-konforme Texte
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **4.2 Features implementiert**
|
||||||
|
|
||||||
|
- **Opt-In vor Tracking** (Gating)
|
||||||
|
- **Backdrop-Overlay** (verhindert Interaktion)
|
||||||
|
- **Two-Step Design** (Banner → Settings)
|
||||||
|
- **Consent-Versionierung** (Re-Prompt bei Updates)
|
||||||
|
- **GPC/DNT Support** (Auto-Reject)
|
||||||
|
- **LocalStorage mit Expiry** (12 Monate)
|
||||||
|
- **Audit-Trail** (Consent-Details)
|
||||||
|
- **Multilingual** (DE/EN)
|
||||||
|
- **Accessibility** (ARIA, Focus-Trap, Keyboard)
|
||||||
|
- **Responsive** (Mobile-optimiert)
|
||||||
|
- **Public API** (programmatischer Zugriff)
|
||||||
|
- **Cookieless Tracking** (keine Cookies nötig)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **4.3 Test-Checkliste**
|
||||||
|
|
||||||
|
### **Funktional:**
|
||||||
|
- [ ] Banner erscheint beim ersten Besuch
|
||||||
|
- [ ] "Alles akzeptieren" lädt `/analytics-und-so/datenblick.js`
|
||||||
|
- [ ] "Nur notwendige" blockiert Script-Laden
|
||||||
|
- [ ] Re-Visit: Kein Banner (Consent gespeichert)
|
||||||
|
- [ ] Footer-Link öffnet Banner erneut
|
||||||
|
- [ ] Widerruf funktioniert (Accept → Reject)
|
||||||
|
- [ ] GPC-Signal wird erkannt und respektiert
|
||||||
|
- [ ] Version-Change löst Re-Prompt aus
|
||||||
|
|
||||||
|
### **Script-Integration:**
|
||||||
|
- [ ] Script hat korrektes `data-website-id="598ef5fd-d2dc-4540-9e65-602889981dac"`
|
||||||
|
- [ ] Pageview wird an `/analytics-und-so/api/erfassen` gesendet
|
||||||
|
- [ ] Keine Cookies im Browser nach Tracking
|
||||||
|
|
||||||
|
### **Accessibility & Responsive:**
|
||||||
|
- [ ] Keyboard-Navigation funktioniert (Tab, Enter, Esc)
|
||||||
|
- [ ] Screen Reader liest Banner korrekt vor
|
||||||
|
- [ ] Mobile: Buttons sind touchbar, kein horizontaler Scroll
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **4.4 Browser-Kompatibilität**
|
||||||
|
|
||||||
|
| Browser | Version | Status |
|
||||||
|
|---------|---------|--------|
|
||||||
|
| Chrome | 120+ | - |
|
||||||
|
| Firefox | 121+ | - |
|
||||||
|
| Safari | 17+ | - |
|
||||||
|
| Edge | 120+ | - |
|
||||||
|
| Chrome Mobile | 120+ | - |
|
||||||
|
| Safari iOS | 17+ | - |
|
||||||
|
|
||||||
|
**Minimum Support:** ES6 (2015+), LocalStorage, Fetch API
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PHASE 5: DATENSCHUTZERKLÄRUNG
|
||||||
|
|
||||||
|
## **5.1 Textbausteine**
|
||||||
|
|
||||||
|
**Datei:** `DATENSCHUTZ_ANALYTICS.md`
|
||||||
|
|
||||||
|
**Enthält:**
|
||||||
|
- Art und Umfang der Datenverarbeitung
|
||||||
|
- Rechtsgrundlage (Art. 6 Abs. 1 lit. f DSGVO - berechtigtes Interesse)
|
||||||
|
- Hinweis auf cookieloses Tracking
|
||||||
|
- Keine IP-Speicherung, kein Fingerprinting
|
||||||
|
- Self-Hosted auf eigenem Server (Deutschland)
|
||||||
|
- Keine Datenübermittlung an Dritte
|
||||||
|
- Widerruf der Einwilligung
|
||||||
|
- GPC-Unterstützung
|
||||||
|
- Betroffenenrechte (Art. 15-21 DSGVO)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **5.2 Integration in Website**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- /datenschutz.html -->
|
||||||
|
<section id="analytics">
|
||||||
|
<h2>4. Website-Analyse</h2>
|
||||||
|
<p>Wir nutzen AegisSight Analytics (Umami), eine cookielose, datenschutzfreundliche
|
||||||
|
Analyse-Software. Diese wird auf unserem eigenen Server in Deutschland betrieben.
|
||||||
|
Es werden keine Cookies gesetzt, keine IP-Adressen gespeichert und kein
|
||||||
|
Fingerprinting eingesetzt. Die erhobenen Daten sind nicht auf einzelne Personen
|
||||||
|
rückführbar.</p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **5.3 Rechtliche Checkliste**
|
||||||
|
|
||||||
|
- [x] Opt-In vor Tracking (Consent-Banner)
|
||||||
|
- [x] Widerruf ermöglichen (Footer-Link)
|
||||||
|
- [x] Datenschutzerklärung (vollständig)
|
||||||
|
- [x] Rechtsgrundlage benannt (Art. 6 I f DSGVO)
|
||||||
|
- [x] Hinweis cookieloses Tracking
|
||||||
|
- [x] Betroffenenrechte (Art. 15-21)
|
||||||
|
- [ ] Impressum vollständig (muss geprüft werden)
|
||||||
|
- [ ] Aufsichtsbehörde (muss eingefügt werden)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# DEPLOYMENT-ANLEITUNG
|
||||||
|
|
||||||
|
## **1. Dateien auf Server**
|
||||||
|
|
||||||
|
```
|
||||||
|
/var/www/html/
|
||||||
|
├── cookie-consent.css
|
||||||
|
├── cookie-consent.js
|
||||||
|
└── cookie-consent-demo.html (optional)
|
||||||
|
```
|
||||||
|
|
||||||
|
## **2. Umami-Infrastruktur**
|
||||||
|
|
||||||
|
```
|
||||||
|
Analytics-System: Umami v3.0.3 (Node.js/Next.js)
|
||||||
|
Datenbank: PostgreSQL
|
||||||
|
Script-Pfad: /analytics-und-so/datenblick.js
|
||||||
|
API-Endpoint: /analytics-und-so/api/erfassen
|
||||||
|
Website-ID: 598ef5fd-d2dc-4540-9e65-602889981dac
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **3. In HTML-Seiten integrieren**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Ihre Seite</title>
|
||||||
|
<link rel="stylesheet" href="/cookie-consent.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Inhalt -->
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<nav>
|
||||||
|
<a href="/datenschutz">Datenschutz</a>
|
||||||
|
<a href="/impressum">Impressum</a>
|
||||||
|
<a href="#" id="cookie-settings-link">Analyse-Einstellungen</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Cookie Consent MUSS VOR allem anderen JS geladen werden -->
|
||||||
|
<script src="/cookie-consent.js"></script>
|
||||||
|
|
||||||
|
<!-- Umami-Script wird automatisch bei Consent geladen -->
|
||||||
|
<!-- NICHT direkt einbinden! -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **4. Container neu laden**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker exec aegis-website-nginx nginx -s reload
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# WARTUNG & UPDATES
|
||||||
|
|
||||||
|
## **Vierteljährlich:**
|
||||||
|
- [ ] Umami-Version prüfen und ggf. updaten
|
||||||
|
- [ ] Datenschutzerklärung überprüfen
|
||||||
|
|
||||||
|
## **Jährlich:**
|
||||||
|
- [ ] Rechtsgrundlagen aktualisieren
|
||||||
|
- [ ] Consent-Version erhöhen (bei Änderungen)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# TROUBLESHOOTING
|
||||||
|
|
||||||
|
## **Problem: Banner erscheint nicht**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// In Browser-Console:
|
||||||
|
localStorage.removeItem('analytics-consent');
|
||||||
|
localStorage.removeItem('analytics-consent-details');
|
||||||
|
location.reload();
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Problem: Tracking funktioniert nicht trotz Zustimmung**
|
||||||
|
|
||||||
|
**Check 1:** LocalStorage
|
||||||
|
```javascript
|
||||||
|
JSON.parse(localStorage.getItem('analytics-consent'))
|
||||||
|
// Erwartet: { value: "accepted", expires: ... }
|
||||||
|
```
|
||||||
|
|
||||||
|
**Check 2:** Script geladen?
|
||||||
|
```javascript
|
||||||
|
document.querySelector('script[src="/analytics-und-so/datenblick.js"]')
|
||||||
|
// Erwartet: <script> Element
|
||||||
|
```
|
||||||
|
|
||||||
|
**Check 3:** Website-ID korrekt?
|
||||||
|
```javascript
|
||||||
|
document.querySelector('script[data-website-id]')?.dataset.websiteId
|
||||||
|
// Erwartet: "598ef5fd-d2dc-4540-9e65-602889981dac"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## **Problem: GPC wird nicht erkannt**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
navigator.globalPrivacyControl
|
||||||
|
// Firefox mit Tracking-Schutz: true
|
||||||
|
// Normale Browser: undefined
|
||||||
|
```
|
||||||
|
|
||||||
|
GPC ist optional - nicht alle Browser unterstützen es.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# API-REFERENZ
|
||||||
|
|
||||||
|
## **Public API (JavaScript)**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Banner anzeigen
|
||||||
|
CookieConsent.show();
|
||||||
|
|
||||||
|
// Banner verstecken
|
||||||
|
CookieConsent.hide();
|
||||||
|
|
||||||
|
// Settings Modal öffnen
|
||||||
|
CookieConsent.showSettings();
|
||||||
|
|
||||||
|
// Alle akzeptieren (programmatisch)
|
||||||
|
CookieConsent.acceptAll();
|
||||||
|
|
||||||
|
// Alle ablehnen (programmatisch)
|
||||||
|
CookieConsent.rejectAll();
|
||||||
|
|
||||||
|
// Status abfragen
|
||||||
|
const status = CookieConsent.getStatus();
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
consent: "accepted" | "rejected" | null,
|
||||||
|
analytics: true | false,
|
||||||
|
version: "2.0",
|
||||||
|
timestamp: "2026-03-20T12:00:00Z",
|
||||||
|
expires: 1774051200000,
|
||||||
|
gpc: false
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Sprache setzen
|
||||||
|
CookieConsent.setLanguage('en'); // oder 'de'
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# CHANGELOG
|
||||||
|
|
||||||
|
## Version 2.0 (2026-03-20)
|
||||||
|
|
||||||
|
### Geändert:
|
||||||
|
- **Umstieg auf Umami v3.0.3** (ersetzt altes PHP-basiertes System)
|
||||||
|
- **Cookieless Tracking** - keine Cookies mehr nötig
|
||||||
|
- **Neues Tracking-Script:** `/analytics-und-so/datenblick.js`
|
||||||
|
- **Neuer API-Endpoint:** `/analytics-und-so/api/erfassen`
|
||||||
|
- **PostgreSQL** als Datenbank (ersetzt SQLite/Flatfile)
|
||||||
|
- **Rechtsgrundlage** auf Art. 6 I f DSGVO geändert (berechtigtes Interesse)
|
||||||
|
- **LocalStorage-Keys** umbenannt (`analytics-consent` statt `insights-consent`)
|
||||||
|
- Texte angepasst (keine Cookie-Referenzen mehr)
|
||||||
|
- Test-Checklisten gekürzt
|
||||||
|
|
||||||
|
### Entfernt:
|
||||||
|
- Cookie `_insights_session`
|
||||||
|
- PHP-Backend und zugehörige Konfiguration
|
||||||
|
- GeoIP-Datenbank (nicht mehr benötigt)
|
||||||
|
- Monatliche GeoIP-Update-Routine
|
||||||
|
|
||||||
|
## Version 1.0 (2025-11-09)
|
||||||
|
|
||||||
|
### Hinzugefügt:
|
||||||
|
- Custom Cookie Banner (Slim Layer Design)
|
||||||
|
- Settings Modal (Two-Step)
|
||||||
|
- GPC Support, Multilingual (DE/EN)
|
||||||
|
- LocalStorage mit Expiry, Consent Versioning
|
||||||
|
- Accessibility (ARIA, Focus-Trap), Responsive Design
|
||||||
|
- Public API, Datenschutzerklärung
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# LIZENZ & CREDITS
|
||||||
|
|
||||||
|
**Erstellt für:** AegisSight UG
|
||||||
|
**Datum:** 2026-03-20
|
||||||
|
**Lizenz:** Proprietär (AegisSight)
|
||||||
|
|
||||||
|
**Rechtliche Hinweise:**
|
||||||
|
- Keine Garantie für vollständige Rechtssicherheit
|
||||||
|
- Datenschutzerklärung sollte von einem Anwalt geprüft werden
|
||||||
|
- Individuelle Anpassungen je nach Use Case erforderlich
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Status: PRODUKTIV**
|
||||||
253
DATENSCHUTZ_ANALYTICS.md
Normale Datei
253
DATENSCHUTZ_ANALYTICS.md
Normale Datei
@@ -0,0 +1,253 @@
|
|||||||
|
# Datenschutzerklärung - Abschnitt Website-Analyse
|
||||||
|
|
||||||
|
> **Textbaustein für /datenschutz Seite**
|
||||||
|
> AegisSight UG
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Website-Analyse (Self-Hosted Analytics)
|
||||||
|
|
||||||
|
### 4.1 Art und Umfang der Datenverarbeitung
|
||||||
|
|
||||||
|
Wir verwenden **AegisSight Analytics** (basierend auf [Umami](https://umami.is), Open-Source-Software, Version 3.0.3) als selbst gehostetes Analyse-Tool, um die Nutzung unserer Website zu verstehen und kontinuierlich zu verbessern. Das Tool läuft ausschließlich auf unseren eigenen Servern in Deutschland und gibt keine Daten an Drittanbieter weiter.
|
||||||
|
|
||||||
|
**Wichtig:** AegisSight Analytics arbeitet **vollständig cookieless** – es werden keine Cookies auf Ihrem Gerät gesetzt. Es findet **keine IP-Speicherung** und **kein Fingerprinting** statt. Umami anonymisiert alle Daten vollständig.
|
||||||
|
|
||||||
|
#### Erhobene Daten:
|
||||||
|
|
||||||
|
**Technische Daten:**
|
||||||
|
- Browser-Typ und Version (z.B. Chrome 120, Firefox 121)
|
||||||
|
- Verwendetes Betriebssystem (z.B. Windows 11, macOS 14)
|
||||||
|
- Bildschirmauflösung (z.B. 1920x1080 Pixel)
|
||||||
|
- Datum, Uhrzeit und Zeitzone des Zugriffs
|
||||||
|
- Besuchte Seiten (URL-Pfade)
|
||||||
|
- Verweildauer auf einzelnen Seiten
|
||||||
|
- Referrer-URL (vorherige Website, von der Sie kamen)
|
||||||
|
|
||||||
|
**Standortdaten:**
|
||||||
|
- Ungefährer Standort auf Land-/Regions-Ebene (ermittelt zur Laufzeit, IP-Adresse wird **nicht gespeichert**)
|
||||||
|
- Land und Region
|
||||||
|
|
||||||
|
**Nutzungsdaten:**
|
||||||
|
- Anzahl der Seitenaufrufe pro Besuch
|
||||||
|
- Klickpfade und Navigation durch die Website
|
||||||
|
- Session-Dauer (Gesamtzeit des Besuchs)
|
||||||
|
- Bounce-Rate (Verlassen nach einer Seite)
|
||||||
|
|
||||||
|
**Marketing-Daten:**
|
||||||
|
- Herkunft des Besuchs (Direkteingabe, Suchmaschine, Social Media, andere Website)
|
||||||
|
- UTM-Parameter bei Marketing-Kampagnen (utm_source, utm_medium, utm_campaign, utm_term, utm_content)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.2 Keine Cookies, keine IP-Speicherung, kein Fingerprinting
|
||||||
|
|
||||||
|
AegisSight Analytics (Umami v3.0.3) setzt **keine Cookies** und speichert **keine personenbezogenen Daten**:
|
||||||
|
|
||||||
|
- **Keine Cookies:** Es werden keinerlei Cookies oder LocalStorage-Einträge für Analysezwecke auf Ihrem Gerät gesetzt.
|
||||||
|
- **Keine IP-Speicherung:** Ihre IP-Adresse wird zur Laufzeit für die Standortbestimmung (Land/Region) verwendet, aber **niemals gespeichert oder protokolliert**.
|
||||||
|
- **Kein Fingerprinting:** Es werden keine Browser-Fingerprints oder Hashes zur Wiedererkennung erstellt.
|
||||||
|
- **Keine geräteübergreifende Nachverfolgung:** Eine Identifikation einzelner Nutzer über Besuche hinweg ist technisch nicht möglich.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.3 Rechtsgrundlage
|
||||||
|
|
||||||
|
Die Verarbeitung erfolgt auf Grundlage Ihrer **Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO**.
|
||||||
|
|
||||||
|
Sie erteilen Ihre Einwilligung durch Klick auf "Alle akzeptieren" oder "Auswahl speichern" im Cookie-Banner beim ersten Besuch unserer Website. Bei Einwilligung wird das Tracking-Script geladen; bei Ablehnung wird es **nicht geladen** und es findet keinerlei Datenerhebung statt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.4 Zweck der Verarbeitung
|
||||||
|
|
||||||
|
Wir nutzen die erhobenen Daten für folgende Zwecke:
|
||||||
|
|
||||||
|
1. **Reichweitenmessung:** Ermittlung der Besucherzahlen und Seitenaufrufe
|
||||||
|
2. **Nutzerverhalten-Analyse:** Verstehen, welche Inhalte interessant sind und wie Nutzer durch die Website navigieren
|
||||||
|
3. **Technische Optimierung:** Anpassung der Website an verwendete Geräte und Browser
|
||||||
|
4. **Performance-Monitoring:** Identifikation technischer Probleme und langsamer Seiten
|
||||||
|
5. **Marketing-Erfolgsmessung:** Bewertung der Wirksamkeit von Kampagnen und Traffic-Quellen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.5 Empfänger der Daten
|
||||||
|
|
||||||
|
**Es erfolgt KEINE Weitergabe an Drittanbieter.**
|
||||||
|
|
||||||
|
Alle Daten werden ausschließlich auf unseren eigenen Servern verarbeitet und gespeichert:
|
||||||
|
|
||||||
|
- **Server-Standort:** Deutschland (Hetzner Cloud, Nürnberg)
|
||||||
|
- **Zugriff:** Nur autorisierte Mitarbeiter unseres Unternehmens zu Analyse-Zwecken
|
||||||
|
- **Keine externen Dienste:** Wir nutzen kein Google Analytics, Facebook Pixel oder ähnliche Third-Party-Tools
|
||||||
|
- **Open Source:** Umami ist quelloffene Software – der Code ist öffentlich einsehbar und überprüfbar
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.6 Datenübermittlung in Drittländer
|
||||||
|
|
||||||
|
Es findet **keine Übermittlung in Drittländer** (außerhalb EU/EWR) statt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.7 Speicherdauer
|
||||||
|
|
||||||
|
- **Analytics-Daten:** Automatische Löschung nach **90 Tagen**
|
||||||
|
- **Consent-Status:** Speicherung für **12 Monate**, danach erneute Abfrage
|
||||||
|
|
||||||
|
Nach Ablauf dieser Fristen werden die Daten unwiderruflich gelöscht.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.8 Widerruf der Einwilligung
|
||||||
|
|
||||||
|
Sie können Ihre Einwilligung zur Datenverarbeitung **jederzeit widerrufen**, ohne dass die Rechtmäßigkeit der bis zum Widerruf erfolgten Verarbeitung berührt wird.
|
||||||
|
|
||||||
|
**Widerruf-Möglichkeiten:**
|
||||||
|
|
||||||
|
1. **Cookie-Banner:** Klicken Sie auf den Link "Cookie-Einstellungen" im Footer dieser Website und wählen Sie "Nur notwendige"
|
||||||
|
2. **E-Mail:** Senden Sie uns eine E-Mail an datenschutz@aegis-sight.de
|
||||||
|
|
||||||
|
Nach Widerruf wird das Tracking-Script nicht mehr geladen und es erfolgt keine weitere Datenerhebung.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.9 Global Privacy Control (GPC)
|
||||||
|
|
||||||
|
Wir respektieren das **Global Privacy Control (GPC)**-Signal Ihres Browsers.
|
||||||
|
|
||||||
|
Wenn Ihr Browser das GPC-Signal sendet (z.B. Firefox mit aktiviertem Tracking-Schutz, Brave Browser), wird die Analyse automatisch deaktiviert, ohne dass Sie den Cookie-Banner bestätigen müssen.
|
||||||
|
|
||||||
|
**So aktivieren Sie GPC:**
|
||||||
|
- **Firefox:** Einstellungen → Datenschutz & Sicherheit → Verbesserter Schutz vor Aktivitätenverfolgung
|
||||||
|
- **Brave:** Standardmäßig aktiviert
|
||||||
|
- **Chrome/Edge:** Erweiterungen wie "OptMeowt" installieren
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.10 Ihre Rechte
|
||||||
|
|
||||||
|
Sie haben folgende Rechte bezüglich Ihrer Daten:
|
||||||
|
|
||||||
|
#### Art. 15 DSGVO - Auskunftsrecht
|
||||||
|
Sie können Auskunft über die zu Ihrer Person gespeicherten Daten verlangen.
|
||||||
|
|
||||||
|
#### Art. 16 DSGVO - Recht auf Berichtigung
|
||||||
|
Sie können die Berichtigung unrichtiger Daten verlangen.
|
||||||
|
|
||||||
|
#### Art. 17 DSGVO - Recht auf Löschung
|
||||||
|
Sie können die Löschung Ihrer Daten verlangen, sofern keine gesetzlichen Aufbewahrungspflichten entgegenstehen.
|
||||||
|
|
||||||
|
#### Art. 18 DSGVO - Recht auf Einschränkung
|
||||||
|
Sie können die Einschränkung der Verarbeitung Ihrer Daten verlangen.
|
||||||
|
|
||||||
|
#### Art. 20 DSGVO - Recht auf Datenübertragbarkeit
|
||||||
|
Sie können die Herausgabe Ihrer Daten in einem strukturierten Format verlangen.
|
||||||
|
|
||||||
|
#### Art. 21 DSGVO - Widerspruchsrecht
|
||||||
|
Sie können der Verarbeitung Ihrer Daten jederzeit widersprechen.
|
||||||
|
|
||||||
|
#### Art. 77 DSGVO - Beschwerderecht
|
||||||
|
Sie haben das Recht, sich bei einer Aufsichtsbehörde zu beschweren:
|
||||||
|
|
||||||
|
**Zuständige Aufsichtsbehörde:**
|
||||||
|
[Name der zuständigen Datenschutzbehörde]
|
||||||
|
[Adresse]
|
||||||
|
[Telefon]
|
||||||
|
[E-Mail]
|
||||||
|
[Website]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.11 Opt-Out
|
||||||
|
|
||||||
|
Sie können die Analyse durch folgende Maßnahmen verhindern:
|
||||||
|
|
||||||
|
1. **Cookie-Banner:** Wählen Sie "Nur notwendige" beim ersten Besuch – das Tracking-Script wird dann nicht geladen
|
||||||
|
2. **Cookie-Einstellungen:** Klicken Sie jederzeit auf "Cookie-Einstellungen" im Footer, um Ihre Auswahl zu ändern
|
||||||
|
3. **JavaScript deaktivieren:** Tracking funktioniert nur mit aktiviertem JavaScript
|
||||||
|
4. **Ad-Blocker:** Viele Ad-Blocker blockieren auch Analytics-Skripte
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.12 Technische Sicherheitsmaßnahmen
|
||||||
|
|
||||||
|
Zum Schutz Ihrer Daten setzen wir folgende Maßnahmen ein:
|
||||||
|
|
||||||
|
- **SSL/TLS-Verschlüsselung:** Alle Daten werden verschlüsselt übertragen (HTTPS)
|
||||||
|
- **Keine IP-Speicherung:** IP-Adressen werden nicht gespeichert oder protokolliert
|
||||||
|
- **Cookieless Tracking:** Keine Cookies oder lokale Speicherung auf Ihrem Gerät
|
||||||
|
- **Zugriffskontrolle:** Nur autorisierte Mitarbeiter haben Zugriff auf Analytics-Daten
|
||||||
|
- **Datensparsamkeit:** Wir erheben nur die minimal notwendigen Daten
|
||||||
|
- **Container-Isolation:** Analytics-System läuft in isolierter Docker-Umgebung
|
||||||
|
- **Open Source:** Umami-Quellcode ist öffentlich einsehbar und auditierbar
|
||||||
|
- **Regelmäßige Audits:** Vierteljährliche Überprüfung der Datenschutz-Compliance
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.13 Automatisierte Entscheidungsfindung / Profiling
|
||||||
|
|
||||||
|
Es findet **keine automatisierte Entscheidungsfindung** (einschließlich Profiling) gemäß Art. 22 DSGVO statt.
|
||||||
|
|
||||||
|
Die erhobenen Daten werden ausschließlich zu statistischen Zwecken verwendet und führen zu keinen Entscheidungen, die Sie persönlich betreffen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.14 Kontakt Datenschutz
|
||||||
|
|
||||||
|
Bei Fragen zur Verarbeitung Ihrer Daten können Sie sich an uns wenden:
|
||||||
|
|
||||||
|
**Verantwortlicher:**
|
||||||
|
[Ihr Unternehmensname]
|
||||||
|
[Straße Hausnummer]
|
||||||
|
[PLZ Ort]
|
||||||
|
|
||||||
|
**Datenschutzbeauftragter:** (falls vorhanden)
|
||||||
|
[Name]
|
||||||
|
E-Mail: datenschutz@aegis-sight.de
|
||||||
|
Telefon: [Telefonnummer]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Änderungen dieser Datenschutzerklärung
|
||||||
|
|
||||||
|
Wir behalten uns vor, diese Datenschutzerklärung anzupassen, um sie an geänderte Rechtslagen oder Änderungen unserer Dienstleistungen anzupassen.
|
||||||
|
|
||||||
|
**Stand:** 2026-03-20
|
||||||
|
**Version:** 2.0
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Hinweis zu Cookies
|
||||||
|
|
||||||
|
AegisSight Analytics setzt **keine Cookies** und nutzt **keine lokale Speicherung** (LocalStorage) für Analysezwecke. Das System arbeitet vollständig cookieless. Eine Cookie-Tabelle für Analytics-Cookies ist daher nicht erforderlich.
|
||||||
|
|
||||||
|
Der Cookie-Banner auf unserer Website dient der Steuerung, ob das Tracking-Script geladen wird oder nicht. Bei Ablehnung findet keinerlei Datenerhebung statt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FAQ - Häufig gestellte Fragen
|
||||||
|
|
||||||
|
**Q: Warum nutzen Sie kein Google Analytics?**
|
||||||
|
A: Wir möchten vollständige Kontrolle über die Daten behalten und diese nicht mit Drittanbietern teilen. Zudem vermeiden wir rechtliche Unsicherheiten bezüglich internationaler Datenübermittlung (Schrems II).
|
||||||
|
|
||||||
|
**Q: Setzt AegisSight Analytics Cookies?**
|
||||||
|
A: Nein. Umami v3.0.3 arbeitet vollständig cookieless. Es werden keine Cookies, kein LocalStorage und keine anderen clientseitigen Speichermechanismen für Analysezwecke verwendet.
|
||||||
|
|
||||||
|
**Q: Wird meine IP-Adresse gespeichert?**
|
||||||
|
A: Nein. Ihre IP-Adresse wird nur zur Laufzeit für die Standortbestimmung (Land/Region) verwendet und danach sofort verworfen. Sie wird niemals in der Datenbank gespeichert.
|
||||||
|
|
||||||
|
**Q: Kann ich als einzelner Nutzer nachverfolgt werden?**
|
||||||
|
A: Nein. Da keine Cookies gesetzt, keine IP-Adressen gespeichert und keine Fingerprints erstellt werden, ist eine Identifikation oder Nachverfolgung einzelner Nutzer technisch nicht möglich.
|
||||||
|
|
||||||
|
**Q: Werden meine Daten verkauft?**
|
||||||
|
A: Nein, niemals. Wir geben keine Daten an Dritte weiter oder verkaufen diese.
|
||||||
|
|
||||||
|
**Q: Was passiert, wenn ich im Cookie-Banner ablehne?**
|
||||||
|
A: Das Tracking-Script wird nicht geladen. Die Website funktioniert vollständig normal – wir können lediglich keine anonymisierten Statistiken über Ihre Nutzung erfassen.
|
||||||
|
|
||||||
|
**Q: Ist das System DSGVO-konform?**
|
||||||
|
A: Ja. Durch den Opt-In-Mechanismus, die vollständig cookieless Architektur, fehlende IP-Speicherung, Datensparsamkeit, Speicherbegrenzung und ausschließliche Verarbeitung in Deutschland erfüllen wir alle DSGVO-Anforderungen. Umami ist als datenschutzfreundliche Alternative zu Google Analytics bekannt.
|
||||||
|
|
||||||
|
**Q: Was ist Umami?**
|
||||||
|
A: Umami ist eine quelloffene (Open Source) Web-Analytics-Software, die als datenschutzfreundliche Alternative zu Google Analytics entwickelt wurde. Der Quellcode ist öffentlich auf GitHub einsehbar.
|
||||||
365
LAUNCH-CHECKLIST.md
Normale Datei
365
LAUNCH-CHECKLIST.md
Normale Datei
@@ -0,0 +1,365 @@
|
|||||||
|
# LAUNCH-CHECKLIST — Online-Schaltung der neuen AegisSight-Hauptseite
|
||||||
|
|
||||||
|
**Zielgruppe dieser Datei:** Claude (oder ein Mensch) auf einem anderen Rechner, der diese Datei vollständig liest und Schritt für Schritt ausführt. Alle Anweisungen sind so geschrieben, dass keine Eigenentscheidungen nötig sind.
|
||||||
|
|
||||||
|
**Auslöser:** Der User sagt sinngemäß "Jo stell online" oder "Schalte die Vorschau live".
|
||||||
|
|
||||||
|
**Was passiert:** Die Vorschauseite (`/vorschau/`) wird zur neuen Hauptseite (`/`). Die alte Hauptseite ("Sicherheit Made in Germany") wird in `_archiv/` verschoben. SEO wird aktiviert (robots.txt + sitemap.xml + Entfernung der noindex-Meta-Tags). Cookie-Consent + Umami sind bereits eingebaut.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 0. Voraussetzungen — vor dem Start prüfen
|
||||||
|
|
||||||
|
- [ ] **Iran-Lage-Anpassung ist fertig.** Der zuständige Kollege hat die zu langen Iran-Lagen-Texte gekürzt/strukturiert. Sichtcheck: `https://aegis-sight.de/vorschau/` (Passwort: siehe Pass-Manager) → Demos-Karussell → Iran-Karte sollte ähnlich hoch sein wie Cyberangriffe und Deepfakes.
|
||||||
|
- [ ] **SSH-Zugriff** auf `claude-dev@46.225.225.49` funktioniert.
|
||||||
|
- [ ] **Git-Push-Rechte** für `https://gitea-undso.aegis-sight.de/AegisSight/Website.git` vorhanden (Token im Remote-URL eingebettet).
|
||||||
|
- [ ] **User hat ausdrücklich Go gegeben** ("Stell online", "Schalte live", o.ä.).
|
||||||
|
|
||||||
|
Wenn ein Punkt nicht erfüllt: NICHT FORTSETZEN, dem User Bescheid geben.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Pre-Flight-Backup (Pflicht!)
|
||||||
|
|
||||||
|
Werden auf dem Server (`46.225.225.49`) ausgeführt:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && git tag pre-launch-$(date +%Y%m%d-%H%M%S) && git push origin --tags'
|
||||||
|
ssh claude-dev@46.225.225.49 'tar -czf /home/claude-dev/website-snapshot-$(date +%Y%m%d-%H%M%S).tar.gz -C /opt/v2-Docker/aegis-website html'
|
||||||
|
ssh claude-dev@46.225.225.49 'ls -lh /home/claude-dev/website-snapshot-*.tar.gz | tail -1'
|
||||||
|
```
|
||||||
|
|
||||||
|
Erwartet: Tar-Archiv ~40–60 MB. Git-Tag `pre-launch-YYYYMMDD-HHMMSS` ist gepusht.
|
||||||
|
|
||||||
|
**Notiere dir den Git-Tag-Namen** — du brauchst ihn fürs Rollback.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Schaltungs-Schritte (in genau dieser Reihenfolge)
|
||||||
|
|
||||||
|
Alle Pfade relativ zu `/opt/v2-Docker/aegis-website/html/`. Alle Commands per `ssh claude-dev@46.225.225.49 '...'` ausführen.
|
||||||
|
|
||||||
|
### 2.1 Archiv-Verzeichnis vorbereiten
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && mkdir -p _archiv'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.2 Alte Hauptseite-Files in `_archiv/` verschieben
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
mv index.html _archiv/old-index.html && \
|
||||||
|
cp -r css _archiv/old-css && \
|
||||||
|
cp -r js _archiv/old-js && \
|
||||||
|
mv robots.txt _archiv/old-robots.txt && \
|
||||||
|
mv assets/videos/AFv6.mp4 _archiv/ 2>/dev/null; \
|
||||||
|
mv assets/videos/hero-code-abstract.mp4 _archiv/ 2>/dev/null; \
|
||||||
|
mv assets/videos/hero-data-flow.mp4 _archiv/ 2>/dev/null; \
|
||||||
|
mv assets/videos/hero-network-viz.mp4 _archiv/ 2>/dev/null; \
|
||||||
|
ls -la _archiv/'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Wichtig:** `css` und `js` werden mit `cp -r` (kopiert, NICHT verschoben), weil die Lagen-Seiten weiterhin `/js/config.js`, `/js/translations.js`, `/js/mobile-nav.js` aus dem alten /js/-Ordner brauchen. Die alten /css/-Stylesheets brauchen die Lagen ebenfalls (`/css/main.css`, `/css/fonts.css`, `/css/mobile.css`).
|
||||||
|
|
||||||
|
### 2.3 Neue Vorschau-Files an Hauptseite-Position kopieren
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
cp vorschau/index.html index.html && \
|
||||||
|
cp vorschau/css/style.css css/vorschau-style.css && \
|
||||||
|
cp vorschau/js/app.js js/vorschau-app.js && \
|
||||||
|
mkdir -p assets/videos/vorschau-hero && \
|
||||||
|
cp vorschau/videos/* assets/videos/vorschau-hero/ && \
|
||||||
|
ls -la index.html css/vorschau-style.css js/vorschau-app.js assets/videos/vorschau-hero/'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Begründung:** Die Vorschau-CSS heißt `style.css` und liegt unter `vorschau/css/`. Wenn wir sie nach `/css/style.css` packen, würden wir die alte Hauptseite-CSS überschreiben (die für Lagen-Seiten gebraucht wird, falls dort references existieren). Daher: eindeutige Namen `vorschau-style.css` und `vorschau-app.js`.
|
||||||
|
|
||||||
|
### 2.4 Pfade in der neuen `index.html` anpassen
|
||||||
|
|
||||||
|
Die Vorschau-`index.html` referenziert relativ:
|
||||||
|
- `<link rel="stylesheet" href="css/style.css">` → muss zu `css/vorschau-style.css`
|
||||||
|
- `<script src="js/app.js"></script>` → muss zu `js/vorschau-app.js`
|
||||||
|
- `videos/hero-slide-X-monitoring.mp4` → muss zu `assets/videos/vorschau-hero/hero-slide-X-monitoring.mp4`
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
sed -i "s|href=\"css/style.css\"|href=\"/css/vorschau-style.css\"|g" index.html && \
|
||||||
|
sed -i "s|src=\"js/app.js\"|src=\"/js/vorschau-app.js\"|g" index.html && \
|
||||||
|
sed -i "s|src=\"videos/hero-slide-|src=\"/assets/videos/vorschau-hero/hero-slide-|g" index.html && \
|
||||||
|
grep -E "(vorschau-style|vorschau-app|vorschau-hero)" index.html | head -10'
|
||||||
|
```
|
||||||
|
|
||||||
|
Erwartet: 7 Treffer (1× CSS, 1× JS, 5× Videos).
|
||||||
|
|
||||||
|
### 2.5 Passwort-Gate aus `index.html` entfernen
|
||||||
|
|
||||||
|
Folgenden Block ersatzlos löschen — es sind drei zusammenhängende Bereiche:
|
||||||
|
1. `<!-- Password Gate -->` Kommentar + dahinterliegender `<style>`-Block
|
||||||
|
2. `<div id="login-gate">...</div>`
|
||||||
|
3. `<script>` mit `var PW_HASH=...` etc.
|
||||||
|
|
||||||
|
Sed-Lösung (einzeilig):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
python3 -c "
|
||||||
|
import re
|
||||||
|
with open(\"index.html\") as f: c = f.read()
|
||||||
|
# Entferne den kompletten Block von '<!-- Password Gate -->' bis nach dem login-gate-Script
|
||||||
|
c = re.sub(r'<!-- Password Gate -->.*?if\(getCookie.*?</script>', '', c, count=1, flags=re.DOTALL)
|
||||||
|
with open(\"index.html\", \"w\") as f: f.write(c)
|
||||||
|
print(\"Passwort-Gate entfernt\")
|
||||||
|
"'
|
||||||
|
```
|
||||||
|
|
||||||
|
Verifikation:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'grep -c "PW_HASH\|login-gate" /opt/v2-Docker/aegis-website/html/index.html'
|
||||||
|
```
|
||||||
|
|
||||||
|
Erwartet: `0`
|
||||||
|
|
||||||
|
### 2.6 noindex/nofollow-Meta-Tags entfernen
|
||||||
|
|
||||||
|
In `index.html` und in den drei Lagen-Seiten:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
for f in index.html lagen/iran-konflikt/index.html lagen/cyberangriffe/index.html lagen/deepfakes/index.html; do \
|
||||||
|
sed -i "/<meta name=\"robots\" content=\"noindex/d" "$f"; \
|
||||||
|
done && \
|
||||||
|
echo "--- Verbliebene noindex-Tags (sollte 0 sein):"; \
|
||||||
|
grep -c noindex index.html lagen/*/index.html'
|
||||||
|
```
|
||||||
|
|
||||||
|
Erwartet: Alle Dateien zeigen `0`.
|
||||||
|
|
||||||
|
### 2.7 robots.txt aktivieren (Crawler erlaubt)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
mv robots-launch.txt robots.txt && \
|
||||||
|
head -10 robots.txt'
|
||||||
|
```
|
||||||
|
|
||||||
|
Erwartet: erste Zeilen zeigen `Allow: /` und `Sitemap:` Verweis.
|
||||||
|
|
||||||
|
### 2.8 sitemap.xml aktivieren
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
mv sitemap-launch.xml sitemap.xml && \
|
||||||
|
head -5 sitemap.xml'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.9 Vorschau-Verzeichnis löschen
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
rm -rf vorschau && \
|
||||||
|
ls -d vorschau 2>&1 | tail -1'
|
||||||
|
```
|
||||||
|
|
||||||
|
Erwartet: `ls: cannot access 'vorschau': No such file or directory`
|
||||||
|
|
||||||
|
### 2.10 `.bak.*`-Dateien aufräumen (optional)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
find . -name "*.bak.*" -type f -delete && \
|
||||||
|
find . -name "*.bak.*" -type f | wc -l'
|
||||||
|
```
|
||||||
|
|
||||||
|
Erwartet: `0`
|
||||||
|
|
||||||
|
### 2.11 Git-Commit + Push
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
git add -A && \
|
||||||
|
git status --short | head -30'
|
||||||
|
```
|
||||||
|
|
||||||
|
Status prüfen — sollte zeigen:
|
||||||
|
- `D index.html` (alte gelöscht), `?? index.html` (neue erscheint via add) → wird als "renamed" oder M erkannt
|
||||||
|
- Diverse Dateien in `_archiv/` neu
|
||||||
|
- `vorschau/` komplett gelöscht
|
||||||
|
- `robots.txt`, `sitemap.xml` erscheinen oder werden modifiziert
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
git commit -m "Online-Schaltung: Vorschau ist die neue Hauptseite
|
||||||
|
|
||||||
|
- Vorschau-Inhalt aus /vorschau/ nach /index.html, /css/vorschau-style.css, /js/vorschau-app.js, /assets/videos/vorschau-hero/ verschoben
|
||||||
|
- Alte Hauptseite (Sicherheit Made in Germany) in /_archiv/ archiviert
|
||||||
|
- Passwort-Gate entfernt
|
||||||
|
- robots.txt: Crawler erlaubt (außer AI-Crawler), Sitemap-Verweis aktiviert
|
||||||
|
- sitemap.xml aktiviert (Hauptseite, 3 Lagen, Impressum, Datenschutz)
|
||||||
|
- noindex/nofollow Meta-Tags aus Hauptseite und Lagen entfernt
|
||||||
|
|
||||||
|
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>" && \
|
||||||
|
git push origin main 2>&1 | tail -5'
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Smoke-Tests (sofort nach Push)
|
||||||
|
|
||||||
|
Jeden Test einzeln ausführen, erwartete Antwort daneben prüfen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Hauptseite läuft:
|
||||||
|
curl -sI https://aegis-sight.de/ | head -1
|
||||||
|
# Erwartet: HTTP/1.1 200 OK
|
||||||
|
|
||||||
|
# Title ist da:
|
||||||
|
curl -s https://aegis-sight.de/ | grep -c '<title>AegisSight Monitor'
|
||||||
|
# Erwartet: 1
|
||||||
|
|
||||||
|
# noindex ist WEG:
|
||||||
|
curl -s https://aegis-sight.de/ | grep -c 'noindex'
|
||||||
|
# Erwartet: 0
|
||||||
|
|
||||||
|
# Passwort-Gate ist WEG:
|
||||||
|
curl -s https://aegis-sight.de/ | grep -c 'PW_HASH\|login-gate'
|
||||||
|
# Erwartet: 0
|
||||||
|
|
||||||
|
# robots.txt erlaubt Crawling:
|
||||||
|
curl -s https://aegis-sight.de/robots.txt | grep -c '^Allow:'
|
||||||
|
# Erwartet: ≥1
|
||||||
|
|
||||||
|
# sitemap.xml ist da:
|
||||||
|
curl -sI https://aegis-sight.de/sitemap.xml | head -1
|
||||||
|
# Erwartet: HTTP/1.1 200 OK
|
||||||
|
|
||||||
|
# Vorschau ist 404:
|
||||||
|
curl -sI https://aegis-sight.de/vorschau/ | head -1
|
||||||
|
# Erwartet: HTTP/1.1 404 Not Found
|
||||||
|
|
||||||
|
# Lagen erreichbar:
|
||||||
|
curl -sI https://aegis-sight.de/lagen/iran-konflikt/ | head -1
|
||||||
|
# Erwartet: HTTP/1.1 200 OK
|
||||||
|
curl -sI https://aegis-sight.de/lagen/cyberangriffe/ | head -1
|
||||||
|
# Erwartet: HTTP/1.1 200 OK
|
||||||
|
curl -sI https://aegis-sight.de/lagen/deepfakes/ | head -1
|
||||||
|
# Erwartet: HTTP/1.1 200 OK
|
||||||
|
|
||||||
|
# Cookie-Consent Asset erreichbar:
|
||||||
|
curl -sI https://aegis-sight.de/cookie-consent.js | head -1
|
||||||
|
# Erwartet: HTTP/1.1 200 OK
|
||||||
|
|
||||||
|
# Impressum + Datenschutz:
|
||||||
|
curl -sI https://aegis-sight.de/impressum.html | head -1
|
||||||
|
curl -sI https://aegis-sight.de/datenschutz.html | head -1
|
||||||
|
# Erwartet: beide HTTP/1.1 200 OK
|
||||||
|
|
||||||
|
# OG-Image:
|
||||||
|
curl -sI https://aegis-sight.de/assets/images/og-image.png | head -1
|
||||||
|
# Erwartet: HTTP/1.1 200 OK
|
||||||
|
```
|
||||||
|
|
||||||
|
Wenn ALLE Smoke-Tests grün: **Sage dem User Bescheid, dass die Live-Schaltung erfolgreich war**, und bitte um manuelle Verifikation im Browser (Hard-Reload Strg+F5):
|
||||||
|
- Layout korrekt
|
||||||
|
- Cookie-Banner erscheint
|
||||||
|
- Kontaktformular funktioniert
|
||||||
|
- Hero-Videos laufen
|
||||||
|
- Lagen-Karussell zeigt aktuelle Daten
|
||||||
|
- Footer hat Cookie-Einstellungen-Link
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Notfall-Rollback (falls Smoke-Tests fehlschlagen)
|
||||||
|
|
||||||
|
**Variante A — Git-Rollback (bevorzugt):**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Den Tag-Namen aus Schritt 1 verwenden (z.B. pre-launch-20260427-093015)
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
git reset --hard pre-launch-YYYYMMDD-HHMMSS && \
|
||||||
|
git push --force-with-lease origin main && \
|
||||||
|
git status'
|
||||||
|
```
|
||||||
|
|
||||||
|
⚠ **WICHTIG**: `--force-with-lease` ist sicherer als `--force`. Im seltenen Fall, dass jemand parallel committed hat, schlägt es fehl statt Daten zu überschreiben.
|
||||||
|
|
||||||
|
**Variante B — Server-Snapshot zurückspielen:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'tar -xzf /home/claude-dev/website-snapshot-YYYYMMDD-HHMMSS.tar.gz -C /opt/v2-Docker/aegis-website/'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Nach Rollback**: Smoke-Tests erneut laufen lassen — Vorschau sollte wieder unter `/vorschau/` erreichbar sein, Hauptseite zeigt wieder die alte Version.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Manuelle Aufgaben (User/Kollege außerhalb des Skripts)
|
||||||
|
|
||||||
|
- **Browser-Test** auf `https://aegis-sight.de/` (Hard-Reload Strg+F5):
|
||||||
|
- Layout, Hero-Videos, Karussell, Kontaktformular
|
||||||
|
- Cookie-Banner erscheint, Akzeptieren funktioniert
|
||||||
|
- Mobile-View testen
|
||||||
|
- Lagen-Footer-Links funktionieren (z.B. `/#features`, `/#contact`)
|
||||||
|
- **OG-Image-Preview** testen: URL in WhatsApp/Telegram/LinkedIn einfügen → Vorschaubild sollte erscheinen
|
||||||
|
- **Eintrag in Search Console / Bing Webmaster:** ENTFÄLLT laut User-Wunsch (eigener Tracking-Pixel via Umami)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Notfall-Wiederherstellung der alten Hauptseite (separater, eigenständiger Block)
|
||||||
|
|
||||||
|
Falls jemand die alte Hauptseite ("Sicherheit Made in Germany") jemals wieder sehen/wiederherstellen möchte:
|
||||||
|
|
||||||
|
**Option A — aus `_archiv/` zurückkopieren:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
ls _archiv/'
|
||||||
|
# Zeigt: old-index.html, old-css/, old-js/, old-robots.txt, old-videos
|
||||||
|
```
|
||||||
|
|
||||||
|
Ein einzelner File z.B.:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh claude-dev@46.225.225.49 'cp /opt/v2-Docker/aegis-website/html/_archiv/old-index.html /tmp/old-index.html && head -30 /tmp/old-index.html'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Option B — aus Git-History wiederherstellen (auch wenn `_archiv/` mal gelöscht würde):**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Letzten Commit finden, der die alte index.html noch enthielt:
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
git log --all --diff-filter=D --pretty=format:"%H %s" -- index.html | head -5'
|
||||||
|
|
||||||
|
# Dann die alte Datei aus diesem Commit zurückholen:
|
||||||
|
ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
|
||||||
|
git show <commit-hash>^:index.html > /tmp/old-index.html'
|
||||||
|
```
|
||||||
|
|
||||||
|
Analog für `css/`, `js/` etc.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Anhang — Was wird wo geändert (Übersicht)
|
||||||
|
|
||||||
|
| Pfad | Vor Schaltung | Nach Schaltung |
|
||||||
|
|---|---|---|
|
||||||
|
| `/index.html` | "Sicherheit Made in Germany" (alte Hauptseite) | AegisSight Monitor (war Vorschau) |
|
||||||
|
| `/vorschau/` | passwortgeschützte Vorschau | gelöscht (404) |
|
||||||
|
| `/css/style.css` (alt) | aktiv (alte Hauptseite) | unter `/_archiv/old-css/style.css` |
|
||||||
|
| `/css/vorschau-style.css` | nicht existent | aktiv (für neue Hauptseite) |
|
||||||
|
| `/js/main.js` (alt) | aktiv | unter `/_archiv/old-js/main.js` |
|
||||||
|
| `/js/vorschau-app.js` | nicht existent | aktiv |
|
||||||
|
| `/css/main.css`, `/css/fonts.css`, `/css/mobile.css` | aktiv (für Hauptseite + Lagen) | aktiv (weiterhin für Lagen) |
|
||||||
|
| `/js/config.js`, `/js/translations.js`, `/js/mobile-nav.js` | aktiv | aktiv (für Lagen) |
|
||||||
|
| `/robots.txt` | blockiert alle Crawler | erlaubt Crawler (außer AI/Spam) |
|
||||||
|
| `/sitemap.xml` | nicht existent | aktiv |
|
||||||
|
| `/lagen/*/index.html` | hat noindex/nofollow | wird indexierbar |
|
||||||
|
| `/cookie-consent.js`, `/cookie-consent.css` | aktiv (auf alter Hauptseite) | aktiv (auf neuer Hauptseite + Lagen) |
|
||||||
|
| `/assets/images/og-image.png` | bereits vorhanden | weiterhin vorhanden |
|
||||||
|
| `/datenschutz.html` | bereits erweitert (Kontakt + Umami) | unverändert |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Bei Fragen oder unerwarteten Outputs:** NICHT improvisieren. Dem User die genaue Fehlermeldung melden und Anweisung abwarten.
|
||||||
112
PROFESSIONAL_TOOLBOX_CONTENT.md
Normale Datei
112
PROFESSIONAL_TOOLBOX_CONTENT.md
Normale Datei
@@ -0,0 +1,112 @@
|
|||||||
|
# Professional Toolbox - Backup Content
|
||||||
|
|
||||||
|
## Beschreibung
|
||||||
|
Dieser Code enthält die vollständige Professional Toolbox Produktkarte, die temporär von der Website entfernt wurde.
|
||||||
|
|
||||||
|
## Verwendung
|
||||||
|
Um die Professional Toolbox wieder auf der Website anzuzeigen, fügen Sie den folgenden HTML-Code in die `index.html` innerhalb des `<div class="products-grid">` Elements ein:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Product: AegisSight 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>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Hinweise
|
||||||
|
- Die Professional Toolbox wurde temporär entfernt, um die AccountForger-Box korrekt zu zentrieren
|
||||||
|
- Der Code ist vollständig funktionsfähig und kann jederzeit wieder eingefügt werden
|
||||||
|
- Alle Übersetzungsschlüssel und Funktionen sind bereits in den entsprechenden JavaScript-Dateien vorhanden
|
||||||
59
VIDEO_UPLOAD_INSTRUCTIONS.md
Normale Datei
59
VIDEO_UPLOAD_INSTRUCTIONS.md
Normale Datei
@@ -0,0 +1,59 @@
|
|||||||
|
# Video Upload Instructions / Video-Upload-Anleitung
|
||||||
|
|
||||||
|
## Problem
|
||||||
|
Die Video-Dateien für die Website sind zu groß für den direkten Git-Push aufgrund der Server-Einstellungen (HTTP 413 - Request Entity Too Large).
|
||||||
|
|
||||||
|
## Lösung
|
||||||
|
|
||||||
|
### Option 1: Server-Konfiguration anpassen
|
||||||
|
Auf dem Gitea-Server müssen folgende Einstellungen angepasst werden:
|
||||||
|
|
||||||
|
1. **Gitea Konfiguration** (`/etc/gitea/app.ini` oder ähnlich):
|
||||||
|
```ini
|
||||||
|
[server]
|
||||||
|
LFS_MAX_FILE_SIZE = 200000000 ; 200MB
|
||||||
|
[repository]
|
||||||
|
MAX_CREATION_LIMIT = -1
|
||||||
|
[repository.upload]
|
||||||
|
FILE_MAX_SIZE = 200
|
||||||
|
MAX_FILES = 10
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Nginx Konfiguration** (falls verwendet):
|
||||||
|
```nginx
|
||||||
|
client_max_body_size 200M;
|
||||||
|
client_body_buffer_size 200M;
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Apache Konfiguration** (falls verwendet):
|
||||||
|
```apache
|
||||||
|
LimitRequestBody 209715200
|
||||||
|
```
|
||||||
|
|
||||||
|
Nach Änderungen Server/Dienste neustarten:
|
||||||
|
```bash
|
||||||
|
sudo systemctl restart gitea
|
||||||
|
sudo systemctl restart nginx # oder apache2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Option 2: Manuelle Video-Uploads
|
||||||
|
|
||||||
|
Die folgenden Video-Dateien müssen manuell hochgeladen werden:
|
||||||
|
|
||||||
|
| Datei | Größe | Verwendung |
|
||||||
|
|-------|-------|------------|
|
||||||
|
| `assets/videos/AFv6.mp4` | 90MB | AccountForger Demo Video |
|
||||||
|
| `assets/videos/hero-code-abstract.mp4` | 11MB | Hero Background Animation 1 |
|
||||||
|
| `assets/videos/hero-data-flow.mp4` | 7.3MB | Hero Background Animation 2 |
|
||||||
|
| `assets/videos/hero-network-viz.mp4` | 14MB | Hero Background Animation 3 |
|
||||||
|
|
||||||
|
#### Upload via SCP/SFTP:
|
||||||
|
```bash
|
||||||
|
scp assets/videos/*.mp4 user@gitea-server:/path/to/website/assets/videos/
|
||||||
|
```
|
||||||
|
|
||||||
|
### Option 3: CDN/External Storage
|
||||||
|
Alternativ können die Videos auf einem CDN oder externen Storage-Service gehostet werden und die URLs in den HTML-Dateien entsprechend angepasst werden.
|
||||||
|
|
||||||
|
## Temporäre Lösung
|
||||||
|
Die Website funktioniert auch ohne die Videos - es werden dann keine Hintergrund-Animationen angezeigt.
|
||||||
866
accountforger-video.html
Normale Datei
866
accountforger-video.html
Normale Datei
@@ -0,0 +1,866 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AccountForger - AegisSight</title>
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--vh: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #0A1832 0%, #060F20 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: calc(var(--vh, 1vh) * 100);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: calc(var(--vh, 1vh) * 100);
|
||||||
|
padding: 2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background: rgba(200, 168, 81, 0.15);
|
||||||
|
border: 1px solid rgba(200, 168, 81, 0.3);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button:hover {
|
||||||
|
background: rgba(200, 168, 81, 0.25);
|
||||||
|
transform: translateX(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
animation: fadeInUp 0.8s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header h1 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header p {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||||
|
animation: fadeInUp 1s ease 0.2s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-protection {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
|
||||||
|
height: 0;
|
||||||
|
background: #000;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-protection video {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
pointer-events: auto;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overlay to prevent right-click */
|
||||||
|
.video-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
background: transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom controls */
|
||||||
|
.custom-controls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
z-index: 20;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper:hover .custom-controls,
|
||||||
|
.video-wrapper.controls-visible .custom-controls {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fullscreen specific styles - Direct video element */
|
||||||
|
video:fullscreen {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
object-fit: contain !important;
|
||||||
|
background-color: #000 !important;
|
||||||
|
z-index: 999999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
video:-webkit-full-screen {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
object-fit: contain !important;
|
||||||
|
background-color: #000 !important;
|
||||||
|
z-index: 999999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
video:-moz-full-screen {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
object-fit: contain !important;
|
||||||
|
background-color: #000 !important;
|
||||||
|
z-index: 999999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
video:-ms-fullscreen {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
object-fit: contain !important;
|
||||||
|
background-color: #000 !important;
|
||||||
|
z-index: 999999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback: Wrapper fullscreen styles */
|
||||||
|
.video-wrapper:fullscreen,
|
||||||
|
.video-wrapper:-webkit-full-screen,
|
||||||
|
.video-wrapper:-moz-full-screen,
|
||||||
|
.video-wrapper:-ms-fullscreen {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
background-color: #000 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper:fullscreen .video-protection,
|
||||||
|
.video-wrapper:-webkit-full-screen .video-protection,
|
||||||
|
.video-wrapper:-moz-full-screen .video-protection,
|
||||||
|
.video-wrapper:-ms-fullscreen .video-protection {
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
background-color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper:fullscreen video,
|
||||||
|
.video-wrapper:-webkit-full-screen video,
|
||||||
|
.video-wrapper:-moz-full-screen video,
|
||||||
|
.video-wrapper:-ms-fullscreen video {
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
object-fit: contain !important;
|
||||||
|
background-color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper:fullscreen .custom-controls,
|
||||||
|
.video-wrapper:-webkit-full-screen .custom-controls,
|
||||||
|
.video-wrapper:-moz-full-screen .custom-controls,
|
||||||
|
.video-wrapper:-ms-fullscreen .custom-controls {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 2rem;
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper:fullscreen .video-overlay,
|
||||||
|
.video-wrapper:-webkit-full-screen .video-overlay,
|
||||||
|
.video-wrapper:-moz-full-screen .video-overlay,
|
||||||
|
.video-wrapper:-ms-fullscreen .video-overlay {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button, .fullscreen-button, .volume-button {
|
||||||
|
background: rgba(200, 168, 81, 0.25);
|
||||||
|
border: none;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button:hover, .fullscreen-button:hover, .volume-button:hover {
|
||||||
|
background: rgba(200, 168, 81, 0.4);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button svg, .fullscreen-button svg, .volume-button svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider {
|
||||||
|
width: 80px;
|
||||||
|
height: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-control:hover .volume-slider {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: #C8A851;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: #C8A851;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 0%;
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-display {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
min-width: 100px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Security notice */
|
||||||
|
.security-notice {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid rgba(200, 168, 81, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
animation: fadeInUp 1.2s ease 0.4s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
fill: #C8A851;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.video-container {
|
||||||
|
padding: 1rem;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
top: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-protection {
|
||||||
|
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-controls {
|
||||||
|
padding: 0.75rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button, .fullscreen-button, .volume-button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button svg, .fullscreen-button svg, .volume-button svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
order: -1;
|
||||||
|
flex-basis: 100%;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-display {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider {
|
||||||
|
width: 60px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra small devices (phones in portrait) */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.video-header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header p {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-controls {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button, .fullscreen-button, .volume-button {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-display {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
min-width: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Landscape mode on mobile */
|
||||||
|
@media (max-width: 768px) and (orientation: landscape) {
|
||||||
|
.video-container {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-header p {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper {
|
||||||
|
max-height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-notice {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
top: 0.5rem;
|
||||||
|
left: 0.5rem;
|
||||||
|
padding: 0.3rem 0.6rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||||
|
<link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="video-container">
|
||||||
|
<a href="index.html" class="back-button">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Zurück zur Hauptseite
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="video-header">
|
||||||
|
<img src="assets/images/logos/AegisSightLogo_NavyGold.svg" alt="AegisSight" style="height: 48px; margin-bottom: 1rem;">
|
||||||
|
<h1>AccountForger</h1>
|
||||||
|
<p>Video-Demo</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="video-wrapper">
|
||||||
|
<div class="video-protection">
|
||||||
|
<video id="protectedVideo" controlsList="nodownload" disablePictureInPicture playsinline>
|
||||||
|
<source src="assets/videos/AFv6.mp4" type="video/mp4">
|
||||||
|
Ihr Browser unterstützt das Video-Tag nicht.
|
||||||
|
</video>
|
||||||
|
<div class="video-overlay"></div>
|
||||||
|
<div class="custom-controls">
|
||||||
|
<button class="play-button" id="playBtn">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<polygon points="5,3 19,12 5,21" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="progress-bar" id="progressBar">
|
||||||
|
<div class="progress-fill" id="progressFill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="time-display" id="timeDisplay">0:00 / 0:00</div>
|
||||||
|
<div class="volume-control">
|
||||||
|
<button class="volume-button" id="volumeBtn">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="volume-slider" id="volumeSlider">
|
||||||
|
<div class="volume-fill" id="volumeFill"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="fullscreen-button" id="fullscreenBtn">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Zugangsschutz wird serverseitig von Nginx (auth_request) geprueft.
|
||||||
|
// Wenn diese Seite laedt, wurde der Zugang bereits verifiziert.
|
||||||
|
|
||||||
|
// Video player functionality
|
||||||
|
const video = document.getElementById('protectedVideo');
|
||||||
|
const videoWrapper = document.querySelector('.video-wrapper');
|
||||||
|
const playBtn = document.getElementById('playBtn');
|
||||||
|
const progressBar = document.getElementById('progressBar');
|
||||||
|
const progressFill = document.getElementById('progressFill');
|
||||||
|
const timeDisplay = document.getElementById('timeDisplay');
|
||||||
|
const fullscreenBtn = document.getElementById('fullscreenBtn');
|
||||||
|
const volumeBtn = document.getElementById('volumeBtn');
|
||||||
|
const volumeSlider = document.getElementById('volumeSlider');
|
||||||
|
const volumeFill = document.getElementById('volumeFill');
|
||||||
|
|
||||||
|
// Disable right-click on video
|
||||||
|
document.addEventListener('contextmenu', function(e) {
|
||||||
|
if (e.target.tagName === 'VIDEO') {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent video download
|
||||||
|
video.addEventListener('contextmenu', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Play/Pause functionality
|
||||||
|
playBtn.addEventListener('click', function() {
|
||||||
|
if (video.paused) {
|
||||||
|
video.play();
|
||||||
|
playBtn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></svg>';
|
||||||
|
} else {
|
||||||
|
video.pause();
|
||||||
|
playBtn.innerHTML = '<svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21" /></svg>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update progress bar
|
||||||
|
video.addEventListener('timeupdate', function() {
|
||||||
|
const progress = (video.currentTime / video.duration) * 100;
|
||||||
|
progressFill.style.width = progress + '%';
|
||||||
|
|
||||||
|
const currentMinutes = Math.floor(video.currentTime / 60);
|
||||||
|
const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
|
||||||
|
const durationMinutes = Math.floor(video.duration / 60);
|
||||||
|
const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
|
||||||
|
|
||||||
|
timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Seek functionality
|
||||||
|
progressBar.addEventListener('click', function(e) {
|
||||||
|
const rect = progressBar.getBoundingClientRect();
|
||||||
|
const pos = (e.clientX - rect.left) / rect.width;
|
||||||
|
video.currentTime = pos * video.duration;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Video ended
|
||||||
|
video.addEventListener('ended', function() {
|
||||||
|
playBtn.innerHTML = '<svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21" /></svg>';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fullscreen functionality - Simplified approach
|
||||||
|
fullscreenBtn.addEventListener('click', function() {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
// Use native video fullscreen if available
|
||||||
|
if (video.requestFullscreen) {
|
||||||
|
video.requestFullscreen();
|
||||||
|
} else if (video.webkitRequestFullscreen) {
|
||||||
|
// Safari/iOS
|
||||||
|
video.webkitRequestFullscreen();
|
||||||
|
} else if (video.webkitEnterFullscreen) {
|
||||||
|
// iOS Safari specific
|
||||||
|
video.webkitEnterFullscreen();
|
||||||
|
} else if (video.mozRequestFullScreen) {
|
||||||
|
video.mozRequestFullScreen();
|
||||||
|
} else if (video.msRequestFullscreen) {
|
||||||
|
video.msRequestFullscreen();
|
||||||
|
} else {
|
||||||
|
// Fallback to wrapper fullscreen
|
||||||
|
if (videoWrapper.requestFullscreen) {
|
||||||
|
videoWrapper.requestFullscreen();
|
||||||
|
} else if (videoWrapper.webkitRequestFullscreen) {
|
||||||
|
videoWrapper.webkitRequestFullscreen();
|
||||||
|
} else if (videoWrapper.mozRequestFullScreen) {
|
||||||
|
videoWrapper.mozRequestFullScreen();
|
||||||
|
} else if (videoWrapper.msRequestFullscreen) {
|
||||||
|
videoWrapper.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
|
||||||
|
} else {
|
||||||
|
// Exit fullscreen
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
}
|
||||||
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fullscreen change event
|
||||||
|
document.addEventListener('fullscreenchange', updateFullscreenButton);
|
||||||
|
document.addEventListener('webkitfullscreenchange', updateFullscreenButton);
|
||||||
|
document.addEventListener('mozfullscreenchange', updateFullscreenButton);
|
||||||
|
document.addEventListener('MSFullscreenChange', updateFullscreenButton);
|
||||||
|
|
||||||
|
function updateFullscreenButton() {
|
||||||
|
if (document.fullscreenElement ||
|
||||||
|
document.webkitFullscreenElement ||
|
||||||
|
document.mozFullScreenElement ||
|
||||||
|
document.msFullscreenElement) {
|
||||||
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
|
||||||
|
} else {
|
||||||
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Volume control
|
||||||
|
volumeBtn.addEventListener('click', function() {
|
||||||
|
if (video.muted) {
|
||||||
|
video.muted = false;
|
||||||
|
video.volume = 1;
|
||||||
|
volumeFill.style.width = '100%';
|
||||||
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>';
|
||||||
|
} else {
|
||||||
|
video.muted = true;
|
||||||
|
volumeFill.style.width = '0%';
|
||||||
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
volumeSlider.addEventListener('click', function(e) {
|
||||||
|
const rect = volumeSlider.getBoundingClientRect();
|
||||||
|
const pos = (e.clientX - rect.left) / rect.width;
|
||||||
|
video.volume = pos;
|
||||||
|
video.muted = false;
|
||||||
|
volumeFill.style.width = (pos * 100) + '%';
|
||||||
|
updateVolumeButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateVolumeButton() {
|
||||||
|
if (video.muted || video.volume === 0) {
|
||||||
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
|
||||||
|
} else if (video.volume < 0.5) {
|
||||||
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M7 9v6h4l5 5V4L11 9H7z"/></svg>';
|
||||||
|
} else {
|
||||||
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
video.addEventListener('volumechange', function() {
|
||||||
|
volumeFill.style.width = (video.volume * 100) + '%';
|
||||||
|
updateVolumeButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard shortcuts
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.code === 'Space') {
|
||||||
|
e.preventDefault();
|
||||||
|
playBtn.click();
|
||||||
|
} else if (e.code === 'ArrowLeft') {
|
||||||
|
video.currentTime -= 10;
|
||||||
|
} else if (e.code === 'ArrowRight') {
|
||||||
|
video.currentTime += 10;
|
||||||
|
} else if (e.code === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
video.volume = Math.min(1, video.volume + 0.1);
|
||||||
|
} else if (e.code === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
video.volume = Math.max(0, video.volume - 0.1);
|
||||||
|
} else if (e.code === 'KeyF') {
|
||||||
|
fullscreenBtn.click();
|
||||||
|
} else if (e.code === 'KeyM') {
|
||||||
|
volumeBtn.click();
|
||||||
|
} else if (e.code === 'Escape') {
|
||||||
|
if (document.fullscreenElement ||
|
||||||
|
document.webkitFullscreenElement ||
|
||||||
|
document.mozFullScreenElement ||
|
||||||
|
document.msFullscreenElement) {
|
||||||
|
fullscreenBtn.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show controls on mouse move
|
||||||
|
let hideControlsTimeout;
|
||||||
|
videoWrapper.addEventListener('mousemove', function() {
|
||||||
|
videoWrapper.classList.add('controls-visible');
|
||||||
|
clearTimeout(hideControlsTimeout);
|
||||||
|
hideControlsTimeout = setTimeout(() => {
|
||||||
|
if (!video.paused) {
|
||||||
|
videoWrapper.classList.remove('controls-visible');
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Double-click for fullscreen
|
||||||
|
video.addEventListener('dblclick', function() {
|
||||||
|
fullscreenBtn.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Touch support for mobile
|
||||||
|
let touchStartX = 0;
|
||||||
|
let touchStartY = 0;
|
||||||
|
let touchStartTime = 0;
|
||||||
|
|
||||||
|
video.addEventListener('touchstart', function(e) {
|
||||||
|
touchStartX = e.touches[0].clientX;
|
||||||
|
touchStartY = e.touches[0].clientY;
|
||||||
|
touchStartTime = Date.now();
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
video.addEventListener('touchend', function(e) {
|
||||||
|
const touchEndTime = Date.now();
|
||||||
|
const touchDuration = touchEndTime - touchStartTime;
|
||||||
|
|
||||||
|
// Single tap to show/hide controls
|
||||||
|
if (touchDuration < 300) {
|
||||||
|
videoWrapper.classList.toggle('controls-visible');
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// Double tap for fullscreen on mobile
|
||||||
|
let lastTap = 0;
|
||||||
|
video.addEventListener('touchend', function(e) {
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
const tapLength = currentTime - lastTap;
|
||||||
|
if (tapLength < 500 && tapLength > 0) {
|
||||||
|
fullscreenBtn.click();
|
||||||
|
}
|
||||||
|
lastTap = currentTime;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Swipe gestures for seeking
|
||||||
|
let touchStartVideoTime = 0;
|
||||||
|
video.addEventListener('touchstart', function(e) {
|
||||||
|
touchStartVideoTime = video.currentTime;
|
||||||
|
touchStartX = e.touches[0].clientX;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
video.addEventListener('touchmove', function(e) {
|
||||||
|
if (touchStartX !== null) {
|
||||||
|
const touchCurrentX = e.touches[0].clientX;
|
||||||
|
const deltaX = touchCurrentX - touchStartX;
|
||||||
|
const seekAmount = (deltaX / window.innerWidth) * 30; // Max 30 seconds seek
|
||||||
|
|
||||||
|
const newTime = touchStartVideoTime + seekAmount;
|
||||||
|
video.currentTime = Math.max(0, Math.min(video.duration, newTime));
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// Mobile viewport height fix
|
||||||
|
function setMobileViewportHeight() {
|
||||||
|
const vh = window.innerHeight * 0.01;
|
||||||
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setMobileViewportHeight();
|
||||||
|
window.addEventListener('resize', setMobileViewportHeight);
|
||||||
|
window.addEventListener('orientationchange', setMobileViewportHeight);
|
||||||
|
|
||||||
|
// Prevent text selection
|
||||||
|
document.body.style.userSelect = 'none';
|
||||||
|
document.body.style.webkitUserSelect = 'none';
|
||||||
|
document.body.style.mozUserSelect = 'none';
|
||||||
|
document.body.style.msUserSelect = 'none';
|
||||||
|
|
||||||
|
// Additional protection against developer tools
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
// Prevent F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U
|
||||||
|
if (e.keyCode === 123 ||
|
||||||
|
(e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74)) ||
|
||||||
|
(e.ctrlKey && e.keyCode === 85)) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
73
analytics-events.js
Normale Datei
73
analytics-events.js
Normale Datei
@@ -0,0 +1,73 @@
|
|||||||
|
/**
|
||||||
|
* AegisSight Analytics - Custom Events
|
||||||
|
* Trackt wichtige Nutzerinteraktionen via Umami
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Nur tracken wenn umami geladen ist
|
||||||
|
function track(name, data) {
|
||||||
|
if (typeof umami !== "undefined" && umami.track) {
|
||||||
|
umami.track(name, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
|
||||||
|
// 1. Produkt-Tab geklickt
|
||||||
|
document.querySelectorAll("[data-translate]").forEach(function(el) {
|
||||||
|
if (el.closest(".products-section, .product-card, .tab-button")) {
|
||||||
|
el.addEventListener("click", function() {
|
||||||
|
var text = el.textContent.trim().substring(0, 50);
|
||||||
|
track("Produkt-Interesse", { element: text });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. About-Tabs (Unternehmen, Mission, Kernkompetenzen, Versprechen)
|
||||||
|
document.querySelectorAll(".about-tab, .tab-btn, [data-tab]").forEach(function(el) {
|
||||||
|
el.addEventListener("click", function() {
|
||||||
|
var tab = el.getAttribute("data-tab") || el.textContent.trim().substring(0, 30);
|
||||||
|
track("About-Tab", { tab: tab });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Kontaktbereich erreicht (Scroll)
|
||||||
|
var contactTracked = false;
|
||||||
|
var observer = new IntersectionObserver(function(entries) {
|
||||||
|
entries.forEach(function(entry) {
|
||||||
|
if (entry.isIntersecting && !contactTracked) {
|
||||||
|
contactTracked = true;
|
||||||
|
track("Kontakt-Bereich-erreicht");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.5 });
|
||||||
|
|
||||||
|
var footer = document.querySelector("footer, .contact-section, #kontakt, #contact");
|
||||||
|
if (footer) observer.observe(footer);
|
||||||
|
|
||||||
|
// 4. Sprachenwechsel
|
||||||
|
document.querySelectorAll(".lang-switch, .language-btn, [data-lang]").forEach(function(el) {
|
||||||
|
el.addEventListener("click", function() {
|
||||||
|
var lang = el.getAttribute("data-lang") || el.textContent.trim();
|
||||||
|
track("Sprachenwechsel", { sprache: lang });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. Lagebild-Seite: Tab gewechselt
|
||||||
|
if (window.location.pathname.indexOf("lagen") > -1) {
|
||||||
|
document.querySelectorAll(".tab-button, [data-tab]").forEach(function(el) {
|
||||||
|
el.addEventListener("click", function() {
|
||||||
|
var tab = el.getAttribute("data-tab") || el.textContent.trim().substring(0, 30);
|
||||||
|
track("Lagebild-Tab", { tab: tab });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
track("Lagebild-Besuch");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 6. AccountForger Video aufgerufen
|
||||||
|
if (window.location.pathname.indexOf("accountforger") > -1) {
|
||||||
|
track("AccountForger-Video-Aufruf");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
BIN
assets/fonts/BebasNeue-Regular.ttf
Normale Datei
BIN
assets/fonts/BebasNeue-Regular.ttf
Normale Datei
Binäre Datei nicht angezeigt.
BIN
assets/fonts/Inter-Bold.ttf
Normale Datei
BIN
assets/fonts/Inter-Bold.ttf
Normale Datei
Binäre Datei nicht angezeigt.
BIN
assets/fonts/Inter-Light.ttf
Normale Datei
BIN
assets/fonts/Inter-Light.ttf
Normale Datei
Binäre Datei nicht angezeigt.
BIN
assets/fonts/Inter-Regular.ttf
Normale Datei
BIN
assets/fonts/Inter-Regular.ttf
Normale Datei
Binäre Datei nicht angezeigt.
BIN
assets/fonts/Inter-SemiBold.ttf
Normale Datei
BIN
assets/fonts/Inter-SemiBold.ttf
Normale Datei
Binäre Datei nicht angezeigt.
38
assets/handshake.svg
Normale Datei
38
assets/handshake.svg
Normale Datei
@@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 512 512" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M454.313,249.708L512,206.991L462.136,38.939l-256.667,8.226l-24.727,38.398L92.839,64.42L0,256.087l42.289,36.399
|
||||||
|
l-22.328,34.553c-7.052,10.914-9.432,23.92-6.701,36.624c2.73,12.704,10.245,23.583,21.158,30.635
|
||||||
|
c7.963,5.146,17.042,7.804,26.304,7.804c2.438,0,4.887-0.193,7.333-0.565c3.097,11.013,10.047,20.988,20.388,27.67
|
||||||
|
c8.142,5.262,17.282,7.774,26.323,7.774c2.442,0,4.873-0.206,7.278-0.567c3.198,11.44,10.36,21.2,20.423,27.703
|
||||||
|
c8.143,5.262,17.282,7.774,26.323,7.774c15.973,0,31.639-7.845,40.934-22.231l6.634-10.268l38.853,25.758l0.162,0.107
|
||||||
|
c7.963,5.146,17.042,7.805,26.304,7.805c3.43,0,6.887-0.365,10.32-1.102c12.704-2.731,23.583-10.246,30.635-21.158
|
||||||
|
c4.963-7.681,7.476-16.249,7.745-24.785c2.489-0.146,4.985-0.478,7.47-1.012c12.704-2.731,23.583-10.246,30.635-21.158
|
||||||
|
c4.865-7.528,7.504-16.054,7.777-24.787c2.479-0.147,4.963-0.478,7.436-1.01c12.705-2.731,23.584-10.244,30.636-21.158
|
||||||
|
c4.968-7.688,7.481-16.267,7.745-24.811c14.973-0.869,29.358-8.609,38.102-22.144c7.052-10.914,9.432-23.92,6.703-36.624
|
||||||
|
C464.938,264.277,460.578,256.165,454.313,249.708z M223.819,79.562l213.947-6.856l36.06,121.529l-47.959,35.513L242.472,110.338
|
||||||
|
l-52.058,79.011l-0.08,0.123c-4.694,7.26-14.416,9.349-21.676,4.66c-7.26-4.691-9.35-14.415-4.645-21.697L223.819,79.562z
|
||||||
|
M73.986,361.949c-4.694,7.261-14.418,9.35-21.675,4.66c-3.517-2.273-5.939-5.779-6.819-9.873
|
||||||
|
c-0.879-4.094-0.113-8.285,2.161-11.802l32.971-51.027c2.997-4.637,8.043-7.164,13.192-7.164c2.913,0,5.86,0.81,8.484,2.505
|
||||||
|
c3.517,2.273,5.938,5.778,6.818,9.872s0.113,8.286-2.159,11.803L73.986,361.949z M128.011,396.858
|
||||||
|
c-4.694,7.26-14.417,9.348-21.676,4.659c-7.26-4.691-9.35-14.415-4.658-21.675l32.972-51.027
|
||||||
|
c2.997-4.637,8.043-7.164,13.192-7.164c2.913,0,5.86,0.81,8.484,2.506c7.26,4.691,9.35,14.415,4.659,21.675L128.011,396.858z
|
||||||
|
M215.006,380.74l-32.972,51.027c-4.691,7.262-14.415,9.349-21.674,4.659c-3.517-2.273-5.939-5.779-6.818-9.873
|
||||||
|
c-0.88-4.094-0.114-8.285,2.159-11.803l32.972-51.027c2.273-3.517,5.778-5.938,9.872-6.818c1.107-0.237,2.22-0.355,3.324-0.355
|
||||||
|
c2.985,0,5.911,0.857,8.477,2.516C217.607,363.757,219.697,373.48,215.006,380.74z M432.488,292.041
|
||||||
|
c-2.273,3.517-5.778,5.938-9.872,6.818c-4.094,0.881-8.286,0.113-11.802-2.159l-10.939-7.068l-0.001-0.001l-51.028-32.972
|
||||||
|
l-17.892,27.69l10.94,7.07l40.088,25.904c3.517,2.273,5.938,5.778,6.818,9.872s0.113,8.286-2.159,11.803s-5.779,5.939-9.872,6.819
|
||||||
|
c-4.095,0.879-8.285,0.113-11.803-2.159l-51.027-32.972l-17.892,27.69l40.087,25.902c7.26,4.691,9.35,14.414,4.659,21.675
|
||||||
|
c-2.273,3.517-5.779,5.939-9.872,6.819c-4.095,0.879-8.285,0.113-11.802-2.159l-43.558-28.145l-17.892,27.69l32.617,21.076
|
||||||
|
c7.26,4.693,9.351,14.415,4.659,21.676c-2.273,3.517-5.778,5.939-9.872,6.819c-4.068,0.874-8.232,0.122-11.735-2.117
|
||||||
|
l-39.081-25.909l8.443-13.068c14.557-22.529,8.072-52.702-14.457-67.258c-10.349-6.687-22.309-8.922-33.629-7.214
|
||||||
|
c-3.094-11.023-10.046-21.008-20.394-27.695c-10.342-6.682-22.292-8.919-33.605-7.217c-3.199-11.436-10.36-21.192-20.42-27.692
|
||||||
|
c-18.62-12.034-42.458-9.676-58.391,4.224l-21.076-18.14l70.215-144.958l50.897,12.241l-25.527,39.639
|
||||||
|
c-14.557,22.529-8.072,52.701,14.457,67.258c22.506,14.544,52.642,8.083,67.217-14.392l33.979-51.572l175.87,114.508
|
||||||
|
c3.516,2.273,5.938,5.778,6.818,9.872C435.528,284.332,434.761,288.523,432.488,292.041z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 3.6 KiB |
2
assets/images/flags/flag-de.svg
Normale Datei
2
assets/images/flags/flag-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
assets/images/flags/flag-en.svg
Normale Datei
50
assets/images/flags/flag-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 |
3
assets/images/icons/arrow-down.svg
Normale Datei
3
assets/images/icons/arrow-down.svg
Normale Datei
@@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 213 B |
4
assets/images/icons/check-circle-filled.svg
Normale Datei
4
assets/images/icons/check-circle-filled.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12S6.48 22 12 22 22 17.52 22 12 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M8 12L12 16L16 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 297 B |
4
assets/images/icons/check-circle.svg
Normale Datei
4
assets/images/icons/check-circle.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12S6.48 22 12 22 22 17.52 22 12 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M8 12L12 16L16 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 297 B |
3
assets/images/icons/chevron-down.svg
Normale Datei
3
assets/images/icons/chevron-down.svg
Normale Datei
@@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 197 B |
4
assets/images/icons/clock-circle.svg
Normale Datei
4
assets/images/icons/clock-circle.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<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="2"/>
|
||||||
|
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 248 B |
4
assets/images/icons/clock.svg
Normale Datei
4
assets/images/icons/clock.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<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="2"/>
|
||||||
|
<path d="M12 6V12L16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 248 B |
4
assets/images/icons/cube.svg
Normale Datei
4
assets/images/icons/cube.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2L4 8V16L12 22L20 16V8L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M12 12L4 8M12 12L20 8M12 12V22" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 253 B |
4
assets/images/icons/document.svg
Normale Datei
4
assets/images/icons/document.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<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="M7 7H17M7 12H17M7 17H12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 274 B |
5
assets/images/icons/german-flag.svg
Normale Datei
5
assets/images/icons/german-flag.svg
Normale Datei
@@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0" y="0" width="60" height="12" fill="#000000"/>
|
||||||
|
<rect x="0" y="12" width="60" height="12" fill="#DD0000"/>
|
||||||
|
<rect x="0" y="24" width="60" height="12" fill="#FFCE00"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 255 B |
6
assets/images/icons/globe.svg
Normale Datei
6
assets/images/icons/globe.svg
Normale Datei
@@ -0,0 +1,6 @@
|
|||||||
|
<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="2"/>
|
||||||
|
<ellipse cx="12" cy="12" rx="10" ry="4" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M2 12H22" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M12 2V22" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 368 B |
1
assets/images/icons/languages.svg
Normale Datei
1
assets/images/icons/languages.svg
Normale Datei
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 318 B |
4
assets/images/icons/location.svg
Normale Datei
4
assets/images/icons/location.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22S19 14.25 19 9C19 5.13 15.87 2 12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="9" r="2.5" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 290 B |
5
assets/images/icons/lock.svg
Normale Datei
5
assets/images/icons/lock.svg
Normale Datei
@@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M7 11V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V11" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="16" r="1" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 346 B |
1
assets/images/icons/monitor.svg
Normale Datei
1
assets/images/icons/monitor.svg
Normale Datei
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 314 B |
3
assets/images/icons/plus-circle.svg
Normale Datei
3
assets/images/icons/plus-circle.svg
Normale Datei
@@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9 11H15M12 8V14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 264 B |
3
assets/images/icons/pyramid.svg
Normale Datei
3
assets/images/icons/pyramid.svg
Normale Datei
@@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 21H21M4 18H20M5 15H19M6 12H18M8 9H16M10 6H14M12 3V6" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 189 B |
4
assets/images/icons/shield-check.svg
Normale Datei
4
assets/images/icons/shield-check.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<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="2"/>
|
||||||
|
<path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 266 B |
4
assets/images/icons/shield-play.svg
Normale Datei
4
assets/images/icons/shield-play.svg
Normale Datei
@@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2L3 7V11C3 16 7 20 12 21C17 20 21 16 21 11V7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<polygon points="10,8 16,12 10,16" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 250 B |
3
assets/images/icons/shield.svg
Normale Datei
3
assets/images/icons/shield.svg
Normale Datei
@@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2L3.5 7V11.5C3.5 16.5 6.5 21 12 22C17.5 21 20.5 16.5 20.5 11.5V7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 209 B |
5
assets/images/icons/video-camera.svg
Normale Datei
5
assets/images/icons/video-camera.svg
Normale Datei
@@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="2" y="6" width="20" height="12" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M18 8L22 6V18L18 16" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 346 B |
6
assets/images/icons/world-globe.svg
Normale Datei
6
assets/images/icons/world-globe.svg
Normale Datei
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/>
|
||||||
|
<path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/>
|
||||||
|
<path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/>
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 446 B |
8
assets/images/logos/AegisSightLogo_NavyGold.svg
Normale Datei
8
assets/images/logos/AegisSightLogo_NavyGold.svg
Normale Datei
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 400 497" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g id="svgg">
|
||||||
|
<path id="rechts" d="M212.575,238.576C212.984,240.67 223.048,241.002 270.154,240.533C349.694,239.739 344.481,239.31 346.236,243.942C347.823,248.13 347.264,250.927 338.778,272.292C333.041,286.737 321.692,301.671 304.569,327.057C262.704,389.124 258.243,380.556 257.465,379.844C256.548,379.007 256.695,378.153 256.7,377.409C256.827,359.293 254.573,273.452 254.549,270.937C254.525,268.422 254.116,268.891 229.156,268.982C211.282,269.047 211.756,268.669 211.925,271.847C211.971,272.701 212.094,316.69 212.2,369.6C212.306,422.51 212.487,468.568 212.604,469.063C213.014,470.81 224.336,462 224.6,462C224.864,462 237.107,453.265 241.4,450.384C242.5,449.646 244.343,448.313 245.496,447.421C246.648,446.53 248.865,444.9 250.421,443.8C251.978,442.7 255.169,440.115 257.513,438.055C259.857,435.996 262.771,433.605 263.988,432.743C267.489,430.261 269.974,428.216 270.637,427.269C270.973,426.789 271.767,426.127 272.4,425.8C273.034,425.472 273.862,424.68 274.24,424.04C274.618,423.399 275.574,422.512 276.364,422.067C277.741,421.292 287.002,412.973 290.077,409.749C290.89,408.897 293.68,406.009 296.277,403.331C303.179,396.216 308.766,389.886 310.684,387.009C311.611,385.619 312.782,384.149 313.286,383.741C313.791,383.334 314.523,382.55 314.913,382C315.304,381.45 316.113,380.353 316.711,379.562C317.31,378.771 318.552,377.132 319.471,375.919C320.389,374.706 321.709,373.103 322.403,372.357C324.097,370.534 325.597,368.32 327.217,365.252C327.957,363.85 329.057,362.338 329.66,361.892C330.264,361.446 331.622,359.655 332.679,357.912C333.735,356.168 335.453,353.696 336.496,352.417C337.539,351.139 338.935,348.947 339.599,347.546C341.424,343.695 344.598,338.004 345.689,336.626C347.172,334.754 348.692,331.944 348.986,330.528C349.132,329.828 349.51,329.041 349.826,328.779C350.142,328.517 350.4,328.069 350.4,327.784C350.4,327.499 351.048,326.045 351.84,324.552C352.632,323.059 353.784,320.479 354.401,318.819C355.017,317.159 356.416,314.072 357.509,311.96C358.602,309.848 359.894,306.968 360.38,305.56C360.866,304.152 361.593,302.46 361.995,301.8C362.398,301.14 362.941,299.795 363.203,298.812C363.464,297.828 363.931,296.663 364.239,296.223C364.548,295.782 364.8,295.078 364.8,294.658C364.8,293.56 367.089,287.051 368.23,284.904C368.764,283.901 369.201,282.793 369.202,282.44C369.204,282.088 369.46,281.312 369.771,280.715C370.082,280.118 370.552,278.588 370.814,277.315C371.076,276.042 371.715,273.867 372.234,272.482C372.753,271.097 373.442,268.667 373.765,267.082C374.657,262.705 375.074,261.226 376.185,258.503C376.746,257.13 377.395,254.61 377.628,252.903C377.861,251.196 386.4,207.294 386.4,202.415C386.4,200.114 384.943,198.138 382.973,197.769C382.197,197.623 390.698,196.027 262.4,197.136L256.297,196.493C254.923,195.188 254.409,193.392 254.634,190.691C255.021,186.052 255.075,102.153 254.699,90.2C254.256,76.132 254.359,75.232 256.566,73.785C257.5,73.174 257.724,73.166 258.9,73.706C259.615,74.035 343.437,105.997 345.2,108.641L346.2,110.142L346.246,163.984L347.17,164.968L348.095,165.953L367.317,165.835L386.539,165.718L387.711,164.406L388.883,163.095L388.646,155.847C388.515,151.861 388.304,143.29 388.176,136.8C387.97,126.347 389.116,102.223 388.883,92.984C388.587,81.212 385.041,79.623 381.162,77.313C378.036,75.451 212.403,10.83 212.49,12.505" style="fill:rgb(200,168,81);"/>
|
||||||
|
<path id="links" d="M31.8,72.797C19.193,77.854 16.869,77.149 16.354,86.093C16.177,89.171 13.694,109.47 13.373,112C11.292,128.389 11.075,175.356 12.999,192.8C13.326,195.77 15.755,217.626 17.524,225.4C17.975,227.38 21.242,245.556 21.798,247.6C23.196,252.741 27.444,269.357 28.368,273C29.454,277.277 33.845,288.636 34.632,290.326C35.42,292.017 39.017,301.259 39.364,301.931C39.973,303.107 41.279,306.405 42.799,310.6C43.879,313.58 46.904,319.091 47.546,320.62C48.78,323.561 51.339,328.992 51.965,330C52.17,330.33 53.466,332.67 54.845,335.2C56.223,337.73 65.855,353.259 67.765,356.052C72.504,362.981 75.544,366.754 76.46,368.119C78.119,370.593 79.488,372.185 85.821,379C87.66,380.98 89.758,383.356 90.483,384.279C92.003,386.218 92.035,386.23 93.151,385.3C94.267,384.37 94.041,384.013 94.036,382.593C94.015,376.905 94.025,351.182 94.025,351.182C94.062,315.081 94.745,313.16 93.752,308.626C92.302,301.997 88.001,300.043 80.439,284.793C71.474,266.714 65.169,255.803 62.016,248.485C61.011,246.153 59.289,240.91 61.521,240.882C65.215,240.836 143.575,240.107 144.382,240.673C145.808,241.671 146.494,243.516 146.346,245.959C146.058,250.736 146.217,438.282 146.511,439.663C146.825,441.137 153.946,447.096 162.193,452.924C177.223,463.547 187.111,469.578 187.956,468.458C189.091,466.954 188.058,10.288 188.006,12.482M146.001,134.292C145.999,164.821 146.043,190.718 146.099,191.84C146.336,196.617 147.019,196.45 127.622,196.354C106.312,196.249 58.054,196.89 58.054,196.89L57.06,195.896C55.315,194.152 55.678,132.49 55.766,126C56.004,108.467 56.656,110.707 66.745,106.586C70.345,105.116 134.261,79.128 135.708,78.566C146.998,74.183 145.972,74.295 146.055,76.768" style="fill:rgb(10,24,50);"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 5.3 KiB |
BIN
assets/images/logos/Logo+Schrift_Rechts.png
Normale Datei
BIN
assets/images/logos/Logo+Schrift_Rechts.png
Normale Datei
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 31 KiB |
20
assets/images/logos/Logo+Schrift_Rechts.svg
Normale Datei
20
assets/images/logos/Logo+Schrift_Rechts.svg
Normale Datei
@@ -0,0 +1,20 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg viewBox="0 0 1231 385" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g id="Logo-Schrift" serif:id="Logo+Schrift" transform="matrix(1.075028,0,0,0.631883,0,-494.958122)">
|
||||||
|
<rect x="0" y="783.307" width="1144.799" height="607.865" style="fill:none;"/>
|
||||||
|
<g transform="matrix(1.521788,0,0,2.589032,114.348241,790.79828)">
|
||||||
|
<g transform="matrix(104.166667,0,0,104.166667,636.063765,201.582585)">
|
||||||
|
</g>
|
||||||
|
<text x="120.491px" y="201.583px" style="font-family:'Lato-Bold', 'Lato', sans-serif;font-weight:700;font-size:104.167px;fill:rgb(10,24,50);">Aegis<tspan x="375.595px 432.522px " y="201.583px 201.583px ">Si</tspan>gh<tspan x="572.001px " y="201.583px ">t</tspan></text>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.738271,0,0,1.256027,162.661946,1094.789099)">
|
||||||
|
<g transform="matrix(1,0,0,1,-200,-248.484848)">
|
||||||
|
<g id="svgg">
|
||||||
|
<path id="rechts" d="M212.575,238.576C212.984,240.67 223.048,241.002 270.154,240.533C349.694,239.739 344.481,239.31 346.236,243.942C347.823,248.13 347.264,250.927 338.778,272.292C333.041,286.737 321.692,301.671 304.569,327.057C262.704,389.124 258.243,380.556 257.465,379.844C256.548,379.007 256.695,378.153 256.7,377.409C256.827,359.293 254.573,273.452 254.549,270.937C254.525,268.422 254.116,268.891 229.156,268.982C211.282,269.047 211.756,268.669 211.925,271.847C211.971,272.701 212.094,316.69 212.2,369.6C212.306,422.51 212.487,468.568 212.604,469.063C213.014,470.81 224.336,462 224.6,462C224.864,462 237.107,453.265 241.4,450.384C242.5,449.646 244.343,448.313 245.496,447.421C246.648,446.53 248.865,444.9 250.421,443.8C251.978,442.7 255.169,440.115 257.513,438.055C259.857,435.996 262.771,433.605 263.988,432.743C267.489,430.261 269.974,428.216 270.637,427.269C270.973,426.789 271.767,426.127 272.4,425.8C273.034,425.472 273.862,424.68 274.24,424.04C274.618,423.399 275.574,422.512 276.364,422.067C277.741,421.292 287.002,412.973 290.077,409.749C290.89,408.897 293.68,406.009 296.277,403.331C303.179,396.216 308.766,389.886 310.684,387.009C311.611,385.619 312.782,384.149 313.286,383.741C313.791,383.334 314.523,382.55 314.913,382C315.304,381.45 316.113,380.353 316.711,379.562C317.31,378.771 318.552,377.132 319.471,375.919C320.389,374.706 321.709,373.103 322.403,372.357C324.097,370.534 325.597,368.32 327.217,365.252C327.957,363.85 329.057,362.338 329.66,361.892C330.264,361.446 331.622,359.655 332.679,357.912C333.735,356.168 335.453,353.696 336.496,352.417C337.539,351.139 338.935,348.947 339.599,347.546C341.424,343.695 344.598,338.004 345.689,336.626C347.172,334.754 348.692,331.944 348.986,330.528C349.132,329.828 349.51,329.041 349.826,328.779C350.142,328.517 350.4,328.069 350.4,327.784C350.4,327.499 351.048,326.045 351.84,324.552C352.632,323.059 353.784,320.479 354.401,318.819C355.017,317.159 356.416,314.072 357.509,311.96C358.602,309.848 359.894,306.968 360.38,305.56C360.866,304.152 361.593,302.46 361.995,301.8C362.398,301.14 362.941,299.795 363.203,298.812C363.464,297.828 363.931,296.663 364.239,296.223C364.548,295.782 364.8,295.078 364.8,294.658C364.8,293.56 367.089,287.051 368.23,284.904C368.764,283.901 369.201,282.793 369.202,282.44C369.204,282.088 369.46,281.312 369.771,280.715C370.082,280.118 370.552,278.588 370.814,277.315C371.076,276.042 371.715,273.867 372.234,272.482C372.753,271.097 373.442,268.667 373.765,267.082C374.657,262.705 375.074,261.226 376.185,258.503C376.746,257.13 377.395,254.61 377.628,252.903C377.861,251.196 386.4,207.294 386.4,202.415C386.4,200.114 384.943,198.138 382.973,197.769C382.197,197.623 390.698,196.027 262.4,197.136L256.297,196.493C254.923,195.188 254.409,193.392 254.634,190.691C255.021,186.052 255.075,102.153 254.699,90.2C254.256,76.132 254.359,75.232 256.566,73.785C257.5,73.174 257.724,73.166 258.9,73.706C259.615,74.035 343.437,105.997 345.2,108.641L346.2,110.142L346.246,163.984L347.17,164.968L348.095,165.953L367.317,165.835L386.539,165.718L387.711,164.406L388.883,163.095L388.646,155.847C388.515,151.861 388.304,143.29 388.176,136.8C387.97,126.347 389.116,102.223 388.883,92.984C388.587,81.212 385.041,79.623 381.162,77.313C378.036,75.451 212.403,10.83 212.49,12.505" style="fill:rgb(200,168,81);"/>
|
||||||
|
<path id="links" d="M31.8,72.797C19.193,77.854 16.869,77.149 16.354,86.093C16.177,89.171 13.694,109.47 13.373,112C11.292,128.389 11.075,175.356 12.999,192.8C13.326,195.77 15.755,217.626 17.524,225.4C17.975,227.38 21.242,245.556 21.798,247.6C23.196,252.741 27.444,269.357 28.368,273C29.454,277.277 33.845,288.636 34.632,290.326C35.42,292.017 39.017,301.259 39.364,301.931C39.973,303.107 41.279,306.405 42.799,310.6C43.879,313.58 46.904,319.091 47.546,320.62C48.78,323.561 51.339,328.992 51.965,330C52.17,330.33 53.466,332.67 54.845,335.2C56.223,337.73 65.855,353.259 67.765,356.052C72.504,362.981 75.544,366.754 76.46,368.119C78.119,370.593 79.488,372.185 85.821,379C87.66,380.98 89.758,383.356 90.483,384.279C92.003,386.218 92.035,386.23 93.151,385.3C94.267,384.37 94.041,384.013 94.036,382.593C94.015,376.905 94.025,351.182 94.025,351.182C94.062,315.081 94.745,313.16 93.752,308.626C92.302,301.997 88.001,300.043 80.439,284.793C71.474,266.714 65.169,255.803 62.016,248.485C61.011,246.153 59.289,240.91 61.521,240.882C65.215,240.836 143.575,240.107 144.382,240.673C145.808,241.671 146.494,243.516 146.346,245.959C146.058,250.736 146.217,438.282 146.511,439.663C146.825,441.137 153.946,447.096 162.193,452.924C177.223,463.547 187.111,469.578 187.956,468.458C189.091,466.954 188.058,10.288 188.006,12.482M146.001,134.292C145.999,164.821 146.043,190.718 146.099,191.84C146.336,196.617 147.019,196.45 127.622,196.354C106.312,196.249 58.054,196.89 58.054,196.89L57.06,195.896C55.315,194.152 55.678,132.49 55.766,126C56.004,108.467 56.656,110.707 66.745,106.586C70.345,105.116 134.261,79.128 135.708,78.566C146.998,74.183 145.972,74.295 146.055,76.768" style="fill:rgb(10,24,50);"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 6.2 KiB |
BIN
assets/images/nrw.png
Normale Datei
BIN
assets/images/nrw.png
Normale Datei
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 46 KiB |
BIN
assets/images/og-image.png
Normale Datei
BIN
assets/images/og-image.png
Normale Datei
Binäre Datei nicht angezeigt.
|
Nachher Breite: | Höhe: | Größe: 35 KiB |
BIN
assets/videos/AFv6.mp4
LFS
Normale Datei
BIN
assets/videos/AFv6.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
71
assets/videos/README.md
Normale Datei
71
assets/videos/README.md
Normale Datei
@@ -0,0 +1,71 @@
|
|||||||
|
# Video Files / Video-Dateien
|
||||||
|
|
||||||
|
## ✅ Alle Videos sind vollständig!
|
||||||
|
|
||||||
|
Alle Videos wurden erfolgreich hochgeladen und sind einsatzbereit.
|
||||||
|
|
||||||
|
## Vorhandene Videos
|
||||||
|
|
||||||
|
| Datei | Größe | Status | Verwendung |
|
||||||
|
|-------|-------|--------|------------|
|
||||||
|
| `AFv6.mp4` | 90MB | ✅ Fertig | AccountForger Demo |
|
||||||
|
| `hero-code-abstract.mp4` | 11MB | ✅ Fertig | Hero Background 1 |
|
||||||
|
| `hero-data-flow.mp4` | 7.3MB | ✅ Fertig | Hero Background 2 |
|
||||||
|
| `hero-network-viz.mp4` | 14MB | ✅ Fertig | Hero Background 3 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original Hero Section Spezifikationen
|
||||||
|
|
||||||
|
Die Hero-Section benötigt rotierende Hintergrund-Videos. Diese sollten folgende Eigenschaften haben:
|
||||||
|
|
||||||
|
### Video-Spezifikationen:
|
||||||
|
- **Format:** MP4 (H.264 codec)
|
||||||
|
- **Auflösung:** 1920x1080 (Full HD) minimum
|
||||||
|
- **Länge:** 10-15 Sekunden Loop
|
||||||
|
- **Dateigröße:** Max. 5MB pro Video (komprimiert)
|
||||||
|
- **Framerate:** 24-30 fps
|
||||||
|
- **Audio:** Keine (Videos werden stumm abgespielt)
|
||||||
|
|
||||||
|
### Benötigte Videos:
|
||||||
|
|
||||||
|
1. **hero-tech-pattern.mp4**
|
||||||
|
- Abstrakte Tech-Muster oder Code-Visualisierung
|
||||||
|
- Helle, sanfte Bewegungen
|
||||||
|
- Farben: Weiß, Hellgrau, Hellblau
|
||||||
|
|
||||||
|
2. **hero-data-flow.mp4**
|
||||||
|
- Datenströme oder Partikel-Animationen
|
||||||
|
- Fließende Bewegungen
|
||||||
|
- Minimalistisch und hell
|
||||||
|
|
||||||
|
3. **hero-network-viz.mp4**
|
||||||
|
- Netzwerk-Nodes und Verbindungen
|
||||||
|
- Geometrische Formen
|
||||||
|
- Subtile Animationen
|
||||||
|
|
||||||
|
4. **hero-code-abstract.mp4**
|
||||||
|
- Code-Editor oder Terminal-Output
|
||||||
|
- Verschwommen/abstrakt
|
||||||
|
- Heller Hintergrund
|
||||||
|
|
||||||
|
### Empfohlene Tools zum Erstellen:
|
||||||
|
- After Effects (für professionelle Animationen)
|
||||||
|
- DaVinci Resolve (kostenlos)
|
||||||
|
- Blender (für 3D-Animationen)
|
||||||
|
- Online: Canva, Renderforest
|
||||||
|
|
||||||
|
### Kostenlose Stock-Video Quellen:
|
||||||
|
- Pexels Videos (https://www.pexels.com/videos/)
|
||||||
|
- Pixabay (https://pixabay.com/videos/)
|
||||||
|
- Videvo (https://www.videvo.net/)
|
||||||
|
- Coverr (https://coverr.co/)
|
||||||
|
|
||||||
|
### Komprimierung:
|
||||||
|
```bash
|
||||||
|
# FFmpeg Befehl zum Komprimieren:
|
||||||
|
ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset slow -vf scale=1920:1080 -an output.mp4
|
||||||
|
```
|
||||||
|
|
||||||
|
### Fallback:
|
||||||
|
Falls keine Videos vorhanden sind, funktioniert die Website trotzdem - es wird nur der statische Gradient-Hintergrund mit Particle-Animation angezeigt.
|
||||||
BIN
assets/videos/hero-code-abstract.mp4
LFS
Normale Datei
BIN
assets/videos/hero-code-abstract.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
assets/videos/hero-data-flow.mp4
LFS
Normale Datei
BIN
assets/videos/hero-data-flow.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
assets/videos/hero-network-viz.mp4
LFS
Normale Datei
BIN
assets/videos/hero-network-viz.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
10
assets/videos/video-placeholder.txt
Normale Datei
10
assets/videos/video-placeholder.txt
Normale Datei
@@ -0,0 +1,10 @@
|
|||||||
|
Die Video-Dateien sind zu groß für den direkten Upload.
|
||||||
|
|
||||||
|
Bitte laden Sie die Videos manuell herunter und platzieren Sie diese im assets/videos/ Verzeichnis:
|
||||||
|
|
||||||
|
1. AFv6.mp4 (90MB) - AccountForger Demo Video
|
||||||
|
2. hero-code-abstract.mp4 (11MB) - Hero Section Background Video 1
|
||||||
|
3. hero-data-flow.mp4 (7.3MB) - Hero Section Background Video 2
|
||||||
|
4. hero-network-viz.mp4 (14MB) - Hero Section Background Video 3
|
||||||
|
|
||||||
|
Alternativ können Sie die Videos über Git LFS oder einen separaten CDN/Storage-Service bereitstellen.
|
||||||
496
cookie-consent.css
Normale Datei
496
cookie-consent.css
Normale Datei
@@ -0,0 +1,496 @@
|
|||||||
|
/**
|
||||||
|
* Cookie Consent Banner - DSGVO-konform
|
||||||
|
* AegisSight
|
||||||
|
* Angepasst an Corporate Design (Rheinmetall Style)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* === CSS Variables (nutzt globale Tokens) === */
|
||||||
|
:root {
|
||||||
|
--consent-primary: var(--color-navy, #0A1832);
|
||||||
|
--consent-primary-dark: var(--color-navy-dark, #060F20);
|
||||||
|
--consent-gray-light: var(--color-gray-100, #f4f4f4);
|
||||||
|
--consent-white: var(--color-white, #FFFFFF);
|
||||||
|
--consent-text-dark: var(--color-gray-800, #333333);
|
||||||
|
--consent-text-gray: var(--color-gray-600, #666666);
|
||||||
|
--consent-border: var(--color-gray-200, #e0e0e0);
|
||||||
|
--consent-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
--consent-shadow-hover: 0 8px 24px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Demo Page Styling (AegisSight Style) === */
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--consent-text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: linear-gradient(135deg, var(--consent-primary-dark) 0%, var(--consent-primary) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: var(--consent-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background: var(--consent-text-dark);
|
||||||
|
color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer nav {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer nav a {
|
||||||
|
color: var(--consent-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer nav a:hover {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Cookie Consent Banner === */
|
||||||
|
|
||||||
|
/* Backdrop Overlay */
|
||||||
|
#cookie-consent-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 9998;
|
||||||
|
display: none;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cookie-consent-backdrop.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Banner Container */
|
||||||
|
#cookie-consent-banner {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.98);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
border-top: 2px solid var(--color-gold, #C8A851);
|
||||||
|
z-index: 9999;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cookie-consent-banner.active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Banner Content */
|
||||||
|
.consent-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--consent-text-dark);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-text {
|
||||||
|
color: var(--consent-text-gray);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-text strong {
|
||||||
|
color: var(--consent-text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Group */
|
||||||
|
.consent-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md, 8px);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn:focus {
|
||||||
|
outline: 3px solid rgba(52, 152, 219, 0.5);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn-primary {
|
||||||
|
background: var(--consent-primary);
|
||||||
|
color: white;
|
||||||
|
box-shadow: var(--consent-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn-primary:hover {
|
||||||
|
background: var(--consent-primary-dark);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--consent-shadow-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn-secondary {
|
||||||
|
background: var(--color-gray-600, #666666);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn-secondary:hover {
|
||||||
|
background: var(--color-gray-800, #333333);
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid var(--consent-primary);
|
||||||
|
color: var(--consent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn-outline:hover {
|
||||||
|
background: var(--consent-primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings Modal */
|
||||||
|
#cookie-consent-settings {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) scale(0.9);
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg, 16px);
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 10000;
|
||||||
|
max-width: 600px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cookie-consent-settings.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-header {
|
||||||
|
background: linear-gradient(135deg, var(--consent-primary-dark) 0%, var(--consent-primary) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: var(--consent-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-close {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Category Cards */
|
||||||
|
.cookie-category {
|
||||||
|
border: 2px solid var(--consent-border);
|
||||||
|
border-radius: var(--radius-md, 8px);
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
transition: border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-category:hover {
|
||||||
|
border-color: var(--consent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--consent-text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-toggle {
|
||||||
|
position: relative;
|
||||||
|
width: 50px;
|
||||||
|
height: 26px;
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 13px;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-toggle::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 3px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-toggle.active {
|
||||||
|
background: var(--color-gold, #C8A851);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-toggle.active::after {
|
||||||
|
transform: translateX(24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-toggle.disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-description {
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-details {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-details ul {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-details li {
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge */
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
background: #e0e0e0;
|
||||||
|
color: #555;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-required {
|
||||||
|
background: var(--consent-primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings Footer */
|
||||||
|
.settings-footer {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-footer .consent-btn {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
.settings-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-links a {
|
||||||
|
color: var(--consent-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-links a:hover {
|
||||||
|
color: var(--consent-primary-dark);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GPC Notice */
|
||||||
|
.gpc-notice {
|
||||||
|
background: #fff3cd;
|
||||||
|
border: 2px solid #ffc107;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpc-notice-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpc-notice-text {
|
||||||
|
flex: 1;
|
||||||
|
color: #856404;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpc-notice-text strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.consent-content {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-header h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consent-btn {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cookie-consent-settings {
|
||||||
|
width: 95%;
|
||||||
|
max-height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-footer {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-footer .consent-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-links {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
#cookie-consent-banner,
|
||||||
|
#cookie-consent-settings,
|
||||||
|
.category-toggle::after {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High Contrast Mode */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
#cookie-consent-banner {
|
||||||
|
border-top: 3px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-category {
|
||||||
|
border-width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
536
cookie-consent.js
Normale Datei
536
cookie-consent.js
Normale Datei
@@ -0,0 +1,536 @@
|
|||||||
|
/**
|
||||||
|
* Cookie Consent Manager - DSGVO-konform
|
||||||
|
* AegisSight
|
||||||
|
* Version 1.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// === CONFIGURATION ===
|
||||||
|
const CONFIG = {
|
||||||
|
CONSENT_VERSION: '1.0',
|
||||||
|
CONSENT_DURATION: 365, // days
|
||||||
|
STORAGE_KEY: 'insights-consent',
|
||||||
|
STORAGE_EXPIRES: 'insights-consent-expires',
|
||||||
|
STORAGE_DETAILS: 'insights-consent-details',
|
||||||
|
TRACKING_SCRIPT: '/analytics-und-so/datenblick.js',
|
||||||
|
WEBSITE_ID: '598ef5fd-d2dc-4540-9e65-602889981dac'
|
||||||
|
};
|
||||||
|
|
||||||
|
// === TRANSLATIONS ===
|
||||||
|
const TRANSLATIONS = {
|
||||||
|
de: {
|
||||||
|
title: 'Diese Website nutzt Cookies',
|
||||||
|
text: 'Wir verwenden AegisSight Analytics (basierend auf Umami), ein selbst gehostetes, cookieloses Analyse-Tool, um unsere Website zu verbessern. Dabei erfassen wir anonymisierte Informationen über Ihre Nutzung (besuchte Seiten, Browser, ungefährer Standort). Alle Daten bleiben auf unserem Server in Deutschland und werden niemals an Dritte weitergegeben.',
|
||||||
|
privacy: 'Mit "Alle akzeptieren" stimmen Sie der Verwendung von Analyse-Cookies zu. Sie können Ihre Einwilligung jederzeit in den Cookie-Einstellungen widerrufen.',
|
||||||
|
btnAcceptAll: '✓ Alle akzeptieren',
|
||||||
|
btnRejectAll: '✗ Nur notwendige',
|
||||||
|
btnSettings: 'Details & Einstellungen',
|
||||||
|
settingsTitle: 'Cookie-Einstellungen',
|
||||||
|
categoryNecessary: 'Notwendig',
|
||||||
|
categoryAnalytics: 'Statistik & Analyse',
|
||||||
|
necessaryDesc: 'Technisch erforderliche Cookies für Login und Sicherheit. Diese Kategorie kann nicht deaktiviert werden.',
|
||||||
|
analyticsDesc: 'Anonymisierte Auswertung der Website-Nutzung zur Verbesserung unserer Inhalte. Alle Daten bleiben auf unserem Server in Deutschland.',
|
||||||
|
btnSaveSettings: 'Auswahl speichern',
|
||||||
|
linkPrivacy: 'Datenschutzerklärung',
|
||||||
|
linkImprint: 'Impressum',
|
||||||
|
gpcTitle: 'Global Privacy Control erkannt',
|
||||||
|
gpcText: 'Ihr Browser signalisiert, dass Sie nicht getrackt werden möchten (GPC). Wir respektieren diese Einstellung und haben Analyse-Cookies automatisch deaktiviert.'
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
title: 'This website uses cookies',
|
||||||
|
text: 'We use AegisSight Analytics (based on Umami), a self-hosted, cookieless analytics tool to improve our website. We collect anonymized information about your usage (pages visited, browser, approximate location). All data remains on our server in Germany and is never shared with third parties.',
|
||||||
|
privacy: 'By clicking "Accept all", you consent to the use of analytics cookies. You can revoke your consent at any time in the cookie settings.',
|
||||||
|
btnAcceptAll: '✓ Accept all',
|
||||||
|
btnRejectAll: '✗ Only necessary',
|
||||||
|
btnSettings: 'Details & Settings',
|
||||||
|
settingsTitle: 'Cookie Settings',
|
||||||
|
categoryNecessary: 'Necessary',
|
||||||
|
categoryAnalytics: 'Statistics & Analytics',
|
||||||
|
necessaryDesc: 'Technically required cookies for login and security. This category cannot be disabled.',
|
||||||
|
analyticsDesc: 'Anonymized analysis of website usage to improve our content. All data remains on our server in Germany.',
|
||||||
|
btnSaveSettings: 'Save selection',
|
||||||
|
linkPrivacy: 'Privacy Policy',
|
||||||
|
linkImprint: 'Imprint',
|
||||||
|
gpcTitle: 'Global Privacy Control detected',
|
||||||
|
gpcText: 'Your browser signals that you do not want to be tracked (GPC). We respect this setting and have automatically disabled analytics cookies.'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// === STATE ===
|
||||||
|
let currentLanguage = document.documentElement.lang || 'de';
|
||||||
|
let consentState = {
|
||||||
|
necessary: true,
|
||||||
|
analytics: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// === UTILITY FUNCTIONS ===
|
||||||
|
|
||||||
|
function getTranslation(key) {
|
||||||
|
return TRANSLATIONS[currentLanguage]?.[key] || TRANSLATIONS.de[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStorageWithExpiry(key, value, days) {
|
||||||
|
const now = new Date();
|
||||||
|
const item = {
|
||||||
|
value: value,
|
||||||
|
expires: now.getTime() + (days * 24 * 60 * 60 * 1000)
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
localStorage.setItem(key, JSON.stringify(item));
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('[CookieConsent] LocalStorage not available:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStorageWithExpiry(key) {
|
||||||
|
try {
|
||||||
|
const itemStr = localStorage.getItem(key);
|
||||||
|
if (!itemStr) return null;
|
||||||
|
|
||||||
|
const item = JSON.parse(itemStr);
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
if (now.getTime() > item.expires) {
|
||||||
|
localStorage.removeItem(key);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return item.value;
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('[CookieConsent] Error reading from LocalStorage:', e);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function detectGPC() {
|
||||||
|
// Check for Global Privacy Control
|
||||||
|
if (navigator.globalPrivacyControl === true) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
// Check DNT as fallback (deprecated but still used)
|
||||||
|
if (navigator.doNotTrack === '1' || window.doNotTrack === '1') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveConsentDetails() {
|
||||||
|
const details = {
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
version: CONFIG.CONSENT_VERSION,
|
||||||
|
categories: consentState,
|
||||||
|
language: currentLanguage,
|
||||||
|
userAgent: navigator.userAgent,
|
||||||
|
gpcSignal: detectGPC()
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
localStorage.setItem(CONFIG.STORAGE_DETAILS, JSON.stringify(details));
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('[CookieConsent] Could not save consent details:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteCookie(name) {
|
||||||
|
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
||||||
|
}
|
||||||
|
|
||||||
|
// === TRACKING CONTROL ===
|
||||||
|
|
||||||
|
function loadTracking() {
|
||||||
|
if (consentState.analytics) {
|
||||||
|
// Check if script already loaded
|
||||||
|
if (document.querySelector(`script[src="${CONFIG.TRACKING_SCRIPT}"]`)) {
|
||||||
|
console.log('[CookieConsent] Tracking script already loaded');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = CONFIG.TRACKING_SCRIPT;
|
||||||
|
script.setAttribute("data-website-id", CONFIG.WEBSITE_ID);
|
||||||
|
script.defer = true;
|
||||||
|
script.onerror = () => {
|
||||||
|
console.error('[CookieConsent] Failed to load tracking script');
|
||||||
|
};
|
||||||
|
document.head.appendChild(script);
|
||||||
|
// Custom Analytics Events laden
|
||||||
|
const eventsScript = document.createElement("script");
|
||||||
|
eventsScript.src = "/analytics-events.js";
|
||||||
|
eventsScript.defer = true;
|
||||||
|
document.head.appendChild(eventsScript);
|
||||||
|
console.log('[CookieConsent] Analytics enabled - tracking script loaded');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function disableTracking() {
|
||||||
|
// Remove tracking script if present
|
||||||
|
const trackingScript = document.querySelector(`script[src="${CONFIG.TRACKING_SCRIPT}"]`);
|
||||||
|
if (trackingScript) {
|
||||||
|
trackingScript.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Analytics Events Script entfernen
|
||||||
|
const eventsScript = document.querySelector('script[src="/analytics-events.js"]');
|
||||||
|
if (eventsScript) {
|
||||||
|
eventsScript.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[CookieConsent] Analytics disabled - tracking blocked');
|
||||||
|
}
|
||||||
|
|
||||||
|
// === CONSENT MANAGEMENT ===
|
||||||
|
|
||||||
|
function saveConsent(analytics) {
|
||||||
|
consentState.analytics = analytics;
|
||||||
|
|
||||||
|
const consentValue = analytics ? 'accepted' : 'rejected';
|
||||||
|
setStorageWithExpiry(CONFIG.STORAGE_KEY, consentValue, CONFIG.CONSENT_DURATION);
|
||||||
|
|
||||||
|
saveConsentDetails();
|
||||||
|
|
||||||
|
if (analytics) {
|
||||||
|
loadTracking();
|
||||||
|
} else {
|
||||||
|
disableTracking();
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[CookieConsent] Consent saved:', consentValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadConsent() {
|
||||||
|
const consent = getStorageWithExpiry(CONFIG.STORAGE_KEY);
|
||||||
|
|
||||||
|
if (consent === null) {
|
||||||
|
// Check for GPC - auto-reject if enabled
|
||||||
|
if (detectGPC()) {
|
||||||
|
console.log('[CookieConsent] GPC detected - auto-rejecting analytics');
|
||||||
|
consentState.analytics = false;
|
||||||
|
return null; // Still show banner with GPC notice
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
consentState.analytics = (consent === 'accepted');
|
||||||
|
|
||||||
|
// Check version
|
||||||
|
try {
|
||||||
|
const details = JSON.parse(localStorage.getItem(CONFIG.STORAGE_DETAILS) || '{}');
|
||||||
|
if (details.version !== CONFIG.CONSENT_VERSION) {
|
||||||
|
console.log('[CookieConsent] Version mismatch - re-prompting');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('[CookieConsent] Could not verify consent version');
|
||||||
|
}
|
||||||
|
|
||||||
|
return consent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === UI CREATION ===
|
||||||
|
|
||||||
|
function createBannerHTML() {
|
||||||
|
const gpcDetected = detectGPC();
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div id="cookie-consent-backdrop" class="active"></div>
|
||||||
|
<div id="cookie-consent-banner" class="active" role="dialog" aria-labelledby="consent-title" aria-modal="true">
|
||||||
|
<div class="consent-content">
|
||||||
|
${gpcDetected ? `
|
||||||
|
<div class="gpc-notice">
|
||||||
|
<div class="gpc-notice-icon"></div>
|
||||||
|
<div class="gpc-notice-text">
|
||||||
|
<strong>${getTranslation('gpcTitle')}</strong>
|
||||||
|
${getTranslation('gpcText')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
|
||||||
|
<div class="consent-header">
|
||||||
|
<h2 id="consent-title">${getTranslation('title')}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="consent-text">
|
||||||
|
<p>${getTranslation('text')}</p>
|
||||||
|
<p><small>${getTranslation('privacy')}</small></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="consent-buttons">
|
||||||
|
<button class="consent-btn consent-btn-outline" id="btn-settings">
|
||||||
|
${getTranslation('btnSettings')}
|
||||||
|
</button>
|
||||||
|
<button class="consent-btn consent-btn-primary" id="btn-accept-all">
|
||||||
|
${getTranslation('btnAcceptAll')}
|
||||||
|
</button>
|
||||||
|
<button class="consent-btn consent-btn-secondary" id="btn-reject-all">
|
||||||
|
${getTranslation('btnRejectAll')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSettingsHTML() {
|
||||||
|
return `
|
||||||
|
<div id="cookie-consent-settings" role="dialog" aria-labelledby="settings-title" aria-modal="true">
|
||||||
|
<div class="settings-header">
|
||||||
|
<h3 id="settings-title">${getTranslation('settingsTitle')}</h3>
|
||||||
|
<button class="settings-close" aria-label="Close">×</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-content">
|
||||||
|
<!-- Necessary Category -->
|
||||||
|
<div class="cookie-category">
|
||||||
|
<div class="category-header">
|
||||||
|
<div class="category-title">
|
||||||
|
<span>${getTranslation('categoryNecessary')}</span>
|
||||||
|
<span class="badge badge-required">Immer aktiv</span>
|
||||||
|
</div>
|
||||||
|
<div class="category-toggle disabled active"></div>
|
||||||
|
</div>
|
||||||
|
<div class="category-description">
|
||||||
|
${getTranslation('necessaryDesc')}
|
||||||
|
</div>
|
||||||
|
<div class="category-details">
|
||||||
|
<strong>Cookies in dieser Kategorie:</strong>
|
||||||
|
<ul>
|
||||||
|
<li>Keine Cookies (nur im Login-Bereich)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Analytics Category -->
|
||||||
|
<div class="cookie-category">
|
||||||
|
<div class="category-header" id="analytics-category-header">
|
||||||
|
<div class="category-title">
|
||||||
|
<span>${getTranslation('categoryAnalytics')}</span>
|
||||||
|
</div>
|
||||||
|
<div class="category-toggle" id="analytics-toggle"
|
||||||
|
role="switch"
|
||||||
|
aria-checked="${consentState.analytics}"
|
||||||
|
tabindex="0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="category-description">
|
||||||
|
${getTranslation('analyticsDesc')}
|
||||||
|
</div>
|
||||||
|
<div class="category-details">
|
||||||
|
<strong>AegisSight Analytics (Self-Hosted, Umami)</strong>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Cookies:</strong> Keine (cookieloses Tracking)</li>
|
||||||
|
<li><strong>Zweck:</strong> Anonymisierte Nutzungsstatistiken</li>
|
||||||
|
<li><strong>Daten:</strong> Besuchte Seiten, Browser-Typ, ungefährer Standort (Stadt)</li>
|
||||||
|
<li><strong>Server:</strong> Deutschland (aegis-sight.de)</li>
|
||||||
|
<li><strong>Weitergabe:</strong> Keine Drittanbieter</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-links">
|
||||||
|
<a href="datenschutz.html" target="_blank">${getTranslation('linkPrivacy')}</a>
|
||||||
|
<a href="impressum.html" target="_blank">${getTranslation('linkImprint')}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-footer">
|
||||||
|
<button class="consent-btn consent-btn-secondary" id="btn-save-settings">
|
||||||
|
${getTranslation('btnSaveSettings')}
|
||||||
|
</button>
|
||||||
|
<button class="consent-btn consent-btn-primary" id="btn-accept-all-settings">
|
||||||
|
${getTranslation('btnAcceptAll')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === UI CONTROL ===
|
||||||
|
|
||||||
|
function showBanner() {
|
||||||
|
// Check if already exists
|
||||||
|
if (document.getElementById('cookie-consent-banner')) {
|
||||||
|
const banner = document.getElementById('cookie-consent-banner');
|
||||||
|
const backdrop = document.getElementById('cookie-consent-backdrop');
|
||||||
|
banner.classList.add('active');
|
||||||
|
backdrop.classList.add('active');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create and append
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.innerHTML = createBannerHTML();
|
||||||
|
document.body.appendChild(container.firstElementChild); // backdrop
|
||||||
|
document.body.appendChild(container.lastElementChild); // banner
|
||||||
|
|
||||||
|
// Add event listeners
|
||||||
|
document.getElementById('btn-accept-all').addEventListener('click', handleAcceptAll);
|
||||||
|
document.getElementById('btn-reject-all').addEventListener('click', handleRejectAll);
|
||||||
|
document.getElementById('btn-settings').addEventListener('click', showSettings);
|
||||||
|
|
||||||
|
// Prevent page scroll
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
|
// Focus trap
|
||||||
|
document.getElementById('btn-accept-all').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideBanner() {
|
||||||
|
const banner = document.getElementById('cookie-consent-banner');
|
||||||
|
const backdrop = document.getElementById('cookie-consent-backdrop');
|
||||||
|
|
||||||
|
if (banner) {
|
||||||
|
banner.classList.remove('active');
|
||||||
|
backdrop.classList.remove('active');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
banner.remove();
|
||||||
|
backdrop.remove();
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-enable page scroll
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSettings() {
|
||||||
|
// Create settings modal if not exists
|
||||||
|
if (!document.getElementById('cookie-consent-settings')) {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.innerHTML = createSettingsHTML();
|
||||||
|
document.body.appendChild(container.firstElementChild);
|
||||||
|
|
||||||
|
// Add event listeners
|
||||||
|
document.querySelector('.settings-close').addEventListener('click', hideSettings);
|
||||||
|
document.getElementById('btn-save-settings').addEventListener('click', handleSaveSettings);
|
||||||
|
document.getElementById('btn-accept-all-settings').addEventListener('click', handleAcceptAll);
|
||||||
|
|
||||||
|
// Analytics toggle
|
||||||
|
const analyticsToggle = document.getElementById('analytics-toggle');
|
||||||
|
const analyticsHeader = document.getElementById('analytics-category-header');
|
||||||
|
|
||||||
|
analyticsHeader.addEventListener('click', () => {
|
||||||
|
consentState.analytics = !consentState.analytics;
|
||||||
|
updateToggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
analyticsToggle.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
consentState.analytics = !consentState.analytics;
|
||||||
|
updateToggle();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateToggle() {
|
||||||
|
analyticsToggle.classList.toggle('active', consentState.analytics);
|
||||||
|
analyticsToggle.setAttribute('aria-checked', consentState.analytics);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateToggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings = document.getElementById('cookie-consent-settings');
|
||||||
|
settings.classList.add('active');
|
||||||
|
|
||||||
|
// Focus trap
|
||||||
|
document.querySelector('.settings-close').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideSettings() {
|
||||||
|
const settings = document.getElementById('cookie-consent-settings');
|
||||||
|
if (settings) {
|
||||||
|
settings.classList.remove('active');
|
||||||
|
setTimeout(() => settings.remove(), 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// === EVENT HANDLERS ===
|
||||||
|
|
||||||
|
function handleAcceptAll() {
|
||||||
|
saveConsent(true);
|
||||||
|
hideBanner();
|
||||||
|
hideSettings();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRejectAll() {
|
||||||
|
saveConsent(false);
|
||||||
|
hideBanner();
|
||||||
|
hideSettings();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSaveSettings() {
|
||||||
|
saveConsent(consentState.analytics);
|
||||||
|
hideSettings();
|
||||||
|
hideBanner();
|
||||||
|
}
|
||||||
|
|
||||||
|
// === INITIALIZATION ===
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
console.log('[CookieConsent] Initializing v' + CONFIG.CONSENT_VERSION);
|
||||||
|
|
||||||
|
// Load existing consent
|
||||||
|
const consent = loadConsent();
|
||||||
|
|
||||||
|
if (consent === null) {
|
||||||
|
// No consent yet - show banner
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', showBanner);
|
||||||
|
} else {
|
||||||
|
showBanner();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Consent exists - apply settings
|
||||||
|
if (consentState.analytics) {
|
||||||
|
loadTracking();
|
||||||
|
}
|
||||||
|
console.log('[CookieConsent] Existing consent loaded:', consent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cookie settings link in footer
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const settingsLink = document.getElementById('cookie-settings-link');
|
||||||
|
if (settingsLink) {
|
||||||
|
settingsLink.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
showBanner();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// === PUBLIC API ===
|
||||||
|
|
||||||
|
window.CookieConsent = {
|
||||||
|
show: showBanner,
|
||||||
|
hide: hideBanner,
|
||||||
|
showSettings: showSettings,
|
||||||
|
acceptAll: handleAcceptAll,
|
||||||
|
rejectAll: handleRejectAll,
|
||||||
|
getStatus: function() {
|
||||||
|
const consent = getStorageWithExpiry(CONFIG.STORAGE_KEY);
|
||||||
|
const details = JSON.parse(localStorage.getItem(CONFIG.STORAGE_DETAILS) || '{}');
|
||||||
|
|
||||||
|
return {
|
||||||
|
consent: consent,
|
||||||
|
analytics: consentState.analytics,
|
||||||
|
version: details.version,
|
||||||
|
timestamp: details.timestamp,
|
||||||
|
expires: localStorage.getItem(CONFIG.STORAGE_KEY) ?
|
||||||
|
JSON.parse(localStorage.getItem(CONFIG.STORAGE_KEY)).expires : null,
|
||||||
|
gpc: detectGPC()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
setLanguage: function(lang) {
|
||||||
|
if (TRANSLATIONS[lang]) {
|
||||||
|
currentLanguage = lang;
|
||||||
|
console.log('[CookieConsent] Language set to:', lang);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-initialize
|
||||||
|
init();
|
||||||
|
|
||||||
|
})();
|
||||||
612
css/about-modern.css
Normale Datei
612
css/about-modern.css
Normale Datei
@@ -0,0 +1,612 @@
|
|||||||
|
/* Modern About Section Redesign */
|
||||||
|
|
||||||
|
/* About Section Background */
|
||||||
|
.about-section {
|
||||||
|
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
right: -20%;
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
background: radial-gradient(circle, rgba(10, 24, 50, 0.04) 0%, transparent 70%);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: float-slow 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-slow {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
33% { transform: translate(-30px, -30px) scale(1.05); }
|
||||||
|
66% { transform: translate(30px, -20px) scale(0.95); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modern Tab Navigation */
|
||||||
|
.about-tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 100px;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
max-width: 800px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-tab {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
padding: 15px 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 50px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-tab::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 50px;
|
||||||
|
background: var(--color-navy);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-tab.active::before {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-tab.active {
|
||||||
|
color: var(--color-white);
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 8px 20px rgba(10, 24, 50, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-tab:hover:not(.active) {
|
||||||
|
color: var(--color-gold-dark);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
background: rgba(200, 168, 81, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tab Content Panels */
|
||||||
|
.about-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-panel {
|
||||||
|
display: none;
|
||||||
|
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-panel.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Company Tab - Cards Layout */
|
||||||
|
#who-we-are .panel-text {
|
||||||
|
display: flex;
|
||||||
|
gap: 40px;
|
||||||
|
align-items: stretch;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-cards-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30px;
|
||||||
|
width: 50%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background: #0A1832;
|
||||||
|
transform: scaleY(0);
|
||||||
|
transition: transform 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card:hover::before {
|
||||||
|
transform: scaleY(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card:hover {
|
||||||
|
transform: translateX(6px);
|
||||||
|
box-shadow: 0 12px 32px rgba(10, 24, 50, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card h4 {
|
||||||
|
color: var(--color-navy);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card-icon {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05));
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card:hover .company-card-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
background: #0A1832;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card-icon img {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%);
|
||||||
|
transition: filter 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card:hover .company-card-icon img {
|
||||||
|
filter: brightness(0) saturate(100%) invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mission & Values - Modern Grid */
|
||||||
|
.mission-grid {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-header {
|
||||||
|
background: #0A1832;
|
||||||
|
color: white;
|
||||||
|
padding: 60px;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-header::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
right: -10%;
|
||||||
|
width: 50%;
|
||||||
|
height: 200%;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-header h3 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-header p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.values-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 35px;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(15, 114, 181, 0.1) 0%, transparent 100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card:hover::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 32px rgba(10, 24, 50, 0.12);
|
||||||
|
border-color: var(--color-navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-icon {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05));
|
||||||
|
border-radius: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-icon img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%);
|
||||||
|
transition: filter 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card:hover .value-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
background: #0A1832;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-card:hover .value-icon img {
|
||||||
|
filter: brightness(0) saturate(100%) invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Competencies - Timeline Style */
|
||||||
|
.competencies-list {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competencies-list::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 0;
|
||||||
|
width: 3px;
|
||||||
|
height: 100%;
|
||||||
|
background: #0A1832;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competency-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.competency-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -30px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: white;
|
||||||
|
border: 4px solid #0f72b5;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competency-item:hover {
|
||||||
|
transform: translateX(10px);
|
||||||
|
box-shadow: 0 8px 24px rgba(10, 24, 50, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.competency-number {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #C8A851, #B39645);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Why AegisSight - 2x2 Grid */
|
||||||
|
.why-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 30px;
|
||||||
|
grid-auto-rows: minmax(250px, auto);
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card {
|
||||||
|
grid-column: span 1;
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 35px;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 24px rgba(10, 24, 50, 0.1);
|
||||||
|
border-color: rgba(10, 24, 50, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-icon {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 0 auto 25px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05));
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-icon img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%);
|
||||||
|
transition: filter 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* German Flag Icon Special Styling */
|
||||||
|
.german-flag-icon {
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.german-flag-icon img {
|
||||||
|
width: 70px !important;
|
||||||
|
height: 42px !important;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card:hover .german-flag-icon {
|
||||||
|
background: transparent !important;
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card:hover .german-flag-icon img {
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||||
|
filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card:hover .why-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
background: #0A1832;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card:hover .why-icon img {
|
||||||
|
filter: brightness(0) saturate(100%) invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card h4 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--color-navy);
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-card p {
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
line-height: 1.8;
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Location Section with Map */
|
||||||
|
.location-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 45%;
|
||||||
|
margin-left: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 350px;
|
||||||
|
padding: 30px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(circle at 35% 45%, rgba(10, 24, 50, 0.3) 0%, transparent 40%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 15px 50px rgba(10, 24, 50, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map:hover img {
|
||||||
|
filter: brightness(1.1) contrast(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulsing glow effect for NRW region */
|
||||||
|
@keyframes nrwPulse {
|
||||||
|
0%, 100% {
|
||||||
|
filter: drop-shadow(0 0 10px rgba(10, 24, 50, 0.5));
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: drop-shadow(0 0 25px rgba(10, 24, 50, 0.8));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map:hover img {
|
||||||
|
animation: nrwPulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Location Badge Enhancement */
|
||||||
|
.location-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
background: linear-gradient(135deg, rgba(15, 114, 181, 0.1), rgba(0, 64, 110, 0.05));
|
||||||
|
border-radius: 100px;
|
||||||
|
color: #0f72b5;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 2px solid rgba(15, 114, 181, 0.2);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-badge:hover {
|
||||||
|
background: #0A1832;
|
||||||
|
color: white;
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 10px 30px rgba(15, 114, 181, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-badge svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-badge:hover svg {
|
||||||
|
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ping {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.about-tabs {
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 20px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competencies-list {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
222
css/animations-enhanced.css
Normale Datei
222
css/animations-enhanced.css
Normale Datei
@@ -0,0 +1,222 @@
|
|||||||
|
/* Enhanced Modern Animations & Effects */
|
||||||
|
|
||||||
|
/* Glassmorphism Base */
|
||||||
|
.glass {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-dark {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth Fade In Animations */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInScale {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInRight {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-50px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Staggered Animation Classes */
|
||||||
|
.animate-in {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-in-scale {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stagger-1 { animation-delay: 0.1s; }
|
||||||
|
.stagger-2 { animation-delay: 0.2s; }
|
||||||
|
.stagger-3 { animation-delay: 0.3s; }
|
||||||
|
.stagger-4 { animation-delay: 0.4s; }
|
||||||
|
.stagger-5 { animation-delay: 0.5s; }
|
||||||
|
|
||||||
|
/* Floating Animation */
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse Glow Animation - Dezent */
|
||||||
|
@keyframes pulseGlow {
|
||||||
|
0%, 100% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 5px rgba(10, 24, 50, 0.2),
|
||||||
|
0 0 10px rgba(10, 24, 50, 0.1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 10px rgba(10, 24, 50, 0.3),
|
||||||
|
0 0 20px rgba(10, 24, 50, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse-glow {
|
||||||
|
animation: pulseGlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gradient Animation */
|
||||||
|
@keyframes gradientShift {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-animated {
|
||||||
|
background: linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
var(--color-navy),
|
||||||
|
var(--color-navy-light),
|
||||||
|
var(--color-navy),
|
||||||
|
var(--color-blue)
|
||||||
|
);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradientShift 15s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text Reveal Animation */
|
||||||
|
@keyframes textReveal {
|
||||||
|
from {
|
||||||
|
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-reveal {
|
||||||
|
animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card Hover Effects - Subtil */
|
||||||
|
.card-hover-lift {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover-lift:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 24px rgba(10, 24, 50, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Magnetic Button Effect */
|
||||||
|
.magnetic-button {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.magnetic-button::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: width 0.6s, height 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magnetic-button:hover::before {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Parallax Layers */
|
||||||
|
.parallax-slow { transform: translateZ(-1px) scale(1.5); }
|
||||||
|
.parallax-medium { transform: translateZ(-2px) scale(2); }
|
||||||
|
.parallax-fast { transform: translateZ(-3px) scale(2.5); }
|
||||||
|
|
||||||
|
/* Reveal on Scroll */
|
||||||
|
.reveal {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(50px);
|
||||||
|
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth Scroll Indicator */
|
||||||
|
@keyframes scrollDown {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
transform: translateY(20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-indicator-animated {
|
||||||
|
animation: scrollDown 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading Shimmer - Für Gold-Akzente */
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: -1000px 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 1000px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shimmer {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(200, 168, 81, 0) 0%,
|
||||||
|
rgba(200, 168, 81, 0.2) 50%,
|
||||||
|
rgba(200, 168, 81, 0) 100%
|
||||||
|
);
|
||||||
|
background-size: 1000px 100%;
|
||||||
|
animation: shimmer 3s infinite;
|
||||||
|
}
|
||||||
271
css/animations.css
Normale Datei
271
css/animations.css
Normale Datei
@@ -0,0 +1,271 @@
|
|||||||
|
/* Global Styles */
|
||||||
|
:root {
|
||||||
|
--primary-blue: #0f72b5;
|
||||||
|
--dark-blue: #00406e;
|
||||||
|
--accent-blue: #0f72b5;
|
||||||
|
--secondary-blue: #00406e;
|
||||||
|
--light-gray: #f4f4f4;
|
||||||
|
--white: #FFFFFF;
|
||||||
|
--text-dark: #333333;
|
||||||
|
--border-gray: #e0e0e0;
|
||||||
|
--alert-red: #FF4444;
|
||||||
|
--success-green: #4CAF50;
|
||||||
|
--warning-yellow: #FFC107;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
background-color: var(--white);
|
||||||
|
color: var(--text-dark);
|
||||||
|
overflow-x: hidden;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Bebas Neue', cursive;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: var(--white);
|
||||||
|
border-bottom: 1px solid var(--border-gray);
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 55px;
|
||||||
|
width: auto;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a {
|
||||||
|
color: var(--text-dark);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--primary-blue);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-extras {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--primary-blue);
|
||||||
|
color: var(--primary-blue);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-toggle:hover {
|
||||||
|
background: var(--primary-blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button, .primary-button, .secondary-button {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button, .primary-button {
|
||||||
|
background: var(--primary-blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover, .primary-button:hover {
|
||||||
|
background: var(--dark-blue);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 20px rgba(15, 114, 181, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--primary-blue);
|
||||||
|
border: 2px solid var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:hover {
|
||||||
|
background: var(--primary-blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.large {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 100px;
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clean transition */
|
||||||
|
.hero::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Video Background */
|
||||||
|
.hero-video {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Video Overlay to match brand colors */
|
||||||
|
.video-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(15, 114, 181, 0.7) 0%,
|
||||||
|
rgba(0, 64, 110, 0.7) 50%,
|
||||||
|
rgba(15, 114, 181, 0.7) 100%);
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#particleCanvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
text-align: center;
|
||||||
|
z-index: 3;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--text-dark);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
display: block;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: var(--primary-blue);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
47
css/fonts.css
Normale Datei
47
css/fonts.css
Normale Datei
@@ -0,0 +1,47 @@
|
|||||||
|
/* Local Font Definitions - DSGVO-compliant */
|
||||||
|
/*
|
||||||
|
* Schrift-Zuordnung:
|
||||||
|
* - Bebas Neue: Nur für Hero-Titel "SICHERHEIT MADE IN GERMANY" (Display)
|
||||||
|
* - Inter: Navigation, Überschriften, Fließtext, Buttons (alles andere)
|
||||||
|
* - System-Fonts: Nur als Fallback
|
||||||
|
*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Bebas Neue';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('../assets/fonts/BebasNeue-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('../assets/fonts/Inter-Light.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
|
||||||
|
}
|
||||||
1550
css/main.css
Normale Datei
1550
css/main.css
Normale Datei
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
539
css/mobile.css
Normale Datei
539
css/mobile.css
Normale Datei
@@ -0,0 +1,539 @@
|
|||||||
|
/* Mobile Responsive Styles - AegisSight */
|
||||||
|
/* Mobile-First Approach with Progressive Enhancement */
|
||||||
|
|
||||||
|
/* Base Mobile Styles (320px and up) */
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
/* Typography Scaling */
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section Mobile */
|
||||||
|
.hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title .main-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep videos on mobile but optimize */
|
||||||
|
.hero-video-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-video {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Mobile */
|
||||||
|
.navbar {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
max-width: 120px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide desktop menu */
|
||||||
|
.nav-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Menu Styles */
|
||||||
|
.mobile-menu-toggle {
|
||||||
|
display: block;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger span {
|
||||||
|
display: block;
|
||||||
|
width: 25px;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--color-navy, #0A1832);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hamburger Animation */
|
||||||
|
.mobile-menu-toggle.active .hamburger span:nth-child(1) {
|
||||||
|
transform: rotate(45deg) translate(5px, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-toggle.active .hamburger span:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-toggle.active .hamburger span:nth-child(3) {
|
||||||
|
transform: rotate(-45deg) translate(7px, -6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Navigation Menu */
|
||||||
|
.nav-menu-mobile {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: -100%;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 300px;
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(10, 24, 50, 0.98);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
transition: right 0.3s ease;
|
||||||
|
z-index: 1000;
|
||||||
|
padding: 4rem 2rem 2rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Close button inside mobile menu */
|
||||||
|
.mobile-menu-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-close:hover {
|
||||||
|
background: rgba(200, 168, 81, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-close svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
stroke: var(--color-white, #fff);
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu-mobile.active {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu-mobile ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu-mobile li {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu-mobile a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu-mobile a:hover {
|
||||||
|
color: var(--color-gold, #C8A851);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Overlay */
|
||||||
|
.mobile-menu-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-overlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections Mobile */
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards and Grids Mobile */
|
||||||
|
.tool-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons Mobile - Touch Friendly */
|
||||||
|
button,
|
||||||
|
.btn,
|
||||||
|
.cta-button,
|
||||||
|
.lang-toggle {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Tabs Mobile */
|
||||||
|
.about-tabs {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-tab {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Products Section Mobile */
|
||||||
|
.products-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 1rem;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Product header mobile - override grid to stack icon above text */
|
||||||
|
.product-header {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
grid-template-columns: none !important;
|
||||||
|
padding: 1.5rem !important;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-icon-wrapper {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-tagline {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-align: center !important;
|
||||||
|
width: 100%;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Specific fix for AccountForger tagline */
|
||||||
|
.product-card:nth-child(2) .product-tagline {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
white-space: nowrap; /* Verhindert Umbruch innerhalb der Zeilen */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Force line break only after "mit" */
|
||||||
|
.product-card:nth-child(2) .product-tagline::before {
|
||||||
|
content: "Zugang nur mit\A Berechtigung";
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide original text */
|
||||||
|
.product-card:nth-child(2) .product-tagline {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:nth-child(2) .product-tagline::before {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Mobile */
|
||||||
|
.footer-content {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Section - Company Cards Mobile Fix */
|
||||||
|
.company-cards-wrapper {
|
||||||
|
width: 100% !important;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card h4 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About panel layout mobile */
|
||||||
|
.about-panel {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-text {
|
||||||
|
max-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Location section mobile - move to bottom */
|
||||||
|
.location-section {
|
||||||
|
width: 100% !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-top: 2rem;
|
||||||
|
order: 2; /* Move to bottom */
|
||||||
|
height: auto !important;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: rgba(10, 15, 28, 0.05);
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-cards-wrapper {
|
||||||
|
order: 1; /* Keep at top */
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map {
|
||||||
|
max-width: 150px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-germany-map img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-badge {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet Styles (481px - 768px) */
|
||||||
|
@media screen and (min-width: 481px) and (max-width: 768px) {
|
||||||
|
/* Typography */
|
||||||
|
html {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hero-title .main-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Videos already visible from mobile */
|
||||||
|
|
||||||
|
/* Tool Grid - 2 columns */
|
||||||
|
.tool-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Tabs - Horizontal with wrap */
|
||||||
|
.about-tabs {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-tab {
|
||||||
|
flex: 1 1 calc(50% - 0.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small Desktop (769px - 1024px) */
|
||||||
|
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
||||||
|
/* Container widths */
|
||||||
|
.container {
|
||||||
|
max-width: 960px;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation adjustments */
|
||||||
|
.nav-menu {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid adjustments */
|
||||||
|
.tool-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch Device Optimizations */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
/* Remove hover effects on touch devices */
|
||||||
|
.tool-card:hover,
|
||||||
|
.product-card:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Larger touch targets */
|
||||||
|
a, button {
|
||||||
|
min-height: 44px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Landscape Mobile Optimization */
|
||||||
|
@media screen and (max-width: 768px) and (orientation: landscape) {
|
||||||
|
.hero {
|
||||||
|
min-height: auto;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title .main-title {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High Resolution Mobile Displays */
|
||||||
|
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||||
|
/* Sharper borders and shadows */
|
||||||
|
.tool-card,
|
||||||
|
.product-card {
|
||||||
|
border: 0.5px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Performance Optimizations for Mobile */
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
/* Disable complex animations on mobile */
|
||||||
|
.animate-in,
|
||||||
|
.stagger-1,
|
||||||
|
.stagger-2,
|
||||||
|
.stagger-3 {
|
||||||
|
animation: none !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduce particle effects */
|
||||||
|
#particleCanvas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optimize images */
|
||||||
|
img {
|
||||||
|
image-rendering: -webkit-optimize-contrast;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet and Small Desktop (768px - 1024px) */
|
||||||
|
@media screen and (min-width: 768px) and (max-width: 1024px) {
|
||||||
|
/* Navigation adjustments for tablets */
|
||||||
|
.nav-container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep centered logo but adjust size */
|
||||||
|
.logo-img {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust menu spacing */
|
||||||
|
.nav-menu {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Language toggle smaller on tablets */
|
||||||
|
.lang-toggle {
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Print Styles */
|
||||||
|
@media print {
|
||||||
|
.navbar,
|
||||||
|
.hero-video-container,
|
||||||
|
.scroll-indicator,
|
||||||
|
.mobile-menu-toggle {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
502
css/products-modern.css
Normale Datei
502
css/products-modern.css
Normale Datei
@@ -0,0 +1,502 @@
|
|||||||
|
/* Modern Products Section Design */
|
||||||
|
|
||||||
|
.products-section {
|
||||||
|
background: var(--color-navy);
|
||||||
|
position: relative;
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated Background */
|
||||||
|
.products-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 50%, rgba(19, 40, 68, 0.3) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 50%, rgba(19, 40, 68, 0.2) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 50% 100%, rgba(200, 168, 81, 0.05) 0%, transparent 50%);
|
||||||
|
animation: backgroundShift 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backgroundShift {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
33% { transform: translate(-20px, -20px) scale(1.1); }
|
||||||
|
66% { transform: translate(20px, -10px) scale(0.95); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Title */
|
||||||
|
.products-section .section-title {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
animation: titleGlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes titleGlow {
|
||||||
|
0%, 100% { text-shadow: 0 0 15px rgba(200, 168, 81, 0.3); }
|
||||||
|
50% { text-shadow: 0 0 25px rgba(200, 168, 81, 0.5), 0 0 40px rgba(200, 168, 81, 0.2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-section .section-subtitle {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Products Container */
|
||||||
|
.products-container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Products Grid */
|
||||||
|
.products-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 30px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Product Card */
|
||||||
|
.product-card {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.95));
|
||||||
|
border: 1px solid rgba(200, 168, 81, 0.3);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 900px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, transparent 0%, rgba(15, 114, 181, 0.05) 100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(250, 250, 250, 1));
|
||||||
|
border-color: var(--color-gold);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 40px rgba(200, 168, 81, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Product Header */
|
||||||
|
.product-header {
|
||||||
|
padding: 40px 40px 30px;
|
||||||
|
background: linear-gradient(135deg, rgba(10, 24, 50, 0.1) 0%, transparent 50%);
|
||||||
|
border-bottom: 1px solid rgba(200, 168, 81, 0.2);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px 1fr;
|
||||||
|
align-items: center;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-icon-wrapper {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-icon-bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, var(--color-navy), var(--color-gold));
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
opacity: 0.1;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover .product-icon-bg {
|
||||||
|
opacity: 0.25;
|
||||||
|
transform: rotate(5deg) scale(1.05);
|
||||||
|
background: linear-gradient(135deg, var(--color-navy), var(--color-gold-dark));
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-icon {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
filter: brightness(0) saturate(100%) invert(8%) sepia(13%) saturate(4290%) hue-rotate(189deg) brightness(95%) contrast(97%);
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover .product-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding-right: 105px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
color: #0A1832;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Specific styling for product titles */
|
||||||
|
.product-title[data-translate="productAccountForgerTitle"],
|
||||||
|
.product-title[data-translate="productOsintMonitorTitle"] {
|
||||||
|
color: #0A1832;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover .product-title {
|
||||||
|
color: var(--color-navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-tagline {
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Product Body */
|
||||||
|
.product-body {
|
||||||
|
padding: 30px 40px;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-description {
|
||||||
|
color: rgba(0, 0, 0, 0.7);
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Product Features */
|
||||||
|
.product-features {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-features li {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
padding: 8px 0;
|
||||||
|
padding-left: 30px;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-features li::before {
|
||||||
|
content: '▸';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--color-gold);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover .product-features li {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover .product-features li::before {
|
||||||
|
color: var(--color-gold-light);
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Product Footer */
|
||||||
|
.product-footer {
|
||||||
|
padding: 30px 40px;
|
||||||
|
background: rgba(10, 24, 50, 0.05);
|
||||||
|
border-top: 1px solid rgba(200, 168, 81, 0.2);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #00ff00;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||||||
|
50% { opacity: 0.5; transform: scale(1.2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Learn More Button */
|
||||||
|
.product-learn-more {
|
||||||
|
background: var(--color-gold);
|
||||||
|
border: 2px solid var(--color-gold);
|
||||||
|
color: var(--color-navy);
|
||||||
|
padding: 10px 25px;
|
||||||
|
border-radius: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-learn-more::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
background: var(--color-navy);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: all 0.5s;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-learn-more:hover::before {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-learn-more:hover {
|
||||||
|
color: var(--color-gold);
|
||||||
|
border-color: var(--color-gold);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 10px 30px rgba(200, 168, 81, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-learn-more span {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tools Grid Styling - Inside Product Body */
|
||||||
|
.product-body .tools-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 20px;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-body .tools-grid.expanded {
|
||||||
|
max-height: 2000px;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive grid adjustment */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.product-body .tools-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||||||
|
.product-body .tools-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid .tool-card {
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid .tool-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
border-color: rgba(200, 168, 81, 0.3);
|
||||||
|
box-shadow: 0 5px 15px rgba(10, 24, 50, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid .tool-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, rgba(15, 114, 181, 0.15), rgba(0, 64, 110, 0.1));
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid .tool-icon img {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
filter: brightness(0) saturate(100%) invert(52%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(108%) contrast(92%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid h4 {
|
||||||
|
color: var(--color-navy);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid .tool-features ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid .tool-features li {
|
||||||
|
color: rgba(0, 0, 0, 0.7);
|
||||||
|
padding: 5px 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-grid .tool-features li::before {
|
||||||
|
content: '▸';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--color-gold);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 968px) {
|
||||||
|
.products-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card.featured {
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-section .section-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Floating Tech Particles */
|
||||||
|
.tech-particles {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle {
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(200, 168, 81, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle:nth-child(1) {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
top: 10%;
|
||||||
|
left: 20%;
|
||||||
|
animation: float1 15s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle:nth-child(2) {
|
||||||
|
width: 2px;
|
||||||
|
height: 2px;
|
||||||
|
top: 70%;
|
||||||
|
left: 80%;
|
||||||
|
animation: float2 20s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle:nth-child(3) {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
top: 40%;
|
||||||
|
left: 60%;
|
||||||
|
animation: float3 18s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float1 {
|
||||||
|
0%, 100% { transform: translate(0, 0); opacity: 0; }
|
||||||
|
10% { opacity: 1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { transform: translate(100px, -100px); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float2 {
|
||||||
|
0%, 100% { transform: translate(0, 0); opacity: 0; }
|
||||||
|
10% { opacity: 1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { transform: translate(-100px, -150px); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float3 {
|
||||||
|
0%, 100% { transform: translate(0, 0); opacity: 0; }
|
||||||
|
10% { opacity: 1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { transform: translate(50px, -120px); opacity: 0; }
|
||||||
|
}
|
||||||
437
css/section-transitions.css
Normale Datei
437
css/section-transitions.css
Normale Datei
@@ -0,0 +1,437 @@
|
|||||||
|
/* Modern Section Transitions & Dividers */
|
||||||
|
|
||||||
|
/* Simple fade transition between sections */
|
||||||
|
.section-fade {
|
||||||
|
position: relative;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-fade.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Subtle gradient overlay at section edges */
|
||||||
|
.section-gradient-top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-gradient-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: linear-gradient(to top, rgba(244,244,244,1) 0%, rgba(244,244,244,0) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated Gradient Divider */
|
||||||
|
.gradient-divider {
|
||||||
|
position: relative;
|
||||||
|
height: 200px;
|
||||||
|
margin: -100px 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(15, 114, 181, 0.03) 25%,
|
||||||
|
rgba(15, 114, 181, 0.08) 50%,
|
||||||
|
rgba(15, 114, 181, 0.03) 75%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
z-index: 5;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-divider::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 200%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(15, 114, 181, 0.2),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: shimmerDivider 8s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmerDivider {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Diagonal Section Transitions */
|
||||||
|
.diagonal-section {
|
||||||
|
position: relative;
|
||||||
|
padding: 120px 0 80px;
|
||||||
|
margin-top: -50px;
|
||||||
|
clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diagonal-section-reverse {
|
||||||
|
position: relative;
|
||||||
|
padding: 120px 0 80px;
|
||||||
|
margin-top: -50px;
|
||||||
|
clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blob Divider */
|
||||||
|
.blob-divider {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -150px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
z-index: 5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob-shape {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, var(--color-blue), var(--color-blue-hover));
|
||||||
|
opacity: 0.1;
|
||||||
|
border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
|
||||||
|
animation: morphBlob 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes morphBlob {
|
||||||
|
0%, 100% {
|
||||||
|
border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
|
||||||
|
transform: translate(0, 0) scale(1);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
border-radius: 60% 40% 30% 70% / 60% 70% 30% 40%;
|
||||||
|
transform: translate(-30px, -20px) scale(1.1);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
border-radius: 30% 70% 70% 30% / 30% 60% 40% 70%;
|
||||||
|
transform: translate(30px, 20px) scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Particle Bridge */
|
||||||
|
.particle-bridge {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
bottom: -100px;
|
||||||
|
left: 0;
|
||||||
|
z-index: 8;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle {
|
||||||
|
position: absolute;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--color-blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floatParticle {
|
||||||
|
0% {
|
||||||
|
transform: translateY(100px) translateX(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-100px) translateX(100px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Curved Section */
|
||||||
|
.curved-section {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 100px;
|
||||||
|
margin-top: -80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.curved-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
background: inherit;
|
||||||
|
border-radius: 0 0 50% 50% / 0 0 100% 100%;
|
||||||
|
transform: scaleX(1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glass Transition */
|
||||||
|
.glass-transition {
|
||||||
|
position: relative;
|
||||||
|
margin: 50px 0;
|
||||||
|
padding: 40px 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(255, 255, 255, 0.1) 0%,
|
||||||
|
rgba(255, 255, 255, 0.05) 100%
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-top: 1px solid rgba(15, 114, 181, 0.1);
|
||||||
|
border-bottom: 1px solid rgba(15, 114, 181, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Zigzag Border */
|
||||||
|
.zigzag-top {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zigzag-top::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
transparent 33.33%,
|
||||||
|
var(--color-blue) 33.33%,
|
||||||
|
var(--color-blue) 66.66%,
|
||||||
|
transparent 66.66%
|
||||||
|
);
|
||||||
|
background-size: 30px 60px;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flowing Lines */
|
||||||
|
.flow-lines {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
bottom: -100px;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line {
|
||||||
|
position: absolute;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--color-blue), transparent);
|
||||||
|
animation: flowLine 6s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line:nth-child(1) {
|
||||||
|
top: 20%;
|
||||||
|
animation-delay: 0s;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line:nth-child(2) {
|
||||||
|
top: 40%;
|
||||||
|
animation-delay: 1s;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line:nth-child(3) {
|
||||||
|
top: 60%;
|
||||||
|
animation-delay: 2s;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-line:nth-child(4) {
|
||||||
|
top: 80%;
|
||||||
|
animation-delay: 3s;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flowLine {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(200%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reveal Sections with Mask */
|
||||||
|
.section-reveal {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-reveal::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(255, 255, 255, 0.4),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: revealMask 2s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes revealMask {
|
||||||
|
to {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Geometric Pattern Divider */
|
||||||
|
.geometric-divider {
|
||||||
|
position: relative;
|
||||||
|
height: 100px;
|
||||||
|
margin: 40px 0;
|
||||||
|
background-image:
|
||||||
|
repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
rgba(15, 114, 181, 0.05) 10px,
|
||||||
|
rgba(15, 114, 181, 0.05) 20px
|
||||||
|
),
|
||||||
|
repeating-linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 10px,
|
||||||
|
rgba(15, 114, 181, 0.05) 10px,
|
||||||
|
rgba(15, 114, 181, 0.05) 20px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated Border */
|
||||||
|
.animated-border {
|
||||||
|
position: relative;
|
||||||
|
padding: var(--space-4xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-border::before,
|
||||||
|
.animated-border::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
var(--color-blue) 20%,
|
||||||
|
var(--color-blue) 80%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-border::before {
|
||||||
|
top: 0;
|
||||||
|
animation: borderSlide 4s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-border::after {
|
||||||
|
bottom: 0;
|
||||||
|
animation: borderSlide 4s infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes borderSlide {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Fade Transitions */
|
||||||
|
.fade-section {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(50px);
|
||||||
|
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-section.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Parallax Background Sections */
|
||||||
|
.parallax-section {
|
||||||
|
position: relative;
|
||||||
|
min-height: 500px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: -20%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 120%;
|
||||||
|
background-image: linear-gradient(135deg, rgba(15, 114, 181, 0.05) 0%, transparent 100%);
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Split Color Section */
|
||||||
|
.split-section {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-section::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent 48%,
|
||||||
|
rgba(15, 114, 181, 0.05) 49%,
|
||||||
|
rgba(15, 114, 181, 0.05) 51%,
|
||||||
|
transparent 52%
|
||||||
|
);
|
||||||
|
animation: rotateSplit 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotateSplit {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
320
datenschutz-en.html
Normale Datei
320
datenschutz-en.html
Normale Datei
@@ -0,0 +1,320 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Privacy Policy - AegisSight</title>
|
||||||
|
|
||||||
|
<!-- Prevent search engine indexing -->
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
<link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #0a0f1c;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.datenschutz-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 120px 20px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datenschutz-header {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datenschutz-header h1 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datenschutz-content {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.datenschutz-section {
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datenschutz-section h2 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #0f72b5;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datenschutz-section h3 {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datenschutz-section p {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datenschutz-section ul {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.datenschutz-section li {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.datenschutz-section strong {
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important-notice {
|
||||||
|
background: rgba(15, 114, 181, 0.08);
|
||||||
|
border-left: 4px solid #0f72b5;
|
||||||
|
padding: 15px 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.important-notice p {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
.source-note {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid rgba(15, 114, 181, 0.1);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #666;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
.source-note a {
|
||||||
|
color: #0f72b5;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.source-note a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" role="navigation" aria-label="Main navigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="assets/images/logos/Logo+Schrift_Rechts.svg" alt="AegisSight" class="logo-img">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="index.html#home">Home</a></li>
|
||||||
|
<li><a href="index.html#about">About Us</a></li>
|
||||||
|
<li><a href="index.html#products">Products & Solutions</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="en" aria-label="Switch language">DE | EN</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="datenschutz-container">
|
||||||
|
<div class="datenschutz-header">
|
||||||
|
<h1>Privacy Policy</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-content">
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>1. Data Protection at a Glance</h2>
|
||||||
|
|
||||||
|
<h3>General Information</h3>
|
||||||
|
<p>The following information provides a simple overview of what happens to your personal data when you visit our website. Personal data is any data that can personally identify you. Detailed information on the subject of data protection can be found in our privacy policy listed below this text.</p>
|
||||||
|
|
||||||
|
<h3>Data Collection on Our Website</h3>
|
||||||
|
<p><strong>Who is responsible for data collection on this website?</strong><br>
|
||||||
|
Data processing on this website is carried out by the website operator. You can find their contact details in the legal notice of this website.</p>
|
||||||
|
|
||||||
|
<p><strong>How do we collect your data?</strong><br>
|
||||||
|
Your data is collected, on the one hand, by you providing it to us. This could be data that you enter in a contact form, for example.</p>
|
||||||
|
|
||||||
|
<p>Other data is collected automatically by our IT systems when you visit the website. This is primarily technical data (e.g., internet browser, operating system, or time of page access). This data is collected automatically as soon as you enter our website.</p>
|
||||||
|
|
||||||
|
<p><strong>What do we use your data for?</strong><br>
|
||||||
|
Part of the data is collected to ensure error-free provision of the website. Other data may be used to analyze your user behavior.</p>
|
||||||
|
|
||||||
|
<p><strong>What rights do you have regarding your data?</strong><br>
|
||||||
|
You have the right to receive information about the origin, recipient, and purpose of your stored personal data free of charge at any time. You also have the right to request the correction, blocking, or deletion of this data. You can contact us at any time at the address given in the legal notice if you have further questions about data protection. Furthermore, you have the right to lodge a complaint with the competent supervisory authority.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>2. General Information and Mandatory Information</h2>
|
||||||
|
|
||||||
|
<h3>Data Protection</h3>
|
||||||
|
<p>The operators of these pages take the protection of your personal data very seriously. We treat your personal data confidentially and in accordance with the statutory data protection regulations and this privacy policy.</p>
|
||||||
|
|
||||||
|
<p>When you use this website, various personal data is collected. Personal data is data that can personally identify you. This privacy policy explains what data we collect and what we use it for. It also explains how and for what purpose this happens.</p>
|
||||||
|
|
||||||
|
<p>We would like to point out that data transmission over the Internet (e.g., when communicating by email) can have security gaps. Complete protection of data against access by third parties is not possible.</p>
|
||||||
|
|
||||||
|
<h3>Note on the Responsible Party</h3>
|
||||||
|
<p>The responsible party for data processing on this website is:</p>
|
||||||
|
|
||||||
|
<div class="contact-info">
|
||||||
|
<p>
|
||||||
|
AegisSight UG (limited liability)<br>
|
||||||
|
Hendrik Gebhardt<br>
|
||||||
|
Monami Homma<br>
|
||||||
|
Gladbacher Strasse 3-5<br>
|
||||||
|
40764 Langenfeld<br>
|
||||||
|
Germany<br><br>
|
||||||
|
Email: info@aegis-sight.de
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>The responsible party is the natural or legal person who alone or jointly with others decides on the purposes and means of processing personal data (e.g., names, email addresses, etc.).</p>
|
||||||
|
|
||||||
|
<h3>Revocation of Your Consent to Data Processing</h3>
|
||||||
|
<p>Many data processing operations are only possible with your express consent. You can revoke consent you have already given at any time. An informal notification by email to us is sufficient. The legality of the data processing carried out until the revocation remains unaffected by the revocation.</p>
|
||||||
|
|
||||||
|
<h3>Right to Lodge a Complaint with the Competent Supervisory Authority</h3>
|
||||||
|
<p>In the event of violations of data protection law, the person affected has the right to lodge a complaint with the competent supervisory authority. The competent supervisory authority for data protection issues is the state data protection officer of the federal state in which our company is headquartered. A list of data protection officers and their contact details can be found at the following link: <a href="https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html" target="_blank" rel="noopener">https://www.bfdi.bund.de</a>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>3. Data Collection on Our Website</h2>
|
||||||
|
|
||||||
|
<h3>Server Log Files</h3>
|
||||||
|
<p>The provider of the pages automatically collects and stores information in so-called server log files, which your browser automatically transmits to us. These are:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Browser type and browser version</li>
|
||||||
|
<li>Operating system used</li>
|
||||||
|
<li>Referrer URL</li>
|
||||||
|
<li>Host name of the accessing computer</li>
|
||||||
|
<li>Time of the server request</li>
|
||||||
|
<li>IP address</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>This data is not merged with other data sources.</p>
|
||||||
|
|
||||||
|
<p>The basis for data processing is Art. 6 para. 1 lit. f GDPR, which permits the processing of data to fulfill a contract or pre-contractual measures.</p>
|
||||||
|
|
||||||
|
<h3>SSL or TLS Encryption</h3>
|
||||||
|
<p>This site uses SSL or TLS encryption for security reasons and to protect the transmission of confidential content, such as orders or inquiries that you send to us as the site operator. You can recognize an encrypted connection by the fact that the address line of the browser changes from "http://" to "https://" and by the lock symbol in your browser line.</p>
|
||||||
|
|
||||||
|
<p>If SSL or TLS encryption is activated, the data you transmit to us cannot be read by third parties.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>4. Our Web Analytics</h2>
|
||||||
|
<p>We use our own analytics system that stores data exclusively on our servers in Germany. No data is passed on to third parties. The analytics serves to improve our website and to analyze user behavior.</p>
|
||||||
|
|
||||||
|
<p>The following data is collected:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Pages visited</li>
|
||||||
|
<li>Time of access</li>
|
||||||
|
<li>Anonymized IP address</li>
|
||||||
|
<li>Browser information</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>This data is not personal and cannot be used to identify individual users.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>5. Your Rights</h2>
|
||||||
|
<p>You have the following rights regarding your personal data:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><strong>Right to information:</strong> You can request information about your stored data.</li>
|
||||||
|
<li><strong>Right to correction:</strong> You can request the correction of incorrect data.</li>
|
||||||
|
<li><strong>Right to deletion:</strong> You can request the deletion of your data.</li>
|
||||||
|
<li><strong>Right to restriction of processing:</strong> You can request the restriction of data processing.</li>
|
||||||
|
<li><strong>Right to data portability:</strong> You can request to receive your data in a structured format.</li>
|
||||||
|
<li><strong>Right to object:</strong> You can object to the processing of your data.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>To exercise these rights, please contact us at info@aegis-sight.de.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>6. Changes to This Privacy Policy</h2>
|
||||||
|
<p>We reserve the right to adapt this privacy policy so that it always complies with current legal requirements or to implement changes to our services in the privacy policy, e.g., when introducing new services. The new privacy policy will then apply to your next visit.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>7. Automated Access and AI Agents</h2>
|
||||||
|
|
||||||
|
<h3>Prohibition of Automated Access</h3>
|
||||||
|
<p>Automated querying, scraping, or crawling of this website by bots, spiders, scrapers, AI agents (including LLM-based systems), "buy-for-me" agents, or similar automated tools is prohibited without our express written permission.</p>
|
||||||
|
|
||||||
|
<p>This includes in particular:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Automated data collection and extraction</li>
|
||||||
|
<li>Training of AI models using content from this website</li>
|
||||||
|
<li>Automated end-to-end processes without human review</li>
|
||||||
|
<li>Systematic reading of content by automated systems</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Violations of this policy may be subject to civil and criminal prosecution. The instructions contained in our robots.txt file are binding and form part of these terms of use.</p>
|
||||||
|
|
||||||
|
<h3>Exceptions</h3>
|
||||||
|
<p>Excluded from this prohibition are search engine crawlers that comply with our robots.txt guidelines, as well as services to which we have expressly granted permission.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>AegisSight</h4>
|
||||||
|
<p>Sicherheit Made in Germany</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Legal</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="impressum-en.html">Legal Notice</a></li>
|
||||||
|
<li><a href="datenschutz-en.html">Privacy Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Contact</h4>
|
||||||
|
<p>info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2025 AegisSight UG. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript for legal pages -->
|
||||||
|
<script src="js/legal-pages.js"></script>
|
||||||
|
|
||||||
|
<!-- AegisSight Analytics -->
|
||||||
|
<script async src="/insights/t.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
362
datenschutz.html
Normale Datei
362
datenschutz.html
Normale Datei
@@ -0,0 +1,362 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Datenschutz - AegisSight</title>
|
||||||
|
|
||||||
|
<!-- Prevent search engine indexing -->
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
<link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="css/mobile.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #0a0f1c;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.datenschutz-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 120px 20px 40px;
|
||||||
|
}
|
||||||
|
.datenschutz-header {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.datenschutz-header h1 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
.datenschutz-content {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.datenschutz-section {
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.datenschutz-section h2 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #0f72b5;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.datenschutz-section h3 {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.datenschutz-section p {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.datenschutz-section ul {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.datenschutz-section li {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.datenschutz-section strong {
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.important-notice {
|
||||||
|
background: rgba(15, 114, 181, 0.08);
|
||||||
|
border-left: 4px solid #0f72b5;
|
||||||
|
padding: 15px 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.important-notice p {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
.source-note {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid rgba(15, 114, 181, 0.1);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #666;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
.source-note a {
|
||||||
|
color: #0f72b5;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.source-note a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" role="navigation" aria-label="Hauptnavigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="assets/images/logos/Logo+Schrift_Rechts.svg" alt="AegisSight" class="logo-img">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="index.html#home">Startseite</a></li>
|
||||||
|
<li><a href="index.html#about">Über uns</a></li>
|
||||||
|
<li><a href="index.html#products">Produkte & Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln">DE | EN</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="datenschutz-container">
|
||||||
|
<div class="datenschutz-header">
|
||||||
|
<h1>Datenschutzerklärung</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-content">
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>1. Datenschutz auf einen Blick</h2>
|
||||||
|
|
||||||
|
<h3>Allgemeine Hinweise</h3>
|
||||||
|
<p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können. Ausführliche Informationen zum Thema Datenschutz entnehmen Sie unserer unter diesem Text aufgeführten Datenschutzerklärung.</p>
|
||||||
|
|
||||||
|
<h3>Datenerfassung auf dieser Website</h3>
|
||||||
|
<p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
|
||||||
|
<p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Abschnitt „Hinweis zur Verantwortlichen Stelle" in dieser Datenschutzerklärung entnehmen.</p>
|
||||||
|
|
||||||
|
<p><strong>Wie erfassen wir Ihre Daten?</strong></p>
|
||||||
|
<p>Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um Daten handeln, die Sie in ein Kontaktformular eingeben.</p>
|
||||||
|
<p>Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt automatisch, sobald Sie diese Website betreten.</p>
|
||||||
|
|
||||||
|
<p><strong>Wofür nutzen wir Ihre Daten?</strong></p>
|
||||||
|
<p>Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung der Website zu gewährleisten. Andere Daten können zur Analyse Ihres Nutzerverhaltens verwendet werden. Sofern über die Website Verträge geschlossen oder angebahnt werden können, werden die übermittelten Daten auch für Vertragsangebote, Bestellungen oder sonstige Auftragsanfragen verarbeitet.</p>
|
||||||
|
|
||||||
|
<p><strong>Welche Rechte haben Sie bezüglich Ihrer Daten?</strong></p>
|
||||||
|
<p>Sie haben jederzeit das Recht, unentgeltlich Auskunft über Herkunft, Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben außerdem ein Recht, die Berichtigung oder Löschung dieser Daten zu verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt haben, können Sie diese Einwilligung jederzeit für die Zukunft widerrufen. Außerdem haben Sie das Recht, unter bestimmten Umständen die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen. Des Weiteren steht Ihnen ein Beschwerderecht bei der zuständigen Aufsichtsbehörde zu.</p>
|
||||||
|
<p>Hierzu sowie zu weiteren Fragen zum Thema Datenschutz können Sie sich jederzeit an uns wenden.</p>
|
||||||
|
|
||||||
|
<h3>Analyse-Tools und Tools von Drittanbietern</h3>
|
||||||
|
<p>Beim Besuch dieser Website kann Ihr Surf-Verhalten statistisch ausgewertet werden. Das geschieht vor allem mit sogenannten Analyseprogrammen.</p>
|
||||||
|
<p>Detaillierte Informationen zu diesen Analyseprogrammen finden Sie in der folgenden Datenschutzerklärung.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>2. Hosting</h2>
|
||||||
|
<p>Wir hosten die Inhalte unserer Website bei folgendem Anbieter:</p>
|
||||||
|
|
||||||
|
<h3>Hetzner</h3>
|
||||||
|
<p>Anbieter ist die Hetzner Online GmbH, Industriestr. 25, 91710 Gunzenhausen (nachfolgend Hetzner).</p>
|
||||||
|
<p>Details entnehmen Sie der Datenschutzerklärung von Hetzner: <a href="https://www.hetzner.com/de/legal/privacy-policy/" target="_blank">https://www.hetzner.com/de/legal/privacy-policy/</a>.</p>
|
||||||
|
<p>Die Verwendung von Hetzner erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Wir haben ein berechtigtes Interesse an einer möglichst zuverlässigen Darstellung unserer Website. Sofern eine entsprechende Einwilligung abgefragt wurde, erfolgt die Verarbeitung ausschließlich auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO und § 25 Abs. 1 TDDDG, soweit die Einwilligung die Speicherung von Cookies oder den Zugriff auf Informationen im Endgerät des Nutzers (z. B. Device-Fingerprinting) im Sinne des TDDDG umfasst. Die Einwilligung ist jederzeit widerrufbar.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>3. Allgemeine Hinweise und Pflichtinformationen</h2>
|
||||||
|
|
||||||
|
<h3>Datenschutz</h3>
|
||||||
|
<p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
|
||||||
|
<p>Wenn Sie diese Website benutzen, werden verschiedene personenbezogene Daten erhoben. Personenbezogene Daten sind Daten, mit denen Sie persönlich identifiziert werden können. Die vorliegende Datenschutzerklärung erläutert, welche Daten wir erheben und wofür wir sie nutzen. Sie erläutert auch, wie und zu welchem Zweck das geschieht.</p>
|
||||||
|
<p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z. B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.</p>
|
||||||
|
|
||||||
|
<h3>Hinweis zur verantwortlichen Stelle</h3>
|
||||||
|
<p>Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:</p>
|
||||||
|
<p>
|
||||||
|
<strong>AegisSight UG (haftungsbeschränkt)</strong><br>
|
||||||
|
Gladbacher Strasse 3-5<br>
|
||||||
|
40764 Langenfeld<br><br>
|
||||||
|
E-Mail: info@aegis-sight.de
|
||||||
|
</p>
|
||||||
|
<p>Verantwortliche Stelle ist die natürliche oder juristische Person, die allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten (z. B. Namen, E-Mail-Adressen o. Ä.) entscheidet.</p>
|
||||||
|
|
||||||
|
<h3>Speicherdauer</h3>
|
||||||
|
<p>Soweit innerhalb dieser Datenschutzerklärung keine speziellere Speicherdauer genannt wurde, verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck für die Datenverarbeitung entfällt. Wenn Sie ein berechtigtes Löschersuchen geltend machen oder eine Einwilligung zur Datenverarbeitung widerrufen, werden Ihre Daten gelöscht, sofern wir keine anderen rechtlich zulässigen Gründe für die Speicherung Ihrer personenbezogenen Daten haben (z. B. steuer- oder handelsrechtliche Aufbewahrungsfristen); im letztgenannten Fall erfolgt die Löschung nach Fortfall dieser Gründe.</p>
|
||||||
|
|
||||||
|
<h3>Allgemeine Hinweise zu den Rechtsgrundlagen der Datenverarbeitung auf dieser Website</h3>
|
||||||
|
<p>Sofern Sie in die Datenverarbeitung eingewilligt haben, verarbeiten wir Ihre personenbezogenen Daten auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO bzw. Art. 9 Abs. 2 lit. a DSGVO, sofern besondere Datenkategorien nach Art. 9 Abs. 1 DSGVO verarbeitet werden. Im Falle einer ausdrücklichen Einwilligung in die Übertragung personenbezogener Daten in Drittstaaten erfolgt die Datenverarbeitung außerdem auf Grundlage von Art. 49 Abs. 1 lit. a DSGVO. Sofern Sie in die Speicherung von Cookies oder in den Zugriff auf Informationen in Ihr Endgerät (z. B. via Device-Fingerprinting) eingewilligt haben, erfolgt die Datenverarbeitung zusätzlich auf Grundlage von § 25 Abs. 1 TDDDG. Die Einwilligung ist jederzeit widerrufbar. Sind Ihre Daten zur Vertragserfüllung oder zur Durchführung vorvertraglicher Maßnahmen erforderlich, verarbeiten wir Ihre Daten auf Grundlage des Art. 6 Abs. 1 lit. b DSGVO. Des Weiteren verarbeiten wir Ihre Daten, sofern diese zur Erfüllung einer rechtlichen Verpflichtung erforderlich sind auf Grundlage von Art. 6 Abs. 1 lit. c DSGVO. Die Datenverarbeitung kann ferner auf Grundlage unseres berechtigten Interesses nach Art. 6 Abs. 1 lit. f DSGVO erfolgen. Über die jeweils im Einzelfall einschlägigen Rechtsgrundlagen wird in den folgenden Absätzen dieser Datenschutzerklärung informiert.</p>
|
||||||
|
|
||||||
|
<h3>Empfänger von personenbezogenen Daten</h3>
|
||||||
|
<p>Im Rahmen unserer Geschäftstätigkeit arbeiten wir mit verschiedenen externen Stellen zusammen. Dabei ist teilweise auch eine Übermittlung von personenbezogenen Daten an diese externen Stellen erforderlich. Wir geben personenbezogene Daten nur dann an externe Stellen weiter, wenn dies im Rahmen einer Vertragserfüllung erforderlich ist, wenn wir gesetzlich hierzu verpflichtet sind (z. B. Weitergabe von Daten an Steuerbehörden), wenn wir ein berechtigtes Interesse nach Art. 6 Abs. 1 lit. f DSGVO an der Weitergabe haben oder wenn eine sonstige Rechtsgrundlage die Datenweitergabe erlaubt. Beim Einsatz von Auftragsverarbeitern geben wir personenbezogene Daten unserer Kunden nur auf Grundlage eines gültigen Vertrags über Auftragsverarbeitung weiter. Im Falle einer gemeinsamen Verarbeitung wird ein Vertrag über gemeinsame Verarbeitung geschlossen.</p>
|
||||||
|
|
||||||
|
<h3>Widerruf Ihrer Einwilligung zur Datenverarbeitung</h3>
|
||||||
|
<p>Viele Datenverarbeitungsvorgänge sind nur mit Ihrer ausdrücklichen Einwilligung möglich. Sie können eine bereits erteilte Einwilligung jederzeit widerrufen. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf unberührt.</p>
|
||||||
|
|
||||||
|
<h3>Widerspruchsrecht gegen die Datenerhebung in besonderen Fällen sowie gegen Direktwerbung (Art. 21 DSGVO)</h3>
|
||||||
|
<div class="important-notice">
|
||||||
|
<p><strong>WENN DIE DATENVERARBEITUNG AUF GRUNDLAGE VON ART. 6 ABS. 1 LIT. E ODER F DSGVO ERFOLGT, HABEN SIE JEDERZEIT DAS RECHT, AUS GRÜNDEN, DIE SICH AUS IHRER BESONDEREN SITUATION ERGEBEN, GEGEN DIE VERARBEITUNG IHRER PERSONENBEZOGENEN DATEN WIDERSPRUCH EINZULEGEN; DIES GILT AUCH FÜR EIN AUF DIESE BESTIMMUNGEN GESTÜTZTES PROFILING. DIE JEWEILIGE RECHTSGRUNDLAGE, AUF DENEN EINE VERARBEITUNG BERUHT, ENTNEHMEN SIE DIESER DATENSCHUTZERKLÄRUNG. WENN SIE WIDERSPRUCH EINLEGEN, WERDEN WIR IHRE BETROFFENEN PERSONENBEZOGENEN DATEN NICHT MEHR VERARBEITEN, ES SEI DENN, WIR KÖNNEN ZWINGENDE SCHUTZWÜRDIGE GRÜNDE FÜR DIE VERARBEITUNG NACHWEISEN, DIE IHRE INTERESSEN, RECHTE UND FREIHEITEN ÜBERWIEGEN ODER DIE VERARBEITUNG DIENT DER GELTENDMACHUNG, AUSÜBUNG ODER VERTEIDIGUNG VON RECHTSANSPRÜCHEN (WIDERSPRUCH NACH ART. 21 ABS. 1 DSGVO).</strong></p>
|
||||||
|
<p><strong>WERDEN IHRE PERSONENBEZOGENEN DATEN VERARBEITET, UM DIREKTWERBUNG ZU BETREIBEN, SO HABEN SIE DAS RECHT, JEDERZEIT WIDERSPRUCH GEGEN DIE VERARBEITUNG SIE BETREFFENDER PERSONENBEZOGENER DATEN ZUM ZWECKE DERARTIGER WERBUNG EINZULEGEN; DIES GILT AUCH FÜR DAS PROFILING, SOWEIT ES MIT SOLCHER DIREKTWERBUNG IN VERBINDUNG STEHT. WENN SIE WIDERSPRECHEN, WERDEN IHRE PERSONENBEZOGENEN DATEN ANSCHLIESSEND NICHT MEHR ZUM ZWECKE DER DIREKTWERBUNG VERWENDET (WIDERSPRUCH NACH ART. 21 ABS. 2 DSGVO).</strong></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Beschwerderecht bei der zuständigen Aufsichtsbehörde</h3>
|
||||||
|
<p>Im Falle von Verstößen gegen die DSGVO steht den Betroffenen ein Beschwerderecht bei einer Aufsichtsbehörde, insbesondere in dem Mitgliedstaat ihres gewöhnlichen Aufenthalts, ihres Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes zu. Das Beschwerderecht besteht unbeschadet anderweitiger verwaltungsrechtlicher oder gerichtlicher Rechtsbehelfe.</p>
|
||||||
|
|
||||||
|
<h3>Recht auf Datenübertragbarkeit</h3>
|
||||||
|
<p>Sie haben das Recht, Daten, die wir auf Grundlage Ihrer Einwilligung oder in Erfüllung eines Vertrags automatisiert verarbeiten, an sich oder an einen Dritten in einem gängigen, maschinenlesbaren Format aushändigen zu lassen. Sofern Sie die direkte Übertragung der Daten an einen anderen Verantwortlichen verlangen, erfolgt dies nur, soweit es technisch machbar ist.</p>
|
||||||
|
|
||||||
|
<h3>Auskunft, Berichtigung und Löschung</h3>
|
||||||
|
<p>Sie haben im Rahmen der geltenden gesetzlichen Bestimmungen jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger und den Zweck der Datenverarbeitung und ggf. ein Recht auf Berichtigung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich jederzeit an uns wenden.</p>
|
||||||
|
|
||||||
|
<h3>Recht auf Einschränkung der Verarbeitung</h3>
|
||||||
|
<p>Sie haben das Recht, die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen. Hierzu können Sie sich jederzeit an uns wenden. Das Recht auf Einschränkung der Verarbeitung besteht in folgenden Fällen:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Wenn Sie die Richtigkeit Ihrer bei uns gespeicherten personenbezogenen Daten bestreiten, benötigen wir in der Regel Zeit, um dies zu überprüfen. Für die Dauer der Prüfung haben Sie das Recht, die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.</li>
|
||||||
|
<li>Wenn die Verarbeitung Ihrer personenbezogenen Daten unrechtmäßig geschah/geschieht, können Sie statt der Löschung die Einschränkung der Datenverarbeitung verlangen.</li>
|
||||||
|
<li>Wenn wir Ihre personenbezogenen Daten nicht mehr benötigen, Sie sie jedoch zur Ausübung, Verteidigung oder Geltendmachung von Rechtsansprüchen benötigen, haben Sie das Recht, statt der Löschung die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.</li>
|
||||||
|
<li>Wenn Sie einen Widerspruch nach Art. 21 Abs. 1 DSGVO eingelegt haben, muss eine Abwägung zwischen Ihren und unseren Interessen vorgenommen werden. Solange noch nicht feststeht, wessen Interessen überwiegen, haben Sie das Recht, die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Wenn Sie die Verarbeitung Ihrer personenbezogenen Daten eingeschränkt haben, dürfen diese Daten – von ihrer Speicherung abgesehen – nur mit Ihrer Einwilligung oder zur Geltendmachung, Ausübung oder Verteidigung von Rechtsansprüchen oder zum Schutz der Rechte einer anderen natürlichen oder juristischen Person oder aus Gründen eines wichtigen öffentlichen Interesses der Europäischen Union oder eines Mitgliedstaats verarbeitet werden.</p>
|
||||||
|
|
||||||
|
<h3>SSL- bzw. TLS-Verschlüsselung</h3>
|
||||||
|
<p>Diese Seite nutzt aus Sicherheitsgründen und zum Schutz der Übertragung vertraulicher Inhalte, wie zum Beispiel Bestellungen oder Anfragen, die Sie an uns als Seitenbetreiber senden, eine SSL- bzw. TLS-Verschlüsselung. Eine verschlüsselte Verbindung erkennen Sie daran, dass die Adresszeile des Browsers von „http://" auf „https://" wechselt und an dem Schloss-Symbol in Ihrer Browserzeile.</p>
|
||||||
|
<p>Wenn die SSL- bzw. TLS-Verschlüsselung aktiviert ist, können die Daten, die Sie an uns übermitteln, nicht von Dritten mitgelesen werden.</p>
|
||||||
|
|
||||||
|
<h3>Widerspruch gegen Werbe-E-Mails</h3>
|
||||||
|
<p>Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-E-Mails, vor.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>4. Datenerfassung auf dieser Website</h2>
|
||||||
|
|
||||||
|
<h3>Cookies</h3>
|
||||||
|
<p>Unsere Internetseiten verwenden so genannte „Cookies". Cookies sind kleine Datenpakete und richten auf Ihrem Endgerät keinen Schaden an. Sie werden entweder vorübergehend für die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente Cookies) auf Ihrem Endgerät gespeichert. Session-Cookies werden nach Ende Ihres Besuchs automatisch gelöscht. Permanente Cookies bleiben auf Ihrem Endgerät gespeichert, bis Sie diese selbst löschen oder eine automatische Löschung durch Ihren Webbrowser erfolgt.</p>
|
||||||
|
<p>Cookies können von uns (First-Party-Cookies) oder von Drittunternehmen stammen (sog. Third-Party-Cookies). Third-Party-Cookies ermöglichen die Einbindung bestimmter Dienstleistungen von Drittunternehmen innerhalb von Webseiten (z. B. Cookies zur Abwicklung von Zahlungsdienstleistungen).</p>
|
||||||
|
<p>Cookies haben verschiedene Funktionen. Zahlreiche Cookies sind technisch notwendig, da bestimmte Webseitenfunktionen ohne diese nicht funktionieren würden (z. B. die Warenkorbfunktion oder die Anzeige von Videos). Andere Cookies können zur Auswertung des Nutzerverhaltens oder zu Werbezwecken verwendet werden.</p>
|
||||||
|
<p>Cookies, die zur Durchführung des elektronischen Kommunikationsvorgangs, zur Bereitstellung bestimmter, von Ihnen erwünschter Funktionen (z. B. für die Warenkorbfunktion) oder zur Optimierung der Website (z. B. Cookies zur Messung des Webpublikums) erforderlich sind (notwendige Cookies), werden auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO gespeichert, sofern keine andere Rechtsgrundlage angegeben wird. Der Websitebetreiber hat ein berechtigtes Interesse an der Speicherung von notwendigen Cookies zur technisch fehlerfreien und optimierten Bereitstellung seiner Dienste. Sofern eine Einwilligung zur Speicherung von Cookies und vergleichbaren Wiedererkennungstechnologien abgefragt wurde, erfolgt die Verarbeitung ausschließlich auf Grundlage dieser Einwilligung (Art. 6 Abs. 1 lit. a DSGVO und § 25 Abs. 1 TDDDG); die Einwilligung ist jederzeit widerrufbar.</p>
|
||||||
|
<p>Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben, die Annahme von Cookies für bestimmte Fälle oder generell ausschließen sowie das automatische Löschen der Cookies beim Schließen des Browsers aktivieren. Bei der Deaktivierung von Cookies kann die Funktionalität dieser Website eingeschränkt sein.</p>
|
||||||
|
<p>Welche Cookies und Dienste auf dieser Website eingesetzt werden, können Sie dieser Datenschutzerklärung entnehmen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>5. Kontaktformular und Anfragen</h2>
|
||||||
|
|
||||||
|
<h3>Datenerhebung über das Kontaktformular</h3>
|
||||||
|
<p>Wenn Sie uns über das auf unserer Website bereitgestellte Kontaktformular eine Anfrage zukommen lassen, werden Ihre Angaben aus dem Formular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Erhoben werden: Name, Organisation (optional), E-Mail-Adresse und Ihre Nachricht. Eine Weitergabe an Dritte erfolgt nicht.</p>
|
||||||
|
|
||||||
|
<h3>Rechtsgrundlage</h3>
|
||||||
|
<p>Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erfüllung eines Vertrags zusammenhängt oder zur Durchführung vorvertraglicher Maßnahmen erforderlich ist. In allen übrigen Fällen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO) und/oder auf Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO), sofern diese abgefragt wurde; die Einwilligung ist jederzeit widerrufbar.</p>
|
||||||
|
|
||||||
|
<h3>Speicherdauer</h3>
|
||||||
|
<p>Die von Ihnen im Kontaktformular eingegebenen Daten verbleiben bei uns, bis Sie uns zur Löschung auffordern, Ihre Einwilligung zur Speicherung widerrufen oder der Zweck für die Datenspeicherung entfällt (z. B. nach abgeschlossener Bearbeitung Ihrer Anfrage). Zwingende gesetzliche Bestimmungen – insbesondere Aufbewahrungsfristen – bleiben unberührt.</p>
|
||||||
|
|
||||||
|
<h3>Übertragung</h3>
|
||||||
|
<p>Ihre Anfrage wird verschlüsselt (TLS) an unseren Server übertragen und dort als E-Mail an info@aegis-sight.de weitergeleitet. Die E-Mail-Übertragung erfolgt verschlüsselt über Mailserver in Deutschland (IONOS).</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>6. Newsletter</h2>
|
||||||
|
|
||||||
|
<h3>Newsletterdaten</h3>
|
||||||
|
<p>Wenn Sie den auf der Website angebotenen Newsletter beziehen möchten, benötigen wir von Ihnen eine E-Mail-Adresse sowie Informationen, welche uns die Überprüfung gestatten, dass Sie der Inhaber der angegebenen E-Mail-Adresse sind und mit dem Empfang des Newsletters einverstanden sind. Weitere Daten werden nicht bzw. nur auf freiwilliger Basis erhoben. Diese Daten verwenden wir ausschließlich für den Versand der angeforderten Informationen und geben diese nicht an Dritte weiter.</p>
|
||||||
|
<p>Die Verarbeitung der in das Newsletteranmeldeformular eingegebenen Daten erfolgt ausschließlich auf Grundlage Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO). Die erteilte Einwilligung zur Speicherung der Daten, der E-Mail-Adresse sowie deren Nutzung zum Versand des Newsletters können Sie jederzeit widerrufen, etwa über den „Austragen"-Link im Newsletter. Die Rechtmäßigkeit der bereits erfolgten Datenverarbeitungsvorgänge bleibt vom Widerruf unberührt.</p>
|
||||||
|
<p>Die von Ihnen zum Zwecke des Newsletter-Bezugs bei uns hinterlegten Daten werden von uns bis zu Ihrer Austragung aus dem Newsletter bei uns bzw. dem Newsletterdiensteanbieter gespeichert und nach der Abbestellung des Newsletters oder nach Zweckfortfall aus der Newsletterverteilerliste gelöscht. Wir behalten uns vor, E-Mail-Adressen aus unserem Newsletterverteiler nach eigenem Ermessen im Rahmen unseres berechtigten Interesses nach Art. 6 Abs. 1 lit. f DSGVO zu löschen oder zu sperren.</p>
|
||||||
|
<p>Daten, die zu anderen Zwecken bei uns gespeichert wurden, bleiben hiervon unberührt.</p>
|
||||||
|
<p>Nach Ihrer Austragung aus der Newsletterverteilerliste wird Ihre E-Mail-Adresse bei uns bzw. dem Newsletterdiensteanbieter ggf. in einer Blacklist gespeichert, sofern dies zur Verhinderung künftiger Mailings erforderlich ist. Die Daten aus der Blacklist werden nur für diesen Zweck verwendet und nicht mit anderen Daten zusammengeführt. Dies dient sowohl Ihrem Interesse als auch unserem Interesse an der Einhaltung der gesetzlichen Vorgaben beim Versand von Newslettern (berechtigtes Interesse im Sinne des Art. 6 Abs. 1 lit. f DSGVO). Die Speicherung in der Blacklist ist zeitlich nicht befristet. <strong>Sie können der Speicherung widersprechen, sofern Ihre Interessen unser berechtigtes Interesse überwiegen.</strong></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>7. Plugins und Tools</h2>
|
||||||
|
|
||||||
|
<h3>AegisSight Analytics (Umami)</h3>
|
||||||
|
<p>Wir nutzen auf dieser Website AegisSight Analytics, eine selbstgehostete Instanz der Open-Source-Analyse-Software Umami. Mit Umami erfassen wir anonymisierte Informationen zur Nutzung unserer Website (z. B. besuchte Seiten, Browser, ungefähre geografische Region auf Länderebene) zur Verbesserung unserer Inhalte.</p>
|
||||||
|
<p><strong>Selbstgehostet in Deutschland:</strong> Sämtliche Daten verbleiben auf unserem Server in Nürnberg, Deutschland (Hosting: Hetzner). Eine Übertragung an Dritte findet nicht statt.</p>
|
||||||
|
<p><strong>Cookielos und IP-anonymisiert:</strong> Umami setzt keine Cookies und speichert keine personenbezogenen Daten. IP-Adressen werden vor der Speicherung anonymisiert (Hashing). Es findet kein Cross-Site-Tracking statt.</p>
|
||||||
|
<p><strong>Rechtsgrundlage und Einwilligung:</strong> Die Reichweitenmessung wird ausschließlich nach Ihrer Einwilligung über unser Cookie-Consent-Banner aktiviert (Art. 6 Abs. 1 lit. a DSGVO i. V. m. § 25 Abs. 1 TDDDG). Sie können Ihre Einwilligung jederzeit über den Footer-Link „Cookie-Einstellungen" widerrufen. Wir respektieren das „Global Privacy Control" (GPC)-Signal Ihres Browsers und deaktivieren in diesem Fall die Reichweitenmessung automatisch.</p>
|
||||||
|
|
||||||
|
<h3>Google Fonts (lokales Hosting)</h3>
|
||||||
|
<p>Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten so genannte Google Fonts, die von Google bereitgestellt werden. Die Google Fonts sind lokal installiert. Eine Verbindung zu Servern von Google findet dabei nicht statt.</p>
|
||||||
|
<p>Weitere Informationen zu Google Fonts finden Sie unter <a href="https://developers.google.com/fonts/faq" target="_blank">https://developers.google.com/fonts/faq</a> und in der Datenschutzerklärung von Google: <a href="https://policies.google.com/privacy?hl=de" target="_blank">https://policies.google.com/privacy?hl=de</a>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="datenschutz-section">
|
||||||
|
<h2>8. Automatisierte Zugriffe und KI-Agenten</h2>
|
||||||
|
|
||||||
|
<h3>Verbot automatisierter Zugriffe</h3>
|
||||||
|
<p>Die automatisierte Abfrage, das Scraping oder Crawling dieser Website durch Bots, Spider, Scraper, KI-Agenten (einschließlich LLM-basierter Systeme), „Buy-for-me"-Agenten oder ähnliche automatisierte Tools ist ohne unsere ausdrückliche schriftliche Genehmigung untersagt.</p>
|
||||||
|
|
||||||
|
<p>Dies umfasst insbesondere:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Automatisierte Datenerfassung und -extraktion</li>
|
||||||
|
<li>Training von KI-Modellen mit Inhalten dieser Website</li>
|
||||||
|
<li>Automatisierte End-to-End-Prozesse ohne menschliche Überprüfung</li>
|
||||||
|
<li>Systematisches Auslesen von Inhalten durch automatisierte Systeme</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Verstöße gegen diese Regelung können zivil- und strafrechtlich verfolgt werden. Die in unserer robots.txt-Datei enthaltenen Anweisungen sind verbindlich und Teil dieser Nutzungsbedingungen.</p>
|
||||||
|
|
||||||
|
<h3>Ausnahmen</h3>
|
||||||
|
<p>Ausgenommen von diesem Verbot sind Suchmaschinen-Crawler, die sich an die Vorgaben unserer robots.txt halten, sowie Dienste, denen wir ausdrücklich eine Genehmigung erteilt haben.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="source-note">
|
||||||
|
<p>Quelle: <a href="https://www.e-recht24.de" target="_blank">https://www.e-recht24.de</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>AegisSight UG (haftungsbeschränkt)</h4>
|
||||||
|
<p>Gladbacher Strasse 3-5</p>
|
||||||
|
<p>40764 Langenfeld</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Navigation</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html#home">Startseite</a></li>
|
||||||
|
<li><a href="index.html#about">Über uns</a></li>
|
||||||
|
<li><a href="index.html#products">Produkte</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Rechtliches</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="impressum.html">Impressum</a></li>
|
||||||
|
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Kontakt</h4>
|
||||||
|
<p>info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© <span class="current-year"></span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript for legal pages -->
|
||||||
|
<script src="js/legal-pages.js"></script>
|
||||||
|
|
||||||
|
<!-- AegisSight Analytics -->
|
||||||
|
<script async src="/insights/t.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
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 |
BIN
docs/Sitemap_IntelSight_UG.docx
Normale Datei
BIN
docs/Sitemap_IntelSight_UG.docx
Normale Datei
Binäre Datei nicht angezeigt.
BIN
docs/datenschutzerklaerung_intelsight_de_de.pdf
Normale Datei
BIN
docs/datenschutzerklaerung_intelsight_de_de.pdf
Normale Datei
Binäre Datei nicht angezeigt.
BIN
docs/impressum_intelsight_de_de.pdf
Normale Datei
BIN
docs/impressum_intelsight_de_de.pdf
Normale Datei
Binäre Datei nicht angezeigt.
452
downloads/af-updates/session_manager.py
Normale Datei
452
downloads/af-updates/session_manager.py
Normale Datei
@@ -0,0 +1,452 @@
|
|||||||
|
"""
|
||||||
|
Session Manager für die Lizenz-Session-Verwaltung mit Heartbeat.
|
||||||
|
"""
|
||||||
|
|
||||||
|
import threading
|
||||||
|
import time
|
||||||
|
import logging
|
||||||
|
import json
|
||||||
|
import os
|
||||||
|
import requests
|
||||||
|
from datetime import datetime
|
||||||
|
from typing import Optional, Dict, Any
|
||||||
|
from .api_client import LicenseAPIClient
|
||||||
|
from .hardware_fingerprint import HardwareFingerprint
|
||||||
|
|
||||||
|
logger = logging.getLogger("session_manager")
|
||||||
|
logger.setLevel(logging.DEBUG)
|
||||||
|
# Füge Console Handler hinzu falls noch nicht vorhanden
|
||||||
|
if not logger.handlers:
|
||||||
|
handler = logging.StreamHandler()
|
||||||
|
handler.setFormatter(logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s'))
|
||||||
|
logger.addHandler(handler)
|
||||||
|
|
||||||
|
|
||||||
|
class SessionManager:
|
||||||
|
"""Verwaltet die Lizenz-Session und Heartbeat."""
|
||||||
|
|
||||||
|
SESSION_FILE = os.path.join("config", ".session_data")
|
||||||
|
HEARTBEAT_INTERVAL = 60 # Sekunden
|
||||||
|
|
||||||
|
def __init__(self, api_client: Optional[LicenseAPIClient] = None):
|
||||||
|
"""
|
||||||
|
Initialisiert den Session Manager.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
api_client: Optional vorkonfigurierter API Client
|
||||||
|
"""
|
||||||
|
self.api_client = api_client or LicenseAPIClient()
|
||||||
|
self.hardware_fingerprint = HardwareFingerprint()
|
||||||
|
|
||||||
|
self.session_token: Optional[str] = None
|
||||||
|
self.license_key: Optional[str] = None
|
||||||
|
self.activation_id: Optional[int] = None
|
||||||
|
self.heartbeat_thread: Optional[threading.Thread] = None
|
||||||
|
self.stop_heartbeat = threading.Event()
|
||||||
|
self.is_active = False
|
||||||
|
|
||||||
|
# Lade Session-IP-Konfiguration
|
||||||
|
self._load_ip_config()
|
||||||
|
|
||||||
|
# Session-Daten laden falls vorhanden
|
||||||
|
self._load_session_data()
|
||||||
|
|
||||||
|
def _save_session_data(self) -> None:
|
||||||
|
"""Speichert die aktuelle Session-Daten."""
|
||||||
|
try:
|
||||||
|
os.makedirs("config", exist_ok=True)
|
||||||
|
session_data = {
|
||||||
|
"session_token": self.session_token,
|
||||||
|
"license_key": self.license_key,
|
||||||
|
"activation_id": self.activation_id,
|
||||||
|
"timestamp": datetime.now().isoformat()
|
||||||
|
}
|
||||||
|
with open(self.SESSION_FILE, 'w') as f:
|
||||||
|
json.dump(session_data, f)
|
||||||
|
logger.debug("Session-Daten gespeichert")
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"Fehler beim Speichern der Session-Daten: {e}")
|
||||||
|
|
||||||
|
def _load_session_data(self) -> None:
|
||||||
|
"""Lädt gespeicherte Session-Daten."""
|
||||||
|
if os.path.exists(self.SESSION_FILE):
|
||||||
|
try:
|
||||||
|
with open(self.SESSION_FILE, 'r') as f:
|
||||||
|
data = json.load(f)
|
||||||
|
self.session_token = data.get("session_token")
|
||||||
|
self.license_key = data.get("license_key")
|
||||||
|
self.activation_id = data.get("activation_id")
|
||||||
|
logger.info("Session-Daten geladen")
|
||||||
|
except Exception as e:
|
||||||
|
logger.warning(f"Fehler beim Laden der Session-Daten: {e}")
|
||||||
|
|
||||||
|
def _clear_session_data(self) -> None:
|
||||||
|
"""Löscht die gespeicherten Session-Daten."""
|
||||||
|
try:
|
||||||
|
if os.path.exists(self.SESSION_FILE):
|
||||||
|
os.remove(self.SESSION_FILE)
|
||||||
|
logger.debug("Session-Daten gelöscht")
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"Fehler beim Löschen der Session-Daten: {e}")
|
||||||
|
|
||||||
|
def start_session(self, license_key: str, activation_id: Optional[int] = None) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
Startet eine neue Session für die Lizenz.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
license_key: Der Lizenzschlüssel
|
||||||
|
activation_id: Optional die Aktivierungs-ID
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
Dictionary mit Session-Informationen oder Fehler
|
||||||
|
"""
|
||||||
|
if self.is_active:
|
||||||
|
logger.warning("Session läuft bereits")
|
||||||
|
return {
|
||||||
|
"success": False,
|
||||||
|
"error": "Session already active"
|
||||||
|
}
|
||||||
|
|
||||||
|
# Hardware-Info sammeln
|
||||||
|
hw_hash = self.hardware_fingerprint.get_or_create_fingerprint()
|
||||||
|
machine_name = self.hardware_fingerprint.get_machine_name()
|
||||||
|
|
||||||
|
# IP-Adresse ermitteln
|
||||||
|
client_ip = self._get_session_ip()
|
||||||
|
|
||||||
|
logger.info(f"Starte Session für Lizenz: {license_key[:4]}...")
|
||||||
|
logger.debug(f"Session-Parameter: machine_name={machine_name}, hw_hash={hw_hash[:8]}..., ip={client_ip}")
|
||||||
|
|
||||||
|
# Session-Start API Call mit IP-Adresse
|
||||||
|
result = self.api_client.start_session(
|
||||||
|
license_key=license_key,
|
||||||
|
machine_id=machine_name,
|
||||||
|
hardware_hash=hw_hash,
|
||||||
|
version="1.0.0", # TODO: Version aus config lesen
|
||||||
|
ip_address=client_ip # NEU: IP-Adresse hinzugefügt
|
||||||
|
)
|
||||||
|
|
||||||
|
logger.debug(f"Session-Start Response: {result}")
|
||||||
|
|
||||||
|
if result.get("success"):
|
||||||
|
data = result.get("data", {})
|
||||||
|
|
||||||
|
# Prüfe ob die Session wirklich erfolgreich war
|
||||||
|
if data.get("success") is False:
|
||||||
|
# Session wurde abgelehnt
|
||||||
|
error_msg = data.get("message", "Session start failed")
|
||||||
|
logger.error(f"Session abgelehnt: {error_msg}")
|
||||||
|
return {
|
||||||
|
"success": False,
|
||||||
|
"error": error_msg,
|
||||||
|
"code": "SESSION_REJECTED"
|
||||||
|
}
|
||||||
|
|
||||||
|
self.session_token = data.get("session_token")
|
||||||
|
self.license_key = license_key
|
||||||
|
self.activation_id = activation_id or data.get("activation_id")
|
||||||
|
self.is_active = True if self.session_token else False
|
||||||
|
|
||||||
|
# Session-Daten speichern
|
||||||
|
self._save_session_data()
|
||||||
|
|
||||||
|
# Heartbeat starten
|
||||||
|
self._start_heartbeat()
|
||||||
|
|
||||||
|
logger.info(f"Session erfolgreich gestartet: {self.session_token}")
|
||||||
|
|
||||||
|
# Update-Info prüfen
|
||||||
|
if data.get("update_available"):
|
||||||
|
logger.info(f"Update verfügbar: {data.get('latest_version')}")
|
||||||
|
|
||||||
|
return {
|
||||||
|
"success": True,
|
||||||
|
"session_token": self.session_token,
|
||||||
|
"update_info": {
|
||||||
|
"available": data.get("update_available", False),
|
||||||
|
"version": data.get("latest_version"),
|
||||||
|
"download_url": data.get("download_url")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else:
|
||||||
|
error = result.get("error", "Unknown error")
|
||||||
|
logger.error(f"Session-Start fehlgeschlagen: {error}")
|
||||||
|
|
||||||
|
# Bei Konflikt (409) bedeutet es, dass bereits eine Session läuft
|
||||||
|
if result.get("status") == 409:
|
||||||
|
return {
|
||||||
|
"success": False,
|
||||||
|
"error": "Another session is already active for this license",
|
||||||
|
"code": "SESSION_CONFLICT"
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
"success": False,
|
||||||
|
"error": error,
|
||||||
|
"code": result.get("code", "SESSION_START_FAILED")
|
||||||
|
}
|
||||||
|
|
||||||
|
def _start_heartbeat(self) -> None:
|
||||||
|
"""Startet den Heartbeat-Thread."""
|
||||||
|
if self.heartbeat_thread and self.heartbeat_thread.is_alive():
|
||||||
|
logger.warning("Heartbeat läuft bereits")
|
||||||
|
return
|
||||||
|
|
||||||
|
self.stop_heartbeat.clear()
|
||||||
|
self.heartbeat_thread = threading.Thread(
|
||||||
|
target=self._heartbeat_worker,
|
||||||
|
daemon=True,
|
||||||
|
name="LicenseHeartbeat"
|
||||||
|
)
|
||||||
|
self.heartbeat_thread.start()
|
||||||
|
logger.info("Heartbeat-Thread gestartet")
|
||||||
|
|
||||||
|
def _heartbeat_worker(self) -> None:
|
||||||
|
"""Worker-Funktion für den Heartbeat-Thread."""
|
||||||
|
logger.info(f"Heartbeat-Worker gestartet (Interval: {self.HEARTBEAT_INTERVAL}s)")
|
||||||
|
|
||||||
|
while not self.stop_heartbeat.is_set():
|
||||||
|
try:
|
||||||
|
# Warte das Interval oder bis Stop-Signal
|
||||||
|
if self.stop_heartbeat.wait(self.HEARTBEAT_INTERVAL):
|
||||||
|
break
|
||||||
|
|
||||||
|
# Sende Heartbeat
|
||||||
|
if self.session_token and self.license_key:
|
||||||
|
logger.debug("Sende Heartbeat...")
|
||||||
|
result = self.api_client.session_heartbeat(
|
||||||
|
session_token=self.session_token,
|
||||||
|
license_key=self.license_key
|
||||||
|
)
|
||||||
|
|
||||||
|
# Pruefe sowohl HTTP-Status als auch Body-Success
|
||||||
|
http_ok = result.get("success")
|
||||||
|
body_data = result.get("data", {})
|
||||||
|
body_ok = body_data.get("success", True) if isinstance(body_data, dict) else True
|
||||||
|
|
||||||
|
if http_ok and body_ok:
|
||||||
|
logger.debug("Heartbeat erfolgreich")
|
||||||
|
else:
|
||||||
|
body_msg = body_data.get("message", "") if isinstance(body_data, dict) else ""
|
||||||
|
logger.error(f"Heartbeat fehlgeschlagen: {body_msg or result.get('error')}")
|
||||||
|
|
||||||
|
# Bei HTTP-Fehlern oder Body-Fehler Session beenden
|
||||||
|
if result.get("status") in [401, 404] or (http_ok and not body_ok):
|
||||||
|
logger.error("Session ungueltig, beende...")
|
||||||
|
self.end_session()
|
||||||
|
break
|
||||||
|
else:
|
||||||
|
logger.warning("Keine Session-Daten für Heartbeat")
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"Fehler im Heartbeat-Worker: {e}")
|
||||||
|
|
||||||
|
logger.info("Heartbeat-Worker beendet")
|
||||||
|
|
||||||
|
def end_session(self) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
Beendet die aktuelle Session.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
Dictionary mit Informationen über die beendete Session
|
||||||
|
"""
|
||||||
|
if not self.is_active:
|
||||||
|
logger.warning("Keine aktive Session zum Beenden")
|
||||||
|
return {
|
||||||
|
"success": False,
|
||||||
|
"error": "No active session"
|
||||||
|
}
|
||||||
|
|
||||||
|
logger.info("Beende Session...")
|
||||||
|
|
||||||
|
# Heartbeat stoppen
|
||||||
|
self.stop_heartbeat.set()
|
||||||
|
if self.heartbeat_thread:
|
||||||
|
self.heartbeat_thread.join(timeout=5)
|
||||||
|
|
||||||
|
# Session beenden API Call
|
||||||
|
result = {"success": True}
|
||||||
|
if self.session_token:
|
||||||
|
result = self.api_client.end_session(self.session_token)
|
||||||
|
|
||||||
|
if result.get("success"):
|
||||||
|
logger.info("Session erfolgreich beendet")
|
||||||
|
else:
|
||||||
|
logger.error(f"Fehler beim Beenden der Session: {result.get('error')}")
|
||||||
|
|
||||||
|
# Session-Daten löschen
|
||||||
|
self.session_token = None
|
||||||
|
self.license_key = None
|
||||||
|
self.activation_id = None
|
||||||
|
self.is_active = False
|
||||||
|
self._clear_session_data()
|
||||||
|
|
||||||
|
return result
|
||||||
|
|
||||||
|
def resume_session(self) -> bool:
|
||||||
|
"""
|
||||||
|
Versucht eine gespeicherte Session fortzusetzen.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
True wenn erfolgreich, False sonst
|
||||||
|
"""
|
||||||
|
if self.is_active:
|
||||||
|
logger.info("Session läuft bereits")
|
||||||
|
return True
|
||||||
|
|
||||||
|
if not self.session_token or not self.license_key:
|
||||||
|
logger.info("Keine gespeicherten Session-Daten vorhanden")
|
||||||
|
return False
|
||||||
|
|
||||||
|
logger.info("Versuche Session fortzusetzen...")
|
||||||
|
|
||||||
|
# Teste mit Heartbeat ob Session noch gültig ist
|
||||||
|
result = self.api_client.session_heartbeat(
|
||||||
|
session_token=self.session_token,
|
||||||
|
license_key=self.license_key
|
||||||
|
)
|
||||||
|
|
||||||
|
# Pruefe sowohl HTTP-Status als auch Body-Success
|
||||||
|
http_ok = result.get("success")
|
||||||
|
body_data = result.get("data", {})
|
||||||
|
body_ok = body_data.get("success", True) if isinstance(body_data, dict) else True
|
||||||
|
|
||||||
|
if http_ok and body_ok:
|
||||||
|
logger.info("Session erfolgreich fortgesetzt")
|
||||||
|
self.is_active = True
|
||||||
|
self._start_heartbeat()
|
||||||
|
return True
|
||||||
|
else:
|
||||||
|
body_msg = body_data.get("message", "") if isinstance(body_data, dict) else ""
|
||||||
|
logger.warning(f"Gespeicherte Session ungueltig: {body_msg or result.get('error', 'unbekannt')}")
|
||||||
|
self._clear_session_data()
|
||||||
|
return False
|
||||||
|
|
||||||
|
def is_session_active(self) -> bool:
|
||||||
|
"""
|
||||||
|
Prüft ob eine Session aktiv ist.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
True wenn aktiv, False sonst
|
||||||
|
"""
|
||||||
|
return self.is_active
|
||||||
|
|
||||||
|
def get_session_info(self) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
Gibt Informationen über die aktuelle Session zurück.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
Dictionary mit Session-Informationen
|
||||||
|
"""
|
||||||
|
return {
|
||||||
|
"active": self.is_active,
|
||||||
|
"session_token": self.session_token[:8] + "..." if self.session_token else None,
|
||||||
|
"license_key": self.license_key[:4] + "..." if self.license_key else None,
|
||||||
|
"activation_id": self.activation_id,
|
||||||
|
"heartbeat_interval": self.HEARTBEAT_INTERVAL
|
||||||
|
}
|
||||||
|
|
||||||
|
def set_heartbeat_interval(self, seconds: int) -> None:
|
||||||
|
"""
|
||||||
|
Setzt das Heartbeat-Interval.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
seconds: Interval in Sekunden (min 30, max 300)
|
||||||
|
"""
|
||||||
|
if 30 <= seconds <= 300:
|
||||||
|
self.HEARTBEAT_INTERVAL = seconds
|
||||||
|
logger.info(f"Heartbeat-Interval auf {seconds}s gesetzt")
|
||||||
|
|
||||||
|
# Restart Heartbeat wenn aktiv
|
||||||
|
if self.is_active:
|
||||||
|
self.stop_heartbeat.set()
|
||||||
|
if self.heartbeat_thread:
|
||||||
|
self.heartbeat_thread.join(timeout=5)
|
||||||
|
self._start_heartbeat()
|
||||||
|
else:
|
||||||
|
logger.warning(f"Ungültiges Heartbeat-Interval: {seconds}")
|
||||||
|
|
||||||
|
def _load_ip_config(self) -> None:
|
||||||
|
"""Lädt die IP-Konfiguration aus license_config.json."""
|
||||||
|
config_path = os.path.join("config", "license_config.json")
|
||||||
|
self.session_ip_mode = "auto" # Default
|
||||||
|
self.ip_fallback = "0.0.0.0"
|
||||||
|
|
||||||
|
try:
|
||||||
|
if os.path.exists(config_path):
|
||||||
|
with open(config_path, 'r') as f:
|
||||||
|
config = json.load(f)
|
||||||
|
self.session_ip_mode = config.get("session_ip_mode", "auto")
|
||||||
|
self.ip_fallback = config.get("ip_fallback", "0.0.0.0")
|
||||||
|
logger.debug(f"IP-Konfiguration geladen: mode={self.session_ip_mode}, fallback={self.ip_fallback}")
|
||||||
|
except Exception as e:
|
||||||
|
logger.warning(f"Fehler beim Laden der IP-Konfiguration: {e}")
|
||||||
|
|
||||||
|
def _get_session_ip(self) -> str:
|
||||||
|
"""
|
||||||
|
Ermittelt die IP-Adresse für die Session basierend auf der Konfiguration.
|
||||||
|
|
||||||
|
TESTBETRIEB: Temporäre Lösung - wird durch Server-Ressourcenmanagement ersetzt
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
Die IP-Adresse als String
|
||||||
|
"""
|
||||||
|
if self.session_ip_mode == "auto":
|
||||||
|
# TESTBETRIEB: Auto-Erkennung der öffentlichen IP
|
||||||
|
logger.info("TESTBETRIEB: Ermittle öffentliche IP-Adresse automatisch")
|
||||||
|
try:
|
||||||
|
response = requests.get("https://api.ipify.org?format=json", timeout=5)
|
||||||
|
if response.status_code == 200:
|
||||||
|
ip = response.json().get("ip")
|
||||||
|
logger.info(f"Öffentliche IP ermittelt: {ip}")
|
||||||
|
return ip
|
||||||
|
else:
|
||||||
|
logger.warning(f"IP-Ermittlung fehlgeschlagen: Status {response.status_code}")
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"Fehler bei IP-Ermittlung: {e}")
|
||||||
|
|
||||||
|
# Fallback verwenden
|
||||||
|
logger.warning(f"Verwende Fallback-IP: {self.ip_fallback}")
|
||||||
|
return self.ip_fallback
|
||||||
|
|
||||||
|
elif self.session_ip_mode == "server_assigned":
|
||||||
|
# TODO: Implementierung für Server-zugewiesene IPs
|
||||||
|
logger.info("Server-assigned IP mode noch nicht implementiert, verwende Fallback")
|
||||||
|
return self.ip_fallback
|
||||||
|
|
||||||
|
elif self.session_ip_mode == "proxy":
|
||||||
|
# TODO: Proxy-IP verwenden wenn Proxy aktiv
|
||||||
|
logger.info("Proxy IP mode noch nicht implementiert, verwende Fallback")
|
||||||
|
return self.ip_fallback
|
||||||
|
|
||||||
|
else:
|
||||||
|
logger.warning(f"Unbekannter IP-Modus: {self.session_ip_mode}, verwende Fallback")
|
||||||
|
return self.ip_fallback
|
||||||
|
|
||||||
|
|
||||||
|
# Test-Funktion
|
||||||
|
if __name__ == "__main__":
|
||||||
|
logging.basicConfig(
|
||||||
|
level=logging.DEBUG,
|
||||||
|
format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
|
||||||
|
)
|
||||||
|
|
||||||
|
print("=== Session Manager Test ===\n")
|
||||||
|
|
||||||
|
# Session Manager erstellen
|
||||||
|
session_mgr = SessionManager()
|
||||||
|
|
||||||
|
# Session-Info anzeigen
|
||||||
|
print("Aktuelle Session-Info:")
|
||||||
|
info = session_mgr.get_session_info()
|
||||||
|
for key, value in info.items():
|
||||||
|
print(f" {key}: {value}")
|
||||||
|
|
||||||
|
# Versuche gespeicherte Session fortzusetzen
|
||||||
|
print("\nVersuche Session fortzusetzen...")
|
||||||
|
if session_mgr.resume_session():
|
||||||
|
print(" ✓ Session fortgesetzt")
|
||||||
|
else:
|
||||||
|
print(" ✗ Keine gültige Session gefunden")
|
||||||
|
|
||||||
|
print("\n=== Test abgeschlossen ===")
|
||||||
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 |
8
favicon.svg
Normale Datei
8
favicon.svg
Normale Datei
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 400 497" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g id="svgg">
|
||||||
|
<path id="rechts" d="M212.575,238.576C212.984,240.67 223.048,241.002 270.154,240.533C349.694,239.739 344.481,239.31 346.236,243.942C347.823,248.13 347.264,250.927 338.778,272.292C333.041,286.737 321.692,301.671 304.569,327.057C262.704,389.124 258.243,380.556 257.465,379.844C256.548,379.007 256.695,378.153 256.7,377.409C256.827,359.293 254.573,273.452 254.549,270.937C254.525,268.422 254.116,268.891 229.156,268.982C211.282,269.047 211.756,268.669 211.925,271.847C211.971,272.701 212.094,316.69 212.2,369.6C212.306,422.51 212.487,468.568 212.604,469.063C213.014,470.81 224.336,462 224.6,462C224.864,462 237.107,453.265 241.4,450.384C242.5,449.646 244.343,448.313 245.496,447.421C246.648,446.53 248.865,444.9 250.421,443.8C251.978,442.7 255.169,440.115 257.513,438.055C259.857,435.996 262.771,433.605 263.988,432.743C267.489,430.261 269.974,428.216 270.637,427.269C270.973,426.789 271.767,426.127 272.4,425.8C273.034,425.472 273.862,424.68 274.24,424.04C274.618,423.399 275.574,422.512 276.364,422.067C277.741,421.292 287.002,412.973 290.077,409.749C290.89,408.897 293.68,406.009 296.277,403.331C303.179,396.216 308.766,389.886 310.684,387.009C311.611,385.619 312.782,384.149 313.286,383.741C313.791,383.334 314.523,382.55 314.913,382C315.304,381.45 316.113,380.353 316.711,379.562C317.31,378.771 318.552,377.132 319.471,375.919C320.389,374.706 321.709,373.103 322.403,372.357C324.097,370.534 325.597,368.32 327.217,365.252C327.957,363.85 329.057,362.338 329.66,361.892C330.264,361.446 331.622,359.655 332.679,357.912C333.735,356.168 335.453,353.696 336.496,352.417C337.539,351.139 338.935,348.947 339.599,347.546C341.424,343.695 344.598,338.004 345.689,336.626C347.172,334.754 348.692,331.944 348.986,330.528C349.132,329.828 349.51,329.041 349.826,328.779C350.142,328.517 350.4,328.069 350.4,327.784C350.4,327.499 351.048,326.045 351.84,324.552C352.632,323.059 353.784,320.479 354.401,318.819C355.017,317.159 356.416,314.072 357.509,311.96C358.602,309.848 359.894,306.968 360.38,305.56C360.866,304.152 361.593,302.46 361.995,301.8C362.398,301.14 362.941,299.795 363.203,298.812C363.464,297.828 363.931,296.663 364.239,296.223C364.548,295.782 364.8,295.078 364.8,294.658C364.8,293.56 367.089,287.051 368.23,284.904C368.764,283.901 369.201,282.793 369.202,282.44C369.204,282.088 369.46,281.312 369.771,280.715C370.082,280.118 370.552,278.588 370.814,277.315C371.076,276.042 371.715,273.867 372.234,272.482C372.753,271.097 373.442,268.667 373.765,267.082C374.657,262.705 375.074,261.226 376.185,258.503C376.746,257.13 377.395,254.61 377.628,252.903C377.861,251.196 386.4,207.294 386.4,202.415C386.4,200.114 384.943,198.138 382.973,197.769C382.197,197.623 390.698,196.027 262.4,197.136L256.297,196.493C254.923,195.188 254.409,193.392 254.634,190.691C255.021,186.052 255.075,102.153 254.699,90.2C254.256,76.132 254.359,75.232 256.566,73.785C257.5,73.174 257.724,73.166 258.9,73.706C259.615,74.035 343.437,105.997 345.2,108.641L346.2,110.142L346.246,163.984L347.17,164.968L348.095,165.953L367.317,165.835L386.539,165.718L387.711,164.406L388.883,163.095L388.646,155.847C388.515,151.861 388.304,143.29 388.176,136.8C387.97,126.347 389.116,102.223 388.883,92.984C388.587,81.212 385.041,79.623 381.162,77.313C378.036,75.451 212.403,10.83 212.49,12.505" style="fill:rgb(200,168,81);"/>
|
||||||
|
<path id="links" d="M31.8,72.797C19.193,77.854 16.869,77.149 16.354,86.093C16.177,89.171 13.694,109.47 13.373,112C11.292,128.389 11.075,175.356 12.999,192.8C13.326,195.77 15.755,217.626 17.524,225.4C17.975,227.38 21.242,245.556 21.798,247.6C23.196,252.741 27.444,269.357 28.368,273C29.454,277.277 33.845,288.636 34.632,290.326C35.42,292.017 39.017,301.259 39.364,301.931C39.973,303.107 41.279,306.405 42.799,310.6C43.879,313.58 46.904,319.091 47.546,320.62C48.78,323.561 51.339,328.992 51.965,330C52.17,330.33 53.466,332.67 54.845,335.2C56.223,337.73 65.855,353.259 67.765,356.052C72.504,362.981 75.544,366.754 76.46,368.119C78.119,370.593 79.488,372.185 85.821,379C87.66,380.98 89.758,383.356 90.483,384.279C92.003,386.218 92.035,386.23 93.151,385.3C94.267,384.37 94.041,384.013 94.036,382.593C94.015,376.905 94.025,351.182 94.025,351.182C94.062,315.081 94.745,313.16 93.752,308.626C92.302,301.997 88.001,300.043 80.439,284.793C71.474,266.714 65.169,255.803 62.016,248.485C61.011,246.153 59.289,240.91 61.521,240.882C65.215,240.836 143.575,240.107 144.382,240.673C145.808,241.671 146.494,243.516 146.346,245.959C146.058,250.736 146.217,438.282 146.511,439.663C146.825,441.137 153.946,447.096 162.193,452.924C177.223,463.547 187.111,469.578 187.956,468.458C189.091,466.954 188.058,10.288 188.006,12.482M146.001,134.292C145.999,164.821 146.043,190.718 146.099,191.84C146.336,196.617 147.019,196.45 127.622,196.354C106.312,196.249 58.054,196.89 58.054,196.89L57.06,195.896C55.315,194.152 55.678,132.49 55.766,126C56.004,108.467 56.656,110.707 66.745,106.586C70.345,105.116 134.261,79.128 135.708,78.566C146.998,74.183 145.972,74.295 146.055,76.768" style="fill:rgb(10,24,50);"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Nachher Breite: | Höhe: | Größe: 5.3 KiB |
205
impressum-en.html
Normale Datei
205
impressum-en.html
Normale Datei
@@ -0,0 +1,205 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Legal Notice - AegisSight</title>
|
||||||
|
|
||||||
|
<!-- Prevent search engine indexing -->
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
<link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #0a0f1c;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.impressum-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 120px 20px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum-header {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum-header h1 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum-content {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.impressum-section {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-bottom: 1px solid rgba(15, 114, 181, 0.1);
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.impressum-section:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum-section h2 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #0f72b5;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impressum-section p {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.impressum-section strong {
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" role="navigation" aria-label="Main navigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="assets/images/logos/Logo+Schrift_Rechts.svg" alt="AegisSight" class="logo-img">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="index.html#home">Home</a></li>
|
||||||
|
<li><a href="index.html#about">About Us</a></li>
|
||||||
|
<li><a href="index.html#products">Products & Solutions</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="en" aria-label="Switch language">DE | EN</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="impressum-container">
|
||||||
|
<div class="impressum-header">
|
||||||
|
<h1>Legal Notice</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-content">
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Company Information</h2>
|
||||||
|
<p>
|
||||||
|
AegisSight UG (limited liability)<br>
|
||||||
|
Gladbacher Strasse 3-5<br>
|
||||||
|
40764 Langenfeld<br>
|
||||||
|
Germany
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Represented by</h2>
|
||||||
|
<p>Hendrik Gebhardt<br>
|
||||||
|
Monami Homma</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Contact</h2>
|
||||||
|
<p>
|
||||||
|
Email: info@aegis-sight.de<br>
|
||||||
|
Website: aegis-sight.de
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Commercial Register</h2>
|
||||||
|
<p>
|
||||||
|
Entry in the Commercial Register<br>
|
||||||
|
Registry Court: District Court Düsseldorf<br>
|
||||||
|
Registration number: HRB 110105
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>VAT</h2>
|
||||||
|
<p>VAT identification number according to §27 a of the German VAT Act:<br>
|
||||||
|
DE457846602</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Consumer Dispute Resolution/<wbr>Universal Arbitration Board</h2>
|
||||||
|
<p>We are not willing or obliged to participate in dispute resolution proceedings before a consumer arbitration board.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Liability for Content</h2>
|
||||||
|
<p>As a service provider, we are responsible for our own content on these pages according to § 7 para.1 TMG under general law. However, according to §§ 8 to 10 TMG, we are not obligated as a service provider to monitor transmitted or stored third-party information or to investigate circumstances that indicate illegal activity.</p>
|
||||||
|
<p>Obligations to remove or block the use of information under general law remain unaffected. However, liability in this regard is only possible from the time of knowledge of a specific infringement. Upon becoming aware of such legal violations, we will remove this content immediately.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Liability for Links</h2>
|
||||||
|
<p>Our offer contains links to external third-party websites over whose content we have no influence. Therefore, we cannot assume any liability for this third-party content. The respective provider or operator of the pages is always responsible for the content of the linked pages. The linked pages were checked for possible legal violations at the time of linking. Illegal content was not recognizable at the time of linking.</p>
|
||||||
|
<p>However, permanent content control of the linked pages is not reasonable without concrete evidence of a violation of law. Upon becoming aware of legal violations, we will remove such links immediately.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Copyright</h2>
|
||||||
|
<p>The content and works created by the site operators on these pages are subject to German copyright law. The reproduction, editing, distribution and any kind of exploitation outside the limits of copyright require the written consent of the respective author or creator. Downloads and copies of this site are only permitted for private, non-commercial use.</p>
|
||||||
|
<p>Insofar as the content on this site was not created by the operator, the copyrights of third parties are respected. In particular, third-party content is marked as such. Should you nevertheless become aware of a copyright infringement, please inform us accordingly. Upon becoming aware of legal violations, we will remove such content immediately.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>AegisSight</h4>
|
||||||
|
<p>Sicherheit Made in Germany</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Legal</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="impressum-en.html">Legal Notice</a></li>
|
||||||
|
<li><a href="datenschutz-en.html">Privacy Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Contact</h4>
|
||||||
|
<p>info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© <span class="current-year"></span> AegisSight UG (haftungsbeschränkt). All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript for legal pages -->
|
||||||
|
<script src="js/legal-pages.js"></script>
|
||||||
|
|
||||||
|
<!-- AegisSight Analytics -->
|
||||||
|
<script async src="/insights/t.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
199
impressum.html
Normale Datei
199
impressum.html
Normale Datei
@@ -0,0 +1,199 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Impressum - AegisSight</title>
|
||||||
|
|
||||||
|
<!-- Prevent search engine indexing -->
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
<link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="css/mobile.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #0a0f1c;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.impressum-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 120px 20px 40px;
|
||||||
|
}
|
||||||
|
.impressum-header {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.impressum-header h1 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
.impressum-content {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.impressum-section {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-bottom: 1px solid rgba(15, 114, 181, 0.1);
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.impressum-section:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.impressum-section h2 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #0f72b5;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.impressum-section p {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.impressum-section strong {
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" role="navigation" aria-label="Hauptnavigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="assets/images/logos/Logo+Schrift_Rechts.svg" alt="AegisSight" class="logo-img">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="index.html#home">Startseite</a></li>
|
||||||
|
<li><a href="index.html#about">Über uns</a></li>
|
||||||
|
<li><a href="index.html#products">Produkte & Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln">DE | EN</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="impressum-container">
|
||||||
|
<div class="impressum-header">
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-content">
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Angaben gemäß § 5 TMG</h2>
|
||||||
|
<p><strong>AegisSight UG (haftungsbeschränkt)</strong></p>
|
||||||
|
<p>Gladbacher Strasse 3-5<br>
|
||||||
|
40764 Langenfeld</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Vertreten durch</h2>
|
||||||
|
<p>Hendrik Gebhardt<br>
|
||||||
|
Monami Homma</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<p>E-Mail: info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Registereintrag</h2>
|
||||||
|
<p>Handelsregister: HRB 110105<br>
|
||||||
|
Registergericht: Amtsgericht Düsseldorf</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Umsatzsteuer-ID</h2>
|
||||||
|
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>
|
||||||
|
DE457846602</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Verbraucherstreitbeilegung/<wbr>Universalschlichtungsstelle</h2>
|
||||||
|
<p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="impressum-section">
|
||||||
|
<h2>Haftungsausschluss</h2>
|
||||||
|
<p><strong>Haftung für Inhalte</strong><br>
|
||||||
|
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
|
||||||
|
|
||||||
|
<p><strong>Haftung für Links</strong><br>
|
||||||
|
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>
|
||||||
|
|
||||||
|
<p><strong>Urheberrecht</strong><br>
|
||||||
|
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.</p>
|
||||||
|
|
||||||
|
<p style="margin-top: 30px; font-size: 0.9rem; color: #666;">
|
||||||
|
Quelle: <a href="https://www.e-recht24.de" target="_blank" style="color: #0066cc;">eRecht24</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>AegisSight UG (haftungsbeschränkt)</h4>
|
||||||
|
<p>Gladbacher Strasse 3-5</p>
|
||||||
|
<p>40764 Langenfeld</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Navigation</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html#home">Startseite</a></li>
|
||||||
|
<li><a href="index.html#about">Über uns</a></li>
|
||||||
|
<li><a href="index.html#products">Produkte</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Rechtliches</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="impressum.html">Impressum</a></li>
|
||||||
|
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Kontakt</h4>
|
||||||
|
<p>info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© <span class="current-year"></span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript for legal pages -->
|
||||||
|
<script src="js/legal-pages.js"></script>
|
||||||
|
|
||||||
|
<!-- AegisSight Analytics -->
|
||||||
|
<script async src="/insights/t.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
373
index.html
Normale Datei
373
index.html
Normale Datei
@@ -0,0 +1,373 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title data-translate="pageTitle">AegisSight - Sicherheit Made in Germany</title>
|
||||||
|
|
||||||
|
<!-- Prevent search engine indexing -->
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
<link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/animations-enhanced.css">
|
||||||
|
<link rel="stylesheet" href="css/section-transitions.css">
|
||||||
|
<link rel="stylesheet" href="css/about-modern.css">
|
||||||
|
<link rel="stylesheet" href="css/products-modern.css">
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="css/mobile.css">
|
||||||
|
<link rel="stylesheet" href="cookie-consent.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Skip Navigation -->
|
||||||
|
<a href="#features" class="skip-nav" data-translate="skipNav">Zum Hauptinhalt springen</a>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" role="navigation" aria-label="Hauptnavigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="#home" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
|
||||||
|
<!-- Mobile Menu Toggle -->
|
||||||
|
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||||
|
<span class="hamburger">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Mobile Navigation Menu -->
|
||||||
|
<div class="nav-menu-mobile" aria-hidden="true">
|
||||||
|
<button class="mobile-menu-close" aria-label="Menü schließen">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu Overlay -->
|
||||||
|
<div class="mobile-menu-overlay"></div>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero" id="home">
|
||||||
|
<!-- Animated Background Gradient -->
|
||||||
|
<div class="gradient-animated" style="position: absolute; inset: 0; opacity: 0.3; z-index: 0;"></div>
|
||||||
|
<!-- Rotating Background Videos -->
|
||||||
|
<div class="hero-video-container">
|
||||||
|
<video class="hero-video active" autoplay muted loop playsinline>
|
||||||
|
<source src="assets/videos/hero-data-flow.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
<video class="hero-video" autoplay muted loop playsinline>
|
||||||
|
<source src="assets/videos/hero-network-viz.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
<video class="hero-video" autoplay muted loop playsinline>
|
||||||
|
<source src="assets/videos/hero-code-abstract.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Light Overlay for better text readability -->
|
||||||
|
<div class="hero-overlay"></div>
|
||||||
|
|
||||||
|
<!-- Particle Animation Canvas -->
|
||||||
|
<canvas id="particleCanvas" aria-hidden="true"></canvas>
|
||||||
|
|
||||||
|
<div class="hero-content animate-in">
|
||||||
|
<h1 class="hero-title">
|
||||||
|
<span class="main-title" data-translate="heroTitle">SICHERHEIT MADE IN GERMANY</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero-text animate-in stagger-2" data-translate="heroSubtitle">Spezialist für hochsichere, maßgeschneiderte IT-Lösungen für Behörden</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scroll Indicator -->
|
||||||
|
<div class="scroll-indicator">
|
||||||
|
<span class="scroll-text" data-translate="scrollToExplore">Scroll to Explore</span>
|
||||||
|
<div class="scroll-arrow">
|
||||||
|
<img src="assets/images/icons/arrow-down.svg" alt="Scroll Down" width="24" height="24">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Us Section -->
|
||||||
|
<section class="about-section" id="about">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title" data-translate="aboutTitle">ÜBER UNS</h2>
|
||||||
|
<p class="section-subtitle" data-translate="aboutSubtitle">Ihr Partner für sichere Behördensoftware</p>
|
||||||
|
|
||||||
|
<!-- About Tabs Navigation -->
|
||||||
|
<div class="about-tabs">
|
||||||
|
<button class="about-tab active" data-tab="who-we-are" data-translate="tabWhoWeAre">Unternehmen</button>
|
||||||
|
<button class="about-tab" data-tab="mission" data-translate="tabMission">Mission & Werte</button>
|
||||||
|
<button class="about-tab" data-tab="competencies" data-translate="tabCompetencies">Kernkompetenzen</button>
|
||||||
|
<button class="about-tab" data-tab="why-us" data-translate="tabWhyUs">Unser Versprechen</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- About Content Panels -->
|
||||||
|
<div class="about-content">
|
||||||
|
<!-- Wer wir sind -->
|
||||||
|
<div class="about-panel active reveal" id="who-we-are">
|
||||||
|
<div class="panel-text">
|
||||||
|
<div class="company-cards-wrapper">
|
||||||
|
<div class="company-card">
|
||||||
|
<h4>
|
||||||
|
<span class="company-card-icon">
|
||||||
|
<img src="assets/images/icons/shield.svg" alt="Security" width="24" height="24">
|
||||||
|
</span>
|
||||||
|
<span data-translate="companyCardTitle1">Spezialist für Behördensoftware</span>
|
||||||
|
</h4>
|
||||||
|
<p data-translate="whoWeArePara1">AegisSight UG ist Ihr <strong>Spezialist für hochsichere, maßgeschneiderte IT-Lösungen</strong> aus Nordrhein-Westfalen. Wir entwickeln innovative Software speziell für staatliche Sicherheits- und Ermittlungsbehörden.</p>
|
||||||
|
</div>
|
||||||
|
<div class="company-card">
|
||||||
|
<h4>
|
||||||
|
<span class="company-card-icon">
|
||||||
|
<img src="assets/images/icons/plus-circle.svg" alt="Future" width="24" height="24">
|
||||||
|
</span>
|
||||||
|
<span data-translate="companyCardTitle2">Unser Ansatz</span>
|
||||||
|
</h4>
|
||||||
|
<p data-translate="whoWeArePara2">Unser Ansatz vereint modernste Technologie mit einem tiefen Verständnis für die besonderen Anforderungen von Behörden. Dabei steht die Balance zwischen Sicherheit, Effizienz und rechtskonformer Umsetzung im Mittelpunkt unserer Arbeit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="location-section">
|
||||||
|
<div class="mini-germany-map">
|
||||||
|
<img src="assets/images/nrw.png" alt="NRW Map" />
|
||||||
|
</div>
|
||||||
|
<div class="location-badge">
|
||||||
|
<img src="assets/images/icons/location.svg" alt="Location" width="24" height="24">
|
||||||
|
<span data-translate="locationBadge">Nordrhein-Westfalen, Deutschland</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mission & Werte -->
|
||||||
|
<div class="about-panel" id="mission">
|
||||||
|
<div class="mission-grid">
|
||||||
|
<div class="mission-header">
|
||||||
|
<h3 data-translate="missionTitle">Unsere Mission</h3>
|
||||||
|
<p data-translate="missionStatement">Wir schaffen <strong>effiziente, sichere und datenschutzkonforme Lösungen</strong> für moderne Strafverfolgung und Sicherheitsbehörden.</p>
|
||||||
|
</div>
|
||||||
|
<div class="values-grid">
|
||||||
|
<div class="value-card card-hover-lift tilt-card">
|
||||||
|
<div class="value-icon">
|
||||||
|
<img src="assets/images/icons/shield-check.svg" alt="Verified" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<h4 data-translate="valueIntegrityTitle">Integrität</h4>
|
||||||
|
<p data-translate="valueIntegrityDesc">Höchste ethische Standards in allem was wir tun</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-card card-hover-lift tilt-card">
|
||||||
|
<div class="value-icon">
|
||||||
|
<img src="assets/images/icons/clock-circle.svg" alt="Time" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<h4 data-translate="valueTransparencyTitle">Transparenz</h4>
|
||||||
|
<p data-translate="valueTransparencyDesc">Offene Kommunikation und nachvollziehbare Prozesse</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-card card-hover-lift tilt-card">
|
||||||
|
<div class="value-icon">
|
||||||
|
<img src="assets/images/icons/pyramid.svg" alt="Scale" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<h4 data-translate="valueDemocracyTitle">Demokratische Prinzipien</h4>
|
||||||
|
<p data-translate="valueDemocracyDesc">Kooperation nur mit Behörden im Einklang mit der freiheitlich demokratischen Grundordnung</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="principle-note">
|
||||||
|
<p data-translate="principleNote"><strong>Unser Ziel:</strong> Technologie, die Recht und Sicherheit stärkt und die freiheitlich demokratische Grundordnung schützt.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Kernkompetenzen -->
|
||||||
|
<div class="about-panel" id="competencies">
|
||||||
|
<div class="competencies-list">
|
||||||
|
<div class="competency-item">
|
||||||
|
<div class="competency-number">01</div>
|
||||||
|
<div class="competency-content">
|
||||||
|
<h4 data-translate="comp1Title">Behördenspezifische Software</h4>
|
||||||
|
<p data-translate="comp1Desc">Entwicklung mit höchsten Sicherheitsstandards, maßgeschneidert für staatliche Anforderungen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="competency-item">
|
||||||
|
<div class="competency-number">02</div>
|
||||||
|
<div class="competency-content">
|
||||||
|
<h4 data-translate="comp2Title">Intuitive Bedienkonzepte</h4>
|
||||||
|
<p data-translate="comp2Desc">Benutzerfreundliche Oberflächen trotz komplexer Funktionen für effizientes Arbeiten</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="competency-item">
|
||||||
|
<div class="competency-number">03</div>
|
||||||
|
<div class="competency-content">
|
||||||
|
<h4 data-translate="comp3Title">Langzeit-Support</h4>
|
||||||
|
<p data-translate="comp3Desc">Kontinuierliche Sicherheitsupdates und zuverlässige Wartung über den gesamten Lebenszyklus</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Warum AegisSight -->
|
||||||
|
<div class="about-panel" id="why-us">
|
||||||
|
<div class="why-grid">
|
||||||
|
<div class="why-card card-hover-lift">
|
||||||
|
<div class="why-icon">
|
||||||
|
<img src="assets/images/icons/check-circle-filled.svg" alt="Check" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<h4 data-translate="why1Title">Enge Zusammenarbeit</h4>
|
||||||
|
<p data-translate="why1Desc">Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card card-hover-lift">
|
||||||
|
<div class="why-icon german-flag-icon">
|
||||||
|
<img src="assets/images/icons/german-flag.svg" alt="German Flag" width="60" height="36">
|
||||||
|
</div>
|
||||||
|
<h4 data-translate="why2Title">Made in Germany</h4>
|
||||||
|
<p data-translate="why2Desc">Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card card-hover-lift">
|
||||||
|
<div class="why-icon">
|
||||||
|
<img src="assets/handshake.svg" alt="Handshake" width="50" height="50" />
|
||||||
|
</div>
|
||||||
|
<h4 data-translate="why3Title">Verlässliche Partnerschaft</h4>
|
||||||
|
<p data-translate="why3Desc">Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card card-hover-lift">
|
||||||
|
<div class="why-icon">
|
||||||
|
<img src="assets/images/icons/clock.svg" alt="Clock" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<h4 data-translate="why4Title">Nachhaltigkeit</h4>
|
||||||
|
<p data-translate="why4Desc">Fokus auf Sicherheit, Professionalität & zukunftssichere Lösungen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Products & Solutions Section -->
|
||||||
|
<section class="products-section" id="products">
|
||||||
|
<div class="tech-particles">
|
||||||
|
<div class="particle"></div>
|
||||||
|
<div class="particle"></div>
|
||||||
|
<div class="particle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="products-container">
|
||||||
|
<div style="text-align: center; margin-bottom: 60px;">
|
||||||
|
<h2 class="section-title" data-translate="productsTitle">PRODUKTE & LÖSUNGEN</h2>
|
||||||
|
<p class="section-subtitle" data-translate="productsSubtitle">Professionelle Werkzeuge für moderne Ermittlungsarbeit</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="products-grid">
|
||||||
|
<!-- Product: AegisSight Monitor -->
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-header">
|
||||||
|
<div class="product-icon-wrapper">
|
||||||
|
<div class="product-icon-bg"></div>
|
||||||
|
<img class="product-icon" src="assets/images/icons/world-globe.svg" alt="AegisSight Monitor">
|
||||||
|
</div>
|
||||||
|
<div class="product-title-wrapper">
|
||||||
|
<h3 class="product-title" data-translate="productOsintMonitorTitle">AegisSight Monitor</h3>
|
||||||
|
<p class="product-tagline" data-translate="productOsintMonitorTagline">Open Source Intelligence - automatisiert</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-body">
|
||||||
|
<p class="product-description" data-translate="productOsintMonitorDesc">AegisSight Monitor aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen in Echtzeit. Erleben Sie die Plattform live am Beispiel des Iran-Livetickers.</p>
|
||||||
|
<a href="/lagen/iran-konflikt/" class="product-learn-more" style="text-decoration: none; text-align: center;">
|
||||||
|
<span data-translate="osintMonitorButton">Iran-Liveticker öffnen</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Product: AccountForger -->
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-header">
|
||||||
|
<div class="product-icon-wrapper">
|
||||||
|
<div class="product-icon-bg"></div>
|
||||||
|
<img class="product-icon" src="assets/images/icons/lock.svg" alt="AccountForger">
|
||||||
|
</div>
|
||||||
|
<div class="product-title-wrapper">
|
||||||
|
<h3 class="product-title" data-translate="productAccountForgerTitle">AccountForger</h3>
|
||||||
|
<p class="product-tagline">Zugang nur mit Berechtigung</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-body">
|
||||||
|
<p class="product-description" data-translate="protectedProductDesc">Dieses Produkt ist speziell für autorisierte Behörden entwickelt und erfordert eine Authentifizierung.</p>
|
||||||
|
<button class="product-learn-more" onclick="showLoginModal()">
|
||||||
|
<span data-translate="loginForAccess">Anmelden für Zugriff</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
|
||||||
|
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
|
||||||
|
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerNavTitle">Navigation</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home" data-translate="footerNavHome">Startseite</a></li>
|
||||||
|
<li><a href="#about" data-translate="footerNavAbout">Über uns</a></li>
|
||||||
|
<li><a href="#products" data-translate="footerNavProducts">Lösungen</a></li>
|
||||||
|
<li><a href="https://blog.aegis-sight.de" target="_blank">Blog</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerLegalTitle">Rechtliches</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="impressum.html" data-translate="footerImprint">Impressum</a></li>
|
||||||
|
<li><a href="datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
|
||||||
|
<li><a href="#" id="cookie-settings-link" data-translate="footerCookies">Cookie-Einstellungen</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerContactTitle">Kontakt</h4>
|
||||||
|
<p>info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright" data-translate="copyright">© {year} AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript Files -->
|
||||||
|
<script src="js/config.js"></script>
|
||||||
|
|
||||||
|
<!-- Cookie Consent (MUSS vor Analytics geladen werden!) -->
|
||||||
|
<script src="cookie-consent.js"></script>
|
||||||
|
|
||||||
|
<script src="js/translations.js"></script>
|
||||||
|
<script src="js/animations.js"></script>
|
||||||
|
<script src="js/animations-enhanced.js"></script>
|
||||||
|
<script src="js/section-transitions.js"></script>
|
||||||
|
<script src="js/hero-videos.js"></script>
|
||||||
|
<script src="js/components.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
<script src="js/mobile-nav.js"></script>
|
||||||
|
|
||||||
|
<!-- AegisSight Analytics wird automatisch durch Cookie Consent geladen -->
|
||||||
|
<!-- <script async src="/insights/t.js"></script> ENTFERNT - wird nur bei Zustimmung geladen! -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
233
js/animations-enhanced.js
Normale Datei
233
js/animations-enhanced.js
Normale Datei
@@ -0,0 +1,233 @@
|
|||||||
|
/**
|
||||||
|
* Enhanced Animations and Interactions
|
||||||
|
* Premium effects for modern web experience
|
||||||
|
*/
|
||||||
|
|
||||||
|
const EnhancedAnimations = {
|
||||||
|
init() {
|
||||||
|
this.initScrollAnimations();
|
||||||
|
this.initParallaxEffects();
|
||||||
|
this.initMagneticButtons();
|
||||||
|
this.initTextAnimations();
|
||||||
|
this.initCardTilt();
|
||||||
|
this.initSmoothScroll();
|
||||||
|
this.initCursorEffects();
|
||||||
|
this.initRevealOnScroll();
|
||||||
|
this.initNavbarEffects();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Smooth scroll with easing
|
||||||
|
initSmoothScroll() {
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
const offset = 100;
|
||||||
|
const targetPosition = target.offsetTop - offset;
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// Parallax scrolling effects
|
||||||
|
initParallaxEffects() {
|
||||||
|
const parallaxElements = document.querySelectorAll('.parallax');
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
function updateParallax() {
|
||||||
|
const scrolled = window.pageYOffset;
|
||||||
|
|
||||||
|
parallaxElements.forEach(element => {
|
||||||
|
const speed = element.dataset.speed || 0.5;
|
||||||
|
const yPos = -(scrolled * speed);
|
||||||
|
element.style.transform = `translateY(${yPos}px)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
ticking = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestTick() {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(updateParallax);
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', requestTick);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Magnetic button effects
|
||||||
|
initMagneticButtons() {
|
||||||
|
const magneticButtons = document.querySelectorAll('.primary-button, .secondary-button, .cta-button');
|
||||||
|
|
||||||
|
magneticButtons.forEach(button => {
|
||||||
|
button.addEventListener('mousemove', (e) => {
|
||||||
|
const rect = button.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left - rect.width / 2;
|
||||||
|
const y = e.clientY - rect.top - rect.height / 2;
|
||||||
|
|
||||||
|
button.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px) scale(1.05)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
button.addEventListener('mouseleave', () => {
|
||||||
|
button.style.transform = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// Advanced text animations
|
||||||
|
initTextAnimations() {
|
||||||
|
// Typewriter effect for hero title - DISABLED to prevent duplication
|
||||||
|
// The title already has CSS animations applied
|
||||||
|
|
||||||
|
/* Commented out to fix duplication issue
|
||||||
|
const heroTitle = document.querySelector('.main-title');
|
||||||
|
if (heroTitle && !heroTitle.dataset.animated) {
|
||||||
|
heroTitle.dataset.animated = 'true';
|
||||||
|
const text = heroTitle.textContent;
|
||||||
|
heroTitle.textContent = '';
|
||||||
|
heroTitle.style.opacity = '1';
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
const typeWriter = () => {
|
||||||
|
if (index < text.length) {
|
||||||
|
heroTitle.textContent += text.charAt(index);
|
||||||
|
index++;
|
||||||
|
setTimeout(typeWriter, 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Start typewriter after a short delay
|
||||||
|
setTimeout(typeWriter, 500);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Word-by-word reveal for hero text
|
||||||
|
const heroText = document.querySelector('.hero-text');
|
||||||
|
if (heroText) {
|
||||||
|
const words = heroText.textContent.split(' ');
|
||||||
|
heroText.innerHTML = words.map(word =>
|
||||||
|
`<span class="word-reveal" style="opacity: 0; display: inline-block; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);">${word}</span>`
|
||||||
|
).join(' ');
|
||||||
|
|
||||||
|
const wordSpans = heroText.querySelectorAll('.word-reveal');
|
||||||
|
wordSpans.forEach((word, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
word.style.opacity = '1';
|
||||||
|
word.style.transform = 'translateY(0)';
|
||||||
|
}, 1000 + index * 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Card tilt removed - zu verspielt für Behördenkontext
|
||||||
|
initCardTilt() {
|
||||||
|
// Deaktiviert - CSS hover-Effekte reichen aus
|
||||||
|
},
|
||||||
|
|
||||||
|
// Custom cursor effects - DISABLED
|
||||||
|
initCursorEffects() {
|
||||||
|
// Cursor removed as requested
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// Reveal elements on scroll
|
||||||
|
initRevealOnScroll() {
|
||||||
|
const revealElements = document.querySelectorAll('.about-panel, .tool-card, .value-card, .why-card, .competency-item');
|
||||||
|
|
||||||
|
revealElements.forEach((element, index) => {
|
||||||
|
element.style.opacity = '0';
|
||||||
|
element.style.transform = 'translateY(50px)';
|
||||||
|
element.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||||
|
});
|
||||||
|
|
||||||
|
const revealOnScroll = () => {
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
revealElements.forEach((element, index) => {
|
||||||
|
const elementTop = element.getBoundingClientRect().top;
|
||||||
|
const elementVisible = 100;
|
||||||
|
|
||||||
|
if (elementTop < windowHeight - elementVisible) {
|
||||||
|
setTimeout(() => {
|
||||||
|
element.style.opacity = '1';
|
||||||
|
element.style.transform = 'translateY(0)';
|
||||||
|
}, index * 50);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', revealOnScroll);
|
||||||
|
revealOnScroll(); // Check on initial load
|
||||||
|
},
|
||||||
|
|
||||||
|
// Scroll-based animations
|
||||||
|
initScrollAnimations() {
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
function updateScrollAnimations() {
|
||||||
|
const scrollY = window.scrollY;
|
||||||
|
const scrollDirection = scrollY > lastScrollY ? 'down' : 'up';
|
||||||
|
|
||||||
|
// Hero parallax
|
||||||
|
const hero = document.querySelector('.hero-content');
|
||||||
|
if (hero) {
|
||||||
|
hero.style.transform = `translateY(${scrollY * 0.5}px)`;
|
||||||
|
hero.style.opacity = 1 - (scrollY / 800);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Video parallax
|
||||||
|
const heroVideos = document.querySelector('.hero-video-container');
|
||||||
|
if (heroVideos) {
|
||||||
|
heroVideos.style.transform = `translateY(${scrollY * 0.3}px) scale(${1 + scrollY * 0.0003})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollY = scrollY;
|
||||||
|
ticking = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestTick() {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(updateScrollAnimations);
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', requestTick);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Enhanced navbar effects
|
||||||
|
initNavbarEffects() {
|
||||||
|
const navbar = document.querySelector('.navbar');
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const scrollY = window.scrollY;
|
||||||
|
|
||||||
|
if (scrollY > 50) {
|
||||||
|
navbar.classList.add('scrolled');
|
||||||
|
} else {
|
||||||
|
navbar.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keep navbar always visible
|
||||||
|
navbar.style.transform = 'translateY(0)';
|
||||||
|
|
||||||
|
lastScrollY = scrollY;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => EnhancedAnimations.init());
|
||||||
|
} else {
|
||||||
|
EnhancedAnimations.init();
|
||||||
|
}
|
||||||
403
js/animations.js
Normale Datei
403
js/animations.js
Normale Datei
@@ -0,0 +1,403 @@
|
|||||||
|
/**
|
||||||
|
* Animation module for AegisSight website
|
||||||
|
* Contains all animation logic and visual effects
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Particle Animation System
|
||||||
|
const ParticleAnimation = {
|
||||||
|
canvas: null,
|
||||||
|
ctx: null,
|
||||||
|
particles: [],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize particle animation
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.canvas = document.querySelector(SELECTORS.PARTICLE_CANVAS);
|
||||||
|
if (!this.canvas) return;
|
||||||
|
|
||||||
|
this.ctx = this.canvas.getContext('2d');
|
||||||
|
this.resizeCanvas();
|
||||||
|
this.createParticles();
|
||||||
|
this.animate();
|
||||||
|
|
||||||
|
// Handle window resize
|
||||||
|
window.addEventListener('resize', () => this.resizeCanvas());
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resize canvas to window size
|
||||||
|
*/
|
||||||
|
resizeCanvas() {
|
||||||
|
this.canvas.width = window.innerWidth;
|
||||||
|
this.canvas.height = window.innerHeight;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create particle objects
|
||||||
|
*/
|
||||||
|
createParticles() {
|
||||||
|
this.particles = [];
|
||||||
|
for (let i = 0; i < CONFIG.ANIMATION.PARTICLE_COUNT; i++) {
|
||||||
|
this.particles.push(new Particle(this.canvas));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Main animation loop
|
||||||
|
*/
|
||||||
|
animate() {
|
||||||
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
|
||||||
|
// Update and draw particles
|
||||||
|
this.particles.forEach(particle => {
|
||||||
|
particle.update(this.canvas);
|
||||||
|
particle.draw(this.ctx);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw connections between particles
|
||||||
|
this.drawConnections();
|
||||||
|
|
||||||
|
requestAnimationFrame(() => this.animate());
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draw connections between nearby particles
|
||||||
|
*/
|
||||||
|
drawConnections() {
|
||||||
|
for (let a = 0; a < this.particles.length; a++) {
|
||||||
|
for (let b = a + 1; b < this.particles.length; b++) {
|
||||||
|
const distance = Math.sqrt(
|
||||||
|
Math.pow(this.particles[a].x - this.particles[b].x, 2) +
|
||||||
|
Math.pow(this.particles[a].y - this.particles[b].y, 2)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (distance < CONFIG.ANIMATION.CONNECTION_DISTANCE) {
|
||||||
|
const opacity = 0.15 * (1 - distance / CONFIG.ANIMATION.CONNECTION_DISTANCE);
|
||||||
|
// Use darker blue for better visibility on light background
|
||||||
|
this.ctx.strokeStyle = `rgba(15, 114, 181, ${opacity})`;
|
||||||
|
this.ctx.lineWidth = 1;
|
||||||
|
this.ctx.beginPath();
|
||||||
|
this.ctx.moveTo(this.particles[a].x, this.particles[a].y);
|
||||||
|
this.ctx.lineTo(this.particles[b].x, this.particles[b].y);
|
||||||
|
this.ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Particle class for animation
|
||||||
|
*/
|
||||||
|
class Particle {
|
||||||
|
constructor(canvas) {
|
||||||
|
this.x = Math.random() * canvas.width;
|
||||||
|
this.y = Math.random() * canvas.height;
|
||||||
|
this.size = Math.random() * (CONFIG.ANIMATION.PARTICLE_SIZE_MAX - CONFIG.ANIMATION.PARTICLE_SIZE_MIN) + CONFIG.ANIMATION.PARTICLE_SIZE_MIN;
|
||||||
|
this.speedX = (Math.random() - 0.5) * CONFIG.ANIMATION.PARTICLE_SPEED;
|
||||||
|
this.speedY = (Math.random() - 0.5) * CONFIG.ANIMATION.PARTICLE_SPEED;
|
||||||
|
this.opacity = Math.random() * 0.5 + 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
update(canvas) {
|
||||||
|
this.x += this.speedX;
|
||||||
|
this.y += this.speedY;
|
||||||
|
|
||||||
|
// Wrap around screen edges
|
||||||
|
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) {
|
||||||
|
// Use darker blue for better visibility on light background
|
||||||
|
ctx.fillStyle = `rgba(15, 114, 181, ${this.opacity * 0.7})`;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Counter Animation
|
||||||
|
const CounterAnimation = {
|
||||||
|
/**
|
||||||
|
* Animate all counter elements
|
||||||
|
*/
|
||||||
|
animateAll() {
|
||||||
|
const counters = document.querySelectorAll(SELECTORS.INDICATOR_VALUE);
|
||||||
|
counters.forEach(counter => this.animateCounter(counter));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animate a single counter
|
||||||
|
* @param {HTMLElement} counter - Counter element to animate
|
||||||
|
*/
|
||||||
|
animateCounter(counter) {
|
||||||
|
const target = parseFloat(counter.getAttribute(DATA_ATTRS.TARGET));
|
||||||
|
const increment = target / CONFIG.ANIMATION.COUNTER_SPEED;
|
||||||
|
let current = 0;
|
||||||
|
|
||||||
|
const updateCounter = () => {
|
||||||
|
current += increment;
|
||||||
|
|
||||||
|
if (current < target) {
|
||||||
|
counter.innerText = Math.ceil(current);
|
||||||
|
setTimeout(updateCounter, CONFIG.TIMING.COUNTER_UPDATE_INTERVAL);
|
||||||
|
} else {
|
||||||
|
// Set final value with proper formatting
|
||||||
|
if (target === CONFIG.TRUST_INDICATORS.AVAILABILITY) {
|
||||||
|
counter.innerText = target + '%';
|
||||||
|
} else if (target === CONFIG.TRUST_INDICATORS.AUTHORITIES_COUNT) {
|
||||||
|
counter.innerText = target + '+';
|
||||||
|
} else if (target === CONFIG.TRUST_INDICATORS.SUPPORT_HOURS) {
|
||||||
|
counter.innerText = target + '/7';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateCounter();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Scroll Animations
|
||||||
|
const ScrollAnimations = {
|
||||||
|
scrollIndicator: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize scroll-based animations
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.scrollIndicator = document.querySelector(SELECTORS.SCROLL_INDICATOR);
|
||||||
|
this.setupScrollIndicator();
|
||||||
|
this.setupIntersectionObserver();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup scroll indicator behavior
|
||||||
|
*/
|
||||||
|
setupScrollIndicator() {
|
||||||
|
if (!this.scrollIndicator) return;
|
||||||
|
|
||||||
|
// Click to scroll to about section
|
||||||
|
this.scrollIndicator.addEventListener('click', () => {
|
||||||
|
const aboutSection = document.querySelector('#about');
|
||||||
|
if (aboutSection) {
|
||||||
|
aboutSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide/show based on scroll position
|
||||||
|
let scrollTimeout;
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const hero = document.querySelector(SELECTORS.HERO);
|
||||||
|
|
||||||
|
if (window.scrollY > CONFIG.ANIMATION.SCROLL_THRESHOLD) {
|
||||||
|
if (hero) hero.classList.add(CLASSES.SCROLLED);
|
||||||
|
if (this.scrollIndicator) this.scrollIndicator.style.opacity = '0';
|
||||||
|
} else {
|
||||||
|
if (hero) hero.classList.remove(CLASSES.SCROLLED);
|
||||||
|
if (this.scrollIndicator) this.scrollIndicator.style.opacity = '1';
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeout(scrollTimeout);
|
||||||
|
scrollTimeout = setTimeout(() => {
|
||||||
|
if (window.scrollY > CONFIG.ANIMATION.SCROLL_THRESHOLD && this.scrollIndicator) {
|
||||||
|
this.scrollIndicator.style.display = 'none';
|
||||||
|
} else if (this.scrollIndicator) {
|
||||||
|
this.scrollIndicator.style.display = 'flex';
|
||||||
|
}
|
||||||
|
}, CONFIG.TIMING.SCROLL_HIDE_DELAY);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup intersection observer for scroll-triggered animations
|
||||||
|
*/
|
||||||
|
setupIntersectionObserver() {
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: CONFIG.OBSERVER.THRESHOLD,
|
||||||
|
rootMargin: CONFIG.OBSERVER.ROOT_MARGIN
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
// Trust indicators animation
|
||||||
|
if (entry.target.classList.contains('trust-indicators')) {
|
||||||
|
CounterAnimation.animateAll();
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Timeline animation
|
||||||
|
if (entry.target.classList.contains('timeline')) {
|
||||||
|
const items = entry.target.querySelectorAll('.timeline-item');
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
item.classList.add(CLASSES.VISIBLE);
|
||||||
|
}, index * 300);
|
||||||
|
});
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Feature nodes animation
|
||||||
|
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
|
||||||
|
const trustIndicators = document.querySelector(SELECTORS.TRUST_INDICATORS);
|
||||||
|
if (trustIndicators) {
|
||||||
|
trustIndicators.style.opacity = '0';
|
||||||
|
observer.observe(trustIndicators);
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeline = document.querySelector('.timeline');
|
||||||
|
if (timeline) observer.observe(timeline);
|
||||||
|
|
||||||
|
const featureNodes = document.querySelector('.feature-nodes');
|
||||||
|
if (featureNodes) {
|
||||||
|
document.querySelectorAll('.node').forEach(node => {
|
||||||
|
node.style.opacity = '0';
|
||||||
|
node.style.transform = 'translateY(30px)';
|
||||||
|
node.style.transition = 'all 0.6s ease';
|
||||||
|
});
|
||||||
|
observer.observe(featureNodes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Glitch Effect
|
||||||
|
const GlitchEffect = {
|
||||||
|
/**
|
||||||
|
* Apply glitch effect to element on hover
|
||||||
|
* @param {HTMLElement} element - Element to apply effect to
|
||||||
|
*/
|
||||||
|
apply(element) {
|
||||||
|
if (!element) return;
|
||||||
|
|
||||||
|
let glitchInterval;
|
||||||
|
element.addEventListener('mouseenter', () => {
|
||||||
|
let count = 0;
|
||||||
|
glitchInterval = setInterval(() => {
|
||||||
|
element.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 > CONFIG.ANIMATION.GLITCH_ITERATIONS) {
|
||||||
|
clearInterval(glitchInterval);
|
||||||
|
element.style.textShadow = 'none';
|
||||||
|
}
|
||||||
|
}, CONFIG.ANIMATION.GLITCH_INTERVAL);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Interactive Elements
|
||||||
|
const InteractiveElements = {
|
||||||
|
/**
|
||||||
|
* Initialize all interactive element animations
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.setupNodeHoverEffects();
|
||||||
|
this.setupWidgetHoverEffects();
|
||||||
|
this.setupInteractiveIcon();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup hover effects for node elements
|
||||||
|
*/
|
||||||
|
setupNodeHoverEffects() {
|
||||||
|
document.querySelectorAll('.node').forEach(node => {
|
||||||
|
node.addEventListener('mouseenter', function() {
|
||||||
|
const icon = this.querySelector('.node-icon');
|
||||||
|
if (icon) icon.style.transform = 'scale(1.2) rotate(5deg)';
|
||||||
|
});
|
||||||
|
|
||||||
|
node.addEventListener('mouseleave', function() {
|
||||||
|
const icon = this.querySelector('.node-icon');
|
||||||
|
if (icon) icon.style.transform = 'scale(1) rotate(0deg)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup hover effects for widget elements
|
||||||
|
*/
|
||||||
|
setupWidgetHoverEffects() {
|
||||||
|
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';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup 3D interactive icon effect
|
||||||
|
*/
|
||||||
|
setupInteractiveIcon() {
|
||||||
|
const icon = document.querySelector(SELECTORS.INTERACTIVE_ICON);
|
||||||
|
if (!icon) return;
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (e) => {
|
||||||
|
const rect = icon.getBoundingClientRect();
|
||||||
|
const centerX = rect.left + rect.width / 2;
|
||||||
|
const centerY = rect.top + rect.height / 2;
|
||||||
|
|
||||||
|
const mouseX = (e.clientX - centerX) / 20;
|
||||||
|
const mouseY = (e.clientY - centerY) / 20;
|
||||||
|
|
||||||
|
icon.style.transform = `perspective(1000px) rotateY(${mouseX}deg) rotateX(${-mouseY}deg)`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize all animations
|
||||||
|
const Animations = {
|
||||||
|
/**
|
||||||
|
* Initialize all animation systems
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
// Core animations
|
||||||
|
ParticleAnimation.init();
|
||||||
|
ScrollAnimations.init();
|
||||||
|
InteractiveElements.init();
|
||||||
|
|
||||||
|
// Apply glitch effect to main title
|
||||||
|
const mainTitle = document.querySelector('.main-title');
|
||||||
|
if (mainTitle) {
|
||||||
|
GlitchEffect.apply(mainTitle);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Page load animations
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
document.body.classList.add(CLASSES.LOADED);
|
||||||
|
|
||||||
|
// Fade in hero content
|
||||||
|
setTimeout(() => {
|
||||||
|
const heroContent = document.querySelector(SELECTORS.HERO_CONTENT);
|
||||||
|
if (heroContent) {
|
||||||
|
heroContent.style.opacity = '1';
|
||||||
|
heroContent.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
515
js/components.js
Normale Datei
515
js/components.js
Normale Datei
@@ -0,0 +1,515 @@
|
|||||||
|
/**
|
||||||
|
* UI Components module for AegisSight website
|
||||||
|
* Contains all interactive UI component logic
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Language Toggle Component
|
||||||
|
const LanguageToggle = {
|
||||||
|
element: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize language toggle
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.element = document.querySelector(SELECTORS.LANG_TOGGLE);
|
||||||
|
if (!this.element) return;
|
||||||
|
|
||||||
|
this.element.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.toggle();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle between languages
|
||||||
|
*/
|
||||||
|
toggle() {
|
||||||
|
const newLanguage = getCurrentLanguage() === 'de' ? 'en' : 'de';
|
||||||
|
switchLanguage(newLanguage);
|
||||||
|
|
||||||
|
// Update expand button text after language change
|
||||||
|
ProductShowcase.updateExpandButtonText();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Navigation Component
|
||||||
|
const Navigation = {
|
||||||
|
navbar: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize navigation component
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.navbar = document.querySelector(SELECTORS.NAVBAR);
|
||||||
|
this.setupSmoothScrolling();
|
||||||
|
this.setupMobileMenu();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup smooth scrolling for anchor links
|
||||||
|
*/
|
||||||
|
setupSmoothScrolling() {
|
||||||
|
document.querySelectorAll(SELECTORS.SMOOTH_LINKS).forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
const target = document.querySelector(targetId);
|
||||||
|
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup mobile menu functionality
|
||||||
|
*/
|
||||||
|
setupMobileMenu() {
|
||||||
|
// Mobile menu logic would go here if needed
|
||||||
|
// Currently not implemented as per YAGNI principle
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// About Section Tabs
|
||||||
|
const AboutTabs = {
|
||||||
|
tabs: null,
|
||||||
|
panels: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize about section tabs
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.tabs = document.querySelectorAll(SELECTORS.ABOUT_TABS);
|
||||||
|
this.panels = document.querySelectorAll(SELECTORS.ABOUT_PANELS);
|
||||||
|
|
||||||
|
if (!this.tabs.length) return;
|
||||||
|
|
||||||
|
this.tabs.forEach(tab => {
|
||||||
|
tab.addEventListener('click', () => this.switchTab(tab));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch to selected tab
|
||||||
|
* @param {HTMLElement} selectedTab - Tab element that was clicked
|
||||||
|
*/
|
||||||
|
switchTab(selectedTab) {
|
||||||
|
const targetPanelId = selectedTab.getAttribute(DATA_ATTRS.TAB);
|
||||||
|
|
||||||
|
// Remove active class from all tabs and panels
|
||||||
|
this.tabs.forEach(tab => tab.classList.remove(CLASSES.ACTIVE));
|
||||||
|
this.panels.forEach(panel => panel.classList.remove(CLASSES.ACTIVE));
|
||||||
|
|
||||||
|
// Add active class to selected tab and corresponding panel
|
||||||
|
selectedTab.classList.add(CLASSES.ACTIVE);
|
||||||
|
const targetPanel = document.getElementById(targetPanelId);
|
||||||
|
if (targetPanel) {
|
||||||
|
targetPanel.classList.add(CLASSES.ACTIVE);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Product Showcase Component
|
||||||
|
const ProductShowcase = {
|
||||||
|
expandButton: null,
|
||||||
|
toolsGrid: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize product showcase
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.expandButton = document.querySelector(SELECTORS.EXPAND_BUTTON);
|
||||||
|
this.toolsGrid = document.querySelector(SELECTORS.TOOLS_GRID);
|
||||||
|
|
||||||
|
if (!this.expandButton || !this.toolsGrid) return;
|
||||||
|
|
||||||
|
this.expandButton.addEventListener('click', () => this.toggleExpand());
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle expand/collapse state
|
||||||
|
*/
|
||||||
|
toggleExpand() {
|
||||||
|
const isExpanded = this.expandButton.getAttribute(DATA_ATTRS.EXPANDED) === 'true';
|
||||||
|
|
||||||
|
if (isExpanded) {
|
||||||
|
this.collapse();
|
||||||
|
} else {
|
||||||
|
this.expand();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Expand the tools grid
|
||||||
|
*/
|
||||||
|
expand() {
|
||||||
|
this.toolsGrid.classList.remove(CLASSES.COLLAPSED);
|
||||||
|
this.expandButton.setAttribute(DATA_ATTRS.EXPANDED, 'true');
|
||||||
|
this.updateExpandButtonText();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Collapse the tools grid
|
||||||
|
*/
|
||||||
|
collapse() {
|
||||||
|
this.toolsGrid.classList.add(CLASSES.COLLAPSED);
|
||||||
|
this.expandButton.setAttribute(DATA_ATTRS.EXPANDED, 'false');
|
||||||
|
this.updateExpandButtonText();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update expand button text based on state
|
||||||
|
*/
|
||||||
|
updateExpandButtonText() {
|
||||||
|
const expandText = this.expandButton?.querySelector('.expand-text');
|
||||||
|
if (!expandText) return;
|
||||||
|
|
||||||
|
const isExpanded = this.expandButton.getAttribute(DATA_ATTRS.EXPANDED) === 'true';
|
||||||
|
expandText.textContent = getTranslation(isExpanded ? 'hideDetails' : 'expandDetails');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Login Modal Component
|
||||||
|
const LoginModal = {
|
||||||
|
modalElement: null,
|
||||||
|
modalStyles: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show login modal
|
||||||
|
*/
|
||||||
|
show() {
|
||||||
|
this.createModal();
|
||||||
|
this.attachEventListeners();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create modal HTML and styles
|
||||||
|
*/
|
||||||
|
createModal() {
|
||||||
|
// Create modal element
|
||||||
|
this.modalElement = document.createElement('div');
|
||||||
|
this.modalElement.className = 'login-modal';
|
||||||
|
this.modalElement.innerHTML = this.getModalHTML();
|
||||||
|
document.body.appendChild(this.modalElement);
|
||||||
|
|
||||||
|
// Add modal styles if not already added
|
||||||
|
if (!this.modalStyles) {
|
||||||
|
this.addModalStyles();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get modal HTML content
|
||||||
|
* @returns {string} Modal HTML
|
||||||
|
*/
|
||||||
|
getModalHTML() {
|
||||||
|
const t = getTranslation;
|
||||||
|
return `
|
||||||
|
<div class="modal-content">
|
||||||
|
<button class="modal-close">×</button>
|
||||||
|
<div class="modal-header">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="lock-icon">
|
||||||
|
<rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M7 11V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V11" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="16" r="1" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
<h3>${t('authRequired')}</h3>
|
||||||
|
</div>
|
||||||
|
<p>${t('authDescription')}</p>
|
||||||
|
<form id="loginForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="auth-password">${t('accessCode')}</label>
|
||||||
|
<input type="password" id="auth-password" placeholder="${t('accessCodePlaceholder')}" required autofocus>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="primary-button">${t('grantAccess')}</button>
|
||||||
|
</form>
|
||||||
|
<p class="auth-note">${t('noAccess')} <a href="mailto:info@aegis-sight.de">${t('contactUs')}</a></p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add modal styles to document
|
||||||
|
*/
|
||||||
|
addModalStyles() {
|
||||||
|
this.modalStyles = document.createElement('style');
|
||||||
|
this.modalStyles.textContent = `
|
||||||
|
.login-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(10, 24, 50, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10000;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
background: #0A1832;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2.5rem;
|
||||||
|
max-width: 400px;
|
||||||
|
width: 90%;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid rgba(200, 168, 81, 0.3);
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.modal-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.modal-header .lock-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
color: #C8A851;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.modal-close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.modal-content h3 {
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.modal-content p {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.modal-content .form-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.modal-content label {
|
||||||
|
display: block;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.modal-content input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.modal-content input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #C8A851;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
.modal-content input::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
.modal-content .primary-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem;
|
||||||
|
background: #C8A851;
|
||||||
|
color: #0A1832;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.modal-content .primary-button:hover {
|
||||||
|
background: #D4B96A;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(200, 168, 81, 0.4);
|
||||||
|
}
|
||||||
|
.auth-note {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
.auth-note a {
|
||||||
|
color: #C8A851;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.auth-note a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(this.modalStyles);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Attach event listeners to modal
|
||||||
|
*/
|
||||||
|
attachEventListeners() {
|
||||||
|
// Close button
|
||||||
|
const closeBtn = this.modalElement.querySelector('.modal-close');
|
||||||
|
closeBtn.addEventListener('click', () => this.close());
|
||||||
|
|
||||||
|
// Form submission
|
||||||
|
const form = this.modalElement.querySelector('#loginForm');
|
||||||
|
form.addEventListener('submit', (e) => this.handleSubmit(e));
|
||||||
|
|
||||||
|
// Click outside to close
|
||||||
|
this.modalElement.addEventListener('click', (e) => {
|
||||||
|
if (e.target === this.modalElement) {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle form submission
|
||||||
|
* @param {Event} e - Submit event
|
||||||
|
*/
|
||||||
|
async handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const password = document.getElementById('auth-password').value;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Validate token via Insights API
|
||||||
|
const response = await fetch('/insights/api/validate-token', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ token: password })
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.valid) {
|
||||||
|
sessionStorage.setItem(CONFIG.AUTH.SESSION_KEY, 'true');
|
||||||
|
this.close();
|
||||||
|
window.location.href = CONFIG.AUTH.REDIRECT_PAGE;
|
||||||
|
} else {
|
||||||
|
alert(getTranslation('wrongCode'));
|
||||||
|
document.getElementById('auth-password').value = '';
|
||||||
|
document.getElementById('auth-password').focus();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Token validation error:', error);
|
||||||
|
alert(getTranslation('wrongCode'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Close and remove modal
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
if (this.modalElement) {
|
||||||
|
this.modalElement.remove();
|
||||||
|
this.modalElement = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Contact Form Component
|
||||||
|
const ContactForm = {
|
||||||
|
form: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize contact form
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
this.form = document.querySelector(SELECTORS.CONTACT_FORM);
|
||||||
|
if (!this.form) return;
|
||||||
|
|
||||||
|
this.form.addEventListener('submit', (e) => this.handleSubmit(e));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle form submission
|
||||||
|
* @param {Event} e - Submit event
|
||||||
|
*/
|
||||||
|
handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get form data
|
||||||
|
const formData = new FormData(this.form);
|
||||||
|
const data = Object.fromEntries(formData.entries());
|
||||||
|
|
||||||
|
// In production, this would send data to server
|
||||||
|
console.log('Form submission:', data);
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
alert(getTranslation('contactFormSuccess'));
|
||||||
|
this.form.reset();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Demo Request Handler
|
||||||
|
const DemoRequest = {
|
||||||
|
/**
|
||||||
|
* Initialize demo request buttons
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
document.querySelectorAll('.primary-button, .secondary-button, .cta-button').forEach(button => {
|
||||||
|
if (button.textContent.toLowerCase().includes('demo')) {
|
||||||
|
button.addEventListener('click', (e) => this.handleDemoRequest(e));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle demo request
|
||||||
|
* @param {Event} e - Click event
|
||||||
|
*/
|
||||||
|
handleDemoRequest(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
alert(getTranslation('demoRequestAlert'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize all components
|
||||||
|
const Components = {
|
||||||
|
/**
|
||||||
|
* Initialize all UI components
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
LanguageToggle.init();
|
||||||
|
Navigation.init();
|
||||||
|
AboutTabs.init();
|
||||||
|
ProductShowcase.init();
|
||||||
|
ContactForm.init();
|
||||||
|
DemoRequest.init();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Make showLoginModal globally available for onclick attribute
|
||||||
|
window.showLoginModal = function() {
|
||||||
|
LoginModal.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Make closeLoginModal globally available for onclick attribute
|
||||||
|
window.closeLoginModal = function() {
|
||||||
|
LoginModal.close();
|
||||||
|
};
|
||||||
145
js/config.js
Normale Datei
145
js/config.js
Normale Datei
@@ -0,0 +1,145 @@
|
|||||||
|
/**
|
||||||
|
* Central configuration file for AegisSight website
|
||||||
|
* Contains all constants, settings and selectors
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Application Configuration
|
||||||
|
const CONFIG = {
|
||||||
|
// Animation Settings
|
||||||
|
ANIMATION: {
|
||||||
|
PARTICLE_COUNT: 100,
|
||||||
|
PARTICLE_SPEED: 3,
|
||||||
|
PARTICLE_SIZE_MIN: 1,
|
||||||
|
PARTICLE_SIZE_MAX: 3,
|
||||||
|
CONNECTION_DISTANCE: 100,
|
||||||
|
COUNTER_SPEED: 200,
|
||||||
|
SCROLL_THRESHOLD: 50,
|
||||||
|
FADE_DURATION: 500,
|
||||||
|
GLITCH_ITERATIONS: 5,
|
||||||
|
GLITCH_INTERVAL: 50
|
||||||
|
},
|
||||||
|
|
||||||
|
// Hero Video Settings
|
||||||
|
HERO_VIDEOS: {
|
||||||
|
ROTATION_INTERVAL: 12000, // 12 seconds per video (slower like Palantir)
|
||||||
|
FADE_DURATION: 3000, // 3 second fade transition (much slower)
|
||||||
|
VIDEO_SOURCES: [
|
||||||
|
'assets/videos/hero-data-flow.mp4',
|
||||||
|
'assets/videos/hero-network-viz.mp4',
|
||||||
|
'assets/videos/hero-code-abstract.mp4'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Language Settings
|
||||||
|
I18N: {
|
||||||
|
DEFAULT_LANGUAGE: 'de',
|
||||||
|
SUPPORTED_LANGUAGES: ['de', 'en'],
|
||||||
|
STORAGE_KEY: 'aegissight_language'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Intersection Observer Settings
|
||||||
|
OBSERVER: {
|
||||||
|
THRESHOLD: 0.3,
|
||||||
|
ROOT_MARGIN: '0px'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Authentication Settings
|
||||||
|
AUTH: {
|
||||||
|
SESSION_KEY: 'accountForgerAuth',
|
||||||
|
REDIRECT_PAGE: 'accountforger-video.html'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Timeouts and Intervals
|
||||||
|
TIMING: {
|
||||||
|
SCROLL_HIDE_DELAY: 500,
|
||||||
|
COUNTER_UPDATE_INTERVAL: 10,
|
||||||
|
MAP_POINT_SPAWN_INTERVAL: 5000,
|
||||||
|
RESPONSE_TIMER_UPDATE: 2000,
|
||||||
|
LIVE_COUNTER_UPDATE: 3000
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// DOM Selectors
|
||||||
|
const SELECTORS = {
|
||||||
|
// Navigation
|
||||||
|
NAVBAR: '.navbar',
|
||||||
|
NAV_MENU: '.nav-menu',
|
||||||
|
LANG_TOGGLE: '.lang-toggle',
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
HERO: '.hero',
|
||||||
|
HERO_CONTENT: '.hero-content',
|
||||||
|
HERO_VIDEO: '.hero-video',
|
||||||
|
PARTICLE_CANVAS: '#particleCanvas',
|
||||||
|
SCROLL_INDICATOR: '.scroll-indicator',
|
||||||
|
|
||||||
|
|
||||||
|
// About Section
|
||||||
|
ABOUT_TABS: '.about-tab',
|
||||||
|
ABOUT_PANELS: '.about-panel',
|
||||||
|
|
||||||
|
// Products Section
|
||||||
|
EXPAND_BUTTON: '.expand-button',
|
||||||
|
TOOLS_GRID: '.tools-grid',
|
||||||
|
TOOL_CARDS: '.tool-card',
|
||||||
|
|
||||||
|
// Modals
|
||||||
|
LOGIN_MODAL: '.login-modal',
|
||||||
|
MODAL_CLOSE: '.modal-close',
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
CONTACT_FORM: '#contactForm',
|
||||||
|
LOGIN_FORM: '#loginForm',
|
||||||
|
|
||||||
|
// Animation Elements
|
||||||
|
INTERACTIVE_ICON: '#interactiveIcon',
|
||||||
|
NEURAL_CANVAS: '#neuralCanvas',
|
||||||
|
DATA_PARTICLES: '#dataParticles',
|
||||||
|
LIVE_COUNTER: '#liveCounter',
|
||||||
|
RESPONSE_TIMER: '#responseTimer',
|
||||||
|
MAP_POINTS: '#mapPoints',
|
||||||
|
|
||||||
|
// Generic
|
||||||
|
TRANSLATABLE: '[data-translate]',
|
||||||
|
SMOOTH_LINKS: 'a[href^="#"]',
|
||||||
|
SKIP_NAV: '.skip-nav'
|
||||||
|
};
|
||||||
|
|
||||||
|
// CSS Classes
|
||||||
|
const CLASSES = {
|
||||||
|
ACTIVE: 'active',
|
||||||
|
SCROLLED: 'scrolled',
|
||||||
|
COLLAPSED: 'collapsed',
|
||||||
|
VISIBLE: 'visible',
|
||||||
|
LOADED: 'loaded',
|
||||||
|
EXPANDED: 'expanded',
|
||||||
|
HIDDEN: 'hidden',
|
||||||
|
|
||||||
|
// Animation Classes
|
||||||
|
FADE_IN: 'fade-in',
|
||||||
|
FADE_OUT: 'fade-out',
|
||||||
|
SLIDE_UP: 'slide-up',
|
||||||
|
SLIDE_DOWN: 'slide-down',
|
||||||
|
|
||||||
|
// Component Classes
|
||||||
|
PARTICLE: 'particle',
|
||||||
|
DATA_PARTICLE: 'data-particle',
|
||||||
|
MAP_POINT: 'map-point',
|
||||||
|
NODE: 'node',
|
||||||
|
WIDGET: 'widget',
|
||||||
|
TAB: 'tab',
|
||||||
|
PANEL: 'panel'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Data Attributes
|
||||||
|
const DATA_ATTRS = {
|
||||||
|
TRANSLATE: 'data-translate',
|
||||||
|
TAB: 'data-tab',
|
||||||
|
EXPANDED: 'data-expanded',
|
||||||
|
LANG: 'data-lang',
|
||||||
|
TARGET: 'data-target',
|
||||||
|
TOOL: 'data-tool'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Export for use in other modules (if using module system)
|
||||||
|
// For now, these are global constants available to all scripts
|
||||||
209
js/hero-videos.js
Normale Datei
209
js/hero-videos.js
Normale Datei
@@ -0,0 +1,209 @@
|
|||||||
|
/**
|
||||||
|
* Hero Video Rotation System
|
||||||
|
* Manages rotating background videos in hero section
|
||||||
|
*/
|
||||||
|
|
||||||
|
const HeroVideoRotation = {
|
||||||
|
videos: [],
|
||||||
|
currentIndex: 0,
|
||||||
|
rotationInterval: null,
|
||||||
|
isTransitioning: false,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the video rotation system
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
// Get all video elements
|
||||||
|
this.videos = document.querySelectorAll('.hero-video');
|
||||||
|
|
||||||
|
if (!this.videos.length) return;
|
||||||
|
|
||||||
|
// Setup event listeners
|
||||||
|
this.setupEventListeners();
|
||||||
|
|
||||||
|
// Start rotation
|
||||||
|
this.startRotation();
|
||||||
|
|
||||||
|
// Ensure first video is playing
|
||||||
|
this.playVideo(0);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup event listeners for videos
|
||||||
|
*/
|
||||||
|
setupEventListeners() {
|
||||||
|
// Indicators removed - no click handlers needed
|
||||||
|
|
||||||
|
// Pause rotation on hover (optional)
|
||||||
|
const heroSection = document.querySelector('.hero');
|
||||||
|
if (heroSection) {
|
||||||
|
heroSection.addEventListener('mouseenter', () => {
|
||||||
|
// Optional: pause rotation on hover
|
||||||
|
// this.stopRotation();
|
||||||
|
});
|
||||||
|
|
||||||
|
heroSection.addEventListener('mouseleave', () => {
|
||||||
|
// Optional: resume rotation
|
||||||
|
// this.startRotation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle video load errors gracefully
|
||||||
|
this.videos.forEach((video, index) => {
|
||||||
|
video.addEventListener('error', () => {
|
||||||
|
console.warn(`Video ${index} failed to load, skipping...`);
|
||||||
|
// If current video fails, move to next
|
||||||
|
if (index === this.currentIndex) {
|
||||||
|
this.nextVideo();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ensure videos are ready to play
|
||||||
|
video.addEventListener('loadeddata', () => {
|
||||||
|
console.log(`Video ${index} loaded successfully`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start automatic rotation
|
||||||
|
*/
|
||||||
|
startRotation() {
|
||||||
|
// Clear any existing interval
|
||||||
|
this.stopRotation();
|
||||||
|
|
||||||
|
// Set new interval
|
||||||
|
this.rotationInterval = setInterval(() => {
|
||||||
|
this.nextVideo();
|
||||||
|
}, CONFIG.HERO_VIDEOS.ROTATION_INTERVAL);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stop automatic rotation
|
||||||
|
*/
|
||||||
|
stopRotation() {
|
||||||
|
if (this.rotationInterval) {
|
||||||
|
clearInterval(this.rotationInterval);
|
||||||
|
this.rotationInterval = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch to next video
|
||||||
|
*/
|
||||||
|
nextVideo() {
|
||||||
|
const nextIndex = (this.currentIndex + 1) % this.videos.length;
|
||||||
|
this.switchToVideo(nextIndex);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch to previous video
|
||||||
|
*/
|
||||||
|
previousVideo() {
|
||||||
|
const prevIndex = (this.currentIndex - 1 + this.videos.length) % this.videos.length;
|
||||||
|
this.switchToVideo(prevIndex);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch to specific video by index
|
||||||
|
* @param {number} index - Video index to switch to
|
||||||
|
*/
|
||||||
|
switchToVideo(index) {
|
||||||
|
if (this.isTransitioning || index === this.currentIndex) return;
|
||||||
|
|
||||||
|
this.isTransitioning = true;
|
||||||
|
|
||||||
|
const currentVideo = this.videos[this.currentIndex];
|
||||||
|
const nextVideo = this.videos[index];
|
||||||
|
|
||||||
|
// Indicators removed - no update needed
|
||||||
|
|
||||||
|
// Prepare next video
|
||||||
|
this.prepareVideo(nextVideo);
|
||||||
|
|
||||||
|
// Fade out current video
|
||||||
|
currentVideo.classList.add('fading-out');
|
||||||
|
|
||||||
|
// After half the fade duration, start fading in the next video
|
||||||
|
setTimeout(() => {
|
||||||
|
nextVideo.classList.add('active');
|
||||||
|
nextVideo.classList.remove('fading-out');
|
||||||
|
|
||||||
|
// Play next video
|
||||||
|
this.playVideo(index);
|
||||||
|
}, CONFIG.HERO_VIDEOS.FADE_DURATION / 2);
|
||||||
|
|
||||||
|
// Complete transition
|
||||||
|
setTimeout(() => {
|
||||||
|
currentVideo.classList.remove('active', 'fading-out');
|
||||||
|
this.currentIndex = index;
|
||||||
|
this.isTransitioning = false;
|
||||||
|
}, CONFIG.HERO_VIDEOS.FADE_DURATION);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepare video for playback
|
||||||
|
* @param {HTMLVideoElement} video - Video element to prepare
|
||||||
|
*/
|
||||||
|
prepareVideo(video) {
|
||||||
|
// Reset video to beginning
|
||||||
|
video.currentTime = 0;
|
||||||
|
|
||||||
|
// Ensure video is ready to play
|
||||||
|
const playPromise = video.play();
|
||||||
|
if (playPromise !== undefined) {
|
||||||
|
playPromise.catch(error => {
|
||||||
|
console.warn('Video autoplay was prevented:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Play specific video
|
||||||
|
* @param {number} index - Index of video to play
|
||||||
|
*/
|
||||||
|
playVideo(index) {
|
||||||
|
const video = this.videos[index];
|
||||||
|
if (video) {
|
||||||
|
const playPromise = video.play();
|
||||||
|
if (playPromise !== undefined) {
|
||||||
|
playPromise.catch(error => {
|
||||||
|
console.warn(`Could not play video ${index}:`, error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pause all videos
|
||||||
|
*/
|
||||||
|
pauseAllVideos() {
|
||||||
|
this.videos.forEach(video => {
|
||||||
|
video.pause();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle page visibility change (pause when tab is not visible)
|
||||||
|
*/
|
||||||
|
handleVisibilityChange() {
|
||||||
|
if (document.hidden) {
|
||||||
|
this.stopRotation();
|
||||||
|
this.pauseAllVideos();
|
||||||
|
} else {
|
||||||
|
this.playVideo(this.currentIndex);
|
||||||
|
this.startRotation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
HeroVideoRotation.init();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle page visibility API
|
||||||
|
document.addEventListener('visibilitychange', () => {
|
||||||
|
HeroVideoRotation.handleVisibilityChange();
|
||||||
|
});
|
||||||
54
js/legal-pages.js
Normale Datei
54
js/legal-pages.js
Normale Datei
@@ -0,0 +1,54 @@
|
|||||||
|
/**
|
||||||
|
* Minimal JavaScript for legal pages (Impressum & Datenschutz)
|
||||||
|
* Only includes necessary functionality for language switching
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Set current year in footer
|
||||||
|
function setCurrentYear() {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
const yearElements = document.querySelectorAll('.current-year');
|
||||||
|
yearElements.forEach(element => {
|
||||||
|
element.textContent = currentYear;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple language toggle for legal pages
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Set current year immediately
|
||||||
|
setCurrentYear();
|
||||||
|
|
||||||
|
// Get the language toggle button
|
||||||
|
const langToggle = document.querySelector('.lang-toggle');
|
||||||
|
|
||||||
|
if (langToggle) {
|
||||||
|
langToggle.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get current language from button
|
||||||
|
const currentLang = this.getAttribute('data-lang') || 'de';
|
||||||
|
const newLang = currentLang === 'de' ? 'en' : 'de';
|
||||||
|
|
||||||
|
// Store language preference
|
||||||
|
if (typeof(Storage) !== 'undefined') {
|
||||||
|
localStorage.setItem('aegissight_language', newLang);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get current page name
|
||||||
|
const currentPage = window.location.pathname.split('/').pop();
|
||||||
|
|
||||||
|
// Determine redirect URL
|
||||||
|
let redirectUrl = '';
|
||||||
|
|
||||||
|
if (currentPage === 'impressum.html' || currentPage === 'impressum-en.html') {
|
||||||
|
redirectUrl = newLang === 'en' ? 'impressum-en.html' : 'impressum.html';
|
||||||
|
} else if (currentPage === 'datenschutz.html' || currentPage === 'datenschutz-en.html') {
|
||||||
|
redirectUrl = newLang === 'en' ? 'datenschutz-en.html' : 'datenschutz.html';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to the appropriate version
|
||||||
|
if (redirectUrl) {
|
||||||
|
window.location.href = redirectUrl;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
305
js/main.js
Normale Datei
305
js/main.js
Normale Datei
@@ -0,0 +1,305 @@
|
|||||||
|
/**
|
||||||
|
* Main application entry point for AegisSight website
|
||||||
|
* Initializes all modules and coordinates application startup
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle tools grid visibility
|
||||||
|
*/
|
||||||
|
function toggleTools(button) {
|
||||||
|
// Find the tools grid within the same product card
|
||||||
|
const productCard = button.closest('.product-card');
|
||||||
|
const toolsGrid = productCard.querySelector('.tools-grid');
|
||||||
|
|
||||||
|
if (toolsGrid) {
|
||||||
|
const isExpanded = toolsGrid.classList.contains('expanded');
|
||||||
|
const currentLang = getCurrentLanguage ? getCurrentLanguage() : 'de';
|
||||||
|
|
||||||
|
if (isExpanded) {
|
||||||
|
toolsGrid.classList.remove('expanded');
|
||||||
|
toolsGrid.classList.add('collapsed');
|
||||||
|
button.setAttribute('data-expanded', 'false');
|
||||||
|
button.querySelector('span').textContent = currentLang === 'de' ? 'Details anzeigen' : 'Show Details';
|
||||||
|
} else {
|
||||||
|
// Force browser reflow before adding expanded class
|
||||||
|
toolsGrid.style.display = 'grid';
|
||||||
|
void toolsGrid.offsetHeight; // Trigger reflow
|
||||||
|
|
||||||
|
toolsGrid.classList.remove('collapsed');
|
||||||
|
toolsGrid.classList.add('expanded');
|
||||||
|
button.setAttribute('data-expanded', 'true');
|
||||||
|
button.querySelector('span').textContent = currentLang === 'de' ? 'Details verbergen' : 'Hide Details';
|
||||||
|
|
||||||
|
// Ensure all tool cards are visible
|
||||||
|
setTimeout(() => {
|
||||||
|
const toolCards = toolsGrid.querySelectorAll('.tool-card');
|
||||||
|
toolCards.forEach((card, index) => {
|
||||||
|
card.style.opacity = '1';
|
||||||
|
card.style.transform = 'translateY(0)';
|
||||||
|
});
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Application initialization
|
||||||
|
*/
|
||||||
|
const App = {
|
||||||
|
/**
|
||||||
|
* Initialize the entire application
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
// Check DOM ready state
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => this.start());
|
||||||
|
} else {
|
||||||
|
// DOM is already ready
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start the application after DOM is ready
|
||||||
|
*/
|
||||||
|
start() {
|
||||||
|
console.log('AegisSight Website Initializing...');
|
||||||
|
|
||||||
|
// Initialize modules in correct order
|
||||||
|
try {
|
||||||
|
// 1. Initialize translations first (includes year replacement)
|
||||||
|
initTranslations();
|
||||||
|
console.log('✓ Translations initialized');
|
||||||
|
|
||||||
|
// 2. Initialize UI components
|
||||||
|
Components.init();
|
||||||
|
console.log('✓ Components initialized');
|
||||||
|
|
||||||
|
// 3. Initialize animations
|
||||||
|
Animations.init();
|
||||||
|
console.log('✓ Animations initialized');
|
||||||
|
|
||||||
|
// 4. Setup error handling
|
||||||
|
this.setupErrorHandling();
|
||||||
|
|
||||||
|
// 5. Setup performance monitoring
|
||||||
|
this.setupPerformanceMonitoring();
|
||||||
|
|
||||||
|
console.log('AegisSight Website Ready!');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to initialize application:', error);
|
||||||
|
this.handleInitError(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup global error handling
|
||||||
|
*/
|
||||||
|
setupErrorHandling() {
|
||||||
|
window.addEventListener('error', (event) => {
|
||||||
|
console.error('Global error:', event.error);
|
||||||
|
// In production, this would send errors to monitoring service
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('unhandledrejection', (event) => {
|
||||||
|
console.error('Unhandled promise rejection:', event.reason);
|
||||||
|
// In production, this would send errors to monitoring service
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup performance monitoring
|
||||||
|
*/
|
||||||
|
setupPerformanceMonitoring() {
|
||||||
|
// Monitor page load performance
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
if (window.performance && window.performance.timing) {
|
||||||
|
const timing = window.performance.timing;
|
||||||
|
const loadTime = timing.loadEventEnd - timing.navigationStart;
|
||||||
|
console.log(`Page load time: ${loadTime}ms`);
|
||||||
|
|
||||||
|
// Log other performance metrics
|
||||||
|
const metrics = {
|
||||||
|
domContentLoaded: timing.domContentLoadedEventEnd - timing.navigationStart,
|
||||||
|
domComplete: timing.domComplete - timing.navigationStart,
|
||||||
|
firstPaint: this.getFirstPaintTime()
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Performance metrics:', metrics);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set current year in footer and update translations dynamically
|
||||||
|
*/
|
||||||
|
setCurrentYear() {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
|
// Set current year in main footer span element
|
||||||
|
const yearElement = document.getElementById('currentYear');
|
||||||
|
if (yearElement) {
|
||||||
|
yearElement.textContent = currentYear;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set current year in legal pages footer spans
|
||||||
|
const legalYearElements = document.querySelectorAll('.current-year');
|
||||||
|
legalYearElements.forEach(element => {
|
||||||
|
element.textContent = currentYear;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update copyright translation with current year
|
||||||
|
if (window.translations) {
|
||||||
|
Object.keys(window.translations).forEach(lang => {
|
||||||
|
if (window.translations[lang].copyright) {
|
||||||
|
window.translations[lang].copyright = window.translations[lang].copyright.replace('{year}', currentYear);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get first paint time if available
|
||||||
|
* @returns {number|null} First paint time in milliseconds
|
||||||
|
*/
|
||||||
|
getFirstPaintTime() {
|
||||||
|
if (window.performance && window.performance.getEntriesByType) {
|
||||||
|
const paintEntries = window.performance.getEntriesByType('paint');
|
||||||
|
const firstPaint = paintEntries.find(entry => entry.name === 'first-paint');
|
||||||
|
return firstPaint ? Math.round(firstPaint.startTime) : null;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle initialization errors
|
||||||
|
* @param {Error} error - The error that occurred
|
||||||
|
*/
|
||||||
|
handleInitError(error) {
|
||||||
|
// Create a fallback error message for users
|
||||||
|
const errorContainer = document.createElement('div');
|
||||||
|
errorContainer.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background: #ff4444;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
z-index: 10000;
|
||||||
|
max-width: 300px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||||
|
`;
|
||||||
|
errorContainer.textContent = 'Ein Fehler ist aufgetreten. Bitte laden Sie die Seite neu.';
|
||||||
|
document.body.appendChild(errorContainer);
|
||||||
|
|
||||||
|
// Auto-remove after 5 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
errorContainer.remove();
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Utility functions
|
||||||
|
*/
|
||||||
|
const Utils = {
|
||||||
|
/**
|
||||||
|
* Debounce function to limit function calls
|
||||||
|
* @param {Function} func - Function to debounce
|
||||||
|
* @param {number} wait - Wait time in milliseconds
|
||||||
|
* @returns {Function} Debounced function
|
||||||
|
*/
|
||||||
|
debounce(func, wait) {
|
||||||
|
let timeout;
|
||||||
|
return function executedFunction(...args) {
|
||||||
|
const later = () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
func(...args);
|
||||||
|
};
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(later, wait);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Throttle function to limit function calls
|
||||||
|
* @param {Function} func - Function to throttle
|
||||||
|
* @param {number} limit - Time limit in milliseconds
|
||||||
|
* @returns {Function} Throttled function
|
||||||
|
*/
|
||||||
|
throttle(func, limit) {
|
||||||
|
let inThrottle;
|
||||||
|
return function(...args) {
|
||||||
|
if (!inThrottle) {
|
||||||
|
func.apply(this, args);
|
||||||
|
inThrottle = true;
|
||||||
|
setTimeout(() => inThrottle = false, limit);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if element is in viewport
|
||||||
|
* @param {HTMLElement} element - Element to check
|
||||||
|
* @returns {boolean} True if element is in viewport
|
||||||
|
*/
|
||||||
|
isInViewport(element) {
|
||||||
|
const rect = element.getBoundingClientRect();
|
||||||
|
return (
|
||||||
|
rect.top >= 0 &&
|
||||||
|
rect.left >= 0 &&
|
||||||
|
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
||||||
|
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load script dynamically
|
||||||
|
* @param {string} src - Script source URL
|
||||||
|
* @returns {Promise} Promise that resolves when script is loaded
|
||||||
|
*/
|
||||||
|
loadScript(src) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = src;
|
||||||
|
script.onload = resolve;
|
||||||
|
script.onerror = reject;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get cookie value by name
|
||||||
|
* @param {string} name - Cookie name
|
||||||
|
* @returns {string|null} Cookie value or null
|
||||||
|
*/
|
||||||
|
getCookie(name) {
|
||||||
|
const value = `; ${document.cookie}`;
|
||||||
|
const parts = value.split(`; ${name}=`);
|
||||||
|
if (parts.length === 2) {
|
||||||
|
return parts.pop().split(';').shift();
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set cookie
|
||||||
|
* @param {string} name - Cookie name
|
||||||
|
* @param {string} value - Cookie value
|
||||||
|
* @param {number} days - Days until expiration
|
||||||
|
*/
|
||||||
|
setCookie(name, value, days) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||||
|
const expires = `expires=${date.toUTCString()}`;
|
||||||
|
document.cookie = `${name}=${value};${expires};path=/`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Make Utils globally available if needed
|
||||||
|
window.Utils = Utils;
|
||||||
|
|
||||||
|
// Start the application
|
||||||
|
App.init();
|
||||||
196
js/mobile-nav.js
Normale Datei
196
js/mobile-nav.js
Normale Datei
@@ -0,0 +1,196 @@
|
|||||||
|
/**
|
||||||
|
* Mobile Navigation Handler
|
||||||
|
* Clean, accessible mobile navigation implementation
|
||||||
|
*/
|
||||||
|
|
||||||
|
class MobileNavigation {
|
||||||
|
constructor() {
|
||||||
|
this.menuToggle = document.querySelector('.mobile-menu-toggle');
|
||||||
|
this.mobileMenu = document.querySelector('.nav-menu-mobile');
|
||||||
|
this.overlay = document.querySelector('.mobile-menu-overlay');
|
||||||
|
this.menuLinks = document.querySelectorAll('.nav-menu-mobile a');
|
||||||
|
this.closeButton = document.querySelector('.mobile-menu-close');
|
||||||
|
this.isOpen = false;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
if (!this.menuToggle || !this.mobileMenu) return;
|
||||||
|
|
||||||
|
// Toggle button click
|
||||||
|
this.menuToggle.addEventListener('click', () => this.toggleMenu());
|
||||||
|
|
||||||
|
// Close button click
|
||||||
|
if (this.closeButton) {
|
||||||
|
this.closeButton.addEventListener('click', () => this.closeMenu());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Overlay click closes menu
|
||||||
|
this.overlay.addEventListener('click', () => this.closeMenu());
|
||||||
|
|
||||||
|
// Menu links click closes menu
|
||||||
|
this.menuLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', () => this.closeMenu());
|
||||||
|
});
|
||||||
|
|
||||||
|
// ESC key closes menu
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && this.isOpen) {
|
||||||
|
this.closeMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent body scroll when menu is open
|
||||||
|
this.handleBodyScroll();
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleMenu() {
|
||||||
|
this.isOpen ? this.closeMenu() : this.openMenu();
|
||||||
|
}
|
||||||
|
|
||||||
|
openMenu() {
|
||||||
|
this.isOpen = true;
|
||||||
|
this.menuToggle.classList.add('active');
|
||||||
|
this.mobileMenu.classList.add('active');
|
||||||
|
this.overlay.classList.add('active');
|
||||||
|
|
||||||
|
// Update ARIA attributes
|
||||||
|
this.menuToggle.setAttribute('aria-expanded', 'true');
|
||||||
|
this.mobileMenu.setAttribute('aria-hidden', 'false');
|
||||||
|
|
||||||
|
// Prevent body scroll
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
|
// Focus management
|
||||||
|
setTimeout(() => {
|
||||||
|
const firstLink = this.mobileMenu.querySelector('a');
|
||||||
|
if (firstLink) firstLink.focus();
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
closeMenu() {
|
||||||
|
this.isOpen = false;
|
||||||
|
this.menuToggle.classList.remove('active');
|
||||||
|
this.mobileMenu.classList.remove('active');
|
||||||
|
this.overlay.classList.remove('active');
|
||||||
|
|
||||||
|
// Update ARIA attributes
|
||||||
|
this.menuToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
this.mobileMenu.setAttribute('aria-hidden', 'true');
|
||||||
|
|
||||||
|
// Restore body scroll
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
|
||||||
|
// Return focus to toggle button
|
||||||
|
this.menuToggle.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleBodyScroll() {
|
||||||
|
// Save scroll position when menu opens
|
||||||
|
let scrollPosition = 0;
|
||||||
|
|
||||||
|
const observer = new MutationObserver(() => {
|
||||||
|
if (this.isOpen) {
|
||||||
|
scrollPosition = window.pageYOffset;
|
||||||
|
document.body.style.position = 'fixed';
|
||||||
|
document.body.style.top = `-${scrollPosition}px`;
|
||||||
|
document.body.style.width = '100%';
|
||||||
|
} else {
|
||||||
|
document.body.style.position = '';
|
||||||
|
document.body.style.top = '';
|
||||||
|
document.body.style.width = '';
|
||||||
|
window.scrollTo(0, scrollPosition);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(this.mobileMenu, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['class']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll for anchor links
|
||||||
|
class SmoothScroll {
|
||||||
|
constructor() {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', (e) => {
|
||||||
|
const href = anchor.getAttribute('href');
|
||||||
|
if (href === '#') return;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(href);
|
||||||
|
|
||||||
|
if (target) {
|
||||||
|
const offset = 80; // Account for fixed navbar
|
||||||
|
const targetPosition = target.offsetTop - offset;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive image loading
|
||||||
|
class ResponsiveImages {
|
||||||
|
constructor() {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
// Check if user prefers reduced motion
|
||||||
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
|
if (prefersReducedMotion) {
|
||||||
|
// Disable animations
|
||||||
|
document.documentElement.style.setProperty('--animation-duration', '0.01s');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lazy load images on mobile
|
||||||
|
if ('IntersectionObserver' in window && window.innerWidth <= 768) {
|
||||||
|
const images = document.querySelectorAll('img[data-src]');
|
||||||
|
|
||||||
|
const imageObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const img = entry.target;
|
||||||
|
img.src = img.dataset.src;
|
||||||
|
img.removeAttribute('data-src');
|
||||||
|
imageObserver.unobserve(img);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
images.forEach(img => imageObserver.observe(img));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize on DOM load
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
new MobileNavigation();
|
||||||
|
new SmoothScroll();
|
||||||
|
new ResponsiveImages();
|
||||||
|
|
||||||
|
// Hide mobile menu button styles until JS loads
|
||||||
|
document.documentElement.classList.add('js-loaded');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle orientation change
|
||||||
|
window.addEventListener('orientationchange', () => {
|
||||||
|
// Close mobile menu on orientation change
|
||||||
|
const mobileNav = document.querySelector('.nav-menu-mobile');
|
||||||
|
if (mobileNav && mobileNav.classList.contains('active')) {
|
||||||
|
const event = new Event('click');
|
||||||
|
document.querySelector('.mobile-menu-overlay').dispatchEvent(event);
|
||||||
|
}
|
||||||
|
});
|
||||||
130
js/section-transitions.js
Normale Datei
130
js/section-transitions.js
Normale Datei
@@ -0,0 +1,130 @@
|
|||||||
|
/**
|
||||||
|
* Section Transitions & Effects
|
||||||
|
* Modern animations for section dividers
|
||||||
|
*/
|
||||||
|
|
||||||
|
const SectionTransitions = {
|
||||||
|
init() {
|
||||||
|
this.initParticleBridge();
|
||||||
|
this.initScrollReveal();
|
||||||
|
this.initWaveAnimation();
|
||||||
|
this.initParallaxDividers();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Animated particles between sections
|
||||||
|
initParticleBridge() {
|
||||||
|
const bridge = document.getElementById('particleBridge');
|
||||||
|
if (!bridge) return;
|
||||||
|
|
||||||
|
// Create floating particles
|
||||||
|
for (let i = 0; i < 30; i++) {
|
||||||
|
const particle = document.createElement('div');
|
||||||
|
particle.className = 'particle';
|
||||||
|
particle.style.left = Math.random() * 100 + '%';
|
||||||
|
particle.style.animationDelay = Math.random() * 5 + 's';
|
||||||
|
particle.style.animationDuration = (5 + Math.random() * 5) + 's';
|
||||||
|
particle.style.animation = `floatParticle ${5 + Math.random() * 5}s linear infinite`;
|
||||||
|
bridge.appendChild(particle);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Reveal sections on scroll
|
||||||
|
initScrollReveal() {
|
||||||
|
const sections = document.querySelectorAll('.fade-section');
|
||||||
|
|
||||||
|
const revealSection = (entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
|
||||||
|
// Add shimmer effect on reveal
|
||||||
|
const shimmer = document.createElement('div');
|
||||||
|
shimmer.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(15, 114, 181, 0.2), transparent);
|
||||||
|
animation: shimmerPass 1s ease-out forwards;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 100;
|
||||||
|
`;
|
||||||
|
entry.target.style.position = 'relative';
|
||||||
|
entry.target.appendChild(shimmer);
|
||||||
|
|
||||||
|
setTimeout(() => shimmer.remove(), 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(revealSection, {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -100px 0px'
|
||||||
|
});
|
||||||
|
|
||||||
|
sections.forEach(section => observer.observe(section));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Animate wave dividers
|
||||||
|
initWaveAnimation() {
|
||||||
|
const waves = document.querySelectorAll('.wave-divider path');
|
||||||
|
|
||||||
|
waves.forEach(wave => {
|
||||||
|
let time = 0;
|
||||||
|
const animateWave = () => {
|
||||||
|
time += 0.02;
|
||||||
|
const points = [];
|
||||||
|
|
||||||
|
for (let i = 0; i <= 10; i++) {
|
||||||
|
const x = (i / 10) * 1200;
|
||||||
|
const y = Math.sin((i / 10) * Math.PI * 2 + time) * 10 + 56;
|
||||||
|
points.push(`${x},${y}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create smooth wave path
|
||||||
|
const d = `M0,56 Q${points[2]} T${points[4]} T${points[6]} T${points[8]} T1200,56 L1200,0 L0,0 Z`;
|
||||||
|
wave.setAttribute('d', d);
|
||||||
|
|
||||||
|
requestAnimationFrame(animateWave);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Start wave animation
|
||||||
|
// animateWave(); // Commented out for performance, uncomment for wave motion
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// Parallax effect for dividers
|
||||||
|
initParallaxDividers() {
|
||||||
|
const dividers = document.querySelectorAll('.blob-divider, .gradient-divider, .flow-lines');
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const scrolled = window.pageYOffset;
|
||||||
|
|
||||||
|
dividers.forEach(divider => {
|
||||||
|
const speed = divider.dataset.speed || 0.5;
|
||||||
|
const yPos = -(scrolled * speed);
|
||||||
|
divider.style.transform = `translateY(${yPos}px)`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add shimmer animation
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes shimmerPass {
|
||||||
|
to {
|
||||||
|
left: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => SectionTransitions.init());
|
||||||
|
} else {
|
||||||
|
SectionTransitions.init();
|
||||||
|
}
|
||||||
498
js/translations.js
Normale Datei
498
js/translations.js
Normale Datei
@@ -0,0 +1,498 @@
|
|||||||
|
/**
|
||||||
|
* Translation system for AegisSight website
|
||||||
|
* Supports German (de) and English (en)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Translation strings
|
||||||
|
const translations = {
|
||||||
|
de: {
|
||||||
|
// Page meta
|
||||||
|
pageTitle: 'AegisSight - Sicherheit Made in Germany',
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
skipNav: 'Zum Hauptinhalt springen',
|
||||||
|
navHome: 'Startseite',
|
||||||
|
navAbout: 'Über uns',
|
||||||
|
navProducts: 'Lösungen',
|
||||||
|
navContact: 'Kontakt',
|
||||||
|
navLagebild: 'Lagebild',
|
||||||
|
langSwitch: 'DE | EN',
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
heroTitle: 'SICHERHEIT MADE IN GERMANY',
|
||||||
|
heroSubtitle: 'Spezialist für hochsichere, maßgeschneiderte IT-Lösungen für Behörden',
|
||||||
|
|
||||||
|
// Trust Indicators
|
||||||
|
|
||||||
|
// Scroll Indicator
|
||||||
|
scrollToExplore: 'Nach unten scrollen',
|
||||||
|
|
||||||
|
// About Section
|
||||||
|
aboutTitle: 'ÜBER UNS',
|
||||||
|
aboutSubtitle: 'Ihr Partner für sichere Behördensoftware',
|
||||||
|
|
||||||
|
// About Tabs
|
||||||
|
tabWhoWeAre: 'Unternehmen',
|
||||||
|
tabMission: 'Mission & Werte',
|
||||||
|
tabCompetencies: 'Kernkompetenzen',
|
||||||
|
tabWhyUs: 'Unser Versprechen',
|
||||||
|
|
||||||
|
// Who We Are
|
||||||
|
whoWeAreTitle: 'Unternehmen',
|
||||||
|
companyCardTitle1: 'Spezialist für Behördensoftware',
|
||||||
|
companyCardTitle2: 'Unser Ansatz',
|
||||||
|
whoWeArePara1: 'AegisSight UG ist Ihr <strong>Spezialist für hochsichere, maßgeschneiderte IT-Lösungen</strong> aus Nordrhein-Westfalen. Wir entwickeln innovative Software speziell für staatliche Sicherheits- und Ermittlungsbehörden.',
|
||||||
|
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.',
|
||||||
|
locationBadge: 'Nordrhein-Westfalen, Deutschland',
|
||||||
|
nrwLabel: 'Nordrhein-Westfalen',
|
||||||
|
headquartersLabel: 'Unser Standort: Langenfeld',
|
||||||
|
|
||||||
|
// Mission & Values
|
||||||
|
missionTitle: 'Unsere Mission',
|
||||||
|
missionStatement: 'Wir schaffen <strong>effiziente, sichere und datenschutzkonforme Lösungen</strong> für moderne Strafverfolgung und Sicherheitsbehörden.',
|
||||||
|
valueIntegrityTitle: 'Integrität',
|
||||||
|
valueIntegrityDesc: 'Höchste ethische Standards in allem was wir tun',
|
||||||
|
valueTransparencyTitle: 'Transparenz',
|
||||||
|
valueTransparencyDesc: 'Offene Kommunikation und nachvollziehbare Prozesse',
|
||||||
|
valueDemocracyTitle: 'Demokratische Prinzipien',
|
||||||
|
valueDemocracyDesc: 'Kooperation nur mit Behörden im Einklang mit der freiheitlich demokratischen Grundordnung',
|
||||||
|
principleNote: '<strong>Unser Ziel:</strong> Technologie, die Recht und Sicherheit stärkt und die freiheitlich demokratische Grundordnung schützt.',
|
||||||
|
|
||||||
|
// Competencies
|
||||||
|
competenciesTitle: 'Unsere Kernkompetenzen',
|
||||||
|
comp1Title: 'Behördenspezifische Software',
|
||||||
|
comp1Desc: 'Entwicklung mit höchsten Sicherheitsstandards, maßgeschneidert für staatliche Anforderungen',
|
||||||
|
comp2Title: 'Intuitive Bedienkonzepte',
|
||||||
|
comp2Desc: 'Benutzerfreundliche Oberflächen trotz komplexer Funktionen für effizientes Arbeiten',
|
||||||
|
comp3Title: 'Langzeit-Support',
|
||||||
|
comp3Desc: 'Kontinuierliche Sicherheitsupdates und zuverlässige Wartung über den gesamten Lebenszyklus',
|
||||||
|
|
||||||
|
// Why Us
|
||||||
|
whyUsTitle: 'Warum AegisSight UG?',
|
||||||
|
why1Title: 'Enge Zusammenarbeit',
|
||||||
|
why1Desc: 'Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen',
|
||||||
|
why2Title: 'Made in Germany',
|
||||||
|
why2Desc: 'Klare, robuste und sichere Software nach deutschen Qualitätsstandards',
|
||||||
|
why3Title: 'Verlässliche Partnerschaft',
|
||||||
|
why3Desc: 'Basierend auf gemeinsamen Werten und langfristigem Vertrauen',
|
||||||
|
why4Title: 'Nachhaltigkeit',
|
||||||
|
why4Desc: 'Fokus auf Sicherheit, Professionalität & zukunftssichere Lösungen',
|
||||||
|
|
||||||
|
// Products Section
|
||||||
|
productsTitle: 'LÖSUNGEN',
|
||||||
|
productsSubtitle: 'Professionelle Werkzeuge für moderne Ermittlungsarbeit',
|
||||||
|
|
||||||
|
// Professional Toolbox
|
||||||
|
productToolboxTitle: 'Professional Toolbox',
|
||||||
|
productToolboxDesc: 'Eine leistungsstarke Desktop-Anwendung mit fünf essentiellen Tools für behördliche OSINT-Ermittler und Analysten. Modernes Design, intuitive Bedienung, professionelle Funktionen.',
|
||||||
|
expandDetails: 'Details anzeigen',
|
||||||
|
hideDetails: 'Details verbergen',
|
||||||
|
|
||||||
|
// Tools
|
||||||
|
tool1Title: 'Metadata Analyzer',
|
||||||
|
tool1Feature1: 'Extrahiert versteckte Informationen (EXIF, GPS, Erstellungsdaten)',
|
||||||
|
tool1Feature2: 'Forensische Analyse von Dokumenten & Bildern',
|
||||||
|
tool1Feature3: 'Export als JSON',
|
||||||
|
|
||||||
|
tool2Title: 'Screen Recorder',
|
||||||
|
tool2Feature1: 'Bildschirmaufnahme mit Audio (System & Mikrofon)',
|
||||||
|
tool2Feature2: 'Bereichsauswahl oder Vollbild',
|
||||||
|
tool2Feature3: 'Wählbare Qualitätsstufen',
|
||||||
|
|
||||||
|
tool3Title: 'Video Crawler',
|
||||||
|
tool3Feature1: 'Download von Videos aus 1000+ Plattformen',
|
||||||
|
tool3Feature2: 'Automatischer Untertitel-Download',
|
||||||
|
tool3Feature3: 'Qualitätsauswahl',
|
||||||
|
|
||||||
|
tool4Title: 'Website Crawler',
|
||||||
|
tool4Feature1: 'Archiviert Webseiten offline',
|
||||||
|
tool4Feature2: 'Einstellbare Crawling-Tiefe',
|
||||||
|
tool4Feature3: 'Erhält Originalstruktur inkl. CSS, JS & Medien',
|
||||||
|
|
||||||
|
tool5Title: 'Multimedia Converter',
|
||||||
|
tool5Feature1: 'Konvertierung von Bildern, Videos, Audio',
|
||||||
|
tool5Feature2: 'Batch-Verarbeitung',
|
||||||
|
tool5Feature3: 'Drag & Drop Unterstützung',
|
||||||
|
|
||||||
|
// AccountForger
|
||||||
|
productAccountForgerTitle: 'AccountForger',
|
||||||
|
accessRestricted: 'Zugang nur mit Berechtigung',
|
||||||
|
protectedProductDesc: 'Dieses Produkt ist speziell für autorisierte Behörden entwickelt und erfordert eine Authentifizierung.',
|
||||||
|
loginForAccess: 'Anmelden für Zugriff',
|
||||||
|
// OSINT Monitor
|
||||||
|
productOsintMonitorTitle: 'AegisSight Monitor',
|
||||||
|
productOsintMonitorTagline: 'Open Source Intelligence - automatisiert',
|
||||||
|
productOsintMonitorDesc: 'AegisSight Monitor aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen in Echtzeit. Erleben Sie die Plattform live am Beispiel des Iran-Livetickers.',
|
||||||
|
osintMonitorButton: 'Iran-Liveticker öffnen',
|
||||||
|
|
||||||
|
|
||||||
|
// Lagebild Page
|
||||||
|
lagebildPageTitle: 'Lagebild - AegisSight',
|
||||||
|
lagebildTitle: 'LAGEBILD',
|
||||||
|
lagebildLive: 'LIVE-LAGEBILD',
|
||||||
|
lagebildSubtitle: 'Automatisierte Situationsberichte vom AegisSight Monitor',
|
||||||
|
lagebildSelectSnapshot: 'Lagebild vom:',
|
||||||
|
lagebildCurrent: 'Aktuell',
|
||||||
|
lagebildPoweredBy: 'Erstellt durch',
|
||||||
|
lagebildAnalysis: 'Lageanalyse',
|
||||||
|
lagebildSources: 'Quellen',
|
||||||
|
lagebildFactChecks: 'Faktenchecks',
|
||||||
|
lagebildFactChecksDesc: 'Automatisierte Verifizierung durch KI-gestützte Quellenanalyse',
|
||||||
|
lagebildArticles: 'Quellenberichte',
|
||||||
|
lagebildArticlesDesc: 'Automatisch aggregierte Meldungen aus internationalen Quellen',
|
||||||
|
lagebildCtaTitle: 'Interesse an AegisSight Monitor?',
|
||||||
|
lagebildCtaText: 'Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.',
|
||||||
|
lagebildCtaButton: 'Kontakt aufnehmen',
|
||||||
|
// Footer
|
||||||
|
footerCompanyTitle: 'AegisSight UG (haftungsbeschränkt)',
|
||||||
|
footerCompanyAddress1: 'Gladbacher Strasse 3-5',
|
||||||
|
footerCompanyAddress2: '40764 Langenfeld',
|
||||||
|
footerNavTitle: 'Navigation',
|
||||||
|
footerNavHome: 'Startseite',
|
||||||
|
footerNavAbout: 'Über uns',
|
||||||
|
footerNavProducts: 'Lösungen',
|
||||||
|
|
||||||
|
footerLegalTitle: 'Rechtliches',
|
||||||
|
footerImprint: 'Impressum',
|
||||||
|
footerPrivacy: 'Datenschutz',
|
||||||
|
footerCookies: 'Cookie-Einstellungen',
|
||||||
|
|
||||||
|
footerContactTitle: 'Kontakt',
|
||||||
|
copyright: '© {year} AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.',
|
||||||
|
|
||||||
|
// Modal texts
|
||||||
|
authRequired: 'Authentifizierung erforderlich',
|
||||||
|
authDescription: 'Dieser Bereich ist nur für autorisierte Behörden zugänglich.',
|
||||||
|
accessCode: 'Zugangscode',
|
||||||
|
accessCodePlaceholder: 'Bitte Zugangscode eingeben',
|
||||||
|
grantAccess: 'Zugang gewähren',
|
||||||
|
noAccess: 'Noch keinen Zugang?',
|
||||||
|
contactUs: 'Kontaktieren Sie uns',
|
||||||
|
accessGranted: 'Zugang gewährt! AccountForger wird geladen...',
|
||||||
|
wrongCode: 'Falscher Zugangscode. Bitte versuchen Sie es erneut.',
|
||||||
|
demoRequestAlert: 'Demo-Anfrage-Funktion würde hier implementiert werden',
|
||||||
|
contactFormSuccess: 'Vielen Dank für Ihre Nachricht! Wir werden uns schnellstmöglich bei Ihnen melden.'
|
||||||
|
},
|
||||||
|
|
||||||
|
en: {
|
||||||
|
// Page meta
|
||||||
|
pageTitle: 'AegisSight - Sicherheit Made in Germany',
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
skipNav: 'Skip to main content',
|
||||||
|
navHome: 'Home',
|
||||||
|
navAbout: 'About Us',
|
||||||
|
navProducts: 'Solutions',
|
||||||
|
navContact: 'Contact',
|
||||||
|
navLagebild: 'Situation Report',
|
||||||
|
langSwitch: 'EN | DE',
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
heroTitle: 'SICHERHEIT MADE IN GERMANY',
|
||||||
|
heroSubtitle: 'Specialist for highly secure, customized IT solutions for government agencies',
|
||||||
|
|
||||||
|
// Trust Indicators
|
||||||
|
|
||||||
|
// Scroll Indicator
|
||||||
|
scrollToExplore: 'Scroll to Explore',
|
||||||
|
|
||||||
|
// About Section
|
||||||
|
aboutTitle: 'About Us',
|
||||||
|
aboutSubtitle: 'Your Partner for Secure Government Software',
|
||||||
|
|
||||||
|
// About Tabs
|
||||||
|
tabWhoWeAre: 'Company',
|
||||||
|
tabMission: 'Mission & Values',
|
||||||
|
tabCompetencies: 'Core Competencies',
|
||||||
|
tabWhyUs: 'Our Promise',
|
||||||
|
|
||||||
|
// Who We Are
|
||||||
|
whoWeAreTitle: 'Company',
|
||||||
|
companyCardTitle1: 'Government Software Specialist',
|
||||||
|
companyCardTitle2: 'Our Approach',
|
||||||
|
whoWeArePara1: 'AegisSight UG is your <strong>specialist for highly secure, customized IT solutions</strong> from North Rhine-Westphalia. We develop innovative software specifically for government security and law enforcement agencies.',
|
||||||
|
whoWeArePara2: 'Our approach combines cutting-edge technology with a deep understanding of the special requirements of government agencies. The balance between security, efficiency and legally compliant implementation is at the center of our work.',
|
||||||
|
locationBadge: 'North Rhine-Westphalia, Germany',
|
||||||
|
nrwLabel: 'North Rhine-Westphalia',
|
||||||
|
headquartersLabel: 'Our Location: Langenfeld',
|
||||||
|
|
||||||
|
// Mission & Values
|
||||||
|
missionTitle: 'Our Mission',
|
||||||
|
missionStatement: 'We create <strong>efficient, secure and data protection compliant solutions</strong> for modern law enforcement and security agencies.',
|
||||||
|
valueIntegrityTitle: 'Integrity',
|
||||||
|
valueIntegrityDesc: 'Highest ethical standards in everything we do',
|
||||||
|
valueTransparencyTitle: 'Transparency',
|
||||||
|
valueTransparencyDesc: 'Open communication and comprehensible processes',
|
||||||
|
valueDemocracyTitle: 'Democratic Principles',
|
||||||
|
valueDemocracyDesc: 'Cooperation only with agencies in accordance with the liberal democratic basic order',
|
||||||
|
principleNote: '<strong>Our Goal:</strong> Technology that strengthens law and security and protects the liberal democratic basic order.',
|
||||||
|
|
||||||
|
// Competencies
|
||||||
|
competenciesTitle: 'Our Core Competencies',
|
||||||
|
comp1Title: 'Agency-Specific Software',
|
||||||
|
comp1Desc: 'Development with highest security standards, tailored for government requirements',
|
||||||
|
comp2Title: 'Intuitive Operating Concepts',
|
||||||
|
comp2Desc: 'User-friendly interfaces despite complex functions for efficient work',
|
||||||
|
comp3Title: 'Long-term Support',
|
||||||
|
comp3Desc: 'Continuous security updates and reliable maintenance throughout the entire lifecycle',
|
||||||
|
|
||||||
|
// Why Us
|
||||||
|
whyUsTitle: 'Why AegisSight UG?',
|
||||||
|
why1Title: 'Close Collaboration',
|
||||||
|
why1Desc: 'We work hand in hand with our customers for customized solutions',
|
||||||
|
why2Title: 'Made in Germany',
|
||||||
|
why2Desc: 'Clear, robust and secure software according to German quality standards',
|
||||||
|
why3Title: 'Reliable Partnership',
|
||||||
|
why3Desc: 'Based on shared values and long-term trust',
|
||||||
|
why4Title: 'Sustainability',
|
||||||
|
why4Desc: 'Focus on security, professionalism & future-proof solutions',
|
||||||
|
|
||||||
|
// Products Section
|
||||||
|
productsTitle: 'Solutions',
|
||||||
|
productsSubtitle: 'Professional Tools for Modern Investigation Work',
|
||||||
|
|
||||||
|
// Professional Toolbox
|
||||||
|
productToolboxTitle: 'Professional Toolbox',
|
||||||
|
productToolboxDesc: 'A powerful desktop application with five essential tools for government OSINT investigators and analysts. Modern design, intuitive operation, professional functions.',
|
||||||
|
expandDetails: 'Show Details',
|
||||||
|
hideDetails: 'Hide Details',
|
||||||
|
|
||||||
|
// Tools
|
||||||
|
tool1Title: 'Metadata Analyzer',
|
||||||
|
tool1Feature1: 'Extracts hidden information (EXIF, GPS, creation dates)',
|
||||||
|
tool1Feature2: 'Forensic analysis of documents & images',
|
||||||
|
tool1Feature3: 'Export as JSON',
|
||||||
|
|
||||||
|
tool2Title: 'Screen Recorder',
|
||||||
|
tool2Feature1: 'Screen recording with audio (system & microphone)',
|
||||||
|
tool2Feature2: 'Area selection or full screen',
|
||||||
|
tool2Feature3: 'Selectable quality levels',
|
||||||
|
|
||||||
|
tool3Title: 'Video Crawler',
|
||||||
|
tool3Feature1: 'Download videos from 1000+ platforms',
|
||||||
|
tool3Feature2: 'Automatic subtitle download',
|
||||||
|
tool3Feature3: 'Quality selection',
|
||||||
|
|
||||||
|
tool4Title: 'Website Crawler',
|
||||||
|
tool4Feature1: 'Archives websites offline',
|
||||||
|
tool4Feature2: 'Adjustable crawling depth',
|
||||||
|
tool4Feature3: 'Preserves original structure incl. CSS, JS & media',
|
||||||
|
|
||||||
|
tool5Title: 'Multimedia Converter',
|
||||||
|
tool5Feature1: 'Conversion of images, videos, audio',
|
||||||
|
tool5Feature2: 'Batch processing',
|
||||||
|
tool5Feature3: 'Drag & Drop support',
|
||||||
|
|
||||||
|
// AccountForger
|
||||||
|
productAccountForgerTitle: 'AccountForger',
|
||||||
|
accessRestricted: 'Access by authorization only',
|
||||||
|
protectedProductDesc: 'This product is specifically developed for authorized agencies and requires authentication.',
|
||||||
|
loginForAccess: 'Login for Access',
|
||||||
|
// OSINT Monitor
|
||||||
|
productOsintMonitorTitle: 'AegisSight Monitor',
|
||||||
|
productOsintMonitorTagline: 'Open Source Intelligence - Automated',
|
||||||
|
productOsintMonitorDesc: 'AegisSight Monitor aggregates, analyzes and verifies information from publicly available sources in real time. Experience the platform live with the Iran Live Ticker.',
|
||||||
|
osintMonitorButton: 'Open Iran Live Ticker',
|
||||||
|
|
||||||
|
|
||||||
|
// Lagebild Page
|
||||||
|
lagebildPageTitle: 'Situation Report - AegisSight',
|
||||||
|
lagebildTitle: 'SITUATION REPORT',
|
||||||
|
lagebildLive: 'LIVE REPORT',
|
||||||
|
lagebildSubtitle: 'Automated situation reports from AegisSight Monitor',
|
||||||
|
lagebildSelectSnapshot: 'Report from:',
|
||||||
|
lagebildCurrent: 'Current',
|
||||||
|
lagebildPoweredBy: 'Powered by',
|
||||||
|
lagebildAnalysis: 'Situation Analysis',
|
||||||
|
lagebildSources: 'Sources',
|
||||||
|
lagebildFactChecks: 'Fact Checks',
|
||||||
|
lagebildFactChecksDesc: 'Automated verification through AI-powered source analysis',
|
||||||
|
lagebildArticles: 'Source Reports',
|
||||||
|
lagebildArticlesDesc: 'Automatically aggregated reports from international sources',
|
||||||
|
lagebildCtaTitle: 'Interested in AegisSight Monitor?',
|
||||||
|
lagebildCtaText: 'Get real-time situation reports for your organization with AI-powered analysis and fact checking.',
|
||||||
|
lagebildCtaButton: 'Get in touch',
|
||||||
|
// Footer
|
||||||
|
footerCompanyTitle: 'AegisSight UG (haftungsbeschränkt)',
|
||||||
|
footerCompanyAddress1: 'Gladbacher Strasse 3-5',
|
||||||
|
footerCompanyAddress2: '40764 Langenfeld',
|
||||||
|
footerNavTitle: 'Navigation',
|
||||||
|
footerNavHome: 'Home',
|
||||||
|
footerNavAbout: 'About Us',
|
||||||
|
footerNavProducts: 'Solutions',
|
||||||
|
|
||||||
|
footerLegalTitle: 'Legal',
|
||||||
|
footerImprint: 'Imprint',
|
||||||
|
footerPrivacy: 'Privacy Policy',
|
||||||
|
footerCookies: 'Cookie Settings',
|
||||||
|
|
||||||
|
footerContactTitle: 'Contact',
|
||||||
|
copyright: '© {year} AegisSight UG (haftungsbeschränkt). All rights reserved.',
|
||||||
|
|
||||||
|
// Modal texts
|
||||||
|
authRequired: 'Authentication Required',
|
||||||
|
authDescription: 'This area is only accessible to authorized agencies.',
|
||||||
|
accessCode: 'Access Code',
|
||||||
|
accessCodePlaceholder: 'Please enter access code',
|
||||||
|
grantAccess: 'Grant Access',
|
||||||
|
noAccess: 'No access yet?',
|
||||||
|
contactUs: 'Contact Us',
|
||||||
|
accessGranted: 'Access granted! AccountForger is loading...',
|
||||||
|
wrongCode: 'Wrong access code. Please try again.',
|
||||||
|
demoRequestAlert: 'Demo request function would be implemented here',
|
||||||
|
contactFormSuccess: 'Thank you for your message! We will get back to you as soon as possible.'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Current language state
|
||||||
|
let currentLanguage = CONFIG.I18N.DEFAULT_LANGUAGE;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the translation system
|
||||||
|
*/
|
||||||
|
function initTranslations() {
|
||||||
|
// Try to get saved language from localStorage
|
||||||
|
const savedLanguage = localStorage.getItem(CONFIG.I18N.STORAGE_KEY);
|
||||||
|
if (savedLanguage && CONFIG.I18N.SUPPORTED_LANGUAGES.includes(savedLanguage)) {
|
||||||
|
currentLanguage = savedLanguage;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply initial translations
|
||||||
|
applyTranslations(currentLanguage);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch to a different language
|
||||||
|
* @param {string} language - Language code ('de' or 'en')
|
||||||
|
*/
|
||||||
|
function switchLanguage(language) {
|
||||||
|
if (!CONFIG.I18N.SUPPORTED_LANGUAGES.includes(language)) {
|
||||||
|
console.error(`Language '${language}' is not supported`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentLanguage = language;
|
||||||
|
localStorage.setItem(CONFIG.I18N.STORAGE_KEY, language);
|
||||||
|
applyTranslations(language);
|
||||||
|
|
||||||
|
// Update cookie consent language
|
||||||
|
if (typeof CookieConsent !== 'undefined' && CookieConsent.setLanguage) {
|
||||||
|
CookieConsent.setLanguage(language);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply translations to all elements with data-translate attribute
|
||||||
|
* @param {string} language - Language code to apply
|
||||||
|
*/
|
||||||
|
function applyTranslations(language) {
|
||||||
|
const t = translations[language];
|
||||||
|
|
||||||
|
if (!t) {
|
||||||
|
console.error(`Translations for language '${language}' not found`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update page title
|
||||||
|
document.title = t.pageTitle;
|
||||||
|
|
||||||
|
// Update HTML lang attribute
|
||||||
|
document.documentElement.lang = language;
|
||||||
|
|
||||||
|
// Update all translatable elements
|
||||||
|
document.querySelectorAll(SELECTORS.TRANSLATABLE).forEach(element => {
|
||||||
|
const key = element.getAttribute(DATA_ATTRS.TRANSLATE);
|
||||||
|
|
||||||
|
if (t[key]) {
|
||||||
|
let content = t[key];
|
||||||
|
|
||||||
|
// Replace {year} placeholder with current year
|
||||||
|
if (content.includes('{year}')) {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
content = content.replace('{year}', currentYear);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if content contains HTML tags
|
||||||
|
if (content.includes('<strong>') || content.includes('<em>')) {
|
||||||
|
element.innerHTML = content;
|
||||||
|
} else {
|
||||||
|
element.textContent = content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update language toggle button
|
||||||
|
const langToggle = document.querySelector(SELECTORS.LANG_TOGGLE);
|
||||||
|
if (langToggle) {
|
||||||
|
langToggle.textContent = t.langSwitch;
|
||||||
|
langToggle.setAttribute(DATA_ATTRS.LANG, language);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update expand button text if it exists
|
||||||
|
updateExpandButtonText(language);
|
||||||
|
|
||||||
|
// Update footer legal links based on language
|
||||||
|
updateFooterLinks(language);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update expand button text based on current state
|
||||||
|
* @param {string} language - Current language
|
||||||
|
*/
|
||||||
|
function updateExpandButtonText(language) {
|
||||||
|
const expandButton = document.querySelector(SELECTORS.EXPAND_BUTTON);
|
||||||
|
if (expandButton) {
|
||||||
|
const expandText = expandButton.querySelector('.expand-text');
|
||||||
|
const isExpanded = expandButton.getAttribute(DATA_ATTRS.EXPANDED) === 'true';
|
||||||
|
const t = translations[language];
|
||||||
|
|
||||||
|
if (expandText && t) {
|
||||||
|
expandText.textContent = isExpanded ? t.hideDetails : t.expandDetails;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get a specific translation string
|
||||||
|
* @param {string} key - Translation key
|
||||||
|
* @returns {string} Translated text
|
||||||
|
*/
|
||||||
|
function getTranslation(key) {
|
||||||
|
return translations[currentLanguage][key] || key;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current language
|
||||||
|
* @returns {string} Current language code
|
||||||
|
*/
|
||||||
|
function getCurrentLanguage() {
|
||||||
|
return currentLanguage;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update footer legal links based on language
|
||||||
|
* @param {string} language - Current language code
|
||||||
|
*/
|
||||||
|
function updateFooterLinks(language) {
|
||||||
|
// Get footer links
|
||||||
|
const impressumLink = document.querySelector('a[href="impressum.html"], a[href="impressum-en.html"]');
|
||||||
|
const datenschutzLink = document.querySelector('a[href="datenschutz.html"], a[href="datenschutz-en.html"]');
|
||||||
|
|
||||||
|
if (language === 'en') {
|
||||||
|
// Switch to English versions
|
||||||
|
if (impressumLink) {
|
||||||
|
impressumLink.href = 'impressum-en.html';
|
||||||
|
}
|
||||||
|
if (datenschutzLink) {
|
||||||
|
datenschutzLink.href = 'datenschutz-en.html';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Switch to German versions
|
||||||
|
if (impressumLink) {
|
||||||
|
impressumLink.href = 'impressum.html';
|
||||||
|
}
|
||||||
|
if (datenschutzLink) {
|
||||||
|
datenschutzLink.href = 'datenschutz.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
141
lagen/cyberangriffe/index.html
Normale Datei
141
lagen/cyberangriffe/index.html
Normale Datei
@@ -0,0 +1,141 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Lagebild: Cyberangriffe auf deutsche Infrastruktur - AegisSight</title>
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="stylesheet" href="/css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="/css/mobile.css">
|
||||||
|
<link rel="stylesheet" href="/lagen/iran-konflikt/lagebild.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
|
||||||
|
<link rel="stylesheet" href="/cookie-consent.css">
|
||||||
|
</head>
|
||||||
|
<body class="lagebild-page">
|
||||||
|
<div class="scroll-progress" id="scroll-progress"></div>
|
||||||
|
<nav class="navbar" role="navigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
|
||||||
|
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||||
|
<span class="hamburger"><span></span><span></span><span></span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="nav-menu-mobile" aria-hidden="true">
|
||||||
|
<button class="mobile-menu-close" aria-label="Menü schließen">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-menu-overlay"></div>
|
||||||
|
<section class="lagebild-hero">
|
||||||
|
<canvas id="hero-particles"></canvas>
|
||||||
|
<div class="hero-bg-pattern"></div>
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="hero-title">LAGEBILD</h1>
|
||||||
|
<p class="hero-incident-title" id="incident-title"></p>
|
||||||
|
<div class="hero-stats" id="hero-stats"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="control-bar">
|
||||||
|
<div class="container">
|
||||||
|
<div class="timeline-wrapper">
|
||||||
|
<div class="timeline-strip" id="timeline-strip"></div>
|
||||||
|
<div class="timeline-dropdown" id="timeline-dropdown"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-nav" id="tab-nav">
|
||||||
|
<button class="tab-btn active" data-tab="ueberblick">Neueste Entwicklungen</button>
|
||||||
|
<button class="tab-btn" data-tab="lagebild">Lagebild</button>
|
||||||
|
<button class="tab-btn" data-tab="karte">Karte</button>
|
||||||
|
<button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
|
||||||
|
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<main class="lagebild-main">
|
||||||
|
<div class="container">
|
||||||
|
<div class="tab-panel active" id="panel-ueberblick">
|
||||||
|
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 id="ueberblick-title">Neueste Entwicklungen</h2>
|
||||||
|
<span class="card-timestamp" id="ueberblick-timestamp"></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="ueberblick-content">
|
||||||
|
<div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line short"></div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-lagebild">
|
||||||
|
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 id="lagebild-date-title">Lagebild</h2>
|
||||||
|
<span class="card-timestamp" id="lagebild-timestamp"></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="summary-content">
|
||||||
|
<div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line short"></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer" id="inline-sources"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-quellen">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header"><h2>Quellen</h2><p class="card-description">Alle vom AegisSight Monitor überwachten Quellen</p></div>
|
||||||
|
<div class="card-body" id="sources-grid-container"><div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line short"></div></div></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-karte">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header"><h2>Karte</h2><p class="card-description">Geografische Einordnung der Meldungen</p></div>
|
||||||
|
<div class="card-body"><div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-faktenchecks">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header"><h2>Faktenchecks</h2><p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen.</p></div>
|
||||||
|
<div class="card-body" id="factchecks-content"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section"><h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4><p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p><p data-translate="footerCompanyAddress2">40764 Langenfeld</p></div>
|
||||||
|
<div class="footer-section"><h4 data-translate="footerNavTitle">Navigation</h4><ul><li><a href="/" data-translate="footerNavHome">Startseite</a></li><li><a href="/#features">Funktionen</a></li><li><a href="/#demos">Live-Lagebilder</a></li><li><a href="/#trust" data-translate="footerNavAbout">Über uns</a></li><li><a href="/#contact">Kontakt</a></li></ul></div>
|
||||||
|
<div class="footer-section"><h4 data-translate="footerLegalTitle">Rechtliches</h4><ul><li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li><li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li><li><a href="#" id="cookie-settings-link">Cookie-Einstellungen</a></li></ul></div>
|
||||||
|
<div class="footer-section"><h4 data-translate="footerContactTitle">Kontakt</h4><p>info@aegis-sight.de</p></div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="/js/config.js"></script>
|
||||||
|
<script src="/js/translations.js"></script>
|
||||||
|
<script src="/js/mobile-nav.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||||||
|
<script src="/lagen/iran-konflikt/lagebild.js"></script>
|
||||||
|
<script src="/cookie-consent.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
212
lagen/deepfakes/index.html
Normale Datei
212
lagen/deepfakes/index.html
Normale Datei
@@ -0,0 +1,212 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Recherche: Rechtliche Lage von Deepfakes in Deutschland - AegisSight</title>
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="stylesheet" href="/css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="/css/mobile.css">
|
||||||
|
<link rel="stylesheet" href="/lagen/iran-konflikt/lagebild.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
|
||||||
|
<link rel="stylesheet" href="/cookie-consent.css">
|
||||||
|
</head>
|
||||||
|
<body class="lagebild-page">
|
||||||
|
<!-- Scroll Progress Bar -->
|
||||||
|
<div class="scroll-progress" id="scroll-progress"></div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" role="navigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
|
||||||
|
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||||
|
<span class="hamburger"><span></span><span></span><span></span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Mobile Navigation -->
|
||||||
|
<div class="nav-menu-mobile" aria-hidden="true">
|
||||||
|
<button class="mobile-menu-close" aria-label="Menü schließen">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-menu-overlay"></div>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="lagebild-hero">
|
||||||
|
<canvas id="hero-particles"></canvas>
|
||||||
|
<div class="hero-bg-pattern"></div>
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="hero-title">RECHERCHE</h1>
|
||||||
|
<p class="hero-incident-title" id="incident-title"></p>
|
||||||
|
<div class="hero-stats" id="hero-stats"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Control Bar: Timeline + Tabs -->
|
||||||
|
<div class="control-bar">
|
||||||
|
<div class="container">
|
||||||
|
<div class="timeline-wrapper">
|
||||||
|
<div class="timeline-strip" id="timeline-strip"></div>
|
||||||
|
<div class="timeline-dropdown" id="timeline-dropdown"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-nav" id="tab-nav">
|
||||||
|
<button class="tab-btn active" data-tab="ueberblick">Zusammenfassung</button>
|
||||||
|
<button class="tab-btn" data-tab="lagebild">Recherche</button>
|
||||||
|
<button class="tab-btn" data-tab="karte">Karte</button>
|
||||||
|
<button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
|
||||||
|
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="lagebild-main">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Tab: Ueberblick (Zusammenfassung) -->
|
||||||
|
<div class="tab-panel active" id="panel-ueberblick">
|
||||||
|
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 id="ueberblick-title">Zusammenfassung</h2>
|
||||||
|
<span class="card-timestamp" id="ueberblick-timestamp"></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="ueberblick-content">
|
||||||
|
<div class="loading-skeleton">
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line short"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Lagebild (Recherche) -->
|
||||||
|
<div class="tab-panel" id="panel-lagebild">
|
||||||
|
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 id="lagebild-date-title">Recherche</h2>
|
||||||
|
<span class="card-timestamp" id="lagebild-timestamp"></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="summary-content">
|
||||||
|
<div class="loading-skeleton">
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line short"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer" id="inline-sources"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Quellen -->
|
||||||
|
<div class="tab-panel" id="panel-quellen">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2>Quellen</h2>
|
||||||
|
<p class="card-description">Alle vom AegisSight Monitor ausgewerteten Quellen</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="sources-grid-container">
|
||||||
|
<div class="loading-skeleton">
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line short"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Karte -->
|
||||||
|
<div class="tab-panel" id="panel-karte">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2>Karte</h2>
|
||||||
|
<p class="card-description">Geografische Einordnung der Quellen</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Faktenchecks -->
|
||||||
|
<div class="tab-panel" id="panel-faktenchecks">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2>Faktenchecks</h2>
|
||||||
|
<p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="factchecks-content"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
|
||||||
|
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
|
||||||
|
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerNavTitle">Navigation</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" data-translate="footerNavHome">Startseite</a></li>
|
||||||
|
<li><a href="/#features" data-translate="footerNavFeatures">Funktionen</a></li>
|
||||||
|
<li><a href="/#demos" data-translate="footerNavDemos">Live-Lagebilder</a></li>
|
||||||
|
<li><a href="/#trust" data-translate="footerNavAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#contact" data-translate="footerNavContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerLegalTitle">Rechtliches</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
|
||||||
|
<li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
|
||||||
|
<li><a href="#" id="cookie-settings-link">Cookie-Einstellungen</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerContactTitle">Kontakt</h4>
|
||||||
|
<p>info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="/js/config.js"></script>
|
||||||
|
<script src="/js/translations.js"></script>
|
||||||
|
<script src="/js/mobile-nav.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||||||
|
<script src="/lagen/iran-konflikt/lagebild.js"></script>
|
||||||
|
<script src="/cookie-consent.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
218
lagen/iran-konflikt/index.html
Normale Datei
218
lagen/iran-konflikt/index.html
Normale Datei
@@ -0,0 +1,218 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Lagebild Irankonflikt - AegisSight</title>
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<link rel="stylesheet" href="/css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="/css/mobile.css">
|
||||||
|
<link rel="stylesheet" href="lagebild.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
|
||||||
|
<link rel="stylesheet" href="/cookie-consent.css">
|
||||||
|
</head>
|
||||||
|
<body class="lagebild-page">
|
||||||
|
<!-- Scroll Progress Bar -->
|
||||||
|
<div class="scroll-progress" id="scroll-progress"></div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" role="navigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-extras">
|
||||||
|
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
|
||||||
|
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||||
|
<span class="hamburger"><span></span><span></span><span></span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Mobile Navigation -->
|
||||||
|
<div class="nav-menu-mobile" aria-hidden="true">
|
||||||
|
<button class="mobile-menu-close" aria-label="Menü schließen">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||||
|
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||||
|
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-menu-overlay"></div>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="lagebild-hero">
|
||||||
|
<canvas id="hero-particles"></canvas>
|
||||||
|
<div class="hero-bg-pattern"></div>
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="hero-title">LAGEBILD</h1>
|
||||||
|
<p class="hero-incident-title" id="incident-title"></p>
|
||||||
|
|
||||||
|
<!-- Stat Cards -->
|
||||||
|
<div class="hero-stats" id="hero-stats"></div>
|
||||||
|
|
||||||
|
<!-- Live Feed Ticker -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Control Bar: Timeline + Tabs -->
|
||||||
|
<div class="control-bar">
|
||||||
|
<div class="container">
|
||||||
|
<div class="timeline-wrapper">
|
||||||
|
<div class="timeline-strip" id="timeline-strip"></div>
|
||||||
|
<div class="timeline-dropdown" id="timeline-dropdown"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-nav" id="tab-nav">
|
||||||
|
<button class="tab-btn active" data-tab="ueberblick">Neueste Entwicklungen</button>
|
||||||
|
<button class="tab-btn" data-tab="lagebild">Lagebild</button>
|
||||||
|
<button class="tab-btn" data-tab="karte">Karte</button>
|
||||||
|
<button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
|
||||||
|
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="lagebild-main">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Tab: Ueberblick (Neueste Entwicklungen / Zusammenfassung) -->
|
||||||
|
<div class="tab-panel active" id="panel-ueberblick">
|
||||||
|
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 id="ueberblick-title">Neueste Entwicklungen</h2>
|
||||||
|
<span class="card-timestamp" id="ueberblick-timestamp"></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="ueberblick-content">
|
||||||
|
<div class="loading-skeleton">
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line short"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Lagebild -->
|
||||||
|
<div class="tab-panel" id="panel-lagebild">
|
||||||
|
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 id="lagebild-date-title">Lagebild</h2>
|
||||||
|
<span class="card-timestamp" id="lagebild-timestamp"></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="summary-content">
|
||||||
|
<div class="loading-skeleton">
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line short"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer" id="inline-sources"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Quellen -->
|
||||||
|
<div class="tab-panel" id="panel-quellen">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2>Quellen</h2>
|
||||||
|
<p class="card-description">Alle vom AegisSight Monitor überwachten Quellen</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="sources-grid-container">
|
||||||
|
<div class="loading-skeleton">
|
||||||
|
<div class="skeleton-line"></div>
|
||||||
|
<div class="skeleton-line short"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Karte -->
|
||||||
|
<div class="tab-panel" id="panel-karte">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2>Karte</h2>
|
||||||
|
<p class="card-description">Geografische Einordnung der Meldungen</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab: Faktenchecks -->
|
||||||
|
<div class="tab-panel" id="panel-faktenchecks">
|
||||||
|
<section class="content-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2>Faktenchecks</h2>
|
||||||
|
<p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen. Alle Aussagen werden kontinuierlich gegen neue Quellen geprüft – bei neuer Evidenz ändert sich der Status automatisch.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" id="factchecks-content"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
|
||||||
|
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
|
||||||
|
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerNavTitle">Navigation</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/" data-translate="footerNavHome">Startseite</a></li>
|
||||||
|
<li><a href="/#features" data-translate="footerNavFeatures">Funktionen</a></li>
|
||||||
|
<li><a href="/#demos" data-translate="footerNavDemos">Live-Lagebilder</a></li>
|
||||||
|
<li><a href="/#trust" data-translate="footerNavAbout">Über uns</a></li>
|
||||||
|
<li><a href="/#contact" data-translate="footerNavContact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerLegalTitle">Rechtliches</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
|
||||||
|
<li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
|
||||||
|
<li><a href="#" id="cookie-settings-link">Cookie-Einstellungen</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4 data-translate="footerContactTitle">Kontakt</h4>
|
||||||
|
<p>info@aegis-sight.de</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="/js/config.js"></script>
|
||||||
|
<script src="/js/translations.js"></script>
|
||||||
|
<script src="/js/mobile-nav.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||||||
|
<script src="lagebild.js"></script>
|
||||||
|
<script src="/cookie-consent.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1633
lagen/iran-konflikt/lagebild.css
Normale Datei
1633
lagen/iran-konflikt/lagebild.css
Normale Datei
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
1465
lagen/iran-konflikt/lagebild.js
Normale Datei
1465
lagen/iran-konflikt/lagebild.js
Normale Datei
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
99
robots-launch.txt
Normale Datei
99
robots-launch.txt
Normale Datei
@@ -0,0 +1,99 @@
|
|||||||
|
# robots.txt for AegisSight UG — wird am Tag X als robots.txt aktiv geschaltet
|
||||||
|
# Allgemein: Crawling erlaubt, außer API-Endpunkte und interne Pfade
|
||||||
|
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Disallow: /api/
|
||||||
|
Disallow: /_archiv/
|
||||||
|
Disallow: /vorschau/
|
||||||
|
|
||||||
|
# Sitemap
|
||||||
|
Sitemap: https://aegis-sight.de/sitemap.xml
|
||||||
|
|
||||||
|
# AI-Crawler explizit blocken — keine Trainingsdaten-Verwendung
|
||||||
|
User-agent: GPTBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: ChatGPT-User
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: CCBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: anthropic-ai
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Claude-Web
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: ClaudeBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Bytespider
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: PerplexityBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Google-Extended
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Applebot-Extended
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Meta-ExternalAgent
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: cohere-ai
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: OAI-SearchBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# Archiv-Bots blocken
|
||||||
|
User-agent: ia_archiver
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Wayback Machine
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: archive.org_bot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# SEO-/Spam-Crawler blocken
|
||||||
|
User-agent: AhrefsBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SemrushBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: MJ12bot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: DotBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SEOkicks-Robot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: MauiBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Majestic-12
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: BLEXBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SerendeputyBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# Download-Manager blocken
|
||||||
|
User-agent: HTTrack
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SiteSnagger
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: WebCopier
|
||||||
|
Disallow: /
|
||||||
112
robots.txt
Normale Datei
112
robots.txt
Normale Datei
@@ -0,0 +1,112 @@
|
|||||||
|
# robots.txt for AegisSight UG
|
||||||
|
# Block ALL web crawlers and bots from the entire site
|
||||||
|
|
||||||
|
# Block all bots
|
||||||
|
User-agent: *
|
||||||
|
Disallow: /
|
||||||
|
Crawl-delay: 86400
|
||||||
|
|
||||||
|
# Specifically block major search engines
|
||||||
|
User-agent: Googlebot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Bingbot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Slurp
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: DuckDuckBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Baiduspider
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: YandexBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# Block social media crawlers
|
||||||
|
User-agent: facebookexternalhit
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Twitterbot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: LinkedInBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: WhatsApp
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: TelegramBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# Block SEO and analysis bots
|
||||||
|
User-agent: AhrefsBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SemrushBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: DotBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: MJ12bot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SEOkicks-Robot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SeznamBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: MauiBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Majestic-12
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Majestic-SEO
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# Block archiving bots
|
||||||
|
User-agent: ia_archiver
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Wayback Machine
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: SiteSnagger
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: WebCopier
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# Block AI/ML crawlers
|
||||||
|
User-agent: GPTBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: ChatGPT-User
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: CCBot
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: anthropic-ai
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: Claude-Web
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# Block download managers
|
||||||
|
User-agent: wget
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: curl
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
User-agent: HTTrack
|
||||||
|
Disallow: /
|
||||||
|
|
||||||
|
# No sitemap provided
|
||||||
|
# No crawl permissions granted
|
||||||
33
sitemap-launch.xml
Normale Datei
33
sitemap-launch.xml
Normale Datei
@@ -0,0 +1,33 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url>
|
||||||
|
<loc>https://aegis-sight.de/</loc>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>1.0</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://aegis-sight.de/lagen/iran-konflikt/</loc>
|
||||||
|
<changefreq>daily</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://aegis-sight.de/lagen/cyberangriffe/</loc>
|
||||||
|
<changefreq>daily</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://aegis-sight.de/lagen/deepfakes/</loc>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://aegis-sight.de/impressum.html</loc>
|
||||||
|
<changefreq>yearly</changefreq>
|
||||||
|
<priority>0.3</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://aegis-sight.de/datenschutz.html</loc>
|
||||||
|
<changefreq>yearly</changefreq>
|
||||||
|
<priority>0.3</priority>
|
||||||
|
</url>
|
||||||
|
</urlset>
|
||||||
475
vorschau/css/style.css
Normale Datei
475
vorschau/css/style.css
Normale Datei
@@ -0,0 +1,475 @@
|
|||||||
|
/* AegisSight Monitor - Product Page v2 (Light Mode) */
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Regular.woff2') format('woff2'),url('/assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
|
||||||
|
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-SemiBold.woff2') format('woff2'),url('/assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
|
||||||
|
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Bold.woff2') format('woff2'),url('/assets/fonts/Inter-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
|
||||||
|
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Light.woff2') format('woff2'),url('/assets/fonts/Inter-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--navy: #0A1832;
|
||||||
|
--navy-light: #132844;
|
||||||
|
--gold: #C8A851;
|
||||||
|
--gold-light: #D4B96A;
|
||||||
|
--gold-dark: #B39645;
|
||||||
|
--white: #FAFBFD;
|
||||||
|
--base: #F5F7FA;
|
||||||
|
--alt: #EDF0F5;
|
||||||
|
--alt-solid: #F0F3F7;
|
||||||
|
--gray-100: #E4E8EE;
|
||||||
|
--gray-200: #D0D5DE;
|
||||||
|
--gray-400: #9AA5B4;
|
||||||
|
--gray-600: #5A6478;
|
||||||
|
--text: #2A2F3A;
|
||||||
|
--text-light: #5A6478;
|
||||||
|
--radius: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
--shadow: 0 2px 12px rgba(10,24,50,0.06);
|
||||||
|
--shadow-lg: 0 8px 32px rgba(10,24,50,0.1);
|
||||||
|
--nav-height: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
|
||||||
|
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-height); }
|
||||||
|
body { font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6; color:var(--text); background:var(--base); -webkit-font-smoothing:antialiased; }
|
||||||
|
img { max-width:100%; height:auto; }
|
||||||
|
a { color:inherit; text-decoration:none; }
|
||||||
|
.container { max-width:1120px; margin:0 auto; padding:0 24px; }
|
||||||
|
|
||||||
|
/* ==================== NAV ==================== */
|
||||||
|
.navbar { position:fixed; top:0; left:0; right:0; height:var(--nav-height); background:rgba(250,251,253,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:1000; transition:box-shadow 0.3s; }
|
||||||
|
.navbar.scrolled { box-shadow:0 1px 16px rgba(10,24,50,0.08); }
|
||||||
|
.nav-container { max-width:1120px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; }
|
||||||
|
.nav-logo { display:flex; align-items:center; }
|
||||||
|
.logo-img { height:36px; width:auto; }
|
||||||
|
.nav-menu { list-style:none; display:flex; gap:32px; }
|
||||||
|
.nav-menu a { font-size:0.9rem; font-weight:500; color:var(--navy); transition:color 0.2s; }
|
||||||
|
.nav-menu a:hover { color:var(--gold); }
|
||||||
|
|
||||||
|
.mobile-menu-toggle { display:none; background:none; border:none; cursor:pointer; width:32px; height:24px; position:relative; flex-direction:column; justify-content:space-between; }
|
||||||
|
.mobile-menu-toggle span { display:block; width:100%; height:2px; background:var(--navy); border-radius:2px; transition:transform 0.3s,opacity 0.3s; }
|
||||||
|
.mobile-menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(7px,7px); }
|
||||||
|
.mobile-menu-toggle.active span:nth-child(2) { opacity:0; }
|
||||||
|
.mobile-menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px,-7px); }
|
||||||
|
|
||||||
|
.mobile-menu { position:fixed; top:var(--nav-height); left:0; right:0; background:var(--white); padding:16px 24px 24px; box-shadow:var(--shadow-lg); transform:translateY(-100%); opacity:0; transition:transform 0.3s,opacity 0.3s; z-index:999; pointer-events:none; }
|
||||||
|
.mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:all; }
|
||||||
|
.mobile-menu ul { list-style:none; }
|
||||||
|
.mobile-menu li { border-bottom:1px solid var(--gray-100); }
|
||||||
|
.mobile-menu a { display:block; padding:14px 0; font-size:1rem; font-weight:500; color:var(--navy); }
|
||||||
|
.mobile-overlay { position:fixed; inset:0; background:rgba(10,24,50,0.3); z-index:998; opacity:0; pointer-events:none; transition:opacity 0.3s; }
|
||||||
|
.mobile-overlay.open { opacity:1; pointer-events:all; }
|
||||||
|
|
||||||
|
/* ==================== HERO (Full-Video mit Endcard) ==================== */
|
||||||
|
.hero { position:relative; min-height:88vh; overflow:hidden; background:var(--navy); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px)); margin-bottom:-60px; z-index:1; }
|
||||||
|
.gold { color:var(--gold); font-weight:600; }
|
||||||
|
|
||||||
|
/* Overlay-Layer für Text + Navigation */
|
||||||
|
.hero-content { position:absolute; inset:0; z-index:4; color:var(--white); pointer-events:none; }
|
||||||
|
.hero-content > * { pointer-events:auto; }
|
||||||
|
|
||||||
|
/* Brand (Titel + Tagline): nur während Endcard sichtbar, in Hero-Mitte */
|
||||||
|
.hero-brand { position:absolute; top:50%; left:0; right:0; padding:0 24px; text-align:center; transform:translateY(-50%); opacity:0; transition:opacity 0.5s ease; pointer-events:none; }
|
||||||
|
.hero.endcard .hero-brand { opacity:1; transition-delay:0.35s; pointer-events:auto; }
|
||||||
|
.hero-title { font-size:3.2rem; font-weight:700; line-height:1.1; letter-spacing:-0.02em; color:var(--white); margin:0; }
|
||||||
|
.hero-tagline { font-size:1.2rem; font-weight:300; color:rgba(255,255,255,0.9); margin-top:12px; }
|
||||||
|
|
||||||
|
/* ==================== HERO SLIDER ==================== */
|
||||||
|
/* Slider: unter der Navbar beginnen, oberhalb der Dots-Zone enden (60px Reserve fuer Dots) */
|
||||||
|
.hero-slider { position:absolute; top:var(--nav-height); left:0; right:0; bottom:60px; z-index:1; }
|
||||||
|
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.6s ease; pointer-events:none; }
|
||||||
|
.hero-slide.active { opacity:1; pointer-events:auto; }
|
||||||
|
.hero-slide.exiting { opacity:0; transition:opacity 0.4s ease; }
|
||||||
|
|
||||||
|
/* Video füllt den Slide (contain = komplett sichtbar, Navy-Letterbox) */
|
||||||
|
.hero-slide-video { position:absolute; inset:0; overflow:hidden; transition:opacity 0.4s ease; }
|
||||||
|
.hero-slide-video video { display:block; width:100%; height:100%; object-fit:contain; background:var(--navy); }
|
||||||
|
/* Beim Endcard-State Video ausfaden */
|
||||||
|
.hero-slide.ended .hero-slide-video { opacity:0; }
|
||||||
|
|
||||||
|
/* Per-Slide-Bottom (Beispieltext + CTA): nur während Endcard sichtbar, unter dem Titel */
|
||||||
|
.hero-slide-bottom { position:absolute; left:0; right:0; bottom:140px; padding:0 32px; text-align:center; opacity:0; transition:opacity 0.5s ease; pointer-events:none; }
|
||||||
|
.hero-slide.ended .hero-slide-bottom { opacity:1; transition-delay:0.5s; pointer-events:auto; }
|
||||||
|
.hero-slide-example { font-size:1.15rem; font-weight:400; line-height:1.55; color:rgba(255,255,255,0.9); margin:0 auto 24px; max-width:820px; padding:0; border:0; }
|
||||||
|
.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
|
||||||
|
.hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; }
|
||||||
|
|
||||||
|
/* Slider-Navigation: Dots zentriert ganz unten im Chevron-Band, ausserhalb des Video-Bereichs. */
|
||||||
|
.hero-slider-nav { position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; padding:0 24px; pointer-events:none; z-index:5; }
|
||||||
|
.hero-slider-dots { display:flex; gap:12px; pointer-events:auto; }
|
||||||
|
.hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
|
||||||
|
.hero-dot.active { background:var(--gold); }
|
||||||
|
|
||||||
|
.hero-slider-arrows { /* Container - Pfeile positionieren sich absolut relativ zu hero-content */ }
|
||||||
|
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(10,24,50,0.35); color:var(--white); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:5; }
|
||||||
|
.hero-arrow:hover { border-color:var(--gold); color:var(--gold); background:rgba(10,24,50,0.6); }
|
||||||
|
.hero-arrow-prev { left:24px; }
|
||||||
|
.hero-arrow-next { right:24px; }
|
||||||
|
|
||||||
|
/* Altes hero-overlay nicht mehr verwendet */
|
||||||
|
.hero-overlay { display:none; }
|
||||||
|
|
||||||
|
/* ==================== BUTTONS ==================== */
|
||||||
|
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 28px; border-radius:var(--radius); font-family:inherit; font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.2s; border:2px solid transparent; text-decoration:none; }
|
||||||
|
.btn-primary { background:var(--gold); color:var(--navy); border-color:var(--gold); }
|
||||||
|
.btn-primary:hover { background:var(--gold-dark); border-color:var(--gold-dark); }
|
||||||
|
.btn-outline-light { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4); }
|
||||||
|
.btn-outline-light:hover { background:rgba(255,255,255,0.1); border-color:var(--white); }
|
||||||
|
.btn-outline { background:transparent; color:var(--navy); border-color:var(--navy); }
|
||||||
|
.btn-outline:hover { background:var(--navy); color:var(--white); }
|
||||||
|
.btn-lg { padding:16px 40px; font-size:1.05rem; }
|
||||||
|
.btn-block { width:100%; }
|
||||||
|
|
||||||
|
/* ==================== SECTIONS ==================== */
|
||||||
|
.section { padding:88px 0; }
|
||||||
|
.section-base { background:var(--base); }
|
||||||
|
.section-alt { background:var(--alt-solid); }
|
||||||
|
.section-dark { background:var(--navy-light); color:var(--white); }
|
||||||
|
|
||||||
|
.section-title { font-size:2rem; font-weight:700; color:var(--navy); text-align:center; margin-bottom:16px; letter-spacing:-0.01em; }
|
||||||
|
.section-dark .section-title { color:var(--white); }
|
||||||
|
.section-subtitle-light { color:rgba(255,255,255,0.6); }
|
||||||
|
.section-subtitle { font-size:1.05rem; color:var(--text-light); text-align:center; max-width:600px; margin:0 auto 48px; }
|
||||||
|
|
||||||
|
/* ==================== SECTION DIVIDERS ==================== */
|
||||||
|
.divider { line-height:0; margin:0; overflow:hidden; }
|
||||||
|
.divider svg { display:block; width:100%; height:auto; }
|
||||||
|
.divider-chevron { background:var(--alt-solid); }
|
||||||
|
.divider-chevron-dark { background:var(--navy); }
|
||||||
|
.divider-diagonal { background:var(--base); }
|
||||||
|
.divider-diagonal-dark { background:var(--base); }
|
||||||
|
.divider-gradient-alt-to-base { height:40px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
|
||||||
|
.divider-gradient-base-to-alt { height:60px; background:linear-gradient(to bottom, var(--base), var(--alt-solid)); }
|
||||||
|
.divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
|
||||||
|
.divider-gradient-dark-to-alt { height:60px; background:linear-gradient(to bottom, var(--navy), var(--alt-solid)); }
|
||||||
|
|
||||||
|
/* ==================== GRID ==================== */
|
||||||
|
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
|
||||||
|
#features .grid-3 { justify-items:center; }
|
||||||
|
#features .grid-3 .feature-card:nth-last-child(-n+2):nth-child(3n+1) { grid-column: 1; }
|
||||||
|
#features .grid-3 { display:flex; flex-wrap:wrap; justify-content:center; }
|
||||||
|
#features .grid-3 .feature-card { width:calc(33.333% - 20px); }
|
||||||
|
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
|
||||||
|
|
||||||
|
/* ==================== PROBLEM ==================== */
|
||||||
|
.problem-card { text-align:center; padding:32px 20px; }
|
||||||
|
.problem-icon { width:64px; height:64px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:var(--white); border-radius:50%; box-shadow:var(--shadow); }
|
||||||
|
.problem-card h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
|
||||||
|
.problem-card p { font-size:0.93rem; color:var(--text-light); line-height:1.6; }
|
||||||
|
|
||||||
|
/* Problem dark variant */
|
||||||
|
.problem-card-dark { color:var(--white); }
|
||||||
|
.problem-card-dark h3 { color:var(--white); }
|
||||||
|
.problem-card-dark p { color:rgba(255,255,255,0.7); }
|
||||||
|
.problem-icon-dark { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); box-shadow:none; }
|
||||||
|
.problem-icon-dark img { filter:brightness(0) invert(1); }
|
||||||
|
|
||||||
|
/* ==================== WORKFLOW ==================== */
|
||||||
|
.workflow { display:flex; align-items:flex-start; justify-content:center; margin-top:56px; }
|
||||||
|
.workflow-step { flex:1; max-width:300px; text-align:center; padding:0 24px; }
|
||||||
|
.step-number { width:48px; height:48px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:var(--gold); color:var(--navy); font-size:1.2rem; font-weight:700; border-radius:50%; }
|
||||||
|
.workflow-step h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
|
||||||
|
.workflow-step p { font-size:0.93rem; color:var(--text-light); line-height:1.6; }
|
||||||
|
.workflow-connector { width:60px; height:2px; background:var(--gold); margin-top:23px; flex-shrink:0; opacity:0.4; }
|
||||||
|
|
||||||
|
/* ==================== FEATURES ==================== */
|
||||||
|
.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s,background 0.3s; border:1px solid transparent; }
|
||||||
|
.feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
|
||||||
|
.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; border:1px solid transparent; }
|
||||||
|
.feature-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
|
||||||
|
.feature-card p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
|
||||||
|
|
||||||
|
/* Features im dunklen Section-Kontext: Glasmorphism mit Gold-Akzent */
|
||||||
|
.section-dark .feature-card { background:rgba(255,255,255,0.04); border-color:rgba(200,168,81,0.2); box-shadow:none; }
|
||||||
|
.section-dark .feature-card:hover { border-color:rgba(200,168,81,0.5); background:rgba(255,255,255,0.06); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
|
||||||
|
.section-dark .feature-card h3 { color:var(--white); }
|
||||||
|
.section-dark .feature-card p { color:rgba(255,255,255,0.7); }
|
||||||
|
.section-dark .feature-icon { background:rgba(200,168,81,0.15); border-color:rgba(200,168,81,0.3); }
|
||||||
|
.section-dark .feature-icon img { filter:brightness(0) saturate(100%) invert(74%) sepia(49%) saturate(471%) hue-rotate(2deg) brightness(91%) contrast(83%); }
|
||||||
|
|
||||||
|
/* ==================== DEMOS SECTION ==================== */
|
||||||
|
#demos { padding-top:48px; }
|
||||||
|
|
||||||
|
/* ==================== LIVE STATS BAR ==================== */
|
||||||
|
.live-stats-bar { margin-bottom:40px; text-align:center; }
|
||||||
|
.live-stats-title { font-size:1rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; }
|
||||||
|
.live-stats-row { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
|
||||||
|
.live-stat { text-align:center; background:var(--white); border-radius:var(--radius-lg); padding:20px 32px; box-shadow:var(--shadow); border:1px solid var(--gray-100); min-width:160px; }
|
||||||
|
.live-stat-value { display:block; font-size:2.4rem; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-0.02em; }
|
||||||
|
.live-stat-label { display:block; font-size:0.8rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }
|
||||||
|
|
||||||
|
/* ==================== FEATURE HIGHLIGHT ==================== */
|
||||||
|
.feature-statement { text-align:center; max-width:700px; margin:0 auto 48px; padding:0 24px; }
|
||||||
|
.feature-statement-text { font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:12px; letter-spacing:-0.01em; }
|
||||||
|
.feature-statement-sub { font-size:1rem; color:var(--text-light); line-height:1.6; }
|
||||||
|
.section-dark .feature-statement-text { color:var(--white); }
|
||||||
|
.section-dark .feature-statement-sub { color:rgba(255,255,255,0.7); }
|
||||||
|
@media(max-width:768px) { .feature-statement-text { font-size:1.3rem; } }
|
||||||
|
|
||||||
|
/* ==================== 3D CAROUSEL ==================== */
|
||||||
|
.carousel-viewport { overflow-x:clip; overflow-y:visible; padding:20px 0; position:relative; }
|
||||||
|
.carousel-track { display:flex; justify-content:center; position:relative; }
|
||||||
|
.carousel-card { width:860px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:absolute; display:flex; flex-direction:column; transition:all 0.6s cubic-bezier(0.4,0,0.2,1); cursor:pointer; transform-style:preserve-3d; }
|
||||||
|
.carousel-card.active { position:relative; transform:none; z-index:3; opacity:1; }
|
||||||
|
.carousel-card.left { position:absolute; left:0; top:0; transform:scale(0.75) translateX(-70%); z-index:1; opacity:0.45; }
|
||||||
|
.carousel-card.right { position:absolute; right:0; top:0; transform:scale(0.75) translateX(70%); z-index:1; opacity:0.45; }
|
||||||
|
.carousel-card.hidden { position:absolute; transform:scale(0.5); z-index:0; opacity:0; pointer-events:none; }
|
||||||
|
|
||||||
|
/* Carousel arrows */
|
||||||
|
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; border:2px solid var(--gray-200); background:var(--white); color:var(--navy); font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:var(--shadow); line-height:1; }
|
||||||
|
.carousel-arrow:hover { border-color:var(--gold); color:var(--gold); box-shadow:var(--shadow-lg); }
|
||||||
|
.carousel-prev { left:8px; }
|
||||||
|
.carousel-next { right:8px; }
|
||||||
|
.carousel-nav { display:flex; justify-content:center; gap:10px; margin-top:24px; }
|
||||||
|
.carousel-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
|
||||||
|
.carousel-dot.active { background:var(--gold); }
|
||||||
|
.card-live { border:2px solid var(--gold); box-shadow:0 4px 24px rgba(200,168,81,0.15); }
|
||||||
|
.card-placeholder { border:2px dashed var(--gray-200); opacity:0.55; }
|
||||||
|
.demo-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; width:fit-content; background:var(--gold); color:var(--navy); }
|
||||||
|
.badge-soon { background:var(--gray-100); color:var(--gray-400); }
|
||||||
|
.demo-title { font-size:1.25rem; font-weight:700; color:var(--navy); margin-bottom:16px; }
|
||||||
|
|
||||||
|
|
||||||
|
.demo-excerpt { margin-bottom:16px; }
|
||||||
|
.excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; }
|
||||||
|
|
||||||
|
.excerpt-text h2 { font-size:1.05rem; font-weight:700; color:var(--navy); margin:20px 0 8px; }
|
||||||
|
.excerpt-text h3 { font-size:0.95rem; font-weight:600; color:var(--navy); margin:16px 0 6px; }
|
||||||
|
.excerpt-text p { margin-bottom:10px; }
|
||||||
|
.excerpt-text ul { margin:8px 0 12px 20px; }
|
||||||
|
.excerpt-text li { margin-bottom:4px; font-size:0.88rem; color:var(--text); }
|
||||||
|
.placeholder-title { color:var(--gray-400); }
|
||||||
|
.placeholder-text { font-size:0.95rem; color:var(--gray-400); flex:1; display:flex; align-items:center; justify-content:center; min-height:180px; }
|
||||||
|
|
||||||
|
/* ==================== MAP ==================== */
|
||||||
|
.map-section { margin-top:48px; }
|
||||||
|
.map-title { font-size:1.1rem; font-weight:600; color:var(--navy); margin-bottom:16px; text-align:center; }
|
||||||
|
.map-section { transition:opacity 0.3s; }
|
||||||
|
.map-section.map-hidden #map-container { display:none; }
|
||||||
|
.map-section.map-hidden .map-empty { display:flex!important; }
|
||||||
|
.map-empty { display:none; align-items:center; justify-content:center; height:300px; border:2px dashed var(--gray-200); border-radius:var(--radius-lg); color:var(--gray-400); font-size:1rem; background:var(--white); }
|
||||||
|
#map-container { height:420px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--gray-100); }
|
||||||
|
|
||||||
|
/* Map pulse markers (exact lagebild style) */
|
||||||
|
.pulse-marker-wrapper { position:relative; width:20px; height:20px; }
|
||||||
|
.pulse-marker-ring { position:absolute; inset:0; border-radius:50%; border:2px solid; animation:mapPulseRing 2s infinite; opacity:0; }
|
||||||
|
.pulse-marker-ring:nth-child(2) { animation-delay:1s; }
|
||||||
|
@keyframes mapPulseRing { 0%{transform:scale(0.5);opacity:0} 30%{opacity:0.6} 100%{transform:scale(2.5);opacity:0} }
|
||||||
|
.pulse-marker-dot { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; animation:pulseDot 2s infinite; }
|
||||||
|
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
|
||||||
|
/* Dark popup style */
|
||||||
|
.leaflet-popup-content-wrapper { background:#151D2E!important; color:#E8ECF4!important; border:1px solid #1E2D45!important; border-radius:4px!important; box-shadow:0 4px 16px rgba(0,0,0,0.4)!important; }
|
||||||
|
.leaflet-popup-tip { background:#151D2E!important; }
|
||||||
|
.leaflet-popup-content { margin:10px 14px!important; font-size:0.85rem!important; }
|
||||||
|
|
||||||
|
/* ==================== TRUST ==================== */
|
||||||
|
.trust-grid { margin-top:48px; }
|
||||||
|
.trust-card { text-align:center; padding:24px 16px; }
|
||||||
|
.trust-icon-wrap { height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
|
||||||
|
.trust-icon-wrap img { filter:brightness(0) invert(1); }
|
||||||
|
.trust-icon-wrap.trust-flag img { filter:none; }
|
||||||
|
.trust-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
|
||||||
|
.trust-card p { font-size:0.88rem; opacity:0.7; line-height:1.5; }
|
||||||
|
|
||||||
|
/* ==================== CTA ==================== */
|
||||||
|
.cta-container { text-align:center; max-width:600px; }
|
||||||
|
.cta-text { font-size:1.1rem; color:var(--text-light); margin-bottom:32px; }
|
||||||
|
.cta-email { font-size:0.9rem; color:var(--text-light); margin-top:16px; }
|
||||||
|
|
||||||
|
|
||||||
|
/* ==================== CONTACT MODAL ==================== */
|
||||||
|
.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(10,24,50,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; }
|
||||||
|
.modal-content { background:var(--white); border-radius:var(--radius-lg); padding:40px; max-width:520px; width:100%; position:relative; box-shadow:0 24px 64px rgba(10,24,50,0.3); max-height:90vh; overflow-y:auto; }
|
||||||
|
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.8rem; color:var(--gray-400); cursor:pointer; line-height:1; }
|
||||||
|
.modal-close:hover { color:var(--navy); }
|
||||||
|
.modal-content h2 { font-size:1.5rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
|
||||||
|
.modal-sub { font-size:0.95rem; color:var(--text-light); margin-bottom:28px; }
|
||||||
|
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
|
||||||
|
.form-group { margin-bottom:16px; }
|
||||||
|
.form-group label { display:block; font-size:0.82rem; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
|
||||||
|
.form-group input, .form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--gray-200); border-radius:var(--radius); font-family:inherit; font-size:0.95rem; color:var(--text); background:var(--base); transition:border-color 0.2s; }
|
||||||
|
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--gold); }
|
||||||
|
.form-group textarea { resize:vertical; }
|
||||||
|
.form-success { text-align:center; padding:40px 0; }
|
||||||
|
.form-success p { font-size:1.05rem; color:var(--navy); font-weight:500; }
|
||||||
|
@media(max-width:768px) { .form-row { grid-template-columns:1fr; } .modal-content { padding:28px 20px; } }
|
||||||
|
/* ==================== FOOTER ==================== */
|
||||||
|
.footer { background:var(--navy); color:rgba(255,255,255,0.7); padding:40px 0; font-size:0.85rem; }
|
||||||
|
.footer-content { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.1); }
|
||||||
|
.footer-company { font-weight:600; color:var(--white); margin-bottom:4px; }
|
||||||
|
.footer-links { display:flex; gap:24px; }
|
||||||
|
.footer-links a { color:rgba(255,255,255,0.7); transition:color 0.2s; }
|
||||||
|
.footer-links a:hover { color:var(--white); }
|
||||||
|
.footer-copyright { text-align:center; font-size:0.8rem; opacity:0.5; }
|
||||||
|
|
||||||
|
/* ==================== RESPONSIVE ==================== */
|
||||||
|
@media(max-width:1024px) {
|
||||||
|
.grid-3 { grid-template-columns:repeat(2,1fr); }
|
||||||
|
.grid-4 { grid-template-columns:repeat(2,1fr); }
|
||||||
|
.hero-title { font-size:2.5rem; }
|
||||||
|
.section { padding:64px 0; }
|
||||||
|
.workflow-connector { width:40px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:768px) {
|
||||||
|
.nav-menu { display:none; }
|
||||||
|
.mobile-menu-toggle { display:flex; }
|
||||||
|
.grid-3,.grid-4 { grid-template-columns:1fr; gap:20px; }
|
||||||
|
.hero { min-height:75vh; }
|
||||||
|
.hero-brand { padding:0 20px; }
|
||||||
|
.hero-title { font-size:1.9rem; }
|
||||||
|
.hero-tagline { font-size:0.95rem; margin-top:8px; }
|
||||||
|
.hero-slide-bottom { bottom:110px; padding:0 20px; }
|
||||||
|
.hero-slide-example { font-size:0.95rem; margin-bottom:18px; }
|
||||||
|
.hero-slide-cta { flex-direction:column; }
|
||||||
|
.hero-slide-cta .btn { width:100%; }
|
||||||
|
.hero-slider-nav { bottom:18px; }
|
||||||
|
.hero-slider-arrows { display:none; }
|
||||||
|
.section { padding:48px 0; }
|
||||||
|
.section-title { font-size:1.6rem; }
|
||||||
|
.workflow { flex-direction:column; align-items:center; gap:8px; }
|
||||||
|
.workflow-connector { width:2px; height:32px; margin:0; }
|
||||||
|
.workflow-step { max-width:100%; padding:16px 0; }
|
||||||
|
.footer-content { flex-direction:column; text-align:center; gap:16px; }
|
||||||
|
|
||||||
|
#map-container { height:300px; }
|
||||||
|
#features .grid-3 { display:flex; flex-direction:column; }
|
||||||
|
#features .grid-3 .feature-card { width:100%; }
|
||||||
|
.carousel-card { width:100%!important; max-width:100%; position:relative!important; }
|
||||||
|
.carousel-card.active { transform:none; }
|
||||||
|
.carousel-card.left, .carousel-card.right { display:none; }
|
||||||
|
.carousel-track { display:flex; flex-direction:column; }
|
||||||
|
.carousel-arrow { display:none; }
|
||||||
|
.carousel-viewport { overflow:visible; }
|
||||||
|
.live-stats-bar { padding:0 8px; }
|
||||||
|
.live-stats-row { gap:12px; }
|
||||||
|
.live-stat { min-width:0; padding:16px 12px; }
|
||||||
|
.live-stat-value { font-size:1.8rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:480px) {
|
||||||
|
.hero-title { font-size:1.65rem; }
|
||||||
|
.hero-tagline { font-size:0.9rem; }
|
||||||
|
.hero-slide-example { font-size:0.9rem; }
|
||||||
|
.container { padding:0 16px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Marker-Cluster Dark Theme */
|
||||||
|
.marker-cluster-small,
|
||||||
|
.marker-cluster-medium,
|
||||||
|
.marker-cluster-large {
|
||||||
|
background: rgba(21, 29, 46, 0.8);
|
||||||
|
}
|
||||||
|
.marker-cluster-small div,
|
||||||
|
.marker-cluster-medium div,
|
||||||
|
.marker-cluster-large div {
|
||||||
|
background: rgba(200, 168, 81, 0.9);
|
||||||
|
color: #0A1832;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Neueste Entwicklungen (Live-Monitoring Vorschau) === */
|
||||||
|
.dev-list-heading {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #C8A851;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.dev-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.dev-bullet {
|
||||||
|
background: rgba(30, 45, 69, 0.45);
|
||||||
|
border-left: 3px solid #C8A851;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.dev-bullet-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.dev-sources {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.dev-source-pill {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: rgba(200, 168, 81, 0.15);
|
||||||
|
color: #E8ECF4;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.5;
|
||||||
|
white-space: normal;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
a.dev-source-pill:hover {
|
||||||
|
background: rgba(200, 168, 81, 0.3);
|
||||||
|
text-decoration: none;
|
||||||
|
color: #E8ECF4;
|
||||||
|
}
|
||||||
|
.dev-time {
|
||||||
|
color: #8896AB;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.dev-body {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
color: #E8ECF4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== HELLIGKEITS-TONLEITER (Test) ==================== */
|
||||||
|
/* Vier helle Sections in vier Helligkeitsstufen — Seite "atmet" beim Scrollen
|
||||||
|
sanft von hell nach kühler, mündet hart in den dunklen Footer. */
|
||||||
|
:root {
|
||||||
|
--tone-1: #F5F7FA; /* Problem (hellster) */
|
||||||
|
--tone-2: #ECF0F5; /* Workflow */
|
||||||
|
--tone-3: #E4EAF1; /* Demos */
|
||||||
|
--tone-4: #ECF2F9; /* Contact (hell blau-grau-weiß, frischer Akzent vor Trust) */
|
||||||
|
}
|
||||||
|
#problem { background: var(--tone-1); }
|
||||||
|
#solution { background: var(--tone-2); }
|
||||||
|
#demos { background: var(--tone-3); }
|
||||||
|
#contact { background: var(--tone-4); }
|
||||||
|
|
||||||
|
/* Divider-Übergänge an die Tonstufen anpassen (Adjacent-Sibling) */
|
||||||
|
#problem + .divider { background: linear-gradient(to bottom, var(--tone-1), var(--tone-2)); }
|
||||||
|
#solution + .divider { background: linear-gradient(to bottom, var(--tone-2), var(--tone-3)); }
|
||||||
|
#demos + .divider { background: linear-gradient(to bottom, var(--tone-3), var(--tone-4)); height: 60px; }
|
||||||
|
#contact + .divider { background: var(--tone-4); } /* diagonal-dark Contact->Trust, Top-Farbe an Contact angleichen */
|
||||||
|
#trust { margin-top: -1px; } /* schließt Subpixel-Lücke zum Diagonal-Divider darüber */
|
||||||
|
|
||||||
|
/* === EXCERPT FADE-MASK PATCH 2026-04-26 START === */
|
||||||
|
/* Vereinheitlicht die Karussell-Kartenhoehe ueber feste Excerpt-Hoehe */
|
||||||
|
/* + weicher Fade-out bei langen Lagen statt harter Abschneidung */
|
||||||
|
.carousel-card .demo-excerpt {
|
||||||
|
position: relative;
|
||||||
|
height: 760px;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
|
||||||
|
mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
|
||||||
|
}
|
||||||
|
@media(max-width:768px) {
|
||||||
|
.carousel-card .demo-excerpt { height: 640px; }
|
||||||
|
}
|
||||||
|
/* === EXCERPT FADE-MASK PATCH 2026-04-26 END === */
|
||||||
|
|
||||||
|
|
||||||
522
vorschau/index.html
Normale Datei
522
vorschau/index.html
Normale Datei
@@ -0,0 +1,522 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen</title>
|
||||||
|
<meta name="description" content="OSINT-Monitoring Software aus Deutschland: KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste.">
|
||||||
|
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||||
|
<link rel="canonical" href="https://aegis-sight.de/">
|
||||||
|
|
||||||
|
<!-- Open Graph / Social Sharing -->
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:site_name" content="AegisSight">
|
||||||
|
<meta property="og:title" content="AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen">
|
||||||
|
<meta property="og:description" content="KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste – Made in Germany.">
|
||||||
|
<meta property="og:url" content="https://aegis-sight.de/">
|
||||||
|
<meta property="og:image" content="https://aegis-sight.de/assets/images/og-image.png">
|
||||||
|
<meta property="og:image:width" content="1200">
|
||||||
|
<meta property="og:image:height" content="630">
|
||||||
|
<meta property="og:locale" content="de_DE">
|
||||||
|
|
||||||
|
<!-- Twitter Card -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen">
|
||||||
|
<meta name="twitter:description" content="KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste – Made in Germany.">
|
||||||
|
<meta name="twitter:image" content="https://aegis-sight.de/assets/images/og-image.png">
|
||||||
|
|
||||||
|
<!-- Schema.org Organization -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "AegisSight UG (haftungsbeschränkt)",
|
||||||
|
"alternateName": "AegisSight",
|
||||||
|
"url": "https://aegis-sight.de",
|
||||||
|
"logo": "https://aegis-sight.de/assets/images/logos/AegisSightLogo_NavyGold.svg",
|
||||||
|
"email": "info@aegis-sight.de",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "Gladbacher Straße 3-5",
|
||||||
|
"postalCode": "40764",
|
||||||
|
"addressLocality": "Langenfeld",
|
||||||
|
"addressRegion": "Nordrhein-Westfalen",
|
||||||
|
"addressCountry": "DE"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||||
|
<link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="stylesheet" href="/cookie-consent.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Password Gate -->
|
||||||
|
<style>
|
||||||
|
#login-gate{position:fixed;inset:0;z-index:10000;background:#0A1832;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Inter',system-ui,sans-serif}
|
||||||
|
#login-gate .gate-logo{width:80px;height:80px;margin-bottom:2rem}
|
||||||
|
#login-gate .gate-logo img{width:100%;height:100%;background:#fff;border-radius:12px;padding:6px}
|
||||||
|
#login-gate h1{font-size:1.6rem;font-weight:700;color:#C8A851;margin-bottom:.5rem}
|
||||||
|
#login-gate p{font-size:.95rem;color:#A0A8B8;margin-bottom:1.5rem}
|
||||||
|
#login-gate .pw-form{display:flex;gap:.5rem}
|
||||||
|
#login-gate .pw-input{padding:.7rem 1rem;border:1px solid rgba(200,168,81,.3);border-radius:6px;background:rgba(255,255,255,.05);color:#E8E8E8;font-family:inherit;font-size:.95rem;width:220px;outline:none}
|
||||||
|
#login-gate .pw-input:focus{border-color:#C8A851}
|
||||||
|
#login-gate .pw-input::placeholder{color:#5A6478}
|
||||||
|
#login-gate .pw-btn{padding:.7rem 1.2rem;border:none;border-radius:6px;background:#C8A851;color:#0A1832;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
|
||||||
|
#login-gate .pw-btn:hover{background:#D4B96A}
|
||||||
|
#login-gate .pw-error{color:#E85454;font-size:.85rem;margin-top:.75rem;display:none}
|
||||||
|
body.locked{overflow:hidden}
|
||||||
|
</style>
|
||||||
|
<div id="login-gate">
|
||||||
|
<div class="gate-logo"><img src="/assets/images/logos/AegisSightLogo_NavyGold.svg" alt="AegisSight"></div>
|
||||||
|
<h1>Vorschau</h1>
|
||||||
|
<p>Zugang nur mit Passwort</p>
|
||||||
|
<form class="pw-form" onsubmit="return checkPassword(event)">
|
||||||
|
<input type="password" class="pw-input" id="pw-input" placeholder="Passwort" autofocus>
|
||||||
|
<button type="submit" class="pw-btn">Weiter</button>
|
||||||
|
</form>
|
||||||
|
<div class="pw-error" id="pw-error">Falsches Passwort</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var PW_HASH='feab257468bdb1b836bae5bc439db625d9a1b9a56ca60e0916ab04fb04c2ec31';
|
||||||
|
function sha256(s){return crypto.subtle.digest('SHA-256',new TextEncoder().encode(s)).then(function(b){return Array.from(new Uint8Array(b)).map(function(x){return x.toString(16).padStart(2,'0')}).join('')})}
|
||||||
|
function getCookie(n){var m=document.cookie.match(new RegExp('(?:^|; )'+n+'=([^;]*)'));return m?m[1]:null}
|
||||||
|
function setCookie(n,v,d){var e=new Date();e.setTime(e.getTime()+d*864e5);document.cookie=n+'='+v+';expires='+e.toUTCString()+';path=/vorschau/;SameSite=Strict;Secure'}
|
||||||
|
function unlock(){document.getElementById('login-gate').style.display='none';document.body.classList.remove('locked')}
|
||||||
|
function checkPassword(e){e.preventDefault();sha256(document.getElementById('pw-input').value).then(function(h){if(h===PW_HASH){setCookie('vorschau_auth',h,30);unlock()}else{document.getElementById('pw-error').style.display='block';document.getElementById('pw-input').value='';document.getElementById('pw-input').focus()}});return false}
|
||||||
|
if(getCookie('vorschau_auth')===PW_HASH){unlock()}else{document.body.classList.add('locked')}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="#hero" class="nav-logo">
|
||||||
|
<img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
|
||||||
|
</a>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="#features">Funktionen</a></li>
|
||||||
|
<li><a href="#demos">Live-Lagebilder</a></li>
|
||||||
|
<li><a href="#trust">Über uns</a></li>
|
||||||
|
<li><a href="#contact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Mobile Menu -->
|
||||||
|
<div class="mobile-menu" id="mobile-menu" aria-hidden="true">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#features">Funktionen</a></li>
|
||||||
|
<li><a href="#demos">Live-Lagebilder</a></li>
|
||||||
|
<li><a href="#trust">Über uns</a></li>
|
||||||
|
<li><a href="#contact">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-overlay" id="mobile-overlay"></div>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero" id="hero">
|
||||||
|
<div class="hero-overlay"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-brand">
|
||||||
|
<h1 class="hero-title">AegisSight Monitor</h1>
|
||||||
|
<p class="hero-tagline">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, <span class="gold">vollautomatisch.</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
|
||||||
|
<!-- Slide 1: Echtzeit-Monitoring (Video) -->
|
||||||
|
<div class="hero-slide active" data-slide="0">
|
||||||
|
<div class="hero-slide-video">
|
||||||
|
<video muted playsinline preload="auto">
|
||||||
|
<source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="hero-slide-bottom">
|
||||||
|
<p class="hero-slide-example">Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.</p>
|
||||||
|
<div class="hero-slide-cta">
|
||||||
|
<a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 2: Automatischer Faktencheck (Video) -->
|
||||||
|
<div class="hero-slide" data-slide="1">
|
||||||
|
<div class="hero-slide-video">
|
||||||
|
<video muted playsinline preload="metadata">
|
||||||
|
<source src="videos/hero-slide-2-monitoring.mp4?v=3" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 3: KI-Recherche (Video) -->
|
||||||
|
<div class="hero-slide" data-slide="2">
|
||||||
|
<div class="hero-slide-video">
|
||||||
|
<video muted playsinline preload="metadata">
|
||||||
|
<source src="videos/hero-slide-3-monitoring.mp4?v=2" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="hero-slide-bottom">
|
||||||
|
<p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
|
||||||
|
<div class="hero-slide-cta">
|
||||||
|
<a href="#demos" class="btn btn-primary" onclick="positionCards(2)">Recherche-Beispiel ansehen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 4: Globale Quellenabdeckung (Video) -->
|
||||||
|
<div class="hero-slide" data-slide="3">
|
||||||
|
<div class="hero-slide-video">
|
||||||
|
<video muted playsinline preload="metadata">
|
||||||
|
<source src="videos/hero-slide-4-monitoring.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="hero-slide-bottom">
|
||||||
|
<p class="hero-slide-example">Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.</p>
|
||||||
|
<div class="hero-slide-cta">
|
||||||
|
<a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 5: Flexibel einsetzbar (Video) -->
|
||||||
|
<div class="hero-slide" data-slide="4">
|
||||||
|
<div class="hero-slide-video">
|
||||||
|
<video muted playsinline preload="metadata">
|
||||||
|
<source src="videos/hero-slide-5-monitoring.mp4?v=2" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="hero-slide-bottom">
|
||||||
|
<p class="hero-slide-example">Beispiel: Cyberangriffe auf deutsche Infrastruktur, 93 Artikel aus 41 Quellen, automatisch überwacht.</p>
|
||||||
|
<div class="hero-slide-cta">
|
||||||
|
<a href="#demos" class="btn btn-primary" onclick="positionCards(1)">Live-Beispiel ansehen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-slider-nav">
|
||||||
|
<div class="hero-slider-dots">
|
||||||
|
<button class="hero-dot active" data-slide="0" aria-label="Echtzeit-Monitoring"></button>
|
||||||
|
<button class="hero-dot" data-slide="1" aria-label="Faktencheck"></button>
|
||||||
|
<button class="hero-dot" data-slide="2" aria-label="KI-gestützte Recherche"></button>
|
||||||
|
<button class="hero-dot" data-slide="3" aria-label="Globale Abdeckung"></button>
|
||||||
|
<button class="hero-dot" data-slide="4" aria-label="Flexibel einsetzbar"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-slider-arrows">
|
||||||
|
<button class="hero-arrow hero-arrow-prev" aria-label="Vorheriger Slide">←</button>
|
||||||
|
<button class="hero-arrow hero-arrow-next" aria-label="Nächster Slide">→</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section class="section section-dark" id="features">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Was der Monitor leistet</h2>
|
||||||
|
<!-- Highlight: Faktenprüfung -->
|
||||||
|
<div class="feature-statement">
|
||||||
|
<p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
|
||||||
|
<p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-3">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
<h3>Echtzeit-Monitoring</h3>
|
||||||
|
<p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
<h3>Quellenanalyse</h3>
|
||||||
|
<p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
<h3>Geografische Verortung</h3>
|
||||||
|
<p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
<h3>Mehrsprachige Auswertung</h3>
|
||||||
|
<p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
|
||||||
|
</div>
|
||||||
|
<h3>Strukturierte Lagebilder</h3>
|
||||||
|
<p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gradient: Features -> Problem -->
|
||||||
|
<div class="divider divider-gradient-dark-to-base"></div>
|
||||||
|
|
||||||
|
<!-- Problem Statement -->
|
||||||
|
<section class="section section-base" id="problem">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
|
||||||
|
<p class="section-subtitle">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
|
||||||
|
<div class="grid-3">
|
||||||
|
<div class="problem-card">
|
||||||
|
<div class="problem-icon">
|
||||||
|
<img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
|
||||||
|
</div>
|
||||||
|
<h3>Quellenvielfalt</h3>
|
||||||
|
<p>Hunderte Nachrichtenagenturen, Telegram-Kanäle und soziale Medien in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
|
||||||
|
</div>
|
||||||
|
<div class="problem-card">
|
||||||
|
<div class="problem-icon">
|
||||||
|
<img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
|
||||||
|
</div>
|
||||||
|
<h3>Zeitdruck</h3>
|
||||||
|
<p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
|
||||||
|
</div>
|
||||||
|
<div class="problem-card">
|
||||||
|
<div class="problem-icon">
|
||||||
|
<img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
|
||||||
|
</div>
|
||||||
|
<h3>Informationsflut</h3>
|
||||||
|
<p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gradient: Problem -> Workflow -->
|
||||||
|
<div class="divider divider-gradient-base-to-alt"></div>
|
||||||
|
|
||||||
|
<!-- Solution / Workflow -->
|
||||||
|
<section class="section section-alt" id="solution">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">So funktioniert der AegisSight Monitor</h2>
|
||||||
|
<div class="workflow">
|
||||||
|
<div class="workflow-step">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h3>Erfassen</h3>
|
||||||
|
<p>Hunderte Quellen werden kontinuierlich überwacht. Nachrichtenagenturen, Telegram, Social Media und mehr.</p>
|
||||||
|
</div>
|
||||||
|
<div class="workflow-connector"></div>
|
||||||
|
<div class="workflow-step">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h3>Analysieren</h3>
|
||||||
|
<p>Meldungen werden automatisch ausgewertet, Fakten geprüft und geografisch verortet.</p>
|
||||||
|
</div>
|
||||||
|
<div class="workflow-connector"></div>
|
||||||
|
<div class="workflow-step">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h3>Berichten</h3>
|
||||||
|
<p>Strukturierte Lagebilder mit Quellenbelegen, Faktencheck und Kartenansicht. In Echtzeit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gradient: Solution -> Demos -->
|
||||||
|
<div class="divider divider-gradient-alt-to-base"></div>
|
||||||
|
|
||||||
|
<!-- Live Demos / Showcase -->
|
||||||
|
<section class="section section-base" id="demos">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Live Stats Bar -->
|
||||||
|
<div class="live-stats-bar">
|
||||||
|
<div class="live-stats-title">Großlage - Irankonflikt</div>
|
||||||
|
<div class="live-stats-row">
|
||||||
|
<div class="live-stat">
|
||||||
|
<span class="live-stat-value" id="stat-articles">...</span>
|
||||||
|
<span class="live-stat-label">Artikel</span>
|
||||||
|
</div>
|
||||||
|
<div class="live-stat">
|
||||||
|
<span class="live-stat-value" id="stat-sources">...</span>
|
||||||
|
<span class="live-stat-label">Quellen</span>
|
||||||
|
</div>
|
||||||
|
<div class="live-stat">
|
||||||
|
<span class="live-stat-value" id="stat-factchecks">...</span>
|
||||||
|
<span class="live-stat-label">Faktenchecks</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3D Carousel -->
|
||||||
|
<div class="carousel-viewport">
|
||||||
|
<button class="carousel-arrow carousel-prev" aria-label="Vorherige Lage">‹</button>
|
||||||
|
<button class="carousel-arrow carousel-next" aria-label="Nächste Lage">›</button>
|
||||||
|
<div class="carousel-track" id="carousel">
|
||||||
|
<!-- Iran Card -->
|
||||||
|
<div class="carousel-card card-live active" data-index="0" data-lage="iran-konflikt">
|
||||||
|
<div class="demo-badge">LIVE</div>
|
||||||
|
<h3 class="demo-title">Iran-Konflikt</h3>
|
||||||
|
|
||||||
|
<div class="demo-excerpt" id="demo-excerpt">
|
||||||
|
<div class="excerpt-text" id="excerpt-text">Lagebild wird geladen...</div>
|
||||||
|
</div>
|
||||||
|
<a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
|
||||||
|
</div>
|
||||||
|
<!-- Cyberangriffe -->
|
||||||
|
<div class="carousel-card card-live" data-index="1" data-lage="cyberangriffe">
|
||||||
|
<div class="demo-badge">LIVE</div>
|
||||||
|
<h3 class="demo-title">Cyberangriffe auf deutsche Infrastruktur</h3>
|
||||||
|
|
||||||
|
<div class="demo-excerpt" id="demo-excerpt-cyberangriffe">
|
||||||
|
<div class="excerpt-text" id="excerpt-text-cyberangriffe">Lagebild wird geladen...</div>
|
||||||
|
</div>
|
||||||
|
<a href="/lagen/cyberangriffe/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
|
||||||
|
</div>
|
||||||
|
<!-- Deepfakes Recherche -->
|
||||||
|
<div class="carousel-card card-live" data-index="2" data-lage="deepfakes">
|
||||||
|
<div class="demo-badge">RECHERCHE</div>
|
||||||
|
<h3 class="demo-title">Rechtliche Lage von Deepfakes in Deutschland</h3>
|
||||||
|
|
||||||
|
<div class="demo-excerpt" id="demo-excerpt-deepfakes">
|
||||||
|
<div class="excerpt-text" id="excerpt-text-deepfakes">Recherche wird geladen...</div>
|
||||||
|
</div>
|
||||||
|
<a href="/lagen/deepfakes/" class="btn btn-primary btn-block">Vollständige Recherche öffnen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-nav">
|
||||||
|
<button class="carousel-dot active" data-index="0"></button>
|
||||||
|
<button class="carousel-dot" data-index="1"></button>
|
||||||
|
<button class="carousel-dot" data-index="2"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Map -->
|
||||||
|
<div class="map-section" id="map-section">
|
||||||
|
<h3 class="map-title" id="map-title">Geografische Verortung der Meldungen</h3>
|
||||||
|
<div id="map-container"></div>
|
||||||
|
<div class="map-empty" id="map-empty" style="display:none">Kartendaten folgen</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gradient: Demos -> Contact -->
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<!-- Contact CTA -->
|
||||||
|
<section class="section section-base" id="contact">
|
||||||
|
<div class="container cta-container">
|
||||||
|
<h2 class="section-title">Interesse am AegisSight Monitor?</h2>
|
||||||
|
<p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
|
||||||
|
<button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Diagonal: Contact -> Trust -->
|
||||||
|
<div class="divider divider-diagonal-dark">
|
||||||
|
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#132844"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Trust / Unser Versprechen -->
|
||||||
|
<section class="section section-dark" id="trust">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Unser Versprechen</h2>
|
||||||
|
<div class="grid-4 trust-grid">
|
||||||
|
<div class="trust-card">
|
||||||
|
<div class="trust-icon-wrap">
|
||||||
|
<img src="/assets/images/icons/check-circle-filled.svg" alt="" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<h3>Enge Zusammenarbeit</h3>
|
||||||
|
<p>Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
|
||||||
|
</div>
|
||||||
|
<div class="trust-card">
|
||||||
|
<div class="trust-icon-wrap trust-flag">
|
||||||
|
<img src="/assets/images/icons/german-flag.svg" alt="" width="60" height="36">
|
||||||
|
</div>
|
||||||
|
<h3>Made in Germany</h3>
|
||||||
|
<p>Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
|
||||||
|
</div>
|
||||||
|
<div class="trust-card">
|
||||||
|
<div class="trust-icon-wrap">
|
||||||
|
<img src="/assets/handshake.svg" alt="" width="50" height="50">
|
||||||
|
</div>
|
||||||
|
<h3>Verlässliche Partnerschaft</h3>
|
||||||
|
<p>Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
|
||||||
|
</div>
|
||||||
|
<div class="trust-card">
|
||||||
|
<div class="trust-icon-wrap">
|
||||||
|
<img src="/assets/images/icons/shield-check.svg" alt="" width="48" height="48">
|
||||||
|
</div>
|
||||||
|
<h3>Nachhaltigkeit</h3>
|
||||||
|
<p>Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-info">
|
||||||
|
<p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
|
||||||
|
<p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="/impressum.html">Impressum</a>
|
||||||
|
<a href="/datenschutz.html">Datenschutz</a>
|
||||||
|
<a href="#" id="cookie-settings-link">Cookie-Einstellungen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="footer-copyright">© <span id="footer-year">2026</span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>document.getElementById('footer-year').textContent=new Date().getFullYear();</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Contact Modal -->
|
||||||
|
<div class="modal-overlay" id="contact-modal" style="display:none">
|
||||||
|
<div class="modal-content">
|
||||||
|
<button class="modal-close" onclick="closeContactModal()">×</button>
|
||||||
|
<h2>Kontakt aufnehmen</h2>
|
||||||
|
<p class="modal-sub">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
|
||||||
|
<form id="contact-form" onsubmit="return submitContact(event)">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="cf-name">Name</label>
|
||||||
|
<input type="text" id="cf-name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="cf-org">Organisation</label>
|
||||||
|
<input type="text" id="cf-org" name="organisation">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="cf-email">E-Mail</label>
|
||||||
|
<input type="email" id="cf-email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="cf-message">Nachricht</label>
|
||||||
|
<textarea id="cf-message" name="message" rows="4" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
|
||||||
|
</form>
|
||||||
|
<div class="form-success" id="form-success" style="display:none">
|
||||||
|
<p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
<script src="/cookie-consent.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
719
vorschau/js/app.js
Normale Datei
719
vorschau/js/app.js
Normale Datei
@@ -0,0 +1,719 @@
|
|||||||
|
/* AegisSight Monitor - Product Page v2 */
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* ==================== NAVBAR ==================== */
|
||||||
|
var navbar = document.getElementById('navbar');
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
navbar.classList.toggle('scrolled', window.scrollY > 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ==================== MOBILE MENU ==================== */
|
||||||
|
var toggle = document.querySelector('.mobile-menu-toggle');
|
||||||
|
var menu = document.getElementById('mobile-menu');
|
||||||
|
var overlay = document.getElementById('mobile-overlay');
|
||||||
|
|
||||||
|
function closeMenu() {
|
||||||
|
toggle.classList.remove('active');
|
||||||
|
menu.classList.remove('open');
|
||||||
|
overlay.classList.remove('open');
|
||||||
|
toggle.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle.addEventListener('click', function () {
|
||||||
|
var isOpen = menu.classList.contains('open');
|
||||||
|
if (isOpen) { closeMenu(); } else {
|
||||||
|
toggle.classList.add('active');
|
||||||
|
menu.classList.add('open');
|
||||||
|
overlay.classList.add('open');
|
||||||
|
toggle.setAttribute('aria-expanded', 'true');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
overlay.addEventListener('click', closeMenu);
|
||||||
|
menu.querySelectorAll('a').forEach(function (l) { l.addEventListener('click', closeMenu); });
|
||||||
|
|
||||||
|
/* ==================== SMOOTH SCROLL ==================== */
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
|
||||||
|
link.addEventListener('click', function (e) {
|
||||||
|
var t = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth' }); }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ==================== HERO SLIDER (video-driven mit Endcard) ==================== */
|
||||||
|
var heroEl = document.querySelector('.hero');
|
||||||
|
var heroSlides = document.querySelectorAll('.hero-slide');
|
||||||
|
var heroDots = document.querySelectorAll('.hero-dot');
|
||||||
|
var heroCurrentSlide = 0;
|
||||||
|
var heroEndcardTimer = null;
|
||||||
|
var heroFallbackTimer = null;
|
||||||
|
var heroIsTransitioning = false;
|
||||||
|
var HERO_ENDCARD_MS = 7000;
|
||||||
|
var HERO_FALLBACK_MS = 25000;
|
||||||
|
|
||||||
|
function heroClearTimers() {
|
||||||
|
if (heroEndcardTimer) { clearTimeout(heroEndcardTimer); heroEndcardTimer = null; }
|
||||||
|
if (heroFallbackTimer) { clearTimeout(heroFallbackTimer); heroFallbackTimer = null; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function heroPlaySlideVideo(slide) {
|
||||||
|
var v = slide && slide.querySelector('video');
|
||||||
|
if (!v) return;
|
||||||
|
try { v.currentTime = 0; } catch (err) { /* ignore */ }
|
||||||
|
var p = v.play();
|
||||||
|
if (p && typeof p.catch === 'function') p.catch(function () { /* autoplay blocked */ });
|
||||||
|
}
|
||||||
|
|
||||||
|
function heroPauseSlideVideo(slide) {
|
||||||
|
var v = slide && slide.querySelector('video');
|
||||||
|
if (v) v.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
function heroEnterEndcard() {
|
||||||
|
if (!heroSlides.length) return;
|
||||||
|
var slide = heroSlides[heroCurrentSlide];
|
||||||
|
if (!slide || slide.classList.contains('ended')) return;
|
||||||
|
slide.classList.add('ended');
|
||||||
|
if (heroEl) heroEl.classList.add('endcard');
|
||||||
|
heroClearTimers();
|
||||||
|
heroEndcardTimer = setTimeout(function () {
|
||||||
|
heroEndcardTimer = null;
|
||||||
|
heroNext();
|
||||||
|
}, HERO_ENDCARD_MS);
|
||||||
|
}
|
||||||
|
|
||||||
|
function heroStartSlide() {
|
||||||
|
var slide = heroSlides[heroCurrentSlide];
|
||||||
|
if (!slide) return;
|
||||||
|
slide.classList.remove('ended');
|
||||||
|
if (heroEl) heroEl.classList.remove('endcard');
|
||||||
|
heroPlaySlideVideo(slide);
|
||||||
|
heroClearTimers();
|
||||||
|
heroFallbackTimer = setTimeout(function () {
|
||||||
|
heroFallbackTimer = null;
|
||||||
|
heroEnterEndcard();
|
||||||
|
}, HERO_FALLBACK_MS);
|
||||||
|
}
|
||||||
|
|
||||||
|
function heroGoTo(index) {
|
||||||
|
if (heroIsTransitioning || index === heroCurrentSlide || !heroSlides.length) return;
|
||||||
|
heroIsTransitioning = true;
|
||||||
|
heroClearTimers();
|
||||||
|
|
||||||
|
var oldIndex = heroCurrentSlide;
|
||||||
|
heroSlides[oldIndex].classList.add('exiting');
|
||||||
|
heroSlides[oldIndex].classList.remove('active');
|
||||||
|
// .ended bleibt waehrend des Fade-outs erhalten - sonst blitzt das pausierte
|
||||||
|
// Video-Frame durch, waehrend die Endcard ausfadet und der Container fadet aus.
|
||||||
|
if (heroEl) heroEl.classList.remove('endcard');
|
||||||
|
if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active');
|
||||||
|
|
||||||
|
heroPauseSlideVideo(heroSlides[oldIndex]);
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
heroSlides[oldIndex].classList.remove('exiting', 'ended');
|
||||||
|
heroCurrentSlide = index;
|
||||||
|
heroSlides[heroCurrentSlide].classList.add('active');
|
||||||
|
if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');
|
||||||
|
heroStartSlide();
|
||||||
|
heroIsTransitioning = false;
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
function heroNext() {
|
||||||
|
heroGoTo((heroCurrentSlide + 1) % heroSlides.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
function heroPrev() {
|
||||||
|
heroGoTo((heroCurrentSlide - 1 + heroSlides.length) % heroSlides.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pro Video: 'ended' → Endcard-Phase starten
|
||||||
|
heroSlides.forEach(function (slide) {
|
||||||
|
var v = slide.querySelector('video');
|
||||||
|
if (!v) return;
|
||||||
|
v.addEventListener('ended', function () {
|
||||||
|
if (slide.classList.contains('active')) heroEnterEndcard();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
heroDots.forEach(function (dot, i) {
|
||||||
|
dot.addEventListener('click', function () { heroGoTo(i); });
|
||||||
|
});
|
||||||
|
|
||||||
|
var heroPrevBtn = document.querySelector('.hero-arrow-prev');
|
||||||
|
var heroNextBtn = document.querySelector('.hero-arrow-next');
|
||||||
|
if (heroPrevBtn) heroPrevBtn.addEventListener('click', heroPrev);
|
||||||
|
if (heroNextBtn) heroNextBtn.addEventListener('click', heroNext);
|
||||||
|
|
||||||
|
var heroSlider = document.querySelector('.hero-slider');
|
||||||
|
if (heroSlider) {
|
||||||
|
var heroTouchStartX = 0;
|
||||||
|
heroSlider.addEventListener('touchstart', function (e) {
|
||||||
|
heroTouchStartX = e.changedTouches[0].screenX;
|
||||||
|
}, { passive: true });
|
||||||
|
heroSlider.addEventListener('touchend', function (e) {
|
||||||
|
var diff = e.changedTouches[0].screenX - heroTouchStartX;
|
||||||
|
if (Math.abs(diff) > 50) {
|
||||||
|
if (diff < 0) heroNext(); else heroPrev();
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('visibilitychange', function () {
|
||||||
|
var slide = heroSlides[heroCurrentSlide];
|
||||||
|
if (!slide) return;
|
||||||
|
if (document.hidden) {
|
||||||
|
heroClearTimers();
|
||||||
|
heroPauseSlideVideo(slide);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (slide.classList.contains('ended')) {
|
||||||
|
heroEndcardTimer = setTimeout(function () {
|
||||||
|
heroEndcardTimer = null;
|
||||||
|
heroNext();
|
||||||
|
}, HERO_ENDCARD_MS);
|
||||||
|
} else {
|
||||||
|
var v = slide.querySelector('video');
|
||||||
|
if (v) {
|
||||||
|
var p = v.play();
|
||||||
|
if (p && typeof p.catch === 'function') p.catch(function () {});
|
||||||
|
}
|
||||||
|
heroFallbackTimer = setTimeout(function () {
|
||||||
|
heroFallbackTimer = null;
|
||||||
|
heroEnterEndcard();
|
||||||
|
}, HERO_FALLBACK_MS);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialer Start (Slide 0 ist bereits .active im HTML)
|
||||||
|
if (heroSlides.length) heroStartSlide();
|
||||||
|
|
||||||
|
/* ==================== MAP STATE ==================== */
|
||||||
|
var mapInstance = null;
|
||||||
|
var markerLayer = null;
|
||||||
|
var legendControl = null;
|
||||||
|
var lageData = {};
|
||||||
|
var dataLoaded = false;
|
||||||
|
|
||||||
|
var lageTitles = {
|
||||||
|
'iran-konflikt': 'Gro\u00dflage - Irankonflikt',
|
||||||
|
'cyberangriffe': 'Cyberangriffe auf deutsche Infrastruktur',
|
||||||
|
'deepfakes': 'Rechtliche Lage von Deepfakes in Deutschland'
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ==================== 3D CAROUSEL ==================== */
|
||||||
|
var cards = document.querySelectorAll('.carousel-card');
|
||||||
|
var dots = document.querySelectorAll('.carousel-dot');
|
||||||
|
var activeIndex = 0;
|
||||||
|
|
||||||
|
window.positionCards = function positionCards(idx) {
|
||||||
|
activeIndex = idx;
|
||||||
|
cards.forEach(function (card, i) {
|
||||||
|
card.classList.remove('active', 'left', 'right', 'hidden');
|
||||||
|
if (i === idx) card.classList.add('active');
|
||||||
|
else if (i === (idx - 1 + cards.length) % cards.length) card.classList.add('left');
|
||||||
|
else if (i === (idx + 1) % cards.length) card.classList.add('right');
|
||||||
|
else card.classList.add('hidden');
|
||||||
|
});
|
||||||
|
dots.forEach(function (dot, i) {
|
||||||
|
dot.classList.toggle('active', i === idx);
|
||||||
|
});
|
||||||
|
// Update map based on active Lage (only after data loaded)
|
||||||
|
if (!dataLoaded) return;
|
||||||
|
var lage = cards[idx].getAttribute('data-lage');
|
||||||
|
var mapSection = document.getElementById('map-section');
|
||||||
|
if (lage && lageData[lage]) {
|
||||||
|
mapSection.classList.remove('map-hidden');
|
||||||
|
showMarkers(lageData[lage].locations, lageData[lage].category_labels);
|
||||||
|
// Stats-Bar aktualisieren
|
||||||
|
var titleEl = document.querySelector('.live-stats-title');
|
||||||
|
if (titleEl) titleEl.textContent = lageTitles[lage] || lage;
|
||||||
|
countUp(document.getElementById('stat-articles'), lageData[lage].article_count);
|
||||||
|
countUp(document.getElementById('stat-sources'), lageData[lage].source_count);
|
||||||
|
countUp(document.getElementById('stat-factchecks'), lageData[lage].factcheck_count);
|
||||||
|
} else {
|
||||||
|
if (mapSection) mapSection.classList.add('map-hidden');
|
||||||
|
clearMarkers();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cards.forEach(function (card, i) {
|
||||||
|
card.addEventListener('click', function () {
|
||||||
|
if (!card.classList.contains('active')) positionCards(i);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
dots.forEach(function (dot, i) {
|
||||||
|
dot.addEventListener('click', function () { positionCards(i); });
|
||||||
|
});
|
||||||
|
|
||||||
|
positionCards(0);
|
||||||
|
|
||||||
|
// Arrow navigation
|
||||||
|
var prevBtn = document.querySelector('.carousel-prev');
|
||||||
|
var nextBtn = document.querySelector('.carousel-next');
|
||||||
|
if (prevBtn) prevBtn.addEventListener('click', function () {
|
||||||
|
positionCards((activeIndex - 1 + cards.length) % cards.length);
|
||||||
|
});
|
||||||
|
if (nextBtn) nextBtn.addEventListener('click', function () {
|
||||||
|
positionCards((activeIndex + 1) % cards.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ==================== NEUESTE ENTWICKLUNGEN (Live-Monitoring) ==================== */
|
||||||
|
function htmlEscape(s) {
|
||||||
|
return String(s == null ? '' : s)
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"');
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeSourceName(s) {
|
||||||
|
return String(s || '').toLowerCase().replace(/^(der|die|das)\s+/, '').replace(/\s+/g, ' ').trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderLatestDevelopments(text, sources) {
|
||||||
|
if (!text) return null;
|
||||||
|
sources = Array.isArray(sources) ? sources : [];
|
||||||
|
|
||||||
|
var lines = text.split('\n').map(function (l) { return l.trim(); })
|
||||||
|
.filter(function (l) { return l && (l.charAt(0) === '-' || l.charAt(0) === '['); });
|
||||||
|
if (!lines.length) return null;
|
||||||
|
|
||||||
|
var bulletRe = /^(?:-\s*)?\[\s*(\d{1,2})\.(\d{1,2})\.?(?:\d{2,4})?\s+(\d{1,2}:\d{2})\s*\]\s*(.+?)\s*$/;
|
||||||
|
var trailingRe = /\s*\{([^{}]+)\}\s*\.?\s*$/;
|
||||||
|
var citationRe = /\[(\d+[a-z]?)\]/g;
|
||||||
|
var junkRe = /^(unbekannt|unknown|n\/?a|keine|keine quelle|tba)$/i;
|
||||||
|
|
||||||
|
function buildPill(src, name) {
|
||||||
|
var disp = (src && src.name) || name;
|
||||||
|
var url = (src && src.url) || '';
|
||||||
|
var tgMatch = url.match(/^https?:\/\/t\.me\/([^\/?#]+)/i);
|
||||||
|
var label = tgMatch ? disp + ' (t.me/' + tgMatch[1] + ')' : disp;
|
||||||
|
var e = htmlEscape(label);
|
||||||
|
var titleEsc = htmlEscape(disp);
|
||||||
|
if (src && src.url) {
|
||||||
|
return '<a href="' + htmlEscape(src.url) + '" target="_blank" rel="noopener" class="dev-source-pill" title="' + titleEsc + '">' + e + '</a>';
|
||||||
|
}
|
||||||
|
return '<span class="dev-source-pill" title="' + titleEsc + '">' + e + '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function lookupByName(name) {
|
||||||
|
var n = normalizeSourceName(name);
|
||||||
|
if (!n) return null;
|
||||||
|
var exact = sources.find(function (s) { return normalizeSourceName(s.name) === n; });
|
||||||
|
if (exact) return exact;
|
||||||
|
return sources.find(function (s) {
|
||||||
|
var sn = normalizeSourceName(s.name);
|
||||||
|
return sn && (sn.indexOf(n) !== -1 || n.indexOf(sn) !== -1);
|
||||||
|
}) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cards = [];
|
||||||
|
for (var i = 0; i < lines.length; i++) {
|
||||||
|
var m = bulletRe.exec(lines[i]);
|
||||||
|
if (!m) continue;
|
||||||
|
var date = String(m[1]).padStart(2, '0') + '.' + String(m[2]).padStart(2, '0') + '.';
|
||||||
|
var time = m[3];
|
||||||
|
var body = m[4];
|
||||||
|
|
||||||
|
var pills = '';
|
||||||
|
var t = trailingRe.exec(body);
|
||||||
|
if (t) {
|
||||||
|
body = body.replace(trailingRe, '').trim();
|
||||||
|
var items = t[1].split(',').map(function (n) { return n.trim(); }).filter(Boolean);
|
||||||
|
var seen = {};
|
||||||
|
pills = items.map(function (item) {
|
||||||
|
var pipeIdx = item.indexOf('|');
|
||||||
|
var itemName = pipeIdx >= 0 ? item.slice(0, pipeIdx).trim() : item.trim();
|
||||||
|
var itemUrl = pipeIdx >= 0 ? item.slice(pipeIdx + 1).trim() : '';
|
||||||
|
if (!itemName || junkRe.test(itemName)) return '';
|
||||||
|
var key = normalizeSourceName(itemName);
|
||||||
|
if (seen[key]) return '';
|
||||||
|
seen[key] = true;
|
||||||
|
if (itemUrl) {
|
||||||
|
return buildPill({ name: itemName, url: itemUrl }, itemName);
|
||||||
|
}
|
||||||
|
return buildPill(lookupByName(itemName), itemName);
|
||||||
|
}).filter(Boolean).join('');
|
||||||
|
}
|
||||||
|
if (!pills) {
|
||||||
|
var nums = [];
|
||||||
|
var cm;
|
||||||
|
while ((cm = citationRe.exec(body)) !== null) {
|
||||||
|
if (nums.indexOf(cm[1]) === -1) nums.push(cm[1]);
|
||||||
|
}
|
||||||
|
citationRe.lastIndex = 0;
|
||||||
|
if (nums.length) {
|
||||||
|
body = body.replace(citationRe, '').replace(/\s+/g, ' ').trim();
|
||||||
|
pills = nums.map(function (num) {
|
||||||
|
var src = sources.find(function (s) { return String(s.nr) === num || Number(s.nr) === Number(num); });
|
||||||
|
return src ? buildPill(src, src.name) : '';
|
||||||
|
}).filter(Boolean).join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var head = '<div class="dev-bullet-head">'
|
||||||
|
+ '<span class="dev-sources">' + pills + '</span>'
|
||||||
|
+ '<span class="dev-time">' + htmlEscape(time) + ' \u00b7 ' + htmlEscape(date) + '</span>'
|
||||||
|
+ '</div>';
|
||||||
|
cards.push('<div class="dev-bullet">' + head + '<div class="dev-body">' + htmlEscape(body) + '</div></div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!cards.length) return null;
|
||||||
|
return '<div class="dev-list-heading">Neueste Entwicklungen</div>'
|
||||||
|
+ '<div class="dev-list">' + cards.join('') + '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== SIMPLE MARKDOWN ==================== */
|
||||||
|
function mdToHtml(md) {
|
||||||
|
if (!md) return '';
|
||||||
|
var lines = md.split('\n');
|
||||||
|
var html = '';
|
||||||
|
var inList = false;
|
||||||
|
for (var i = 0; i < lines.length; i++) {
|
||||||
|
var line = lines[i].trim();
|
||||||
|
if (!line) {
|
||||||
|
if (inList) { html += '</ul>'; inList = false; }
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
line = line.replace(/\[(\d+[a-z]?)\]/g, '');
|
||||||
|
line = line.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||||
|
if (/^## /.test(line)) {
|
||||||
|
if (inList) { html += '</ul>'; inList = false; }
|
||||||
|
html += '<h2>' + line.replace(/^## /, '') + '</h2>';
|
||||||
|
} else if (/^### /.test(line)) {
|
||||||
|
if (inList) { html += '</ul>'; inList = false; }
|
||||||
|
html += '<h3>' + line.replace(/^### /, '') + '</h3>';
|
||||||
|
} else if (/^- /.test(line)) {
|
||||||
|
if (!inList) { html += '<ul>'; inList = true; }
|
||||||
|
html += '<li>' + line.replace(/^- /, '') + '</li>';
|
||||||
|
} else {
|
||||||
|
if (inList) { html += '</ul>'; inList = false; }
|
||||||
|
html += '<p>' + line + '</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (inList) html += '</ul>';
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== COUNT-UP ANIMATION ==================== */
|
||||||
|
function countUp(el, target) {
|
||||||
|
if (!el) return;
|
||||||
|
if (!target) { el.textContent = '0'; return; }
|
||||||
|
var duration = 1200;
|
||||||
|
var startTime = null;
|
||||||
|
function step(ts) {
|
||||||
|
if (!startTime) startTime = ts;
|
||||||
|
var progress = Math.min((ts - startTime) / duration, 1);
|
||||||
|
var ease = 1 - Math.pow(1 - progress, 3);
|
||||||
|
el.textContent = Math.floor(ease * target).toLocaleString('de-DE');
|
||||||
|
if (progress < 1) requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== LIVE DATA ==================== */
|
||||||
|
function timeAgo(dateStr) {
|
||||||
|
var diffMin = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
|
||||||
|
if (diffMin < 1) return 'Gerade eben aktualisiert';
|
||||||
|
if (diffMin < 60) return 'Aktualisiert vor ' + diffMin + ' Min.';
|
||||||
|
var diffH = Math.floor(diffMin / 60);
|
||||||
|
if (diffH < 24) return 'Aktualisiert vor ' + diffH + ' Std.';
|
||||||
|
var diffD = Math.floor(diffH / 24);
|
||||||
|
return 'Aktualisiert vor ' + diffD + (diffD === 1 ? ' Tag' : ' Tagen');
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadLiveData() {
|
||||||
|
fetch('/lagen/iran-konflikt/data/summary.json?t=' + Date.now())
|
||||||
|
.then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||||
|
.then(function (data) {
|
||||||
|
var inc = data.incident || {};
|
||||||
|
// summary.json has flat structure
|
||||||
|
|
||||||
|
var ea = document.getElementById('stat-articles');
|
||||||
|
var es = document.getElementById('stat-sources');
|
||||||
|
var ef = document.getElementById('stat-factchecks');
|
||||||
|
countUp(ea, inc.article_count);
|
||||||
|
countUp(es, inc.source_count);
|
||||||
|
countUp(ef, inc.factcheck_count);
|
||||||
|
|
||||||
|
// Excerpt: pre-extracted in summary.json
|
||||||
|
var excerptEl = document.getElementById('excerpt-text');
|
||||||
|
if (excerptEl && data.zusammenfassung) {
|
||||||
|
excerptEl.innerHTML = mdToHtml(data.zusammenfassung);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store data and init map
|
||||||
|
lageData['iran-konflikt'] = {
|
||||||
|
locations: data.locations || [],
|
||||||
|
category_labels: data.category_labels || {},
|
||||||
|
article_count: inc.article_count || 0,
|
||||||
|
source_count: inc.source_count || 0,
|
||||||
|
factcheck_count: inc.factcheck_count || 0
|
||||||
|
};
|
||||||
|
dataLoaded = true;
|
||||||
|
createMap();
|
||||||
|
var mapSection = document.getElementById('map-section');
|
||||||
|
if (mapSection) mapSection.classList.remove('map-hidden');
|
||||||
|
showMarkers(data.locations || [], data.category_labels || {});
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== LEAFLET MAP ==================== */
|
||||||
|
function clearMarkers() {
|
||||||
|
if (markerLayer) { mapInstance.removeLayer(markerLayer); markerLayer = null; }
|
||||||
|
if (legendControl && mapInstance) { mapInstance.removeControl(legendControl); legendControl = null; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function createMap() {
|
||||||
|
if (mapInstance) return;
|
||||||
|
var mapEl = document.getElementById('map-container');
|
||||||
|
if (!mapEl || typeof L === 'undefined') return;
|
||||||
|
|
||||||
|
mapInstance = L.map(mapEl, {
|
||||||
|
center: [33.0, 48.0], zoom: 5, zoomControl: true, scrollWheelZoom: true,
|
||||||
|
minZoom: 2, maxBounds: [[-85, -180], [85, 180]], maxBoundsViscosity: 1.0
|
||||||
|
});
|
||||||
|
|
||||||
|
L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||||
|
maxZoom: 19, noWrap: true
|
||||||
|
}).addTo(mapInstance);
|
||||||
|
|
||||||
|
setTimeout(function () { mapInstance.invalidateSize(); }, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function pulseIcon(color) {
|
||||||
|
return L.divIcon({
|
||||||
|
className: '',
|
||||||
|
html: '<div class="pulse-marker-wrapper">'
|
||||||
|
+ '<div class="pulse-marker-ring" style="border-color:' + color + '"></div>'
|
||||||
|
+ '<div class="pulse-marker-ring" style="border-color:' + color + '"></div>'
|
||||||
|
+ '<div class="pulse-marker-dot" style="background:' + color + ';box-shadow:0 0 10px ' + color + '"></div>'
|
||||||
|
+ '</div>',
|
||||||
|
iconSize: [20, 20], iconAnchor: [10, 10], popupAnchor: [0, -12]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildPopup(loc) {
|
||||||
|
var html = '<strong style="color:#E8ECF4;">' + (loc.name || '') + '</strong>';
|
||||||
|
if (loc.country_code) html += ' <span style="color:#8896AB;font-size:0.8rem;">(' + loc.country_code + ')</span>';
|
||||||
|
html += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (loc.article_count || 0) + ' Artikel</span>';
|
||||||
|
if (loc.top_articles && loc.top_articles.length > 0) {
|
||||||
|
html += '<div style="margin-top:6px;border-top:1px solid #1E2D45;padding-top:6px;">';
|
||||||
|
loc.top_articles.forEach(function (a) {
|
||||||
|
var hl = (a.headline || '').replace(/\*\*/g, '');
|
||||||
|
if (hl.length > 60) hl = hl.substring(0, 60) + '\u2026';
|
||||||
|
if (a.url) {
|
||||||
|
html += '<a href="' + a.url + '" target="_blank" rel="noopener" style="color:#C8A851;font-size:0.8rem;display:block;margin-top:3px;text-decoration:none;">' + hl + '</a>';
|
||||||
|
} else {
|
||||||
|
html += '<span style="color:#8896AB;font-size:0.8rem;display:block;margin-top:3px;">' + hl + '</span>';
|
||||||
|
}
|
||||||
|
html += '<span style="color:#556B7A;font-size:0.7rem;">' + (a.source || '') + '</span>';
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showMarkers(locations, apiLabels) {
|
||||||
|
if (!mapInstance) createMap();
|
||||||
|
clearMarkers();
|
||||||
|
|
||||||
|
var categoryColors = {
|
||||||
|
primary: '#ef4444',
|
||||||
|
secondary: '#f59e0b',
|
||||||
|
tertiary: '#3b82f6',
|
||||||
|
mentioned: '#7b7b7b'
|
||||||
|
};
|
||||||
|
|
||||||
|
var defaultLabels = {
|
||||||
|
primary: 'Hauptgeschehen',
|
||||||
|
secondary: 'Reaktionen',
|
||||||
|
tertiary: 'Beteiligte',
|
||||||
|
mentioned: 'Erw\u00e4hnt'
|
||||||
|
};
|
||||||
|
|
||||||
|
var categoryLabels = {};
|
||||||
|
['primary', 'secondary', 'tertiary', 'mentioned'].forEach(function (k) {
|
||||||
|
categoryLabels[k] = (apiLabels && apiLabels[k]) || defaultLabels[k];
|
||||||
|
});
|
||||||
|
|
||||||
|
var clusterGroup = L.markerClusterGroup({
|
||||||
|
maxClusterRadius: 50,
|
||||||
|
spiderfyOnMaxZoom: true,
|
||||||
|
showCoverageOnHover: false,
|
||||||
|
zoomToBoundsOnClick: true,
|
||||||
|
disableClusteringAtZoom: 10
|
||||||
|
});
|
||||||
|
|
||||||
|
var usedCategories = {};
|
||||||
|
var bounds = [];
|
||||||
|
|
||||||
|
locations.forEach(function (loc) {
|
||||||
|
if (!loc.lat || !loc.lon) return;
|
||||||
|
var cat = loc.category || 'mentioned';
|
||||||
|
var color = categoryColors[cat] || '#7b7b7b';
|
||||||
|
usedCategories[cat] = true;
|
||||||
|
|
||||||
|
var marker;
|
||||||
|
if (cat === 'primary' || cat === 'secondary') {
|
||||||
|
marker = L.marker([loc.lat, loc.lon], { icon: pulseIcon(color) });
|
||||||
|
} else {
|
||||||
|
marker = L.circleMarker([loc.lat, loc.lon], {
|
||||||
|
radius: 5, fillColor: color, fillOpacity: 0.7,
|
||||||
|
color: color, weight: 1, opacity: 0.9
|
||||||
|
});
|
||||||
|
}
|
||||||
|
marker.bindPopup(buildPopup(loc), { maxWidth: 300 });
|
||||||
|
clusterGroup.addLayer(marker);
|
||||||
|
bounds.push([loc.lat, loc.lon]);
|
||||||
|
});
|
||||||
|
|
||||||
|
markerLayer = clusterGroup;
|
||||||
|
mapInstance.addLayer(markerLayer);
|
||||||
|
|
||||||
|
var legend = L.control({ position: 'bottomright' });
|
||||||
|
legend.onAdd = function () {
|
||||||
|
var div = L.DomUtil.create('div');
|
||||||
|
div.style.cssText = 'background:#151D2E;padding:10px 14px;border-radius:4px;border:1px solid #1E2D45;box-shadow:0 2px 8px rgba(0,0,0,0.3);font-size:0.8rem;line-height:1.8;color:#E8ECF4;';
|
||||||
|
var html = '<strong style="color:#C8A851;">Legende</strong><br>';
|
||||||
|
['primary', 'secondary', 'tertiary', 'mentioned'].forEach(function (cat) {
|
||||||
|
if (usedCategories[cat]) {
|
||||||
|
html += '<span style="color:' + categoryColors[cat] + ';">●</span> ' + categoryLabels[cat] + '<br>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
div.innerHTML = html;
|
||||||
|
return div;
|
||||||
|
};
|
||||||
|
legendControl = legend;
|
||||||
|
legendControl.addTo(mapInstance);
|
||||||
|
|
||||||
|
if (bounds.length > 0) {
|
||||||
|
mapInstance.fitBounds(bounds, { padding: [30, 30], maxZoom: 7 });
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(function () { mapInstance.invalidateSize(); }, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== CONTACT MODAL ==================== */
|
||||||
|
window.openContactModal = function () {
|
||||||
|
document.getElementById('contact-modal').style.display = 'flex';
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
if (window.umami) umami.track('contact_modal_open');
|
||||||
|
};
|
||||||
|
|
||||||
|
window.closeContactModal = function () {
|
||||||
|
document.getElementById('contact-modal').style.display = 'none';
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Close on overlay click
|
||||||
|
var modalOverlay = document.getElementById('contact-modal');
|
||||||
|
if (modalOverlay) {
|
||||||
|
modalOverlay.addEventListener('click', function (e) {
|
||||||
|
if (e.target === modalOverlay) closeContactModal();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close on Escape
|
||||||
|
document.addEventListener('keydown', function (e) {
|
||||||
|
if (e.key === 'Escape' && modalOverlay && modalOverlay.style.display === 'flex') {
|
||||||
|
closeContactModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submit -> server-side SMTP
|
||||||
|
window.submitContact = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var btn = e.target.querySelector('button[type="submit"]');
|
||||||
|
if (btn) { btn.disabled = true; btn.textContent = 'Wird gesendet...'; }
|
||||||
|
|
||||||
|
fetch('/api/contact', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: document.getElementById('cf-name').value,
|
||||||
|
organisation: document.getElementById('cf-org').value,
|
||||||
|
email: document.getElementById('cf-email').value,
|
||||||
|
message: document.getElementById('cf-message').value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
|
||||||
|
.then(function (res) {
|
||||||
|
if (res.ok) {
|
||||||
|
document.getElementById('contact-form').style.display = 'none';
|
||||||
|
document.getElementById('form-success').style.display = 'block';
|
||||||
|
if (window.umami) umami.track('contact_form_success');
|
||||||
|
} else {
|
||||||
|
alert(res.data.error || 'Fehler beim Senden');
|
||||||
|
if (btn) { btn.disabled = false; btn.textContent = 'Nachricht senden'; }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
alert('Verbindungsfehler. Bitte versuchen Sie es erneut.');
|
||||||
|
if (btn) { btn.disabled = false; btn.textContent = 'Nachricht senden'; }
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ==================== LOAD DEEPFAKES DATA ==================== */
|
||||||
|
function loadDeepfakesData() {
|
||||||
|
fetch('/lagen/deepfakes/data/summary.json?t=' + Date.now())
|
||||||
|
.then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||||
|
.then(function (data) {
|
||||||
|
var excerptEl = document.getElementById('excerpt-text-deepfakes');
|
||||||
|
if (excerptEl && data.zusammenfassung) {
|
||||||
|
var lines = data.zusammenfassung.split("\n");
|
||||||
|
var filtered = lines.filter(function(l) { var t = l.trim(); return !t || t.indexOf("## ") === 0 || t.indexOf("- ") === 0; });
|
||||||
|
excerptEl.innerHTML = mdToHtml(filtered.join("\n"));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store data for map
|
||||||
|
lageData['deepfakes'] = {
|
||||||
|
locations: data.locations || [],
|
||||||
|
category_labels: data.category_labels || {},
|
||||||
|
article_count: (data.incident || {}).article_count || 0,
|
||||||
|
source_count: (data.incident || {}).source_count || 0,
|
||||||
|
factcheck_count: (data.incident || {}).factcheck_count || 0
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
var el = document.getElementById('excerpt-text-deepfakes');
|
||||||
|
if (el) el.textContent = 'Daten konnten nicht geladen werden.';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== LOAD CYBERANGRIFFE DATA ==================== */
|
||||||
|
function loadCyberangriffeData() {
|
||||||
|
fetch('/lagen/cyberangriffe/data/summary.json?t=' + Date.now())
|
||||||
|
.then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||||
|
.then(function (data) {
|
||||||
|
var excerptEl = document.getElementById('excerpt-text-cyberangriffe');
|
||||||
|
if (excerptEl && data.zusammenfassung) {
|
||||||
|
excerptEl.innerHTML = mdToHtml(data.zusammenfassung);
|
||||||
|
}
|
||||||
|
lageData['cyberangriffe'] = {
|
||||||
|
locations: data.locations || [],
|
||||||
|
category_labels: data.category_labels || {},
|
||||||
|
article_count: (data.incident || {}).article_count || 0,
|
||||||
|
source_count: (data.incident || {}).source_count || 0,
|
||||||
|
factcheck_count: (data.incident || {}).factcheck_count || 0
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
var el = document.getElementById('excerpt-text-cyberangriffe');
|
||||||
|
if (el) el.textContent = 'Daten konnten nicht geladen werden.';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==================== INIT ==================== */
|
||||||
|
loadLiveData();
|
||||||
|
loadDeepfakesData();
|
||||||
|
loadCyberangriffeData();
|
||||||
|
})();
|
||||||
BIN
vorschau/videos/hero-slide-1-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-1-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-2-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-2-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-3-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-3-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-4-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-4-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-5-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-5-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
In neuem Issue referenzieren
Einen Benutzer sperren