Zakaria
a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
500 lines
24 KiB
HTML
500 lines
24 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 solves five iframe-specific
|
||
bugs (real scroller, dual listeners, auto-focus, no scrollIntoView,
|
||
position persistence). See `skills/simple-deck` for the same pattern.
|
||
-->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Atlas Quarterly — Chapter 01</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="atlas">
|
||
<!-- example: atlas · illustrative content only. Numbers are synthetic. -->
|
||
|
||
<section class="slide" data-screen-label="01 Chapter 01">
|
||
<div class="meta-bar">
|
||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · CHAPTER 01</span>
|
||
<span>04 / 24</span>
|
||
</div>
|
||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; margin-top: clamp(24px, 3vh, 40px);">
|
||
<div>
|
||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 32px;">— CHAPTER ONE — A CENTURY OF EMPIRES</p>
|
||
<h1 class="h-hero" style="max-width: 12ch;">The Imperial<br>Age<span style="color: var(--accent);">.</span></h1>
|
||
<p class="lead" style="margin-top: 28px; max-width: 44ch;">Between the Congress of Vienna and the guns of August, the world was redrawn in the language of empire — charted, claimed, and catalogued by a handful of capitals that believed history belonged to them.</p>
|
||
</div>
|
||
<div style="border: 1px solid var(--border); padding: 12px; position: relative;">
|
||
<span style="position: absolute; top: 24px; left: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.45); padding: 4px 10px;">PLATE I</span>
|
||
<span style="position: absolute; top: 24px; right: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.7); padding: 4px 10px;"><span class="atlas-dot" style="width: 6px; height: 6px; margin-right: 6px;"></span>EXHIBIT 04.B</span>
|
||
<div style="aspect-ratio: 4/3; background: linear-gradient(180deg, #2a2620 0%, #161311 100%); display: flex; align-items: center; justify-content: center; color: #4a463f; font-family: var(--font-serif-display); font-size: 14px;">[archival photograph]</div>
|
||
<div style="padding: 14px 4px 4px; color: var(--fg); font-size: 14px;">The west colonnade at first light.</div>
|
||
<div style="padding: 0 4px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;">PHOTOGRAPHED C. 1887 · ARCHIVE 0341.B</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr) 2fr; gap: clamp(16px, 2vw, 32px); border-top: 1px solid var(--border); padding-top: clamp(16px, 2vh, 24px); margin-top: auto;">
|
||
<div><p class="eyebrow" style="margin-bottom: 8px;">PERIOD</p><div style="font-family: var(--font-display); font-size: 28px; font-weight: 500;">1815–1914</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">Vienna to Sarajevo — the long peace of empire.</div></div>
|
||
<div><p class="eyebrow" style="margin-bottom: 8px;">REACH</p><div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--accent);">84%</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">of the globe under colonial or imperial rule by 1914.</div></div>
|
||
<div><p class="eyebrow" style="margin-bottom: 8px;">CAPITALS</p><div style="font-family: var(--font-display); font-size: 28px; font-weight: 500;">Six</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">London · Paris · Berlin · Vienna · St Petersburg · Constantinople.</div></div>
|
||
<div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-screen-label="02 The Pivot">
|
||
<div class="meta-bar">
|
||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · CHAPTER 01</span>
|
||
<span>05 / 24</span>
|
||
</div>
|
||
<div style="margin-top: clamp(32px, 4vh, 48px);">
|
||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 28px;">— SECTION TWO — THE BERLIN CONFERENCE</p>
|
||
<h2 class="h-xl" style="max-width: 22ch;">Fourteen men, one table, one winter — and the map of Africa was rewritten without a single African in the room<span style="color: var(--accent);">.</span></h2>
|
||
</div>
|
||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: end; margin-top: clamp(48px, 6vh, 96px);">
|
||
<div>
|
||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 10px;">NOV 1884</p>
|
||
<div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2;">The summit convenes in Berlin under Bismarck.</div>
|
||
</div>
|
||
<div>
|
||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 10px;">FEB 1885</p>
|
||
<div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2;">The General Act is signed. A continent is partitioned.</div>
|
||
</div>
|
||
<div>
|
||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 10px;">JUL 1914</p>
|
||
<div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2;">The arrangement dies at Sarajevo, along with the century that drew it.</div>
|
||
</div>
|
||
</div>
|
||
<div style="position: absolute; bottom: 0; left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: flex; align-items: center; gap: 12px; padding-bottom: 20px;">
|
||
<div style="flex: 1; height: 1px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: -1px; height: 3px; width: 21%; background: var(--accent);"></div></div>
|
||
<span style="font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em;">05 / 24</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide center" data-screen-label="03 Plate">
|
||
<div class="meta-bar">
|
||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · INTERMEZZO</span>
|
||
<span>06 / 24</span>
|
||
</div>
|
||
<div>
|
||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 28px;">PLATE III</p>
|
||
<h2 class="h-hero" style="max-width: 14ch;">A century ends<br>with a gunshot<span style="color: var(--accent);">.</span></h2>
|
||
<p class="lead" style="margin-top: 28px; max-width: 50ch;">What began as cartography ended as catastrophe. The map outlived the men who drew it by exactly one generation.</p>
|
||
</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>
|