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>
27 行
1.8 KiB
HTML
27 行
1.8 KiB
HTML
<!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>现场演示 & 问答</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>
|