script.js

// Color generator functionality
function updateColor(colorClass) {
    const colorDisplay = document.getElementById('colorDisplay');
    const colorCode = document.getElementById('colorCode');
    
    // Remove all color classes
    colorDisplay.className = 'h-64 rounded-xl mb-4';
    
    // Add the selected color class
    colorDisplay.classList.add(`bg-${colorClass}`);
    
    // Update the color code text
    const colorName = colorClass.split('-')[0];
    const colorShade = colorClass.split('-')[1];
    colorCode.textContent = `Color: ${colorName}-${colorShade}\nHex: ${getComputedStyle(colorDisplay).backgroundColor}`;
    
    // Add animation
    colorDisplay.classList.add('fade-in');
    setTimeout(() => {
        colorDisplay.classList.remove('fade-in');
    }, 500);
}

function copyColorCode() {
    const colorCode = document.getElementById('colorCode').textContent;
    navigator.clipboard.writeText(colorCode).then(() => {
        const originalText = document.getElementById('colorCode').textContent;
        document.getElementById('colorCode').textContent = 'Copied to clipboard!';
        setTimeout(() => {
            document.getElementById('colorCode').textContent = originalText;
        }, 2000);
    });
}
// Initialize with default color
document.addEventListener('DOMContentLoaded', () => {
    updateColor('citrus-500');
    
    // Mobile menu toggle
    const mobileMenuButton = document.getElementById('mobileMenuButton');
    const mobileMenu = document.getElementById('mobileMenu');
    
    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    }
});

// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileMenuButton = document.getElementById('mobileMenuButton');
    
    if (mobileMenu && !mobileMenu.contains(e.target) && e.target !== mobileMenuButton) {
        mobileMenu.classList.add('hidden');
    }
});