.color-picker-container { font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; background: #ffffff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .color-preview { position: relative; width: 200px; height: 200px; margin: 20px auto; transition: all 0.3s ease; } .balloon-preview { width: 100%; height: 100%; border-radius: 50%; position: relative; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .balloon-string { width: 2px; height: 40px; background: #666; margin: 0 auto; position: relative; top: -5px; } .color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 15px; padding: 20px; } .color-option { position: relative; aspect-ratio: 1; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .color-option:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .color-option.selected { border: 2px solid #333; transform: scale(1.1); } .info-panel { background: #f8f9fa; padding: 15px; border-radius: 10px; margin-top: 20px; text-align: center; } .color-name { font-size: 1.2em; color: #333; margin-bottom: 5px; } .color-code { font-size: 0.9em; color: #666; } document.addEventListener('DOMContentLoaded', function() { const colorOptions = document.querySelectorAll('.color-option'); const balloonPreview = document.getElementById('balloonPreview'); const colorName = document.getElementById('colorName'); const colorCode = document.getElementById('colorCode'); function selectColor(option) { // Remove selected class from all options colorOptions.forEach(opt => opt.classList.remove('selected')); // Add selected class to clicked option option.classList.add('selected'); // Update preview const color = option.getAttribute('data-hex'); const name = option.getAttribute('data-name'); balloonPreview.style.backgroundColor = color; colorName.textContent = name; colorCode.textContent = `Hex Code: ${color}`; // Add animation balloonPreview.style.transform = 'scale(1.05)'; setTimeout(() => { balloonPreview.style.transform = 'scale(1)'; }, 200); } // Add click handlers colorOptions.forEach(option => { option.addEventListener('click', () => selectColor(option)); }); // Select first color by default selectColor(colorOptions[0]); });