489 lines
21 KiB
HTML
489 lines
21 KiB
HTML
<!doctype html>
|
|
<!--
|
|
OD replit-deck seed.
|
|
|
|
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
|
landing-page template gallery (replit.com/slides). One deck picks ONE
|
|
theme via `<body data-theme="...">`. All 8 themes ship as tokens below;
|
|
never override per-slide.
|
|
|
|
Themes:
|
|
helix Modern minimal · light grey + ink + electric blue
|
|
holm Editorial serif · cream + ink + deep chestnut
|
|
vance Gallery · black/cream bars + cream serif
|
|
bevel Y2K editorial · black + Y2K display type
|
|
world-dark Finance dark · deep green + mint + neon yellow
|
|
world-mint Finance light · mint + deep green + neon yellow
|
|
atlas Museum · black + ivory + vermilion + serif
|
|
bluehouse Consumer · deep navy + peach/coral gradient cards
|
|
|
|
DO NOT rewrite the `<script>` at the bottom. It reuses the five-rule
|
|
pattern from `skills/simple-deck` that solves:
|
|
1. real-scroller detection (the deck root is the scroller, not window —
|
|
inside the daemon's iframe, window.scroll* is a different surface)
|
|
2. dual listeners (keydown fires on window AND document; without
|
|
deduping, one press advances two slides)
|
|
3. auto-focus (iframe must grab focus on load, or keyboard nav dies
|
|
silently until the user clicks inside the deck)
|
|
4. no `scrollIntoView` (it yanks the parent page if the iframe is
|
|
embedded — we compute offsets manually instead)
|
|
5. position persistence (reloading the iframe would reset to slide 1;
|
|
we persist the current slide index in localStorage, keyed by
|
|
pathname — so two decks on the same origin don't steal each
|
|
other's position)
|
|
See `skills/simple-deck/assets/template.html` for the derivation.
|
|
Rewriting the script reintroduces all five bugs in the daemon preview.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>[REPLACE] Deck title · subtitle</title>
|
|
<style>
|
|
/* ─── font stacks (system-only; no external fonts) ─────────────── */
|
|
:root {
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
|
|
--font-sans-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
|
|
--font-serif: 'Iowan Old Style', 'Charter', 'Palatino', Georgia, 'Times New Roman', serif;
|
|
--font-serif-display: 'GT Super', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
|
|
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
|
}
|
|
|
|
/* ─── theme: helix (slide-1/4/5 — modern minimal) ─────────────── */
|
|
body[data-theme="helix"] {
|
|
--bg: #fafafa;
|
|
--surface: #ffffff;
|
|
--fg: #19191c;
|
|
--muted: #6e6e73;
|
|
--border: #e4e4e7;
|
|
--accent: #5889fe;
|
|
--accent-soft: color-mix(in oklch, #5889fe 14%, transparent);
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 600;
|
|
--display-tracking: -0.02em;
|
|
}
|
|
|
|
/* ─── theme: holm (slide-2 — editorial serif memo) ────────────── */
|
|
body[data-theme="holm"] {
|
|
--bg: #e4dfd7;
|
|
--surface: #eee9e0;
|
|
--fg: #0f0f0e;
|
|
--muted: #7c7e84;
|
|
--border: #c7c1b7;
|
|
--accent: #52311d;
|
|
--accent-soft: color-mix(in oklch, #52311d 14%, transparent);
|
|
--font-display: var(--font-serif-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.015em;
|
|
}
|
|
|
|
/* ─── theme: vance (slide-3/7 — gallery catalog) ──────────────── */
|
|
body[data-theme="vance"] {
|
|
--bg: #f1ede2;
|
|
--surface: #e7e2d4;
|
|
--fg: #171815;
|
|
--muted: #6e6b62;
|
|
--border: #d6d2c5;
|
|
--accent: #171815;
|
|
--accent-soft: color-mix(in oklch, #171815 8%, transparent);
|
|
--bar: #0a0a0a; /* top/bottom gallery bar */
|
|
--bar-fg: #f1ede2;
|
|
--font-display: var(--font-serif-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 400;
|
|
--display-tracking: -0.01em;
|
|
}
|
|
|
|
/* ─── theme: bevel (slide-6/13 — Y2K editorial) ───────────────── */
|
|
body[data-theme="bevel"] {
|
|
--bg: #0d0d0b;
|
|
--surface: #18181a;
|
|
--fg: #eae6dd;
|
|
--muted: #a29e95;
|
|
--border: #2a2a28;
|
|
--accent: #c8ff00; /* neon outline only — sparingly */
|
|
--accent-soft: color-mix(in oklch, #c8ff00 10%, transparent);
|
|
--font-display: 'Antonio', 'Bebas Neue', Impact, var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 700;
|
|
--display-tracking: 0;
|
|
}
|
|
|
|
/* ─── theme: world-dark (slide-8/10 — finance dark) ───────────── */
|
|
body[data-theme="world-dark"] {
|
|
--bg: #0d3a2b;
|
|
--surface: #124736;
|
|
--fg: #bcd6cd;
|
|
--muted: #789f91;
|
|
--border: #1d4c3c;
|
|
--accent: #e8f615;
|
|
--accent-soft: color-mix(in oklch, #e8f615 18%, transparent);
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.015em;
|
|
}
|
|
|
|
/* ─── theme: world-mint (slide-9 — finance light sibling) ─────── */
|
|
body[data-theme="world-mint"] {
|
|
--bg: #bcd6cd;
|
|
--surface: #c8e0d6;
|
|
--fg: #0d3a2b;
|
|
--muted: #527567;
|
|
--border: #9abbac;
|
|
--accent: #e8f615;
|
|
--accent-soft: color-mix(in oklch, #e8f615 22%, transparent);
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.015em;
|
|
}
|
|
|
|
/* ─── theme: atlas (slide-11 — museum chapter) ────────────────── */
|
|
body[data-theme="atlas"] {
|
|
--bg: #111010;
|
|
--surface: #1a1918;
|
|
--fg: #e7e6e2;
|
|
--muted: #827d78;
|
|
--border: #2a2826;
|
|
--accent: #de3f40;
|
|
--accent-soft: color-mix(in oklch, #de3f40 14%, transparent);
|
|
--font-display: var(--font-serif-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.02em;
|
|
}
|
|
|
|
/* ─── theme: bluehouse (slide-12 — consumer card) ─────────────── */
|
|
body[data-theme="bluehouse"] {
|
|
--bg: #0b1524;
|
|
--surface: #10203a;
|
|
--fg: #ffffff;
|
|
--muted: #8ea0b8;
|
|
--border: #1a2c46;
|
|
--accent: #fb675d; /* coral */
|
|
--accent-2: #ff8f68; /* peach */
|
|
--accent-soft: color-mix(in oklch, #fb675d 18%, transparent);
|
|
--card-peach: #e0af99;
|
|
--card-lavender: #c7cff0;
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 700;
|
|
--display-tracking: -0.025em;
|
|
}
|
|
|
|
/* ─── reset / base ────────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
}
|
|
body::-webkit-scrollbar { display: none; }
|
|
p { text-wrap: pretty; margin: 0; }
|
|
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
|
|
|
|
/* ─── slide surface ───────────────────────────────────────────── */
|
|
.slide {
|
|
flex: 0 0 100vw;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
scroll-snap-align: start;
|
|
padding: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.slide.center { align-items: center; justify-content: center; text-align: center; }
|
|
|
|
/* ─── meta bar (top thin row: brand · meta · page) ────────────── */
|
|
.meta-bar {
|
|
position: absolute;
|
|
top: clamp(32px, 4vw, 56px);
|
|
left: clamp(56px, 7vw, 112px);
|
|
right: clamp(56px, 7vw, 112px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
body[data-theme="vance"] .meta-bar { color: var(--bar-fg); }
|
|
|
|
/* ─── typography primitives ──────────────────────────────────── */
|
|
.eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.eyebrow.accent { color: var(--accent); }
|
|
.h-hero { font-family: var(--font-display); font-size: clamp(56px, 8.5vw, 128px); line-height: 1.02; }
|
|
.h-xl { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); line-height: 1.08; }
|
|
.h-lg { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; }
|
|
.h-md { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
|
|
.lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); max-width: 56ch; }
|
|
|
|
/* Big numeric display — for kpi rows, used by helix / world / atlas */
|
|
.num { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.03em; }
|
|
.num-label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
|
|
.num-delta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: 0.02em; }
|
|
|
|
/* ─── layout primitives ──────────────────────────────────────── */
|
|
.hstack { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
|
|
.vstack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
|
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
|
|
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); row-gap: clamp(48px, 5vw, 80px); }
|
|
.divider { height: 1px; background: var(--border); margin: clamp(16px, 2vw, 32px) 0; }
|
|
|
|
/* ─── surface cards ──────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: clamp(20px, 2vw, 32px);
|
|
}
|
|
|
|
/* ─── vance gallery bars ─────────────────────────────────────── */
|
|
body[data-theme="vance"] .slide { padding-top: 0; padding-bottom: 0; }
|
|
body[data-theme="vance"] .vance-top {
|
|
background: var(--bar);
|
|
color: var(--bar-fg);
|
|
padding: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 112px);
|
|
margin-left: calc(-1 * clamp(56px, 7vw, 112px));
|
|
margin-right: calc(-1 * clamp(56px, 7vw, 112px));
|
|
}
|
|
|
|
/* ─── bevel dashed frames ────────────────────────────────────── */
|
|
body[data-theme="bevel"] .bevel-frame {
|
|
border: 1px dashed var(--accent);
|
|
padding: clamp(16px, 2vw, 28px);
|
|
position: relative;
|
|
}
|
|
body[data-theme="bevel"] .bevel-frame::before,
|
|
body[data-theme="bevel"] .bevel-frame::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 8px; height: 8px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
}
|
|
body[data-theme="bevel"] .bevel-frame::before { top: -4px; left: -4px; }
|
|
body[data-theme="bevel"] .bevel-frame::after { bottom: -4px; right: -4px; }
|
|
|
|
/* ─── world yellow square marker ─────────────────────────────── */
|
|
body[data-theme="world-dark"] .world-marker,
|
|
body[data-theme="world-mint"] .world-marker {
|
|
display: inline-block;
|
|
width: 14px; height: 14px;
|
|
background: var(--accent);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ─── atlas chapter dot ──────────────────────────────────────── */
|
|
body[data-theme="atlas"] .atlas-dot {
|
|
display: inline-block;
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
margin-right: 12px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ─── bluehouse gradient card ────────────────────────────────── */
|
|
body[data-theme="bluehouse"] .bh-card {
|
|
border-radius: 24px;
|
|
padding: clamp(28px, 3vw, 48px);
|
|
aspect-ratio: 4 / 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
body[data-theme="bluehouse"] .bh-card.peach {
|
|
background: var(--card-peach);
|
|
color: #1a0e08;
|
|
}
|
|
body[data-theme="bluehouse"] .bh-card.coral {
|
|
background: linear-gradient(135deg, var(--accent-2), var(--accent));
|
|
color: #ffffff;
|
|
}
|
|
body[data-theme="bluehouse"] .bh-card.lavender {
|
|
background: linear-gradient(180deg, var(--card-lavender), #8faad8);
|
|
color: #0b1524;
|
|
}
|
|
|
|
/* ─── deck chrome (counter, progress, hint) ──────────────────── */
|
|
.deck-counter {
|
|
position: fixed;
|
|
bottom: 24px; right: 32px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
padding: 6px 12px;
|
|
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
|
border: 1px solid var(--border);
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted);
|
|
z-index: 10;
|
|
}
|
|
.deck-hint {
|
|
position: fixed;
|
|
bottom: 24px; left: 32px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
letter-spacing: 0.04em;
|
|
z-index: 10;
|
|
}
|
|
.deck-progress {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
width: 0;
|
|
z-index: 10;
|
|
transition: width 0.18s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-theme="helix">
|
|
<!--
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ Set data-theme on <body> above ONCE. Never override per-slide. │
|
|
│ Paste layouts from references/layouts.md between this comment │
|
|
│ and the chrome divs below. │
|
|
│ │
|
|
│ Every slide needs: │
|
|
│ • class="slide" + optional "center" │
|
|
│ • data-screen-label="NN Name" │
|
|
└─────────────────────────────────────────────────────────────────┘
|
|
-->
|
|
|
|
<section class="slide center" data-screen-label="01 Cover">
|
|
<div class="meta-bar">
|
|
<span>[REPLACE] brand · context</span>
|
|
<span>[REPLACE] page / total</span>
|
|
</div>
|
|
<div>
|
|
<p class="eyebrow" style="margin-bottom: 24px;">[REPLACE] Eyebrow · season / no.</p>
|
|
<h1 class="h-hero">[REPLACE] The cover headline.</h1>
|
|
<p class="lead" style="margin-top: 24px;">[REPLACE] One subhead — concrete, not corporate.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" data-screen-label="02 Body">
|
|
<div class="meta-bar">
|
|
<span>[REPLACE] brand · section</span>
|
|
<span>02</span>
|
|
</div>
|
|
<div style="margin-top: auto; margin-bottom: auto;">
|
|
<p class="eyebrow" style="margin-bottom: 24px;">[REPLACE] Section eyebrow</p>
|
|
<h2 class="h-xl" style="max-width: 16ch;">[REPLACE] Body-slide headline.</h2>
|
|
<p class="lead" style="margin-top: 20px;">[REPLACE] Two sentences explaining the idea. No more.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide center" data-screen-label="03 Closing">
|
|
<div class="meta-bar">
|
|
<span>[REPLACE] brand</span>
|
|
<span>[REPLACE] end</span>
|
|
</div>
|
|
<div>
|
|
<p class="eyebrow" style="margin-bottom: 24px;">[REPLACE] Eyebrow</p>
|
|
<h2 class="h-hero">[REPLACE] The take-away.</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- chrome (do not move) -->
|
|
<div class="deck-progress" id="deck-progress" aria-hidden></div>
|
|
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
|
<div class="deck-hint">← / → · scroll · swipe</div>
|
|
|
|
<script>
|
|
/*
|
|
Five hard rules for deck nav inside an iframe.
|
|
Verified by skills/simple-deck — do not rewrite.
|
|
|
|
1. Detect the real scroller — body OR documentElement.
|
|
2. Listen for scroll on BOTH window and document, capture phase.
|
|
3. Listen for keydown on BOTH window and document, capture phase.
|
|
4. Auto-focus body so arrow keys work without an upfront click.
|
|
5. Never use Element.scrollIntoView — yanks host page.
|
|
*/
|
|
(function () {
|
|
var slides = document.querySelectorAll('.slide');
|
|
var counter = document.getElementById('deck-counter');
|
|
var progress = document.getElementById('deck-progress');
|
|
var KEY = 'od-deck-pos:' + (location.pathname || '/');
|
|
var active = 0;
|
|
|
|
function scroller() {
|
|
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
|
return document.scrollingElement || document.documentElement;
|
|
}
|
|
function setActive(i) {
|
|
active = i;
|
|
if (counter) counter.textContent = (i + 1) + ' / ' + slides.length;
|
|
if (progress) progress.style.width = (((i + 1) / slides.length) * 100) + '%';
|
|
try { localStorage.setItem(KEY, String(i)); } catch (_) {}
|
|
}
|
|
function go(i) {
|
|
var next = Math.max(0, Math.min(slides.length - 1, i));
|
|
setActive(next);
|
|
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
|
}
|
|
function syncFromScroll() {
|
|
var i = Math.round(scroller().scrollLeft / window.innerWidth);
|
|
if (i !== active && i >= 0 && i < slides.length) setActive(i);
|
|
}
|
|
function onKey(e) {
|
|
var t = e.target;
|
|
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
|
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
|
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
|
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
|
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
|
}
|
|
|
|
window.addEventListener('keydown', onKey, true);
|
|
document.addEventListener('keydown', onKey, true);
|
|
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
|
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
|
|
|
document.body.setAttribute('tabindex', '-1');
|
|
document.body.style.outline = 'none';
|
|
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
|
document.addEventListener('mousedown', focusDeck);
|
|
window.addEventListener('load', focusDeck);
|
|
focusDeck();
|
|
|
|
try {
|
|
var saved = parseInt(localStorage.getItem(KEY) || '0', 10);
|
|
if (!isNaN(saved) && saved >= 0 && saved < slides.length) {
|
|
setActive(saved);
|
|
scroller().scrollTo({ left: saved * window.innerWidth, behavior: 'instant' });
|
|
} else {
|
|
setActive(0);
|
|
}
|
|
} catch (_) { setActive(0); }
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|