DocFast Bot
6891e488b6
BUG-007: Unwrap req.body.data for template endpoint (docs show wrapped format) BUG-008: Default PDF margins set to 0 (user can override via request body) BUG-006: Copy button shows Copied! for 2s then reverts
243 lines
12 KiB
HTML
243 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DocFast — HTML & Markdown to PDF API</title>
|
|
<meta name="description" content="Convert HTML and Markdown to beautiful PDFs with a simple API call. Built-in invoice templates. Fast, reliable, developer-friendly.">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root { --bg: #0a0a0a; --fg: #e8e8e8; --muted: #888; --accent: #4f9; --accent2: #3ad; --card: #141414; --border: #222; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; }
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
/* Hero */
|
|
.hero { padding: 100px 0 80px; text-align: center; }
|
|
.hero h1 { font-size: 3rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -1px; }
|
|
.hero h1 span { color: var(--accent); }
|
|
.hero p { font-size: 1.25rem; color: var(--muted); max-width: 600px; margin: 0 auto 40px; }
|
|
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
|
.btn { display: inline-block; padding: 14px 32px; border-radius: 8px; font-size: 1rem; font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; }
|
|
.btn-primary { background: var(--accent); color: #000; }
|
|
.btn-primary:hover { background: #6fb; text-decoration: none; }
|
|
.btn-secondary { border: 1px solid var(--border); color: var(--fg); background: transparent; }
|
|
.btn-secondary:hover { border-color: var(--muted); text-decoration: none; }
|
|
|
|
/* Code block */
|
|
.code-hero { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px 32px; margin: 48px auto 0; max-width: 640px; text-align: left; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9rem; overflow-x: auto; }
|
|
.code-hero .comment { color: #666; }
|
|
.code-hero .string { color: var(--accent); }
|
|
.code-hero .key { color: var(--accent2); }
|
|
|
|
/* Features */
|
|
.features { padding: 80px 0; }
|
|
.features h2 { text-align: center; font-size: 2rem; margin-bottom: 48px; }
|
|
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
|
|
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
|
|
.feature-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
|
|
.feature-card p { color: var(--muted); font-size: 0.95rem; }
|
|
.feature-icon { font-size: 1.5rem; margin-bottom: 12px; }
|
|
|
|
/* Pricing */
|
|
.pricing { padding: 80px 0; }
|
|
.pricing h2 { text-align: center; font-size: 2rem; margin-bottom: 12px; }
|
|
.pricing .subtitle { text-align: center; color: var(--muted); margin-bottom: 48px; }
|
|
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 700px; margin: 0 auto; }
|
|
.price-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; text-align: center; }
|
|
.price-card.featured { border-color: var(--accent); }
|
|
.price-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
|
|
.price-amount { font-size: 2.5rem; font-weight: 700; margin: 16px 0; }
|
|
.price-amount span { font-size: 1rem; color: var(--muted); font-weight: 400; }
|
|
.price-features { list-style: none; text-align: left; margin: 24px 0; }
|
|
.price-features li { padding: 6px 0; color: var(--muted); font-size: 0.95rem; }
|
|
.price-features li::before { content: "✓ "; color: var(--accent); }
|
|
|
|
/* Endpoints */
|
|
.endpoints { padding: 80px 0; }
|
|
.endpoints h2 { text-align: center; font-size: 2rem; margin-bottom: 48px; }
|
|
.endpoint { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px 32px; margin-bottom: 16px; }
|
|
.endpoint-method { display: inline-block; background: #1a3a20; color: var(--accent); font-family: monospace; font-size: 0.85rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; margin-right: 8px; }
|
|
.endpoint-path { font-family: monospace; font-size: 0.95rem; }
|
|
.endpoint-desc { color: var(--muted); font-size: 0.9rem; margin-top: 8px; }
|
|
|
|
/* Footer */
|
|
footer { padding: 40px 0; text-align: center; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border); }
|
|
|
|
/* Modal */
|
|
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
|
|
.modal-overlay.active { display: flex; }
|
|
.modal { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 40px; max-width: 440px; width: 90%; }
|
|
.modal h2 { margin-bottom: 8px; font-size: 1.5rem; }
|
|
.modal p { color: var(--muted); margin-bottom: 24px; font-size: 0.95rem; }
|
|
.modal input { width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 1rem; margin-bottom: 16px; outline: none; }
|
|
.modal input:focus { border-color: var(--accent); }
|
|
.modal .btn { width: 100%; text-align: center; }
|
|
.modal .error { color: #f66; font-size: 0.85rem; margin-bottom: 12px; display: none; }
|
|
.modal .close { position: absolute; top: 16px; right: 20px; color: var(--muted); font-size: 1.5rem; cursor: pointer; background: none; border: none; }
|
|
|
|
/* Key result */
|
|
.key-result { display: none; }
|
|
.key-result .key-box { background: var(--bg); border: 1px solid var(--accent); border-radius: 8px; padding: 16px; font-family: monospace; font-size: 0.85rem; word-break: break-all; margin: 16px 0; cursor: pointer; transition: background 0.2s; }
|
|
.key-result .key-box:hover { background: #111; }
|
|
.key-result .copy-hint { color: var(--muted); font-size: 0.8rem; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>HTML & Markdown to <span>PDF</span></h1>
|
|
<p>One API call. Beautiful PDFs. Built-in invoice templates. No headless browser setup, no dependencies, no hassle.</p>
|
|
<div class="hero-actions">
|
|
<button class="btn btn-primary" id="btn-signup">Get Free API Key</button>
|
|
<a href="/docs" class="btn btn-secondary">View Docs</a>
|
|
</div>
|
|
<div class="code-hero">
|
|
<span class="comment">// Convert markdown to PDF in one call</span><br>
|
|
<span class="key">curl</span> -X POST https://docfast.dev/v1/convert/markdown \<br>
|
|
-H <span class="string">"Authorization: Bearer YOUR_KEY"</span> \<br>
|
|
-H <span class="string">"Content-Type: application/json"</span> \<br>
|
|
-d <span class="string">'{"markdown": "# Invoice\\n\\nAmount: $500"}'</span> \<br>
|
|
-o invoice.pdf
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<div class="container">
|
|
<h2>Why DocFast?</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⚡</div>
|
|
<h3>Fast</h3>
|
|
<p>Sub-second PDF generation. Persistent browser pool means no cold starts.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3>Beautiful Output</h3>
|
|
<p>Full CSS support. Custom fonts, colors, layouts. Your PDFs, your brand.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📄</div>
|
|
<h3>Templates</h3>
|
|
<p>Built-in invoice and receipt templates. Pass data, get PDF. No HTML needed.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔧</div>
|
|
<h3>Simple API</h3>
|
|
<p>REST API with JSON in, PDF out. Works with any language. No SDKs required.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📐</div>
|
|
<h3>Flexible</h3>
|
|
<p>A4, Letter, custom sizes. Portrait or landscape. Configurable margins.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔒</div>
|
|
<h3>Secure</h3>
|
|
<p>Your data is never stored. PDFs are generated and streamed — nothing hits disk.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="endpoints" id="endpoints">
|
|
<div class="container">
|
|
<h2>API Endpoints</h2>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">POST</span>
|
|
<span class="endpoint-path">/v1/convert/html</span>
|
|
<div class="endpoint-desc">Convert raw HTML (with optional CSS) to PDF.</div>
|
|
</div>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">POST</span>
|
|
<span class="endpoint-path">/v1/convert/markdown</span>
|
|
<div class="endpoint-desc">Convert Markdown to styled PDF with syntax highlighting.</div>
|
|
</div>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">POST</span>
|
|
<span class="endpoint-path">/v1/convert/url</span>
|
|
<div class="endpoint-desc">Navigate to a URL and convert the page to PDF.</div>
|
|
</div>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">GET</span>
|
|
<span class="endpoint-path">/v1/templates</span>
|
|
<div class="endpoint-desc">List available document templates with field definitions.</div>
|
|
</div>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">POST</span>
|
|
<span class="endpoint-path">/v1/templates/:id/render</span>
|
|
<div class="endpoint-desc">Render a template (invoice, receipt) with your data to PDF.</div>
|
|
</div>
|
|
<div class="endpoint">
|
|
<span class="endpoint-method">GET</span>
|
|
<span class="endpoint-path">/health</span>
|
|
<div class="endpoint-desc">Health check — verify the API is running.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="pricing" id="pricing">
|
|
<div class="container">
|
|
<h2>Simple Pricing</h2>
|
|
<p class="subtitle">No per-page fees. No hidden limits. Pay for what you use.</p>
|
|
<div class="pricing-grid">
|
|
<div class="price-card">
|
|
<h3>Free</h3>
|
|
<div class="price-amount">$0<span>/mo</span></div>
|
|
<ul class="price-features">
|
|
<li>100 PDFs / month</li>
|
|
<li>All endpoints</li>
|
|
<li>All templates</li>
|
|
<li>Community support</li>
|
|
</ul>
|
|
<button class="btn btn-secondary" style="width:100%" id="btn-signup-2">Get Free Key</button>
|
|
</div>
|
|
<div class="price-card featured">
|
|
<h3>Pro</h3>
|
|
<div class="price-amount">$9<span>/mo</span></div>
|
|
<ul class="price-features">
|
|
<li>10,000 PDFs / month</li>
|
|
<li>All endpoints</li>
|
|
<li>All templates</li>
|
|
<li>Priority support</li>
|
|
<li>Custom templates</li>
|
|
</ul>
|
|
<button class="btn btn-primary" style="width:100%" id="btn-checkout">Get Started</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>DocFast © 2026 — Fast PDF generation for developers</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Signup Modal -->
|
|
<div class="modal-overlay" id="signupModal">
|
|
<div class="modal" style="position:relative">
|
|
<button class="close" id="btn-close-signup">×</button>
|
|
<div id="signupForm">
|
|
<h2>Get Your Free API Key</h2>
|
|
<p>Enter your email and get an API key instantly. No credit card required.</p>
|
|
<div class="error" id="signupError"></div>
|
|
<input type="email" id="signupEmail" placeholder="you@example.com" autofocus>
|
|
<button class="btn btn-primary" style="width:100%" id="signupBtn">Get API Key</button>
|
|
</div>
|
|
<div class="key-result" id="keyResult">
|
|
<h2>🚀 You're in!</h2>
|
|
<p>Here's your API key. <strong>Save it now</strong> — it won't be shown again.</p>
|
|
<div class="key-box" id="apiKeyDisplay" title="Click to copy"></div>
|
|
<div class="copy-hint">Click to copy</div>
|
|
<p style="margin-top:24px;color:var(--muted);font-size:0.9rem;">100 free PDFs/month • All endpoints • <a href="/docs">View docs →</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|