Spaces:
Running
Running
File size: 5,010 Bytes
e3f3658 b270773 bfb9f2d b270773 e3f3658 b270773 e3f3658 b270773 e3f3658 bfb9f2d e3f3658 bfb9f2d e3f3658 bfb9f2d e3f3658 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
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
});
});
|