`; } function builderCopy(d){ const sessionDetails = [ d.date && `DATE: ${d.date}`, d.time && `SESSION: ${d.time}`, d.location && `LOCATION: ${d.location}`, d.price && `INVESTMENT: ${d.price}`, d.spots && `AVAILABILITY: ${d.spots}`, d.offer && `INCLUDES: ${d.offer}` ].filter(Boolean).join('\n'); const imageCopy = d.images.filter(x=>x.url).map((img,index)=>[ `IMAGE ${index+1}: ${img.url}`, `ALT TEXT: ${img.alt || `${d.topic} portrait session photograph ${index+1}`}`, `CLICK LINK: ${img.link || d.ctaUrl || d.website || 'none'}`, img.caption ? `CAPTION: ${img.caption}` : '' ].filter(Boolean).join('\n')).join('\n\n'); const buttonHref = d.ctaUrl || (d.goal === 'reply' && d.email ? `mailto:${d.email}` : '') || d.website; return `SUBJECT LINE ${d.subject} PREVIEW TEXT ${d.preheader} SMALL HEADER ${campaignLabels[d.campaignType] || 'Photography Sessions'} HEADLINE ${d.topic} NEWSLETTER COPY ${d.message} ${sessionDetails ? `SESSION DETAILS ${sessionDetails} ` : ''}PRIMARY CALL TO ACTION ${d.ctaText} ${buttonHref || 'Add your booking, inquiry or website link'} SECONDARY CALL TO ACTION ${secondaryCTA(d)} ${imageCopy ? `IMAGES ${imageCopy} ` : ''}FOOTER ${d.business || ''} ${d.address || ''} ${d.website || ''} ${d.instagram || ''} ${d.facebook || ''} ${d.tiktok || ''} ${d.pinterest || ''} ${d.email || ''} Use the unsubscribe/footer block required by your email platform.`; } function plainText(d){ const buttonHref = d.ctaUrl || (d.goal === 'reply' && d.email ? `mailto:${d.email}` : '') || d.website; return [ d.business, campaignLabels[d.campaignType] || 'Photography Sessions', '', d.topic, '', d.message, '', d.date && `Date: ${d.date}`, d.time && `Session: ${d.time}`, d.location && `Location: ${d.location}`, d.price && `Investment: ${d.price}`, d.spots && `Availability: ${d.spots}`, d.offer && `Includes: ${d.offer}`, '', `${d.ctaText}${buttonHref ? `: ${buttonHref}` : ''}`, secondaryCTA(d), '', d.website && `Website: ${d.website}`, d.instagram && `Instagram: ${d.instagram}`, d.facebook && `Facebook: ${d.facebook}`, d.tiktok && `TikTok: ${d.tiktok}`, d.pinterest && `Pinterest: ${d.pinterest}`, d.email && `Email: ${d.email}`, d.address && `Mailing address: ${d.address}` ].filter((item,index,array)=>item !== false && item !== undefined && item !== null && !(item === '' && array[index-1] === '')).join('\n').trim(); } function createImageRows(){ const host = document.getElementById('imageRows'); if (!host) return; host.innerHTML = ''; for (let i=1;i<=4;i++){ host.insertAdjacentHTML('beforeend',` `); } qa('[data-image-url]').forEach(input=>{ input.addEventListener('change',()=>testImage(input.dataset.imageUrl)); input.addEventListener('blur',()=>testImage(input.dataset.imageUrl)); }); } function testImage(index){ const input = q(`[data-image-url="${index}"]`); const message = q(`[data-image-status="${index}"]`); const thumb = q(`[data-image-thumb="${index}"]`); if (!input || !message || !thumb) return; const url = safeUrl(input.value); if (!input.value.trim()){ message.textContent = 'Paste a public image URL to preview it.'; message.className = 'image-status'; thumb.innerHTML = `Image ${index}`; return; } if (!url){ message.textContent = 'This is not a valid public http/https image URL.'; message.className = 'image-status bad'; return; } message.textContent = 'Checking image…'; message.className = 'image-status'; const img = new Image(); img.onload = ()=>{ input.value = url; message.textContent = 'Image loaded successfully.'; message.className = 'image-status good'; thumb.innerHTML = ''; const preview = document.createElement('img'); preview.src = url; preview.alt = ''; thumb.appendChild(preview); }; img.onerror = ()=>{ message.textContent = 'This URL did not load as an image. Try the direct public image file or CDN URL.'; message.className = 'image-status bad'; thumb.innerHTML = `Image ${index}`; }; img.src = url; } function platformInfo(platform){ const map = { mailchimp:['Mailchimp HTML','Mailchimp: use the HTML output in a custom-code template. The generated footer includes the *|UNSUB|* merge tag.'], klaviyo:['Klaviyo HTML','Klaviyo: use the HTML output in a custom HTML template. The generated footer includes its unsubscribe-link tag.'], flodesk:['Builder Copy','Flodesk / visual builders: use Builder Copy to rebuild the email in native blocks, then use the platform’s own footer/unsubscribe block.'], other:['Universal HTML','Other platforms: confirm the required unsubscribe tag and replace UNSUBSCRIBE_LINK_HERE before sending.'] }; return map[platform] || map.other; } function updatePlatformUI(platform){ const info = platformInfo(platform); q('[data-platform-badge]').textContent = info[0]; q('[data-platform-note]').textContent = info[1]; } function updateQuality(d){ const items = qa('[data-quality] .quality-item'); if (items.length < 4) return; const states = [ [Boolean(d.brief || get('topic')),'Campaign brief'], [Boolean(d.ctaUrl || d.website || (d.goal==='reply' && d.email)),'Booking / action link'], [d.images.some(x=>x.url),'Images'], [Boolean(d.business && d.address && (d.website || d.email)),'Business footer'] ]; states.forEach(([ok,label],index)=>{ const el = items[index]; el.classList.remove('good','warn'); el.classList.add(ok?'good':'warn'); el.querySelector('span:last-child').textContent = ok ? `${label} ready` : `${label} needs attention`; }); } function selectTab(name){ qa('[data-tab]').forEach(tab=>tab.classList.toggle('active',tab.dataset.tab===name)); qa('[data-panel]').forEach(panel=>panel.classList.toggle('active',panel.dataset.panel===name)); } function status(message){ q('[data-status]').textContent = message || ''; } function render(isAlternate=false){ if (isAlternate) variation += 1; fillFromBrief(false); let d = collect(); const errors = validate(d); const box = q('[data-errors]'); if (errors.length){ box.innerHTML = `Please fix these items:
${errors.map(escapeHtml).join('
')}`; box.hidden = false; box.scrollIntoView({behavior:'smooth',block:'center'}); return; } box.hidden = true; d = finalize(d); lastGenerated = d; if (field('rememberProfile')?.checked) saveProfile(); const html = buildEmailHtml(d); q('[data-preview]').srcdoc = html; q('[data-html-output]').value = html; q('[data-builder-output]').value = builderCopy(d); q('[data-plain-output]').value = plainText(d); q('[data-subject-output]').textContent = d.subject; q('[data-preheader-output]').textContent = d.preheader; q('[data-cta-output]').textContent = d.ctaText; updatePlatformUI(d.platform); updateQuality(d); selectTab(d.platform === 'flodesk' ? 'builder' : 'preview'); status(isAlternate ? 'Created another version while keeping your campaign details and any advanced copy overrides.' : 'Newsletter created. Send yourself a test email before the client send so you can check every link and image.'); } async function copyText(text,message){ if (!text){ status('Create the newsletter first.'); return; } try{ await navigator.clipboard.writeText(text); status(message); }catch{ status('Your browser blocked automatic copy. Select the text in the open tab and copy it manually.'); } } function slug(value){ return String(value || 'photographer-newsletter') .toLowerCase() .replace(/[^a-z0-9]+/g,'-') .replace(/^-|-$/g,'') .slice(0,60) || 'photographer-newsletter'; } const profileFields = ['accent','background','buttonText','business','platform','website','email','instagram','facebook','tiktok','pinterest','logoUrl','address']; function saveProfile(){ try{ const data = {}; profileFields.forEach(name=>data[name]=get(name)); localStorage.setItem(PROFILE_KEY,JSON.stringify(data)); }catch{} } function loadProfile(){ try{ const raw = localStorage.getItem(PROFILE_KEY); if (!raw) return; const data = JSON.parse(raw); profileFields.forEach(name=>{ if (Object.prototype.hasOwnProperty.call(data,name)) set(name,data[name]); }); }catch{} } function forgetProfile(){ try{ localStorage.removeItem(PROFILE_KEY); }catch{} profileFields.forEach(name=>{ if (['accent','background','buttonText','platform'].includes(name)) return; set(name,''); }); set('accent','#8f675d'); set('background','#f4f1ee'); set('buttonText','#ffffff'); set('platform','mailchimp'); updatePlatformUI('mailchimp'); status('Saved studio profile removed from this device.'); } function clearCampaign(){ const names = ['brief','topic','audience','ctaText','ctaUrl','date','time','location','price','spots','offer','deadline','details','replyPrompt','subject','preheader','message']; names.forEach(name=>set(name,'')); set('niche','auto'); set('campaignType','mini'); set('goal','book'); set('tone','warm'); qa('[data-image-url],[data-image-alt],[data-image-link],[data-image-caption]').forEach(el=>el.value=''); qa('[data-image-status]').forEach((el,index)=>{ el.textContent = 'Paste a public image URL to preview it.'; el.className = 'image-status'; const thumb = q(`[data-image-thumb="${index+1}"]`); if (thumb) thumb.innerHTML = `Image ${index+1}`; }); q('[data-preview]').srcdoc = emptyPreview(); q('[data-html-output]').value = ''; q('[data-builder-output]').value = ''; q('[data-plain-output]').value = ''; q('[data-subject-output]').textContent = 'Your subject line will appear here.'; q('[data-preheader-output]').textContent = 'Your preview text will appear here.'; q('[data-cta-output]').textContent = 'Your call to action will appear here.'; variation = 0; lastGenerated = null; updateQuality(collect()); selectTab('preview'); status('New campaign ready. Your saved studio branding is still here.'); field('brief')?.focus(); } function emptyPreview(){ return ` `; } function loadExample(){ clearCampaign(); set('brief','fall family minis, warm neutral outdoor set, October 18, 15 minutes, $225, 8 edited images, only 6 spots, styling guide included, booking closes Friday'); set('niche','family'); set('campaignType','mini'); set('goal','book'); set('tone','warm'); set('location','North Texas'); set('ctaUrl','https://example.com/book'); fillFromBrief(false); render(false); } createImageRows(); loadProfile(); updatePlatformUI(get('platform') || 'mailchimp'); q('[data-preview]').srcdoc = emptyPreview(); updateQuality(collect()); qa('[data-tab]').forEach(tab=>tab.addEventListener('click',()=>selectTab(tab.dataset.tab))); qa('[data-brief-example]').forEach(button=>button.addEventListener('click',()=>{ set('brief',button.dataset.briefExample || ''); fillFromBrief(false); field('brief')?.focus(); })); q('[data-action="generate"]').addEventListener('click',()=>render(false)); q('[data-action="regenerate"]').addEventListener('click',()=>render(true)); q('[data-action="fill-from-brief"]').addEventListener('click',()=>fillFromBrief(true)); q('[data-action="sample"]').addEventListener('click',loadExample); q('[data-action="clear-campaign"]').addEventListener('click',clearCampaign); q('[data-action="forget-profile"]').addEventListener('click',forgetProfile); field('platform').addEventListener('change',event=>{ updatePlatformUI(event.target.value); if (field('rememberProfile')?.checked) saveProfile(); }); profileFields.forEach(name=>{ const el = field(name); if (!el) return; el.addEventListener('change',()=>{ if (field('rememberProfile')?.checked) saveProfile(); }); }); q('[data-action="copy-builder"]').addEventListener('click',()=>copyText(q('[data-builder-output]').value,'Newsletter builder copy copied.')); q('[data-action="copy-html"]').addEventListener('click',()=>copyText(q('[data-html-output]').value,'Email HTML copied.')); q('[data-action="download"]').addEventListener('click',()=>{ const content = q('[data-html-output]').value; if (!content){ status('Create the newsletter first.'); return; } const blob = new Blob([content],{type:'text/html;charset=utf-8'}); const href = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = href; link.download = `${slug(lastGenerated?.topic || get('topic') || 'photographer-newsletter')}.html`; document.body.appendChild(link); link.click(); link.remove(); setTimeout(()=>URL.revokeObjectURL(href),1000); status('HTML file downloaded.'); }); })();