mirror of
https://github.com/lewislulu/html-ppt-skill.git
synced 2026-09-14 18:25:55 +08:00
lewis
d9c09e6208
Before this, `grep -l '<img' templates/single-page/*.html` returned nothing: image-hero and image-grid were gradient placeholders, so the skill had no actual answer to "which layout shows 1 or more images". Adds one framing primitive in base.css and five layouts built on it: image-single one screenshot/diagram, letterboxed, never cropped image-full-bleed one photo filling the slide, scrim keeps the title legible image-text-split 50/50 image + argument, `flip` swaps sides image-gallery 3-6 images, uniform grid, one caption each image-compare before/after, both sides identical size .img-frame owns the aspect ratio (--img-ratio) and the crop; the <img> just fills it. That is what lets a user drop in a portrait, square or ultrawide source without touching the layout. `.contain` letterboxes instead of cropping for screenshots and diagrams, where a crop loses information. Each layout takes its height from what is left after the title (flex:1; min-height:0) rather than from a fixed aspect ratio, so it survives viewports shorter than 16:9 instead of pushing captions off the page. Demo artwork lives in assets/demo-images/ as hand-written SVG (~1 KB each, ~5 KB total, zero external references) so the layouts keep the offline guarantee. Verified with a DOM probe at window heights 1167/1080/900/733 (viewports 1080/993/813/646), measured after entry animations settle: all five report broken=0 overflow=NONE at every height.
49 lines
2.3 KiB
HTML
49 lines
2.3 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-single','image-full-bleed','image-text-split','image-gallery','image-compare','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>
|