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
@@ -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>
|
||||
Reference in New Issue
Block a user