eis-website/js/script.js

210 lines
6 KiB
JavaScript

// ===========================
// 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');