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

prototype: Orbit composition — missing pieces center, narrower rects, question marks

Browse Source 
- slide 02: four text-only 'missing' ghosts replaced by a large
  'Missing Pieces' title over a narrower center column of four dashed
  rects, each opening with a bordeaux question mark
- title now reads 'four missing pieces' (matches the center stack)
- kicker 'Twenty years ago' removed
- deck.css: flex fix for Reveal inline display, snapshot/chart
  placeholder grids, vision-slide rhythm
This commit is contained in:
Codex
2026-09-07 11:10:45 +02:00
parent 0f1391e1b7
commit b4bda2f163
1 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/prototype/scatter-variants.html
+11 -16
View File
@@ -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 = `<div class="todo-stack" style="left:${cfg.stack.left}; top:${cfg.stack.top}; width:${cfg.stack.width}">` +
TODO_STACK.map(([n, c], i) => `<div class="todo" style="margin-left:${cfg.offsets[i]}"><b>${n}</b><span>${c}</span></div>`).join('') + `</div>`;
TODO_STACK.map(([n, c], i) => `<div class="todo" style="margin-left:${cfg.offsets[i]}"><span class="q">?</span><span class="tx"><b>${n}</b><span>${c}</span></span></div>`).join('') + `</div>`;
for (const s of cfg.isles) {
const sys = SYS.find(vv => vv.key === s.key);
h += `<button class="isle" data-start="${s.key}" style="--rot:${s.rot}deg; --size:${s.size}px; left:${s.x}; top:${s.y}; width:230px">
${ico(s.key, s.size)}<span class="nm">${sys.name}</span><span class="sc">${sys.scope}</span></button>`;
}
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 += `<div class="isle ghost" style="--rot:0deg; --size:92px; left:${x}; top:${y}; width:220px">
${ico('ghost', 92)}<span class="nm" style="color:var(--bordeaux-deep)">${name}</span><span class="sc">${scope}</span></div>`;
}
h += `<div class="missing-title" style="left:calc(${cfg.stack.left} + 14px); top:calc(${cfg.stack.top} - 46px); width:${cfg.stack.width}">Missing Pieces</div>`;
return h;
}
@@ -296,8 +292,7 @@ document.getElementById('deck').innerHTML = `
<section class="slide">
${chrome('Where we started')}
<div class="sbody">
<div class="kicker">Twenty years ago</div>
<h2>Four islands and two missing pieces</h2>
<h2>Four islands and four missing pieces</h2>
<div class="scatter">${orbitSlide02(v)}</div>
</div>
${foot}