Spaces:
Running
Running
| (function () { | |
| const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| const stored = localStorage.getItem('theme'); // 'light' | 'dark' | |
| const theme = stored || (prefersDark ? 'dark' : 'light'); | |
| applyTheme(theme); | |
| // Elements | |
| const mobileMenuBtn = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const themeIcon = document.getElementById('theme-icon'); | |
| const themeToggleMobile = document.getElementById('theme-toggle-mobile'); | |
| const themeIconMobile = document.getElementById('theme-icon-mobile'); | |
| const yearEl = document.getElementById('year'); | |
| const contactForm = document.getElementById('contact-form'); | |
| const toast = document.getElementById('toast-content'); | |
| const toastClose = document.getElementById('toast-close'); | |
| // Set current year | |
| if (yearEl) yearEl.textContent = new Date().getFullYear(); | |
| // Mobile menu toggle | |
| if (mobileMenuBtn && mobileMenu) { | |
| mobileMenuBtn.addEventListener('click', () => { | |
| const isOpen = !mobileMenu.classList.contains('hidden'); | |
| mobileMenu.classList.toggle('hidden', isOpen); | |
| mobileMenuBtn.setAttribute('aria-expanded', String(!isOpen)); | |
| // Change icon between menu and x | |
| const icon = mobileMenuBtn.querySelector('i'); | |
| if (icon) { | |
| icon.setAttribute('data-feather', isOpen ? 'menu' : 'x'); | |
| if (window.feather) feather.replace(); | |
| } | |
| }); | |
| // Close on link click | |
| mobileMenu.querySelectorAll('a').forEach((a) => { | |
| a.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| mobileMenuBtn.setAttribute('aria-expanded', 'false'); | |
| const icon = mobileMenuBtn.querySelector('i'); | |
| if (icon) { | |
| icon.setAttribute('data-feather', 'menu'); | |
| if (window.feather) feather.replace(); | |
| } | |
| }); | |
| }); | |
| } | |
| // Theme toggle handlers | |
| function setIcon(mode) { | |
| if (themeIcon) themeIcon.setAttribute('data-feather', mode === 'dark' ? 'moon' : 'sun'); | |
| if (themeIconMobile) themeIconMobile.setAttribute('data-feather', mode === 'dark' ? 'moon' : 'sun'); | |
| if (window.feather) feather.replace(); | |
| } | |
| function applyTheme(mode) { | |
| document.documentElement.classList.toggle('dark', mode === 'dark'); | |
| localStorage.setItem('theme', mode); | |
| setIcon(mode); | |
| } | |
| function toggleTheme() { | |
| const next = document.documentElement.classList.contains('dark') ? 'light' : 'dark'; | |
| applyTheme(next); | |
| } | |
| if (themeToggle) themeToggle.addEventListener('click', toggleTheme); | |
| if (themeToggleMobile) themeToggleMobile.addEventListener('click', toggleTheme); | |
| // Contact form handler (demo) | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| showToast('Message sent! We’ll get back to you shortly.'); | |
| contactForm.reset(); | |
| }); | |
| } | |
| if (toastClose) { | |
| toastClose.addEventListener('click', hideToast); | |
| } | |
| function showToast(message) { | |
| if (!toast) return; | |
| const text = toast.querySelector('.font-semibold'); | |
| if (text) text.textContent = message || 'Done'; | |
| toast.classList.remove('hidden'); | |
| toast.classList.add('show'); | |
| setTimeout(hideToast, 3500); | |
| } | |
| function hideToast() { | |
| if (!toast) return; | |
| toast.classList.remove('show'); | |
| setTimeout(() => toast.classList.add('hidden'), 200); | |
| } | |
| })(); |