Export the final version in the original Word format; trustworthy exports

docs/launch/1-review.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<!-- Launch gallery image 1: reviewing changes. Render: see README.md. -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="launch.css">
+<style>
+  body { display: grid; grid-template-columns: 430px 1fr; gap: 48px; }
+  .left { display: flex; flex-direction: column; }
+  .left h1 { margin-top: 56px; }
+  .left .sub { margin-top: 20px; }
+  .steps { margin-top: auto; display: flex; flex-direction: column; gap: 12px; font-size: 17px; font-weight: 500; }
+  .steps div { display: flex; align-items: center; gap: 12px; }
+  .steps b { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; border: 1px solid var(--border); background: #fff; }
+  .steps .a b { color: var(--ins-ink); } .steps .r b { color: var(--del-ink); } .steps .e b { color: var(--primary); }
+
+  .win { height: 648px; display: flex; flex-direction: column; }
+  .progress { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 600; }
+  .progress .track { width: 120px; height: 6px; border-radius: 3px; background: hsl(0 0% 92%); overflow: hidden; }
+  .progress .track i { display: block; height: 100%; width: 60%; background: var(--ins-ink); }
+  .main { flex: 1; display: grid; grid-template-columns: 1fr 260px; min-height: 0; }
+  .doc { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; line-height: 1.55; border-right: 1px solid var(--border); }
+  .doc h3 { font-size: 15px; font-weight: 650; }
+  .para { padding: 10px 12px; border-left: 3px solid transparent; border-radius: 4px; position: relative; }
+  .para.active { border-left-color: var(--primary); background: hsl(212.8 100% 36% / .05); box-shadow: 0 0 0 1px hsl(212.8 100% 36% / .18); }
+  .para.done { border-left-color: var(--ins-ink); }
+  .para.rej { border-left-color: var(--faint); color: var(--muted); }
+  .actions { position: absolute; right: 10px; top: -16px; display: flex; gap: 6px; }
+  .actions span { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px -8px hsl(215 30% 20% / .35); }
+  .actions .ok { background: var(--ins-ink); border-color: var(--ins-ink); color: #fff; }
+  .actions .no { color: var(--del-ink); }
+  .tag { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px; margin-left: 8px; vertical-align: 2px; }
+  .tag.ok { background: var(--ins-bg); color: var(--ins-ink); }
+  .tag.no { background: hsl(0 0% 93%); color: var(--muted); }
+  .edit { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 3px; padding: 0 2px; }
+  .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--primary); vertical-align: -3px; margin-left: 1px; }
+  .list { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; background: hsl(0 0% 98.5%); font-size: 13px; line-height: 1.4; }
+  .list .hd { display: flex; justify-content: space-between; font-weight: 650; font-size: 13.5px; padding: 0 4px 4px; }
+  .list .hd span { color: var(--faint); font-weight: 500; }
+  .card { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
+  .card small, .card div { grid-column: 1; }
+  .card small { color: var(--faint); font-weight: 600; font-size: 11.5px; }
+  .card .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 700; font-size: 14px; }
+  .card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
+  .card.ok .st { color: var(--ins-ink); } .card.no .st { color: var(--faint); }
+  .card.no div { color: var(--faint); }
+</style>
+</head>
+<body>
+  <div class="left">
+    <div class="brand"><img src="../favicon.svg" alt="">Doc Diff<span class="url">docdiff.app</span></div>
+    <h1>Review every change like in Word.</h1>
+    <p class="sub">Go through the changes one by one: accept, reject or rewrite. The new version updates as you decide.</p>
+    <div class="steps">
+      <div class="a"><b>✓</b>Accept what is fine</div>
+      <div class="r"><b>✕</b>Reject and get the old wording back</div>
+      <div class="e"><b>✎</b>Edit the text right in place</div>
+    </div>
+  </div>
+  <div class="win">
+    <div class="bar">
+      <div class="dots"><i></i><i></i><i></i></div>
+      <span style="font-weight:600">Contract_v1.pdf → Contract_v2.docx</span>
+      <div class="progress"><span>12 of 20 reviewed</span><div class="track"><i></i></div></div>
+    </div>
+    <div class="main">
+      <div class="doc">
+        <h3>1. Scope of Services</h3>
+        <div class="para done">(1) Delivery<ins>, training</ins> and documentation as per the specification dated <ins>April 18, 2026</ins>.<span class="tag ok">Accepted</span></div>
+        <div class="para rej">(2) Change requests must be made in writing.<span class="tag no">Rejected · old wording kept</span></div>
+        <h3>2. Fees</h3>
+        <div class="para active">
+          <div class="actions"><span class="ok">✓ Accept</span><span class="no">✕ Reject</span><span>✎ Edit</span></div>
+          (1) Fixed price of <del>EUR 145,000.00</del> <ins>EUR 168,500.00</ins> net, payable within <del>14</del> <ins>30</ins> days of invoice.
+        </div>
+        <div class="para">(2) Travel expenses are reimbursed at cost <span class="edit">up to EUR 2,000 per quarter<span class="caret"></span></span>.</div>
+        <h3>4. Liability</h3>
+        <div class="para">(3) Liability for slight negligence is limited to <ins>twice</ins> the contract value.</div>
+      </div>
+      <div class="list">
+        <div class="hd">Changes <span>20</span></div>
+        <div class="card ok"><small>1. (1) · p. 1</small><div>…<ins>, training</ins> and documentation…</div><span class="st">✓</span></div>
+        <div class="card no"><small>1. (2) · p. 1</small><div>…made <s>by email</s></div><span class="st">✕</span></div>
+        <div class="card on"><small>2. (1) · p. 2</small><div>Fixed price of <del>EUR 145,000.00</del> <ins>EUR 168,500.00</ins></div></div>
+        <div class="card"><small>2. (2) · p. 2</small><div>…at cost <ins>up to EUR 2,000</ins>…</div></div>
+        <div class="card"><small>4. (3) · p. 3</small><div>…limited to <ins>twice</ins> the…</div></div>
+        <div class="card"><small>5. (1) · p. 3</small><div><del>Liability for consequential…</del></div></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

