mirror of
https://git.hexahost.dev/smueller/HexaHost-Frontend.git
synced 2026-06-02 08:28:43 +00:00
fix(release): restore clean assets before obfuscation rebuild
This commit is contained in:
smueller
235
public/assets/js/main.js
Normal file
235
public/assets/js/main.js
Normal file
@@ -0,0 +1,235 @@
|
||||
(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;
|
||||
})();
|
||||
Reference in New Issue
Block a user