deck+prototype: EN translations same size as Italian; prototype option C revised — rail drops from Marts, no status badges, uniform intensity, capitalized box texts
This commit is contained in:
Codex
@@ -84,13 +84,13 @@
|
||||
.arit .tr-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 24px; align-items: center; }
|
||||
.arit .tr-grid .it, .arit .tr-grid .en { margin: 0; }
|
||||
.arit .tr-grid .en { padding-left: 20px; border-left: 1px solid var(--line-strong);
|
||||
font: 400 14.5px/1.6 var(--sans); color: var(--bordeaux-deep); }
|
||||
font: 400 19px/1.5 var(--sans); color: var(--bordeaux-deep); }
|
||||
.arit .en-tag { display: inline-block; margin-right: 8px; padding: 2.5px 8px; border-radius: 4px;
|
||||
background: var(--bordeaux); color: #fdfcfc; font: 700 9.5px/1 var(--sans); letter-spacing: .12em;
|
||||
vertical-align: 2px; }
|
||||
.arit .points .g { color: var(--bordeaux-deep); }
|
||||
.arit .chipc .g { font-weight: 400; opacity: .78; }
|
||||
.arit .code .en { font: 400 11.5px/1.5 var(--sans); color: var(--bordeaux-deep); }
|
||||
.arit .code .en { font: 400 13px/1.5 var(--sans); color: var(--bordeaux-deep); }
|
||||
.arit .code .en::before { content: 'EN'; display: inline-block; margin-right: 8px; padding: 2px 6px;
|
||||
border-radius: 3px; background: var(--bordeaux); color: #fdfcfc;
|
||||
font: 700 8.5px/1 var(--sans); letter-spacing: .1em; }
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>AritmoLab — Role of AI in the Analysis of Unstructured Clinical Databases</title>
|
||||
<link rel="stylesheet" href="vendor/reveal/dist/reveal.css">
|
||||
<link rel="stylesheet" href="fonts.css?v=8">
|
||||
<link rel="stylesheet" href="deck.css?v=27">
|
||||
<link rel="stylesheet" href="deck.css?v=28">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal"><div class="slides">
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<!doctype html>
|
||||
<!-- PROTOTYPE (throwaway) — Three variants of the "outputs from the datamarts" zone
|
||||
for deck slide "The problem". Switchable via ?variant=A|B|C, floating switcher.
|
||||
Question: how should Dashboards / Machine Learning / Predictive Statistics
|
||||
be represented as the three outputs of the Marts stage? -->
|
||||
<!-- PROTOTYPE (throwaway) — Option C "Maturity rail", revised per user feedback:
|
||||
connector starts from the Marts stage · no live/next badges · uniform stroke
|
||||
intensity · texts inside boxes capitalized · EN translation same size as Italian.
|
||||
This is the only variant carried forward; A and B were discarded. -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PROTOTYPE · Slide “The problem” — outputs from the datamarts (3 options)</title>
|
||||
<title>PROTOTYPE · Slide “The problem” — outputs rail from the datamarts (option C, revised)</title>
|
||||
<link rel="stylesheet" href="/deck/fonts.css">
|
||||
<style>
|
||||
:root {
|
||||
@@ -50,86 +50,41 @@
|
||||
.tr-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 22px; align-items: center; }
|
||||
.tr-grid .it, .tr-grid .en { margin: 0; }
|
||||
.tr-grid .en { padding-left: 18px; border-left: 1px solid var(--line-strong);
|
||||
font: 400 12.5px/1.55 var(--sans); color: var(--bordeaux-deep); }
|
||||
font: 400 16.5px/1.5 var(--sans); color: var(--bordeaux-deep); }
|
||||
.en-tag { display: inline-block; margin-right: 7px; padding: 2px 7px; border-radius: 4px;
|
||||
background: var(--bordeaux); color: #fdfcfc; font: 700 9px/1 var(--sans); letter-spacing: .12em; vertical-align: 1px; }
|
||||
.quote small { display: block; margin-top: 5px; font: 600 9.5px/1.4 var(--sans); font-style: normal;
|
||||
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
|
||||
background: var(--bordeaux); color: #fdfcfc; font: 700 9px/1 var(--sans); letter-spacing: .12em; vertical-align: 3px; }
|
||||
|
||||
.pipeline { display: flex; align-items: stretch; gap: 10px; }
|
||||
.stage { flex: 1; padding: 10px 8px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); }
|
||||
.stage b { display: block; font: 700 12.5px/1.2 var(--sans); margin-bottom: 3px; }
|
||||
.stage span { display: block; font: 400 10.5px/1.35 var(--sans); color: var(--ink-muted); }
|
||||
.stage b { display: block; font: 700 12.5px/1.2 var(--sans); margin-bottom: 3px; text-transform: uppercase; }
|
||||
.stage span { display: block; font: 400 10.5px/1.35 var(--sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .02em; }
|
||||
.stage .tag { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 9999px;
|
||||
background: var(--bordeaux); color: #fdfcfc; font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
|
||||
.stage.ai { background: var(--bordeaux-tint); border-color: var(--bordeaux); }
|
||||
.arrow { align-self: center; color: var(--line-strong); font: 700 17px/1 var(--sans); }
|
||||
.stage.hot { background: #fdf1f2; border-color: var(--bordeaux); }
|
||||
|
||||
.thoth-wrap { display: flex; justify-content: flex-end; margin-top: 12px; }
|
||||
.thoth-wrap.left { justify-content: flex-start; }
|
||||
.thoth-wrap { display: flex; justify-content: flex-start; margin-top: 12px; }
|
||||
.thoth-col { width: 500px; text-align: center; }
|
||||
.thoth-arrow { color: var(--line-strong); font: 700 15px/1 var(--sans); margin: 1px 0; }
|
||||
.thoth-box { border: 1px solid var(--bordeaux); border-radius: 8px; padding: 9px 14px;
|
||||
background: var(--surface-alt); font: 600 11.5px/1.4 var(--sans); }
|
||||
background: var(--surface-alt); font: 600 11.5px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .02em; }
|
||||
.thoth-box .tag { display: inline-block; margin-right: 7px; padding: 2px 9px; border-radius: 9999px;
|
||||
background: var(--bordeaux); color: #fdfcfc; font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
|
||||
|
||||
/* ---- outputs icons ---- */
|
||||
.oicon { width: 34px; height: 34px; color: var(--bordeaux); display: block; }
|
||||
.oicon * { vector-effect: non-scaling-stroke; }
|
||||
|
||||
/* ---- variant A: branch tree from Marts ---- */
|
||||
.fanwrap { display: flex; justify-content: flex-end; margin-top: 0; }
|
||||
.fan { width: 58%; position: relative; padding-top: 16px; }
|
||||
.fan .drop { position: absolute; top: -6px; right: 128px; width: 2px; height: 22px; background: var(--bordeaux); }
|
||||
.fan .rail { height: 2px; background: var(--bordeaux); margin: 0 60px 0 40px; position: relative; }
|
||||
.fan .nodes { display: flex; margin-top: 0; }
|
||||
.fan .node { flex: 1; text-align: center; position: relative; padding-top: 14px; }
|
||||
.fan .node::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 14px;
|
||||
background: var(--bordeaux); transform: translateX(-50%); }
|
||||
.fan .node .oicon { margin: 0 auto 5px; }
|
||||
.fan .node b { display: block; font: 700 13px/1.2 var(--sans); color: var(--ink); }
|
||||
.fan .node span { display: block; font: 400 10.5px/1.35 var(--sans); color: var(--ink-muted); margin-top: 2px; }
|
||||
|
||||
/* ---- variant B: outputs band ---- */
|
||||
.oband { margin-top: 12px; }
|
||||
.oband .lbl { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
|
||||
color: var(--bordeaux); text-align: center; margin-bottom: 8px; }
|
||||
.oband .tiles { display: flex; gap: 12px; }
|
||||
.oband .tile { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 14px;
|
||||
border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); }
|
||||
.oband .tile .ic { flex: 0 0 44px; height: 44px; border-radius: 9999px; background: var(--bordeaux-tint);
|
||||
display: flex; align-items: center; justify-content: center; }
|
||||
.oband .tile .ic .oicon { width: 26px; height: 26px; }
|
||||
.oband .tile b { display: block; font: 700 13.5px/1.2 var(--sans); color: var(--ink); }
|
||||
.oband .tile span { display: block; margin-top: 2px; font: 400 11px/1.35 var(--sans); color: var(--ink-muted); }
|
||||
|
||||
/* ---- variant C: maturity rail ---- */
|
||||
.railwrap { display: flex; justify-content: flex-end; margin-top: 10px; }
|
||||
.rail { width: 560px; border-left: 2px solid var(--bordeaux); padding: 2px 0 2px 0; }
|
||||
.rail .row { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 16px; position: relative; }
|
||||
.rail .row::before { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; background: var(--bordeaux); }
|
||||
.rail .row .oicon { flex: 0 0 26px; width: 26px; height: 26px; }
|
||||
.rail .row b { font: 700 13.5px/1.2 var(--sans); color: var(--ink); }
|
||||
.rail .row span.d { font: 400 11px/1.3 var(--sans); color: var(--ink-muted); }
|
||||
.rail .row .st { margin-left: auto; font: 700 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
|
||||
padding: 3px 9px; border-radius: 9999px; }
|
||||
.rail .row.today .st { background: var(--bordeaux); color: #fdfcfc; }
|
||||
.rail .row.next { border: 1px dashed var(--line-strong); border-radius: 8px; background: transparent; }
|
||||
.rail .row.next .oicon { opacity: .55; }
|
||||
.rail .row.next .st { border: 1px solid var(--line-strong); color: var(--ink-muted); }
|
||||
/* ---- outputs rail (option C, revised) ---- */
|
||||
.railwrap { position: relative; display: flex; justify-content: flex-end; margin-top: 18px; }
|
||||
.conn-drop { position: absolute; top: -14px; width: 2px; background: var(--bordeaux); }
|
||||
.conn-elbow { position: absolute; height: 2px; background: var(--bordeaux); }
|
||||
.rail { width: 560px; border-left: 2px solid var(--bordeaux); padding-top: 14px; }
|
||||
.rail .lbl { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
|
||||
color: var(--bordeaux); margin: 0 0 6px 16px; }
|
||||
.rail .row { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 16px; position: relative; }
|
||||
.rail .row::before { content: ''; position: absolute; left: -2px; top: 50%; width: 14px; height: 2px; background: var(--bordeaux); }
|
||||
.rail .row .oicon { flex: 0 0 26px; width: 26px; height: 26px; color: var(--bordeaux); display: block; }
|
||||
.rail .row b { font: 700 13.5px/1.2 var(--sans); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
|
||||
.rail .row span.d { font: 400 11px/1.3 var(--sans); color: var(--ink-muted); }
|
||||
|
||||
/* ---- variant switcher (prototype chrome) ---- */
|
||||
.switch { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 50;
|
||||
display: flex; align-items: center; gap: 10px; background: #2a2426; color: #fdfcfc;
|
||||
padding: 8px 12px; border-radius: 9999px; box-shadow: 0 6px 22px rgba(0,0,0,.35);
|
||||
font: 600 12.5px/1 var(--sans); }
|
||||
.switch button { border: none; background: #4a4345; color: #fdfcfc; width: 28px; height: 28px;
|
||||
border-radius: 9999px; font: 700 14px/1 var(--sans); cursor: pointer; }
|
||||
.switch button:hover { background: var(--bordeaux); }
|
||||
.caption { max-width: 1200px; margin: 12px auto 0; text-align: center;
|
||||
font: 400 12.5px/1.5 var(--sans); color: var(--ink-muted); }
|
||||
.caption b { color: var(--ink); }
|
||||
@@ -137,8 +92,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="proto-head">
|
||||
<b>Prototype — slide “The problem” · outputs from the datamarts</b>
|
||||
<span>Three structural options for Dashboards / Machine Learning / Predictive Statistics. Use the bar below or the arrow keys.</span>
|
||||
<b>Prototype (revised) — slide “The problem” · outputs rail from the datamarts</b>
|
||||
<span>Option C only: connector from Marts · no status badges · uniform intensity · capitalized box texts.</span>
|
||||
</div>
|
||||
|
||||
<div class="frame">
|
||||
@@ -156,7 +111,7 @@
|
||||
<p class="en"><span class="en-tag">EN</span>“The patient reports recurrent syncope; baseline ECG with ST-segment elevation in V1–V3; flecainide provocation test positive for a Brugada pattern.”</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pipeline" id="pipeline">
|
||||
<div class="pipeline">
|
||||
<div class="stage"><b>Sources</b><span>Cardioref · Genetic data<br>Omics Portal · ECG</span></div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="stage"><b>Staging</b><span>raw replica</span></div>
|
||||
@@ -167,8 +122,26 @@
|
||||
<div class="arrow">→</div>
|
||||
<div class="stage hot" id="marts"><b>Marts</b><span>dbt · Superset</span></div>
|
||||
</div>
|
||||
<div class="variant-zone"></div>
|
||||
<div class="thoth-wrap" id="thothwrap">
|
||||
<div class="railwrap" id="railwrap">
|
||||
<div class="conn-drop" id="conn-drop"></div>
|
||||
<div class="conn-elbow" id="conn-elbow"></div>
|
||||
<div class="rail" id="rail">
|
||||
<div class="lbl">outputs of the datamarts</div>
|
||||
<div class="row">
|
||||
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 29 h26"/><rect x="7" y="17" width="5" height="12" rx="1"/><rect x="15" y="9" width="5" height="20" rx="1"/><rect x="23" y="13" width="5" height="16" rx="1"/></svg>
|
||||
<b>Dashboards</b><span class="d">clinical review on Superset</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="7" cy="7" r="2.6"/><circle cx="7" cy="27" r="2.6"/><circle cx="17" cy="17" r="3.4"/><circle cx="27" cy="7" r="2.6"/><circle cx="27" cy="27" r="2.6"/><path d="M9.3 8.8 L14.6 14.6"/><path d="M9.3 25.2 L14.6 19.4"/><path d="M19.4 14.6 L24.7 8.8"/><path d="M19.4 19.4 L24.7 25.2"/></svg>
|
||||
<b>Machine Learning</b><span class="d">cohort tables for model training</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 27 L11 19 L17 22 L23 13"/><path d="M23 13 L30 6" stroke-dasharray="3 3.4"/><circle cx="30" cy="6" r="2.2" fill="currentColor" stroke="none"/><path d="M3 31 h28" opacity=".35"/></svg>
|
||||
<b>Predictive Statistics</b><span class="d">outcomes & risk analysis</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thoth-wrap">
|
||||
<div class="thoth-col">
|
||||
<div class="thoth-arrow">↑</div>
|
||||
<div class="thoth-box"><span class="tag">AI</span>ThothII — natural-language → SQL over the DWH, builds the final datamarts</div>
|
||||
@@ -178,112 +151,35 @@
|
||||
<div class="foot"><span>Role of AI in the Analysis of Unstructured Clinical Databases</span><span>Dr. Marco Pancotti - MultiPhysixLab</span><span>Dr. Sara Paratico - Gruppo San Donato</span><span>San Donato Milanese, Milan, Italy · 2–3 October 2026</span><span>04 / 14</span></div>
|
||||
</div>
|
||||
|
||||
<p class="caption" id="caption"></p>
|
||||
|
||||
<div class="switch">
|
||||
<button id="prev" aria-label="previous variant">←</button>
|
||||
<span id="label"></span>
|
||||
<button id="next" aria-label="next variant">→</button>
|
||||
</div>
|
||||
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<g id="i-dash">
|
||||
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
|
||||
<path d="M4 29 h26"/><rect x="7" y="17" width="5" height="12" rx="1"/><rect x="15" y="9" width="5" height="20" rx="1"/><rect x="23" y="13" width="5" height="16" rx="1"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="i-ml">
|
||||
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<circle cx="7" cy="7" r="2.6"/><circle cx="7" cy="27" r="2.6"/><circle cx="17" cy="17" r="3.4"/><circle cx="27" cy="7" r="2.6"/><circle cx="27" cy="27" r="2.6"/>
|
||||
<path d="M9.3 8.8 L14.6 14.6"/><path d="M9.3 25.2 L14.6 19.4"/><path d="M19.4 14.6 L24.7 8.8"/><path d="M19.4 19.4 L24.7 25.2"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="i-pred">
|
||||
<svg class="oicon" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
|
||||
<path d="M3 27 L11 19 L17 22 L23 13"/><path d="M23 13 L30 6" stroke-dasharray="3 3.4"/><circle cx="30" cy="6" r="2.2" fill="currentColor" stroke="none"/><path d="M3 31 h28" opacity=".35"/>
|
||||
</svg>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
<p class="caption"><b>Option C, revised.</b> The rail drops straight from the Marts stage; the three outputs have equal
|
||||
visual weight and no status labels; texts inside the diagram boxes are capitalized; the EN translation is now the same size as the Italian.</p>
|
||||
|
||||
<script>
|
||||
const ICON = {
|
||||
dash: document.getElementById('i-dash').innerHTML,
|
||||
ml: document.getElementById('i-ml').innerHTML,
|
||||
pred: document.getElementById('i-pred').innerHTML
|
||||
};
|
||||
const VARIANTS = {
|
||||
A: {
|
||||
name: 'A — Branch from Marts',
|
||||
caption: '<b>A · Branch from Marts.</b> The three outputs fan out of the Marts stage as icon nodes on a connector tree: lightest visual weight, reads as “the pipeline flows on”. ThothII moves bottom-left, so left = AI reads the DWH, right = research outputs.',
|
||||
html: `
|
||||
<div class="fanwrap">
|
||||
<div class="fan">
|
||||
<div class="drop"></div>
|
||||
<div class="rail"></div>
|
||||
<div class="nodes">
|
||||
<div class="node">${ICON.dash}<b>Dashboards</b><span>clinical review on Superset</span></div>
|
||||
<div class="node">${ICON.ml}<b>Machine Learning</b><span>cohort tables for model training</span></div>
|
||||
<div class="node">${ICON.pred}<b>Predictive Statistics</b><span>outcomes & risk analysis</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
},
|
||||
B: {
|
||||
name: 'B — Products band',
|
||||
caption: '<b>B · Products band.</b> A labelled full-width band under the pipeline: three equal tiles, icon in a tinted disc + name + one-liner. Reads as “the three products of the platform” — most explicit, heaviest.',
|
||||
html: `
|
||||
<div class="oband">
|
||||
<div class="lbl">what the datamarts enable</div>
|
||||
<div class="tiles">
|
||||
<div class="tile"><span class="ic">${ICON.dash}</span><span><b>Dashboards</b><span>clinical review on Superset dashboards</span></span></div>
|
||||
<div class="tile"><span class="ic">${ICON.ml}</span><span><b>Machine Learning</b><span>cohort tables, ready for model training</span></span></div>
|
||||
<div class="tile"><span class="ic">${ICON.pred}</span><span><b>Predictive Statistics</b><span>outcomes, risk and survival analysis</span></span></div>
|
||||
</div>
|
||||
</div>`
|
||||
},
|
||||
C: {
|
||||
name: 'C — Maturity rail',
|
||||
caption: '<b>C · Maturity rail.</b> A rail drops from Marts into three rows that encode the roadmap: Dashboards is live today (solid), Machine Learning and Predictive Statistics are the next steps (dashed). Sets up the “what is still missing” beat later in the talk.',
|
||||
html: `
|
||||
<div class="railwrap">
|
||||
<div class="rail">
|
||||
<div class="lbl">outputs of the datamarts</div>
|
||||
<div class="row today">${ICON.dash}<b>Dashboards</b><span class="d">clinical review on Superset</span><span class="st">live today</span></div>
|
||||
<div class="row next">${ICON.ml}<b>Machine Learning</b><span class="d">cohort tables for model training</span><span class="st">next</span></div>
|
||||
<div class="row next">${ICON.pred}<b>Predictive Statistics</b><span class="d">outcomes & risk analysis</span><span class="st">next</span></div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
};
|
||||
const keys = Object.keys(VARIANTS);
|
||||
const cur = () => {
|
||||
const v = (new URLSearchParams(location.search).get('variant') || 'A').toUpperCase();
|
||||
return keys.includes(v) ? v : 'A';
|
||||
};
|
||||
function render() {
|
||||
const v = cur();
|
||||
document.querySelector('.variant-zone').innerHTML = VARIANTS[v].html;
|
||||
document.getElementById('label').textContent = VARIANTS[v].name;
|
||||
document.getElementById('caption').innerHTML = VARIANTS[v].caption;
|
||||
// ThothII placement: A and C put the outputs on the right → ThothII moves bottom-left
|
||||
document.getElementById('thothwrap').classList.toggle('left', v !== 'B');
|
||||
// Draw the connector: vertical drop from the center of the Marts stage,
|
||||
// elbow leftward, into the top of the rail.
|
||||
function alignConnector() {
|
||||
const marts = document.getElementById('marts');
|
||||
const rail = document.getElementById('rail');
|
||||
const wrap = document.getElementById('railwrap');
|
||||
const drop = document.getElementById('conn-drop');
|
||||
const elbow = document.getElementById('conn-elbow');
|
||||
const mr = marts.getBoundingClientRect();
|
||||
const rr = rail.getBoundingClientRect();
|
||||
const wr = wrap.getBoundingClientRect();
|
||||
const cx = mr.left + mr.width / 2 - wr.left; // Marts center, wrap coords
|
||||
const railLeft = rr.left - wr.left; // rail border x, wrap coords
|
||||
const railTop = rr.top - wr.top; // rail top, wrap coords
|
||||
drop.style.left = (cx - 1) + 'px';
|
||||
drop.style.top = '-' + (rr.top - mr.bottom + 2) + 'px';
|
||||
drop.style.height = (rr.top - mr.bottom + 2 + railTop) + 'px';
|
||||
elbow.style.left = railLeft + 'px';
|
||||
elbow.style.width = Math.max(0, cx - railLeft) + 'px';
|
||||
elbow.style.top = (railTop - 1) + 'px';
|
||||
}
|
||||
function cycle(dir) {
|
||||
const i = keys.indexOf(cur());
|
||||
const v = keys[(i + dir + keys.length) % keys.length];
|
||||
const u = new URL(location);
|
||||
u.searchParams.set('variant', v);
|
||||
location.replace(u);
|
||||
}
|
||||
document.getElementById('prev').onclick = () => cycle(-1);
|
||||
document.getElementById('next').onclick = () => cycle(1);
|
||||
addEventListener('keydown', e => {
|
||||
if (e.key === 'ArrowLeft') cycle(-1);
|
||||
if (e.key === 'ArrowRight') cycle(1);
|
||||
});
|
||||
render();
|
||||
addEventListener('load', alignConnector);
|
||||
addEventListener('resize', alignConnector);
|
||||
if (document.fonts && document.fonts.ready) document.fonts.ready.then(alignConnector);
|
||||
alignConnector();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user