| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN" data-theme="aurora"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width,initial-scale=1"> |
| 6 | <title>html-ppt · Demo Deck</title> |
| 7 | <link rel="stylesheet" href="../../assets/fonts.css"> |
| 8 | <link rel="stylesheet" href="../../assets/base.css"> |
| 9 | <link rel="stylesheet" id="theme-link" href="../../assets/themes/aurora.css"> |
| 10 | <link rel="stylesheet" href="../../assets/animations/animations.css"> |
| 11 | <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script> |
| 12 | </head> |
| 13 | <body data-themes="aurora,minimal-white,editorial-serif,tokyo-night,catppuccin-mocha,xiaohongshu-white,neo-brutalism,sunset-warm" data-theme-base="../../assets/themes/"> |
| 14 | |
| 15 | <div class="deck"> |
| 16 | |
| 17 | <!-- 1. Cover --> |
| 18 | <section class="slide" data-title="Cover"> |
| 19 | <div class="deck-header"><span class="eyebrow">Tech sharing · 2026-04-15</span><span class="eyebrow">html-ppt</span></div> |
| 20 | <p class="kicker">Keynote · Demo</p> |
| 21 | <h1 class="h1 anim-rise-in" data-anim="rise-in">做一份<span class="gradient-text">像杂志</span>一样的<br>技术分享稿</h1> |
| 22 | <p class="lede">24 主题 · 30 版式 · 25 动效 · 零构建</p> |
| 23 | <div class="row wrap mt-l" style="gap:8px"> |
| 24 | <span class="pill pill-accent">tokens</span> |
| 25 | <span class="pill">keyboard first</span> |
| 26 | <span class="pill">PNG export</span> |
| 27 | <span class="pill">CN + EN</span> |
| 28 | </div> |
| 29 | <div class="deck-footer"><span class="dim2">lewis · sudolewis@gmail.com</span><span class="slide-number" data-current="1" data-total="8"></span></div> |
| 30 | <div class="notes">Hi，今天我给大家演示一下 html-ppt 这套演讲系统是怎么工作的。这份 demo 本身就是用它做出来的——每一张幻灯片都只是几行 HTML + 一个 class。</div> |
| 31 | </section> |
| 32 | |
| 33 | <!-- 2. TOC --> |
| 34 | <section class="slide" data-title="Agenda"> |
| 35 | <p class="kicker">Agenda</p> |
| 36 | <h2 class="h2">今天 10 分钟，讲三件事</h2> |
| 37 | <div class="grid g3 mt-l anim-stagger-list" data-anim-target> |
| 38 | <div class="card card-accent"><h4>① 为什么</h4><p class="dim">每次做 PPT 都在重复劳动，而这件事 99% 可以模板化。</p></div> |
| 39 | <div class="card card-accent"><h4>② 怎么做</h4><p class="dim">tokens + layouts + animations，三层分离。</p></div> |
| 40 | <div class="card card-accent"><h4>③ 效果</h4><p class="dim">同一份 deck，一键切 24 种主题。</p></div> |
| 41 | </div> |
| 42 | <div class="deck-footer"><span class="dim2">agenda</span><span class="slide-number" data-current="2" data-total="8"></span></div> |
| 43 | <div class="notes">三段式结构——Why / How / Result。这是最稳的讲法。</div> |
| 44 | </section> |
| 45 | |
| 46 | <!-- 3. Big quote --> |
| 47 | <section class="slide center tc" data-title="Quote"> |
| 48 | <div style="max-width:1000px"> |
| 49 | <div class="serif" style="font-size:120px;line-height:.9;color:var(--accent);opacity:.7">"</div> |
| 50 | <blockquote class="serif anim-fade-up" data-anim="fade-up" style="font-size:52px;line-height:1.3;margin:-30px 0 18px;font-weight:600;font-style:italic"> |
| 51 | 好的演讲稿是写出来的，<br>不是「做」出来的。 |
| 52 | </blockquote> |
| 53 | <p class="dim" style="font-size:18px;letter-spacing:.1em">— 每一个被 PPT 折磨过的人</p> |
| 54 | </div> |
| 55 | <div class="deck-footer"><span class="dim2">quote</span><span class="slide-number" data-current="3" data-total="8"></span></div> |
| 56 | <div class="notes">这里停一秒。让这句话自己说话。</div> |
| 57 | </section> |
| 58 | |
| 59 | <!-- 4. Stat --> |
| 60 | <section class="slide center tc" data-title="Stat"> |
| 61 | <div> |
| 62 | <p class="kicker">The result</p> |
| 63 | <div style="font-size:240px;line-height:1;font-weight:900"> |
| 64 | <span class="counter gradient-text" data-to="92">0</span><span class="gradient-text">%</span> |
| 65 | </div> |
| 66 | <h3 class="mt-s">你花在 PPT 上的时间可以被省下</h3> |
| 67 | <p class="lede" style="margin:14px auto 0">10 份真实 deck 的平均测试数据。</p> |
| 68 | </div> |
| 69 | <div class="deck-footer"><span class="dim2">proof</span><span class="slide-number" data-current="4" data-total="8"></span></div> |
| 70 | <div class="notes">强调：数据来源——自己真实的 10 个 deck。</div> |
| 71 | </section> |
| 72 | |
| 73 | <!-- 5. Two column --> |
| 74 | <section class="slide" data-title="Tokens"> |
| 75 | <p class="kicker">How · 核心思路</p> |
| 76 | <h2 class="h2">把「看起来像什么」收进 <code>:root</code></h2> |
| 77 | <div class="grid g2 mt-l" style="align-items:start"> |
| 78 | <div class="card anim-fade-left" data-anim="fade-left"> |
| 79 | <h3>概念</h3> |
| 80 | <p class="dim">每一种视觉属性——颜色、字体、圆角、阴影——都变成语义变量。</p> |
| 81 | <ul class="mt-m"> |
| 82 | <li><code>--text-1</code> / <code>--text-2</code> / <code>--text-3</code></li> |
| 83 | <li><code>--surface</code> / <code>--surface-2</code></li> |
| 84 | <li><code>--accent</code> / <code>--accent-2</code> / <code>--accent-3</code></li> |
| 85 | <li><code>--radius</code> / <code>--shadow</code> / <code>--grad</code></li> |
| 86 | </ul> |
| 87 | </div> |
| 88 | <div class="card anim-fade-right" data-anim="fade-right"> |
| 89 | <h3>示例</h3> |
| 90 | <pre class="mono" style="font-size:13px;background:var(--surface-2);padding:16px;border-radius:var(--radius-sm);overflow:auto;margin:0"> |
| 91 | /* assets/themes/aurora.css */ |
| 92 | :root { |
| 93 | --bg: #06091c; |
| 94 | --text-1: #e8f0ff; |
| 95 | --accent: #5ef2c6; |
| 96 | --accent-2: #7aa2ff; |
| 97 | --accent-3: #c984ff; |
| 98 | --radius: 20px; |
| 99 | }</pre> |
| 100 | <p class="dim mt-m" style="font-size:13px">——整个 aurora 主题就这么大。</p> |
| 101 | </div> |
| 102 | </div> |
| 103 | <div class="deck-footer"><span class="dim2">how</span><span class="slide-number" data-current="5" data-total="8"></span></div> |
| 104 | <div class="notes">关键是：base.css 只认变量名，不认具体色值。换主题 = 换一份变量。</div> |
| 105 | </section> |
| 106 | |
| 107 | <!-- 6. Chart --> |
| 108 | <section class="slide" data-title="Chart"> |
| 109 | <p class="kicker">Numbers · 实际效果</p> |
| 110 | <h2 class="h2">做 deck 的时间分布，使用前/使用后</h2> |
| 111 | <div class="card mt-l" style="height:440px;padding:24px"><canvas id="chart"></canvas></div> |
| 112 | <div class="deck-footer"><span class="dim2">data</span><span class="slide-number" data-current="6" data-total="8"></span></div> |
| 113 | <div class="notes">使用后，「写内容」时间占比大幅上升，其他一切下降——这正是我们想要的。</div> |
| 114 | </section> |
| 115 | |
| 116 | <!-- 7. CTA --> |
| 117 | <section class="slide center tc" data-title="CTA"> |
| 118 | <div style="max-width:920px"> |
| 119 | <p class="kicker">Your turn</p> |
| 120 | <h1 class="h1 anim-rise-in" data-anim="rise-in" style="font-size:96px"><span class="gradient-text">开始</span>做你的第一份</h1> |
| 121 | <p class="lede" style="margin:14px auto 30px">复制一份 deck，换你的内容，按 <b>T</b> 选一个最对味的主题，讲完还能一键导 PNG。</p> |
| 122 | <div class="row" style="justify-content:center;gap:14px"> |
| 123 | <div class="card" style="padding:18px 26px"><code>./scripts/new-deck.sh my-talk</code></div> |
| 124 | </div> |
| 125 | <p class="dim2 mt-l" style="font-size:14px">←/→ 翻页 · T 主题 · A 动效 · F 全屏 · O 概览 · S 备注</p> |
| 126 | </div> |
| 127 | <div class="deck-footer"><span class="dim2">cta</span><span class="slide-number" data-current="7" data-total="8"></span></div> |
| 128 | <div class="notes">最后给一个具体的行动：一条命令。别停留在「我回去试试」。</div> |
| 129 | </section> |
| 130 | |
| 131 | <!-- 8. Thanks --> |
| 132 | <section class="slide center tc" data-title="Thanks"> |
| 133 | <div> |
| 134 | <div class="anim-confetti-burst" style="display:inline-block;padding:20px"></div> |
| 135 | <h1 class="h1" style="font-size:180px;line-height:1"><span class="gradient-text">Thanks</span></h1> |
| 136 | <p class="lede">lewis · sudolewis@gmail.com · MIT 2026</p> |
| 137 | </div> |
| 138 | <div class="deck-footer"><span class="dim2">end</span><span class="slide-number" data-current="8" data-total="8"></span></div> |
| 139 | <div class="notes">谢谢大家。Q&A 时间。</div> |
| 140 | </section> |
| 141 | |
| 142 | </div> |
| 143 | <script src="../../assets/runtime.js"></script> |
| 144 | <script> |
| 145 | addEventListener('DOMContentLoaded',()=>{ |
| 146 | const css=getComputedStyle(document.documentElement); |
| 147 | const a1=css.getPropertyValue('--accent').trim(); |
| 148 | const a2=css.getPropertyValue('--accent-2').trim(); |
| 149 | const text2=css.getPropertyValue('--text-2').trim(); |
| 150 | const border=css.getPropertyValue('--border').trim(); |
| 151 | new Chart(document.getElementById('chart'),{type:'bar', |
| 152 | data:{labels:['写内容','挑版式','调样式','出图','动效'], |
| 153 | datasets:[ |
| 154 | {label:'使用前 (分钟)',data:[92,48,36,22,14],backgroundColor:a2,borderRadius:6}, |
| 155 | {label:'使用后 (分钟)',data:[18,3,2,1,1],backgroundColor:a1,borderRadius:6}]}, |
| 156 | options:{plugins:{legend:{labels:{color:text2}}}, |
| 157 | scales:{x:{ticks:{color:text2},grid:{color:border}}, |
| 158 | y:{ticks:{color:text2},grid:{color:border}}}}}); |
| 159 | }); |
| 160 | </script> |
| 161 | </body></html> |
| 162 |