24 lines
5.8 KiB
HTML
24 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>From signal to decision — offline HTML starter</title>
|
|
<style>/* REVEAL_CSS */</style><style>
|
|
/* FONT_CSS */
|
|
:root{--r-background-color:#101e25;--r-main-color:#f4f3ed;--ink:#f4f3ed;--muted:#b8c4c7;--bg:#101e25;--accent:#c5f27a;--line:#57717c}*{box-sizing:border-box}body.reveal-viewport{background:var(--bg);color:var(--ink)}.reveal{font-family:'Work Sans',sans-serif;font-size:28px}.reveal .slides{text-align:left}.reveal .slides>section{height:700px;padding:45px 48px}.eyebrow{color:var(--accent);font-size:20px;letter-spacing:.15em;text-transform:uppercase;margin:0 0 24px}h1{font-size:86px;line-height:1.05;letter-spacing:-.045em;margin:24px 0}h2{font-size:55px;line-height:1.1;margin:0 0 30px;letter-spacing:-.025em}p{line-height:1.5;max-width:1000px}.muted{color:var(--muted)}.big{font-size:38px;max-width:900px}.accent{color:var(--accent)}.rule{border-top:2px solid var(--line);padding-top:20px;margin-top:42px}button{font:inherit;color:var(--ink);background:#20343e;border:2px solid var(--line);padding:10px 16px;cursor:pointer;min-height:44px}button:hover,button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}button:focus-visible,[role=button]:focus-visible{outline:4px solid var(--accent);outline-offset:5px}.toolbar{position:fixed;right:22px;top:14px;z-index:30;display:flex;gap:12px;font:16px 'Work Sans',sans-serif}.toolbar button{font-size:16px}.reveal .slide-number{font:18px 'Work Sans';background:transparent;color:var(--muted);left:25px;right:auto;bottom:22px}.reveal .controls{color:var(--accent)}svg{width:100%;height:370px;overflow:visible}svg text{font-family:inherit;fill:var(--ink);font-size:24px;text-anchor:middle;dominant-baseline:middle}svg .edge{stroke:var(--line);stroke-width:3;fill:none}svg rect{fill:#20343e;stroke:var(--line);stroke-width:2}svg [role=button]{cursor:pointer}svg [aria-pressed=true] rect{stroke:var(--accent)}svg .hub{fill:var(--accent)}svg .hub-text{fill:var(--bg);font-weight:700}.detail{margin:5px 0;font-size:24px;min-height:40px}.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}.stage{border-top:3px solid var(--accent);padding-top:20px}.stage strong{font-size:36px}.stage p{font-size:25px}.dots{display:flex;gap:20px;margin:65px 0}.dot{width:70px;height:70px;background:var(--accent)}.ending{font-size:70px;line-height:1.12}.reveal .progress{color:var(--accent)}
|
|
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
|
|
@media print{.toolbar,.controls{display:none!important}.reveal .slides section [data-motion]{opacity:1!important;transform:none!important}}
|
|
</style></head><body>
|
|
<div class="toolbar"><button id="motion" aria-pressed="true">Motion on</button><button id="fullscreen" aria-pressed="false">Enter fullscreen</button></div>
|
|
<div class="reveal"><div class="slides">
|
|
<section id="signal"><p class="eyebrow">Original example · presentation-html</p><h1>From signal<br>to <span class="accent">decision.</span></h1><p class="big">Use structure to explain the system.<br>Use motion only to explain change.</p><p class="rule muted">Reveal.js 6.0.2 + Anime.js 4.5.0 · All assets embedded</p></section>
|
|
<section id="story"><p class="eyebrow">01 / Narrative</p><h2>One question. One visual answer.</h2><div class="stages"><div class="stage" data-motion><strong>Context</strong><p>What changed, and why does it matter?</p></div><div class="stage" data-motion><strong>Mechanism</strong><p>What connects the evidence to the choice?</p></div><div class="stage" data-motion><strong>Decision</strong><p>What should the audience do next?</p></div></div><p class="rule muted">Choose the slide count from the story—not a template quota.</p></section>
|
|
<section id="system"><p class="eyebrow">02 / Editable SVG + real interaction</p><h2>Keep the decision at the center.</h2>
|
|
<svg viewBox="0 0 1100 370" role="group" aria-label="Six evidence sources feed one decision"><g aria-hidden="true"><path class="edge" d="M250 65L550 185M550 65V185M850 65L550 185M250 305L550 185M550 305V185M850 305L550 185"/></g>
|
|
<rect class="hub" x="435" y="145" width="230" height="80"/><text class="hub-text" x="550" y="185">Decision</text>
|
|
<!-- NODES -->
|
|
</svg><p class="detail" id="detail" aria-live="polite">Select a source to reveal its role. Tab + Enter or Space also works.</p></section>
|
|
<section id="sequence"><p class="eyebrow">03 / Anime.js timeline</p><h2>Reveal dependency—not decoration.</h2><div class="stages"><div class="stage" data-motion><strong>Observe</strong><p>Make the signal visible.</p></div><div class="stage" data-motion><strong>Interpret</strong><p>Connect evidence and context.</p></div><div class="stage" data-motion><strong>Act</strong><p>Name the next reversible step.</p></div></div><p class="rule muted">A short, bounded sequence. No loops. No hidden final content.</p></section>
|
|
<section id="stagger"><p class="eyebrow">04 / Restrained stagger</p><h2>Make order perceptible.</h2><div class="dots" aria-hidden="true"><i class="dot" data-motion></i><i class="dot" data-motion></i><i class="dot" data-motion></i><i class="dot" data-motion></i><i class="dot" data-motion></i><i class="dot" data-motion></i></div><p class="big">The pattern is original. The technique is portable.</p><p class="muted">Reduced motion, print and revisit states show the complete result.</p></section>
|
|
<section id="decision"><p class="eyebrow">05 / Delivery gate</p><h2 class="ending">Test the exact file.<br>Inspect <span class="accent">every slide.</span></h2><p class="big">Offline. Readable. Keyboard-operable.<br>Then publish the immutable artifact.</p><p class="rule muted">← → Navigate · Esc Overview · F Fullscreen · Tab Focus</p></section>
|
|
</div></div><script>/* REVEAL_JS */</script><script>/* ANIME_JS */</script><script>/* APP_JS */</script>
|
|
<!-- LICENSES -->
|
|
</body></html>
|