// Count up animation function animateValue(el, start, end, duration) { let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); el.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString(); if (progress < 1) { window.requestAnimationFrame(step); } }; window.requestAnimationFrame(step); } // Enhanced DOMContentLoaded document.addEventListener('DOMContentLoaded', () => { // Check for saved theme preference or use preferred color scheme const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.classList.add(savedTheme); // Set up theme toggle button const themeToggle = document.querySelector('.theme-toggle'); if (themeToggle) { themeToggle.addEventListener('click', () => { const html = document.documentElement; const isDark = html.classList.contains('dark'); if (isDark) { html.classList.remove('dark'); localStorage.setItem('theme', 'light'); } else { html.classList.add('dark'); localStorage.setItem('theme', 'dark'); } feather.replace(); }); } // Animate balance count-up const balanceEl = document.querySelector('.count-up'); if (balanceEl) { const target = parseInt(balanceEl.dataset.target); animateValue(balanceEl, 0, target, 2000); } // Stagger transaction animations document.querySelectorAll('.transaction-item').forEach((item, i) => { setTimeout(() => { item.style.opacity = '1'; }, i * 150); }); // Add hover effects to cards const cards = document.querySelectorAll('.transaction-item, .quick-action'); cards.forEach(card => { card.addEventListener('mouseenter', () => { card.classList.add('shadow-lg'); }); card.addEventListener('mouseleave', () => { card.classList.remove('shadow-lg'); }); }); });