| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"><title>Layout Showcase — html-ppt</title> |
| 5 | <link rel="stylesheet" href="../assets/fonts.css"> |
| 6 | <link rel="stylesheet" href="../assets/base.css"> |
| 7 | <link rel="stylesheet" id="theme-link" href="../assets/themes/minimal-white.css"> |
| 8 | <link rel="stylesheet" href="../assets/animations/animations.css"> |
| 9 | <style> |
| 10 | .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} |
| 11 | .layout-nav a{color:var(--text-2);text-decoration:none;padding:4px 10px;border-radius:999px} |
| 12 | .layout-nav a:hover{background:var(--surface-2)} |
| 13 | iframe{width:100%;height:100vh;border:0;display:block;background:var(--bg)} |
| 14 | body{margin:0;overflow:hidden} |
| 15 | </style> |
| 16 | </head> |
| 17 | <body> |
| 18 | <div class="layout-nav"> |
| 19 | <b>layouts</b> |
| 20 | <a href="#" data-go="-1">←</a> |
| 21 | <span id="cur">cover</span> |
| 22 | <a href="#" data-go="+1">→</a> |
| 23 | </div> |
| 24 | <iframe id="frame" src="single-page/cover.html"></iframe> |
| 25 | <script> |
| 26 | const list=['cover','toc','section-divider','bullets','two-column','three-column','big-quote', |
| 27 | 'stat-highlight','kpi-grid','table','code','diff','terminal','flow-diagram','timeline', |
| 28 | 'roadmap','mindmap','comparison','pros-cons','todo-checklist','gantt', |
| 29 | 'image-single','image-full-bleed','image-text-split','image-gallery','image-compare','image-hero','image-grid', |
| 30 | 'chart-bar','chart-line','chart-pie','chart-radar','arch-diagram','process-steps','cta','thanks']; |
| 31 | let i=0; |
| 32 | const frame=document.getElementById('frame'); |
| 33 | const cur=document.getElementById('cur'); |
| 34 | function go(n){ |
| 35 | i=(n+list.length)%list.length; |
| 36 | frame.src='single-page/'+list[i]+'.html'; |
| 37 | cur.textContent=list[i]+' · '+(i+1)+'/'+list.length; |
| 38 | history.replaceState(null,'','#/'+(i+1)); |
| 39 | } |
| 40 | document.querySelectorAll('[data-go]').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();go(i+parseInt(a.dataset.go,10))})); |
| 41 | document.addEventListener('keydown',e=>{ |
| 42 | if(e.key==='ArrowRight'||e.key===' '){go(i+1);e.preventDefault()} |
| 43 | if(e.key==='ArrowLeft'){go(i-1);e.preventDefault()} |
| 44 | }); |
| 45 | const m=/^#\/(\d+)/.exec(location.hash||''); |
| 46 | if(m)go(parseInt(m[1],10)-1);else go(0); |
| 47 | </script> |
| 48 | </body></html> |
| 49 |