310 lines
10 KiB
JavaScript
310 lines
10 KiB
JavaScript
// Main JavaScript for HexaHost.de
|
|
(function() {
|
|
'use strict';
|
|
|
|
// DOM Elements
|
|
const navToggle = document.querySelector('.nav-toggle');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const glassCards = document.querySelectorAll('.glass-card');
|
|
const productCards = document.querySelectorAll('.product-card');
|
|
|
|
// Mobile Navigation Toggle
|
|
if (navToggle && navMenu) {
|
|
navToggle.addEventListener('click', function() {
|
|
navMenu.classList.toggle('active');
|
|
navToggle.classList.toggle('active');
|
|
});
|
|
|
|
// Close mobile menu when clicking on a link
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
navMenu.classList.remove('active');
|
|
navToggle.classList.remove('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Smooth scrolling for anchor links
|
|
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'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Enhanced glass card hover effects
|
|
glassCards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-8px) scale(1.02)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
|
|
// Product card interactive effects
|
|
productCards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
if (!this.classList.contains('featured')) {
|
|
this.style.transform = 'translateY(-10px) scale(1.03)';
|
|
}
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
if (!this.classList.contains('featured')) {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Intersection Observer for animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe elements for animation
|
|
const animateElements = document.querySelectorAll('.glass-card, .feature-item, .product-card');
|
|
animateElements.forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Header scroll effect - always visible with transparency change
|
|
const header = document.querySelector('.header');
|
|
const hero = document.querySelector('.hero');
|
|
|
|
// Kombinierter, optimierter Scroll-Handler mit requestAnimationFrame
|
|
let ticking = false;
|
|
|
|
function handleScroll() {
|
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
// Header-Effekt
|
|
if (header) {
|
|
if (scrollTop > 50) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
}
|
|
|
|
// Parallax-Effekt für Hero
|
|
if (hero) {
|
|
const rate = scrollTop * -0.5;
|
|
hero.style.transform = `translateY(${rate}px)`;
|
|
}
|
|
|
|
ticking = false;
|
|
}
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (!ticking) {
|
|
requestAnimationFrame(handleScroll);
|
|
ticking = true;
|
|
}
|
|
}, { passive: true });
|
|
|
|
// Form validation (for contact forms)
|
|
const forms = document.querySelectorAll('form');
|
|
forms.forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
const requiredFields = form.querySelectorAll('[required]');
|
|
let isValid = true;
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.classList.add('error');
|
|
|
|
// Remove error class on focus
|
|
field.addEventListener('focus', function() {
|
|
this.classList.remove('error');
|
|
}, { once: true });
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
showNotification('Bitte füllen Sie alle Pflichtfelder aus.', 'error');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Notification system
|
|
function showNotification(message, type = 'info') {
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification notification-${type}`;
|
|
notification.textContent = message;
|
|
|
|
notification.style.position = 'fixed';
|
|
notification.style.top = '20px';
|
|
notification.style.right = '20px';
|
|
notification.style.padding = '15px 20px';
|
|
notification.style.borderRadius = '8px';
|
|
notification.style.color = 'white';
|
|
notification.style.fontWeight = '500';
|
|
notification.style.zIndex = '9999';
|
|
notification.style.transform = 'translateX(400px)';
|
|
notification.style.transition = 'transform 0.3s ease-in-out';
|
|
|
|
if (type === 'error') {
|
|
notification.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
|
|
} else if (type === 'success') {
|
|
notification.style.background = 'linear-gradient(135deg, #10b981, #059669)';
|
|
} else {
|
|
notification.style.background = 'linear-gradient(135deg, #3b82f6, #2563eb)';
|
|
}
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
// Animate in
|
|
setTimeout(() => {
|
|
notification.style.transform = 'translateX(0)';
|
|
}, 100);
|
|
|
|
// Remove after 5 seconds
|
|
setTimeout(() => {
|
|
notification.style.transform = 'translateX(400px)';
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.parentNode.removeChild(notification);
|
|
}
|
|
}, 300);
|
|
}, 5000);
|
|
}
|
|
|
|
// Lazy loading for images
|
|
const images = document.querySelectorAll('img[data-src]');
|
|
const imageObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
img.src = img.dataset.src;
|
|
img.classList.remove('lazy');
|
|
imageObserver.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
images.forEach(img => imageObserver.observe(img));
|
|
|
|
// Performance optimization: Debounce scroll events
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
// Apply debounce to scroll events
|
|
const debouncedScrollHandler = debounce(function() {
|
|
// Any scroll-based animations or calculations
|
|
updateScrollProgress();
|
|
}, 16); // ~60fps
|
|
|
|
window.addEventListener('scroll', debouncedScrollHandler);
|
|
|
|
// Scroll progress indicator
|
|
function updateScrollProgress() {
|
|
const scrollTop = window.pageYOffset;
|
|
const docHeight = document.body.scrollHeight - window.innerHeight;
|
|
const scrollPercent = (scrollTop / docHeight) * 100;
|
|
|
|
// You can use this to show a progress bar
|
|
document.documentElement.style.setProperty('--scroll-progress', scrollPercent + '%');
|
|
}
|
|
|
|
// Dark mode toggle (future feature)
|
|
function initDarkMode() {
|
|
const darkModeToggle = document.querySelector('.dark-mode-toggle');
|
|
if (darkModeToggle) {
|
|
darkModeToggle.addEventListener('click', function() {
|
|
document.body.classList.toggle('dark-mode');
|
|
localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
|
|
});
|
|
|
|
// Check for saved dark mode preference
|
|
if (localStorage.getItem('darkMode') === 'true') {
|
|
document.body.classList.add('dark-mode');
|
|
}
|
|
}
|
|
}
|
|
|
|
// FAQ Accordion functionality
|
|
function initFAQ() {
|
|
const faqItems = document.querySelectorAll('.faq-item');
|
|
|
|
faqItems.forEach(item => {
|
|
const question = item.querySelector('.faq-question');
|
|
const answer = item.querySelector('.faq-answer');
|
|
|
|
if (question && answer) {
|
|
question.addEventListener('click', function() {
|
|
// Close all other FAQ items
|
|
faqItems.forEach(otherItem => {
|
|
if (otherItem !== item && otherItem.classList.contains('open')) {
|
|
otherItem.classList.remove('open');
|
|
const otherAnswer = otherItem.querySelector('.faq-answer');
|
|
if (otherAnswer) {
|
|
otherAnswer.style.maxHeight = null;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Toggle current item
|
|
item.classList.toggle('open');
|
|
|
|
if (item.classList.contains('open')) {
|
|
answer.style.maxHeight = answer.scrollHeight + 'px';
|
|
} else {
|
|
answer.style.maxHeight = null;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize all features when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initDarkMode();
|
|
initFAQ();
|
|
|
|
// Add loading animation complete class
|
|
document.body.classList.add('loaded');
|
|
|
|
// Show welcome message on first visit
|
|
if (!localStorage.getItem('hasVisited')) {
|
|
setTimeout(() => {
|
|
showNotification('Willkommen bei HexaHost.de! 🚀', 'success');
|
|
localStorage.setItem('hasVisited', 'true');
|
|
}, 1000);
|
|
}
|
|
});
|
|
|
|
// Export functions for global access if needed
|
|
window.HexaHost = {
|
|
showNotification: showNotification
|
|
};
|
|
|
|
})(); |