Advanced Email Opt-In Popup Generator `; output.value = popupCode; updatePreview(title, message, buttonText, position, bgColor, textColor, buttonColor); } function updatePreview(title, message, buttonText, position, bgColor, textColor, buttonColor) { const positionStyles = { 'center': 'top: 50%; left: 50%; transform: translate(-50%, -50%);', 'bottom-right': 'bottom: 20px; right: 20px;', 'bottom-left': 'bottom: 20px; left: 20px;', 'top-center': 'top: 20px; left: 50%; transform: translateX(-50%);' }; preview.innerHTML = `
×

${title}

${message}

`; } [titleInput, messageInput, buttonTextInput, delayInput, positionSelect, bgColorInput, textColorInput, buttonColorInput].forEach(input => { input.addEventListener('input', generatePopupCode); }); generateButton.addEventListener('click', generatePopupCode); clearButton.addEventListener('click', () => { titleInput.value = ''; messageInput.value = ''; buttonTextInput.value = ''; delayInput.value = '3'; positionSelect.value = 'center'; bgColorInput.value = '#ffffff'; textColorInput.value = '#000000'; buttonColorInput.value = '#26a9e0'; output.value = ''; preview.innerHTML = ''; }); copyButton.addEventListener('click', () => { if (!output.value) { alert('No code to copy.'); return; } navigator.clipboard.writeText(output.value) .then(() => alert('Popup code copied to clipboard!')) .catch(err => { console.error('Failed to copy:', err); alert('Failed to copy code.'); }); }); downloadButton.addEventListener('click', () => { if (!output.value) { alert('No code to download.'); return; } const blob = new Blob([output.value], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'email-popup.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); // Initialize with default values generatePopupCode(); });