web7sys

website-7sys/script.js

@@ -0,0 +1,138 @@
+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);
+    });
+}