41 lines
2.3 KiB
HTML
41 lines
2.3 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
|
<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)}
|
|
.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/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">Screenshots of sample workflow RE-01 at aibook.fun/read/recipe/RE-01</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> |