mirror of
https://git.hexahost.dev/smueller/HexaHost-Frontend.git
synced 2026-06-02 11:28:42 +00:00
fix(release): restore clean assets before obfuscation rebuild
This commit is contained in:
smueller
@@ -1 +0,0 @@
|
||||
[javascript-obfuscator-cli] Obfuscating file:public/assets/js/contact.b058cc66d435.b2802230a610.js... [javascript-obfuscator-cli] Obfuscating file:public/assets/js/cookie-consent.de9e404f0700.de9e404f0700.js... [javascript-obfuscator-cli] Obfuscating file:public/assets/js/main.915e0206c30f.915e0206c30f.js...
|
||||
239
public/assets/js/contact.js
Normal file
239
public/assets/js/contact.js
Normal file
@@ -0,0 +1,239 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
function initFaqAccordion() {
|
||||
const faqItems = document.querySelectorAll(".faq-item");
|
||||
faqItems.forEach(faqItem => {
|
||||
const faqQuestion = faqItem.querySelector(".faq-question");
|
||||
const faqAnswer = faqItem.querySelector(".faq-answer");
|
||||
const faqToggle = faqItem.querySelector(".faq-toggle");
|
||||
faqQuestion.addEventListener("click", function () {
|
||||
const isOpen = faqItem.classList.contains("open");
|
||||
faqItems.forEach(otherItem => {
|
||||
if (otherItem !== faqItem) {
|
||||
otherItem.classList.remove("open");
|
||||
const otherAnswer = otherItem.querySelector(".faq-answer");
|
||||
const otherToggle = otherItem.querySelector(".faq-toggle");
|
||||
otherAnswer.style.maxHeight = null;
|
||||
otherToggle.textContent = "+";
|
||||
}
|
||||
});
|
||||
if (isOpen) {
|
||||
faqItem.classList.remove("open");
|
||||
faqAnswer.style.maxHeight = null;
|
||||
faqToggle.textContent = "+";
|
||||
} else {
|
||||
faqItem.classList.add("open");
|
||||
faqAnswer.style.maxHeight = faqAnswer.scrollHeight + "px";
|
||||
faqToggle.textContent = "−";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function initContactForm() {
|
||||
const contactForm = document.getElementById("contactForm");
|
||||
if (!contactForm) {
|
||||
return;
|
||||
}
|
||||
contactForm.addEventListener("submit", function (submitEvent) {
|
||||
submitEvent.preventDefault();
|
||||
const formData = new FormData(contactForm);
|
||||
const payload = {};
|
||||
for (let [key, value] of formData.entries()) {
|
||||
payload[key] = value;
|
||||
}
|
||||
if (!validateFormData(payload)) {
|
||||
return;
|
||||
}
|
||||
const submitButton = contactForm.querySelector("button[type=\"submit\"]");
|
||||
const originalButtonText = submitButton.textContent;
|
||||
submitButton.textContent = "Wird gesendet...";
|
||||
submitButton.disabled = true;
|
||||
const requestOptions = {
|
||||
method: "POST",
|
||||
body: formData
|
||||
};
|
||||
fetch("contact-handler.php", requestOptions).then(response => response.json()).then(result => {
|
||||
submitButton.textContent = originalButtonText;
|
||||
submitButton.disabled = false;
|
||||
if (result.success) {
|
||||
contactForm.reset();
|
||||
showNotification(result.message, "success");
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
});
|
||||
} else {
|
||||
showNotification(result.message, "error");
|
||||
if (result.missing_fields) {
|
||||
result.missing_fields.forEach(missingFieldId => {
|
||||
const missingField = document.getElementById(missingFieldId);
|
||||
if (missingField) {
|
||||
missingField.style.borderColor = "#ff4d6d";
|
||||
setTimeout(() => {
|
||||
missingField.style.borderColor = "";
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error:", error);
|
||||
showNotification("Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.", "error");
|
||||
submitButton.textContent = originalButtonText;
|
||||
submitButton.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
function validateFormData(formValues) {
|
||||
const requiredKeys = ["firstName", "lastName", "email", "subject", "message"];
|
||||
const errors = [];
|
||||
requiredKeys.forEach(fieldName => {
|
||||
if (!formValues[fieldName] || formValues[fieldName].trim() === "") {
|
||||
errors.push("Das Feld \"" + getFieldLabel(fieldName) + "\" ist erforderlich.");
|
||||
}
|
||||
});
|
||||
if (formValues.email && !isValidEmail(formValues.email)) {
|
||||
errors.push("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
|
||||
}
|
||||
if (!formValues.privacy) {
|
||||
errors.push("Sie müssen der Datenschutzerklärung zustimmen.");
|
||||
}
|
||||
if (errors.length > 0) {
|
||||
showNotification(errors.join("\n"), "error");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
function getFieldLabel(keyName) {
|
||||
const fieldLabels = {
|
||||
firstName: "Vorname",
|
||||
lastName: "Nachname",
|
||||
email: "E-Mail-Adresse",
|
||||
subject: "Betreff",
|
||||
message: "Nachricht"
|
||||
};
|
||||
return fieldLabels[keyName] || keyName;
|
||||
}
|
||||
function isValidEmail(email) {
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailPattern.test(email);
|
||||
}
|
||||
function showNotification(message, type = "info") {
|
||||
if (window.HexaHost && window.HexaHost.showNotification) {
|
||||
window.HexaHost.showNotification(message, type);
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
window.openLiveChat = function () {
|
||||
showNotification("Live Chat wird geöffnet... (Demo-Funktion)", "info");
|
||||
};
|
||||
function prefillFromQueryParams() {
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
const packageParam = queryParams.get("package");
|
||||
const productParam = queryParams.get("product");
|
||||
if (packageParam || productParam) {
|
||||
const subjectField = document.getElementById("subject");
|
||||
const messageField = document.getElementById("message");
|
||||
if (packageParam) {
|
||||
const packageLabels = {
|
||||
"vpc-starter": "Virtual Private Container - Starter Paket",
|
||||
"vpc-business": "Virtual Private Container - Business Paket",
|
||||
"vpc-professional": "Virtual Private Container - Professional Paket",
|
||||
"vpc-enterprise": "Virtual Private Container - Enterprise Paket",
|
||||
"vps-basic": "Virtual Private Server - Basic Paket",
|
||||
"vps-standard": "Virtual Private Server - Standard Paket",
|
||||
"vps-premium": "Virtual Private Server - Premium Paket",
|
||||
"vps-enterprise": "Virtual Private Server - Enterprise Paket",
|
||||
"mail-starter": "Mail Gateway - Starter Paket",
|
||||
"mail-business": "Mail Gateway - Business Paket",
|
||||
"mail-professional": "Mail Gateway - Professional Paket",
|
||||
"mail-enterprise": "Mail Gateway - Enterprise Paket",
|
||||
"web-starter": "Webhosting - Starter Paket",
|
||||
"web-business": "Webhosting - Business Paket",
|
||||
"web-professional": "Webhosting - Professional Paket",
|
||||
"web-enterprise": "Webhosting - Enterprise Paket"
|
||||
};
|
||||
if (packageLabels[packageParam]) {
|
||||
messageField.value = "Hallo,\n\nich interessiere mich für das " + packageLabels[packageParam] + ".\n\nBitte senden Sie mir weitere Informationen und ein individuelles Angebot.\n\nVielen Dank!";
|
||||
if (packageParam.startsWith("vpc-")) {
|
||||
subjectField.value = "vpc-anfrage";
|
||||
} else if (packageParam.startsWith("vps-")) {
|
||||
subjectField.value = "vps-anfrage";
|
||||
} else if (packageParam.startsWith("mail-")) {
|
||||
subjectField.value = "mail-gateway-anfrage";
|
||||
} else if (packageParam.startsWith("web-")) {
|
||||
subjectField.value = "webhosting-anfrage";
|
||||
}
|
||||
}
|
||||
} else if (productParam) {
|
||||
const productSubjects = {
|
||||
vpc: "vpc-anfrage",
|
||||
vps: "vps-anfrage",
|
||||
"mail-gateway": "mail-gateway-anfrage",
|
||||
webhosting: "webhosting-anfrage"
|
||||
};
|
||||
if (productSubjects[productParam]) {
|
||||
subjectField.value = productSubjects[productParam];
|
||||
messageField.value = "Hallo,\n\nich interessiere mich für Ihre " + productParam.replace("-", " ") + " Lösungen.\n\nBitte kontaktieren Sie mich für eine persönliche Beratung.\n\nVielen Dank!";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function initFieldUiEnhancements() {
|
||||
const inputElements = document.querySelectorAll("input, select, textarea");
|
||||
inputElements.forEach(inputEl => {
|
||||
inputEl.addEventListener("focus", function () {
|
||||
this.parentElement.classList.add("focused");
|
||||
});
|
||||
inputEl.addEventListener("blur", function () {
|
||||
if (!this.value) {
|
||||
this.parentElement.classList.remove("focused");
|
||||
}
|
||||
});
|
||||
if (inputEl.value) {
|
||||
inputEl.parentElement.classList.add("focused");
|
||||
}
|
||||
});
|
||||
const phoneInput = document.getElementById("phone");
|
||||
if (phoneInput) {
|
||||
phoneInput.addEventListener("input", function () {
|
||||
let digitsOnly = this.value.replace(/\D/g, "");
|
||||
if (digitsOnly.startsWith("49")) {
|
||||
digitsOnly = "+" + digitsOnly;
|
||||
} else if (digitsOnly.startsWith("0")) {
|
||||
digitsOnly = "+49" + digitsOnly.substring(1);
|
||||
}
|
||||
this.value = digitsOnly;
|
||||
});
|
||||
}
|
||||
}
|
||||
function initAccessibility() {
|
||||
const requiredInputs = document.querySelectorAll("input[required], select[required], textarea[required]");
|
||||
requiredInputs.forEach(requiredInput => {
|
||||
requiredInput.setAttribute("aria-required", "true");
|
||||
});
|
||||
const faqQuestions = document.querySelectorAll(".faq-question");
|
||||
faqQuestions.forEach(questionEl => {
|
||||
questionEl.setAttribute("tabindex", "0");
|
||||
questionEl.setAttribute("role", "button");
|
||||
questionEl.setAttribute("aria-expanded", "false");
|
||||
questionEl.addEventListener("keydown", function (keyboardEvent) {
|
||||
if (keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
|
||||
keyboardEvent.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initFaqAccordion();
|
||||
initContactForm();
|
||||
prefillFromQueryParams();
|
||||
initFieldUiEnhancements();
|
||||
initAccessibility();
|
||||
setTimeout(() => {
|
||||
showNotification("💬 Haben Sie Fragen? Wir helfen gerne!", "info");
|
||||
}, 2000);
|
||||
});
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
210
public/assets/js/cookie-consent.js
Normal file
210
public/assets/js/cookie-consent.js
Normal file
@@ -0,0 +1,210 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
const CONSENT_COOKIE_NAME = "hexahost_cookie_consent";
|
||||
const CONSENT_DAYS = 365;
|
||||
const cookieBanner = document.getElementById("cookieConsent");
|
||||
const settingsPanel = document.getElementById("cookieSettingsPanel");
|
||||
const acceptAllButton = document.getElementById("cookieAcceptAll");
|
||||
const acceptEssentialButton = document.getElementById("cookieAcceptEssential");
|
||||
const settingsButton = document.getElementById("cookieSettings");
|
||||
const saveSettingsButton = document.getElementById("cookieSaveSettings");
|
||||
const closeSettingsButton = document.getElementById("cookieCloseSettings");
|
||||
const analyticsCheckbox = document.getElementById("cookieAnalytics");
|
||||
const marketingCheckbox = document.getElementById("cookieMarketing");
|
||||
const cookieStore = {
|
||||
set: function (name, value, days) {
|
||||
const expiresDate = new Date();
|
||||
expiresDate.setTime(expiresDate.getTime() + days * 24 * 60 * 60 * 1000);
|
||||
const expiresString = "expires=" + expiresDate.toUTCString();
|
||||
document.cookie = name + "=" + JSON.stringify(value) + ";" + expiresString + ";path=/;SameSite=Lax;Secure";
|
||||
},
|
||||
get: function (name) {
|
||||
const prefix = name + "=";
|
||||
const cookies = document.cookie.split(";");
|
||||
for (let index = 0; index < cookies.length; index++) {
|
||||
let cookie = cookies[index].trim();
|
||||
if (cookie.indexOf(prefix) === 0) {
|
||||
try {
|
||||
return JSON.parse(cookie.substring(prefix.length));
|
||||
} catch (parseError) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
delete: function (name) {
|
||||
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;";
|
||||
}
|
||||
};
|
||||
const cookieConsentManager = {
|
||||
defaultConsent: {
|
||||
essential: true,
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
timestamp: null
|
||||
},
|
||||
init: function () {
|
||||
if (!cookieBanner) {
|
||||
return;
|
||||
}
|
||||
const storedConsent = this.getConsent();
|
||||
if (storedConsent && storedConsent.timestamp) {
|
||||
this.hideBanner();
|
||||
this.applyConsent(storedConsent);
|
||||
} else {
|
||||
this.showBanner();
|
||||
}
|
||||
this.bindEvents();
|
||||
},
|
||||
bindEvents: function () {
|
||||
if (acceptAllButton) {
|
||||
acceptAllButton.addEventListener("click", () => this.acceptAll());
|
||||
}
|
||||
if (acceptEssentialButton) {
|
||||
acceptEssentialButton.addEventListener("click", () => this.acceptEssential());
|
||||
}
|
||||
if (settingsButton) {
|
||||
settingsButton.addEventListener("click", () => this.showSettings());
|
||||
}
|
||||
if (saveSettingsButton) {
|
||||
saveSettingsButton.addEventListener("click", () => this.saveSettings());
|
||||
}
|
||||
if (closeSettingsButton) {
|
||||
closeSettingsButton.addEventListener("click", () => this.hideSettings());
|
||||
}
|
||||
document.addEventListener("keydown", event => {
|
||||
if (event.key === "Escape" && settingsPanel && settingsPanel.style.display !== "none") {
|
||||
this.hideSettings();
|
||||
}
|
||||
});
|
||||
},
|
||||
acceptAll: function () {
|
||||
const allConsent = {
|
||||
essential: true,
|
||||
analytics: true,
|
||||
marketing: true,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
this.saveConsent(allConsent);
|
||||
this.hideBanner();
|
||||
this.applyConsent(allConsent);
|
||||
this.showNotification("Alle Cookies wurden akzeptiert.", "success");
|
||||
},
|
||||
acceptEssential: function () {
|
||||
const essentialConsent = {
|
||||
essential: true,
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
this.saveConsent(essentialConsent);
|
||||
this.hideBanner();
|
||||
this.applyConsent(essentialConsent);
|
||||
this.showNotification("Nur notwendige Cookies wurden akzeptiert.", "info");
|
||||
},
|
||||
saveSettings: function () {
|
||||
const customConsent = {
|
||||
essential: true,
|
||||
analytics: analyticsCheckbox ? analyticsCheckbox.checked : false,
|
||||
marketing: marketingCheckbox ? marketingCheckbox.checked : false,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
this.saveConsent(customConsent);
|
||||
this.hideSettings();
|
||||
this.hideBanner();
|
||||
this.applyConsent(customConsent);
|
||||
this.showNotification("Cookie-Einstellungen wurden gespeichert.", "success");
|
||||
},
|
||||
saveConsent: function (consent) {
|
||||
cookieStore.set(CONSENT_COOKIE_NAME, consent, CONSENT_DAYS);
|
||||
},
|
||||
getConsent: function () {
|
||||
return cookieStore.get(CONSENT_COOKIE_NAME);
|
||||
},
|
||||
applyConsent: function (consent) {
|
||||
const eventPayload = {
|
||||
detail: consent
|
||||
};
|
||||
window.dispatchEvent(new CustomEvent("cookieConsentUpdated", eventPayload));
|
||||
if (consent.analytics) {
|
||||
this.enableAnalytics();
|
||||
} else {
|
||||
this.disableAnalytics();
|
||||
}
|
||||
if (consent.marketing) {
|
||||
this.enableMarketing();
|
||||
} else {
|
||||
this.disableMarketing();
|
||||
}
|
||||
},
|
||||
enableAnalytics: function () {
|
||||
console.log("Analytics enabled");
|
||||
},
|
||||
disableAnalytics: function () {
|
||||
console.log("Analytics disabled");
|
||||
},
|
||||
enableMarketing: function () {
|
||||
console.log("Marketing enabled");
|
||||
},
|
||||
disableMarketing: function () {
|
||||
console.log("Marketing disabled");
|
||||
},
|
||||
showBanner: function () {
|
||||
if (cookieBanner) {
|
||||
cookieBanner.classList.remove("hide");
|
||||
cookieBanner.classList.add("show");
|
||||
cookieBanner.setAttribute("aria-hidden", "false");
|
||||
setTimeout(() => {
|
||||
if (acceptAllButton) {
|
||||
acceptAllButton.focus();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
hideBanner: function () {
|
||||
if (cookieBanner) {
|
||||
cookieBanner.classList.remove("show");
|
||||
cookieBanner.classList.add("hide");
|
||||
cookieBanner.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
},
|
||||
showSettings: function () {
|
||||
if (settingsPanel) {
|
||||
const savedConsent = this.getConsent() || this.defaultConsent;
|
||||
if (analyticsCheckbox) {
|
||||
analyticsCheckbox.checked = savedConsent.analytics;
|
||||
}
|
||||
if (marketingCheckbox) {
|
||||
marketingCheckbox.checked = savedConsent.marketing;
|
||||
}
|
||||
settingsPanel.style.display = "block";
|
||||
settingsPanel.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
},
|
||||
hideSettings: function () {
|
||||
if (settingsPanel) {
|
||||
settingsPanel.style.display = "none";
|
||||
settingsPanel.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
},
|
||||
showNotification: function (message, type) {
|
||||
if (window.HexaHost && typeof window.HexaHost.showNotification === "function") {
|
||||
window.HexaHost.showNotification(message, type);
|
||||
}
|
||||
},
|
||||
resetConsent: function () {
|
||||
cookieStore.delete(CONSENT_COOKIE_NAME);
|
||||
this.showBanner();
|
||||
if (settingsPanel) {
|
||||
settingsPanel.style.display = "none";
|
||||
}
|
||||
}
|
||||
};
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => cookieConsentManager.init());
|
||||
} else {
|
||||
cookieConsentManager.init();
|
||||
}
|
||||
window.CookieConsent = cookieConsentManager;
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
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