Add Kickstarter story image HTML sources and build scripts

2026-09-25 17:36:23 +00:00
parent e5adccf279
commit d05d283d6d
54 changed files with 3447 additions and 0 deletions
@@ -0,0 +1,70 @@
+<!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)}
+.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}
+.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>
+<p class="foot-note">Sample workflow RE-01, shown in the AiBook.fun reader.</p>
+</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>