<!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>
