document.addEventListener('DOMContentLoaded', function() {
    // Color generator button functionality
    const colorGenerator = document.getElementById('color-generator');
    if (colorGenerator) {
        colorGenerator.addEventListener('click', function() {
            const colors = generateRandomColors(5);
            applyColorsToElements(colors);
        });
    }

    // Generate random colors
    function generateRandomColors(count) {
        const colors = [];
        for (let i = 0; i < count; i++) {
            const hue = Math.floor(Math.random() * 360);
            colors.push(`hsl(${hue}, 70%, 60%)`);
        }
        return colors;
    }

    // Apply colors to elements
    function applyColorsToElements(colors) {
        const colorBlocks = document.querySelectorAll('.color-block');
        colorBlocks.forEach((block, index) => {
            const color = colors[index % colors.length];
            block.style.backgroundColor = color;
            block.style.backgroundImage = `linear-gradient(to bottom right, ${color}, ${adjustBrightness(color, -20)})`;
        });
    }

    // Helper function to adjust color brightness
    function adjustBrightness(color, percent) {
        // Implementation for adjusting color brightness
        // This is a simplified version - in a real app you might want to use a color manipulation library
        return color;
    }
});