73 lines
3.2 KiB
HTML
73 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>14 full-deck templates showcase</title>
|
|
<style>
|
|
:root{--ink:#0b0b10;--muted:#6b6b78;--line:#e7e7ef}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
html,body{width:1920px;height:1080px;overflow:hidden}
|
|
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}
|
|
.hdr{display:flex;align-items:flex-end;justify-content:space-between}
|
|
.hdr h2{font:900 48px/1 "Inter",sans-serif;letter-spacing:-.02em}
|
|
.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}
|
|
.hdr .sub{font:600 16px/1 "JetBrains Mono","SF Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
|
|
.grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:20px;min-height:0}
|
|
.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}
|
|
.cell.dark{background:#0a0a14;border-color:rgba(255,255,255,.08)}
|
|
.cell iframe{position:absolute;inset:0;width:1920px;height:1080px;border:0;pointer-events:none;transform-origin:top left}
|
|
.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)}
|
|
.cell.dark .label{background:rgba(10,10,20,.78);color:#fff;border-color:rgba(255,255,255,.14)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="hdr">
|
|
<h2><b>14</b>Full-Deck Templates — complete world-views</h2>
|
|
<div class="sub">html-ppt · templates/full-decks/* · pick 6 of 14</div>
|
|
</div>
|
|
<div class="grid" id="grid"></div>
|
|
|
|
<script>
|
|
const DECKS = [
|
|
['graphify-dark-graph',true],
|
|
['xhs-post',false],
|
|
['hermes-cyber-terminal',true],
|
|
['knowledge-arch-blueprint',false],
|
|
['pitch-deck',false],
|
|
['xhs-white-editorial',false]
|
|
];
|
|
const grid = document.getElementById('grid');
|
|
DECKS.forEach(([name, dark]) => {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'cell' + (dark ? ' dark' : '');
|
|
const ifr = document.createElement('iframe');
|
|
ifr.src = '../../templates/full-decks/' + name + '/index.html';
|
|
ifr.loading = 'eager';
|
|
cell.appendChild(ifr);
|
|
const lab = document.createElement('span');
|
|
lab.className = 'label';
|
|
lab.textContent = name;
|
|
cell.appendChild(lab);
|
|
grid.appendChild(cell);
|
|
});
|
|
|
|
function fit(){
|
|
document.querySelectorAll('.cell iframe').forEach(ifr => {
|
|
const c = ifr.parentElement;
|
|
const w = c.clientWidth, h = c.clientHeight;
|
|
const s = Math.min(w / 1920, h / 1080);
|
|
ifr.style.transform = 'scale('+s+')';
|
|
const sw = 1920*s, sh = 1080*s;
|
|
ifr.style.left = ((w - sw)/2) + 'px';
|
|
ifr.style.top = ((h - sh)/2) + 'px';
|
|
ifr.style.position = 'absolute';
|
|
});
|
|
}
|
|
window.addEventListener('resize', fit);
|
|
setTimeout(fit, 100);
|
|
setTimeout(fit, 500);
|
|
setTimeout(fit, 1500);
|
|
</script>
|
|
</body>
|
|
</html>
|