(function () { "use strict"; 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"); if (navToggle && navMenu) { navToggle.addEventListener("click", function () { navMenu.classList.toggle("active"); navToggle.classList.toggle("active"); }); navLinks.forEach(navLink => { navLink.addEventListener("click", function () { navMenu.classList.remove("active"); navToggle.classList.remove("active"); }); }); } document.querySelectorAll("a[href^=\"#\"]").forEach(anchorLink => { anchorLink.addEventListener("click", function (event) { event.preventDefault(); const targetSection = document.querySelector(this.getAttribute("href")); if (targetSection) { targetSection.scrollIntoView({ behavior: "smooth", block: "start" }); } }); }); 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)"; }); }); productCards.forEach(productCard => { productCard.addEventListener("mouseenter", function () { if (!this.classList.contains("featured")) { this.style.transform = "translateY(-10px) scale(1.03)"; } }); productCard.addEventListener("mouseleave", function () { if (!this.classList.contains("featured")) { this.style.transform = "translateY(0) scale(1)"; } }); }); const observerOptions = { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }; const animationObserver = new IntersectionObserver(function (entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("animate-in"); } }); }, observerOptions); const animatedElements = document.querySelectorAll(".glass-card, .feature-item, .product-card"); animatedElements.forEach(element => { animationObserver.observe(element); }); const headerElement = document.querySelector(".header"); const heroSection = document.querySelector(".hero"); let isScrollTicking = false; function updateOnScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (headerElement) { if (scrollTop > 50) { headerElement.classList.add("scrolled"); } else { headerElement.classList.remove("scrolled"); } } if (heroSection) { const parallaxOffset = scrollTop * -0.5; heroSection.style.transform = "translateY(" + parallaxOffset + "px)"; } isScrollTicking = false; } window.addEventListener("scroll", function () { if (!isScrollTicking) { requestAnimationFrame(updateOnScroll); isScrollTicking = true; } }, { passive: true }); const forms = document.querySelectorAll("form"); forms.forEach(form => { form.addEventListener("submit", function (submitEvent) { const requiredFields = form.querySelectorAll("[required]"); let isValid = true; requiredFields.forEach(field => { if (!field.value.trim()) { isValid = false; field.classList.add("error"); field.addEventListener("focus", function () { this.classList.remove("error"); }, { once: true }); } }); if (!isValid) { submitEvent.preventDefault(); showNotification("Bitte füllen Sie alle Pflichtfelder aus.", "error"); } }); }); function showNotification(message, type = "info") { const notificationEl = document.createElement("div"); notificationEl.className = "notification notification-" + type; notificationEl.textContent = message; notificationEl.style.position = "fixed"; notificationEl.style.top = "20px"; notificationEl.style.right = "20px"; notificationEl.style.padding = "15px 20px"; notificationEl.style.borderRadius = "8px"; notificationEl.style.color = "white"; notificationEl.style.fontWeight = "500"; notificationEl.style.zIndex = "9999"; notificationEl.style.transform = "translateX(400px)"; notificationEl.style.transition = "transform 0.3s ease-in-out"; if (type === "error") { notificationEl.style.background = "linear-gradient(135deg, #ef4444, #dc2626)"; } else if (type === "success") { notificationEl.style.background = "linear-gradient(135deg, #10b981, #059669)"; } else { notificationEl.style.background = "linear-gradient(135deg, #3b82f6, #2563eb)"; } document.body.appendChild(notificationEl); setTimeout(() => { notificationEl.style.transform = "translateX(0)"; }, 100); setTimeout(() => { notificationEl.style.transform = "translateX(400px)"; setTimeout(() => { if (notificationEl.parentNode) { notificationEl.parentNode.removeChild(notificationEl); } }, 300); }, 5000); } const lazyImages = document.querySelectorAll("img[data-src]"); const lazyImageObserver = new IntersectionObserver(imageEntries => { imageEntries.forEach(imageEntry => { if (imageEntry.isIntersecting) { const image = imageEntry.target; image.src = image.dataset.src; image.classList.remove("lazy"); lazyImageObserver.unobserve(image); } }); }); lazyImages.forEach(lazyImage => lazyImageObserver.observe(lazyImage)); function debounce(callback, delay) { let timeoutId; return function debouncedFunction(...args) { const runLater = () => { clearTimeout(timeoutId); callback(...args); }; clearTimeout(timeoutId); timeoutId = setTimeout(runLater, delay); }; } const debouncedScrollProgress = debounce(function () { updateScrollProgress(); }, 16); window.addEventListener("scroll", debouncedScrollProgress); function updateScrollProgress() { const pageYOffset = window.pageYOffset; const scrollableHeight = document.body.scrollHeight - window.innerHeight; const progressPercent = pageYOffset / scrollableHeight * 100; document.documentElement.style.setProperty("--scroll-progress", progressPercent + "%"); } 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")); }); if (localStorage.getItem("darkMode") === "true") { document.body.classList.add("dark-mode"); } } } function initFaqAccordion() { const faqItems = document.querySelectorAll(".faq-item"); faqItems.forEach(faqItem => { const faqQuestion = faqItem.querySelector(".faq-question"); const faqAnswer = faqItem.querySelector(".faq-answer"); if (faqQuestion && faqAnswer) { faqQuestion.addEventListener("click", function () { faqItems.forEach(otherFaqItem => { if (otherFaqItem !== faqItem && otherFaqItem.classList.contains("open")) { otherFaqItem.classList.remove("open"); const otherFaqAnswer = otherFaqItem.querySelector(".faq-answer"); if (otherFaqAnswer) { otherFaqAnswer.style.maxHeight = null; } } }); faqItem.classList.toggle("open"); if (faqItem.classList.contains("open")) { faqAnswer.style.maxHeight = faqAnswer.scrollHeight + "px"; } else { faqAnswer.style.maxHeight = null; } }); } }); } document.addEventListener("DOMContentLoaded", function () { initDarkMode(); initFaqAccordion(); document.body.classList.add("loaded"); if (!localStorage.getItem("hasVisited")) { setTimeout(() => { showNotification("Willkommen bei HexaHost.de! 🚀", "success"); localStorage.setItem("hasVisited", "true"); }, 1000); } }); const hexaHostApi = { showNotification: showNotification }; window.HexaHost = hexaHostApi; })();