glennandClaude Opus 5
2fd559f1cc
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DywdYrFTrWa4h1T3ZykPBX
189 lines
10 KiB
HTML
189 lines
10 KiB
HTML
<!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>
|
||
/* Reusable brand theme for callista-odoo-demo docs — Callista house style.
|
||
Gold #D1AA7A on warm cream #F8F2EB / #F2E7D9, black ink, Lato. Taken from
|
||
www.callista.be (Odoo theme: o-color-1 #D1AA7A, o-color-2 #CA9E67, link #976B34,
|
||
body font Lato, --border-radius .4rem). Inline this into each single-file HTML doc.
|
||
The Lato @import below is the one external reference a doc may carry; it swaps in
|
||
and the stack below falls back offline. Swap the brand footer per the SELLING
|
||
company — and if that company is not Callista, swap this palette with it. */
|
||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');
|
||
:root{--gold:#D1AA7A;--gold-2:#CA9E67;--gold-ink:#976B34;--gold-tint:rgba(209,170,122,.16);
|
||
--ink:#000;--txt:#000;--dim:#4a4540;--faint:#8a8279;--bg:#F8F2EB;--band:#F2E7D9;
|
||
--hero:linear-gradient(180deg,#F2E7D9 0%,#EFE1CF 100%);--surface:#fff;--line:#E8DFD3;
|
||
--ok:#2E7D32;--warn:#B45309;--bad:#C0392B;--sh-sm:0 1px 2px rgba(70,50,25,.05);
|
||
--sh-md:0 12px 24px -8px rgba(70,50,25,.14);--r:1rem;--r-sm:.4rem;}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.6 Lato,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||
.wrap{max-width:1000px;margin:0 auto;padding:36px 28px 60px}
|
||
h1,h2,h3{font-family:Lato,sans-serif;color:var(--ink);line-height:1.2}
|
||
h1{font-size:34px;margin:0 0 6px;font-weight:900;letter-spacing:-.01em}
|
||
h2{font-size:21px;margin:34px 0 12px;font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:8px}
|
||
h3{font-size:15px;margin:18px 0 6px;font-weight:700;color:var(--gold-ink);text-transform:uppercase;letter-spacing:.04em}
|
||
.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(--gold-ink);text-decoration:none}a:hover{text-decoration:underline}
|
||
.gradient-text{background:linear-gradient(135deg,var(--gold-2),var(--gold-ink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
|
||
.label{font-size:11px;font-weight:700;color:var(--gold-ink);text-transform:uppercase;letter-spacing:.1em;background:var(--gold-tint);padding:5px 14px;border-radius:50rem;display:inline-block;margin-bottom:14px}
|
||
.lead{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);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-sm);padding:18px;box-shadow:var(--sh-sm);min-width:0}
|
||
.card .n{font-size:28px;font-weight:900;color:var(--ink);line-height:1.1;overflow-wrap:anywhere}.card .n.blue,.card .n.gold{color:var(--gold-ink)}.card .l{color:var(--dim);font-size:13px;margin-top:3px}
|
||
.card-dark{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:22px 24px;box-shadow:var(--sh-md);margin:18px 0}.card-dark h3{color:var(--gold)}.card-dark p{color:#ded7cd;margin:6px 0 0}.card-dark a{color:var(--gold)}
|
||
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(--gold-ink);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--band)}tr:last-child td{border-bottom:none}
|
||
.pill{display:inline-block;padding:2px 10px;border-radius:50rem;font-size:11.5px;font-weight:700}.pill.live{background:#e3f1e4;color:#1f6d24}.pill.bad{background:#fbe4e1;color:#a3271b}
|
||
.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(--gold)}
|
||
.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-sm);padding:16px;position:relative;box-shadow:var(--sh-sm)}.step.here{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
|
||
.step .num{font-size:11px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em}.step .ttl{font-size:15px;font-weight:900;color:var(--ink);margin:4px 0 6px}.step .d{font-size:12.5px;color:var(--dim)}
|
||
.step.here .badge{position:absolute;top:-10px;right:10px;background:var(--gold);color:#000;font-size:11px;font-weight:700;padding:2px 10px;border-radius:50rem}
|
||
code{background:var(--band);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 6px;font:12.5px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gold-ink)}
|
||
footer{margin-top:40px;color:var(--faint);font-size:12px;border-top:1px solid var(--line);padding-top:16px}
|
||
.hero{background:var(--hero);border-top:4px solid var(--gold);border-bottom:1px solid #E2D2BB;padding:44px 28px 34px}.hero .wrap{padding:0;max-width:1000px;margin:0 auto}
|
||
.hero .label{background:#fff;border:1px solid #E2D2BB}
|
||
@media(max-width:760px){.grid,.steps{grid-template-columns:1fr 1fr}h1{font-size:26px}}
|
||
@media print{body{background:#fff}.wrap{padding:0}@page{size:A4;margin:12mm}}
|
||
/* run-of-show extras */
|
||
td.beat{width:44%}td.beat b{color:var(--ink)}td.say{color:var(--dim);font-style:italic}
|
||
tr.star td{background:#FCF6EE}
|
||
.tbl-wrap{overflow-x:auto}
|
||
</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 gold">{{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>
|