// =========================== // Dark Mode Toggle // =========================== document.addEventListener('DOMContentLoaded', function() { const darkModeToggle = document.getElementById('dark-mode-toggle'); if (darkModeToggle) { const icon = darkModeToggle.querySelector('.dark-mode-icon'); // Restore dark mode preference from localStorage const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { document.body.classList.add('dark'); icon.textContent = '☀️'; } else { icon.textContent = '🌙'; } // Toggle dark mode on button click darkModeToggle.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); document.body.classList.toggle('dark'); const isDark = document.body.classList.contains('dark'); localStorage.setItem('darkMode', isDark ? 'true' : 'false'); icon.textContent = isDark ? '☀️' : '🌙'; }); console.log('✅ Dark Mode Toggle initialisiert'); } else { console.warn('⚠️ Dark Mode Toggle Button nicht gefunden'); } // =========================== // Active Navigation Highlighting // =========================== // Highlight active navigation link const currentLocation = location.pathname.split('/').pop() || 'index.html'; const navLinks = document.querySelectorAll('nav a'); navLinks.forEach(link => { const href = link.getAttribute('href'); if (href === currentLocation) { link.classList.add('active'); } else { link.classList.remove('active'); } }); // Initialize lightbox gallery initializeLightbox(); // Initialize contact form initializeContactForm(); }); // =========================== // Lightbox Gallery // =========================== function initializeLightbox() { const galleryImages = document.querySelectorAll('.galerie img'); galleryImages.forEach(img => { img.addEventListener('click', function() { openLightbox(this.src); }); }); } function openLightbox(imageSrc) { // Create overlay const overlay = document.createElement('div'); overlay.className = 'lightbox-overlay'; // Create image container const imgContainer = document.createElement('div'); imgContainer.style.position = 'relative'; // Create close button const closeBtn = document.createElement('span'); closeBtn.className = 'lightbox-close'; closeBtn.innerHTML = '×'; closeBtn.addEventListener('click', function(e) { e.stopPropagation(); overlay.remove(); }); // Create large image const img = document.createElement('img'); img.src = imageSrc; imgContainer.appendChild(closeBtn); imgContainer.appendChild(img); overlay.appendChild(imgContainer); // Close on overlay click overlay.addEventListener('click', function() { overlay.remove(); }); // Close on Escape key document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { overlay.remove(); } }); document.body.appendChild(overlay); } // =========================== // Contact Form Handling // =========================== function initializeContactForm() { const form = document.getElementById('contactForm'); const formMessage = document.getElementById('formMessage'); if (!form) return; form.addEventListener('submit', function(e) { e.preventDefault(); // Get form data const name = document.getElementById('name').value.trim(); const email = document.getElementById('email').value.trim(); const subject = document.getElementById('subject').value.trim(); const message = document.getElementById('message').value.trim(); // Validate if (!name || !email || !subject || !message) { showFormMessage('Bitte füllen Sie alle Felder aus.', 'error'); return; } // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { showFormMessage('Bitte geben Sie eine gültige E-Mail-Adresse ein.', 'error'); return; } // Show success message (in production, this would send to a server) showFormMessage( 'Vielen Dank! Ihre Nachricht wurde erfolgreich eingegeben. ' + '(In einer produktiven Umgebung würde diese an den Server gesendet.)', 'success' ); // Reset form form.reset(); console.log('Form data:', { name, email, subject, message }); }); } function showFormMessage(message, type) { const formMessage = document.getElementById('formMessage'); if (!formMessage) return; formMessage.textContent = message; formMessage.style.padding = '1rem'; formMessage.style.marginTop = '1rem'; formMessage.style.borderRadius = '6px'; formMessage.style.borderLeft = '4px solid'; if (type === 'success') { formMessage.style.background = '#dcfce7'; formMessage.style.color = '#166534'; formMessage.style.borderLeftColor = '#16a34a'; } else if (type === 'error') { formMessage.style.background = '#fee2e2'; formMessage.style.color = '#991b1b'; formMessage.style.borderLeftColor = '#dc2626'; } // Remove message after 5 seconds setTimeout(() => { formMessage.textContent = ''; formMessage.style.background = ''; formMessage.style.color = ''; }, 5000); } // =========================== // Smooth Scroll (Progressive Enhancement) // =========================== document.addEventListener('click', function(e) { if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('#')) { e.preventDefault(); const targetId = e.target.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } } }); // =========================== // Utility: Log // =========================== console.log('✅ EIS Website erfolgreich geladen!'); console.log('📚 Veranstaltung: Entwicklung interaktiver Softwareanwendungen'); console.log('🏫 Institution: PH Weingarten'); console.log('👨‍🏫 Dozenten: Stefan Franke und Prof. Dr. Wolfgang Müller');