lewislulu--html-ppt-skill
lewis
a93138e1bf
World-class HTML presentation skill with keyboard navigation, theme/animation switching, headless Chrome rendering, and showcase decks for themes/layouts/animations. - 24 themes (minimal-white, dracula, catppuccin, tokyo-night, xiaohongshu-white, …) - 31 single-page layouts (cover, code, charts, timeline, gantt, mindmap, …) - 20+ named animations (rise-in, typewriter, confetti-burst, card-flip-3d, …) - theme/layout/animation showcase decks - runtime.js: arrow/space/F/S/O/T/A keybinds, hash routing, progress bar - render.sh headless Chrome PNG export - MIT, author lewis <sudolewis@gmail.com>
34 行
1.7 KiB
HTML
34 行
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN"><head><meta charset="utf-8"><title>Code</title>
|
|
<link rel="stylesheet" href="../../assets/fonts.css">
|
|
<link rel="stylesheet" href="../../assets/base.css">
|
|
<link rel="stylesheet" id="theme-link" href="../../assets/themes/tokyo-night.css">
|
|
<link rel="stylesheet" href="../../assets/animations/animations.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/styles/tokyo-night-dark.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/core.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/languages/javascript.min.js"></script>
|
|
<script>addEventListener('DOMContentLoaded',()=>{hljs.registerLanguage('javascript',window.hljsLangJavascript||window.hljs.getLanguage('javascript'));document.querySelectorAll('pre code').forEach(el=>hljs.highlightElement(el))})</script>
|
|
</head><body class="single">
|
|
<div class="deck"><section class="slide is-active" data-title="Code">
|
|
<p class="kicker">Snippet · 运行时核心</p>
|
|
<h2 class="h2">按一下键盘，幻灯片就跑起来了</h2>
|
|
<pre class="card mt-m" style="padding:24px"><code class="language-javascript">// runtime.js — keyboard-driven deck
|
|
function go(n) {
|
|
n = Math.max(0, Math.min(total - 1, n));
|
|
slides.forEach((s, i) => {
|
|
s.classList.toggle('is-active', i === n);
|
|
});
|
|
idx = n;
|
|
barFill.style.width = ((n + 1) / total * 100) + '%';
|
|
history.replaceState(null, '', '#/' + (n + 1));
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') go(idx + 1);
|
|
if (e.key === 'ArrowLeft') go(idx - 1);
|
|
if (e.key === 't') cycleTheme();
|
|
});</code></pre>
|
|
</section></div>
|
|
<script src="../../assets/runtime.js"></script>
|
|
</body></html>
|