Redesign playground: template tabs, live preview, split pane, mobile responsive

- Add 3 pre-built templates (Invoice, Report, Custom HTML)
- Split-pane editor with live HTML preview (updates as you type)
- Generation timer shows actual response time
- Before/after comparison (free watermarked vs Pro clean)
- Pro CTA integrated into result panel
- Fully responsive: stacks on mobile
- Professional polish matching site design language

templates/pages/index.html

@@ -255,6 +255,63 @@ html, body {
 #emailChangeResult.active { display: block; }
 #emailChangeVerify.active { display: block; }
 
+/* Playground — redesigned */
+.playground { padding: 80px 0; }
+.pg-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
+.pg-tab { background: var(--card); border: 1px solid var(--border); color: var(--muted); padding: 10px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
+.pg-tab:hover { border-color: var(--muted); color: var(--fg); }
+.pg-tab.active { background: rgba(52,211,153,0.08); border-color: var(--accent); color: var(--accent); }
+.pg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); min-height: 380px; }
+.pg-editor-pane, .pg-preview-pane { display: flex; flex-direction: column; min-height: 0; }
+.pg-pane-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #1a1f2b; border-bottom: 1px solid var(--border); }
+.pg-pane-header-preview { justify-content: space-between; }
+.pg-pane-dots { display: flex; gap: 5px; }
+.pg-pane-dots span { width: 8px; height: 8px; border-radius: 50%; }
+.pg-pane-dots span:nth-child(1) { background: #f87171; }
+.pg-pane-dots span:nth-child(2) { background: #fbbf24; }
+.pg-pane-dots span:nth-child(3) { background: #34d399; }
+.pg-pane-label { font-size: 0.75rem; color: var(--muted); font-family: monospace; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
+.pg-preview-badge { font-size: 0.65rem; color: var(--accent); background: rgba(52,211,153,0.08); padding: 3px 8px; border-radius: 4px; font-weight: 500; }
+#demoHtml { flex: 1; width: 100%; padding: 16px; border: none; background: transparent; color: var(--fg); font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 0.82rem; line-height: 1.7; resize: none; outline: none; tab-size: 2; }
+.pg-preview-pane { border-left: 1px solid var(--border); }
+.pg-preview-frame-wrap { flex: 1; background: #fff; position: relative; overflow: hidden; }
+#demoPreview { width: 100%; height: 100%; border: none; background: #fff; }
+.pg-actions { display: flex; align-items: center; gap: 16px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
+.btn-lg { padding: 16px 36px; font-size: 1.05rem; border-radius: 12px; }
+.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
+.pg-btn-icon { font-size: 1.1rem; }
+.pg-status { color: var(--muted); font-size: 0.9rem; }
+.pg-result { display: none; margin-top: 24px; background: var(--card); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 28px; animation: pgSlideIn 0.3s ease; }
+.pg-result.visible { display: block; }
+@keyframes pgSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+.pg-result-inner { display: flex; align-items: center; gap: 16px; }
+.pg-result-icon { font-size: 2rem; }
+.pg-result-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
+.pg-result-comparison { display: flex; align-items: center; gap: 16px; justify-content: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
+.pg-compare-item { padding: 12px 20px; border-radius: 8px; text-align: center; flex: 1; max-width: 200px; }
+.pg-compare-free { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); }
+.pg-compare-pro { background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.2); }
+.pg-compare-label { font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
+.pg-compare-free .pg-compare-label { color: #f87171; }
+.pg-compare-pro .pg-compare-label { color: var(--accent); }
+.pg-compare-desc { color: var(--muted); font-size: 0.8rem; }
+.pg-compare-arrow { color: var(--muted); font-size: 1.2rem; font-weight: 700; }
+.pg-result-cta { text-align: center; margin-top: 20px; }
+.pg-generating .pg-btn-icon { display: inline-block; animation: spin 0.7s linear infinite; }
+@media (max-width: 768px) {
+  .pg-split { grid-template-columns: 1fr; min-height: auto; }
+  .pg-preview-pane { border-left: none; border-top: 1px solid var(--border); }
+  .pg-preview-frame-wrap { height: 250px; }
+  #demoHtml { min-height: 200px; }
+  .pg-result-comparison { flex-direction: column; gap: 8px; }
+  .pg-compare-arrow { transform: rotate(90deg); }
+  .pg-compare-item { max-width: 100%; }
+}
+@media (max-width: 375px) {
+  .pg-tabs { gap: 4px; }
+  .pg-tab { padding: 8px 12px; font-size: 0.75rem; }
+}
+
 /* Focus-visible for accessibility */
 .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 /* Skip to content */
@@ -381,20 +438,69 @@ html, body {
   </div>
 </section>
 
-<section class="playground" id="playground" style="padding:80px 0;">
+<section class="playground" id="playground">
   <div class="container">
-    <h2 class="section-title">Try it now</h2>
-    <p class="section-sub">Paste HTML, get a watermarked PDF. No signup required.</p>
-    <div style="max-width:660px;margin:0 auto;">
-      <textarea id="demoHtml" rows="6" placeholder="<h1>Hello World</h1><p>Paste your HTML here…</p>" style="width:100%;padding:16px;border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:var(--radius);font-family:'SF Mono','Fira Code',monospace;font-size:0.85rem;resize:vertical;margin-bottom:16px;"></textarea>
-      <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
-        <button class="btn btn-primary" id="demoGenerateBtn">Generate PDF →</button>
-        <span id="demoStatus" style="color:var(--muted);font-size:0.9rem;"></span>
+    <h2 class="section-title">Try it — right now</h2>
+    <p class="section-sub">Pick a template or write your own HTML. Generate a real PDF in seconds.</p>
+
+    <!-- Template Tabs -->
+    <div class="pg-tabs" role="tablist">
+      <button class="pg-tab active" data-template="invoice" role="tab" aria-selected="true">📄 Invoice</button>
+      <button class="pg-tab" data-template="report" role="tab" aria-selected="false">📊 Report</button>
+      <button class="pg-tab" data-template="custom" role="tab" aria-selected="false">✏️ Custom HTML</button>
+    </div>
+
+    <!-- Editor + Preview Split -->
+    <div class="pg-split">
+      <div class="pg-editor-pane">
+        <div class="pg-pane-header">
+          <div class="pg-pane-dots" aria-hidden="true"><span></span><span></span><span></span></div>
+          <span class="pg-pane-label">HTML</span>
+        </div>
+        <textarea id="demoHtml" spellcheck="false" aria-label="HTML input for PDF generation"></textarea>
       </div>
-      <div class="signup-error" id="demoError" style="margin-top:12px;"></div>
-      <div id="demoResult" style="display:none;margin-top:16px;padding:16px;background:var(--card);border:1px solid var(--accent);border-radius:var(--radius);">
-        <p style="margin:0;">✅ PDF generated! <a id="demoDownload" href="#" download="docfast-demo.pdf" style="font-weight:600;">Download PDF →</a></p>
-        <p style="margin:8px 0 0;color:var(--muted);font-size:0.85rem;">Demo PDFs include a watermark. Get a Pro key for clean output.</p>
+      <div class="pg-preview-pane">
+        <div class="pg-pane-header pg-pane-header-preview">
+          <span class="pg-pane-label">Live Preview</span>
+          <span class="pg-preview-badge">Updates as you type</span>
+        </div>
+        <div class="pg-preview-frame-wrap">
+          <iframe id="demoPreview" title="Live HTML preview" sandbox="allow-same-origin"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div class="pg-actions">
+      <button class="btn btn-primary btn-lg" id="demoGenerateBtn">
+        <span class="pg-btn-icon">⚡</span> Generate PDF
+      </button>
+      <span id="demoStatus" class="pg-status"></span>
+    </div>
+    <div class="signup-error" id="demoError" style="margin-top:12px;"></div>
+
+    <!-- Result -->
+    <div id="demoResult" class="pg-result">
+      <div class="pg-result-inner">
+        <div class="pg-result-icon">✅</div>
+        <div class="pg-result-content">
+          <p class="pg-result-title">PDF generated in <span id="demoTime">0.4</span>s</p>
+          <a id="demoDownload" href="#" download="docfast-demo.pdf" class="btn btn-primary btn-sm">Download PDF →</a>
+        </div>
+      </div>
+      <div class="pg-result-comparison">
+        <div class="pg-compare-item pg-compare-free">
+          <div class="pg-compare-label">🆓 Free Demo</div>
+          <div class="pg-compare-desc">Watermarked output</div>
+        </div>
+        <div class="pg-compare-arrow">→</div>
+        <div class="pg-compare-item pg-compare-pro">
+          <div class="pg-compare-label">⚡ Pro</div>
+          <div class="pg-compare-desc">Clean, production-ready</div>
+        </div>
+      </div>
+      <div class="pg-result-cta">
+        <button class="btn btn-secondary btn-sm" id="btn-checkout-playground">Get Pro — €9/mo → No watermarks</button>
       </div>
     </div>
   </div>