Update cookie consent functionality: Enhanced the cookie consent banner by adding options for rejecting non-essential cookies and improved the styling for better user experience. Updated related JavaScript to ensure proper functionality and compliance with privacy regulations.
This commit is contained in:
TheOnlyMace
310
public/assets/js/main.js
Normal file
310
public/assets/js/main.js
Normal file
@@ -0,0 +1,310 @@
|
||||
// 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
|
||||
};
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user