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