Skip to content

Instantly share code, notes, and snippets.

@rgstephens

rgstephens/issue1-option-a-figure-plate.html

Created September 11, 2026 02:18
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save rgstephens/fd4302403a533f6aaff22e0f5e8b3378 to your computer and use it in GitHub Desktop.
Download ZIP
drill-tracker issue #1 — placeholder
Raw
issue1-option-a-figure-plate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drill Tracker — Issue #1 Option A: Figure plate</title>
<style>
:root {
--slate: #f6f1e4; --slate-raised: #ede6d3; --dust: #2b2b28; --dust-dim: #7a7365;
--cue-chalk: #3b5b7a; --tip-leather: #9c9483; --miscue: #b23a2e; --chrome-bg: #ede6d3;
--on-accent: #f6f1e4; --rule: #c9bfa8; --paper-bright: #fbf8f0; --grid: #e3dbc6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; color: var(--dust); background: #cfc6b4; }
h1, h2, h3 { font-weight: 700; margin: 0; }
button { font-family: inherit; }
.page-head { padding: 24px 20px 8px; max-width: 1000px; margin: 0 auto; }
.page-head p { max-width: 46rem; }
section.block { padding: 8px 20px 40px; max-width: 1000px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.row h3 { margin-bottom: 12px; font-size: 15px; color: var(--dust-dim); font-weight: 700; }
.phone {
width: 360px; background: var(--slate); color: var(--dust); min-height: 480px;
display: flex; flex-direction: column; box-shadow: 0 12px 40px rgb(43 43 40 / 0.28);
border-radius: 6px; overflow: hidden;
}
.hdr {
background: var(--chrome-bg); border-bottom: 1px solid var(--rule); display: flex;
align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px;
}
.hdr strong { font-size: 17px; }
.chip {
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
font-family: "Courier New", monospace; border-radius: 3px; padding: 5px 9px;
background: transparent; color: var(--tip-leather); border: 1px solid var(--tip-leather);
}
.body { padding: 16px; flex: 1; }
.back-link { background: none; border: 0; color: var(--cue-chalk); font: inherit; font-size: 14px; padding: 0; margin-bottom: 12px; cursor: pointer; }
.drill-title { font-size: 22px; margin-bottom: 4px; }
.drill-notes {
margin: 0 0 12px; padding-left: 12px; border-left: 2px solid var(--rule);
color: var(--dust-dim); font-style: italic;
}
/* ---- Option A: Figure plate ---- */
.drill-figure {
margin: 0 0 16px; padding: 8px; border: 1px solid var(--rule); border-radius: 4px;
background: var(--paper-bright);
}
.drill-figure img { display: block; width: 100%; border-radius: 2px; }
.drill-figure figcaption {
margin-top: 8px; font-family: "Courier New", monospace; text-transform: uppercase;
letter-spacing: 0.05em; font-size: 11px; color: var(--dust-dim); display: flex; justify-content: space-between;
}
.drill-figure figcaption button {
background: none; border: 0; color: var(--tip-leather); font: inherit; font-size: 11px;
text-decoration: underline; cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0;
}
.drill-figure.empty {
display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
min-height: 120px; border-style: dashed; background: transparent;
}
.drill-figure.empty .add-figure {
background: none; border: 2px dashed var(--rule); border-radius: 50%; width: 40px; height: 40px;
color: var(--dust-dim); font-size: 20px; cursor: pointer;
}
.drill-figure.empty span { font-size: 13px; color: var(--dust-dim); }
.drill-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.drill-tabs button {
background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dust);
font: inherit; font-weight: 700; min-height: 44px; padding: 0 4px; cursor: pointer;
}
.drill-tabs button[aria-pressed="true"] { color: var(--cue-chalk); border-bottom: 3px dashed var(--cue-chalk); }
.meta { font-size: 13px; color: var(--dust-dim); }
.spots { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
button.spot {
min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 6px;
border: 2px solid rgb(43 43 40 / 0.3); background: transparent; color: var(--dust);
font: inherit; font-weight: 700; cursor: pointer;
}
</style>
</head>
<body>
<div class="page-head">
<h1>Issue #1 — Option A: Figure plate</h1>
<p>
The drill's diagram sits in its own ruled plate — bordered like a
printed illustration in the book this catalog comes from — directly
under the title and notes, always visible above the Log/History
tabs. A small Courier caption doubles as the replace/remove control.
Reference stays on screen the whole time you're scoring, without
crowding the spots below it.
</p>
</div>
<section class="block row">
<div>
<h3>Empty — no diagram added yet</h3>
<div class="phone">
<div class="hdr"><strong>Potting the Yellow</strong><span class="chip">Saved</span></div>
<div class="body">
<button class="back-link">&larr; Practice</button>
<h2 class="drill-title">Potting the Yellow</h2>
<p class="drill-notes">p. 7</p>
<div class="drill-figure empty">
<button class="add-figure" aria-label="Add a diagram or photo">+</button>
<span>Add a diagram or photo</span>
</div>
<div class="drill-tabs">
<button aria-pressed="true">Log</button>
<button>History</button>
</div>
<p class="meta">Attempt 1 of 5 &middot; 1&ndash;6</p>
<div class="spots">
<button class="spot">1</button><button class="spot">2</button><button class="spot">3</button>
<button class="spot">4</button><button class="spot">5</button><button class="spot">6</button>
</div>
</div>
</div>
</div>
<div>
<h3>With a diagram attached</h3>
<div class="phone">
<div class="hdr"><strong>Potting the Yellow</strong><span class="chip">Saved</span></div>
<div class="body">
<button class="back-link">&larr; Practice</button>
<h2 class="drill-title">Potting the Yellow</h2>
<p class="drill-notes">p. 7</p>
<figure class="drill-figure">
<img src="assets/yellow-pot-diagram.webp" alt="Diagram: potting the yellow from baulk" />
<figcaption>
<span>Fig. 1 &middot; Potting the Yellow</span>
<button type="button">Replace</button>
</figcaption>
</figure>
<div class="drill-tabs">
<button aria-pressed="true">Log</button>
<button>History</button>
</div>
<p class="meta">Attempt 1 of 5 &middot; 1&ndash;6</p>
<div class="spots">
<button class="spot">1</button><button class="spot">2</button><button class="spot">3</button>
<button class="spot">4</button><button class="spot">5</button><button class="spot">6</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Raw
issue1-option-b-taped-photo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drill Tracker — Issue #1 Option B: Taped photo</title>
<style>
:root {
--slate: #f6f1e4; --slate-raised: #ede6d3; --dust: #2b2b28; --dust-dim: #7a7365;
--cue-chalk: #3b5b7a; --tip-leather: #9c9483; --miscue: #b23a2e; --chrome-bg: #ede6d3;
--on-accent: #f6f1e4; --rule: #c9bfa8; --paper-bright: #fbf8f0; --grid: #e3dbc6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; color: var(--dust); background: #cfc6b4; }
h1, h2, h3 { font-weight: 700; margin: 0; }
button { font-family: inherit; }
.page-head { padding: 24px 20px 8px; max-width: 1000px; margin: 0 auto; }
.page-head p { max-width: 46rem; }
section.block { padding: 8px 20px 40px; max-width: 1000px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.row h3 { margin-bottom: 12px; font-size: 15px; color: var(--dust-dim); font-weight: 700; }
.phone {
width: 360px; background: var(--slate); color: var(--dust); min-height: 460px;
display: flex; flex-direction: column; box-shadow: 0 12px 40px rgb(43 43 40 / 0.28);
border-radius: 6px; overflow: hidden;
}
.hdr {
background: var(--chrome-bg); border-bottom: 1px solid var(--rule); display: flex;
align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px;
}
.hdr strong { font-size: 17px; }
.chip {
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
font-family: "Courier New", monospace; border-radius: 3px; padding: 5px 9px;
background: transparent; color: var(--tip-leather); border: 1px solid var(--tip-leather);
}
.body { padding: 16px 16px 16px 24px; flex: 1; overflow: visible; }
.back-link { background: none; border: 0; color: var(--cue-chalk); font: inherit; font-size: 14px; padding: 0; margin-bottom: 12px; cursor: pointer; }
/* ---- Option B: Taped photo, in the notes margin ---- */
.drill-header-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.drill-header-copy { flex: 1; min-width: 0; }
.drill-title { font-size: 22px; margin-bottom: 4px; }
.drill-notes {
margin: 0; padding-left: 12px; border-left: 2px solid var(--rule);
color: var(--dust-dim); font-style: italic;
}
.taped-photo {
position: relative; flex-shrink: 0; width: 104px; padding: 6px 6px 18px;
background: var(--paper-bright); box-shadow: 0 4px 10px rgb(43 43 40 / 0.22);
transform: rotate(-4deg);
}
.taped-photo img { display: block; width: 100%; border: 1px solid var(--rule); }
.taped-photo .tape {
position: absolute; width: 34px; height: 14px; background: rgb(156 148 131 / 0.55);
border: 1px solid rgb(156 148 131 / 0.7);
}
.taped-photo .tape.left { top: -7px; left: -8px; transform: rotate(-40deg); }
.taped-photo .tape.right { top: -6px; right: -10px; transform: rotate(35deg); }
.taped-photo button {
position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; background: none;
border: 0; font-size: 10px; color: var(--tip-leather); text-decoration: underline; cursor: pointer;
}
.photo-well.empty {
flex-shrink: 0; width: 104px; height: 118px; display: flex; align-items: center;
justify-content: center; flex-direction: column; gap: 6px; border: 2px dashed var(--rule);
transform: rotate(-4deg); color: var(--dust-dim); font-style: italic; font-size: 12px; text-align: center;
}
.photo-well.empty button {
background: none; border: 2px dashed var(--rule); border-radius: 50%; width: 32px; height: 32px;
color: var(--dust-dim); font-size: 16px; font-style: normal; cursor: pointer;
}
.drill-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.drill-tabs button {
background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dust);
font: inherit; font-weight: 700; min-height: 44px; padding: 0 4px; cursor: pointer;
}
.drill-tabs button[aria-pressed="true"] { color: var(--cue-chalk); border-bottom: 3px dashed var(--cue-chalk); }
.meta { font-size: 13px; color: var(--dust-dim); }
.spots { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
button.spot {
min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 6px;
border: 2px solid rgb(43 43 40 / 0.3); background: transparent; color: var(--dust);
font: inherit; font-weight: 700; cursor: pointer;
}
</style>
</head>
<body>
<div class="page-head">
<h1>Issue #1 — Option B: Taped photo</h1>
<p>
The most characterful of the three: the diagram reads as a photo a
coach taped into the margin next to their handwritten notes — tilted,
corner tape, a little shadow — sitting beside <code>.drill-notes</code>
rather than replacing it. Most personal and distinctive, at the cost
of the most visual craft and a bit more header height than A or C.
</p>
</div>
<section class="block row">
<div>
<h3>Empty — no photo added yet</h3>
<div class="phone">
<div class="hdr"><strong>Potting the Yellow</strong><span class="chip">Saved</span></div>
<div class="body">
<button class="back-link">&larr; Practice</button>
<div class="drill-header-row">
<div class="drill-header-copy">
<h2 class="drill-title">Potting the Yellow</h2>
<p class="drill-notes">p. 7</p>
</div>
<div class="photo-well empty">
<button aria-label="Add a diagram or photo">+</button>
Add photo
</div>
</div>
<div class="drill-tabs">
<button aria-pressed="true">Log</button>
<button>History</button>
</div>
<p class="meta">Attempt 1 of 5 &middot; 1&ndash;6</p>
<div class="spots">
<button class="spot">1</button><button class="spot">2</button><button class="spot">3</button>
<button class="spot">4</button><button class="spot">5</button><button class="spot">6</button>
</div>
</div>
</div>
</div>
<div>
<h3>With a photo taped in</h3>
<div class="phone">
<div class="hdr"><strong>Potting the Yellow</strong><span class="chip">Saved</span></div>
<div class="body">
<button class="back-link">&larr; Practice</button>
<div class="drill-header-row">
<div class="drill-header-copy">
<h2 class="drill-title">Potting the Yellow</h2>
<p class="drill-notes">p. 7</p>
</div>
<div class="taped-photo">
<span class="tape left"></span>
<span class="tape right"></span>
<img src="assets/yellow-pot-diagram.webp" alt="Diagram: potting the yellow from baulk" />
<button type="button">Replace</button>
</div>
</div>
<div class="drill-tabs">
<button aria-pressed="true">Log</button>
<button>History</button>
</div>
<p class="meta">Attempt 1 of 5 &middot; 1&ndash;6</p>
<div class="spots">
<button class="spot">1</button><button class="spot">2</button><button class="spot">3</button>
<button class="spot">4</button><button class="spot">5</button><button class="spot">6</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Raw
issue1-option-c-reference-drawer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drill Tracker — Issue #1 Option C: Reference drawer</title>
<style>
:root {
--slate: #f6f1e4; --slate-raised: #ede6d3; --dust: #2b2b28; --dust-dim: #7a7365;
--cue-chalk: #3b5b7a; --tip-leather: #9c9483; --miscue: #b23a2e; --chrome-bg: #ede6d3;
--on-accent: #f6f1e4; --rule: #c9bfa8; --paper-bright: #fbf8f0; --grid: #e3dbc6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; color: var(--dust); background: #cfc6b4; }
h1, h2, h3 { font-weight: 700; margin: 0; }
button { font-family: inherit; }
.page-head { padding: 24px 20px 8px; max-width: 1000px; margin: 0 auto; }
.page-head p { max-width: 46rem; }
section.block { padding: 8px 20px 40px; max-width: 1000px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.row h3 { margin-bottom: 12px; font-size: 15px; color: var(--dust-dim); font-weight: 700; }
.phone {
width: 360px; background: var(--slate); color: var(--dust); min-height: 460px;
display: flex; flex-direction: column; box-shadow: 0 12px 40px rgb(43 43 40 / 0.28);
border-radius: 6px; overflow: hidden; position: relative;
}
.hdr {
background: var(--chrome-bg); border-bottom: 1px solid var(--rule); display: flex;
align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px;
}
.hdr strong { font-size: 17px; }
.chip {
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
font-family: "Courier New", monospace; border-radius: 3px; padding: 5px 9px;
background: transparent; color: var(--tip-leather); border: 1px solid var(--tip-leather);
}
.body { padding: 16px; flex: 1; }
.back-link { background: none; border: 0; color: var(--cue-chalk); font: inherit; font-size: 14px; padding: 0; margin-bottom: 12px; cursor: pointer; }
.drill-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-bottom: 4px; }
.drill-title { font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-diagram, .add-diagram { flex-shrink: 0; white-space: nowrap; }
.drill-notes {
margin: 0 0 16px; padding-left: 12px; border-left: 2px solid var(--rule);
color: var(--dust-dim); font-style: italic;
}
/* ---- Option C: Reference drawer — a small trigger, no inline footprint ---- */
.view-diagram {
background: none; border: 1px solid var(--cue-chalk); color: var(--cue-chalk); border-radius: 4px;
font: inherit; font-weight: 700; font-size: 13px; padding: 4px 10px; cursor: pointer;
}
.add-diagram {
background: none; border: 1px dashed var(--rule); color: var(--dust-dim); border-radius: 4px;
font: inherit; font-weight: 700; font-size: 13px; padding: 4px 10px; cursor: pointer;
}
.drill-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.drill-tabs button {
background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dust);
font: inherit; font-weight: 700; min-height: 44px; padding: 0 4px; cursor: pointer;
}
.drill-tabs button[aria-pressed="true"] { color: var(--cue-chalk); border-bottom: 3px dashed var(--cue-chalk); }
.meta { font-size: 13px; color: var(--dust-dim); }
.spots { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
button.spot {
min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 6px;
border: 2px solid rgb(43 43 40 / 0.3); background: transparent; color: var(--dust);
font: inherit; font-weight: 700; cursor: pointer;
}
.sheet-backdrop {
position: absolute; inset: 0; z-index: 10; display: grid; align-items: center;
padding: 16px; background: rgb(43 43 40 / 0.55);
}
.sheet {
width: 100%; margin: 0 auto; padding: 16px; border: 1.5px solid var(--rule);
border-radius: 6px; background: var(--slate-raised); color: var(--dust);
}
.sheet h2 { font-size: 16px; margin-bottom: 10px; }
.sheet img { display: block; width: 100%; border: 1px solid var(--rule); border-radius: 3px; }
.sheet-actions { display: flex; justify-content: space-between; margin-top: 12px; gap: 8px; }
.sheet-actions .ghost {
background: none; border: 1px solid var(--dust-dim); color: var(--dust); border-radius: 4px;
font: inherit; font-weight: 700; padding: 6px 12px; cursor: pointer;
}
.sheet-actions .primary {
background: var(--cue-chalk); color: var(--on-accent); border: 0; border-radius: 4px;
font: inherit; font-weight: 700; padding: 6px 12px; cursor: pointer;
}
</style>
</head>
<body>
<div class="page-head">
<h1>Issue #1 — Option C: Reference drawer</h1>
<p>
The safest of the three: the scoring screen's layout doesn't change
at all — just one small button beside the title. Tapping it opens
the diagram full-size in the same sheet overlay the app already uses
for Configure/Edit dialogs, then gets out of the way again. No risk
of reintroducing the layout-jump issue #25 just fixed; least
distinctive of the three.
</p>
</div>
<section class="block row">
<div>
<h3>Empty — no diagram added yet</h3>
<div class="phone">
<div class="hdr"><strong>Potting the Yellow</strong><span class="chip">Saved</span></div>
<div class="body">
<button class="back-link">&larr; Practice</button>
<div class="drill-title-row">
<h2 class="drill-title">Potting the Yellow</h2>
<button class="add-diagram">+ Add diagram</button>
</div>
<p class="drill-notes">p. 7</p>
<div class="drill-tabs">
<button aria-pressed="true">Log</button>
<button>History</button>
</div>
<p class="meta">Attempt 1 of 5 &middot; 1&ndash;6</p>
<div class="spots">
<button class="spot">1</button><button class="spot">2</button><button class="spot">3</button>
<button class="spot">4</button><button class="spot">5</button><button class="spot">6</button>
</div>
</div>
</div>
</div>
<div>
<h3>Diagram available &mdash; overlay open</h3>
<div class="phone">
<div class="hdr"><strong>Potting the Yellow</strong><span class="chip">Saved</span></div>
<div class="body">
<button class="back-link">&larr; Practice</button>
<div class="drill-title-row">
<h2 class="drill-title">Potting the Yellow</h2>
<button class="view-diagram">&#128247; View diagram</button>
</div>
<p class="drill-notes">p. 7</p>
<div class="drill-tabs">
<button aria-pressed="true">Log</button>
<button>History</button>
</div>
<p class="meta">Attempt 1 of 5 &middot; 1&ndash;6</p>
<div class="spots">
<button class="spot">1</button><button class="spot">2</button><button class="spot">3</button>
<button class="spot">4</button><button class="spot">5</button><button class="spot">6</button>
</div>
</div>
<div class="sheet-backdrop">
<section class="sheet" role="dialog" aria-modal="true">
<h2>Potting the Yellow — diagram</h2>
<img src="assets/yellow-pot-diagram.webp" alt="Diagram: potting the yellow from baulk" />
<div class="sheet-actions">
<button type="button" class="ghost">Replace</button>
<button type="button" class="primary">Done</button>
</div>
</section>
</div>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment