Add Kickstarter story image HTML sources and build scripts

This commit is contained in:
pat
2026-09-25 17:36:23 +00:00
parent e5adccf279
commit d05d283d6d
54 changed files with 3447 additions and 0 deletions
@@ -0,0 +1,37 @@
<!doctype html><html lang="en"><head><meta charset="utf-8">
<link rel="stylesheet" href="../styles.css"><style>
.tl{position:relative;height:396px}
.path{position:absolute;inset:0;width:616px;height:420px}
.path path{fill:none;stroke:var(--pine);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;opacity:.7}
.stop{position:absolute;width:0;height:0}
.num{position:absolute;left:-23px;top:-23px;width:46px;height:46px;border-radius:999px;background:var(--pine);color:#fff;font-family:var(--display);font-weight:900;font-size:22px;display:grid;place-items:center;box-shadow:0 0 0 5px var(--paper-2),var(--sh-md)}
.stop.tba .num{background:#fff;color:var(--pine);border:2.5px solid var(--pine)}
.tx{position:absolute;top:34px;left:-92px;width:184px;text-align:center}
.tx b{display:block;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.tx p{font-size:14px;line-height:1.4;color:var(--muted);margin-top:5px}
.stop.tba .tx b{color:var(--pine)}
</style></head><body><div class="canvas" id="shot"><div class="tl">
<svg class="path" viewBox="0 0 616 420"><path d="M96 30 H484 C644 30 644 250 484 250 H96" /></svg>
<div class="stop" style="left:96px;top:30px"><span class="num">1</span><div class="tx"><b>Fri 2 Oct 2026</b><p>The campaign opens.</p></div></div><div class="stop" style="left:290px;top:30px"><span class="num">2</span><div class="tx"><b>Wed 4 Nov 2026</b><p>The campaign ends. The Burned Out Advisor Retreat runs 4 to 6 November.</p></div></div><div class="stop" style="left:484px;top:30px"><span class="num">3</span><div class="tx"><b>By mid-November 2026</b><p>AiBook.fun access for backers whose reward includes it, and the backer survey.</p></div></div><div class="stop tba" style="left:484px;top:250px"><span class="num">4</span><div class="tx"><b>Dates to be announced</b><p>Academy BootCamp cohorts in Orlando, North Denver, and Villa Park.</p></div></div><div class="stop" style="left:290px;top:250px"><span class="num">5</span><div class="tx"><b>January 2027</b><p>Final layout and eBook files. The eBook is delivered and the paperbacks are signed.</p></div></div><div class="stop" style="left:96px;top:250px"><span class="num">6</span><div class="tx"><b>February 2027</b><p>Signed paperbacks are delivered.</p></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>