| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <title>14 full-deck templates showcase</title> |
| 6 | <style> |
| 7 | :root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef} |
| 8 | *{box-sizing:border-box;margin:0;padding:0} |
| 9 | html,body{width:1920px;height:1080px;overflow:hidden} |
| 10 | body{background:#f6f7fa;font-family:"PingFang SC","Noto Sans SC","Inter",-apple-system,sans-serif;color:var(--ink);padding:48px 56px 44px;display:flex;flex-direction:column;gap:28px} |
| 11 | .hdr{display:flex;align-items:flex-end;justify-content:space-between} |
| 12 | .hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em} |
| 13 | .hdr h2 b{display:inline-block;font-size:58px;padding-right:14px;background:linear-gradient(90deg,#f59e0b,#ff4d8d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} |
| 14 | .hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase} |
| 15 | .grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:20px;min-height:0} |
| 16 | .cell{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 56px rgba(10,10,30,.12);background:#fff;min-height:0} |
| 17 | .cell.dark{background:#0a0a14;border-color:rgba(255,255,255,.08)} |
| 18 | .cell iframe{position:absolute;inset:0;width:1920px;height:1080px;border:0;pointer-events:none;transform-origin:top left} |
| 19 | .cell .label{position:absolute;left:16px;bottom:14px;z-index:5;font:700 12px/1 "JetBrains Mono","SF Mono",monospace;letter-spacing:.1em;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:#1a1a22;text-transform:uppercase;border:1px solid rgba(0,0,0,.06)} |
| 20 | .cell.dark .label{background:rgba(10,10,20,.78);color:#fff;border-color:rgba(255,255,255,.14)} |
| 21 | </style> |
| 22 | </head> |
| 23 | <body> |
| 24 | <div class="hdr"> |
| 25 | <h2><b>14</b>Full-Deck Templates — complete world-views</h2> |
| 26 | <div class="sub">html-ppt · templates/full-decks/* · pick 6 of 14</div> |
| 27 | </div> |
| 28 | <div class="grid" id="grid"></div> |
| 29 | |
| 30 | <script> |
| 31 | const DECKS = [ |
| 32 | ['graphify-dark-graph',true], |
| 33 | ['xhs-post',false], |
| 34 | ['hermes-cyber-terminal',true], |
| 35 | ['knowledge-arch-blueprint',false], |
| 36 | ['pitch-deck',false], |
| 37 | ['xhs-white-editorial',false] |
| 38 | ]; |
| 39 | const grid = document.getElementById('grid'); |
| 40 | DECKS.forEach(([name, dark]) => { |
| 41 | const cell = document.createElement('div'); |
| 42 | cell.className = 'cell' + (dark ? ' dark' : ''); |
| 43 | const ifr = document.createElement('iframe'); |
| 44 | ifr.src = '../../templates/full-decks/' + name + '/index.html'; |
| 45 | ifr.loading = 'eager'; |
| 46 | cell.appendChild(ifr); |
| 47 | const lab = document.createElement('span'); |
| 48 | lab.className = 'label'; |
| 49 | lab.textContent = name; |
| 50 | cell.appendChild(lab); |
| 51 | grid.appendChild(cell); |
| 52 | }); |
| 53 | |
| 54 | function fit(){ |
| 55 | document.querySelectorAll('.cell iframe').forEach(ifr => { |
| 56 | const c = ifr.parentElement; |
| 57 | const w = c.clientWidth, h = c.clientHeight; |
| 58 | const s = Math.min(w / 1920, h / 1080); |
| 59 | ifr.style.transform = 'scale('+s+')'; |
| 60 | const sw = 1920*s, sh = 1080*s; |
| 61 | ifr.style.left = ((w - sw)/2) + 'px'; |
| 62 | ifr.style.top = ((h - sh)/2) + 'px'; |
| 63 | ifr.style.position = 'absolute'; |
| 64 | }); |
| 65 | } |
| 66 | window.addEventListener('resize', fit); |
| 67 | setTimeout(fit, 100); |
| 68 | setTimeout(fit, 500); |
| 69 | setTimeout(fit, 1500); |
| 70 | </script> |
| 71 | </body> |
| 72 | </html> |
| 73 |