| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"><title>Full-Deck Gallery — html-ppt v2</title> |
| 5 | <link rel="stylesheet" href="../assets/fonts.css"> |
| 6 | <link rel="stylesheet" href="../assets/base.css"> |
| 7 | <style> |
| 8 | html,body{background:#0b0c10;color:#e8ebf4;font-family:var(--font-sans)} |
| 9 | .deck{background:#0b0c10} |
| 10 | .slide{padding:60px 80px;color:#e8ebf4;background:transparent;display:flex;flex-direction:column} |
| 11 | .slide h1{color:#fff;font-size:48px;margin:0 0 6px;letter-spacing:-.02em} |
| 12 | .slide .sub{color:#aab0c0;font-size:18px;margin:0 0 22px} |
| 13 | .frame-wrap{flex:1;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12); |
| 14 | box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;background:#fff} |
| 15 | iframe.tpl{position:absolute;inset:0;width:200%;height:200%;border:0; |
| 16 | transform:scale(.5);transform-origin:top left} |
| 17 | .meta{position:absolute;top:24px;right:40px;font-family:'JetBrains Mono',monospace; |
| 18 | font-size:12px;color:#6a7086;letter-spacing:.14em;text-transform:uppercase;z-index:30} |
| 19 | .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08); |
| 20 | color:#cfd3dc;font-size:11px;margin-right:6px} |
| 21 | .cover{align-items:center;justify-content:center;text-align:center} |
| 22 | .cover h1{font-size:84px;background:linear-gradient(135deg,#60a5fa,#a78bfa,#f472b6); |
| 23 | -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} |
| 24 | .cover p{color:#aab0c0;max-width:60ch;font-size:20px} |
| 25 | .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} |
| 26 | </style> |
| 27 | </head> |
| 28 | <body> |
| 29 | <div class="deck"> |
| 30 | |
| 31 | <section class="slide cover"> |
| 32 | <p class="kicker" style="color:#a78bfa">HTML-PPT v2 · Full-Deck Gallery</p> |
| 33 | <h1>14 full-deck templates</h1> |
| 34 | <p>Press → to browse. Each slide is a live iframe preview of a complete, multi-slide deck template. Open any <code>templates/full-decks/<name>/index.html</code> to see the full deck, or copy the folder to scaffold your own.</p> |
| 35 | <div class="legend"> |
| 36 | <span class="tag">8 extracted from real decks</span> |
| 37 | <span class="tag">6 scenario scaffolds</span> |
| 38 | <span class="tag">scoped .tpl-<name> CSS</span> |
| 39 | <span class="tag">36 themes compatible</span> |
| 40 | </div> |
| 41 | </section> |
| 42 | |
| 43 | <!-- Template preview slides generated via JS below --> |
| 44 | |
| 45 | </div> |
| 46 | |
| 47 | <script> |
| 48 | const TPLS = [ |
| 49 | ['xhs-white-editorial', '白底杂志风', 'extracted', 'xhs posts, editorial lifestyle'], |
| 50 | ['graphify-dark-graph', '暗底知识图谱', 'extracted', 'AI/graph/data products'], |
| 51 | ['knowledge-arch-blueprint', '奶油蓝图架构', 'extracted', 'architecture, systems thinking'], |
| 52 | ['hermes-cyber-terminal', '暗终端 cyber', 'extracted', 'devtool, honest-review, agent demos'], |
| 53 | ['obsidian-claude-gradient', 'GitHub 暗紫渐变', 'extracted', 'tool walkthroughs, LLM product'], |
| 54 | ['testing-safety-alert', '红琥珀警示', 'extracted', 'security, incident review, AI safety'], |
| 55 | ['xhs-pastel-card', '柔和马卡龙', 'extracted', 'lifestyle, soft emotional'], |
| 56 | ['dir-key-nav-minimal', '方向键 8 色极简', 'extracted', 'keynote, one-idea-per-slide'], |
| 57 | ['pitch-deck', 'Pitch Deck YC 风', 'scenario', 'fundraising, startup pitch'], |
| 58 | ['product-launch', 'Product Launch', 'scenario', 'product announcement, launch keynote'], |
| 59 | ['tech-sharing', 'Tech Sharing 技术分享','scenario','internal tech talk, conference talk'], |
| 60 | ['weekly-report', 'Weekly Report 周报','scenario', 'status update, business review'], |
| 61 | ['xhs-post', '小红书 图文 9 屏 3:4','scenario', 'xiaohongshu / ig carousel'], |
| 62 | ['course-module', 'Course Module 教学模块','scenario','online course, workshop module'], |
| 63 | ['presenter-mode-reveal', '🎤 Presenter Mode 演讲者模式','scenario','tech sharing, talk with 逐字稿, speaker view'] |
| 64 | ]; |
| 65 | |
| 66 | const deck = document.querySelector('.deck'); |
| 67 | TPLS.forEach((t,i)=>{ |
| 68 | const s = document.createElement('section'); |
| 69 | s.className = 'slide'; |
| 70 | s.setAttribute('data-title',t[0]); |
| 71 | s.innerHTML = ` |
| 72 | <span class="meta">${i+1}/${TPLS.length+1}</span> |
| 73 | <h1>${t[0]}</h1> |
| 74 | <p class="sub">${t[1]} · <span class="tag">${t[2]}</span> ${t[3]}</p> |
| 75 | <div class="frame-wrap"> |
| 76 | <iframe class="tpl" src="full-decks/${t[0]}/index.html" loading="eager" title="${t[0]}"></iframe> |
| 77 | </div>`; |
| 78 | deck.appendChild(s); |
| 79 | }); |
| 80 | </script> |
| 81 | <script src="../assets/runtime.js"></script> |
| 82 | </body></html> |
| 83 |