script.js

// Main script for interactive functionality

document.addEventListener('DOMContentLoaded', () => {
    // Dock item click handlers
    document.addEventListener('click', (e) => {
        const dockItem = e.target.closest('.dock-item');
        if (dockItem) {
            // Remove active class from all dock items
            document.querySelectorAll('.dock-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // Add active class to clicked item
            dockItem.classList.add('active');
            
            // Simulate app opening (in a real app, this would open the corresponding application)
            console.log(`Opening ${dockItem.getAttribute('title')}`);
        }
    });
    
    // Menu item hover effect
    document.addEventListener('mouseover', (e) => {
        const menuItem = e.target.closest('.menu-item');
        if (menuItem) {
            menuItem.style.backgroundColor = 'rgba(0, 122, 255, 0.1)';
        }
    });
    
    document.addEventListener('mouseout', (e) => {
        const menuItem = e.target.closest('.menu-item');
        if (menuItem) {
            menuItem.style.backgroundColor = '';
        }
    });
    
    // Update time in menu bar
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        const timeElement = document.querySelector('macos-menubar')?.shadowRoot?.querySelector('.time');
        if (timeElement) {
            timeElement.textContent = timeString;
        }
    }
    
    setInterval(updateTime, 1000);
    updateTime();
});