modern-redesign / script.js
enzostvs's picture
enzostvs HF Staff
Redesign this website!
32c7050 verified
(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);
}
})();