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/assets/themes/vaporwave.css ADDED Viewed

@@ -0,0 +1,21 @@
+/* theme: vaporwave — 蒸汽波 */
+:root{
+  --bg:#1a0938;--bg-soft:#261050;--surface:rgba(255,255,255,.06);--surface-2:rgba(255,255,255,.1);
+  --border:rgba(255,110,199,.28);--border-strong:rgba(0,245,255,.5);
+  --text-1:#fdf0ff;--text-2:#d4a8e8;--text-3:#8a6ba8;
+  --accent:#ff6ec7;--accent-2:#00f5ff;--accent-3:#ffd166;
+  --grad:linear-gradient(135deg,#ff6ec7 0%,#c94fff 35%,#00f5ff 100%);
+  --grad-soft:linear-gradient(135deg,rgba(255,110,199,.25),rgba(0,245,255,.25));
+  --radius:18px;--radius-sm:10px;--radius-lg:28px;
+  --shadow:0 20px 60px rgba(255,110,199,.2),0 0 1px rgba(0,245,255,.6);
+  --shadow-lg:0 30px 80px rgba(255,110,199,.3),0 0 2px rgba(0,245,255,.8);
+  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
+  --font-display:'Space Grotesk','Inter',sans-serif;
+}
+body{background:
+  linear-gradient(180deg,#1a0938 0%,#3a0f5c 45%,#7a1f6b 85%,#e85d9c 100%),
+  radial-gradient(ellipse at 50% 80%,rgba(0,245,255,.3),transparent 60%)}
+h1.title,.h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;
+  -webkit-text-fill-color:transparent;color:transparent}
+.card{backdrop-filter:blur(18px)}
+.divider-accent{background:var(--grad);height:4px;width:120px;box-shadow:0 0 20px var(--accent)}

package/dist/__w3kits/assets/design-templates/html-ppt/assets/themes/xiaohongshu-white.css ADDED Viewed

@@ -0,0 +1,16 @@
+/* theme: xiaohongshu-white — 小红书白底高级感 */
+:root{
+  --bg:#fffdfb;--bg-soft:#fff6f1;--surface:#ffffff;--surface-2:#fff1ea;
+  --border:rgba(60,30,20,.1);--border-strong:rgba(60,30,20,.22);
+  --text-1:#1a1210;--text-2:#4f3a32;--text-3:#a08d85;
+  --accent:#ff2742;--accent-2:#ff7a90;--accent-3:#ffb38a;
+  --good:#3ba55c;--warn:#f5a524;--bad:#ff2742;
+  --grad:linear-gradient(135deg,#ff2742,#ff7a90 55%,#ffb38a);
+  --grad-soft:linear-gradient(135deg,#fff6f1,#ffeae0);
+  --radius:20px;--radius-sm:14px;--radius-lg:28px;
+  --shadow:0 12px 30px rgba(255,39,66,.08);
+  --shadow-lg:0 24px 60px rgba(255,39,66,.14);
+  --font-sans:'Noto Sans SC','Inter',sans-serif;
+  --font-display:'Noto Serif SC','Playfair Display',serif;
+  --letter-tight:-.02em;
+}

package/dist/__w3kits/assets/design-templates/html-ppt/assets/themes/y2k-chrome.css ADDED Viewed

@@ -0,0 +1,20 @@
+/* theme: y2k-chrome — 千禧银色铬金属 */
+:root{
+  --bg:#dfe4ec;--bg-soft:#eef1f6;--surface:rgba(255,255,255,.72);--surface-2:rgba(255,255,255,.5);
+  --border:rgba(120,135,170,.32);--border-strong:rgba(80,100,140,.55);
+  --text-1:#1a1f2e;--text-2:#4a536a;--text-3:#8590a6;
+  --accent:#8a5cff;--accent-2:#3ccfd8;--accent-3:#ff84c4;
+  --grad:linear-gradient(135deg,#b8c4d8 0%,#f5f7fb 30%,#8a9ab8 55%,#e8ecf4 80%,#6b7a95 100%);
+  --grad-soft:linear-gradient(135deg,#c9e4ff,#f5d6ff 50%,#d6fffa);
+  --radius:26px;--radius-sm:16px;--radius-lg:36px;
+  --shadow:0 12px 30px rgba(70,90,130,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(80,100,140,.2);
+  --shadow-lg:0 24px 60px rgba(70,90,130,.35),inset 0 2px 0 rgba(255,255,255,.95);
+  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
+  --font-display:'Space Grotesk','Inter',sans-serif;
+}
+body{background:
+  linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%)}
+h1.title,.h1{background:linear-gradient(180deg,#f8faff 0%,#9aa8c4 50%,#4a5670 100%);
+  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
+.card{backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
+.pill{background:linear-gradient(180deg,#fff,#d4dcec);border-color:rgba(120,135,170,.4)}

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/_theme-cell.html ADDED Viewed

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>theme cell</title>
+<link rel="stylesheet" href="../../assets/fonts.css">
+<link rel="stylesheet" href="../../assets/base.css">
+<link id="theme-link" rel="stylesheet" href="../../assets/themes/minimal-white.css">
+<style>
+  html,body{height:100%;margin:0;overflow:hidden}
+  body{
+    background:var(--bg,#fff);color:var(--text-1,#111);
+    font-family:var(--font-sans);box-sizing:border-box;
+    padding:5cqw 6cqw;container-type:size;
+  }
+  .k{font:700 2.6cqw/1 var(--font-mono,monospace);color:var(--text-3,#888);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.5cqh}
+  h1{font:900 11cqw/.95 var(--font-display,var(--font-sans));letter-spacing:-.025em;margin:0 0 3cqh;color:var(--text-1)}
+  .lede{font:500 3.2cqw/1.4 var(--font-sans);color:var(--text-2,#555);margin:0 0 3.5cqh;max-width:85cqw}
+  .row{display:flex;gap:1.4cqw;flex-wrap:wrap}
+  .pill{padding:1.2cqh 2.4cqw;border-radius:999px;background:var(--surface-2,#f4f4f8);color:var(--text-1);font:600 2.3cqw/1 var(--font-sans);border:1px solid var(--border,#e5e5ea)}
+  .pill.accent{background:var(--accent,#7c5cff);color:#fff;border-color:transparent}
+  .kpi{margin-top:4cqh;display:flex;gap:5cqw}
+  .kpi div{font:900 10cqw/1 var(--font-display,var(--font-sans));letter-spacing:-.03em;color:var(--accent,#7c5cff)}
+  .kpi div span{display:block;font:500 1.8cqw/1 var(--font-sans);color:var(--text-3,#888);margin-top:1cqh;letter-spacing:.08em;text-transform:uppercase}
+  .gradient-hero{background:linear-gradient(90deg,var(--accent,#7c5cff),var(--accent-2,#22d3ee),var(--accent-3,#ff4d8d));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+</style>
+</head>
+<body>
+  <div class="k" id="kname">theme · minimal-white</div>
+  <h1 id="h1">2026<br>年度回顾</h1>
+  <p class="lede">同一份 outline，换一行 theme，排版、字体、色系、装饰全部重写。</p>
+  <div class="row">
+    <span class="pill accent">12 里程碑</span>
+    <span class="pill">团队 +40%</span>
+    <span class="pill">SAT 98%</span>
+  </div>
+  <div class="kpi">
+    <div>98%<span>Sat</span></div>
+    <div>12<span>MS</span></div>
+    <div>7×<span>Faster</span></div>
+  </div>
+<script>
+(function(){
+  const m = /[?&]theme=([\w-]+)/.exec(location.search||'');
+  if (m){
+    const name = m[1];
+    document.getElementById('theme-link').href = '../../assets/themes/'+name+'.css';
+    document.getElementById('kname').textContent = 'theme · ' + name;
+    if (/rainbow|aurora|cyberpunk|vaporwave|y2k/.test(name)){
+      document.getElementById('h1').classList.add('gradient-hero');
+    }
+  }
+})();
+</script>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/animations.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/hero.gif ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/layouts-live.gif ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/layouts.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/montage-animations.html ADDED Viewed

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en" data-theme="aurora">
+<head>
+<meta charset="utf-8">
+<title>47 animations showcase</title>
+<link rel="stylesheet" href="../../assets/fonts.css">
+<link rel="stylesheet" href="../../assets/base.css">
+<link rel="stylesheet" href="../../assets/themes/aurora.css">
+<link rel="stylesheet" href="../../assets/animations/animations.css">
+<style>
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#0a0a14;font-family:"PingFang SC","Noto Sans SC","Inter",-apple-system,sans-serif;color:#fff;padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em;color:#fff}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#ff4d8d,#f59e0b,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:#aab0c0;letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:18px;min-height:0}
+  .cell{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 56px rgba(0,0,0,.45);background:#050510;min-height:0}
+  .cell .fx-host{position:absolute;inset:0}
+  .cell .label{position:absolute;left:14px;bottom:12px;z-index:5;font:700 11px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:6px 12px;border-radius:999px;background:rgba(10,10,20,.72);color:#fff;text-transform:uppercase;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
+  .cell .kind{position:absolute;left:14px;top:12px;z-index:5;font:700 10px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.14em;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;text-transform:uppercase;border:1px solid rgba(255,255,255,.16)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>47</b>Animations — 27 CSS · 20 Canvas FX</h2>
+    <div class="sub">html-ppt · data-anim="…" / data-fx="…" · pick 8 canvas FX</div>
+  </div>
+  <div class="grid">
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="knowledge-graph" style="--accent:#7c5cff;--accent-2:#22d3ee;--text-1:#fff"></div><span class="label">knowledge-graph</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="neural-net" style="--accent:#22d3ee;--accent-2:#ff4d8d"></div><span class="label">neural-net</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="galaxy-swirl" style="--accent:#7c5cff;--accent-2:#ff4d8d"></div><span class="label">galaxy-swirl</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="constellation" style="--accent:#9fb4ff"></div><span class="label">constellation</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="matrix-rain"></div><span class="label">matrix-rain</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="starfield" style="--accent:#fff;--accent-2:#9fb4ff"></div><span class="label">starfield</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="firework" style="--accent:#ff4d8d;--accent-2:#22d3ee"></div><span class="label">firework</span></div>
+    <div class="cell"><span class="kind">data-fx</span><div class="fx-host" data-fx="particle-burst" style="--accent:#ff4d8d;--accent-2:#7c5cff"></div><span class="label">particle-burst</span></div>
+  </div>
+<script src="../../assets/animations/fx/_util.js"></script>
+<script src="../../assets/animations/fx/knowledge-graph.js"></script>
+<script src="../../assets/animations/fx/neural-net.js"></script>
+<script src="../../assets/animations/fx/galaxy-swirl.js"></script>
+<script src="../../assets/animations/fx/constellation.js"></script>
+<script src="../../assets/animations/fx/matrix-rain.js"></script>
+<script src="../../assets/animations/fx/starfield.js"></script>
+<script src="../../assets/animations/fx/firework.js"></script>
+<script src="../../assets/animations/fx/particle-burst.js"></script>
+<script>
+(function(){
+  document.querySelectorAll('[data-fx]').forEach(el => {
+    const name = el.getAttribute('data-fx');
+    const fn = window.HPX && window.HPX[name];
+    if (typeof fn === 'function') {
+      try { fn(el, {}); } catch(e) { console.warn('[fx]', name, e); }
+    }
+  });
+})();
+</script>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/montage-layouts.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>31 layouts showcase</title>
+<style>
+  :root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef}
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#f6f7fa;font-family:"PingFang SC","Noto Sans SC","Inter",-apple-system,sans-serif;color:var(--ink);padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#2563eb,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:18px;min-height:0}
+  .cell{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 48px rgba(10,10,30,.1);background:#fff;min-height:0}
+  .cell iframe{position:absolute;inset:0;width:1920px;height:1080px;border:0;pointer-events:none;transform-origin:top left}
+  .cell .label{position:absolute;left:14px;bottom:12px;z-index:5;font:700 11px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#1a1a22;text-transform:uppercase;border:1px solid rgba(0,0,0,.06)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>31</b>Layouts — batteries included, demo data bundled</h2>
+    <div class="sub">html-ppt · templates/single-page/*.html · pick 8 of 31</div>
+  </div>
+  <div class="grid" id="grid"></div>
+<script>
+const LAYOUTS = [
+  ['kpi-grid','KPI Grid'],
+  ['chart-bar','Chart · Bar'],
+  ['timeline','Timeline'],
+  ['mindmap','Mindmap'],
+  ['flow-diagram','Flow Diagram'],
+  ['roadmap','Roadmap'],
+  ['pros-cons','Pros / Cons'],
+  ['code','Code']
+];
+const grid = document.getElementById('grid');
+LAYOUTS.forEach(([name,label]) => {
+  const cell = document.createElement('div');
+  cell.className = 'cell';
+  const ifr = document.createElement('iframe');
+  ifr.src = '../../templates/single-page/' + name + '.html';
+  ifr.loading = 'eager';
+  cell.appendChild(ifr);
+  const lab = document.createElement('span');
+  lab.className = 'label';
+  lab.textContent = label + ' · ' + name;
+  cell.appendChild(lab);
+  grid.appendChild(cell);
+});
+function fit(){
+  document.querySelectorAll('.cell iframe').forEach(ifr => {
+    const c = ifr.parentElement;
+    const w = c.clientWidth, h = c.clientHeight;
+    const s = Math.min(w / 1920, h / 1080);
+    ifr.style.transform = 'scale('+s+')';
+    const sw = 1920*s, sh = 1080*s;
+    ifr.style.left = ((w - sw)/2) + 'px';
+    ifr.style.top  = ((h - sh)/2) + 'px';
+    ifr.style.position = 'absolute';
+  });
+}
+window.addEventListener('resize', fit);
+setTimeout(fit, 80);
+setTimeout(fit, 400);
+setTimeout(fit, 1200);
+</script>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/montage-templates.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>14 full-deck templates showcase</title>
+<style>
+  :root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef}
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#f6f7fa;font-family:"PingFang SC","Noto Sans SC","Inter",-apple-system,sans-serif;color:var(--ink);padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#f59e0b,#ff4d8d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:20px;min-height:0}
+  .cell{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 56px rgba(10,10,30,.12);background:#fff;min-height:0}
+  .cell.dark{background:#0a0a14;border-color:rgba(255,255,255,.08)}
+  .cell iframe{position:absolute;inset:0;width:1920px;height:1080px;border:0;pointer-events:none;transform-origin:top left}
+  .cell .label{position:absolute;left:16px;bottom:14px;z-index:5;font:700 12px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:#1a1a22;text-transform:uppercase;border:1px solid rgba(0,0,0,.06)}
+  .cell.dark .label{background:rgba(10,10,20,.78);color:#fff;border-color:rgba(255,255,255,.14)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>14</b>Full-Deck Templates — complete world-views</h2>
+    <div class="sub">html-ppt · templates/full-decks/* · pick 6 of 14</div>
+  </div>
+  <div class="grid" id="grid"></div>
+<script>
+const DECKS = [
+  ['graphify-dark-graph',true],
+  ['xhs-post',false],
+  ['hermes-cyber-terminal',true],
+  ['knowledge-arch-blueprint',false],
+  ['pitch-deck',false],
+  ['xhs-white-editorial',false]
+];
+const grid = document.getElementById('grid');
+DECKS.forEach(([name, dark]) => {
+  const cell = document.createElement('div');
+  cell.className = 'cell' + (dark ? ' dark' : '');
+  const ifr = document.createElement('iframe');
+  ifr.src = '../../templates/full-decks/' + name + '/index.html';
+  ifr.loading = 'eager';
+  cell.appendChild(ifr);
+  const lab = document.createElement('span');
+  lab.className = 'label';
+  lab.textContent = name;
+  cell.appendChild(lab);
+  grid.appendChild(cell);
+});
+function fit(){
+  document.querySelectorAll('.cell iframe').forEach(ifr => {
+    const c = ifr.parentElement;
+    const w = c.clientWidth, h = c.clientHeight;
+    const s = Math.min(w / 1920, h / 1080);
+    ifr.style.transform = 'scale('+s+')';
+    const sw = 1920*s, sh = 1080*s;
+    ifr.style.left = ((w - sw)/2) + 'px';
+    ifr.style.top  = ((h - sh)/2) + 'px';
+    ifr.style.position = 'absolute';
+  });
+}
+window.addEventListener('resize', fit);
+setTimeout(fit, 100);
+setTimeout(fit, 500);
+setTimeout(fit, 1500);
+</script>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/montage-themes.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>36 themes showcase</title>
+<style>
+  :root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef}
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:1920px;height:1080px;overflow:hidden}
+  body{background:#f6f7fa;font-family:"PingFang SC","Noto Sans SC","Inter","SF Pro Display",-apple-system,sans-serif;color:var(--ink);padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px}
+  .hdr{display:flex;align-items:flex-end;justify-content:space-between}
+  .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em}
+  .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#7c5cff,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
+  .grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:18px;min-height:0}
+  .cell{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 48px rgba(10,10,30,.1);background:#fff;min-height:0}
+  .cell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
+  .cell .label{position:absolute;left:14px;bottom:12px;z-index:5;font:700 11px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#1a1a22;text-transform:uppercase;border:1px solid rgba(0,0,0,.06)}
+  .cell.dark .label{background:rgba(10,10,20,.78);color:#fff;border-color:rgba(255,255,255,.14)}
+</style>
+</head>
+<body>
+  <div class="hdr">
+    <h2><b>36</b>Themes — one keyword, new identity</h2>
+    <div class="sub">html-ppt · assets/themes/*.css · pick 8 of 36</div>
+  </div>
+  <div class="grid">
+    <div class="cell"><iframe src="_theme-cell.html?theme=minimal-white"></iframe><span class="label">minimal-white</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=tokyo-night"></iframe><span class="label">tokyo-night</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=aurora"></iframe><span class="label">aurora</span></div>
+    <div class="cell"><iframe src="_theme-cell.html?theme=xiaohongshu-white"></iframe><span class="label">xiaohongshu-white</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=cyberpunk-neon"></iframe><span class="label">cyberpunk-neon</span></div>
+    <div class="cell dark"><iframe src="_theme-cell.html?theme=dracula"></iframe><span class="label">dracula</span></div>
+    <div class="cell"><iframe src="_theme-cell.html?theme=soft-pastel"></iframe><span class="label">soft-pastel</span></div>
+    <div class="cell"><iframe src="_theme-cell.html?theme=magazine-bold"></iframe><span class="label">magazine-bold</span></div>
+  </div>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/presenter-mode.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/templates.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/html-ppt/docs/readme/themes.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/html-ppt/examples/demo-deck/index.html ADDED Viewed

@@ -0,0 +1,161 @@
+<!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&amp;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>