Story images: sources for landing-page cover and live screenshots
This commit is contained in:
@@ -1,10 +1,9 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css"><style>
|
||||
.wel{display:flex;gap:34px;align-items:center;padding:6px 6px 26px}
|
||||
.bookwrap{flex:none;padding:6px 14px 14px 4px}
|
||||
.book{width:184px;height:258px;border-radius:3px 8px 8px 3px;position:relative;box-shadow:10px 12px 0 -3px #efe9db,10px 12px 0 -2px #d6cdba,0 26px 40px -18px rgba(18,63,52,.5)}
|
||||
.book .slot{position:absolute;inset:0;border-radius:3px 8px 8px 3px}
|
||||
.book .slot .ph b{font-size:15px}
|
||||
.wel{display:flex;gap:30px;align-items:center;padding:0 6px 22px}
|
||||
.bookwrap{flex:none;margin:0;width:196px;text-align:center}
|
||||
.bookwrap img{width:196px;display:block}
|
||||
.bookwrap figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:-14px}
|
||||
.wtxt h2{font-family:var(--display);font-weight:900;font-size:50px;letter-spacing:-.03em;line-height:1;color:var(--pine-deep)}
|
||||
.wtxt .t{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.2;margin:14px 0 12px}
|
||||
.wtxt .s{font-size:16px;line-height:1.5;color:var(--muted);max-width:25rem}
|
||||
@@ -16,7 +15,7 @@
|
||||
</style></head><body>
|
||||
<div class="canvas" id="shot">
|
||||
<div class="wel">
|
||||
<div class="bookwrap"><div class="book"><div class="slot cover" data-src="../assets/cover" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Book cover goes here</b><small>Final cover · owner supplies</small></div></div></div></div>
|
||||
<figure class="bookwrap"><img src="../assets-gen/cover-3d.png" alt=""><figcaption>Cover mockup</figcaption></figure>
|
||||
<div class="wtxt">
|
||||
<h2>Welcome</h2>
|
||||
<p class="t">We Own AI — The New American Dream</p>
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css"><style>
|
||||
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
|
||||
.t{padding:18px 18px 20px;position:relative;min-height:118px;display:flex;flex-direction:column}
|
||||
.t .n{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.08em}
|
||||
.t h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.12;margin-top:auto;padding-top:22px}
|
||||
.t .ico{position:absolute;right:16px;top:16px;width:22px;height:22px;opacity:.8}
|
||||
</style></head><body><div class="canvas" id="shot"><p class="spec">Chapters</p><div class="tg"><div class="card t"><span class="n">01</span><h3>Real Estate</h3><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span></div><div class="card t"><span class="n">02</span><h3>Financial Advisors</h3><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span></div><div class="card t"><span class="n">03</span><h3>Fractional <span style="white-space:nowrap">C-Suite</span></h3><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span></div><div class="card t"><span class="n">04</span><h3>Higher Education</h3><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span></div><div class="card t"><span class="n">05</span><h3>Communities</h3><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span></div><div class="card t"><span class="n">06</span><h3>Technology</h3><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span></div></div></div>
|
||||
<script>
|
||||
window.__ready = (async () => {
|
||||
let empty = 0;
|
||||
for (const s of document.querySelectorAll('.slot[data-src]')) {
|
||||
let ok = false;
|
||||
for (const ext of ['jpg', 'jpeg', 'png', 'webp']) {
|
||||
const url = s.dataset.src + '.' + ext;
|
||||
ok = await new Promise(r => { const i = new Image(); i.onload = () => r(true); i.onerror = () => r(false); i.src = url; });
|
||||
if (ok) { s.style.backgroundImage = 'url("' + url + '")'; s.classList.add('filled'); break; }
|
||||
}
|
||||
if (!ok) empty++;
|
||||
}
|
||||
await document.fonts.ready;
|
||||
for (const el of document.querySelectorAll('[data-fit]')) {
|
||||
let fs = parseFloat(getComputedStyle(el).fontSize);
|
||||
const max = el.dataset.fit ? parseFloat(el.dataset.fit) : el.parentElement.clientWidth;
|
||||
while (el.scrollWidth > max && fs > 10) { fs -= 0.5; el.style.fontSize = fs + 'px'; }
|
||||
}
|
||||
if (window.afterLayout) await window.afterLayout();
|
||||
return empty;
|
||||
})();
|
||||
</script></body></html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css"><style>
|
||||
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
|
||||
.t{padding:16px 16px 18px;display:flex;flex-direction:column}
|
||||
.t .n{font-family:var(--mono);font-size:13px;color:var(--pine);letter-spacing:.08em}
|
||||
.t h3{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.12;margin:10px 0 6px}
|
||||
.t p{font-size:14px;line-height:1.4;color:var(--muted)}
|
||||
</style></head><body><div class="canvas" id="shot"><p class="spec">The founding library</p><div class="tg"><div class="card t"><span class="n">01</span><h3>Real Estate</h3><p>Market briefs & listings, without leaking client data</p></div><div class="card t"><span class="n">02</span><h3>Financial Advisors</h3><p>Portfolio summaries that stay compliant & reviewed</p></div><div class="card t"><span class="n">03</span><h3>Fractional <span style="white-space:nowrap">C-Suite</span></h3><p>Board updates & plans with real escalation paths</p></div><div class="card t"><span class="n">04</span><h3>Higher Education</h3><p>Course & research workflows with academic integrity</p></div><div class="card t"><span class="n">05</span><h3>Communities</h3><p>Moderation & programming that respects members</p></div><div class="card t"><span class="n">06</span><h3>Technology</h3><p>Agent patterns, evals & the responsible defaults</p></div></div></div>
|
||||
<script>
|
||||
window.__ready = (async () => {
|
||||
let empty = 0;
|
||||
for (const s of document.querySelectorAll('.slot[data-src]')) {
|
||||
let ok = false;
|
||||
for (const ext of ['jpg', 'jpeg', 'png', 'webp']) {
|
||||
const url = s.dataset.src + '.' + ext;
|
||||
ok = await new Promise(r => { const i = new Image(); i.onload = () => r(true); i.onerror = () => r(false); i.src = url; });
|
||||
if (ok) { s.style.backgroundImage = 'url("' + url + '")'; s.classList.add('filled'); break; }
|
||||
}
|
||||
if (!ok) empty++;
|
||||
}
|
||||
await document.fonts.ready;
|
||||
for (const el of document.querySelectorAll('[data-fit]')) {
|
||||
let fs = parseFloat(getComputedStyle(el).fontSize);
|
||||
const max = el.dataset.fit ? parseFloat(el.dataset.fit) : el.parentElement.clientWidth;
|
||||
while (el.scrollWidth > max && fs > 10) { fs -= 0.5; el.style.fontSize = fs + 'px'; }
|
||||
}
|
||||
if (window.afterLayout) await window.afterLayout();
|
||||
return empty;
|
||||
})();
|
||||
</script></body></html>
|
||||
@@ -1,50 +1,21 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../reader/globals.css"><link rel="stylesheet" href="../styles.css"><style>
|
||||
body{background:#fff}
|
||||
.win{background:#fff;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:var(--sh-lg)}
|
||||
<link rel="stylesheet" href="../styles.css"><style>
|
||||
.win{background:var(--paper);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:var(--sh-lg)}
|
||||
.bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#f1eee7;border-bottom:1px solid var(--line)}
|
||||
.bar i{width:11px;height:11px;border-radius:999px;background:#d8d1c4;display:block}
|
||||
.bar .url{margin-left:14px;flex:1;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 14px;font-family:var(--mono);font-size:13px;color:var(--muted)}
|
||||
.scr{padding:20px;background:var(--paper)}
|
||||
.recipe{box-shadow:var(--sh-md);border-radius:16px}
|
||||
.recipe-top{padding:14px 18px}
|
||||
.recipe-id{font-size:13px}
|
||||
.recipe-vert{font-size:12px}
|
||||
.recipe-body{padding:22px 20px 22px}
|
||||
.recipe-title{font-size:23px;margin-bottom:16px}
|
||||
.xrow{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;border-top:1px dashed var(--line-2)}
|
||||
.xrow .k{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--pine);padding-top:3px;font-weight:500}
|
||||
.guard{font-size:15px;padding:5px 0;color:var(--muted);gap:9px;line-height:1.45}
|
||||
.guard svg{width:18px;height:18px;color:var(--pine);flex:none;margin-top:1px}
|
||||
.mins{font-weight:700;font-size:16px;margin-bottom:8px}
|
||||
.cl li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45;padding:5px 0}
|
||||
.cl .box{width:18px;height:18px;border:1.6px solid var(--pine);border-radius:5px;flex:none;margin-top:2px;background:#fff}
|
||||
.acts{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
|
||||
.chip{font-size:13px}
|
||||
.btn{font-size:15px;padding:10px 18px}
|
||||
.win img{display:block;width:614px}
|
||||
.gap{padding:10px 0;text-align:center;background:linear-gradient(transparent calc(50% - 1px),var(--line-2) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
|
||||
.gap span{font-family:var(--mono);font-size:12.5px;color:var(--muted);background:var(--paper);padding:2px 10px;letter-spacing:.02em}
|
||||
.foot-note{text-align:center}
|
||||
</style></head><body><div class="canvas" id="shot">
|
||||
<div class="win">
|
||||
<div class="bar"><i></i><i></i><i></i><span class="url">aibook.fun</span></div>
|
||||
<div class="scr">
|
||||
<article class="recipe">
|
||||
<div class="recipe-top"><span class="recipe-id"><b>RE-01</b> · v1.2 · ~15 min · ≈ $0.03</span><span class="recipe-vert">Real Estate</span></div>
|
||||
<div class="recipe-body">
|
||||
<h3 class="recipe-title">Draft a property-market brief with an AI agent without leaking client data.</h3>
|
||||
<div class="xrow"><h4 class="k">Safeguards</h4><div class="v">
|
||||
<div class="guard"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z" stroke="#1C5D4C" stroke-width="1.3" stroke-linejoin="round"/><path d="m5.6 8 1.7 1.7L10.6 6" stroke="#1C5D4C" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Redaction runs on your machine. Raw client data never reaches the model.</span></div>
|
||||
<div class="guard"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z" stroke="#1C5D4C" stroke-width="1.3" stroke-linejoin="round"/><path d="m5.6 8 1.7 1.7L10.6 6" stroke="#1C5D4C" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg><span>A human checklist is required before the brief is shared.</span></div>
|
||||
</div></div>
|
||||
<div class="xrow try"><h4 class="k">Try-it</h4><div class="v">
|
||||
<p class="mins">About 15 minutes</p>
|
||||
<ul class="cl"><li><span class="box"></span>Use the included sample_listings.csv (no live client file).</li><li><span class="box"></span>Produce the market-1pager brief.</li><li><span class="box"></span>Walk the human checklist.</li><li><span class="box"></span>Mark complete when you have a brief you would send after review.</li></ul>
|
||||
<div class="acts"><span class="chip">◷ cost to try ≈ $0.03</span><span class="btn btn-ghost">Mark complete</span></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="bar"><i></i><i></i><i></i><span class="url">aibook.fun/read/recipe/RE-01</span></div>
|
||||
<img src="../assets-gen/re01-top.png" alt="">
|
||||
<div class="gap"><span>Problem · Actors · Setup · Safeguards · Method · Evidence</span></div>
|
||||
<img src="../assets-gen/re01-tryit.png" alt="">
|
||||
</div>
|
||||
<p class="foot-note">Sample workflow RE-01, shown in the AiBook.fun reader.</p>
|
||||
<p class="foot-note">Screenshots of sample workflow RE-01 at aibook.fun/read/recipe/RE-01</p>
|
||||
</div>
|
||||
<script>
|
||||
window.__ready = (async () => {
|
||||
|
||||
@@ -18,7 +18,9 @@
|
||||
.prices li{display:grid;grid-template-columns:58px 1fr;gap:8px;align-items:baseline;padding:7px 8px;border-radius:10px;font-size:14px;line-height:1.35}
|
||||
.prices li+li{margin-top:4px}
|
||||
.prices b{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.03em;color:var(--ink)}
|
||||
.prices b.np{align-self:start;color:var(--muted);width:22px;height:22px;margin:1px 0 0 4px}
|
||||
.prices b.np{align-self:start;width:30px;margin:0 0 0 6px}.prices b.np img{width:30px;display:block}
|
||||
.ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
|
||||
.ch img{width:46px;border-radius:2px 4px 4px 2px;box-shadow:0 6px 12px -6px rgba(18,63,52,.5);margin:4px 0 8px}
|
||||
.prices small{display:block;font-size:13px;color:var(--muted)}
|
||||
.prices li.feat{background:var(--pine);color:#eaf1ec}
|
||||
.prices li.feat b{color:#fff}
|
||||
@@ -42,8 +44,8 @@
|
||||
<div class="pr"><p class="price">Price on the reward</p></div>
|
||||
</div>
|
||||
<div class="col card cloud">
|
||||
<p class="nm">Cloud</p><h3>Do it yourself, online</h3>
|
||||
<div class="sec span2"><p class="lb">Choose one</p><ul class="prices"><li class=""><b>$19</b><span>Early Bird eBook<small>First 200 backers</small></span></li><li class=""><b>$25</b><span>eBook and backer-only updates</span></li><li class="feat"><b>$47</b><span>eBook and 12 months of the AiBook.fun library</span></li><li><b class="np"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></b><span>Signed paperback and eBook<small>Price on the reward</small></span></li></ul></div>
|
||||
<p class="nm">Cloud</p><div class="ch"><h3>Do it yourself, online</h3><img src="../assets-gen/cover-flat.png" alt=""></div>
|
||||
<div class="sec span2"><p class="lb">Choose one</p><ul class="prices"><li class=""><b>$19</b><span>Early Bird eBook<small>First 200 backers</small></span></li><li class=""><b>$25</b><span>eBook and backer-only updates</span></li><li class="feat"><b>$47</b><span>eBook and 12 months of the AiBook.fun library</span></li><li><b class="np"><img src="../assets-gen/cover-3d.png" alt=""></b><span>Signed paperback and eBook<small>Price on the reward</small></span></li></ul></div>
|
||||
<div class="sec"><p class="lb">When</p><ul class="dl"><li>Library access: within about 14 days of a successful campaign</li><li>eBook: January 2027</li><li>Signed paperback: February 2027</li></ul></div>
|
||||
<div class="pr"></div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,9 @@
|
||||
.prices li{display:grid;grid-template-columns:58px 1fr;gap:8px;align-items:baseline;padding:7px 8px;border-radius:10px;font-size:14px;line-height:1.35}
|
||||
.prices li+li{margin-top:4px}
|
||||
.prices b{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.03em;color:var(--ink)}
|
||||
.prices b.np{align-self:start;color:var(--muted);width:22px;height:22px;margin:1px 0 0 4px}
|
||||
.prices b.np{align-self:start;width:30px;margin:0 0 0 6px}.prices b.np img{width:30px;display:block}
|
||||
.ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
|
||||
.ch img{width:46px;border-radius:2px 4px 4px 2px;box-shadow:0 6px 12px -6px rgba(18,63,52,.5);margin:4px 0 8px}
|
||||
.prices small{display:block;font-size:13px;color:var(--muted)}
|
||||
.prices li.feat{background:var(--pine);color:#eaf1ec}
|
||||
.prices li.feat b{color:#fff}
|
||||
@@ -42,7 +44,7 @@
|
||||
<div class="pr"><p class="price">Price on the reward</p></div>
|
||||
</div>
|
||||
<div class="col card cloud">
|
||||
<p class="nm">Cloud</p><h3>Do it yourself, online</h3>
|
||||
<p class="nm">Cloud</p><div class="ch"><h3>Do it yourself, online</h3><img src="../assets-gen/cover-flat.png" alt=""></div>
|
||||
<div class="sec span2"><p class="lb">Choose one</p><ul class="prices"><li class=""><b>$19</b><span>Early Bird eBook<small>First 200 backers</small></span></li><li class=""><b>$25</b><span>eBook and backer-only updates</span></li><li class="feat"><b>$47</b><span>eBook and 12 months of the AiBook.fun library</span></li></ul></div>
|
||||
<div class="sec"><p class="lb">When</p><ul class="dl"><li>Library access: within about 14 days of a successful campaign</li><li>eBook: January 2027</li></ul></div>
|
||||
<div class="pr"></div>
|
||||
|
||||
@@ -20,16 +20,16 @@
|
||||
</style></head><body><div class="canvas" id="shot">
|
||||
<div class="stage">
|
||||
<div class="laptop"><div class="lid"><div class="scr"><img src="../assets-gen/screen-laptop.png">
|
||||
<i class="tg" data-t="essay" style="left:27.32%;top:15.67%"></i><i class="tg" data-t="workflow" style="left:29.91%;top:54.70%"></i></div></div><div class="base"></div></div>
|
||||
<i class="tg" data-t="essay" style="left:27.32%;top:15.70%"></i><i class="tg" data-t="workflow" style="left:29.91%;top:54.73%"></i></div></div><div class="base"></div></div>
|
||||
<div class="phone"><div class="scr"><img src="../assets-gen/screen-phone.png">
|
||||
<i class="tg" data-t="tryit" style="left:33.67%;top:14.49%"></i><i class="tg" data-t="updated" style="left:65.06%;top:92.33%"></i></div></div>
|
||||
<i class="tg" data-t="tryit" style="left:33.67%;top:14.55%"></i><i class="tg" data-t="updated" style="left:65.07%;top:95.21%"></i></div></div>
|
||||
<span class="co" data-c="essay" style="left:0;top:0">Chapter essay</span>
|
||||
<span class="co" data-c="workflow" style="left:0;bottom:0">Workflow</span>
|
||||
<span class="co" data-c="tryit" style="right:0;top:0">Try-it (about 15 minutes)</span>
|
||||
<span class="co" data-c="updated" style="right:0;bottom:0">Last updated</span>
|
||||
<svg class="lines"></svg>
|
||||
</div>
|
||||
<p class="foot-note">Mockup of the AiBook.fun reader, showing the sample Real Estate chapter.</p>
|
||||
<p class="foot-note">Screenshots of the AiBook.fun reader (sample Real Estate chapter) in device frames.</p>
|
||||
</div>
|
||||
<script>
|
||||
window.afterLayout = async () => {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css"><style>
|
||||
.lane{padding:16px 18px 18px}
|
||||
.cv{display:block;height:46px;margin:0 auto 8px;border-radius:1px 3px 3px 1px;box-shadow:0 4px 8px -4px rgba(18,63,52,.5)}
|
||||
.lhc{height:52px;display:block;margin:-6px 2px -4px 0}
|
||||
.lane+.lane{margin-top:14px}
|
||||
.lh{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px dashed var(--line-2);margin-bottom:14px}
|
||||
.ico.lhi{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--pine);color:#fff}
|
||||
@@ -12,7 +14,7 @@
|
||||
.ico.ci{width:46px;height:46px;padding:11px;border-radius:999px;background:var(--pine-wash);border:1px solid var(--pine-tint);display:block;margin:0 auto 8px}
|
||||
.stp b{display:block;font-size:15.5px;font-weight:700}
|
||||
.stp p{font-size:13.5px;line-height:1.38;color:var(--muted);margin-top:3px}
|
||||
</style></head><body><div class="canvas" id="shot"><div class="card lane"><div class="lh"><span class="ico lhi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.8 7 8.2 6 8.2-6"/></svg></span><div><h3>Digital rewards</h3><p>Arrive by email</p></div></div><div class="steps n3"><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.8 7 8.2 6 8.2-6"/></svg></span><b>Email</b><p>To the address on your Kickstarter account</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="12" rx="1.6"/><path d="M2 19.5h20"/><path d="M8 8.5h8M8 11.5h5"/></svg></span><b>Library access</b><p>Within about 14 days of a successful campaign</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5C9.5 5 7 4.6 3.5 5v13c3.5-.4 6 0 8.5 1.5 2.5-1.5 5-1.9 8.5-1.5V5c-3.5-.4-6 0-8.5 1.5z"/><path d="M12 6.5v13"/></svg></span><b>eBook</b><p>January 2027</p></div></div></div><div class="card lane"><div class="lh"><span class="ico lhi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4z"/><path d="M3.5 7.5 12 11.5l8.5-4M12 11.5v9"/></svg></span><div><h3>Signed paperbacks</h3><p>Ship in February 2027</p></div></div><div class="steps n4"><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V3h6v1"/><path d="M8.5 9.5h7M8.5 13h7M8.5 16.5h4"/></svg></span><b>Survey</b><p>Kickstarter’s Pledge Manager asks for your address and charges shipping and any taxes</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 9V4h10v5"/><rect x="3.5" y="9" width="17" height="8" rx="2"/><path d="M7 14h10v6H7z"/><path d="M17 12h.01"/></svg></span><b>Printing</b></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20c2.5 0 3.5-2 5-2s2 1.5 3.5 1.5"/><path d="m14 4.5 5.5 5.5L11 18.5l-6 1.5 1.5-6z"/><path d="m12.5 6 5.5 5.5"/></svg></span><b>Signing</b><p>January 2027</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 6.5h11v9h-11z"/><path d="M13.5 9.5h4l3 3.5v2.5h-7"/><circle cx="6.5" cy="17" r="1.8"/><circle cx="17" cy="17" r="1.8"/></svg></span><b>Shipping</b><p>February 2027</p></div></div></div></div>
|
||||
</style></head><body><div class="canvas" id="shot"><div class="card lane"><div class="lh"><span class="ico lhi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.8 7 8.2 6 8.2-6"/></svg></span><div><h3>Digital rewards</h3><p>Arrive by email</p></div></div><div class="steps n3"><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.8 7 8.2 6 8.2-6"/></svg></span><b>Email</b><p>To the address on your Kickstarter account</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="12" rx="1.6"/><path d="M2 19.5h20"/><path d="M8 8.5h8M8 11.5h5"/></svg></span><b>Library access</b><p>Within about 14 days of a successful campaign</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><img class="cv" src="../assets-gen/cover-flat.png" alt=""><b>eBook</b><p>January 2027</p></div></div></div><div class="card lane"><div class="lh"><img class="lhc" src="../assets-gen/cover-3d.png" alt=""><div><h3>Signed paperbacks</h3><p>Ship in February 2027</p></div></div><div class="steps n4"><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V3h6v1"/><path d="M8.5 9.5h7M8.5 13h7M8.5 16.5h4"/></svg></span><b>Survey</b><p>Kickstarter’s Pledge Manager asks for your address and charges shipping and any taxes</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 9V4h10v5"/><rect x="3.5" y="9" width="17" height="8" rx="2"/><path d="M7 14h10v6H7z"/><path d="M17 12h.01"/></svg></span><b>Printing</b></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20c2.5 0 3.5-2 5-2s2 1.5 3.5 1.5"/><path d="m14 4.5 5.5 5.5L11 18.5l-6 1.5 1.5-6z"/><path d="m12.5 6 5.5 5.5"/></svg></span><b>Signing</b><p>January 2027</p></div><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><div class="stp"><span class="ico ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 6.5h11v9h-11z"/><path d="M13.5 9.5h4l3 3.5v2.5h-7"/><circle cx="6.5" cy="17" r="1.8"/><circle cx="17" cy="17" r="1.8"/></svg></span><b>Shipping</b><p>February 2027</p></div></div></div></div>
|
||||
<script>
|
||||
window.__ready = (async () => {
|
||||
let empty = 0;
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css"><style>
|
||||
.ag{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
|
||||
.ag{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
|
||||
.au{padding:14px 14px 18px}
|
||||
.ap{aspect-ratio:1/1;border-radius:10px}
|
||||
.an{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;margin-top:12px;color:#8d8579}
|
||||
.ar{font-size:15px;color:var(--muted);margin-top:2px}
|
||||
.ap .ph b{font-size:13px}
|
||||
.an{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;margin-top:12px;color:#8d8579}
|
||||
.ar{font-size:14px;line-height:1.35;color:var(--muted);margin-top:2px}
|
||||
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
|
||||
.tm{padding:12px;display:flex;gap:11px;align-items:flex-start}
|
||||
.tp{width:60px;height:60px;border-radius:999px;flex:none}
|
||||
@@ -14,10 +15,7 @@
|
||||
.tr{font-size:13px;line-height:1.35;color:var(--muted);margin-top:3px}
|
||||
</style></head><body><div class="canvas" id="shot">
|
||||
<p class="spec">The authors</p>
|
||||
<div class="ag">
|
||||
<div class="card au"><div class="slot ap" data-src="../assets/author-1" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Author photo goes here</b><small>800 × 800</small></div></div><p class="an">Author name</p><p class="ar">Role in the book</p></div>
|
||||
<div class="card au"><div class="slot ap" data-src="../assets/author-2" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Author photo goes here</b><small>800 × 800</small></div></div><p class="an">Author name</p><p class="ar">Role in the book</p></div>
|
||||
</div>
|
||||
<div class="ag"><div class="card au"><div class="slot ap" data-src="../assets/author-1" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Author photo goes here</b><small>800 × 800</small></div></div><p class="an">Name goes here</p><p class="ar">Co-author, Real Estate & Finance</p></div><div class="card au"><div class="slot ap" data-src="../assets/author-2" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Author photo goes here</b><small>800 × 800</small></div></div><p class="an">Name goes here</p><p class="ar">Co-author, <span style="white-space:nowrap">Fractional C-Suite</span></p></div><div class="card au"><div class="slot ap" data-src="../assets/author-3" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Author photo goes here</b><small>800 × 800</small></div></div><p class="an">Name goes here</p><p class="ar">Co-author, Technology & RAAI</p></div></div>
|
||||
<p class="spec" style="margin-top:22px">The team</p>
|
||||
<div class="tg"><div class="card tm"><div class="slot tp" data-src="../assets/team-thy" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Photo</b><small>800 × 800</small></div></div><div><p class="tn">Name goes here</p><p class="th">@THY</p><p class="tr">Author and Retreat host</p></div></div><div class="card tm"><div class="slot tp" data-src="../assets/team-lfg" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Photo</b><small>800 × 800</small></div></div><div><p class="tn">Name goes here</p><p class="th">@LFG</p><p class="tr">Creative lead for design, website, campaign page, and video</p></div></div><div class="card tm"><div class="slot tp" data-src="../assets/team-ceo" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Photo</b><small>800 × 800</small></div></div><div><p class="tn">Name goes here</p><p class="th">@CEO</p><p class="tr">Business strategy and partnerships</p></div></div><div class="card tm"><div class="slot tp" data-src="../assets/team-gtm" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Photo</b><small>800 × 800</small></div></div><div><p class="tn">Name goes here</p><p class="th">@GTM</p><p class="tr">Payments, email, and technical setup</p></div></div><div class="card tm"><div class="slot tp" data-src="../assets/team-osinachi-patrick" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Photo</b><small>800 × 800</small></div></div><div><p class="tn">Osinachi Patrick</p><p class="tr">Product lead, AiBook.fun</p></div></div><div class="card tm"><div class="slot tp" data-src="../assets/team-academy-lead" style=""><div class="ph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.2" r="3.4"/></svg><b>Photo</b><small>800 × 800</small></div></div><div><p class="tn">Name goes here</p><p class="tr">Academy BootCamp lead</p></div></div></div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user