script.js

// Dark mode toggle functionality
document.addEventListener('DOMContentLoaded', function() {
    // Check for saved theme preference or use system preference
    const savedTheme = localStorage.getItem('theme') || 
                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.classList.add(savedTheme);
    
    // Theme switcher
    const themeToggle = document.querySelector('#theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            document.documentElement.classList.remove(currentTheme);
            document.documentElement.classList.add(newTheme);
            localStorage.setItem('theme', newTheme);
            
            // Update icon
            const icon = themeToggle.querySelector('[data-feather]');
            if (icon) {
                icon.setAttribute('data-feather', newTheme === 'dark' ? 'sun' : 'moon');
                feather.replace();
            }
        });
    }
    
    // Project status indicators
    document.querySelectorAll('.project-status').forEach(status => {
        const text = status.textContent.trim().toLowerCase();
        if (text === 'running') {
            status.classList.add('bg-green-100', 'text-green-800');
        } else if (text === 'stopped') {
            status.classList.add('bg-red-100', 'text-red-800');
        } else if (text === 'starting') {
            status.classList.add('bg-yellow-100', 'text-yellow-800');
        }
    });
    
    // Simulate loading projects from API
    async function loadProjects() {
        try {
            // In a real app, you would fetch from your API
            // const response = await fetch('/api/projects');
            // const projects = await response.json();
            
            // For demo purposes, we'll simulate a delay
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            // Update UI with loaded projects
            console.log('Projects loaded');
        } catch (error) {
            console.error('Failed to load projects:', error);
        }
    }
    
    loadProjects();
});