Remove legacy CSS, JavaScript, and configuration files to streamline project structure and improve maintainability.
This commit is contained in:
TheOnlyMace
@@ -1,320 +0,0 @@
|
||||
// Contact page specific JavaScript
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// FAQ Accordion functionality
|
||||
function initFAQ() {
|
||||
const faqItems = document.querySelectorAll('.faq-item');
|
||||
|
||||
faqItems.forEach(item => {
|
||||
const question = item.querySelector('.faq-question');
|
||||
const answer = item.querySelector('.faq-answer');
|
||||
const toggle = item.querySelector('.faq-toggle');
|
||||
|
||||
question.addEventListener('click', function() {
|
||||
const isOpen = item.classList.contains('open');
|
||||
|
||||
// Close all other FAQ items
|
||||
faqItems.forEach(otherItem => {
|
||||
if (otherItem !== item) {
|
||||
otherItem.classList.remove('open');
|
||||
const otherAnswer = otherItem.querySelector('.faq-answer');
|
||||
const otherToggle = otherItem.querySelector('.faq-toggle');
|
||||
otherAnswer.style.maxHeight = null;
|
||||
otherToggle.textContent = '+';
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current item
|
||||
if (isOpen) {
|
||||
item.classList.remove('open');
|
||||
answer.style.maxHeight = null;
|
||||
toggle.textContent = '+';
|
||||
} else {
|
||||
item.classList.add('open');
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
toggle.textContent = '−';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Contact form handling
|
||||
function initContactForm() {
|
||||
const form = document.getElementById('contactForm');
|
||||
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Basic validation
|
||||
const data = {};
|
||||
for (let [key, value] of formData.entries()) {
|
||||
data[key] = value;
|
||||
}
|
||||
|
||||
if (!validateForm(data)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'Wird gesendet...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Send form data to PHP backend
|
||||
fetch('contact-handler.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Reset button state
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
|
||||
if (data.success) {
|
||||
// Reset form
|
||||
form.reset();
|
||||
|
||||
// Show success message
|
||||
showNotification(data.message, 'success');
|
||||
|
||||
// Scroll to top
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
} else {
|
||||
// Show error message
|
||||
showNotification(data.message, 'error');
|
||||
|
||||
// Highlight missing fields if provided
|
||||
if (data.missing_fields) {
|
||||
data.missing_fields.forEach(field => {
|
||||
const fieldElement = document.getElementById(field);
|
||||
if (fieldElement) {
|
||||
fieldElement.style.borderColor = '#ff4d6d';
|
||||
setTimeout(() => {
|
||||
fieldElement.style.borderColor = '';
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showNotification('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.', 'error');
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Form validation
|
||||
function validateForm(data) {
|
||||
const requiredFields = ['firstName', 'lastName', 'email', 'subject', 'message'];
|
||||
const errors = [];
|
||||
|
||||
// Check required fields
|
||||
requiredFields.forEach(field => {
|
||||
if (!data[field] || data[field].trim() === '') {
|
||||
errors.push(`Das Feld "${getFieldLabel(field)}" ist erforderlich.`);
|
||||
}
|
||||
});
|
||||
|
||||
// Email validation
|
||||
if (data.email && !isValidEmail(data.email)) {
|
||||
errors.push('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
|
||||
}
|
||||
|
||||
// Privacy checkbox
|
||||
if (!data.privacy) {
|
||||
errors.push('Sie müssen der Datenschutzerklärung zustimmen.');
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
showNotification(errors.join('\n'), 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Helper function to get field labels
|
||||
function getFieldLabel(fieldName) {
|
||||
const labels = {
|
||||
firstName: 'Vorname',
|
||||
lastName: 'Nachname',
|
||||
email: 'E-Mail-Adresse',
|
||||
subject: 'Betreff',
|
||||
message: 'Nachricht'
|
||||
};
|
||||
return labels[fieldName] || fieldName;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
function isValidEmail(email) {
|
||||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
// Notification system (using the global one from main.js)
|
||||
function showNotification(message, type = 'info') {
|
||||
if (window.HexaHost && window.HexaHost.showNotification) {
|
||||
window.HexaHost.showNotification(message, type);
|
||||
} else {
|
||||
// Fallback
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
// Live chat placeholder function
|
||||
window.openLiveChat = function() {
|
||||
showNotification('Live Chat wird geöffnet... (Demo-Funktion)', 'info');
|
||||
// Here you would integrate with your actual live chat service
|
||||
// For example: Tawk.to, Intercom, Zendesk Chat, etc.
|
||||
};
|
||||
|
||||
// Auto-fill form based on URL parameters
|
||||
function autofillForm() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const packageParam = urlParams.get('package');
|
||||
const productParam = urlParams.get('product');
|
||||
|
||||
if (packageParam || productParam) {
|
||||
const subjectSelect = document.getElementById('subject');
|
||||
const messageTextarea = document.getElementById('message');
|
||||
|
||||
if (packageParam) {
|
||||
// Set subject based on package
|
||||
const packageNames = {
|
||||
'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 (packageNames[packageParam]) {
|
||||
messageTextarea.value = `Hallo,\n\nich interessiere mich für das ${packageNames[packageParam]}.\n\nBitte senden Sie mir weitere Informationen und ein individuelles Angebot.\n\nVielen Dank!`;
|
||||
|
||||
// Set appropriate subject
|
||||
if (packageParam.startsWith('vpc-')) {
|
||||
subjectSelect.value = 'vpc-anfrage';
|
||||
} else if (packageParam.startsWith('vps-')) {
|
||||
subjectSelect.value = 'vps-anfrage';
|
||||
} else if (packageParam.startsWith('mail-')) {
|
||||
subjectSelect.value = 'mail-gateway-anfrage';
|
||||
} else if (packageParam.startsWith('web-')) {
|
||||
subjectSelect.value = 'webhosting-anfrage';
|
||||
}
|
||||
}
|
||||
} else if (productParam) {
|
||||
// Set subject based on product
|
||||
const productSubjects = {
|
||||
'vpc': 'vpc-anfrage',
|
||||
'vps': 'vps-anfrage',
|
||||
'mail-gateway': 'mail-gateway-anfrage',
|
||||
'webhosting': 'webhosting-anfrage'
|
||||
};
|
||||
|
||||
if (productSubjects[productParam]) {
|
||||
subjectSelect.value = productSubjects[productParam];
|
||||
messageTextarea.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!`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form field enhancements
|
||||
function enhanceFormFields() {
|
||||
const inputs = document.querySelectorAll('input, select, textarea');
|
||||
|
||||
inputs.forEach(input => {
|
||||
// Add focus/blur effects
|
||||
input.addEventListener('focus', function() {
|
||||
this.parentElement.classList.add('focused');
|
||||
});
|
||||
|
||||
input.addEventListener('blur', function() {
|
||||
if (!this.value) {
|
||||
this.parentElement.classList.remove('focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Check if field already has value (for autofilled forms)
|
||||
if (input.value) {
|
||||
input.parentElement.classList.add('focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Phone number formatting
|
||||
const phoneInput = document.getElementById('phone');
|
||||
if (phoneInput) {
|
||||
phoneInput.addEventListener('input', function() {
|
||||
// Simple German phone number formatting
|
||||
let value = this.value.replace(/\D/g, '');
|
||||
if (value.startsWith('49')) {
|
||||
value = '+' + value;
|
||||
} else if (value.startsWith('0')) {
|
||||
value = '+49' + value.substring(1);
|
||||
}
|
||||
this.value = value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Accessibility improvements
|
||||
function improveAccessibility() {
|
||||
// Add ARIA labels to form elements
|
||||
const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]');
|
||||
requiredFields.forEach(field => {
|
||||
field.setAttribute('aria-required', 'true');
|
||||
});
|
||||
|
||||
// Add keyboard navigation for FAQ
|
||||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||||
faqQuestions.forEach(question => {
|
||||
question.setAttribute('tabindex', '0');
|
||||
question.setAttribute('role', 'button');
|
||||
question.setAttribute('aria-expanded', 'false');
|
||||
|
||||
question.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize everything when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initFAQ();
|
||||
initContactForm();
|
||||
autofillForm();
|
||||
enhanceFormFields();
|
||||
improveAccessibility();
|
||||
|
||||
// Show a welcome message for contact page
|
||||
setTimeout(() => {
|
||||
showNotification('💬 Haben Sie Fragen? Wir helfen gerne!', 'info');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user