HexaHost-Web-Prod/public/assets/js/main.js

(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;
})();