diff --git a/presentation/prototype/scatter-variants.html b/presentation/prototype/scatter-variants.html index cfc1c1f9..cfaadaba 100644 --- a/presentation/prototype/scatter-variants.html +++ b/presentation/prototype/scatter-variants.html @@ -88,16 +88,19 @@ .src-scatter .isle .nm { font-size: 11.5px; } - .todo { border: 2px dashed var(--bordeaux); border-radius: 8px; background: #fff; padding: 10px 14px; + .todo { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--bordeaux); border-radius: 8px; background: #fff; padding: 10px 14px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(42,36,38,.06); } - .todo b { display: block; font: 700 15px/1.3 var(--sans); color: var(--bordeaux-deep); } - .todo span { display: block; font: 400 11px/1.4 var(--sans); color: var(--ink-muted); margin-top: 2px; } + .todo .q { font: 800 26px/1 var(--sans); color: var(--bordeaux-deep); } + .todo .tx { display: flex; flex-direction: column; } + .todo b { font: 700 15px/1.3 var(--sans); color: var(--bordeaux-deep); } + .todo .tx span { font: 400 12px/1.4 var(--sans); color: var(--ink-muted); margin-top: 2px; } + .missing-title { position: absolute; font: 700 30px/1.2 var(--sans); color: var(--bordeaux-deep); } .todo-stack { position: absolute; z-index: 2; } .isle .ico { color: var(--bordeaux); } .isle.ghost .ico { color: #9a938f; } .isle .nm { font-size: 15px; } - .isle .sc { font-size: 11.5px; max-width: 230px; } + .isle .sc { font-size: 13.5px; max-width: 240px; } /* popup */ .ai-pop { position: fixed; inset: 0; z-index: 100; background: rgba(42,36,38,.45); @@ -242,26 +245,19 @@ const ORBIT_CFG = { { key: 'genetic', x: '75%', y: '6%', rot: 3, size: 114 }, { key: 'omics', x: '1%', y: '56%', rot: -2, size: 118 }, { key: 'ecg', x: '75%', y: '56%', rot: 2, size: 114 } ], - stack: { left: '25%', top: '20%', width: '50%' }, offsets: ['0%', '7%', '4%', '9%'], icon: 114, grid: true }, + stack: { left: '32%', top: '22%', width: '35%' }, offsets: ['0%', '7%', '4%', '9%'], icon: 114, grid: true }, }; function orbitSlide02(v) { const cfg = ORBIT_CFG[v]; let h = `
` + - TODO_STACK.map(([n, c], i) => `
${n}${c}
`).join('') + `
`; + TODO_STACK.map(([n, c], i) => `
?${n}${c}
`).join('') + ``; for (const s of cfg.isles) { const sys = SYS.find(vv => vv.key === s.key); h += ``; } - const ghosts = [ - ['No Health Intelligence', 'nothing for historical data', '8%', '72%'], - ['No ML-ready datamarts', 'nothing for predictive research', '62%', '72%'], - ]; - for (const [name, scope, x, y] of ghosts) { - h += `
- ${ico('ghost', 92)}${name}${scope}
`; - } + h += `
Missing Pieces
`; return h; } @@ -296,8 +292,7 @@ document.getElementById('deck').innerHTML = `
${chrome('Where we started')}
-
Twenty years ago
-

Four islands and two missing pieces

+

Four islands and four missing pieces

${orbitSlide02(v)}
${foot}