70 lines
3.2 KiB
HTML
70 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-theme="minimal-white">
|
|
<head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>html-ppt · 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/minimal-white.css">
|
|
<link rel="stylesheet" href="../assets/animations/animations.css">
|
|
</head>
|
|
<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/">
|
|
<div class="deck">
|
|
|
|
<!-- 1. Cover -->
|
|
<section class="slide" data-title="Cover">
|
|
<p class="kicker">html-ppt · 2026</p>
|
|
<h1 class="h1 anim-fade-up" data-anim="fade-up">用模板，<span class="gradient-text">换主题</span><br>讲任何事情</h1>
|
|
<p class="lede">24 themes · 30 layouts · 25 animations · zero build</p>
|
|
<div class="deck-footer"><span class="dim2">lewis</span><span class="slide-number" data-current="1" data-total="6"></span></div>
|
|
<div class="notes">这是一个最小可用的 deck。你可以复制这个文件作为新 deck 的起点。</div>
|
|
</section>
|
|
|
|
<!-- 2. TOC -->
|
|
<section class="slide" data-title="目录">
|
|
<p class="kicker">Agenda</p>
|
|
<h2 class="h2">我们会讲三件事</h2>
|
|
<div class="grid g3 mt-l anim-stagger-list" data-anim-target>
|
|
<div class="card"><h4>01 · Tokens</h4><p class="dim">把颜色/字体/圆角收进 CSS 变量。</p></div>
|
|
<div class="card"><h4>02 · Layouts</h4><p class="dim">30 种可复用单页。</p></div>
|
|
<div class="card"><h4>03 · Runtime</h4><p class="dim">键盘驱动、按 T 换主题。</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Stat -->
|
|
<section class="slide center tc" data-title="Stat">
|
|
<div>
|
|
<p class="kicker">Result</p>
|
|
<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>
|
|
<h3>的准备时间被省下</h3>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. Two column -->
|
|
<section class="slide" data-title="Tokens">
|
|
<p class="kicker">Under the hood</p>
|
|
<h2 class="h2">换主题 = 换一组变量</h2>
|
|
<div class="grid g2 mt-l">
|
|
<div class="card"><h4>语义变量</h4><p class="dim">写 <code>var(--surface)</code>，不写具体色值。</p></div>
|
|
<div class="card"><h4>一键切换</h4><p class="dim">按 T 循环所有主题——所有 slide 同步更新。</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. CTA -->
|
|
<section class="slide center tc" data-title="CTA">
|
|
<div>
|
|
<p class="kicker">Your turn</p>
|
|
<h1 class="h1 anim-rise-in" data-anim="rise-in">开始做你的 deck</h1>
|
|
<p class="lede" style="margin:16px auto">按 ← → 翻页 · T 切主题 · A 切动效 · F 全屏 · O 概览 · S 备注</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. Thanks -->
|
|
<section class="slide center tc" data-title="Thanks">
|
|
<h1 class="h1" style="font-size:160px;line-height:1"><span class="gradient-text">Thanks</span></h1>
|
|
<p class="lede">lewis · sudolewis@gmail.com</p>
|
|
</section>
|
|
</div>
|
|
<script src="../assets/runtime.js"></script>
|
|
</body></html>
|