prototype: deck overview — live contact sheet of all 14 slides with status

2026-09-07 20:30:07 +02:00
parent 3327018a87
commit 197c165a0a
1 changed files with 53 additions and 0 deletions
@@ -0,0 +1,53 @@
+<!doctype html>
+<!-- PROTOTYPE (throwaway) — contact sheet of the 14 deck slides, live iframes scaled down.
+     Slide 04 shows the OLD deck layout: the approved new composition lives in slide05-outputs.html. -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>PROTOTYPE · Deck overview — 14 slides</title>
+<link rel="stylesheet" href="/deck/fonts.css">
+<style>
+  :root { --bordeaux: #cb333b; --ink: #2a2426; --ink-muted: #6b6568; --line: #e3e0e1;
+    --sans: 'Source Sans 3', system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
+  body { margin: 0; background: #e9e7e7; font-family: var(--sans); padding: 22px 0 60px; }
+  h1 { font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
+    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 .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); }
+  .cell .bar .st { margin-left: auto; font: 700 8.5px/1 var(--mono); letter-spacing: .1em; }
+  .st.final { color: #2f6f4f; } .st.refined { color: var(--bordeaux); } .st.draft { color: #a08a3c; } .st.proto { color: var(--bordeaux-deep); }
+  .shot { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; }
+  .shot iframe { width: 1280px; height: 720px; border: 0; transform: scale(0.277); transform-origin: 0 0;
+    pointer-events: none; position: absolute; top: 0; left: 0; }
+  .cell.wide { grid-column: span 1; }
+</style>
+</head>
+<body>
+  <h1>Deck overview — 14 slides · AritmoLab</h1>
+  <p class="note">Live previews of <b>/deck/index.html</b> · slide 04 shows the old deck layout: the approved new composition is in <b>slide05-outputs.html</b> (not yet ported).</p>
+  <div class="grid" id="grid"></div>
+<script>
+  const TITLES = ['Title', 'Where we started', 'What we wanted to build', 'The problem',
+    'What the text miner reads', 'Hard problems of clinical NLP', 'The clinical ontology',
+    'Trust the text', 'AritmoLab today', 'All good? Not yet', 'ThothII', 'A tour of ThothII',
+    'From datamarts to models', 'Thank you'];
+  const STATUS = ['FINAL', 'FINAL', 'FINAL', 'NEW IN PROTOTYPE', 'REFINED', 'REFINED', 'REFINED', 'REFINED',
+    'DRAFT', 'DRAFT', 'DRAFT', 'DRAFT', 'DRAFT', 'DRAFT'];
+  const CLS = ['final', 'final', 'final', 'proto', 'refined', 'refined', 'refined', 'refined',
+    'draft', 'draft', 'draft', 'draft', 'draft', 'draft'];
+  const grid = document.getElementById('grid');
+  TITLES.forEach((t, i) => {
+    const cell = document.createElement('div');
+    cell.className = 'cell';
+    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>`;
+    grid.appendChild(cell);
+  });
+</script>
+</body>
+</html>