`; // Add toggle functionality for opening/closing shadow body shadowItem.querySelector('.shadow-header').addEventListener('click', () => { const shadowBody = shadowItem.querySelector('.shadow-body'); const arrowIcon = shadowItem.querySelector('.arrow-icon'); // Close other open shadow bodies document.querySelectorAll('.shadow-body').forEach((body) => { if (body !== shadowBody) { body.style.display = 'none'; body.previousElementSibling.querySelector('.arrow-icon').classList.remove('open'); } }); // Toggle the current shadow body shadowBody.style.display = shadowBody.style.display === 'none' ? 'block' : 'none'; arrowIcon.classList.toggle('open'); }); // Add remove functionality with trash icon shadowItem.querySelector('.remove-shadow').addEventListener('click', () => { shadowContainer.removeChild(shadowItem); updateShadow(); }); // Attach change listeners for real-time updates shadowItem.querySelectorAll('input').forEach((input) => { input.addEventListener('input', updateShadow); }); return shadowItem; } // Initialize with one default shadow const firstShadowItem = createShadowItem(); shadowContainer.appendChild(firstShadowItem); // Make the first shadow body visible by default firstShadowItem.querySelector('.shadow-body').style.display = 'block'; firstShadowItem.querySelector('.arrow-icon').classList.add('open'); // Add shadow functionality addShadowButton.addEventListener('click', () => { const shadowCount = shadowContainer.children.length + 1; shadowContainer.appendChild(createShadowItem(shadowCount)); updateShadow(); }); // Update shadow preview dynamically function updateShadow() { const previewBox = document.getElementById('preview-box'); let shadows = []; shadowContainer.querySelectorAll('.shadow-item').forEach((item) => { if (!item.querySelector('input[name="shadow-active"]').checked) return; const inset = item.querySelector('input[name="shadow-inset"]').checked ? 'inset ' : ''; const hOffset = item.querySelector('input[name="shadow-h-offset"]').value; const vOffset = item.querySelector('input[name="shadow-v-offset"]').value; const blur = item.querySelector('input[name="shadow-blur-radius"]').value; const spread = item.querySelector('input[name="shadow-spread"]').value; const color = item.querySelector('input[name="shadow-color"]').value; shadows.push(`${inset}${hOffset}px ${vOffset}px ${blur}px ${spread}px ${color}`); }); const shadowCSS = shadows.join(', '); previewBox.style.boxShadow = shadows.join(', '); codeSnippet.textContent = `box-shadow: ${shadowCSS};`; } copyCodeButton.addEventListener('click', () => { navigator.clipboard.writeText(codeSnippet.textContent).then(() => { alert('Code copied to clipboard!'); }).catch(err => { alert('Failed to copy code: ', err); }); }); // Initial shadow update updateShadow(); });