debugging-dragon/darkmode-maverick

1document.addEventListener('DOMContentLoaded', () => {2    // Animate elements on scroll3    const animateOnScroll = () => {4        const elements = document.querySelectorAll('.fade-in');5        6        elements.forEach(element => {7            const elementPosition = element.getBoundingClientRect().top;8            const screenPosition = window.innerHeight / 1.3;9            10            if (elementPosition < screenPosition) {11                element.classList.add('animate-fadeIn');12            }13        });14    };15 16    window.addEventListener('scroll', animateOnScroll);17    animateOnScroll(); // Run once on load18 19    // Theme toggle functionality (if light mode is added later)20    const themeToggle = document.getElementById('theme-toggle');21    if (themeToggle) {22        themeToggle.addEventListener('click', () => {23            document.documentElement.classList.toggle('dark');24            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');25        });26    }27 28    // Smooth scrolling for anchor links29    document.querySelectorAll('a[href^="#"]').forEach(anchor => {30        anchor.addEventListener('click', function(e) {31            e.preventDefault();32            const targetId = this.getAttribute('href');33            if (targetId === '#') return;34            35            const targetElement = document.querySelector(targetId);36            if (targetElement) {37                window.scrollTo({38                    top: targetElement.offsetTop - 100,39                    behavior: 'smooth'40                });41            }42        });43    });44});