pat
788bff5d56
- 06b/06c: third column label is now "Book & Library" with the heading "The book and the AiBook.fun library" (was "Cloud" / "Do it yourself, online"). Same size, cover image unchanged. - 09 header renamed to 09-header-book-library-and-aibook-fun.png with the title "Book & Library and AiBook.fun" (was "Cloud and AiBook.fun"). - three_ways() builds the grid from a list of columns so a fourth bucket can be added later without a CSS change; three-column output is unchanged. - Contact sheet and README updated.
75 lines
9.0 KiB
HTML
75 lines
9.0 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||
<link rel="stylesheet" href="../styles.css"><style>
|
||
.cols{display:grid;grid-template-columns:1fr 1fr 1.3fr;grid-template-rows:repeat(6,auto);column-gap:10px}
|
||
.col{padding:18px 15px 16px;display:grid;grid-template-rows:subgrid;grid-row:span 6}
|
||
.nm{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);font-weight:600}
|
||
.col h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.15;margin:6px 0 10px}
|
||
.sec{border-top:1px dashed var(--line-2);padding:10px 0 12px}
|
||
.span2{grid-row:span 2}
|
||
.lb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
|
||
.sec p{font-size:14px;line-height:1.4}
|
||
.fact{display:flex;gap:7px;align-items:flex-start;margin-top:6px;font-weight:600}
|
||
.lb+.fact{margin-top:0}
|
||
.fact .ico,.inc .ico{width:17px;height:17px;margin-top:1px}
|
||
.inc li{display:flex;gap:7px;align-items:flex-start;font-size:14px;line-height:1.35;padding:2px 0}
|
||
.pr{align-self:end}
|
||
.price{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--pine);background:var(--pine-wash);border:1px solid var(--pine-tint);border-radius:999px;padding:7px 6px;text-align:center;white-space:nowrap}
|
||
.many .price{white-space:normal}
|
||
.book{border-color:rgba(28,93,76,.28)}
|
||
.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;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}
|
||
.dl li{font-size:14px;line-height:1.4;padding:2px 0 2px 14px;position:relative}
|
||
.dl li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:999px;background:var(--pine)}
|
||
</style></head><body><div class="canvas" id="shot"><div class="cols" style="grid-template-columns:1fr 1fr 1.3fr">
|
||
<div class="col card">
|
||
<p class="nm">Retreat</p><h3>Burned Out Advisor Retreat</h3>
|
||
<div class="sec"><p class="lb">What it is</p><p>Three days in person with the authors and other advisors.</p>
|
||
<p class="fact"><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"><circle cx="12" cy="8" r="3"/><path d="M6.5 19c.6-3 2.8-4.8 5.5-4.8s4.9 1.8 5.5 4.8"/><circle cx="5" cy="10" r="2"/><circle cx="19" cy="10" r="2"/><path d="M2 17c.3-1.7 1.4-2.8 3-3M22 17c-.3-1.7-1.4-2.8-3-3"/></svg></span>369 seats</p></div>
|
||
<div class="sec"><p class="lb">Includes</p><ul class="inc"><li><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="M6 11V6.5A2.5 2.5 0 0 1 8.5 4h7A2.5 2.5 0 0 1 18 6.5V11"/><path d="M4 11.5a2 2 0 0 1 4 0V14h8v-2.5a2 2 0 0 1 4 0V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"/><path d="M6.5 18v2M17.5 18v2"/></svg></span>Your seat</li><li><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>The eBook</li><li><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"><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>12 months of AiBook.fun</li></ul></div>
|
||
<div class="sec"><p class="lb">When</p><p class="fact"><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"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/><path d="M7.5 13h2M11 13h2M14.5 13h2M7.5 16.5h2M11 16.5h2"/></svg></span>4–6 November 2026</p></div>
|
||
<div class="pr"><p class="price">Price on the reward</p></div>
|
||
</div>
|
||
<div class="col card">
|
||
<p class="nm">Academy</p><h3>AiCoach + AOP.biz BootCamp</h3>
|
||
<div class="sec"><p class="lb">What it is</p><p>A seat in the next cohort at one of three sites:</p>
|
||
<p class="fact"><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 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.4"/></svg></span>Orlando, Florida</p><p class="fact"><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 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.4"/></svg></span>North Denver, Colorado</p><p class="fact"><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 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.4"/></svg></span>Villa Park, Chicagoland, Illinois</p></div>
|
||
<div class="sec"><p class="lb">Includes</p><ul class="inc"><li><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="M6 11V6.5A2.5 2.5 0 0 1 8.5 4h7A2.5 2.5 0 0 1 18 6.5V11"/><path d="M4 11.5a2 2 0 0 1 4 0V14h8v-2.5a2 2 0 0 1 4 0V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"/><path d="M6.5 18v2M17.5 18v2"/></svg></span>Your seat</li><li><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>The eBook</li><li><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"><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>12 months of AiBook.fun</li></ul></div>
|
||
<div class="sec"><p class="lb">When</p><p class="fact"><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"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/><path d="M7.5 13h2M11 13h2M14.5 13h2M7.5 16.5h2M11 16.5h2"/></svg></span>The next cohort at your chosen site</p></div>
|
||
<div class="pr"><p class="price">Price on the reward</p></div>
|
||
</div>
|
||
<div class="col card book">
|
||
<p class="nm">Book & Library</p><div class="ch"><h3>The book and the AiBook.fun library</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>
|
||
</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> |