document.addEventListener('DOMContentLoaded', function() { // Theme toggle functionality const themeToggle = document.getElementById('themeToggle'); const html = document.documentElement; // Check for saved theme preference or use system preference const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); html.classList.add(savedTheme); themeToggle.addEventListener('click', () => { html.classList.toggle('dark'); const theme = html.classList.contains('dark') ? 'dark' : 'light'; localStorage.setItem('theme', theme); lucide.createIcons(); }); // Mobile menu toggle const menuToggle = document.getElementById('menuToggle'); const sidebar = document.getElementById('sidebar'); if (menuToggle && sidebar) { menuToggle.addEventListener('click', () => { sidebar.classList.toggle('-translate-x-full'); }); } // Handle responsive sidebar function handleResize() { if (window.innerWidth >= 1024 && sidebar) { sidebar.classList.remove('-translate-x-full'); } } window.addEventListener('resize', handleResize); handleResize(); // Update stats periodically with realistic data function updateStats() { const statsElements = document.querySelectorAll('.text-3xl.font-bold'); statsElements.forEach((el, index) => { const currentValue = el.textContent.replace(/[$,%]/g, '').replace(/,/g, ''); const isPercentage = el.textContent.includes('%'); const isDollar = el.textContent.includes('); let change = 0; if (isPercentage) { change = (Math.random() * 0.5 - 0.25).toFixed(2); el.textContent = (parseFloat(currentValue) + parseFloat(change)).toFixed(2) + '%'; } else if (isDollar) { change = Math.floor(Math.random() * 1000) - 500; el.textContent = ' + (parseInt(currentValue) + change).toLocaleString(); } else { change = Math.floor(Math.random() * 100) - 50; el.textContent = (parseInt(currentValue) + change).toLocaleString(); } // Add pulse animation el.classList.add('animate-pulse'); setTimeout(() => el.classList.remove('animate-pulse'), 1000); }); } // Update stats every 3 seconds setInterval(updateStats, 3000); // Add smooth scroll behavior document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Initialize tooltips const tooltipElements = document.querySelectorAll('[data-tooltip]'); tooltipElements.forEach(element => { element.addEventListener('mouseenter', function() { const tooltip = document.createElement('div'); tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg'; tooltip.textContent = this.getAttribute('data-tooltip'); document.body.appendChild(tooltip); const rect = this.getBoundingClientRect(); tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px'; tooltip.style.top = rect.top - tooltip.offsetHeight - 5 + 'px'; this._tooltip = tooltip; }); element.addEventListener('mouseleave', function() { if (this._tooltip) { this._tooltip.remove(); delete this._tooltip; } }); }); // Simulate real-time notifications function addNotification() { const notifications = [ { type: 'user', message: 'New user registration', icon: 'user-plus' }, { type: 'order', message: 'New order received', icon: 'shopping-bag' }, { type: 'comment', message: 'New comment posted', icon: 'message-circle' }, { type: 'alert', message: 'Server alert triggered', icon: 'alert-triangle' } ]; const randomNotification = notifications[Math.floor(Math.random() * notifications.length)]; console.log('Notification:', randomNotification.message); } // Add random notifications every 30 seconds setInterval(addNotification, 30000); // Re-initialize Lucide icons when DOM changes const observer = new MutationObserver(() => { lucide.createIcons(); }); observer.observe(document.body, { childList: true, subtree: true }); });