npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.9 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1706) hide show

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/flow-diagram.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Flow Diagram</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">
+<style>
+.flow{display:flex;align-items:center;gap:16px;margin-top:40px;max-width:1200px}
+.flow .node{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);position:relative}
+.flow .node .ic{font-size:32px;margin-bottom:6px}
+.flow .node h4{font-size:16px}
+.flow .node p{font-size:12px;color:var(--text-3);margin:0}
+.flow .arr{color:var(--text-3);font-size:28px;flex-shrink:0}
+.flow .node.hl{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),var(--shadow)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Flow">
+  <p class="kicker">Pipeline · 渲染管线</p>
+  <h2 class="h2">从 Markdown 到 PNG，共 5 步</h2>
+  <div class="flow anim-stagger-list" data-anim-target>
+    <div class="node"><div class="ic">📝</div><h4>Markdown</h4><p>你的内容源</p></div>
+    <div class="arr">→</div>
+    <div class="node"><div class="ic">🧩</div><h4>Layouts</h4><p>选择页型</p></div>
+    <div class="arr">→</div>
+    <div class="node hl"><div class="ic">🎨</div><h4>Theme</h4><p>换装</p></div>
+    <div class="arr">→</div>
+    <div class="node"><div class="ic">🌐</div><h4>HTML</h4><p>运行时接管</p></div>
+    <div class="arr">→</div>
+    <div class="node"><div class="ic">📸</div><h4>PNG</h4><p>headless Chrome</p></div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/gantt.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Gantt</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">
+<style>
+.gantt{margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
+.gantt .hd{display:grid;grid-template-columns:200px repeat(12,1fr);gap:4px;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
+.gantt .row{display:grid;grid-template-columns:200px repeat(12,1fr);gap:4px;align-items:center;height:40px}
+.gantt .lbl{font-size:14px;font-weight:500}
+.gantt .cells{grid-column:2/-1;position:relative;height:28px;background:linear-gradient(90deg,var(--surface-2) 1px,transparent 1px) 0 0/calc(100%/12) 100%}
+.gantt .bar{position:absolute;top:4px;height:20px;border-radius:6px;background:var(--grad);display:flex;align-items:center;padding:0 10px;font-size:11px;color:#fff;font-weight:600;box-shadow:var(--shadow)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Gantt">
+  <p class="kicker">Plan · Q2 甘特图</p>
+  <h2 class="h2">四个月，五条线并行</h2>
+  <div class="gantt">
+    <div class="hd"><div>任务</div><div>W1</div><div>W2</div><div>W3</div><div>W4</div><div>W5</div><div>W6</div><div>W7</div><div>W8</div><div>W9</div><div>W10</div><div>W11</div><div>W12</div></div>
+    <div class="row"><div class="lbl">主题系统 (tokens)</div><div class="cells"><div class="bar" style="left:0;width:25%">tokens + 24 themes</div></div></div>
+    <div class="row"><div class="lbl">layouts 目录</div><div class="cells"><div class="bar" style="left:17%;width:33%">30 个单页模板</div></div></div>
+    <div class="row"><div class="lbl">动画系统</div><div class="cells"><div class="bar" style="left:42%;width:25%">25 个命名动效</div></div></div>
+    <div class="row"><div class="lbl">渲染 / CI</div><div class="cells"><div class="bar" style="left:58%;width:25%">render.sh</div></div></div>
+    <div class="row"><div class="lbl">发布 & 文档</div><div class="cells"><div class="bar" style="left:75%;width:25%">v1.0</div></div></div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/image-grid.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Image Grid</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">
+<style>
+.gg{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px;margin-top:24px}
+.gg .cell{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
+.gg .cell span{position:absolute;inset:auto 0 0 0;padding:12px 14px;color:#fff;font-size:13px;font-weight:500;background:linear-gradient(transparent,rgba(0,0,0,.55))}
+.gg .c1{background:linear-gradient(135deg,#3b6cff,#7a5cff);grid-column:span 2;grid-row:span 2}
+.gg .c2{background:linear-gradient(135deg,#ff7a90,#ff2742)}
+.gg .c3{background:linear-gradient(135deg,#5ef2c6,#7aa2ff)}
+.gg .c4{background:linear-gradient(135deg,#ffd27a,#f2a341)}
+.gg .c5{background:linear-gradient(135deg,#c984ff,#ff5c8a)}
+.gg .c6{background:linear-gradient(135deg,#0e1530,#24283b)}
+.gg .c7{background:linear-gradient(135deg,#88c0d0,#5ef2c6);grid-column:span 2}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Image Grid">
+  <p class="kicker">Gallery · 作品集</p>
+  <h2 class="h2">一次 bento grid，六张要点图</h2>
+  <div class="gg anim-stagger-list" data-anim-target>
+    <div class="cell c1"><span>主视觉 · Keynote 封面</span></div>
+    <div class="cell c2"><span>暖色 · Stat</span></div>
+    <div class="cell c3"><span>冷色 · Flow</span></div>
+    <div class="cell c4"><span>日落 · Code</span></div>
+    <div class="cell c5"><span>渐变 · Quote</span></div>
+    <div class="cell c6"><span>暗色 · Terminal</span></div>
+    <div class="cell c7"><span>极光 · CTA</span></div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/image-hero.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Image Hero</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">
+<style>
+.hero{position:relative;height:calc(100vh - 144px);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
+.hero .bg{position:absolute;inset:0;background:
+  radial-gradient(80% 60% at 30% 40%,#ffb38a,transparent 70%),
+  radial-gradient(70% 50% at 75% 60%,#c084fc,transparent 70%),
+  linear-gradient(135deg,#0b1024,#1a2238)}
+.hero .bg.kb{animation:kf-kenburns 12s ease-in-out infinite alternate}
+.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,12,20,.65));}
+.hero .caption{position:absolute;bottom:48px;left:56px;right:56px;color:#fff;z-index:2}
+.hero h1{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.03em;margin:0}
+.hero p{font-size:20px;opacity:.85;margin:14px 0 0;max-width:60ch}
+.hero .pill{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Image Hero" style="padding:56px">
+  <div class="hero">
+    <div class="bg kb"></div>
+    <div class="overlay"></div>
+    <div class="caption">
+      <span class="pill">Cover · 04</span>
+      <h1 class="mt-s anim-rise-in" data-anim="rise-in">像杂志一样的<br>封面画面感</h1>
+      <p>Ken Burns 缓慢推拉 + 径向渐变 + 中灰叠加。无须真实图片，也能做出高级感。</p>
+    </div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/kpi-grid.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>KPI Grid</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 class="single">
+<div class="deck"><section class="slide is-active" data-title="KPIs">
+  <p class="kicker">Metrics · 关键数字</p>
+  <h2 class="h2">这一季度，我们做到了什么</h2>
+  <div class="grid g4 mt-l anim-stagger-list" data-anim-target>
+    <div class="card"><p class="eyebrow">Revenue</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="1248">0</span>K</div><p class="dim" style="color:var(--good)">↑ 38% YoY</p></div>
+    <div class="card"><p class="eyebrow">Active users</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="82">0</span>K</div><p class="dim" style="color:var(--good)">↑ 12% QoQ</p></div>
+    <div class="card"><p class="eyebrow">Retention</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="74">0</span>%</div><p class="dim" style="color:var(--good)">↑ 3 pts</p></div>
+    <div class="card"><p class="eyebrow">NPS</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="61">0</span></div><p class="dim" style="color:var(--warn)">→ 持平</p></div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/mindmap.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Mindmap</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">
+<style>
+.mm{position:relative;margin:30px auto 0;max-width:1200px;height:520px}
+.mm .n{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow);font-weight:600}
+.mm .root{top:calc(50% - 34px);left:calc(50% - 100px);width:200px;padding:22px;background:var(--accent);color:#fff;border:none;text-align:center;font-size:20px;border-radius:24px}
+.mm .n.sm{font-size:13px}
+.mm svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
+.mm svg path{stroke:var(--border-strong);stroke-width:1.5;fill:none}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Mindmap">
+  <p class="kicker">Concept map · 心智图</p>
+  <h2 class="h2">html-ppt 的知识地图</h2>
+  <div class="mm">
+    <svg class="anim-path-draw" viewBox="0 0 1200 520" preserveAspectRatio="none">
+      <path d="M600,260 C400,140 280,100 160,90"/>
+      <path d="M600,260 C400,380 280,420 160,430"/>
+      <path d="M600,260 C800,140 920,100 1040,90"/>
+      <path d="M600,260 C800,380 920,420 1040,430"/>
+      <path d="M600,260 C600,140 600,100 600,60"/>
+      <path d="M600,260 C600,380 600,420 600,460"/>
+    </svg>
+    <div class="n root">html-ppt</div>
+    <div class="n" style="top:60px;left:40px">Themes</div>
+    <div class="n sm" style="top:410px;left:40px">Layouts</div>
+    <div class="n sm" style="top:60px;right:40px">Animations</div>
+    <div class="n sm" style="top:410px;right:40px">Runtime</div>
+    <div class="n sm" style="top:30px;left:calc(50% - 50px)">Tokens</div>
+    <div class="n sm" style="top:450px;left:calc(50% - 60px)">Render.sh</div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/process-steps.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Process Steps</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">
+<style>
+.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}
+.step{position:relative;padding:24px 26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
+.step .num{position:absolute;top:-24px;left:22px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;box-shadow:var(--shadow)}
+.step h4{margin:18px 0 8px;font-size:17px}
+.step p{font-size:13px;color:var(--text-2);line-height:1.6}
+.step .tag{display:inline-block;margin-top:10px;font-size:11px;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-3)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Process">
+  <p class="kicker">How-to · 四步做一个 deck</p>
+  <h2 class="h2">从零到一，只需要十分钟</h2>
+  <div class="steps anim-stagger-list" data-anim-target>
+    <div class="step"><div class="num">1</div><h4>起稿</h4><p>运行 <code>new-deck.sh</code> 创建脚手架，默认 6 页。</p><span class="tag">~30s</span></div>
+    <div class="step"><div class="num">2</div><h4>选版式</h4><p>从 <code>templates/single-page/</code> 里复制你需要的页型。</p><span class="tag">~2min</span></div>
+    <div class="step"><div class="num">3</div><h4>写内容</h4><p>替换 demo 数据，保留结构。</p><span class="tag">~6min</span></div>
+    <div class="step"><div class="num">4</div><h4>换主题</h4><p>按 <b>T</b> 循环看 24 个主题，挑一个定稿。</p><span class="tag">~1min</span></div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/pros-cons.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Pros / Cons</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">
+<style>
+.pc{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}
+.pc .card h3{display:flex;align-items:center;gap:10px}
+.pc .card h3 .b{display:inline-flex;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;font-size:20px}
+.pc .pro h3 .b{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
+.pc .con h3 .b{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
+.pc ul{padding-left:22px;line-height:1.8;color:var(--text-2)}
+.pc .pro{border-top:3px solid var(--good)}
+.pc .con{border-top:3px solid var(--bad)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Pros Cons">
+  <p class="kicker">Trade-offs · 诚实的取舍</p>
+  <h2 class="h2">纯 HTML 演讲：好在哪里，痛在哪里</h2>
+  <div class="pc">
+    <div class="card pro anim-fade-up" data-anim="fade-up"><h3><span class="b">✓</span> 好处</h3>
+      <ul><li>零构建：一个文件就能跑</li><li>可 diff：Git 友好，好 review</li><li>可编程：动效自由定制</li><li>可分发：URL / PDF / PNG 都行</li></ul>
+    </div>
+    <div class="card con anim-fade-up" data-anim="fade-up"><h3><span class="b">✗</span> 痛点</h3>
+      <ul><li>协作不像 Keynote 那样实时</li><li>非程序员上手稍陡</li><li>复杂动效仍需写 JS</li><li>部分字体在离线环境缺失</li></ul>
+    </div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/roadmap.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Roadmap</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">
+<style>
+.rm{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:28px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
+.rm .col{padding:20px 22px;border-right:1px solid var(--border);background:var(--surface);position:relative}
+.rm .col:last-child{border-right:none}
+.rm .col .tag{display:inline-block;padding:3px 12px;border-radius:999px;font-size:11px;background:var(--surface-2);color:var(--text-2);margin-bottom:10px}
+.rm .col.now{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
+.rm .col.now .tag{background:var(--accent);color:#fff}
+.rm h4{font-size:15px;margin:8px 0 4px}
+.rm ul{padding-left:18px;margin:8px 0 0;font-size:13px;color:var(--text-2)}
+.rm li{margin-bottom:6px;line-height:1.5}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Roadmap">
+  <p class="kicker">Roadmap · 2026</p>
+  <h2 class="h2">接下来四个季度，我们会做什么</h2>
+  <div class="rm">
+    <div class="col now">
+      <span class="tag">NOW · Q2</span>
+      <h4>主题系统</h4>
+      <ul><li>24 个官方主题</li><li>tokens 语义文档</li><li>T 键循环切换</li></ul>
+    </div>
+    <div class="col">
+      <span class="tag">NEXT · Q3</span>
+      <h4>导出</h4>
+      <ul><li>PNG 批量</li><li>PDF 打包</li><li>小红书 3:4 切片</li></ul>
+    </div>
+    <div class="col">
+      <span class="tag">LATER · Q4</span>
+      <h4>交互</h4>
+      <ul><li>Presenter 模式</li><li>Notes 同屏</li><li>遥控器配对</li></ul>
+    </div>
+    <div class="col">
+      <span class="tag">VISION</span>
+      <h4>AI 写稿</h4>
+      <ul><li>从 md 自动分页</li><li>智能选版式</li><li>智能选主题</li></ul>
+    </div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/section-divider.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Section Divider</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 class="single">
+<div class="deck"><section class="slide is-active tc center" data-title="Section 02">
+  <div style="max-width:780px;margin:0 auto">
+    <p class="kicker anim-fade-down" data-anim="fade-down">Section · 02</p>
+    <h1 class="h1 anim-rise-in" data-anim="rise-in" style="font-size:112px">主题与 <span class="gradient-text">Tokens</span></h1>
+    <div class="divider-accent" style="margin:24px auto"></div>
+    <p class="lede" style="margin:0 auto">换主题 = 换一份 CSS 变量。其他一切保持不变。</p>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/stat-highlight.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Stat Highlight</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 class="single">
+<div class="deck"><section class="slide is-active center tc" data-title="Stat">
+  <p class="kicker">Impact · 一个数字</p>
+  <div style="font-size:260px;line-height:1;font-weight:900;letter-spacing:-.05em">
+    <span class="counter gradient-text" data-to="92">0</span><span class="gradient-text">%</span>
+  </div>
+  <h3 class="mt-s">的准备时间被你省下</h3>
+  <p class="lede" style="margin:16px auto 0">在 10 个真实项目中，使用 html-ppt 的平均 deck 制作时间从 4 小时降到了 20 分钟。</p>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/table.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Table</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">
+<style>
+.t{width:100%;border-collapse:collapse;font-size:16px}
+.t th,.t td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
+.t th{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:600}
+.t tr:hover td{background:var(--surface-2)}
+.t td.num{font-variant-numeric:tabular-nums;text-align:right}
+.up{color:var(--good)}.dn{color:var(--bad)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Table">
+  <p class="kicker">Comparison · 数据表</p>
+  <h2 class="h2">主流 HTML 演讲框架对比</h2>
+  <div class="card mt-l" style="padding:4px 12px">
+  <table class="t">
+    <thead><tr><th>框架</th><th>学习曲线</th><th>自定义</th><th class="num">体积</th><th class="num">GitHub ⭐</th><th>适合</th></tr></thead>
+    <tbody>
+      <tr><td><b>html-ppt</b></td><td>极低</td><td>★★★★★</td><td class="num">~80 KB</td><td class="num">—</td><td>快速出稿、换主题</td></tr>
+      <tr><td>reveal.js</td><td>低</td><td>★★★★</td><td class="num">~450 KB</td><td class="num">67k</td><td>长讲座、互动</td></tr>
+      <tr><td>Slidev</td><td>中</td><td>★★★★★</td><td class="num">需构建</td><td class="num">31k</td><td>开发者、技术分享</td></tr>
+      <tr><td>Marp</td><td>极低</td><td>★★</td><td class="num">~10 MB</td><td class="num">13k</td><td>Markdown 出稿</td></tr>
+      <tr><td>Impress.js</td><td>中</td><td>★★★</td><td class="num">~60 KB</td><td class="num">38k</td><td>3D 展示</td></tr>
+    </tbody>
+  </table>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/terminal.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Terminal</title>
+<link rel="stylesheet" href="../../assets/fonts.css">
+<link rel="stylesheet" href="../../assets/base.css">
+<link rel="stylesheet" id="theme-link" href="../../assets/themes/terminal-green.css">
+<link rel="stylesheet" href="../../assets/animations/animations.css">
+<style>
+.term{font-family:var(--font-mono);font-size:16px;background:#020803;border:1px solid rgba(0,255,120,.3);border-radius:10px;padding:24px 28px;box-shadow:0 0 60px rgba(0,255,136,.08) inset}
+.term .bar{display:flex;gap:6px;margin-bottom:16px}
+.term .bar span{width:12px;height:12px;border-radius:50%;background:#222;border:1px solid rgba(0,255,136,.3)}
+.term .p{color:var(--accent)}
+.term .c{color:var(--text-1)}
+.term .o{color:var(--text-2)}
+.term .caret{display:inline-block;width:9px;height:18px;background:var(--accent);vertical-align:middle;animation:blink 1s step-end infinite}
+@keyframes blink{50%{opacity:0}}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Terminal">
+  <p class="kicker">CLI · 一行命令起一个 deck</p>
+  <h2 class="h2" style="color:var(--text-1)">你需要的就是一个终端</h2>
+  <div class="term mt-l">
+    <div class="bar"><span></span><span></span><span></span></div>
+    <div><span class="p">$ </span><span class="c">./scripts/new-deck.sh graphify-talk</span></div>
+    <div class="o">  ✔ created decks/graphify-talk/index.html</div>
+    <div class="o">  ✔ linked theme → aurora</div>
+    <div class="o">  ✔ 12 slides scaffolded from templates/single-page/*</div>
+    <div style="margin-top:12px"><span class="p">$ </span><span class="c">open decks/graphify-talk/index.html</span></div>
+    <div class="o">  ↗ launched in Chrome</div>
+    <div style="margin-top:12px"><span class="p">$ </span><span class="c">./scripts/render.sh decks/graphify-talk/index.html</span></div>
+    <div class="o">  ✔ wrote graphify-talk.png (1920×1080)</div>
+    <div style="margin-top:12px"><span class="p">$ </span><span class="caret"></span></div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/thanks.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Thanks</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 class="single">
+<div class="deck"><section class="slide is-active center tc" data-title="Thanks">
+  <div>
+    <div class="anim-confetti-burst" style="display:inline-block;padding:40px"></div>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up" style="font-size:180px;line-height:1"><span class="gradient-text">Thanks</span></h1>
+    <p class="lede" style="margin:18px auto 0">愿你每一次上台，都少一点紧张，多一点从容。</p>
+    <div class="row mt-l" style="justify-content:center;gap:32px">
+      <div class="dim"><b>lewis</b> · sudolewis@gmail.com</div>
+      <div class="dim">github.com/lewis/html-ppt</div>
+      <div class="dim">2026 · MIT</div>
+    </div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/three-column.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Three Column</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 class="single">
+<div class="deck"><section class="slide is-active" data-title="Three column">
+  <p class="kicker">Pillars · 三根支柱</p>
+  <h2 class="h2">一个 html-ppt，三件装备</h2>
+  <div class="grid g3 mt-l anim-stagger-list" data-anim-target>
+    <div class="card"><div style="font-size:40px">🎨</div><h4 class="mt-s">Themes</h4><p class="dim">克制 · 编辑 · 霓虹 · 终端 …… 随场景换装。</p></div>
+    <div class="card"><div style="font-size:40px">🧱</div><h4 class="mt-s">Layouts</h4><p class="dim">30 种页型，从封面到结语一次给齐。</p></div>
+    <div class="card"><div style="font-size:40px">✨</div><h4 class="mt-s">Animations</h4><p class="dim">25 个命名动效，每一个都克制、每一个都上台。</p></div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/timeline.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Timeline</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">
+<style>
+.tl{position:relative;margin-top:40px}
+.tl::before{content:"";position:absolute;left:0;right:0;top:48px;height:2px;background:var(--border)}
+.tl .row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:start}
+.tl .item{position:relative;padding-top:80px;text-align:center}
+.tl .dot{position:absolute;top:36px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--accent);border:4px solid var(--bg);box-shadow:0 0 0 2px var(--accent)}
+.tl .year{font-size:14px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;position:absolute;top:0;left:0;right:0;font-weight:600}
+.tl h4{font-size:18px}
+.tl p{font-size:13px;color:var(--text-2)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Timeline">
+  <p class="kicker">Roadmap · 时间线</p>
+  <h2 class="h2">html-ppt 是怎么长大的</h2>
+  <div class="tl">
+    <div class="row anim-stagger-list" data-anim-target>
+      <div class="item"><div class="year">2025 Q3</div><div class="dot"></div><h4>起源</h4><p>一套个人 reveal.js 模板</p></div>
+      <div class="item"><div class="year">2025 Q4</div><div class="dot"></div><h4>tokens 化</h4><p>把颜色全部收进 :root</p></div>
+      <div class="item"><div class="year">2026 Q1</div><div class="dot"></div><h4>Agent 接入</h4><p>开放为 AgentSkill</p></div>
+      <div class="item"><div class="year">2026 Q2</div><div class="dot"></div><h4>24 themes</h4><p>从克制到霓虹一应俱全</p></div>
+      <div class="item"><div class="year">2026 Q3</div><div class="dot"></div><h4>渲染管线</h4><p>headless Chrome PNG 出稿</p></div>
+    </div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/toc.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="minimal-white">
+<head>
+<meta charset="utf-8"><title>Table of Contents</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 class="single">
+<div class="deck">
+<section class="slide is-active" data-title="Contents">
+  <p class="eyebrow">Contents · 目录</p>
+  <h2 class="h2">今天的五件事</h2>
+  <div class="grid g2 mt-l anim-stagger-list" data-anim-target>
+    <div class="card"><div class="row"><div class="h3 dim2" style="width:56px">01</div><div><h4>为什么需要设计系统</h4><p class="dim">从模板到 token，减少重复。</p></div></div></div>
+    <div class="card"><div class="row"><div class="h3 dim2" style="width:56px">02</div><div><h4>主题与 tokens</h4><p class="dim">24 个可切换的主题，一键换装。</p></div></div></div>
+    <div class="card"><div class="row"><div class="h3 dim2" style="width:56px">03</div><div><h4>版式目录</h4><p class="dim">30 种单页类型，覆盖 95% 场景。</p></div></div></div>
+    <div class="card"><div class="row"><div class="h3 dim2" style="width:56px">04</div><div><h4>入场动效</h4><p class="dim">25 种命名动画，可挑可组合。</p></div></div></div>
+    <div class="card" style="grid-column:span 2"><div class="row"><div class="h3 dim2" style="width:56px">05</div><div><h4>现场演示 &amp; 问答</h4><p class="dim">打开模板就能讲。</p></div></div></div>
+  </div>
+  <div class="deck-footer"><span class="dim2">html-ppt</span><span>目录</span></div>
+</section>
+</div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/todo-checklist.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Checklist</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">
+<style>
+.todo{max-width:820px;margin-top:26px}
+.todo li{list-style:none;display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border)}
+.todo li .b{flex-shrink:0;width:22px;height:22px;border:2px solid var(--border-strong);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-top:2px}
+.todo li.done .b{background:var(--good);border-color:var(--good);color:#fff}
+.todo li.done .b::after{content:"✓";font-weight:900}
+.todo li.done .t{text-decoration:line-through;color:var(--text-3)}
+.todo li .t{font-size:18px}
+.todo li .tag{margin-left:auto;font-size:12px;color:var(--text-3)}
+</style>
+</head><body class="single">
+<div class="deck"><section class="slide is-active" data-title="Checklist">
+  <p class="kicker">Launch · 上线前检查清单</p>
+  <h2 class="h2">发版前必过的 8 件事</h2>
+  <ul class="todo anim-stagger-list" data-anim-target>
+    <li class="done"><span class="b"></span><span class="t">所有 slide 在 Chrome 打开无控制台报错</span><span class="tag">#sanity</span></li>
+    <li class="done"><span class="b"></span><span class="t">字体回退链路正确（Noto Sans SC）</span><span class="tag">#fonts</span></li>
+    <li class="done"><span class="b"></span><span class="t">24 个主题各选一页截图比对</span><span class="tag">#themes</span></li>
+    <li class="done"><span class="b"></span><span class="t">键盘导航全键通</span><span class="tag">#runtime</span></li>
+    <li><span class="b"></span><span class="t">PDF 打印不跨页裁切</span><span class="tag">#print</span></li>
+    <li><span class="b"></span><span class="t">render.sh 对每个 showcase 跑通</span><span class="tag">#ci</span></li>
+    <li><span class="b"></span><span class="t">references/*.md 通读一遍</span><span class="tag">#docs</span></li>
+    <li><span class="b"></span><span class="t">LICENSE / README 作者信息核对</span><span class="tag">#legal</span></li>
+  </ul>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/single-page/two-column.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>Two Column</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 class="single">
+<div class="deck"><section class="slide is-active" data-title="Two column">
+  <p class="kicker">Pattern · 双栏</p>
+  <h2 class="h2">概念 <span class="dim2">⟷</span> 示例</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">一个主题 = 一组 CSS 变量。把颜色、字体、圆角、阴影全部收到 <code>:root</code> 里。</p>
+      <ul class="mt-m">
+        <li>— tokens 定义语义，不写具体色值</li>
+        <li>— base.css 用 tokens 排版</li>
+        <li>— 每个主题只改变量</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:14px;border-radius:var(--radius-sm);overflow:auto">
+:root {
+  --bg: #fff;
+  --text-1: #0c0d10;
+  --accent: #3b6cff;
+  --radius: 18px;
+}
+.card {
+  background: var(--bg);
+  color: var(--text-1);
+  border-radius: var(--radius);
+}</pre>
+    </div>
+  </div>
+</section></div>
+<script src="../../assets/runtime.js"></script>
+</body></html>