mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

prototype: deck overview cells clickable — jump to full-size slide

Browse Source
This commit is contained in:
Codex
2026-09-07 20:52:05 +02:00
parent 0635e99b5d
commit 54da406971
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/prototype/deck-overview.html
+6 -2
View File
@@ -14,7 +14,9 @@
color: var(--bordeaux); text-align: center; margin: 0 0 6px; }
p.note { text-align: center; font: 400 12.5px/1.5 var(--sans); color: var(--ink-muted); margin: 0 0 22px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.cell { background: #fff; box-shadow: 0 4px 16px rgba(42,36,38,.14); border-radius: 6px; overflow: hidden; }
.cell { background: #fff; box-shadow: 0 4px 16px rgba(42,36,38,.14); border-radius: 6px; overflow: hidden;
cursor: pointer; }
.cell:hover { outline: 3px solid var(--bordeaux); }
.cell .bar { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px 0;
font: 600 11px/1.2 var(--sans); color: var(--ink); }
.cell .bar .num { font: 700 10px/1 var(--mono); color: var(--bordeaux); }
@@ -28,7 +30,7 @@
</head>
<body>
<h1>Deck overview — 14 slides · AritmoLab</h1>
<p class="note">Live previews of <b>/deck/index.html</b> · all 14 slides as committed on <b>feat/ai-etl-presentation</b>.</p>
<p class="note">Live previews of <b>/deck/index.html</b> · <b>click any slide to open it full-size</b>, then flip with the arrow keys.</p>
<div class="grid" id="grid"></div>
<script>
const TITLES = ['Title', 'Where we started', 'What we wanted to build', 'The problem',
@@ -43,6 +45,8 @@
TITLES.forEach((t, i) => {
const cell = document.createElement('div');
cell.className = 'cell';
cell.title = 'Open slide ' + (i + 1) + ' full-size';
cell.onclick = () => { location.href = '/deck/index.html?r=' + Date.now() + '#/' + i; };
cell.innerHTML = `<div class="bar"><span class="num">${String(i + 1).padStart(2, '0')}</span><span>${t}</span>` +
`<span class="st ${CLS[i]}">${STATUS[i]}</span></div>` +
`<div class="shot"><iframe loading="lazy" src="/deck/index.html?v=28&ov=1#/${i}" title="${t}"></iframe></div>`;