n' + ''; } let previewTimer = null; function updatePreview(){ clearTimeout(previewTimer); previewTimer = setTimeout(() => { const cfg = getFormValues(); cfg.categories = state.categories; const html = buildSiteHTML(cfg); document.getElementById('f-preview').srcdoc = html; document.getElementById('f-code-output').value = html; const warnEl = document.getElementById('f-warn'); if(cfg.contactMethod === 'email' && !cfg.contactEmail){ warnEl.style.display = 'block'; warnEl.textContent = 'Let op: vul een e-mailadres in, anders werkt de "ik bied dit aan"-knop niet.'; } else if(cfg.contactMethod === 'whatsapp' && !cfg.contactWa){ warnEl.style.display = 'block'; warnEl.textContent = 'Let op: vul een WhatsApp-nummer in, anders werkt de "ik bied dit aan"-knop niet.'; } else if(cfg.contactMethod === 'signal' && !cfg.contactSignal){ warnEl.style.display = 'block'; warnEl.textContent = 'Let op: vul een Signal-nummer in, anders werkt de "ik bied dit aan"-knop niet.'; } else { warnEl.style.display = 'none'; } }, 120); } document.getElementById('f-download').addEventListener('click', () => { const cfg = getFormValues(); cfg.categories = state.categories; const html = buildSiteHTML(cfg); const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'oproeppagina.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); const btn = document.getElementById('f-download'); const old = btn.textContent; btn.textContent = 'Gedownload!'; setTimeout(() => { btn.textContent = old; }, 1800); }); // Mobiele weergave: wissel tussen formulier en voorbeeld const tabForm = document.getElementById('tab-form'); const tabPreview = document.getElementById('tab-preview'); const formCol = document.getElementById('form-col'); const previewCol = document.getElementById('preview-col'); function setMobileTab(which){ const showForm = which === 'form'; formCol.classList.toggle('tab-hidden', !showForm); previewCol.classList.toggle('tab-hidden', showForm); tabForm.classList.toggle('active', showForm); tabPreview.classList.toggle('active', !showForm); } tabForm.addEventListener('click', () => setMobileTab('form')); tabPreview.addEventListener('click', () => setMobileTab('preview')); // Voorbeeld bekijken als breed scherm of telefoon const deviceDesktopBtn = document.getElementById('device-desktop'); const deviceMobileBtn = document.getElementById('device-mobile'); const previewFrameWrap = document.getElementById('preview-frame-wrap'); deviceDesktopBtn.addEventListener('click', () => { previewFrameWrap.classList.remove('mobile'); deviceDesktopBtn.classList.add('active'); deviceMobileBtn.classList.remove('active'); }); deviceMobileBtn.addEventListener('click', () => { previewFrameWrap.classList.add('mobile'); deviceMobileBtn.classList.add('active'); deviceDesktopBtn.classList.remove('active'); }); document.getElementById('f-copy').addEventListener('click', async () => { const cfg = getFormValues(); cfg.categories = state.categories; const html = buildSiteHTML(cfg); try{ await navigator.clipboard.writeText(html); const btn = document.getElementById('f-copy'); const old = btn.textContent; btn.textContent = 'Gekopieerd!'; setTimeout(() => { btn.textContent = old; }, 1800); }catch(e){ document.getElementById('f-code-output').select(); alert('Automatisch kopiëren lukte niet — de code hieronder is geselecteerd, gebruik Ctrl/Cmd+C.'); } }); renderCategoriesForm(); updatePreview();