39 lines
3.0 KiB
HTML
39 lines
3.0 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||
<link rel="stylesheet" href="../styles.css"><style>
|
||
.canvas{padding:0;height:383px}
|
||
.venue{position:absolute;inset:0}
|
||
.venue .ph{border-radius:0;border-width:0;justify-content:flex-start;padding-top:70px}
|
||
.ov{position:absolute;left:28px;bottom:26px;background:rgba(252,251,248,.96);border-radius:16px;padding:16px 22px 18px;box-shadow:var(--sh-lg);max-width:420px}
|
||
.ov h3{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.025em;line-height:1.05;margin:6px 0 10px}
|
||
.ov .d{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px}
|
||
.ov .d .ico{width:22px;height:22px}
|
||
.seats{position:absolute;right:28px;top:26px;width:108px;height:108px;border-radius:999px;background:var(--pine);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 5px rgba(252,251,248,.9),var(--sh-lg)}
|
||
.seats b{font-family:var(--display);font-weight:900;font-size:38px;line-height:1;letter-spacing:-.03em}
|
||
.seats span{font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#cfe0d6;margin-top:3px}
|
||
</style></head><body><div class="canvas" id="shot">
|
||
<div class="slot venue" data-src="../assets/retreat-venue" 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>Venue photo goes here</b><small>Landscape · at least 1360 × 765 px</small></div></div>
|
||
<div class="ov"><p class="spec">We Own AI</p><h3>Burned Out Advisor Retreat</h3><p class="d"><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 to 6 November 2026</p></div>
|
||
<div class="seats"><b>369</b><span>seats</span></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> |