152 lines
6.3 KiB
HTML
152 lines
6.3 KiB
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>
|