162 lines
8.7 KiB
HTML
162 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="aurora">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>html-ppt · Demo Deck</title>
|
||
<link rel="stylesheet" href="../../assets/fonts.css">
|
||
<link rel="stylesheet" href="../../assets/base.css">
|
||
<link rel="stylesheet" id="theme-link" href="../../assets/themes/aurora.css">
|
||
<link rel="stylesheet" href="../../assets/animations/animations.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
||
</head>
|
||
<body data-themes="aurora,minimal-white,editorial-serif,tokyo-night,catppuccin-mocha,xiaohongshu-white,neo-brutalism,sunset-warm" data-theme-base="../../assets/themes/">
|
||
|
||
<div class="deck">
|
||
|
||
<!-- 1. Cover -->
|
||
<section class="slide" data-title="Cover">
|
||
<div class="deck-header"><span class="eyebrow">Tech sharing · 2026-04-15</span><span class="eyebrow">html-ppt</span></div>
|
||
<p class="kicker">Keynote · Demo</p>
|
||
<h1 class="h1 anim-rise-in" data-anim="rise-in">做一份<span class="gradient-text">像杂志</span>一样的<br>技术分享稿</h1>
|
||
<p class="lede">24 主题 · 30 版式 · 25 动效 · 零构建</p>
|
||
<div class="row wrap mt-l" style="gap:8px">
|
||
<span class="pill pill-accent">tokens</span>
|
||
<span class="pill">keyboard first</span>
|
||
<span class="pill">PNG export</span>
|
||
<span class="pill">CN + EN</span>
|
||
</div>
|
||
<div class="deck-footer"><span class="dim2">lewis · sudolewis@gmail.com</span><span class="slide-number" data-current="1" data-total="8"></span></div>
|
||
<div class="notes">Hi，今天我给大家演示一下 html-ppt 这套演讲系统是怎么工作的。这份 demo 本身就是用它做出来的——每一张幻灯片都只是几行 HTML + 一个 class。</div>
|
||
</section>
|
||
|
||
<!-- 2. TOC -->
|
||
<section class="slide" data-title="Agenda">
|
||
<p class="kicker">Agenda</p>
|
||
<h2 class="h2">今天 10 分钟，讲三件事</h2>
|
||
<div class="grid g3 mt-l anim-stagger-list" data-anim-target>
|
||
<div class="card card-accent"><h4>① 为什么</h4><p class="dim">每次做 PPT 都在重复劳动，而这件事 99% 可以模板化。</p></div>
|
||
<div class="card card-accent"><h4>② 怎么做</h4><p class="dim">tokens + layouts + animations，三层分离。</p></div>
|
||
<div class="card card-accent"><h4>③ 效果</h4><p class="dim">同一份 deck，一键切 24 种主题。</p></div>
|
||
</div>
|
||
<div class="deck-footer"><span class="dim2">agenda</span><span class="slide-number" data-current="2" data-total="8"></span></div>
|
||
<div class="notes">三段式结构——Why / How / Result。这是最稳的讲法。</div>
|
||
</section>
|
||
|
||
<!-- 3. Big quote -->
|
||
<section class="slide center tc" data-title="Quote">
|
||
<div style="max-width:1000px">
|
||
<div class="serif" style="font-size:120px;line-height:.9;color:var(--accent);opacity:.7">"</div>
|
||
<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">
|
||
好的演讲稿是写出来的，<br>不是「做」出来的。
|
||
</blockquote>
|
||
<p class="dim" style="font-size:18px;letter-spacing:.1em">— 每一个被 PPT 折磨过的人</p>
|
||
</div>
|
||
<div class="deck-footer"><span class="dim2">quote</span><span class="slide-number" data-current="3" data-total="8"></span></div>
|
||
<div class="notes">这里停一秒。让这句话自己说话。</div>
|
||
</section>
|
||
|
||
<!-- 4. Stat -->
|
||
<section class="slide center tc" data-title="Stat">
|
||
<div>
|
||
<p class="kicker">The result</p>
|
||
<div style="font-size:240px;line-height:1;font-weight:900">
|
||
<span class="counter gradient-text" data-to="92">0</span><span class="gradient-text">%</span>
|
||
</div>
|
||
<h3 class="mt-s">你花在 PPT 上的时间可以被省下</h3>
|
||
<p class="lede" style="margin:14px auto 0">10 份真实 deck 的平均测试数据。</p>
|
||
</div>
|
||
<div class="deck-footer"><span class="dim2">proof</span><span class="slide-number" data-current="4" data-total="8"></span></div>
|
||
<div class="notes">强调：数据来源——自己真实的 10 个 deck。</div>
|
||
</section>
|
||
|
||
<!-- 5. Two column -->
|
||
<section class="slide" data-title="Tokens">
|
||
<p class="kicker">How · 核心思路</p>
|
||
<h2 class="h2">把「看起来像什么」收进 <code>:root</code></h2>
|
||
<div class="grid g2 mt-l" style="align-items:start">
|
||
<div class="card anim-fade-left" data-anim="fade-left">
|
||
<h3>概念</h3>
|
||
<p class="dim">每一种视觉属性——颜色、字体、圆角、阴影——都变成语义变量。</p>
|
||
<ul class="mt-m">
|
||
<li><code>--text-1</code> / <code>--text-2</code> / <code>--text-3</code></li>
|
||
<li><code>--surface</code> / <code>--surface-2</code></li>
|
||
<li><code>--accent</code> / <code>--accent-2</code> / <code>--accent-3</code></li>
|
||
<li><code>--radius</code> / <code>--shadow</code> / <code>--grad</code></li>
|
||
</ul>
|
||
</div>
|
||
<div class="card anim-fade-right" data-anim="fade-right">
|
||
<h3>示例</h3>
|
||
<pre class="mono" style="font-size:13px;background:var(--surface-2);padding:16px;border-radius:var(--radius-sm);overflow:auto;margin:0">
|
||
/* assets/themes/aurora.css */
|
||
:root {
|
||
--bg: #06091c;
|
||
--text-1: #e8f0ff;
|
||
--accent: #5ef2c6;
|
||
--accent-2: #7aa2ff;
|
||
--accent-3: #c984ff;
|
||
--radius: 20px;
|
||
}</pre>
|
||
<p class="dim mt-m" style="font-size:13px">——整个 aurora 主题就这么大。</p>
|
||
</div>
|
||
</div>
|
||
<div class="deck-footer"><span class="dim2">how</span><span class="slide-number" data-current="5" data-total="8"></span></div>
|
||
<div class="notes">关键是：base.css 只认变量名，不认具体色值。换主题 = 换一份变量。</div>
|
||
</section>
|
||
|
||
<!-- 6. Chart -->
|
||
<section class="slide" data-title="Chart">
|
||
<p class="kicker">Numbers · 实际效果</p>
|
||
<h2 class="h2">做 deck 的时间分布，使用前/使用后</h2>
|
||
<div class="card mt-l" style="height:440px;padding:24px"><canvas id="chart"></canvas></div>
|
||
<div class="deck-footer"><span class="dim2">data</span><span class="slide-number" data-current="6" data-total="8"></span></div>
|
||
<div class="notes">使用后，「写内容」时间占比大幅上升，其他一切下降——这正是我们想要的。</div>
|
||
</section>
|
||
|
||
<!-- 7. CTA -->
|
||
<section class="slide center tc" data-title="CTA">
|
||
<div style="max-width:920px">
|
||
<p class="kicker">Your turn</p>
|
||
<h1 class="h1 anim-rise-in" data-anim="rise-in" style="font-size:96px"><span class="gradient-text">开始</span>做你的第一份</h1>
|
||
<p class="lede" style="margin:14px auto 30px">复制一份 deck，换你的内容，按 <b>T</b> 选一个最对味的主题，讲完还能一键导 PNG。</p>
|
||
<div class="row" style="justify-content:center;gap:14px">
|
||
<div class="card" style="padding:18px 26px"><code>./scripts/new-deck.sh my-talk</code></div>
|
||
</div>
|
||
<p class="dim2 mt-l" style="font-size:14px">←/→ 翻页 · T 主题 · A 动效 · F 全屏 · O 概览 · S 备注</p>
|
||
</div>
|
||
<div class="deck-footer"><span class="dim2">cta</span><span class="slide-number" data-current="7" data-total="8"></span></div>
|
||
<div class="notes">最后给一个具体的行动：一条命令。别停留在「我回去试试」。</div>
|
||
</section>
|
||
|
||
<!-- 8. Thanks -->
|
||
<section class="slide center tc" data-title="Thanks">
|
||
<div>
|
||
<div class="anim-confetti-burst" style="display:inline-block;padding:20px"></div>
|
||
<h1 class="h1" style="font-size:180px;line-height:1"><span class="gradient-text">Thanks</span></h1>
|
||
<p class="lede">lewis · sudolewis@gmail.com · MIT 2026</p>
|
||
</div>
|
||
<div class="deck-footer"><span class="dim2">end</span><span class="slide-number" data-current="8" data-total="8"></span></div>
|
||
<div class="notes">谢谢大家。Q&A 时间。</div>
|
||
</section>
|
||
|
||
</div>
|
||
<script src="../../assets/runtime.js"></script>
|
||
<script>
|
||
addEventListener('DOMContentLoaded',()=>{
|
||
const css=getComputedStyle(document.documentElement);
|
||
const a1=css.getPropertyValue('--accent').trim();
|
||
const a2=css.getPropertyValue('--accent-2').trim();
|
||
const text2=css.getPropertyValue('--text-2').trim();
|
||
const border=css.getPropertyValue('--border').trim();
|
||
new Chart(document.getElementById('chart'),{type:'bar',
|
||
data:{labels:['写内容','挑版式','调样式','出图','动效'],
|
||
datasets:[
|
||
{label:'使用前 (分钟)',data:[92,48,36,22,14],backgroundColor:a2,borderRadius:6},
|
||
{label:'使用后 (分钟)',data:[18,3,2,1,1],backgroundColor:a1,borderRadius:6}]},
|
||
options:{plugins:{legend:{labels:{color:text2}}},
|
||
scales:{x:{ticks:{color:text2},grid:{color:border}},
|
||
y:{ticks:{color:text2},grid:{color:border}}}}});
|
||
});
|
||
</script>
|
||
</body></html>
|