269 lines
10 KiB
HTML
269 lines
10 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title><!-- SLOT: deck title --></title>
|
|||
|
|
<style>
|
|||
|
|
/* ===========================================================
|
|||
|
|
Deck framework — DO NOT EDIT the rules in this <style> block.
|
|||
|
|
Edit only inside the second <style> block below (per-deck
|
|||
|
|
styles) and inside <section class="slide"> bodies.
|
|||
|
|
|
|||
|
|
Centering uses the bulletproof pattern:
|
|||
|
|
position: absolute; top: 50%; left: 50%;
|
|||
|
|
transform: translate(-50%, -50%) scale(--deck-scale);
|
|||
|
|
JS only updates the CSS variable. No grid, no flex
|
|||
|
|
centering, no transform-origin tricks. This works inside
|
|||
|
|
the OD viewer's nested transform wrapper at any zoom.
|
|||
|
|
=========================================================== */
|
|||
|
|
:root {
|
|||
|
|
/* SLOT: theme tokens — the only top-level CSS the agent edits.
|
|||
|
|
Add or override --bg / --fg / --accent / --shell / etc. here. */
|
|||
|
|
--bg: #ffffff;
|
|||
|
|
--fg: #1c1b1a;
|
|||
|
|
--muted: #6b6964;
|
|||
|
|
--accent: #c96442;
|
|||
|
|
--shell: #08090d;
|
|||
|
|
--deck-scale: 1;
|
|||
|
|
}
|
|||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
html, body {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: var(--shell);
|
|||
|
|
color: var(--fg);
|
|||
|
|
font: 18px/1.5 -apple-system, system-ui, sans-serif;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
}
|
|||
|
|
.deck-stage {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 1920px;
|
|||
|
|
height: 1080px;
|
|||
|
|
background: var(--bg);
|
|||
|
|
transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
|
|||
|
|
transform-origin: center;
|
|||
|
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.slide {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
display: none;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.slide.active { display: flex; }
|
|||
|
|
|
|||
|
|
/* Chrome — counter + prev/next live outside the scaled stage so
|
|||
|
|
they stay legible at any viewport size. Do not move them inside
|
|||
|
|
.deck-stage. */
|
|||
|
|
.deck-counter {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 22px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
background: rgba(10, 14, 26, 0.92);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
-webkit-backdrop-filter: blur(10px);
|
|||
|
|
padding: 6px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
color: #fff;
|
|||
|
|
font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|||
|
|
letter-spacing: 0.18em;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
.deck-counter button {
|
|||
|
|
width: 36px; height: 36px;
|
|||
|
|
background: transparent;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 0;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 1;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
transition: background 0.15s;
|
|||
|
|
}
|
|||
|
|
.deck-counter button:hover { background: rgba(255, 255, 255, 0.12); }
|
|||
|
|
.deck-counter button[disabled] { opacity: 0.3; cursor: default; }
|
|||
|
|
.deck-counter .deck-count {
|
|||
|
|
padding: 0 14px;
|
|||
|
|
letter-spacing: 0.22em;
|
|||
|
|
}
|
|||
|
|
.deck-counter .deck-count .total { color: rgba(255, 255, 255, 0.5); }
|
|||
|
|
.deck-hint {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 26px;
|
|||
|
|
right: 28px;
|
|||
|
|
color: rgba(255, 255, 255, 0.4);
|
|||
|
|
font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|||
|
|
letter-spacing: 0.2em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
z-index: 999;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Print / PDF stitching — every slide stacks top-to-bottom, one per
|
|||
|
|
page. The viewer's "Share → PDF" relies on this; do not remove. */
|
|||
|
|
@media print {
|
|||
|
|
@page { size: 1920px 1080px; margin: 0; }
|
|||
|
|
html, body {
|
|||
|
|
width: 1920px !important;
|
|||
|
|
height: auto !important;
|
|||
|
|
overflow: visible !important;
|
|||
|
|
background: #fff !important;
|
|||
|
|
}
|
|||
|
|
.deck-stage {
|
|||
|
|
position: static !important;
|
|||
|
|
top: auto !important;
|
|||
|
|
left: auto !important;
|
|||
|
|
transform: none !important;
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
width: 1920px !important;
|
|||
|
|
height: auto !important;
|
|||
|
|
overflow: visible !important;
|
|||
|
|
}
|
|||
|
|
.slide {
|
|||
|
|
display: flex !important;
|
|||
|
|
position: relative !important;
|
|||
|
|
inset: auto !important;
|
|||
|
|
width: 1920px !important;
|
|||
|
|
height: 1080px !important;
|
|||
|
|
page-break-after: always;
|
|||
|
|
break-after: page;
|
|||
|
|
}
|
|||
|
|
.slide:last-child { page-break-after: auto; break-after: auto; }
|
|||
|
|
.deck-counter, .deck-hint { display: none !important; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
/* SLOT: per-deck styles — typography, layout helpers, slide variants.
|
|||
|
|
Add classes used by slide content below, e.g. .title, .big-stat,
|
|||
|
|
.grid-3, .quote-mark. Do NOT redefine .deck-stage, .slide,
|
|||
|
|
.deck-counter, .deck-hint, or anything inside @media print. */
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="deck-stage" id="deck-stage">
|
|||
|
|
|
|||
|
|
<!-- SLOT: slides — one <section class="slide"> per slide. The first
|
|||
|
|
slide MUST have class="slide active"; the rest just "slide". The
|
|||
|
|
framework auto-counts them and toggles .active as the user
|
|||
|
|
navigates. -->
|
|||
|
|
|
|||
|
|
<section class="slide active" data-screen-label="01 Title">
|
|||
|
|
<!-- SLOT: slide 1 content -->
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="slide" data-screen-label="02">
|
|||
|
|
<!-- SLOT: slide 2 content -->
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ... add as many <section class="slide"> blocks as the brief asks
|
|||
|
|
for. The first one is .active; the rest are not. -->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Framework chrome — DO NOT EDIT below this line. -->
|
|||
|
|
<nav class="deck-counter" role="navigation" aria-label="Deck navigation">
|
|||
|
|
<button type="button" id="deck-prev" aria-label="Previous slide">‹</button>
|
|||
|
|
<span class="deck-count"><span id="deck-cur">01</span> <span class="total">/ <span id="deck-total">01</span></span></span>
|
|||
|
|
<button type="button" id="deck-next" aria-label="Next slide">›</button>
|
|||
|
|
</nav>
|
|||
|
|
<div class="deck-hint">← / → · space</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
(function () {
|
|||
|
|
var root = document.documentElement;
|
|||
|
|
var slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
|
|||
|
|
var prev = document.getElementById('deck-prev');
|
|||
|
|
var next = document.getElementById('deck-next');
|
|||
|
|
var cur = document.getElementById('deck-cur');
|
|||
|
|
var total = document.getElementById('deck-total');
|
|||
|
|
var STORE = 'deck:idx:' + (location.pathname || '/');
|
|||
|
|
var idx = 0;
|
|||
|
|
|
|||
|
|
// ---- scale-to-fit ---------------------------------------------------
|
|||
|
|
// Update one CSS variable; the stage uses
|
|||
|
|
// transform: translate(-50%, -50%) scale(var(--deck-scale))
|
|||
|
|
// which is bulletproof inside the OD viewer's nested transform
|
|||
|
|
// wrapper. No element transforms set in JS — keeps the math local
|
|||
|
|
// to CSS and avoids order-of-operations bugs.
|
|||
|
|
function fit() {
|
|||
|
|
var sw = window.innerWidth;
|
|||
|
|
var sh = window.innerHeight;
|
|||
|
|
if (sw <= 0 || sh <= 0) return;
|
|||
|
|
var pad = 24;
|
|||
|
|
var s = Math.min((sw - pad) / 1920, (sh - pad) / 1080);
|
|||
|
|
if (!isFinite(s) || s <= 0) s = 1;
|
|||
|
|
root.style.setProperty('--deck-scale', String(s));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- navigation -----------------------------------------------------
|
|||
|
|
function pad2(n) { return (n < 10 ? '0' : '') + n; }
|
|||
|
|
function paint() {
|
|||
|
|
slides.forEach(function (el, i) { el.classList.toggle('active', i === idx); });
|
|||
|
|
if (cur) cur.textContent = pad2(idx + 1);
|
|||
|
|
if (total) total.textContent = pad2(slides.length);
|
|||
|
|
if (prev) prev.toggleAttribute('disabled', idx <= 0);
|
|||
|
|
if (next) next.toggleAttribute('disabled', idx >= slides.length - 1);
|
|||
|
|
}
|
|||
|
|
function go(i) {
|
|||
|
|
idx = Math.max(0, Math.min(slides.length - 1, i));
|
|||
|
|
paint();
|
|||
|
|
try { localStorage.setItem(STORE, String(idx)); } catch (_) {}
|
|||
|
|
}
|
|||
|
|
function onKey(e) {
|
|||
|
|
var t = e.target;
|
|||
|
|
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
|
|||
|
|
if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); go(idx + 1); }
|
|||
|
|
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(idx - 1); }
|
|||
|
|
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
|||
|
|
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
|||
|
|
}
|
|||
|
|
// Capture phase + listen on both targets — inside the OD iframe,
|
|||
|
|
// focus may be on window OR document; a single non-capture listener
|
|||
|
|
// silently misses presses.
|
|||
|
|
window.addEventListener('keydown', onKey, true);
|
|||
|
|
document.addEventListener('keydown', onKey, true);
|
|||
|
|
if (prev) prev.addEventListener('click', function () { go(idx - 1); });
|
|||
|
|
if (next) next.addEventListener('click', function () { go(idx + 1); });
|
|||
|
|
|
|||
|
|
// Auto-focus body so arrow keys work without an initial click.
|
|||
|
|
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);
|
|||
|
|
|
|||
|
|
// Restore last position.
|
|||
|
|
try {
|
|||
|
|
var saved = parseInt(localStorage.getItem(STORE) || '0', 10);
|
|||
|
|
if (!isNaN(saved) && saved >= 0 && saved < slides.length) idx = saved;
|
|||
|
|
} catch (_) {}
|
|||
|
|
|
|||
|
|
// Initial fit + react to host resizes. ResizeObserver catches the
|
|||
|
|
// common "iframe was 0×0 at script run, then expanded" case where
|
|||
|
|
// the resize event never fires.
|
|||
|
|
window.addEventListener('resize', fit);
|
|||
|
|
if (typeof ResizeObserver === 'function') {
|
|||
|
|
try { new ResizeObserver(fit).observe(document.documentElement); } catch (_) {}
|
|||
|
|
}
|
|||
|
|
fit();
|
|||
|
|
paint();
|
|||
|
|
focusDeck();
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|