mirror of
https://git.hexahost.dev/smueller/HexaHost-Frontend.git
synced 2026-06-02 19:08:43 +00:00
240 lines
9.3 KiB
JavaScript
240 lines
9.3 KiB
JavaScript
(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);
|
||
});
|
||
})();
|