689 Zeilen
24 KiB
JavaScript
689 Zeilen
24 KiB
JavaScript
// Particle Canvas Animation
|
|
const canvas = document.getElementById('particleCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
const particles = [];
|
|
const particleCount = 100;
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = Math.random() * 3 + 1;
|
|
this.speedX = Math.random() * 3 - 1.5;
|
|
this.speedY = Math.random() * 3 - 1.5;
|
|
this.opacity = Math.random() * 0.5 + 0.2;
|
|
}
|
|
|
|
update() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
|
|
if (this.x > canvas.width) this.x = 0;
|
|
else if (this.x < 0) this.x = canvas.width;
|
|
|
|
if (this.y > canvas.height) this.y = 0;
|
|
else if (this.y < 0) this.y = canvas.height;
|
|
}
|
|
|
|
draw() {
|
|
ctx.fillStyle = `rgba(0, 212, 255, ${this.opacity})`;
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
for (let i = 0; i < particleCount; i++) {
|
|
particles.push(new Particle());
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (let i = 0; i < particles.length; i++) {
|
|
particles[i].update();
|
|
particles[i].draw();
|
|
}
|
|
|
|
connectParticles();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
function connectParticles() {
|
|
for (let a = 0; a < particles.length; a++) {
|
|
for (let b = a; b < particles.length; b++) {
|
|
const distance = Math.sqrt(
|
|
Math.pow(particles[a].x - particles[b].x, 2) +
|
|
Math.pow(particles[a].y - particles[b].y, 2)
|
|
);
|
|
|
|
if (distance < 100) {
|
|
ctx.strokeStyle = `rgba(0, 212, 255, ${0.2 * (1 - distance / 100)})`;
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(particles[a].x, particles[a].y);
|
|
ctx.lineTo(particles[b].x, particles[b].y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
init();
|
|
animate();
|
|
|
|
// Resize canvas
|
|
window.addEventListener('resize', () => {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
});
|
|
|
|
// Navbar scroll effect - DEAKTIVIERT
|
|
// const navbar = document.querySelector('.navbar');
|
|
// window.addEventListener('scroll', () => {
|
|
// if (window.scrollY > 50) {
|
|
// navbar.classList.add('scrolled');
|
|
// } else {
|
|
// navbar.classList.remove('scrolled');
|
|
// }
|
|
// });
|
|
|
|
// Smooth scrolling
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Interactive Icon Animation
|
|
const icon = document.getElementById('interactiveIcon');
|
|
if (icon) {
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
const rect = icon.getBoundingClientRect();
|
|
const centerX = rect.left + rect.width / 2;
|
|
const centerY = rect.top + rect.height / 2;
|
|
|
|
mouseX = (e.clientX - centerX) / 20;
|
|
mouseY = (e.clientY - centerY) / 20;
|
|
|
|
icon.style.transform = `perspective(1000px) rotateY(${mouseX}deg) rotateX(${-mouseY}deg)`;
|
|
});
|
|
}
|
|
|
|
// Trust Indicators Counter Animation
|
|
const counters = document.querySelectorAll('.indicator-value');
|
|
const speed = 200;
|
|
|
|
const animateCounter = (counter) => {
|
|
const target = +counter.getAttribute('data-target');
|
|
const increment = target / speed;
|
|
|
|
const updateCounter = () => {
|
|
const current = +counter.innerText.replace('%', '').replace('+', '').replace('/7', '');
|
|
|
|
if (current < target) {
|
|
counter.innerText = Math.ceil(current + increment);
|
|
setTimeout(updateCounter, 10);
|
|
} else {
|
|
if (counter.getAttribute('data-target') === '99.9') {
|
|
counter.innerText = target + '%';
|
|
} else if (counter.getAttribute('data-target') === '500') {
|
|
counter.innerText = target + '+';
|
|
} else if (counter.getAttribute('data-target') === '24') {
|
|
counter.innerText = target + '/7';
|
|
}
|
|
}
|
|
};
|
|
|
|
updateCounter();
|
|
};
|
|
|
|
// Intersection Observer for animations
|
|
const observerOptions = {
|
|
threshold: 0.3,
|
|
rootMargin: '0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
// Animate counters
|
|
if (entry.target.classList.contains('trust-indicators')) {
|
|
counters.forEach(counter => animateCounter(counter));
|
|
observer.unobserve(entry.target);
|
|
}
|
|
|
|
// Animate timeline items with new effect
|
|
if (entry.target.classList.contains('timeline')) {
|
|
const items = entry.target.querySelectorAll('.timeline-item');
|
|
items.forEach((item, index) => {
|
|
setTimeout(() => {
|
|
item.classList.add('visible');
|
|
}, index * 300);
|
|
});
|
|
observer.unobserve(entry.target);
|
|
}
|
|
|
|
// Animate feature nodes
|
|
if (entry.target.classList.contains('feature-nodes')) {
|
|
const nodes = entry.target.querySelectorAll('.node');
|
|
nodes.forEach((node, index) => {
|
|
setTimeout(() => {
|
|
node.style.opacity = '1';
|
|
node.style.transform = 'translateY(0)';
|
|
}, index * 150);
|
|
});
|
|
observer.unobserve(entry.target);
|
|
}
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe elements
|
|
document.querySelector('.trust-indicators').style.opacity = '0';
|
|
observer.observe(document.querySelector('.trust-indicators'));
|
|
observer.observe(document.querySelector('.timeline'));
|
|
|
|
// Set initial states for feature nodes
|
|
document.querySelectorAll('.node').forEach(node => {
|
|
node.style.opacity = '0';
|
|
node.style.transform = 'translateY(30px)';
|
|
node.style.transition = 'all 0.6s ease';
|
|
});
|
|
observer.observe(document.querySelector('.feature-nodes'));
|
|
|
|
// Language Toggle
|
|
const langToggle = document.querySelector('.lang-toggle');
|
|
const translations = {
|
|
de: {
|
|
features: 'Funktionen',
|
|
security: 'Sicherheit',
|
|
about: 'Über uns',
|
|
contact: 'Kontakt',
|
|
requestDemo: 'Demo anfordern',
|
|
heroTitle: 'SICHERHEIT MADE IN GERMANY',
|
|
heroText: 'Fortschrittliche Software für moderne Strafverfolgung',
|
|
discoverMore: 'Entdecken Sie mehr',
|
|
liveDemo: 'Live-Demo',
|
|
availability: 'Verfügbarkeit',
|
|
trustedBy: 'Behörden vertrauen uns',
|
|
support: 'Support',
|
|
digitalBeat: 'Der Digitale Takt',
|
|
dayWithIntelSight: 'Ein Tag mit IntelSight',
|
|
shiftStart: 'Schichtbeginn',
|
|
shiftStartDesc: 'Automatische Zusammenfassung der Nacht-Ereignisse',
|
|
realTimeAnalysis: 'Echtzeit-Analyse',
|
|
realTimeAnalysisDesc: 'KI-gestützte Mustererkennung in laufenden Fällen',
|
|
preventiveSecurity: 'Präventive Sicherheit',
|
|
preventiveSecurityDesc: 'Vorhersage-Algorithmen identifizieren Risikobereiche',
|
|
dailyReport: 'Tagesbericht',
|
|
dailyReportDesc: 'Automatisierte Dokumentation und Übergabe',
|
|
intelligenceViz: 'Intelligenz visualisiert',
|
|
encryption: 'Ende-zu-Ende Verschlüsselung',
|
|
encryptionDesc: 'Militärgrade Sicherheit für sensible Daten',
|
|
aiAnalysis: 'KI-Analyse',
|
|
aiAnalysisDesc: 'Mustererkennung in Echtzeit',
|
|
integration: 'Nahtlose Integration',
|
|
integrationDesc: 'Verbindung zu bestehenden Systemen',
|
|
compliance: '100% DSGVO-konform',
|
|
complianceDesc: 'Entwickelt nach deutschem Datenschutzrecht',
|
|
germanEngineering: 'Deutsche Ingenieurskunst',
|
|
speed: 'Geschwindigkeit',
|
|
speedDesc: 'Millisekunden-Reaktionszeit bei kritischen Alarmen',
|
|
precision: 'Präzision',
|
|
precisionDesc: '99.97% Genauigkeit bei der Datenanalyse',
|
|
reliability: 'Zuverlässigkeit',
|
|
reliabilityDesc: 'Ausfallsichere Redundanz-Systeme',
|
|
commandCenter: 'Kommandozentrale',
|
|
overview: 'Übersicht',
|
|
analysis: 'Analyse',
|
|
reports: 'Berichte',
|
|
threatLevel: 'Bedrohungsstufe',
|
|
low: 'NIEDRIG',
|
|
activeCases: 'Aktive Fälle',
|
|
responseTime: 'Ø Reaktionszeit',
|
|
deploymentMap: 'Einsatzkarte',
|
|
ctaTitle: 'Bereit für die Zukunft der Strafverfolgung?',
|
|
ctaSubtitle: 'Erleben Sie IntelSight in Aktion',
|
|
scheduleDemo: 'Demo vereinbaren',
|
|
getInTouch: 'Kontakt aufnehmen',
|
|
legal: 'Rechtliches',
|
|
imprint: 'Impressum',
|
|
privacy: 'Datenschutz',
|
|
terms: 'AGB',
|
|
contact: 'Kontakt',
|
|
allRights: 'Alle Rechte vorbehalten.'
|
|
},
|
|
en: {
|
|
features: 'Features',
|
|
security: 'Security',
|
|
about: 'About',
|
|
contact: 'Contact',
|
|
requestDemo: 'Request Demo',
|
|
heroTitle: 'SECURITY MADE IN GERMANY',
|
|
heroText: 'Advanced Software for Modern Law Enforcement',
|
|
discoverMore: 'Discover More',
|
|
liveDemo: 'Live Demo',
|
|
availability: 'Availability',
|
|
trustedBy: 'Authorities trust us',
|
|
support: 'Support',
|
|
digitalBeat: 'The Digital Beat',
|
|
dayWithIntelSight: 'A Day with IntelSight',
|
|
shiftStart: 'Shift Start',
|
|
shiftStartDesc: 'Automatic summary of night events',
|
|
realTimeAnalysis: 'Real-time Analysis',
|
|
realTimeAnalysisDesc: 'AI-powered pattern recognition in ongoing cases',
|
|
preventiveSecurity: 'Preventive Security',
|
|
preventiveSecurityDesc: 'Predictive algorithms identify risk areas',
|
|
dailyReport: 'Daily Report',
|
|
dailyReportDesc: 'Automated documentation and handover',
|
|
intelligenceViz: 'Intelligence Visualized',
|
|
encryption: 'End-to-End Encryption',
|
|
encryptionDesc: 'Military-grade security for sensitive data',
|
|
aiAnalysis: 'AI Analysis',
|
|
aiAnalysisDesc: 'Real-time pattern recognition',
|
|
integration: 'Seamless Integration',
|
|
integrationDesc: 'Connection to existing systems',
|
|
compliance: '100% GDPR Compliant',
|
|
complianceDesc: 'Developed according to German data protection law',
|
|
germanEngineering: 'German Engineering',
|
|
speed: 'Speed',
|
|
speedDesc: 'Millisecond response time for critical alerts',
|
|
precision: 'Precision',
|
|
precisionDesc: '99.97% accuracy in data analysis',
|
|
reliability: 'Reliability',
|
|
reliabilityDesc: 'Fail-safe redundancy systems',
|
|
commandCenter: 'Command Center',
|
|
overview: 'Overview',
|
|
analysis: 'Analysis',
|
|
reports: 'Reports',
|
|
threatLevel: 'Threat Level',
|
|
low: 'LOW',
|
|
activeCases: 'Active Cases',
|
|
responseTime: 'Avg Response Time',
|
|
deploymentMap: 'Deployment Map',
|
|
ctaTitle: 'Ready for the Future of Law Enforcement?',
|
|
ctaSubtitle: 'Experience IntelSight in Action',
|
|
scheduleDemo: 'Schedule Demo',
|
|
getInTouch: 'Get in Touch',
|
|
legal: 'Legal',
|
|
imprint: 'Imprint',
|
|
privacy: 'Privacy',
|
|
terms: 'Terms',
|
|
contact: 'Contact',
|
|
allRights: 'All rights reserved.'
|
|
}
|
|
};
|
|
|
|
let currentLang = 'de';
|
|
|
|
langToggle.addEventListener('click', () => {
|
|
currentLang = currentLang === 'de' ? 'en' : 'de';
|
|
langToggle.textContent = currentLang === 'de' ? 'DE | EN' : 'EN | DE';
|
|
langToggle.setAttribute('data-lang', currentLang);
|
|
updateLanguage();
|
|
});
|
|
|
|
function updateLanguage() {
|
|
const t = translations[currentLang];
|
|
|
|
// Navigation
|
|
document.querySelector('.nav-menu li:nth-child(1) a').textContent = t.features;
|
|
document.querySelector('.nav-menu li:nth-child(2) a').textContent = t.security;
|
|
document.querySelector('.nav-menu li:nth-child(3) a').textContent = t.about;
|
|
document.querySelector('.nav-menu li:nth-child(4) a').textContent = t.contact;
|
|
document.querySelector('.cta-button').textContent = t.requestDemo;
|
|
|
|
// Hero
|
|
document.querySelector('.main-title').textContent = t.heroTitle;
|
|
document.querySelector('.hero-text').textContent = t.heroText;
|
|
document.querySelector('.primary-button').textContent = t.discoverMore;
|
|
document.querySelector('.secondary-button').textContent = t.liveDemo;
|
|
|
|
// Trust Indicators
|
|
document.querySelectorAll('.indicator-label')[0].textContent = t.availability;
|
|
document.querySelectorAll('.indicator-label')[1].textContent = t.trustedBy;
|
|
document.querySelectorAll('.indicator-label')[2].textContent = t.support;
|
|
|
|
// Update all other sections similarly...
|
|
}
|
|
|
|
// Interactive Node Effects
|
|
document.querySelectorAll('.node').forEach(node => {
|
|
node.addEventListener('mouseenter', function() {
|
|
const icon = this.querySelector('.node-icon');
|
|
icon.style.transform = 'scale(1.2) rotate(5deg)';
|
|
});
|
|
|
|
node.addEventListener('mouseleave', function() {
|
|
const icon = this.querySelector('.node-icon');
|
|
icon.style.transform = 'scale(1) rotate(0deg)';
|
|
});
|
|
});
|
|
|
|
// Dashboard Widget Animations
|
|
document.querySelectorAll('.widget').forEach(widget => {
|
|
widget.addEventListener('mouseenter', function() {
|
|
this.style.boxShadow = '0 5px 20px rgba(0, 212, 255, 0.3)';
|
|
});
|
|
|
|
widget.addEventListener('mouseleave', function() {
|
|
this.style.boxShadow = 'none';
|
|
});
|
|
});
|
|
|
|
// Tab Switching
|
|
const tabs = document.querySelectorAll('.tab');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Form handling for demo requests
|
|
document.querySelectorAll('.primary-button, .secondary-button, .cta-button').forEach(button => {
|
|
if (button.textContent.includes('Demo') || button.textContent.includes('demo')) {
|
|
button.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
alert('Demo-Anfrage-Funktion würde hier implementiert werden');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Glitch effect on hover for main title
|
|
const mainTitle = document.querySelector('.main-title');
|
|
let glitchInterval;
|
|
|
|
mainTitle.addEventListener('mouseenter', () => {
|
|
let count = 0;
|
|
glitchInterval = setInterval(() => {
|
|
mainTitle.style.textShadow = `
|
|
${Math.random() * 5}px ${Math.random() * 5}px 0 rgba(0, 212, 255, 0.5),
|
|
${Math.random() * -5}px ${Math.random() * 5}px 0 rgba(255, 0, 128, 0.5)
|
|
`;
|
|
count++;
|
|
if (count > 5) {
|
|
clearInterval(glitchInterval);
|
|
mainTitle.style.textShadow = 'none';
|
|
}
|
|
}, 50);
|
|
});
|
|
|
|
// Mouse parallax effect for hero content - DEAKTIVIERT
|
|
// const heroContent = document.querySelector('.hero-content');
|
|
// document.addEventListener('mousemove', (e) => {
|
|
// const x = (window.innerWidth / 2 - e.clientX) / 50;
|
|
// const y = (window.innerHeight / 2 - e.clientY) / 50;
|
|
//
|
|
// heroContent.style.transform = `translateX(${x}px) translateY(${y}px)`;
|
|
// });
|
|
|
|
// Neural Network Visualization
|
|
function initNeuralNetwork() {
|
|
const canvas = document.getElementById('neuralCanvas');
|
|
if (!canvas) return;
|
|
|
|
const section = document.querySelector('.intelligence-viz');
|
|
if (!section) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = section.offsetHeight;
|
|
|
|
const nodes = [];
|
|
const connections = [];
|
|
const nodeCount = 20;
|
|
|
|
// Create nodes
|
|
for (let i = 0; i < nodeCount; i++) {
|
|
nodes.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: (Math.random() - 0.5) * 0.5,
|
|
radius: Math.random() * 3 + 2,
|
|
pulsePhase: Math.random() * Math.PI * 2
|
|
});
|
|
}
|
|
|
|
// Create connections
|
|
for (let i = 0; i < nodeCount; i++) {
|
|
for (let j = i + 1; j < nodeCount; j++) {
|
|
if (Math.random() < 0.15) {
|
|
connections.push({ from: i, to: j, strength: Math.random() });
|
|
}
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.02)'; // Weniger opak für subtileren Effekt
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Update and draw connections
|
|
connections.forEach(conn => {
|
|
const from = nodes[conn.from];
|
|
const to = nodes[conn.to];
|
|
const distance = Math.sqrt((to.x - from.x) ** 2 + (to.y - from.y) ** 2);
|
|
|
|
if (distance < 300) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(from.x, from.y);
|
|
ctx.lineTo(to.x, to.y);
|
|
ctx.strokeStyle = `rgba(0, 212, 255, ${(1 - distance / 300) * 0.15 * conn.strength})`; // Schwächere Linien
|
|
ctx.lineWidth = conn.strength * 1.5;
|
|
ctx.stroke();
|
|
|
|
// Data flow animation
|
|
const flowProgress = (Date.now() / 1000) % 1;
|
|
const flowX = from.x + (to.x - from.x) * flowProgress;
|
|
const flowY = from.y + (to.y - from.y) * flowProgress;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(flowX, flowY, 2, 0, Math.PI * 2);
|
|
ctx.fillStyle = 'rgba(0, 212, 255, 0.8)';
|
|
ctx.fill();
|
|
}
|
|
});
|
|
|
|
// Update and draw nodes
|
|
nodes.forEach((node, i) => {
|
|
// Update position
|
|
node.x += node.vx;
|
|
node.y += node.vy;
|
|
|
|
// Bounce off walls
|
|
if (node.x < 0 || node.x > canvas.width) node.vx *= -1;
|
|
if (node.y < 0 || node.y > canvas.height) node.vy *= -1;
|
|
|
|
// Keep in bounds
|
|
node.x = Math.max(0, Math.min(canvas.width, node.x));
|
|
node.y = Math.max(0, Math.min(canvas.height, node.y));
|
|
|
|
// Draw node with pulse effect
|
|
const pulseSize = Math.sin(Date.now() / 500 + node.pulsePhase) * 0.3 + 1;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(node.x, node.y, node.radius * pulseSize, 0, Math.PI * 2);
|
|
ctx.fillStyle = 'rgba(0, 212, 255, 0.4)'; // Weniger intensive Nodes
|
|
ctx.fill();
|
|
|
|
// Glow effect
|
|
const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, node.radius * pulseSize * 4);
|
|
gradient.addColorStop(0, 'rgba(0, 212, 255, 0.15)');
|
|
gradient.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
|
ctx.fillStyle = gradient;
|
|
ctx.beginPath();
|
|
ctx.arc(node.x, node.y, node.radius * pulseSize * 4, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
});
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
}
|
|
|
|
// Data Particles
|
|
function initDataParticles() {
|
|
const container = document.getElementById('dataParticles');
|
|
if (!container) return;
|
|
|
|
for (let i = 0; i < 30; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'data-particle';
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.top = Math.random() * 100 + '%';
|
|
particle.style.animationDelay = Math.random() * 20 + 's';
|
|
particle.style.animationDuration = (20 + Math.random() * 10) + 's';
|
|
container.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// Live Dashboard Functions
|
|
function initLiveDashboard() {
|
|
// Animated Counter
|
|
const counter = document.getElementById('liveCounter');
|
|
if (counter) {
|
|
let currentValue = 0;
|
|
const targetValue = 247;
|
|
const increment = targetValue / 100;
|
|
|
|
const updateCounter = () => {
|
|
currentValue += increment;
|
|
if (currentValue < targetValue) {
|
|
counter.textContent = Math.floor(currentValue);
|
|
requestAnimationFrame(updateCounter);
|
|
} else {
|
|
counter.textContent = targetValue;
|
|
// Continue with live updates
|
|
setInterval(() => {
|
|
const variation = Math.floor(Math.random() * 10) - 5;
|
|
counter.textContent = Math.max(0, parseInt(counter.textContent) + variation);
|
|
}, 3000);
|
|
}
|
|
};
|
|
updateCounter();
|
|
}
|
|
|
|
// Response Timer
|
|
const timer = document.getElementById('responseTimer');
|
|
if (timer) {
|
|
setInterval(() => {
|
|
const time = (Math.random() * 2 + 2).toFixed(1);
|
|
timer.textContent = time + 's';
|
|
timer.style.color = time < 3 ? '#4CAF50' : time < 4 ? '#FFC107' : '#FF4444';
|
|
}, 2000);
|
|
}
|
|
|
|
// Map Points
|
|
const mapPoints = document.getElementById('mapPoints');
|
|
if (mapPoints) {
|
|
// Create initial points
|
|
for (let i = 0; i < 5; i++) {
|
|
const point = document.createElement('div');
|
|
point.className = 'map-point';
|
|
point.style.left = Math.random() * 80 + 10 + '%';
|
|
point.style.top = Math.random() * 80 + 10 + '%';
|
|
point.style.animationDelay = Math.random() * 2 + 's';
|
|
mapPoints.appendChild(point);
|
|
}
|
|
|
|
// Add new points periodically
|
|
setInterval(() => {
|
|
if (mapPoints.children.length < 10) {
|
|
const point = document.createElement('div');
|
|
point.className = 'map-point';
|
|
point.style.left = Math.random() * 80 + 10 + '%';
|
|
point.style.top = Math.random() * 80 + 10 + '%';
|
|
point.style.animation = 'pointPulse 2s ease-in-out infinite, fadeIn 0.5s ease-out';
|
|
mapPoints.appendChild(point);
|
|
|
|
setTimeout(() => {
|
|
point.style.animation = 'pointPulse 2s ease-in-out infinite';
|
|
}, 500);
|
|
}
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Parallax Scrolling
|
|
function initParallax() {
|
|
const sections = document.querySelectorAll('section');
|
|
const transitions = document.querySelectorAll('.section-transition');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const scrolled = window.pageYOffset;
|
|
|
|
// Parallax for sections
|
|
sections.forEach((section, index) => {
|
|
const rate = scrolled * -0.5;
|
|
const yPos = -(scrolled * 0.01 * index);
|
|
|
|
if (section.classList.contains('digital-beat') ||
|
|
section.classList.contains('intelligence-viz') ||
|
|
section.classList.contains('german-engineering') ||
|
|
section.classList.contains('command-center')) {
|
|
section.style.transform = `translateY(${yPos}px)`;
|
|
}
|
|
});
|
|
|
|
// Parallax for transitions
|
|
transitions.forEach((transition, index) => {
|
|
const rect = transition.getBoundingClientRect();
|
|
const speed = 0.5;
|
|
|
|
if (rect.bottom >= 0 && rect.top <= window.innerHeight) {
|
|
const yPos = -(scrolled * speed * 0.1);
|
|
transition.style.transform = `translateY(${yPos}px)`;
|
|
}
|
|
});
|
|
|
|
// Parallax for specific elements
|
|
// Hero content bleibt statisch (keine Parallax)
|
|
// const heroContent = document.querySelector('.hero-content');
|
|
// if (heroContent) {
|
|
// heroContent.style.transform = `translateY(${scrolled * 0.3}px)`;
|
|
// }
|
|
|
|
// Hero video bleibt statisch
|
|
// const heroVideo = document.querySelector('.hero-video');
|
|
// if (heroVideo) {
|
|
// heroVideo.style.transform = `translate(-50%, ${-50 + scrolled * 0.1}%)`;
|
|
// }
|
|
});
|
|
}
|
|
|
|
// Initialize everything
|
|
window.addEventListener('load', () => {
|
|
// Add loaded class for animations
|
|
document.body.classList.add('loaded');
|
|
|
|
// Start animations
|
|
setTimeout(() => {
|
|
document.querySelector('.hero-content').style.opacity = '1';
|
|
document.querySelector('.hero-content').style.transform = 'translateY(0)';
|
|
}, 100);
|
|
|
|
// Initialize neural network
|
|
initNeuralNetwork();
|
|
initDataParticles();
|
|
initLiveDashboard();
|
|
initParallax();
|
|
}); |