Skip to content

Instantly share code, notes, and snippets.

@rgstephens

rgstephens/issue15-drill-run-options.html

Created September 7, 2026 03:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rgstephens/731278973cc5b4b0db0022432eaee7c3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rgstephens/731278973cc5b4b0db0022432eaee7c3 to your computer and use it in GitHub Desktop.
Download ZIP
Drill Tracker issue 15 — three drill-run UI design options
Raw
issue15-drill-run-options.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Issue 15 — Drill run UI options</title>
<style>
:root {
--paper: #f6f1e4;
--raised: #ede6d3;
--ink: #2b2b28;
--pencil: #7a7365;
--blue: #3b5b7a;
--red: #b23a2e;
--rule: #c9bfa8;
--bright: #fbf8f0;
--grid: #e3dbc6;
--board: #d8d0bf;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
background: var(--board);
color: var(--ink);
font-family: Georgia, "Times New Roman", serif;
}
button { font: inherit; color: inherit; }
.board {
display: none;
width: 1600px;
height: 1000px;
padding: 34px 42px 42px;
overflow: hidden;
background:
linear-gradient(90deg, transparent 41px, rgb(43 43 40 / 0.09) 42px, transparent 43px),
var(--board);
}
body[data-option="1"] .option-1,
body[data-option="2"] .option-2,
body[data-option="3"] .option-3 { display: block; }
.board-head {
height: 82px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.eyebrow, .label, .mono, .status, .metric-label, .serial, .run-count {
font-family: "Courier New", monospace;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.eyebrow { margin: 0 0 4px; color: var(--blue); font-size: 13px; font-weight: 700; }
.board h1 { margin: 0; font-size: 30px; line-height: 1; }
.thesis { width: 470px; margin: 2px 0 0; color: #5f594e; font-size: 15px; line-height: 1.35; }
.stage {
height: 842px;
display: grid;
grid-template-columns: 1090px 390px;
gap: 26px;
align-items: start;
}
.desktop {
height: 842px;
background: var(--paper);
border: 1px solid #aaa18f;
box-shadow: 0 14px 34px rgb(43 43 40 / 0.13);
overflow: hidden;
}
.desktop-shell { display: grid; grid-template-columns: 180px 1fr; height: 100%; }
.rail { background: var(--raised); border-right: 1px solid var(--rule); padding: 24px 18px; }
.brand { font-weight: 700; font-size: 19px; margin-bottom: 30px; }
.rail-link { padding: 12px 8px; font-weight: 700; border-radius: 4px; }
.rail-link.active { color: var(--blue); background: rgb(59 91 122 / 0.1); }
.desktop-main { min-width: 0; }
.appbar {
height: 64px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--raised);
border-bottom: 1px solid var(--rule);
}
.appbar strong { font-size: 19px; }
.appbar span { color: var(--pencil); font-size: 13px; }
.content { padding: 22px 26px 28px; }
.content-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.content h2 { margin: 0 0 4px; font-size: 25px; }
.sub { color: var(--pencil); margin: 0; font-size: 14px; }
.stamp {
min-height: 46px;
padding: 0 18px;
background: transparent;
color: var(--blue);
border: 2px solid var(--blue);
border-radius: 3px;
font-family: "Courier New", monospace;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
transform: rotate(-1deg);
}
.ghost { min-height: 40px; padding: 0 12px; background: transparent; border: 1px solid var(--pencil); border-radius: 4px; }
.link { min-height: 38px; padding: 0; background: none; border: 0; color: var(--blue); text-decoration: underline; font-weight: 700; }
.danger { color: var(--red); }
.status { font-size: 11px; font-weight: 700; }
.status.progress { color: var(--blue); }
.status.complete { color: var(--red); }
.kebab { border: 0; background: transparent; font-size: 22px; width: 36px; height: 40px; }
.phone-wrap { position: relative; padding-top: 30px; }
.phone-label { position: absolute; top: 0; left: 14px; font: 12px "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; color: #5f594e; }
.phone {
width: 390px;
height: 780px;
overflow: hidden;
border: 8px solid #373632;
border-radius: 34px;
background: var(--paper);
box-shadow: 0 14px 34px rgb(43 43 40 / 0.2);
}
.phone-top { height: 25px; background: var(--raised); position: relative; }
.phone-top::after { content: ""; position: absolute; width: 76px; height: 5px; border-radius: 5px; background: #373632; left: 50%; top: 8px; transform: translateX(-50%); }
.phone .appbar { height: 54px; padding: 0 14px; }
.phone .appbar strong { font-size: 17px; }
.phone-content { padding: 16px 14px 22px; }
.phone h2 { font-size: 22px; margin: 0 0 4px; }
.bottom-tabs { height: 52px; border-top: 1px solid var(--rule); background: var(--raised); display: flex; }
.bottom-tabs span { flex: 1; text-align: center; padding-top: 15px; font-weight: 700; }
.bottom-tabs .active { color: var(--blue); box-shadow: inset 0 -3px var(--blue); }
/* Option 1: Ledger Register */
.register { border-top: 2px solid var(--ink); }
.register-head, .register-row {
display: grid;
grid-template-columns: 20px 180px 126px 86px 80px 90px 112px 28px;
gap: 10px;
align-items: center;
}
.register-head { min-height: 34px; color: var(--pencil); font: 10px "Courier New", monospace; text-transform: uppercase; letter-spacing: .05em; }
.register-row { position: relative; min-height: 72px; border-top: 1px solid var(--rule); }
.register-row.active { background: linear-gradient(90deg, rgb(59 91 122 / .09), transparent 72%); }
.margin-mark { width: 14px; height: 34px; border-left: 3px solid var(--blue); position: relative; }
.margin-mark::after { content: ""; width: 8px; height: 8px; background: var(--blue); border-radius: 50%; position: absolute; left: -5px; top: 13px; }
.seal { width: 18px; height: 18px; border: 2px double var(--red); border-radius: 50%; color: var(--red); display: grid; place-items: center; font: 11px "Courier New", monospace; transform: rotate(-6deg); }
.date strong { display: block; font-size: 15px; }
.date small { color: var(--pencil); }
.num { font-family: "Courier New", monospace; font-weight: 700; }
.resume-mini { border: 1.5px solid var(--blue); color: var(--blue); min-height: 38px; padding: 0 10px; background: transparent; border-radius: 3px; font-weight: 700; }
.register-detail { margin-top: 18px; display: grid; grid-template-columns: 250px 1fr; border: 1px solid var(--rule); background: var(--bright); }
.detail-summary { padding: 18px; border-right: 1px solid var(--rule); }
.detail-summary h3 { margin: 5px 0 14px; font-size: 19px; }
.big-percent { font: 700 54px/1 "Courier New", monospace; color: var(--blue); }
.metric-pair { display: flex; gap: 22px; margin: 10px 0 18px; }
.metric-pair strong { display: block; font: 700 19px "Courier New", monospace; }
.detail-lines { padding: 12px 18px; }
.drill-line { display: grid; grid-template-columns: 1fr 68px 58px 90px; min-height: 42px; align-items: center; border-bottom: 1px solid var(--grid); font-size: 13px; }
.partial { color: var(--blue); font-style: italic; }
.not-reached { color: var(--pencil); }
.phone-register { border-top: 2px solid var(--ink); margin-top: 16px; }
.phone-run { padding: 13px 0 14px 16px; border-bottom: 1px solid var(--rule); position: relative; }
.phone-run.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--blue); }
.phone-run .topline { display: flex; justify-content: space-between; align-items: center; }
.phone-run .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.phone-run .metrics span { color: var(--pencil); font-size: 11px; }
.phone-run .metrics strong { display: block; color: var(--ink); font: 700 17px "Courier New", monospace; }
.phone-actions { display: flex; gap: 8px; margin-top: 11px; }
.phone-actions button { flex: 1; }
/* Option 2: Detachable Scorecard */
.slip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.slip {
display: grid;
grid-template-columns: 1fr 132px;
min-height: 170px;
border: 1px solid var(--rule);
background: var(--bright);
box-shadow: 3px 4px 0 rgb(122 115 101 / .12);
position: relative;
}
.slip.active { border-color: var(--blue); }
.slip-main { padding: 18px 20px; }
.slip-stub { border-left: 1px dashed var(--pencil); padding: 17px 14px; background: repeating-linear-gradient(0deg, transparent 0 27px, var(--grid) 28px); }
.serial { font-size: 10px; color: var(--pencil); }
.slip h3 { margin: 8px 0 3px; font-size: 19px; }
.slip p { margin: 0; color: var(--pencil); font-size: 13px; }
.slip-actions { position: absolute; left: 20px; bottom: 14px; display: flex; gap: 16px; }
.stub-score { font: 700 31px "Courier New", monospace; display: block; }
.stub-percent { font: 700 23px "Courier New", monospace; color: var(--blue); display: block; margin-top: 8px; }
.stub-done { font: 700 13px "Courier New", monospace; display: block; margin-top: 12px; }
.expanded-slip { margin-top: 18px; border: 1px solid var(--rule); background: var(--bright); display: grid; grid-template-columns: 1fr 252px; }
.score-grid { padding: 14px 20px 18px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
.score-grid .drill-line { grid-template-columns: 1fr 54px 50px; }
.resume-panel { border-left: 1px dashed var(--pencil); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.resume-panel h3 { margin: 4px 0; }
.resume-panel p { color: var(--pencil); font-size: 13px; }
.resume-panel .stamp { width: 100%; }
.phone-slip { margin-top: 14px; border: 1px solid var(--rule); background: var(--bright); }
.phone-slip .slip-main { padding: 14px 16px 12px; }
.phone-slip .stub-mobile { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px dashed var(--pencil); padding: 12px 16px; }
.phone-slip .stub-mobile strong { font: 700 18px "Courier New", monospace; display: block; }
.phone-slip .stub-mobile span { font-size: 10px; color: var(--pencil); text-transform: uppercase; }
.phone-slip .phone-actions { padding: 0 16px 14px; }
/* Option 3: Dated Folio */
.folio { height: 690px; display: grid; grid-template-columns: 284px 1fr; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.folio-index { border-right: 1px solid var(--rule); background: var(--raised); overflow: hidden; }
.folio-entry { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 16px 14px; min-height: 112px; border-bottom: 1px solid var(--rule); }
.folio-entry.selected { background: var(--bright); box-shadow: inset 3px 0 var(--blue); }
.date-block { text-align: center; border-right: 1px solid var(--rule); padding-right: 10px; }
.date-block strong { display: block; font: 700 31px/1 "Courier New", monospace; }
.date-block span { font: 11px "Courier New", monospace; text-transform: uppercase; }
.folio-copy strong { display: block; margin: 2px 0 7px; }
.folio-copy p { margin: 0; color: var(--pencil); font: 12px "Courier New", monospace; }
.folio-detail { padding: 22px 24px; background: var(--bright); }
.folio-detail-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.folio-date { display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: center; }
.folio-date .day { font: 700 60px/1 "Courier New", monospace; color: var(--blue); border-right: 1px solid var(--rule); }
.folio-date h3 { margin: 0 0 4px; font-size: 22px; }
.folio-actions { display: flex; gap: 10px; }
.folio-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin: 18px 0; border: 1px solid var(--rule); }
.folio-metric { padding: 13px 16px; border-right: 1px solid var(--rule); }
.folio-metric:last-child { border: 0; }
.folio-metric strong { font: 700 25px "Courier New", monospace; display: block; }
.sequence { display: grid; gap: 0; }
.sequence-row { min-height: 50px; display: grid; grid-template-columns: 28px 1fr 72px 58px 88px; align-items: center; border-bottom: 1px solid var(--grid); font-size: 13px; }
.sequence-no { color: var(--pencil); font: 12px "Courier New", monospace; }
.sequence-row.current { background: rgb(59 91 122 / .08); box-shadow: inset 3px 0 var(--blue); padding-left: 8px; margin-left: -8px; }
.phone-folio-head { display: grid; grid-template-columns: 76px 1fr; align-items: center; margin: 14px 0; }
.phone-folio-head .day { font: 700 56px/1 "Courier New", monospace; color: var(--blue); border-right: 1px solid var(--rule); }
.phone-folio-head div:last-child { padding-left: 14px; }
.phone-folio-metrics { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--rule); }
.phone-folio-metrics div { padding: 10px 6px; text-align: center; border-right: 1px solid var(--rule); }
.phone-folio-metrics div:last-child { border: 0; }
.phone-folio-metrics strong { display: block; font: 700 18px "Courier New", monospace; }
.phone-sequence { margin-top: 12px; }
.phone-sequence .sequence-row { grid-template-columns: 25px 1fr 42px 54px; min-height: 48px; }
@media (max-width: 900px) {
.board { transform-origin: top left; transform: scale(.55); }
}
</style>
</head>
<body data-option="1">
<section class="board option-1">
<header class="board-head">
<div><p class="eyebrow">Issue 15 · Option A</p><h1>Ledger Register</h1></div>
<p class="thesis">A ruled run register optimized for quick comparison. The scorekeeper’s margin marks the unfinished run, while a compact detail ledger keeps every drill inspectable.</p>
</header>
<div class="stage">
<div class="desktop">
<div class="desktop-shell">
<aside class="rail"><div class="brand">Drill Tracker</div><div class="rail-link active">Lists</div><div class="rail-link">Charts</div></aside>
<main class="desktop-main">
<header class="appbar"><strong>Book of Snooker Shots</strong><span>Add passkey &nbsp; Sign out</span></header>
<div class="content">
<div class="content-head"><div><h2>Run history</h2><p class="sub">4 runs · newest first</p></div><button class="stamp">Run set</button></div>
<div class="register">
<div class="register-head"><span></span><span>Started</span><span>Status</span><span>Total</span><span>Success</span><span>Drills</span><span>Action</span><span></span></div>
<div class="register-row active"><span class="margin-mark"></span><span class="date"><strong>6 Sep 2026</strong><small>7:42 pm</small></span><span class="status progress">In progress</span><span class="num">38</span><span class="num">63%</span><span class="num">8 / 12</span><button class="resume-mini">Resume</button><button class="kebab">⋮</button></div>
<div class="register-row"><span class="seal">✓</span><span class="date"><strong>3 Sep 2026</strong><small>6:15 pm</small></span><span class="status complete">Complete</span><span class="num">51</span><span class="num">84%</span><span class="num">12 / 12</span><button class="link">Details</button><button class="kebab">⋮</button></div>
<div class="register-row"><span class="seal">✓</span><span class="date"><strong>30 Aug 2026</strong><small>10:08 am</small></span><span class="status complete">Complete</span><span class="num">46</span><span class="num">77%</span><span class="num">12 / 12</span><button class="link">Details</button><button class="kebab">⋮</button></div>
</div>
<div class="register-detail">
<section class="detail-summary"><span class="status progress">Selected · In progress</span><h3>6 Sep · 7:42 pm</h3><div class="big-percent">63%</div><div class="metric-pair"><div><strong>38</strong><span class="metric-label">Total</span></div><div><strong>8 / 12</strong><span class="metric-label">Drills</span></div></div><button class="stamp">Resume run</button></section>
<section class="detail-lines">
<div class="drill-line"><strong>Potting the Yellow</strong><span class="num">4 / 6</span><span class="num">67%</span><span class="status complete">Complete</span></div>
<div class="drill-line"><strong>Black–Red–Black</strong><span class="num">11 / 15</span><span class="num">73%</span><span class="status complete">Complete</span></div>
<div class="drill-line partial"><strong>Long pot routine</strong><span class="num">2 / 5</span><span>—</span><span>Partial</span></div>
<div class="drill-line not-reached"><strong>Safety escape</strong><span>—</span><span>—</span><span>Not reached</span></div>
</section>
</div>
</div>
</main>
</div>
</div>
<aside class="phone-wrap"><span class="phone-label">390 px mobile</span><div class="phone"><div class="phone-top"></div><header class="appbar"><strong>Run history</strong><span>Sign out</span></header><div class="phone-content"><h2>Book of Snooker Shots</h2><p class="sub">4 runs · newest first</p><div class="phone-register"><article class="phone-run active"><div class="topline"><div><strong>6 Sep · 7:42 pm</strong><div class="status progress">In progress</div></div><button class="kebab">⋮</button></div><div class="metrics"><span><strong>38</strong>Total</span><span><strong>63%</strong>Success</span><span><strong>8 / 12</strong>Drills</span></div><div class="phone-actions"><button class="stamp">Resume run</button><button class="ghost">Details</button></div></article><article class="phone-run"><div class="topline"><div><strong>3 Sep · 6:15 pm</strong><div class="status complete">Complete</div></div><button class="kebab">⋮</button></div><div class="metrics"><span><strong>51</strong>Total</span><span><strong>84%</strong>Success</span><span><strong>12 / 12</strong>Drills</span></div><div class="phone-actions"><button class="ghost">View details</button></div></article><article class="phone-run"><div class="topline"><div><strong>30 Aug · 10:08 am</strong><div class="status complete">Complete</div></div></div><div class="metrics"><span><strong>46</strong>Total</span><span><strong>77%</strong>Success</span><span><strong>12 / 12</strong>Drills</span></div></article></div></div><div class="bottom-tabs"><span class="active">Lists</span><span>Charts</span></div></div></aside>
</div>
</section>
<section class="board option-2">
<header class="board-head">
<div><p class="eyebrow">Issue 15 · Option B</p><h1>Detachable Scorecard</h1></div>
<p class="thesis">Each run is a physical score slip. A perforated tally stub makes score, success, and completion instantly scannable; the selected card unfolds into its drill results.</p>
</header>
<div class="stage">
<div class="desktop"><div class="desktop-shell"><aside class="rail"><div class="brand">Drill Tracker</div><div class="rail-link active">Lists</div><div class="rail-link">Charts</div></aside><main class="desktop-main"><header class="appbar"><strong>Book of Snooker Shots</strong><span>Add passkey &nbsp; Sign out</span></header><div class="content"><div class="content-head"><div><h2>Past scorecards</h2><p class="sub">Choose a run to unfold its results</p></div><button class="stamp">Run set</button></div><div class="slip-grid">
<article class="slip active"><div class="slip-main"><span class="serial">Run 0042</span><h3>6 Sep 2026 · 7:42 pm</h3><span class="status progress">In progress</span><p>Paused at Long pot routine</p><div class="slip-actions"><button class="link">View details</button><button class="link danger">Delete…</button></div></div><aside class="slip-stub"><span class="stub-score">38</span><span class="metric-label">Total</span><span class="stub-percent">63%</span><span class="metric-label">Success</span><span class="stub-done">8 / 12 drills</span></aside></article>
<article class="slip"><div class="slip-main"><span class="serial">Run 0041</span><h3>3 Sep 2026 · 6:15 pm</h3><span class="status complete">Complete</span><p>All drills recorded</p><div class="slip-actions"><button class="link">View details</button><button class="kebab">⋮</button></div></div><aside class="slip-stub"><span class="stub-score">51</span><span class="metric-label">Total</span><span class="stub-percent">84%</span><span class="metric-label">Success</span><span class="stub-done">12 / 12 drills</span></aside></article>
</div><div class="expanded-slip"><section class="score-grid"><div class="drill-line"><strong>Potting the Yellow</strong><span class="num">4</span><span class="num">67%</span></div><div class="drill-line"><strong>Black–Red–Black</strong><span class="num">11</span><span class="num">73%</span></div><div class="drill-line"><strong>Line-up clearance</strong><span class="num">6</span><span class="num">60%</span></div><div class="drill-line"><strong>Cushion control</strong><span class="num">5</span><span class="num">71%</span></div><div class="drill-line partial"><strong>Long pot routine</strong><span class="num">2/5</span><span>—</span></div><div class="drill-line not-reached"><strong>Safety escape</strong><span>—</span><span>—</span></div></section><aside class="resume-panel"><div><span class="serial">Continue run 0042</span><h3>Drill 9 of 12</h3><p>Your two recorded attempts are waiting. Continue where you stopped.</p></div><button class="stamp">Resume run</button></aside></div></div></main></div></div>
<aside class="phone-wrap"><span class="phone-label">390 px mobile</span><div class="phone"><div class="phone-top"></div><header class="appbar"><strong>Past scorecards</strong><span>Sign out</span></header><div class="phone-content"><h2>Book of Snooker Shots</h2><p class="sub">4 scorecards</p><article class="phone-slip"><div class="slip-main"><span class="serial">Run 0042</span><h3>6 Sep · 7:42 pm</h3><span class="status progress">In progress</span><p>Paused at Long pot routine</p></div><div class="stub-mobile"><span><strong>38</strong>Total</span><span><strong>63%</strong>Success</span><span><strong>8 / 12</strong>Drills</span></div><div class="phone-actions"><button class="stamp">Resume</button><button class="ghost">Details</button></div></article><article class="phone-slip"><div class="slip-main"><span class="serial">Run 0041</span><h3>3 Sep · 6:15 pm</h3><span class="status complete">Complete</span></div><div class="stub-mobile"><span><strong>51</strong>Total</span><span><strong>84%</strong>Success</span><span><strong>12 / 12</strong>Drills</span></div><div class="phone-actions"><button class="ghost">View details</button></div></article></div><div class="bottom-tabs"><span class="active">Lists</span><span>Charts</span></div></div></aside>
</div>
</section>
<section class="board option-3">
<header class="board-head">
<div><p class="eyebrow">Issue 15 · Option C</p><h1>Dated Folio</h1></div>
<p class="thesis">A chronological index and reading pane for deeper review. Oversized date blocks turn every run into a memorable practice-ledger entry without sacrificing dense drill detail.</p>
</header>
<div class="stage">
<div class="desktop"><div class="desktop-shell"><aside class="rail"><div class="brand">Drill Tracker</div><div class="rail-link active">Lists</div><div class="rail-link">Charts</div></aside><main class="desktop-main"><header class="appbar"><strong>Book of Snooker Shots</strong><span>Add passkey &nbsp; Sign out</span></header><div class="content"><div class="content-head"><div><h2>Run folio</h2><p class="sub">Review or continue a practice run</p></div><button class="stamp">Run set</button></div><div class="folio"><aside class="folio-index"><article class="folio-entry selected"><div class="date-block"><strong>06</strong><span>Sep<br>2026</span></div><div class="folio-copy"><span class="status progress">In progress</span><strong>7:42 pm</strong><p>63% · 8 / 12 drills</p></div></article><article class="folio-entry"><div class="date-block"><strong>03</strong><span>Sep<br>2026</span></div><div class="folio-copy"><span class="status complete">Complete</span><strong>6:15 pm</strong><p>84% · 12 / 12 drills</p></div></article><article class="folio-entry"><div class="date-block"><strong>30</strong><span>Aug<br>2026</span></div><div class="folio-copy"><span class="status complete">Complete</span><strong>10:08 am</strong><p>77% · 12 / 12 drills</p></div></article></aside><section class="folio-detail"><header class="folio-detail-head"><div class="folio-date"><div class="day">06</div><div><span class="status progress">In progress</span><h3>September 2026 · 7:42 pm</h3><span class="sub">Paused at drill 9</span></div></div><div class="folio-actions"><button class="stamp">Resume run</button><button class="kebab">⋮</button></div></header><div class="folio-metrics"><div class="folio-metric"><strong>38</strong><span class="metric-label">Total score</span></div><div class="folio-metric"><strong>63%</strong><span class="metric-label">Success</span></div><div class="folio-metric"><strong>8 / 12</strong><span class="metric-label">Completed</span></div></div><div class="sequence"><div class="sequence-row"><span class="sequence-no">01</span><strong>Potting the Yellow</strong><span class="num">4 / 6</span><span class="num">67%</span><span class="status complete">Complete</span></div><div class="sequence-row"><span class="sequence-no">02</span><strong>Black–Red–Black</strong><span class="num">11 / 15</span><span class="num">73%</span><span class="status complete">Complete</span></div><div class="sequence-row"><span class="sequence-no">08</span><strong>Cushion control</strong><span class="num">5 / 7</span><span class="num">71%</span><span class="status complete">Complete</span></div><div class="sequence-row current"><span class="sequence-no">09</span><strong>Long pot routine</strong><span class="num">2 / 5</span><span>—</span><span class="status progress">Current</span></div><div class="sequence-row not-reached"><span class="sequence-no">10</span><strong>Safety escape</strong><span>—</span><span>—</span><span>Not reached</span></div></div></section></div></div></main></div></div>
<aside class="phone-wrap"><span class="phone-label">390 px mobile · detail</span><div class="phone"><div class="phone-top"></div><header class="appbar"><strong>← Run history</strong><button class="kebab">⋮</button></header><div class="phone-content"><div class="phone-folio-head"><div class="day">06</div><div><span class="status progress">In progress</span><h2>September</h2><span class="sub">7:42 pm</span></div></div><div class="phone-folio-metrics"><div><strong>38</strong><span class="metric-label">Total</span></div><div><strong>63%</strong><span class="metric-label">Success</span></div><div><strong>8 / 12</strong><span class="metric-label">Drills</span></div></div><div class="phone-actions"><button class="stamp">Resume run</button><button class="ghost danger">Delete…</button></div><div class="phone-sequence"><div class="sequence-row"><span class="sequence-no">01</span><strong>Potting Yellow</strong><span class="num">4</span><span class="num">67%</span></div><div class="sequence-row"><span class="sequence-no">02</span><strong>Black–Red–Black</strong><span class="num">11</span><span class="num">73%</span></div><div class="sequence-row"><span class="sequence-no">08</span><strong>Cushion control</strong><span class="num">5</span><span class="num">71%</span></div><div class="sequence-row current"><span class="sequence-no">09</span><strong>Long pot routine</strong><span class="num">2/5</span><span class="status progress">Current</span></div><div class="sequence-row not-reached"><span class="sequence-no">10</span><strong>Safety escape</strong><span>—</span><span>—</span></div></div></div><div class="bottom-tabs"><span class="active">Lists</span><span>Charts</span></div></div></aside>
</div>
</section>
<script>
const option = new URLSearchParams(location.search).get("option");
document.body.dataset.option = ["1", "2", "3"].includes(option) ? option : "1";
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment