| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN" data-theme="minimal-white"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> |
| 5 | <title>html-ppt · Deck</title> |
| 6 | <link rel="stylesheet" href="../assets/fonts.css"> |
| 7 | <link rel="stylesheet" href="../assets/base.css"> |
| 8 | <link rel="stylesheet" id="theme-link" href="../assets/themes/minimal-white.css"> |
| 9 | <link rel="stylesheet" href="../assets/animations/animations.css"> |
| 10 | </head> |
| 11 | <body data-themes="minimal-white,editorial-serif,soft-pastel,arctic-cool,sunset-warm,catppuccin-mocha,tokyo-night,aurora,xiaohongshu-white,neo-brutalism" data-theme-base="../assets/themes/"> |
| 12 | <div class="deck"> |
| 13 | |
| 14 | <!-- 1. Cover --> |
| 15 | <section class="slide" data-title="Cover"> |
| 16 | <p class="kicker">html-ppt · 2026</p> |
| 17 | <h1 class="h1 anim-fade-up" data-anim="fade-up">用模板，<span class="gradient-text">换主题</span><br>讲任何事情</h1> |
| 18 | <p class="lede">24 themes · 30 layouts · 25 animations · zero build</p> |
| 19 | <div class="deck-footer"><span class="dim2">lewis</span><span class="slide-number" data-current="1" data-total="6"></span></div> |
| 20 | <div class="notes">这是一个最小可用的 deck。你可以复制这个文件作为新 deck 的起点。</div> |
| 21 | </section> |
| 22 | |
| 23 | <!-- 2. TOC --> |
| 24 | <section class="slide" data-title="目录"> |
| 25 | <p class="kicker">Agenda</p> |
| 26 | <h2 class="h2">我们会讲三件事</h2> |
| 27 | <div class="grid g3 mt-l anim-stagger-list" data-anim-target> |
| 28 | <div class="card"><h4>01 · Tokens</h4><p class="dim">把颜色/字体/圆角收进 CSS 变量。</p></div> |
| 29 | <div class="card"><h4>02 · Layouts</h4><p class="dim">30 种可复用单页。</p></div> |
| 30 | <div class="card"><h4>03 · Runtime</h4><p class="dim">键盘驱动、按 T 换主题。</p></div> |
| 31 | </div> |
| 32 | </section> |
| 33 | |
| 34 | <!-- 3. Stat --> |
| 35 | <section class="slide center tc" data-title="Stat"> |
| 36 | <div> |
| 37 | <p class="kicker">Result</p> |
| 38 | <div style="font-size:220px;font-weight:900;line-height:1"><span class="counter gradient-text" data-to="92">0</span><span class="gradient-text">%</span></div> |
| 39 | <h3>的准备时间被省下</h3> |
| 40 | </div> |
| 41 | </section> |
| 42 | |
| 43 | <!-- 4. Two column --> |
| 44 | <section class="slide" data-title="Tokens"> |
| 45 | <p class="kicker">Under the hood</p> |
| 46 | <h2 class="h2">换主题 = 换一组变量</h2> |
| 47 | <div class="grid g2 mt-l"> |
| 48 | <div class="card"><h4>语义变量</h4><p class="dim">写 <code>var(--surface)</code>，不写具体色值。</p></div> |
| 49 | <div class="card"><h4>一键切换</h4><p class="dim">按 T 循环所有主题——所有 slide 同步更新。</p></div> |
| 50 | </div> |
| 51 | </section> |
| 52 | |
| 53 | <!-- 5. CTA --> |
| 54 | <section class="slide center tc" data-title="CTA"> |
| 55 | <div> |
| 56 | <p class="kicker">Your turn</p> |
| 57 | <h1 class="h1 anim-rise-in" data-anim="rise-in">开始做你的 deck</h1> |
| 58 | <p class="lede" style="margin:16px auto">按 ← → 翻页 · T 切主题 · A 切动效 · F 全屏 · O 概览 · S 备注</p> |
| 59 | </div> |
| 60 | </section> |
| 61 | |
| 62 | <!-- 6. Thanks --> |
| 63 | <section class="slide center tc" data-title="Thanks"> |
| 64 | <h1 class="h1" style="font-size:160px;line-height:1"><span class="gradient-text">Thanks</span></h1> |
| 65 | <p class="lede">lewis · sudolewis@gmail.com</p> |
| 66 | </section> |
| 67 | </div> |
| 68 | <script src="../assets/runtime.js"></script> |
| 69 | </body></html> |
| 70 |