Codex
0f1391e1b7
Reveal.js deck + prototypes + speaker scripts for the talk 'Role of AI in the Analysis of Unstructured Clinical Databases' (AritmoLab — Policlinico San Donato, 2-3 October 2026). Lives on its own branch while in progress; not for main until ready.
162 lines
11 KiB
HTML
162 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>PROTOTYPE · Font variants — AritmoLab deck</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bordeaux: #cb333b; --bordeaux-deep: #8f1204; --bordeaux-tint: #f4dfe1;
|
||
--surface: #fdfcfc; --surface-alt: #f6f5f5; --surface-sunken: #ecebeb;
|
||
--ink: #2a2426; --ink-muted: #6b6568;
|
||
--line: #e3e0e1; --line-strong: #c9c5c6;
|
||
--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||
}
|
||
body.f1 { --sans: 'Manrope', system-ui, sans-serif; --display: 'Manrope', system-ui, sans-serif; }
|
||
body.f2 { --sans: 'IBM Plex Sans', system-ui, sans-serif; --display: 'IBM Plex Serif', Georgia, serif; }
|
||
body.f3 { --sans: 'Source Sans 3', system-ui, sans-serif; --display: 'Source Serif 4', Georgia, serif; }
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { background: var(--surface-sunken); font-family: var(--sans); padding: 36px 0 90px; }
|
||
|
||
.note { width: 1280px; margin: 0 auto 18px; padding: 12px 18px; background: #fff8e6; border: 1px solid #e8d9a8;
|
||
border-radius: 8px; font: 400 13px/1.5 var(--sans); color: #6b5d2a; }
|
||
.note b { font-weight: 700; }
|
||
|
||
.switcher { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
|
||
display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #2a2426;
|
||
border-radius: 9999px; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 10; white-space: nowrap; }
|
||
.switcher .tag { font: 700 10px/1 var(--mono); letter-spacing: .1em; color: #9c9598; padding: 0 10px; }
|
||
.switcher a { display: inline-flex; height: 30px; align-items: center; padding: 0 14px; border-radius: 9999px;
|
||
font: 700 12px/1 var(--sans); color: #fdfcfc; text-decoration: none; opacity: .75; }
|
||
.switcher a.active { background: var(--bordeaux); opacity: 1; }
|
||
.switcher .who { font: 400 11px/1 var(--sans); color: #9c9598; padding: 0 12px 0 8px; max-width: 420px; white-space: normal; }
|
||
|
||
.slide { position: relative; width: 1280px; height: 720px; margin: 0 auto 34px;
|
||
display: flex; flex-direction: column; overflow: hidden;
|
||
background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
|
||
.head { flex: 0 0 104px; display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--line); }
|
||
.head img { height: 80px; display: block; }
|
||
.head-org { font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
|
||
.band { flex: 0 0 46px; display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 40px; background: var(--bordeaux); color: var(--surface); }
|
||
.band-section { font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
|
||
.jump { background: transparent; color: #fff; border: none; padding: 6px 12px;
|
||
font: 700 11.5px/1.2 var(--sans); letter-spacing: .04em; }
|
||
.foot { flex: 0 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
|
||
padding: 0 40px; border-top: 1px solid var(--line);
|
||
font: 600 10px/1.4 var(--sans); letter-spacing: .03em; color: var(--ink-muted); }
|
||
.foot span { white-space: nowrap; }
|
||
.foot span:first-child { overflow: hidden; text-overflow: ellipsis; }
|
||
.sbody { flex: 1; display: flex; flex-direction: column; padding: 32px 48px 22px; }
|
||
|
||
.kicker { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 14px; }
|
||
h1 { font: 600 46px/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); }
|
||
h2 { font: 700 30px/1.15 var(--sans); color: var(--ink); margin: 0 0 10px; }
|
||
.lead { font: 400 16px/1.5 var(--sans); color: var(--ink-muted); margin-top: 10px; }
|
||
.hgap { height: 16px; }
|
||
.title-slide .sbody { justify-content: center; }
|
||
.title-meta { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
|
||
.pill { display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: 9999px;
|
||
background: var(--bordeaux); color: #fdfcfc; font: 700 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
|
||
.what { font: 400 14.5px/1.5 var(--sans); color: var(--ink-muted); }
|
||
.speakers { margin-top: 20px; display: flex; flex-direction: column; gap: 7px; }
|
||
.speakers span { font: 600 15px/1.4 var(--sans); }
|
||
.event { margin-top: 14px; font: italic 400 15px/1.5 var(--display); color: var(--ink-muted); }
|
||
.event-where { margin-top: 7px; font: 600 13.5px/1.4 var(--sans); color: var(--ink-muted); }
|
||
|
||
.points { list-style: none; }
|
||
.points li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line);
|
||
font: 400 15px/1.45 var(--sans); }
|
||
.points li::before { content: ''; position: absolute; left: 0; top: 17px; width: 10px; height: 10px;
|
||
border-radius: 9999px; background: var(--bordeaux); }
|
||
.points b { font-weight: 700; }
|
||
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 6px; }
|
||
.stat { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt);
|
||
padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
|
||
.stat .num { font: 600 44px/1 var(--display); color: var(--bordeaux); letter-spacing: -.02em; }
|
||
.stat .lbl { font: 600 13px/1.35 var(--sans); }
|
||
.stat .sub { font: 400 11.5px/1.4 var(--sans); color: var(--ink-muted); }
|
||
.quote { padding: 14px 20px; border-left: 3px solid var(--bordeaux); background: var(--surface-alt);
|
||
border-radius: 0 8px 8px 0; font: italic 400 15.5px/1.5 var(--display); margin: 4px 0 14px; }
|
||
.code-line { font: 400 13px/1.6 var(--mono); color: var(--ink); background: var(--surface-sunken);
|
||
border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 16px; }
|
||
.code-line b { color: var(--bordeaux-deep); }
|
||
</style>
|
||
</head>
|
||
<body class="f1">
|
||
|
||
<div class="note"><b>EVALUATION ONLY</b> — in questo prototipo i font candidati vengono caricati da CDN solo per essere valutati.
|
||
Nel file finale il vincitore verrà <b>incorporato (woff2 locale)</b>: zero dipendenze da Google a runtime, connection pure assente.
|
||
Oppure: resta Manrope+Fraunces incorporati, nessun cambiamento visivo.</div>
|
||
|
||
<main id="deck"></main>
|
||
|
||
<nav class="switcher">
|
||
<span class="tag">PROTOTYPE</span>
|
||
<a href="?f=1" data-v="1">1 · Manrope only</a>
|
||
<a href="?f=2" data-v="2">2 · IBM Plex</a>
|
||
<a href="?f=3" data-v="3">3 · Source</a>
|
||
<span class="who" id="who"></span>
|
||
</nav>
|
||
|
||
<script>
|
||
const VARIANTS = {
|
||
1: { desc: 'Manrope per tutto (titoli in 800), come il sito Gruppo San Donato — coerenza di brand massima, nessun serif. È il font che il portale GSD usa davvero.' },
|
||
2: { desc: 'IBM Plex Sans (testi) + IBM Plex Serif (titoli): carattere tecnico-istituzionale, nasce per documentazione e presentazioni; Il corsivo del serif è molto leggibile.' },
|
||
3: { desc: 'Source Sans 3 + Source Serif 4 (Adobe, open source): umanista-clinico, pesi e proporzioni molto vicini a Manrope+Fraunces — la via di mezzo se vuoi cambiare senza stravolgere.' },
|
||
};
|
||
const q = new URLSearchParams(location.search);
|
||
const v = ['1','2','3'].includes(q.get('f')) ? q.get('f') : '1';
|
||
document.body.className = 'f' + v;
|
||
document.querySelectorAll('.switcher a').forEach(a => a.classList.toggle('active', a.dataset.v === v));
|
||
document.getElementById('who').textContent = VARIANTS[v].desc;
|
||
|
||
const foot = `<footer class="foot"><span>Role of AI in the Analysis of Unstructured Clinical Databases · Dr. Marco Pancotti - MultiPhysixLab · Dr. Sara Paratico - I.R.C.C.S. Policlinico San Donato · San Donato Milanese, Milan, Italy · 2–3 October 2026</span><span>0X / 14</span></footer>`;
|
||
const head = `<header class="head"><img src="logo.png" alt=""><span class="head-org">AritmoLab · Policlinico San Donato</span></header>
|
||
<nav class="band"><span class="band-section">Sample</span><span class="jump">02 · The project at a glance</span></nav>`;
|
||
|
||
document.getElementById('deck').innerHTML = `
|
||
<section class="slide title-slide">
|
||
${head}
|
||
<div class="sbody">
|
||
<h1>Role of AI in the Analysis of Unstructured Clinical Databases</h1>
|
||
<p class="lead">How we turned a mix of structured and free-text clinical records into a research data platform — the AritmoLab platform experience.</p>
|
||
<div class="title-meta"><span class="pill">AritmoLab</span><span class="what">A clinical data platform hosting cardiology data and analysis tools</span></div>
|
||
<div class="speakers"><span>Dr. Marco Pancotti - MultiPhysixLab</span><span>Dr. Sara Paratico - I.R.C.C.S. Policlinico San Donato</span></div>
|
||
<p class="event">“Multidimensional Characterization of Cardiac Arrhythmias: Role of Electrocardiology in the Artificial Intelligence Era”</p>
|
||
<p class="event-where">San Donato Milanese, Milan, Italy · 2–3 October 2026</p>
|
||
</div>
|
||
${foot}
|
||
</section>
|
||
<section class="slide">
|
||
${head}
|
||
<div class="sbody">
|
||
<div class="kicker">Sample content — headings, numbers, quote, code</div>
|
||
<h2>Deterministic AI, audited numbers</h2>
|
||
<div class="hgap"></div>
|
||
<div class="stat-row">
|
||
<div class="stat"><span class="num">58,438</span><span class="lbl">discharge letters read</span><span class="sub">bilingual IT/EN patterns</span></div>
|
||
<div class="stat"><span class="num">73,389</span><span class="lbl">pathologies extracted</span><span class="sub">two-tier clinical ontology</span></div>
|
||
<div class="stat"><span class="num">2,307</span><span class="lbl">Brugada patients identified</span><span class="sub">clinical review on dashboards</span></div>
|
||
</div>
|
||
<div class="quote">“Il paziente riferisce sincope ricorrente; ECG basale con sopraslivellamento ST in V1–V3; test provocativo con flecainide positivo per pattern Brugada.”</div>
|
||
<ul class="points">
|
||
<li><b>Negation</b> — “fibrillazione atriale esclusa” is not a diagnosis: rules scan a window around every match</li>
|
||
<li><b>Versioned like software</b> — every extracted row records its pattern-library semver</li>
|
||
</ul>
|
||
<div class="hgap"></div>
|
||
<div class="code-line"><b>analysis_function</b>: get_letter_pathologies_cascade · <b>integration_table</b>: cr_lettera_dimissione_diagnosi</div>
|
||
</div>
|
||
${foot}
|
||
</section>`;
|
||
</script>
|
||
</body>
|
||
</html>
|