web7sys/website-7sys/script.js

document.addEventListener('DOMContentLoaded', () => {
    initThemeToggle();
    initSmoothScroll();
    initFormValidation();
    initAnimations();
});

function initThemeToggle() {
    const themeToggle = document.getElementById('theme-toggle');
    const body = document.body;
    const icon = themeToggle.querySelector('i');

    // Check for saved theme preference
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.className = savedTheme;
        updateIcon(savedTheme === 'light-theme');
    }

    // Theme toggle functionality
    themeToggle.addEventListener('click', () => {
        const isLight = body.classList.toggle('light-theme');
        localStorage.setItem('theme', isLight ? 'light-theme' : 'dark-theme');
        updateIcon(isLight);
    });

    function updateIcon(isLight) {
        icon.className = isLight ? 'fas fa-moon' : 'fas fa-sun';
    }
}

function initSmoothScroll() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const headerOffset = 60;
                const elementPosition = target.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
}

function initFormValidation() {
    const form = document.querySelector('.contact-form');
    if (!form) return;

    const nameInput = form.querySelector('#name');
    const emailInput = form.querySelector('#email');
    const messageInput = form.querySelector('#message');
    const submitButton = form.querySelector('.submit-button');
    const buttonText = submitButton.querySelector('.button-text');
    const loadingSpinner = submitButton.querySelector('.loading-spinner');
    const feedbackDiv = form.querySelector('.form-feedback');

    const validateInput = (input) => {
        const isValid = input.checkValidity();
        input.classList.toggle('invalid', !isValid);
        return isValid;
    };

    [nameInput, emailInput, messageInput].forEach(input => {
        input.addEventListener('input', () => validateInput(input));
        input.addEventListener('blur', () => validateInput(input));
    });

    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        // Validate all inputs
        const isNameValid = validateInput(nameInput);
        const isEmailValid = validateInput(emailInput);
        const isMessageValid = validateInput(messageInput);

        if (!isNameValid || !isEmailValid || !isMessageValid) {
            showFeedback('Bitte füllen Sie alle Felder korrekt aus.', false);
            return;
        }

        // Show loading state
        submitButton.disabled = true;
        buttonText.style.opacity = '0';
        loadingSpinner.style.display = 'block';

        try {
            // Simulate API call
            await new Promise(resolve => setTimeout(resolve, 1500));
            
            showFeedback('Vielen Dank für Ihre Nachricht! Wir werden uns in Kürze bei Ihnen melden.', true);
            form.reset();
        } catch (error) {
            showFeedback('Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.', false);
        } finally {
            // Reset button state
            submitButton.disabled = false;
            buttonText.style.opacity = '1';
            loadingSpinner.style.display = 'none';
        }
    });

    function showFeedback(message, isSuccess) {
        feedbackDiv.textContent = message;
        feedbackDiv.className = `form-feedback ${isSuccess ? 'success' : 'error'}`;
        
        // Auto-hide feedback after 5 seconds
        setTimeout(() => {
            feedbackDiv.style.display = 'none';
        }, 5000);
    }
}

function initAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target); // Stop observing once animated
            }
        });
    }, observerOptions);

    // Observe all service cards and vision items
    document.querySelectorAll('.service-card, .vision-item').forEach(el => {
        observer.observe(el);
    });
}