glennandClaude Opus 5
2fd559f1cc
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DywdYrFTrWa4h1T3ZykPBX
146 lines
9.3 KiB
HTML
146 lines
9.3 KiB
HTML
<!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>
|
||
/* 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}}
|
||
/* one-pager extras */
|
||
.tbl-wrap{overflow-x:auto}
|
||
td.was{color:var(--dim)}td.now b{color:var(--ink)}
|
||
</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 gold">{{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 gold">{{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>
|