open-design/design-templates/html-ppt/templates/theme-showcase.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"><title>Theme Showcase — html-ppt v2</title>
<link rel="stylesheet" href="../assets/fonts.css">
<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="../assets/animations/animations.css">
<style>
  /* NOTE: theme isolation via <iframe srcdoc> per slide. Each slide loads base.css
     + its OWN theme.css, so pressing → actually shows a different look. */
  html,body{background:#0b0c10;color:#e8ebf4}
  .deck{background:#0b0c10}
  .slide{padding:0;background:transparent}
  .theme-frame{
    position:absolute;inset:0;width:100%;height:100%;
    border:0;background:#fff;
  }
  .theme-chrome{
    position:absolute;top:22px;left:40px;right:40px;display:flex;justify-content:space-between;
    font-family:'JetBrains Mono',monospace;font-size:12px;color:#aab0c0;letter-spacing:.12em;
    text-transform:uppercase;z-index:20;pointer-events:none;mix-blend-mode:difference;
  }
  .theme-chrome .name{color:#fff;font-weight:700}
</style>
</head>
<body>
<div class="deck"></div>

<script>
/* 36 themes total (24 v1 + 12 v2). Each rendered in its OWN iframe so CSS is isolated. */
const THEMES = [
  ['minimal-white',      '极简白 · clean restraint'],
  ['editorial-serif',    '杂志衬线 · high editorial'],
  ['soft-pastel',        '马卡龙 · soft pastel'],
  ['sharp-mono',         '黑白高对比 · sharp mono'],
  ['arctic-cool',        '冷色调 · arctic'],
  ['sunset-warm',        '暖色调 · sunset'],
  ['catppuccin-latte',   'Catppuccin Latte'],
  ['catppuccin-mocha',   'Catppuccin Mocha'],
  ['dracula',            'Dracula'],
  ['tokyo-night',        'Tokyo Night'],
  ['nord',               'Nord · nordic cool'],
  ['solarized-light',    'Solarized Light'],
  ['gruvbox-dark',       'Gruvbox Dark'],
  ['rose-pine',          'Rose Pine'],
  ['neo-brutalism',      'Neo-Brutalism'],
  ['glassmorphism',      'Glassmorphism'],
  ['bauhaus',            'Bauhaus 几何原色'],
  ['swiss-grid',         'Swiss Grid'],
  ['terminal-green',     'Terminal Green'],
  ['xiaohongshu-white',  '小红书白底'],
  ['rainbow-gradient',   'Rainbow Gradient'],
  ['aurora',             'Aurora 极光'],
  ['blueprint',          'Blueprint 蓝图'],
  ['memphis-pop',        'Memphis Pop'],
  /* v2 additions */
  ['cyberpunk-neon',     'Cyberpunk Neon 霓虹'],
  ['y2k-chrome',         'Y2K Chrome 镜面'],
  ['retro-tv',           'Retro TV CRT 扫描线'],
  ['japanese-minimal',   '和风极简 · 朱红'],
  ['vaporwave',          'Vaporwave 蒸汽波'],
  ['midcentury',         'Mid-Century Modern'],
  ['corporate-clean',    'Corporate Clean 商务'],
  ['academic-paper',     '学术白皮书'],
  ['news-broadcast',     'News Broadcast 新闻'],
  ['pitch-deck-vc',      'Pitch Deck VC / YC'],
  ['magazine-bold',      'Magazine Bold 大字杂志'],
  ['engineering-whiteprint','Engineering Whiteprint']
];

/* The demo content that each iframe will render. Uses tokens only, so it picks up
   whatever theme the iframe loads. Self-contained — no external references. */
function demoHTML(themeName, label){
  return `<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../assets/fonts.css">
<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="../assets/themes/${themeName}.css">
<link rel="stylesheet" href="../assets/animations/animations.css">
<style>
  html,body{height:100%}
  .wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
       padding:72px 96px;box-sizing:border-box;background:var(--bg);color:var(--text-1);
       font-family:var(--font-sans)}
  .swatch{display:flex;gap:10px;margin-top:18px}
  .swatch div{width:44px;height:44px;border-radius:10px;border:1px solid var(--border)}
  .kpi{font-size:54px;font-weight:800;letter-spacing:-.02em}
  .mini-code{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);
    padding:10px 12px;border-radius:8px;margin:6px 0 0;white-space:pre;color:var(--text-1);
    border:1px solid var(--border)}
</style>
</head><body><div class="wrap">
  <p class="kicker">Theme · ${themeName}</p>
  <h1 class="h1">${label}</h1>
  <p class="lede">Same demo slide, different tokens. Background, type, accent, radius, shadow all come from <code>assets/themes/${themeName}.css</code>.</p>
  <div class="grid g3 mt-l">
    <div class="card">
      <h4>Palette · 调色盘</h4>
      <p class="dim">accent / accent-2 / accent-3 / text / surface-2</p>
      <div class="swatch">
        <div style="background:var(--accent)"></div>
        <div style="background:var(--accent-2)"></div>
        <div style="background:var(--accent-3)"></div>
        <div style="background:var(--text-1)"></div>
        <div style="background:var(--surface-2)"></div>
      </div>
    </div>
    <div class="card">
      <h4>KPI</h4>
      <div class="kpi gradient-text">2.4K</div>
      <p class="dim">上周月活 · weekly active</p>
    </div>
    <div class="card">
      <h4>Code · 令牌</h4>
      <pre class="mini-code">:root {
  --accent: /* theme */;
  --radius: /* theme */;
}</pre>
    </div>
  </div>
  <div class="row mt-m" style="gap:10px;flex-wrap:wrap">
    <span class="pill">#tokens</span>
    <span class="pill pill-accent">primary</span>
    <span class="pill">#radius</span>
    <span class="pill">#shadow</span>
    <span class="pill">#type</span>
  </div>
</div></body></html>`;
}

(function(){
  const deck = document.querySelector('.deck');
  THEMES.forEach((t,i)=>{
    const s = document.createElement('section');
    s.className = 'slide';
    s.setAttribute('data-title', t[0]);
    const chrome = `<div class="theme-chrome"><span class="name">${String(i+1).padStart(2,'0')} · ${t[0]}</span><span>${i+1}/${THEMES.length}</span></div>`;
    const iframe = document.createElement('iframe');
    iframe.className = 'theme-frame';
    iframe.setAttribute('loading','eager');
    // Use src via data URL for the inline demo HTML so relative paths still resolve from the templates/ dir.
    // Easier: use srcdoc but set <base href> to the templates dir so relative ../assets paths work.
    const base = `<base href="${location.href}">`;
    iframe.srcdoc = demoHTML(t[0], t[1]).replace('<head>','<head>'+base);
    s.innerHTML = chrome;
    s.appendChild(iframe);
    deck.appendChild(s);
  });
})();
</script>
<script src="../assets/runtime.js"></script>
</body></html>