Add the run-of-show and one-pager templates the README describes

templates/README.md specified three docs; only demo-script-1pager.template.html
existed, so two of the three were rebuilt from the prose every engagement. Both
now ship, matching the section order the README already documented, with
brand.css inlined and no external deps beyond Google Fonts.

The markup comments say what belongs in each slot rather than naming it: status
pills come from the verification log, so "tested" means Test heroes actually
exercised it; the pre-loaded data table marks the records that must stay
untouched, because a live click is consumed the first time it is used.

Two rules from the first engagement to use them:

No rate card means deleting the investment grid and keeping the note that
explains its absence. Filling those cards to avoid a gap contradicts Phase C's
"every number traces to something", and an invented figure becomes the figure
you are held to.

The docs carry spoken lines, so write them in the language the demo is held in.
An English Say column for a Dutch demo gets translated live in the room, which
is exactly where the wording stops matching the client's own quoted words.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
glenn
2026-07-31 14:43:27 +02:00
co-authored by Claude Opus 5
parent 6b48fdf126
commit d913cdf09a
3 changed files with 334 additions and 2 deletions
+19 -2
View File
@@ -5,7 +5,7 @@ into each (one `<style>` block, no external deps except Google Fonts). Replace t
footer brand with the SELLING company. Fill `{{placeholders}}` from the engagement.
## 1. `run-of-show` (internal — the presenter drives from this)
Sections, in order:
See `run-of-show.template.html`. Sections, in order:
- **Hero band**: client × your-company, date/time, audience, environment.
- **The one-line story** (lead): mirror the client's pain back as one sentence.
- **Status grid** (4 cards): what's built + tested (module live, fleet %, currency/data counts, staged quote).
@@ -15,13 +15,20 @@ Sections, in order:
- **Risks & tips** + a **close script** (dark card).
## 2. `one-pager` (external — leave-behind for the decision-maker)
See `one-pager.template.html`.
- Hero band branded for YOUR company; audience = the economic buyer.
- **Today vs. with Odoo** before/after table.
- **What gets automated** (4 bullets, each tied to a pain).
- **Investment & timeline** grid (price, all-phases, duration, payment terms) — use the SOW's agreed figures/currency.
- **What is not in it** — the out-of-scope list. This is what makes the rest credible.
- **Path to go-live** step grid (demo = HERE).
- **Investment & timeline** grid (price, all-phases, duration, payment terms) — use the SOW's agreed figures/currency.
- A dark "why Enterprise / why custom" card.
**No rate card → delete the investment grid**, keep the note explaining why it is absent
and what will follow. A number invented to fill a card is the number you get held to, and
it contradicts *Phase C*'s "every number traces to something". Same rule for a client who
ducked the budget question: say the scope conversation comes first.
## 3. `demo-script-1pager` (internal — the one-page follow-along)
Compact, prints on one A4. A login strip, then a numbered table: `# | Do (click path) | Say`.
~7 steps: frame → clean order → ⭐hero block → ⭐override → fleet load → invoice → close.
@@ -30,4 +37,14 @@ Hero rows highlighted. Footer ref strip with the staged data. See
## Placeholders used
`{{CLIENT}}` `{{SELLER}}` `{{DATE_TIME}}` `{{AUDIENCE}}` `{{ODOO_URL}}` `{{ADMIN_LOGIN}}`
`{{ODOO_VERSION}}` `{{LANG}}` `{{LOCALE}}` `{{CURRENCY}}`
`{{PRICE}}` `{{ALL_PHASES}}` `{{DURATION}}` `{{PAYMENT_TERMS}}` and per-row step content.
Leave no `{{...}}` in a delivered file — grep for `{{` before handing anything over.
Sections that do not apply get **deleted**, not filled with filler.
## Write them in the client's language
The docs carry spoken lines. A run-of-show whose *Say* column is in English, for a demo
held in Dutch, gets translated on the fly in the room — which is where the wording stops
matching the client's own quoted words. Write the *Say* lines, the before/after table and
the close script in the language the demo is held in; `{{LANG}}` on `<html>` should match.
+138
View File
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="{{LANG}}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{SELLER}} × {{CLIENT}} — {{HEADLINE_SHORT}}</title>
<style>
/* >>> inline templates/brand.css here <<< plus the small extras below */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--blue:#005EFF;--blue-dark:#0046bd;--blue-light:rgba(0,94,255,0.08);--cyan:#00C6FF;
--navy:#191F2E;--txt:#191F2E;--dim:#414651;--faint:#6b7280;--bg:#F5F7FA;
--hero:radial-gradient(circle at 50% 0%,#E3F2FD 0%,#F8FAFC 70%);--surface:#fff;--line:#e5e9f0;
--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--sh-sm:0 2px 4px rgba(0,0,0,.02);
--sh-md:0 12px 24px -6px rgba(0,0,0,.05);--r:16px;--r-sm:10px;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:36px 28px 60px}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
h1{font-size:32px;margin:0 0 6px;font-weight:700}
h2{font-size:20px;margin:34px 0 12px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:8px}
h3{font-size:15px;margin:18px 0 6px;font-weight:600;color:var(--blue)}
.sub{color:var(--dim);margin:0 0 4px;font-size:15px}.src{color:var(--faint);font-size:12px;margin:0 0 22px}
a{color:var(--blue);text-decoration:none}
.gradient-text{background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;background:var(--blue-light);padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:14px}
.lead{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);padding:14px 18px;border-radius:var(--r-sm);margin:16px 0;box-shadow:var(--sh-sm)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm)}
.card .n{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;color:var(--navy)}.card .n.blue{color:var(--blue)}.card .l{color:var(--dim);font-size:13px;margin-top:3px}
.card-dark{background:var(--navy);color:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh-md);margin:18px 0}.card-dark h3{color:#fff}.card-dark p{color:#cbd5e1;margin:6px 0 0}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:#fafbfc}tr:last-child td{border-bottom:none}
.pill{display:inline-block;padding:2px 10px;border-radius:100px;font-size:11.5px;font-weight:600}.pill.live{background:#dcfce7;color:#15803d}
.box{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r-sm);padding:12px 16px;margin:10px 0;box-shadow:var(--sh-sm)}.box.warn{border-left-color:var(--warn)}.box.info{border-left-color:var(--blue)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative;box-shadow:var(--sh-sm)}.step.here{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.step .num{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--faint);font-weight:700;text-transform:uppercase}.step .ttl{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--navy);margin:4px 0 6px}.step .d{font-size:12.5px;color:var(--dim)}
.step.here .badge{position:absolute;top:-10px;right:10px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:100px}
code{background:var(--blue-light);border:1px solid #d6e4ff;border-radius:5px;padding:1px 6px;font:12.5px ui-monospace,Consolas,monospace;color:var(--blue-dark)}
footer{margin-top:40px;color:var(--faint);font-size:12px;border-top:1px solid var(--line);padding-top:16px}
.hero{background:var(--hero);padding:44px 28px 32px}.hero .wrap{padding:0;max-width:1000px;margin:0 auto}
/* one-pager extras */
.tbl-wrap{overflow-x:auto}
td.was{color:var(--dim)}td.now b{color:var(--navy)}
@media(max-width:760px){.grid,.steps{grid-template-columns:1fr 1fr}h1{font-size:25px}}
@media print{body{background:#fff}.wrap{padding:0}@page{size:A4;margin:12mm}}
</style>
</head>
<body>
<!-- EXTERNAL leave-behind. Branded for the SELLING company, addressed to the economic
buyer. Everything here must be something the demo actually showed. -->
<div class="hero">
<div class="wrap">
<span class="label">{{SELLER}}</span>
<h1>{{HEADLINE_A}} <span class="gradient-text">{{HEADLINE_B}}</span></h1>
<p class="sub">{{SUBHEAD}}</p>
<p class="src">{{PROVENANCE}}<!-- e.g. "Prepared after the meeting of <date>, for <buyer names>" --></p>
</div>
</div>
<div class="wrap">
<div class="lead">
{{OPENING_MIRROR}}<!-- Their ask, in their words, answered. One short paragraph. -->
</div>
<h2>{{BEFORE_AFTER_TITLE}}</h2>
<div class="tbl-wrap">
<table>
<thead><tr><th style="width:34%">What happens today</th><th>What happens instead</th></tr></thead>
<tbody>
<!-- One row per pain, worst first. Left column is THEIR description, not yours.
Right column names the concrete mechanism, not a benefit adjective. -->
<tr><td class="was">{{WAS1}}</td><td class="now"><b>{{NOW1_LEAD}}</b> {{NOW1}}</td></tr>
<tr><td class="was">{{WAS2}}</td><td class="now"><b>{{NOW2_LEAD}}</b> {{NOW2}}</td></tr>
<tr><td class="was">{{WAS3}}</td><td class="now"><b>{{NOW3_LEAD}}</b> {{NOW3}}</td></tr>
<tr><td class="was">{{WAS4}}</td><td class="now"><b>{{NOW4_LEAD}}</b> {{NOW4}}</td></tr>
</tbody>
</table>
</div>
<h2>What is already running in your environment</h2>
<!-- Real figures from the built demo. If a number is not in the verification log,
it does not go on this page. -->
<div class="grid">
<div class="card"><div class="n blue">{{PROOF1_N}}</div><div class="l">{{PROOF1_L}}</div></div>
<div class="card"><div class="n">{{PROOF2_N}}</div><div class="l">{{PROOF2_L}}</div></div>
<div class="card"><div class="n">{{PROOF3_N}}</div><div class="l">{{PROOF3_L}}</div></div>
<div class="card"><div class="n">{{PROOF4_N}}</div><div class="l">{{PROOF4_L}}</div></div>
</div>
<div class="box">{{AUTOMATED_1}}</div>
<div class="box info">{{AUTOMATED_2}}</div>
<h2>What is not in it</h2>
<!-- The out-of-scope list, stated plainly. This is what makes the rest credible —
and it is cheaper to say here than to be caught on later. -->
<div class="box warn">
{{OUT_OF_SCOPE_INTRO}}
{{OUT_OF_SCOPE_LIST}}
</div>
<h2>Path to go-live</h2>
<div class="steps">
<div class="step here"><div class="badge">you are here</div><div class="num">Step 1</div><div class="ttl">{{STEP1_T}}</div><div class="d">{{STEP1_D}}</div></div>
<div class="step"><div class="num">Step 2</div><div class="ttl">{{STEP2_T}}</div><div class="d">{{STEP2_D}}</div></div>
<div class="step"><div class="num">Step 3</div><div class="ttl">{{STEP3_T}}</div><div class="d">{{STEP3_D}}</div></div>
<div class="step"><div class="num">Step 4</div><div class="ttl">{{STEP4_T}}</div><div class="d">{{STEP4_D}}</div></div>
</div>
<!-- INVESTMENT. Only fill this in from an agreed rate card. With no rate card and no
budget conversation, DELETE the grid and keep the note — a number you invented
here becomes the number you are held to. -->
<h2>Investment and timing</h2>
<div class="grid">
<div class="card"><div class="n blue">{{PRICE}}</div><div class="l">Phase 1</div></div>
<div class="card"><div class="n">{{ALL_PHASES}}</div><div class="l">All phases</div></div>
<div class="card"><div class="n">{{DURATION}}</div><div class="l">Duration</div></div>
<div class="card"><div class="n">{{PAYMENT_TERMS}}</div><div class="l">Payment terms</div></div>
</div>
<div class="box info">{{INVESTMENT_NOTE}}</div>
<div class="card-dark">
<h3>{{WHY_TITLE}}</h3>
<p>{{WHY_P1}}</p>
<p>{{WHY_P2}}</p>
</div>
<footer>
{{SELLER}} · <a href="{{SELLER_URL}}">{{SELLER_URL_LABEL}}</a> — for {{CLIENT}}, {{CLIENT_CITY}}<br>
Demo environment: <code>{{ODOO_HOST}}</code> · Odoo {{ODOO_VERSION}}{{STACK_SUFFIX}}
</footer>
</div>
</body>
</html>
+177
View File
@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="{{LANG}}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{CLIENT}} — Run of Show</title>
<style>
/* >>> inline templates/brand.css here <<< plus the small extras below */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--blue:#005EFF;--blue-dark:#0046bd;--blue-light:rgba(0,94,255,0.08);--cyan:#00C6FF;
--navy:#191F2E;--txt:#191F2E;--dim:#414651;--faint:#6b7280;--bg:#F5F7FA;
--hero:radial-gradient(circle at 50% 0%,#E3F2FD 0%,#F8FAFC 70%);--surface:#fff;--line:#e5e9f0;
--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--sh-sm:0 2px 4px rgba(0,0,0,.02);
--sh-md:0 12px 24px -6px rgba(0,0,0,.05);--r:16px;--r-sm:10px;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:36px 28px 60px}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
h1{font-size:32px;margin:0 0 6px;font-weight:700}
h2{font-size:20px;margin:34px 0 12px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:8px}
h3{font-size:15px;margin:18px 0 6px;font-weight:600;color:var(--blue)}
.sub{color:var(--dim);margin:0 0 4px;font-size:15px}.src{color:var(--faint);font-size:12px;margin:0 0 22px}
a{color:var(--blue);text-decoration:none}
.gradient-text{background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;background:var(--blue-light);padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:14px}
.lead{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);padding:14px 18px;border-radius:var(--r-sm);margin:16px 0;box-shadow:var(--sh-sm)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm)}
.card .n{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;color:var(--navy)}.card .n.blue{color:var(--blue)}.card .l{color:var(--dim);font-size:13px;margin-top:3px}
.card-dark{background:var(--navy);color:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh-md);margin:18px 0}.card-dark h3{color:#fff}.card-dark p{color:#cbd5e1;margin:6px 0 0}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:#fafbfc}tr:last-child td{border-bottom:none}
.pill{display:inline-block;padding:2px 10px;border-radius:100px;font-size:11.5px;font-weight:600}.pill.live{background:#dcfce7;color:#15803d}.pill.bad{background:#fee2e2;color:#b91c1c}
.box{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r-sm);padding:12px 16px;margin:10px 0;box-shadow:var(--sh-sm)}.box.warn{border-left-color:var(--warn)}.box.info{border-left-color:var(--blue)}
code{background:var(--blue-light);border:1px solid #d6e4ff;border-radius:5px;padding:1px 6px;font:12.5px ui-monospace,Consolas,monospace;color:var(--blue-dark)}
footer{margin-top:40px;color:var(--faint);font-size:12px;border-top:1px solid var(--line);padding-top:16px}
.hero{background:var(--hero);padding:44px 28px 32px}.hero .wrap{padding:0;max-width:1000px;margin:0 auto}
/* run-of-show extras */
td.beat{width:44%}td.beat b{color:var(--navy)}td.say{color:var(--dim);font-style:italic}
tr.star td{background:#fffdf6}
.tbl-wrap{overflow-x:auto}
@media(max-width:760px){.grid{grid-template-columns:1fr 1fr}h1{font-size:25px}}
@media print{body{background:#fff}.wrap{padding:0}@page{size:A4;margin:12mm}}
</style>
</head>
<body>
<div class="hero">
<div class="wrap">
<span class="label">Run of show · internal</span>
<h1>{{CLIENT}} <span class="gradient-text">× {{SELLER}}</span></h1>
<p class="sub">{{ENVIRONMENT_LINE}}</p>
<p class="src">{{DATE_TIME}} · {{AUDIENCE}}<!-- name each attendee AND flag who actually decides --></p>
</div>
</div>
<div class="wrap">
<!-- THE ONE-LINE STORY. Mirror their own words back. If a decision-maker gave you a
sentence describing what would convince them, use THAT sentence verbatim. -->
<div class="lead">
<b>{{STORY_LEAD_LABEL}}</b><br>
<i>"{{CLIENT_QUOTE}}"</i><br>
{{STORY_LINE}}
</div>
<!-- Any framing that changes HOW you present: a failed previous project, a sceptic in
the room, a hard constraint. Delete if there is none — do not invent one. -->
<div class="box warn">
<b>{{FRAMING_TITLE}}</b> {{FRAMING_NOTE}}
</div>
<h2>What is standing by</h2>
<div class="grid">
<div class="card"><div class="n blue">{{STAT1_N}}</div><div class="l">{{STAT1_L}}</div></div>
<div class="card"><div class="n">{{STAT2_N}}</div><div class="l">{{STAT2_L}}</div></div>
<div class="card"><div class="n">{{STAT3_N}}</div><div class="l">{{STAT3_L}}</div></div>
<div class="card"><div class="n">{{STAT4_N}}</div><div class="l">{{STAT4_L}}</div></div>
</div>
<h2>Pain → beat</h2>
<div class="tbl-wrap">
<table>
<thead><tr><th>What they said</th><th>The beat that kills it</th><th>Status</th></tr></thead>
<tbody>
<!-- One row per pain from the brief, in THEIR words. Status must come from the
verification log: "tested" only for what Test heroes actually exercised. -->
<tr><td><i>"{{PAIN1_QUOTE}}"</i> — {{PAIN1_WHO}}</td><td>{{PAIN1_BEAT}}</td><td><span class="pill live">{{PAIN1_STATUS}}</span></td></tr>
<tr><td><i>"{{PAIN2_QUOTE}}"</i> — {{PAIN2_WHO}}</td><td>{{PAIN2_BEAT}}</td><td><span class="pill live">{{PAIN2_STATUS}}</span></td></tr>
<tr><td><i>"{{PAIN3_QUOTE}}"</i> — {{PAIN3_WHO}}</td><td>{{PAIN3_BEAT}}</td><td><span class="pill live">{{PAIN3_STATUS}}</span></td></tr>
</tbody>
</table>
</div>
<h2>Run of show — ± {{TOTAL_MINUTES}} min</h2>
<div class="tbl-wrap">
<table>
<thead><tr><th style="width:7%">Time</th><th>Do (exact click path)</th><th>Say</th></tr></thead>
<tbody>
<tr>
<td>{{T1}}</td>
<td class="beat"><b>Frame it.</b> {{FRAME_CLICKS}}</td>
<td class="say">"{{FRAME_LINE}}"</td>
</tr>
<!-- Hero beats get class="star". Name the record, the tab and the button — a
click path you cannot follow while talking is not a click path. -->
<tr class="star">
<td>{{T2}}</td>
<td class="beat"><b>⭐ {{HERO1}}.</b> {{HERO1_CLICKS}}</td>
<td class="say">"{{HERO1_LINE}}"</td>
</tr>
<tr class="star">
<td>{{T3}}</td>
<td class="beat"><b>⭐ {{HERO1_PAYOFF}}.</b> {{HERO1_PAYOFF_CLICKS}}</td>
<td class="say">"{{HERO1_PAYOFF_LINE}}"</td>
</tr>
<tr>
<td>{{T4}}</td>
<td class="beat"><b>{{BRIDGE}}.</b> {{BRIDGE_CLICKS}}</td>
<td class="say">"{{BRIDGE_LINE}}"</td>
</tr>
<tr class="star">
<td>{{T5}}</td>
<td class="beat"><b>⭐ {{HERO2}}.</b> {{HERO2_CLICKS}}</td>
<td class="say">"{{HERO2_LINE}}"</td>
</tr>
<tr>
<td>{{T6}}</td>
<td class="beat"><b>{{PROOF}}.</b> {{PROOF_CLICKS}}</td>
<td class="say">"{{PROOF_LINE}}"</td>
</tr>
<tr>
<td>{{T7}}</td>
<td class="beat"><b>Close.</b> Hand over the one-pager. {{CLOSE_CLICKS}}</td>
<td class="say">"{{CLOSE_LINE}}"</td>
</tr>
</tbody>
</table>
</div>
<h2>Pre-loaded data</h2>
<div class="tbl-wrap">
<table>
<thead><tr><th>Record</th><th>Value</th><th>Why it is there</th></tr></thead>
<tbody>
<!-- Every record a beat touches, with the real staged figure. Mark the ones that
must stay untouched — those are the live clicks, and they are consumed once. -->
<tr><td><code>{{REC1}}</code></td><td>{{REC1_VAL}}</td><td><b>Untouched.</b> {{REC1_WHY}}</td></tr>
<tr><td><code>{{REC2}}</code></td><td>{{REC2_VAL}}</td><td>{{REC2_WHY}}</td></tr>
<tr><td><code>{{REC3}}</code></td><td>{{REC3_VAL}}</td><td>{{REC3_WHY}}</td></tr>
</tbody>
</table>
</div>
<h2>Risks and tips</h2>
<!-- Anything that will look like a bug on screen, anything order-dependent, and the
out-of-scope list. Each one should have cost you something to learn. -->
<div class="box warn"><b>{{RISK1_TITLE}}</b> {{RISK1}}</div>
<div class="box info"><b>{{RISK2_TITLE}}</b> {{RISK2}}</div>
<div class="box"><b>Do not touch:</b> {{OUT_OF_SCOPE}}</div>
<div class="card-dark">
<h3>Close script</h3>
<p>{{CLOSE_P1}}</p>
<p>{{CLOSE_P2}}</p>
<p>{{CLOSE_QUESTION}}</p>
</div>
<footer>
Environment: <code>{{ODOO_URL}}</code> · <code>{{ADMIN_LOGIN}}</code> · Odoo {{ODOO_VERSION}} · {{LOCALE}} · {{CURRENCY}}<br>
{{SELLER}} × {{CLIENT}} — internal document, not to be handed to the client.
</footer>
</div>
</body>
</html>