File size: 3,371 Bytes
83e79d9 d134fbf 83e79d9 | 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 |
// Shared JavaScript across all pages
console.log('LightStream Dashboard loaded');
// Mobile detection helper
function isMobile() {
return window.innerWidth <= 768;
}
// Toggle mobile menu
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
const mobileMenu = document.getElementById('mobile-menu');
const menuButton = document.getElementById('menu-button');
if (mobileMenu && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
mobileMenu.classList.add('hidden');
}
});
// Add scroll animations
function handleScrollAnimations() {
const elements = document.querySelectorAll('.fade-in, .slide-up, .bounce-in');
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < window.innerHeight - elementVisible) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
}
// Initialize animations on load and scroll
window.addEventListener('load', handleScrollAnimations);
window.addEventListener('scroll', handleScrollAnimations);
// Add typing animation effect
function typeWriter(element, text, speed = 50) {
let i = 0;
element.innerHTML = '';
function type() {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(type, speed);
}
}
type();
}
// Add ripple effect to buttons
function addRippleEffect() {
const buttons = document.querySelectorAll('.login-btn, .logout-btn');
buttons.forEach(button => {
button.addEventListener('click', function(e) {
const ripple = document.createElement('span');
const rect = button.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.background = 'rgba(255, 255, 255, 0.6);
ripple.style.transform = 'scale(0)';
ripple.style.transition = 'transform 0.6s ease, opacity 0.6s ease';
ripple.style.opacity = '1';
ripple.style.transform = 'scale(4)';
ripple.style.opacity = '0';
button.style.position = 'relative';
button.style.overflow = 'hidden';
button.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
});
}
// Initialize effects when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
addRippleEffect();
// Add staggered animation delays to grid items
const gridItems = document.querySelectorAll('.grid > div');
gridItems.forEach((item, index) => {
item.style.animationDelay = (index * 0.1) + 's';
});
});
|