docs/launch/2-export.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<!-- Launch gallery image 2: exports. Render: see README.md. -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="launch.css">
+<style>
+  body { display: flex; flex-direction: column; }
+  .top { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-start; }
+  .top h1 { margin-top: 24px; max-width: 900px; font-size: 50px; }
+  .top .sub { margin-top: 16px; max-width: 760px; }
+  .cards { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
+  .card { display: flex; flex-direction: column; gap: 14px; }
+  .label { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 650; }
+  .fmt { font: 600 12.5px 'Geist Mono', monospace; padding: 3px 8px; border-radius: 6px; color: #fff; }
+  .fmt.docx { background: hsl(214 80% 42%); } .fmt.pdf { background: hsl(0 70% 46%); }
+  .label small { font-size: 14px; font-weight: 500; color: var(--faint); margin-left: auto; }
+  .page { background: #fff; border: 1px solid var(--border); border-radius: 10px; height: 300px; padding: 20px 22px; font-family: Georgia, 'Times New Roman', serif; font-size: 12.5px; line-height: 1.6; box-shadow: 0 24px 50px -26px hsl(215 30% 20% / .35); overflow: hidden; position: relative; }
+  .page h4 { font-family: Geist, sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
+  .page h5 { font-family: Geist, sans-serif; font-size: 12.5px; font-weight: 650; margin: 10px 0 4px; }
+  .page p + p { margin-top: 6px; }
+  .page ul { margin: 4px 0 0 18px; }
+  .page .lnk { color: var(--primary); text-decoration: underline; }
+  .page sup { font-size: 9px; }
+  .rl ins { background: none; box-shadow: none; color: hsl(214 80% 40%); text-decoration: underline; font-weight: inherit; padding: 0; }
+  .rl del { background: none; box-shadow: none; color: hsl(0 70% 42%); padding: 0; margin-right: 2px; }
+  .rl .bar { position: absolute; left: 8px; width: 2px; background: hsl(0 0% 40%); border: 0; padding: 0; }
+  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-family: Geist, sans-serif; font-size: 11px; line-height: 1.5; }
+  .split > div { display: flex; flex-direction: column; gap: 8px; }
+  .split .colh { font-weight: 650; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
+  .split del, .split ins { padding: 0 2px; }
+  .note { font-size: 15px; color: var(--muted); line-height: 1.4; }
+  .note b { color: var(--fg); font-weight: 600; }
+</style>
+</head>
+<body>
+  <div class="top">
+    <div>
+      <div class="brand"><img src="../favicon.svg" alt="">Doc Diff<span class="url">docdiff.app</span></div>
+      <h1>Export the final version in your original Word format.</h1>
+      <p class="sub">Your decisions go straight into your own .docx: styles, numbering, links and footnotes stay as they are.</p>
+    </div>
+  </div>
+  <div class="cards">
+    <div class="card">
+      <div class="label"><span class="fmt docx">DOCX</span>Final version<small>clean</small></div>
+      <div class="page">
+        <h4>Framework Agreement</h4>
+        <h5>1. Scope of Services</h5>
+        <p>(1) Delivery, training and documentation as per the <span class="lnk">specification</span> dated April 18, 2026.<sup>1</sup></p>
+        <ul><li>Module A: quantity take-off</li><li>Module B: cost estimate</li></ul>
+        <h5>2. Fees</h5>
+        <p>(1) Fixed price of EUR 168,500.00 net, payable within 30 days of invoice.</p>
+        <p>(2) Travel expenses are reimbursed at cost up to EUR 2,000 per quarter.</p>
+      </div>
+      <p class="note"><b>Ready to send.</b> Accepted, rejected and edited changes, nothing else.</p>
+    </div>
+    <div class="card">
+      <div class="label"><span class="fmt docx">DOCX</span>Tracked changes<small>redline</small></div>
+      <div class="page rl">
+        <h4>Framework Agreement</h4>
+        <h5>1. Scope of Services</h5>
+        <p>(1) Delivery<ins>, training</ins> and documentation as per the <span class="lnk">specification</span> dated <del>March 12</del><ins>April 18</ins>, 2026.<sup>1</sup></p>
+        <ul><li>Module A: quantity take-off</li><li>Module B: cost estimate</li></ul>
+        <h5>2. Fees</h5>
+        <p>(1) Fixed price of <del>EUR 145,000.00</del><ins>EUR 168,500.00</ins> net, payable within <del>14</del><ins>30</ins> days of invoice.</p>
+        <p>(2) Travel expenses are reimbursed at cost<ins> up to EUR 2,000 per quarter</ins>.</p>
+      </div>
+      <p class="note"><b>Open in Word</b> and accept or reject what is still open.</p>
+    </div>
+    <div class="card">
+      <div class="label"><span class="fmt pdf">PDF</span>Comparison<small>side by side or inline</small></div>
+      <div class="page">
+        <div class="split">
+          <div>
+            <div class="colh">Old · Contract_v1.pdf</div>
+            <div><b>1. (1)</b> Delivery and documentation as per the specification dated <del>March 12, 2026</del>.</div>
+            <div><b>2. (1)</b> Fixed price of <del>EUR 145,000.00</del> net, payable within <del>14</del> days.</div>
+            <div><b>4. (3)</b> <del>Liability for consequential damages is excluded.</del></div>
+          </div>
+          <div>
+            <div class="colh">New · Contract_v2.docx</div>
+            <div><b>1. (1)</b> Delivery<ins>, training</ins> and documentation as per the specification dated <ins>April 18, 2026</ins>.</div>
+            <div><b>2. (1)</b> Fixed price of <ins>EUR 168,500.00</ins> net, payable within <ins>30</ins> days.</div>
+            <div><b>2. (4)</b> <ins>Adjusted to the CPI from month 13 on.</ins></div>
+          </div>
+        </div>
+      </div>
+      <p class="note"><b>For the record.</b> Every change marked, with page and clause numbers.</p>
+    </div>
+  </div>
+</body>
+</html>

docs/launch/3-private.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!-- Launch gallery image 3: privacy and formats. Render: see README.md. -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="launch.css">
+<style>
+  body { display: grid; grid-template-columns: 1fr 520px; gap: 56px; }
+  .left { display: flex; flex-direction: column; }
+  .left h1 { margin-top: 56px; font-size: 58px; }
+  .left .sub { margin-top: 20px; max-width: 30em; }
+  .facts { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .fact { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
+  .fact b { display: block; font-size: 17px; font-weight: 650; margin-bottom: 3px; }
+  .fact span { font-size: 14.5px; color: var(--muted); line-height: 1.4; }
+
+  .right { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
+  .win .bar { gap: 12px; }
+  .addr { flex: 1; display: flex; align-items: center; gap: 8px; font: 500 14px 'Geist Mono', monospace; padding: 6px 12px; border-radius: 8px; background: hsl(0 0% 96%); color: var(--muted); }
+  .addr svg { flex: none; }
+  .net { padding: 16px 18px 18px; font-size: 14px; }
+  .net .hd { display: flex; justify-content: space-between; font-weight: 650; margin-bottom: 10px; }
+  .net .hd span { color: var(--faint); font-weight: 500; font-family: 'Geist Mono', monospace; font-size: 13px; }
+  .row { display: grid; grid-template-columns: 1fr auto; padding: 9px 0; border-top: 1px solid hsl(0 0% 93%); font-family: 'Geist Mono', monospace; font-size: 13px; }
+  .row b { font-family: Geist, sans-serif; font-weight: 600; color: var(--ins-ink); font-size: 14px; }
+  .big { display: flex; align-items: baseline; gap: 12px; padding: 14px 0 4px; }
+  .big strong { font-size: 64px; font-weight: 720; letter-spacing: -0.04em; color: var(--ins-ink); line-height: 1; }
+  .big span { font-size: 16px; color: var(--muted); }
+  .formats { display: flex; gap: 10px; }
+  .formats span { flex: 1; text-align: center; font: 600 15px 'Geist Mono', monospace; padding: 14px 0; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
+  .formats span:nth-child(1) { color: hsl(0 70% 42%); } .formats span:nth-child(2) { color: hsl(214 80% 40%); }
+  .cap { font-size: 14px; color: var(--faint); text-align: center; margin-top: -10px; }
+</style>
+</head>
+<body>
+  <div class="left">
+    <div class="brand"><img src="../favicon.svg" alt="">Doc Diff<span class="url">docdiff.app</span></div>
+    <h1>Your contracts never leave your browser.</h1>
+    <p class="sub">Doc Diff reads and compares everything on your device. No upload, no account, no tracking. Safe for confidential documents.</p>
+    <div class="facts">
+      <div class="fact"><b>Works offline</b><span>One HTML file: download it and use it without internet.</span></div>
+      <div class="fact"><b>Open source</b><span>MIT licensed. Read every line of the code yourself.</span></div>
+      <div class="fact"><b>Free</b><span>No sign-up, no limits, no paywall.</span></div>
+      <div class="fact"><b>Save your review</b><span>Continue later from a .docdiff file on your disk.</span></div>
+    </div>
+  </div>
+  <div class="right">
+    <div class="win">
+      <div class="bar">
+        <div class="dots"><i></i><i></i><i></i></div>
+        <div class="addr"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>docdiff.app</div>
+      </div>
+      <div class="net">
+        <div class="hd">Network while comparing <span>Contract_v1.pdf ↔ v2.docx</span></div>
+        <div class="big"><strong>0</strong><span>bytes of your documents sent anywhere</span></div>
+        <div class="row">File upload<b>none</b></div>
+        <div class="row">Analytics &amp; cookies<b>none</b></div>
+        <div class="row">Third-party requests<b>blocked by policy</b></div>
+      </div>
+    </div>
+    <div class="formats"><span>PDF</span><span>DOCX</span><span>TXT</span><span>MD</span><span>HTML</span></div>
+    <p class="cap">Compare any two of them, even a PDF against a Word file.</p>
+  </div>
+</body>
+</html>

docs/launch/README.md

@@ -0,0 +1,17 @@
+# Launch gallery images
+
+Gallery images for product launch listings (1270x760, rendered at 2x = 2540x1520).
+
+| Image | Source | Message |
+|---|---|---|
+| `1-review.png` | `1-review.html` | Review every change: accept, reject, edit |
+| `2-export.png` | `2-export.html` | Export in the original Word format, tracked changes, PDF |
+| `3-private.png` | `3-private.html` | Runs locally: no upload, offline, open source |
+
+Render (macOS, from this folder):
+
+```bash
+for f in 1-review 2-export 3-private; do "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --hide-scrollbars --allow-file-access-from-files --force-device-scale-factor=2 --window-size=1270,760 --screenshot="$PWD/$f.png" "file://$PWD/$f.html"; done
+```
+
+The link preview images are `../og-image.html` and `../og-image-en.html`.