initial commit

public/assets/js/contact.js

@@ -0,0 +1,290 @@
+// 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);
+            const data = {};
+            for (let [key, value] of formData.entries()) {
+                data[key] = value;
+            }
+            
+            // Basic validation
+            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;
+            
+            // Simulate form submission (replace with actual endpoint)
+            setTimeout(() => {
+                // Reset form
+                form.reset();
+                
+                // Show success message
+                showNotification('Ihre Nachricht wurde erfolgreich gesendet! Wir melden uns in Kürze bei Ihnen.', 'success');
+                
+                // Reset button
+                submitBtn.textContent = originalText;
+                submitBtn.disabled = false;
+                
+                // Scroll to top
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            }, 2000);
+        });
+    }
+
+    // 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);
+    });
+
+})();

public/assets/js/main.js

@@ -0,0 +1,265 @@
+// Main JavaScript for HexaHost.de
+(function() {
+    'use strict';
+
+    // DOM Elements
+    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');
+
+    // Mobile Navigation Toggle
+    if (navToggle && navMenu) {
+        navToggle.addEventListener('click', function() {
+            navMenu.classList.toggle('active');
+            navToggle.classList.toggle('active');
+        });
+
+        // Close mobile menu when clicking on a link
+        navLinks.forEach(link => {
+            link.addEventListener('click', function() {
+                navMenu.classList.remove('active');
+                navToggle.classList.remove('active');
+            });
+        });
+    }
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+
+    // Enhanced glass card hover effects
+    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)';
+        });
+    });
+
+    // Product card interactive effects
+    productCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            if (!this.classList.contains('featured')) {
+                this.style.transform = 'translateY(-10px) scale(1.03)';
+            }
+        });
+
+        card.addEventListener('mouseleave', function() {
+            if (!this.classList.contains('featured')) {
+                this.style.transform = 'translateY(0) scale(1)';
+            }
+        });
+    });
+
+    // Intersection Observer for animations
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-in');
+            }
+        });
+    }, observerOptions);
+
+    // Observe elements for animation
+    const animateElements = document.querySelectorAll('.glass-card, .feature-item, .product-card');
+    animateElements.forEach(el => {
+        observer.observe(el);
+    });
+
+    // Header scroll effect - always visible with transparency change
+    const header = document.querySelector('.header');
+
+    window.addEventListener('scroll', function() {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+        if (scrollTop > 50) {
+            // Scrolled down - make header more opaque
+            header.classList.add('scrolled');
+        } else {
+            // At top - make header more transparent
+            header.classList.remove('scrolled');
+        }
+    });
+
+    // Add parallax effect to hero section
+    const hero = document.querySelector('.hero');
+    if (hero) {
+        window.addEventListener('scroll', function() {
+            const scrolled = window.pageYOffset;
+            const rate = scrolled * -0.5;
+            hero.style.transform = `translateY(${rate}px)`;
+        });
+    }
+
+    // Form validation (for contact forms)
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            const requiredFields = form.querySelectorAll('[required]');
+            let isValid = true;
+
+            requiredFields.forEach(field => {
+                if (!field.value.trim()) {
+                    isValid = false;
+                    field.classList.add('error');
+                    
+                    // Remove error class on focus
+                    field.addEventListener('focus', function() {
+                        this.classList.remove('error');
+                    }, { once: true });
+                }
+            });
+
+            if (!isValid) {
+                e.preventDefault();
+                showNotification('Bitte füllen Sie alle Pflichtfelder aus.', 'error');
+            }
+        });
+    });
+
+    // Notification system
+    function showNotification(message, type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `notification notification-${type}`;
+        notification.textContent = message;
+        
+        notification.style.position = 'fixed';
+        notification.style.top = '20px';
+        notification.style.right = '20px';
+        notification.style.padding = '15px 20px';
+        notification.style.borderRadius = '8px';
+        notification.style.color = 'white';
+        notification.style.fontWeight = '500';
+        notification.style.zIndex = '9999';
+        notification.style.transform = 'translateX(400px)';
+        notification.style.transition = 'transform 0.3s ease-in-out';
+        
+        if (type === 'error') {
+            notification.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
+        } else if (type === 'success') {
+            notification.style.background = 'linear-gradient(135deg, #10b981, #059669)';
+        } else {
+            notification.style.background = 'linear-gradient(135deg, #3b82f6, #2563eb)';
+        }
+        
+        document.body.appendChild(notification);
+        
+        // Animate in
+        setTimeout(() => {
+            notification.style.transform = 'translateX(0)';
+        }, 100);
+        
+        // Remove after 5 seconds
+        setTimeout(() => {
+            notification.style.transform = 'translateX(400px)';
+            setTimeout(() => {
+                if (notification.parentNode) {
+                    notification.parentNode.removeChild(notification);
+                }
+            }, 300);
+        }, 5000);
+    }
+
+    // Lazy loading for images
+    const images = document.querySelectorAll('img[data-src]');
+    const imageObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const img = entry.target;
+                img.src = img.dataset.src;
+                img.classList.remove('lazy');
+                imageObserver.unobserve(img);
+            }
+        });
+    });
+
+    images.forEach(img => imageObserver.observe(img));
+
+    // Performance optimization: Debounce scroll events
+    function debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    // Apply debounce to scroll events
+    const debouncedScrollHandler = debounce(function() {
+        // Any scroll-based animations or calculations
+        updateScrollProgress();
+    }, 16); // ~60fps
+
+    window.addEventListener('scroll', debouncedScrollHandler);
+
+    // Scroll progress indicator
+    function updateScrollProgress() {
+        const scrollTop = window.pageYOffset;
+        const docHeight = document.body.scrollHeight - window.innerHeight;
+        const scrollPercent = (scrollTop / docHeight) * 100;
+        
+        // You can use this to show a progress bar
+        document.documentElement.style.setProperty('--scroll-progress', scrollPercent + '%');
+    }
+
+    // Dark mode toggle (future feature)
+    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'));
+            });
+
+            // Check for saved dark mode preference
+            if (localStorage.getItem('darkMode') === 'true') {
+                document.body.classList.add('dark-mode');
+            }
+        }
+    }
+
+    // Initialize all features when DOM is loaded
+    document.addEventListener('DOMContentLoaded', function() {
+        initDarkMode();
+        
+        // Add loading animation complete class
+        document.body.classList.add('loaded');
+        
+        // Show welcome message on first visit
+        if (!localStorage.getItem('hasVisited')) {
+            setTimeout(() => {
+                showNotification('Willkommen bei HexaHost.de! 🚀', 'success');
+                localStorage.setItem('hasVisited', 'true');
+            }, 1000);
+        }
+    });
+
+    // Export functions for global access if needed
+    window.HexaHost = {
+        showNotification: showNotification
+    };
+
+})();