54 lines
3.3 KiB
HTML
54 lines
3.3 KiB
HTML
<!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>
|