| Description | Qty | Rate | Amount |
|---|---|---|---|
| Web Development — Landing Page | 40 hrs | $150 | $6,000 |
| UI/UX Design — Mockups | 16 hrs | $125 | $2,000 |
| API Integration & Testing | 24 hrs | $150 | $3,600 |
| Total | $11,600 | ||
Q4 saw exceptional growth across all key metrics. Customer acquisition increased by 85% while churn decreased to an all-time low of 1.2%. Our expansion into the EU market contributed significantly to revenue gains.
\nCrossed 10,000 active users milestone in December, two months ahead of target. Enterprise segment grew 200% QoQ.
\nLaunched 3 major features: batch processing, webhook notifications, and custom templates. Template engine adoption reached 40% of Pro users within the first month.
\nQ1 2026 focus areas include Markdown-to-PDF improvements, enhanced template library, and SOC 2 certification to unlock enterprise sales pipeline.
\n\n', - custom: '\n\n\n\n\nEdit this HTML and watch the preview update in real time.
\nThen click Generate PDF to download it.
\n\n' -}; - -var previewDebounce = null; -function updatePreview() { - var iframe = document.getElementById('demoPreview'); - var html = document.getElementById('demoHtml').value; - if (!iframe) return; - var doc = iframe.contentDocument || iframe.contentWindow.document; - doc.open(); - doc.write(html); - doc.close(); -} - -function setTemplate(name) { - var ta = document.getElementById('demoHtml'); - ta.value = pgTemplates[name] || pgTemplates.custom; - updatePreview(); - // Update active tab - document.querySelectorAll('.pg-tab').forEach(function(t) { - var isActive = t.getAttribute('data-template') === name; - t.classList.toggle('active', isActive); - t.setAttribute('aria-selected', isActive ? 'true' : 'false'); - }); -} - -async function generateDemo() { - var btn = document.getElementById('demoGenerateBtn'); - var status = document.getElementById('demoStatus'); - var result = document.getElementById('demoResult'); - var errorEl = document.getElementById('demoError'); - var html = document.getElementById('demoHtml').value.trim(); - - if (!html) { - errorEl.textContent = 'Please enter some HTML.'; - errorEl.style.display = 'block'; - result.classList.remove('visible'); - return; - } - - errorEl.style.display = 'none'; - result.classList.remove('visible'); - btn.disabled = true; - btn.classList.add('pg-generating'); - status.textContent = 'Generating…'; - var startTime = performance.now(); - - try { - var res = await fetch('/v1/demo/html', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ html: html }) - }); - - if (!res.ok) { - var data = await res.json(); - errorEl.textContent = data.error || 'Something went wrong.'; - errorEl.style.display = 'block'; - btn.disabled = false; - btn.classList.remove('pg-generating'); - status.textContent = ''; - return; - } - - var elapsed = ((performance.now() - startTime) / 1000).toFixed(1); - var blob = await res.blob(); - var url = URL.createObjectURL(blob); - document.getElementById('demoDownload').href = url; - document.getElementById('demoTime').textContent = elapsed; - result.classList.add('visible'); - status.textContent = ''; - btn.disabled = false; - btn.classList.remove('pg-generating'); - } catch (err) { - errorEl.textContent = 'Network error. Please try again.'; - errorEl.style.display = 'block'; - btn.disabled = false; - btn.classList.remove('pg-generating'); - status.textContent = ''; - } -} - -// === Init === -document.addEventListener('DOMContentLoaded', function() { - // BUG-068: Open change email modal if navigated via hash - if (window.location.hash === '#change-email') { - openEmailChange(); - } - - // Demo playground - document.getElementById('demoGenerateBtn').addEventListener('click', generateDemo); - - // Playground tabs - document.querySelectorAll('.pg-tab').forEach(function(tab) { - tab.addEventListener('click', function() { setTemplate(this.getAttribute('data-template')); }); - }); - // Init with invoice template - setTemplate('invoice'); - // Live preview on input - document.getElementById('demoHtml').addEventListener('input', function() { - clearTimeout(previewDebounce); - previewDebounce = setTimeout(updatePreview, 150); - }); - // Playground checkout button - var pgCheckout = document.getElementById('btn-checkout-playground'); - if (pgCheckout) pgCheckout.addEventListener('click', checkout); - - // Checkout buttons - document.getElementById('btn-checkout').addEventListener('click', checkout); - var heroCheckout = document.getElementById('btn-checkout-hero'); - if (heroCheckout) heroCheckout.addEventListener('click', checkout); - - // Recovery modal - document.getElementById('btn-close-recover').addEventListener('click', closeRecover); - document.getElementById('recoverBtn').addEventListener('click', submitRecover); - document.getElementById('recoverVerifyBtn').addEventListener('click', submitRecoverVerify); - document.getElementById('copyRecoveredBtn').addEventListener('click', copyRecoveredKey); - document.getElementById('recoverModal').addEventListener('click', function(e) { - if (e.target === this) closeRecover(); - }); - - // Open recovery from links - document.querySelectorAll('.open-recover').forEach(function(el) { - el.addEventListener('click', function(e) { e.preventDefault(); openRecover(); }); - }); - - // Smooth scroll for hash links (exclude download link) - document.querySelectorAll('a[href^="#"]').forEach(function(a) { - if (a.id === 'demoDownload') return; - a.addEventListener('click', function(e) { - var target = this.getAttribute('href'); - if (target === '#') return; - e.preventDefault(); - var el = document.querySelector(target); - if (el) el.scrollIntoView({ behavior: 'smooth' }); - }); - }); -}); - -// --- Email Change --- -var emailChangeApiKey = ''; -var emailChangeNewEmail = ''; - -function showEmailChangeState(state) { - ['emailChangeInitial', 'emailChangeLoading', 'emailChangeVerify', 'emailChangeResult'].forEach(function(id) { - var el = document.getElementById(id); - if (el) el.classList.remove('active'); - }); - document.getElementById(state).classList.add('active'); -} - -function openEmailChange() { - closeRecover(); - document.getElementById('emailChangeModal').classList.add('active'); - showEmailChangeState('emailChangeInitial'); - var errEl = document.getElementById('emailChangeError'); - if (errEl) errEl.style.display = 'none'; - var verifyErrEl = document.getElementById('emailChangeVerifyError'); - if (verifyErrEl) verifyErrEl.style.display = 'none'; - document.getElementById('emailChangeApiKey').value = ''; - document.getElementById('emailChangeNewEmail').value = ''; - document.getElementById('emailChangeCode').value = ''; - emailChangeApiKey = ''; - emailChangeNewEmail = ''; -} - -function closeEmailChange() { - document.getElementById('emailChangeModal').classList.remove('active'); -} - -async function submitEmailChange() { - var errEl = document.getElementById('emailChangeError'); - var btn = document.getElementById('emailChangeBtn'); - var apiKey = document.getElementById('emailChangeApiKey').value.trim(); - var newEmail = document.getElementById('emailChangeNewEmail').value.trim(); - - if (!apiKey) { - errEl.textContent = 'Please enter your API key.'; - errEl.style.display = 'block'; - return; - } - if (!newEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)) { - errEl.textContent = 'Please enter a valid email address.'; - errEl.style.display = 'block'; - return; - } - - errEl.style.display = 'none'; - btn.disabled = true; - showEmailChangeState('emailChangeLoading'); - - try { - var res = await fetch('/v1/email-change', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ apiKey: apiKey, newEmail: newEmail }) - }); - var data = await res.json(); - - if (!res.ok) { - showEmailChangeState('emailChangeInitial'); - errEl.textContent = data.error || 'Something went wrong.'; - errEl.style.display = 'block'; - btn.disabled = false; - return; - } - - emailChangeApiKey = apiKey; - emailChangeNewEmail = newEmail; - document.getElementById('emailChangeEmailDisplay').textContent = newEmail; - showEmailChangeState('emailChangeVerify'); - document.getElementById('emailChangeCode').focus(); - btn.disabled = false; - } catch (err) { - showEmailChangeState('emailChangeInitial'); - errEl.textContent = 'Network error. Please try again.'; - errEl.style.display = 'block'; - btn.disabled = false; - } -} - -async function submitEmailChangeVerify() { - var errEl = document.getElementById('emailChangeVerifyError'); - var btn = document.getElementById('emailChangeVerifyBtn'); - var code = document.getElementById('emailChangeCode').value.trim(); - - if (!code || !/^\d{6}$/.test(code)) { - errEl.textContent = 'Please enter a 6-digit code.'; - errEl.style.display = 'block'; - return; - } - - errEl.style.display = 'none'; - btn.disabled = true; - - try { - var res = await fetch('/v1/email-change/verify', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ apiKey: emailChangeApiKey, newEmail: emailChangeNewEmail, code: code }) - }); - var data = await res.json(); - - if (!res.ok) { - errEl.textContent = data.error || 'Verification failed.'; - errEl.style.display = 'block'; - btn.disabled = false; - return; - } - - document.getElementById('emailChangeNewDisplay').textContent = data.newEmail || emailChangeNewEmail; - showEmailChangeState('emailChangeResult'); - var ecH2 = document.querySelector('#emailChangeResult h2'); - if (ecH2) { ecH2.setAttribute('tabindex', '-1'); ecH2.focus(); } - } catch (err) { - errEl.textContent = 'Network error. Please try again.'; - errEl.style.display = 'block'; - btn.disabled = false; - } -} - -// Email change event listeners -document.addEventListener('DOMContentLoaded', function() { - var closeBtn = document.getElementById('btn-close-email-change'); - if (closeBtn) closeBtn.addEventListener('click', closeEmailChange); - - var changeBtn = document.getElementById('emailChangeBtn'); - if (changeBtn) changeBtn.addEventListener('click', submitEmailChange); - - var verifyBtn = document.getElementById('emailChangeVerifyBtn'); - if (verifyBtn) verifyBtn.addEventListener('click', submitEmailChangeVerify); - - var modal = document.getElementById('emailChangeModal'); - if (modal) modal.addEventListener('click', function(e) { if (e.target === this) closeEmailChange(); }); - - document.querySelectorAll('.open-email-change').forEach(function(el) { - el.addEventListener('click', function(e) { e.preventDefault(); openEmailChange(); }); - }); -}); - -// === Accessibility: Escape key closes modals, focus trapping === -(function() { - function getActiveModal() { - var modals = ['recoverModal', 'emailChangeModal']; - for (var i = 0; i < modals.length; i++) { - var m = document.getElementById(modals[i]); - if (m && m.classList.contains('active')) return m; - } - return null; - } - - function closeActiveModal() { - var m = getActiveModal(); - if (!m) return; - m.classList.remove('active'); - } - - document.addEventListener('keydown', function(e) { - if (e.key === 'Escape') closeActiveModal(); - - if (e.key === 'Tab') { - var modal = getActiveModal(); - if (!modal) return; - var focusable = modal.querySelectorAll('button:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'); - if (focusable.length === 0) return; - var first = focusable[0], last = focusable[focusable.length - 1]; - if (e.shiftKey) { - if (document.activeElement === first) { e.preventDefault(); last.focus(); } - } else { - if (document.activeElement === last) { e.preventDefault(); first.focus(); } - } - } - }); -})(); +var recoverEmail="";function showRecoverState(e){["recoverInitial","recoverLoading","recoverVerify","recoverResult"].forEach(function(e){var t=document.getElementById(e);t&&t.classList.remove("active")}),document.getElementById(e).classList.add("active")}function openRecover(){document.getElementById("recoverModal").classList.add("active"),showRecoverState("recoverInitial");var e=document.getElementById("recoverError");e&&(e.style.display="none");var t=document.getElementById("recoverVerifyError");t&&(t.style.display="none"),document.getElementById("recoverEmailInput").value="",document.getElementById("recoverCode").value="",recoverEmail="",setTimeout(function(){document.getElementById("recoverEmailInput").focus()},100)}function closeRecover(){document.getElementById("recoverModal").classList.remove("active")}async function submitRecover(){var e=document.getElementById("recoverError"),t=document.getElementById("recoverBtn"),n=document.getElementById("recoverEmailInput").value.trim();if(!n||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n))return e.textContent="Please enter a valid email address.",void(e.style.display="block");e.style.display="none",t.disabled=!0,showRecoverState("recoverLoading");try{var a=await fetch("/v1/recover",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:n})}),o=await a.json();if(!a.ok)return showRecoverState("recoverInitial"),e.textContent=o.error||"Something went wrong.",e.style.display="block",void(t.disabled=!1);recoverEmail=n,document.getElementById("recoverEmailDisplay").textContent=n,showRecoverState("recoverVerify"),document.getElementById("recoverCode").focus(),t.disabled=!1}catch(n){showRecoverState("recoverInitial"),e.textContent="Network error. Please try again.",e.style.display="block",t.disabled=!1}}async function submitRecoverVerify(){var e=document.getElementById("recoverVerifyError"),t=document.getElementById("recoverVerifyBtn"),n=document.getElementById("recoverCode").value.trim();if(!n||!/^\d{6}$/.test(n))return e.textContent="Please enter a 6-digit code.",void(e.style.display="block");e.style.display="none",t.disabled=!0;try{var a=await fetch("/v1/recover/verify",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:recoverEmail,code:n})}),o=await a.json();if(!a.ok)return e.textContent=o.error||"Verification failed.",e.style.display="block",void(t.disabled=!1);if(o.apiKey){document.getElementById("recoveredKeyText").textContent=o.apiKey,showRecoverState("recoverResult");var i=document.querySelector("#recoverResult h2");i&&(i.setAttribute("tabindex","-1"),i.focus())}else e.textContent=o.message||"No key found for this email.",e.style.display="block",t.disabled=!1}catch(n){e.textContent="Network error. Please try again.",e.style.display="block",t.disabled=!1}}function copyRecoveredKey(){doCopy(document.getElementById("recoveredKeyText").textContent,document.getElementById("copyRecoveredBtn"))}function doCopy(e,t){function n(){t.textContent="✓ Copied!",setTimeout(function(){t.textContent="Copy"},2e3)}function a(){t.textContent="Failed",setTimeout(function(){t.textContent="Copy"},2e3)}try{navigator.clipboard&&window.isSecureContext?navigator.clipboard.writeText(e).then(n).catch(function(){fallbackCopy(e,n,a)}):fallbackCopy(e,n,a)}catch(e){a()}}function fallbackCopy(e,t,n){try{var a=document.createElement("textarea");a.value=e,a.style.position="fixed",a.style.opacity="0",a.style.top="-9999px",document.body.appendChild(a),a.focus(),a.select();var o=document.execCommand("copy");document.body.removeChild(a),o?t():n()}catch(e){n()}}async function checkout(){try{var e=await fetch("/v1/billing/checkout",{method:"POST"}),t=await e.json();t.url?window.location.href=t.url:alert("Checkout is not available yet. Please try again later.")}catch(e){alert("Something went wrong. Please try again.")}}var pgTemplates={invoice:'\n\n\n\n\n| Description | Qty | Rate | Amount |
|---|---|---|---|
| Web Development — Landing Page | 40 hrs | $150 | $6,000 |
| UI/UX Design — Mockups | 16 hrs | $125 | $2,000 |
| API Integration & Testing | 24 hrs | $150 | $3,600 |
| Total | $11,600 | ||
Q4 saw exceptional growth across all key metrics. Customer acquisition increased by 85% while churn decreased to an all-time low of 1.2%. Our expansion into the EU market contributed significantly to revenue gains.
\nCrossed 10,000 active users milestone in December, two months ahead of target. Enterprise segment grew 200% QoQ.
\nLaunched 3 major features: batch processing, webhook notifications, and custom templates. Template engine adoption reached 40% of Pro users within the first month.
\nQ1 2026 focus areas include Markdown-to-PDF improvements, enhanced template library, and SOC 2 certification to unlock enterprise sales pipeline.
\n\n',custom:"\n\n\n\n\nEdit this HTML and watch the preview update in real time.
\nThen click Generate PDF to download it.
\n\n"},previewDebounce=null;function updatePreview(){var e=document.getElementById("demoPreview"),t=document.getElementById("demoHtml").value;if(e){var n=e.contentDocument||e.contentWindow.document;n.open(),n.write(t),n.close()}}function setTemplate(e){document.getElementById("demoHtml").value=pgTemplates[e]||pgTemplates.custom,updatePreview(),document.querySelectorAll(".pg-tab").forEach(function(t){var n=t.getAttribute("data-template")===e;t.classList.toggle("active",n),t.setAttribute("aria-selected",n?"true":"false")})}async function generateDemo(){var e=document.getElementById("demoGenerateBtn"),t=document.getElementById("demoStatus"),n=document.getElementById("demoResult"),a=document.getElementById("demoError"),o=document.getElementById("demoHtml").value.trim();if(!o)return a.textContent="Please enter some HTML.",a.style.display="block",void n.classList.remove("visible");a.style.display="none",n.classList.remove("visible"),e.disabled=!0,e.classList.add("pg-generating"),t.textContent="Generating…";var i=performance.now();try{var r=await fetch("/v1/demo/html",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({html:o})});if(!r.ok){var l=await r.json();return a.textContent=l.error||"Something went wrong.",a.style.display="block",e.disabled=!1,e.classList.remove("pg-generating"),void(t.textContent="")}var d=((performance.now()-i)/1e3).toFixed(1),c=await r.blob(),s=URL.createObjectURL(c);document.getElementById("demoDownload").href=s,document.getElementById("demoTime").textContent=d,n.classList.add("visible"),t.textContent="",e.disabled=!1,e.classList.remove("pg-generating")}catch(n){a.textContent="Network error. Please try again.",a.style.display="block",e.disabled=!1,e.classList.remove("pg-generating"),t.textContent=""}}document.addEventListener("DOMContentLoaded",function(){"#change-email"===window.location.hash&&openEmailChange(),document.getElementById("demoGenerateBtn").addEventListener("click",generateDemo),document.querySelectorAll(".pg-tab").forEach(function(e){e.addEventListener("click",function(){setTemplate(this.getAttribute("data-template"))})}),setTemplate("invoice"),document.getElementById("demoHtml").addEventListener("input",function(){clearTimeout(previewDebounce),previewDebounce=setTimeout(updatePreview,150)});var e=document.getElementById("btn-checkout-playground");e&&e.addEventListener("click",checkout),document.getElementById("btn-checkout").addEventListener("click",checkout);var t=document.getElementById("btn-checkout-hero");t&&t.addEventListener("click",checkout),document.getElementById("btn-close-recover").addEventListener("click",closeRecover),document.getElementById("recoverBtn").addEventListener("click",submitRecover),document.getElementById("recoverVerifyBtn").addEventListener("click",submitRecoverVerify),document.getElementById("copyRecoveredBtn").addEventListener("click",copyRecoveredKey),document.getElementById("recoverModal").addEventListener("click",function(e){e.target===this&&closeRecover()}),document.querySelectorAll(".open-recover").forEach(function(e){e.addEventListener("click",function(e){e.preventDefault(),openRecover()})}),document.querySelectorAll('a[href^="#"]').forEach(function(e){"demoDownload"!==e.id&&e.addEventListener("click",function(e){var t=this.getAttribute("href");if("#"!==t){e.preventDefault();var n=document.querySelector(t);n&&n.scrollIntoView({behavior:"smooth"})}})})});var emailChangeApiKey="",emailChangeNewEmail="";function showEmailChangeState(e){["emailChangeInitial","emailChangeLoading","emailChangeVerify","emailChangeResult"].forEach(function(e){var t=document.getElementById(e);t&&t.classList.remove("active")}),document.getElementById(e).classList.add("active")}function openEmailChange(){closeRecover(),document.getElementById("emailChangeModal").classList.add("active"),showEmailChangeState("emailChangeInitial");var e=document.getElementById("emailChangeError");e&&(e.style.display="none");var t=document.getElementById("emailChangeVerifyError");t&&(t.style.display="none"),document.getElementById("emailChangeApiKey").value="",document.getElementById("emailChangeNewEmail").value="",document.getElementById("emailChangeCode").value="",emailChangeApiKey="",emailChangeNewEmail=""}function closeEmailChange(){document.getElementById("emailChangeModal").classList.remove("active")}async function submitEmailChange(){var e=document.getElementById("emailChangeError"),t=document.getElementById("emailChangeBtn"),n=document.getElementById("emailChangeApiKey").value.trim(),a=document.getElementById("emailChangeNewEmail").value.trim();if(!n)return e.textContent="Please enter your API key.",void(e.style.display="block");if(!a||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a))return e.textContent="Please enter a valid email address.",void(e.style.display="block");e.style.display="none",t.disabled=!0,showEmailChangeState("emailChangeLoading");try{var o=await fetch("/v1/email-change",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({apiKey:n,newEmail:a})}),i=await o.json();if(!o.ok)return showEmailChangeState("emailChangeInitial"),e.textContent=i.error||"Something went wrong.",e.style.display="block",void(t.disabled=!1);emailChangeApiKey=n,emailChangeNewEmail=a,document.getElementById("emailChangeEmailDisplay").textContent=a,showEmailChangeState("emailChangeVerify"),document.getElementById("emailChangeCode").focus(),t.disabled=!1}catch(n){showEmailChangeState("emailChangeInitial"),e.textContent="Network error. Please try again.",e.style.display="block",t.disabled=!1}}async function submitEmailChangeVerify(){var e=document.getElementById("emailChangeVerifyError"),t=document.getElementById("emailChangeVerifyBtn"),n=document.getElementById("emailChangeCode").value.trim();if(!n||!/^\d{6}$/.test(n))return e.textContent="Please enter a 6-digit code.",void(e.style.display="block");e.style.display="none",t.disabled=!0;try{var a=await fetch("/v1/email-change/verify",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({apiKey:emailChangeApiKey,newEmail:emailChangeNewEmail,code:n})}),o=await a.json();if(!a.ok)return e.textContent=o.error||"Verification failed.",e.style.display="block",void(t.disabled=!1);document.getElementById("emailChangeNewDisplay").textContent=o.newEmail||emailChangeNewEmail,showEmailChangeState("emailChangeResult");var i=document.querySelector("#emailChangeResult h2");i&&(i.setAttribute("tabindex","-1"),i.focus())}catch(n){e.textContent="Network error. Please try again.",e.style.display="block",t.disabled=!1}}document.addEventListener("DOMContentLoaded",function(){var e=document.getElementById("btn-close-email-change");e&&e.addEventListener("click",closeEmailChange);var t=document.getElementById("emailChangeBtn");t&&t.addEventListener("click",submitEmailChange);var n=document.getElementById("emailChangeVerifyBtn");n&&n.addEventListener("click",submitEmailChangeVerify);var a=document.getElementById("emailChangeModal");a&&a.addEventListener("click",function(e){e.target===this&&closeEmailChange()}),document.querySelectorAll(".open-email-change").forEach(function(e){e.addEventListener("click",function(e){e.preventDefault(),openEmailChange()})})}),function(){function e(){for(var e=["recoverModal","emailChangeModal"],t=0;t