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>
48 lines
2.2 KiB
HTML
48 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8"><title>Layout Showcase — html-ppt</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">
|
|
<style>
|
|
.layout-nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 20px;font-family:var(--font-mono);font-size:12px;color:var(--text-2);box-shadow:var(--shadow);display:flex;gap:14px;align-items:center}
|
|
.layout-nav a{color:var(--text-2);text-decoration:none;padding:4px 10px;border-radius:999px}
|
|
.layout-nav a:hover{background:var(--surface-2)}
|
|
iframe{width:100%;height:100vh;border:0;display:block;background:var(--bg)}
|
|
body{margin:0;overflow:hidden}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout-nav">
|
|
<b>layouts</b>
|
|
<a href="#" data-go="-1">←</a>
|
|
<span id="cur">cover</span>
|
|
<a href="#" data-go="+1">→</a>
|
|
</div>
|
|
<iframe id="frame" src="single-page/cover.html"></iframe>
|
|
<script>
|
|
const list=['cover','toc','section-divider','bullets','two-column','three-column','big-quote',
|
|
'stat-highlight','kpi-grid','table','code','diff','terminal','flow-diagram','timeline',
|
|
'roadmap','mindmap','comparison','pros-cons','todo-checklist','gantt','image-hero','image-grid',
|
|
'chart-bar','chart-line','chart-pie','chart-radar','arch-diagram','process-steps','cta','thanks'];
|
|
let i=0;
|
|
const frame=document.getElementById('frame');
|
|
const cur=document.getElementById('cur');
|
|
function go(n){
|
|
i=(n+list.length)%list.length;
|
|
frame.src='single-page/'+list[i]+'.html';
|
|
cur.textContent=list[i]+' · '+(i+1)+'/'+list.length;
|
|
history.replaceState(null,'','#/'+(i+1));
|
|
}
|
|
document.querySelectorAll('[data-go]').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();go(i+parseInt(a.dataset.go,10))}));
|
|
document.addEventListener('keydown',e=>{
|
|
if(e.key==='ArrowRight'||e.key===' '){go(i+1);e.preventDefault()}
|
|
if(e.key==='ArrowLeft'){go(i-1);e.preventDefault()}
|
|
});
|
|
const m=/^#\/(\d+)/.exec(location.hash||'');
|
|
if(m)go(parseInt(m[1],10)-1);else go(0);
|
|
</script>
|
|
</body></html>
|