Initial roast planner webapp: fillable worksheet, live ledger, curve, URL prefill, .alog reference curve
- shared/ ports the worksheet's ledger math, time parsing, and reference tables (cultivars/processes/roast-levels/machine bands) as browser-safe ESM, imported by both the server and the browser so the arithmetic can't drift between them. - server/prefill.js runs a zero-tool Pi Coding Agent SDK turn to extract page facts from a bean product URL, then derives worksheet field IDs deterministically from reference-data.js — the model never invents a first-crack anchor or a modifier. - server/alog.js ports the Python alog_parser.py's format handling, including the tokenizer-based Python-dict-literal-to-JSON conversion the real files need. - public/ is the worksheet reproduced as a live HTML form: worksheet.css is a verbatim copy of the paper worksheet's print CSS, print.js bakes values into the print layout so the same DOM renders both on screen and on paper. - Ledger math verified against both of the paper worksheet's worked examples; alog parser verified against all 14 real logs in ref/roasts/. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,209 @@
|
||||
/* Verbatim copy of the <style> block from
|
||||
/Users/shane/dev/hope_roaster/roast-planner/manual-roast-planner.html
|
||||
Do not hand-edit the rules below this line — port changes from the source instead.
|
||||
Screen-only additions (form inputs, radios, toolbar) live in app.css. */
|
||||
|
||||
/* ─── Print setup ─────────────────────────────────────────────────────── */
|
||||
@page { size: letter portrait; margin: 10mm 13mm 8mm 13mm; }
|
||||
@page :first { margin-top: 10mm; }
|
||||
|
||||
:root{
|
||||
--ink:#1a1512;
|
||||
--mid:#5a5048;
|
||||
--faint:#8b8078;
|
||||
--rule:#c9bfb5;
|
||||
--hair:#e2dad2;
|
||||
--accent:#7a3b12;
|
||||
--accent-bg:#f6efe7;
|
||||
--warn-bg:#fbf3e4;
|
||||
--box:#fdfcfa;
|
||||
}
|
||||
|
||||
*{ box-sizing:border-box; }
|
||||
html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
|
||||
body{
|
||||
margin:0;
|
||||
font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
|
||||
font-size:9pt; line-height:1.32; color:var(--ink); background:#fff;
|
||||
}
|
||||
.sheet{ max-width:186mm; margin:0 auto; }
|
||||
|
||||
/* ─── Typography ──────────────────────────────────────────────────────── */
|
||||
h1,h2,h3,h4,.lbl,th,.step-n,.tag{
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
h1{ font-size:20pt; line-height:1.08; margin:0 0 1.6mm; letter-spacing:-.4pt; }
|
||||
h2{
|
||||
font-size:11.6pt; margin:0 0 2.4mm; padding:0 0 1.3mm;
|
||||
border-bottom:1.6pt solid var(--ink); letter-spacing:-.2pt;
|
||||
display:flex; align-items:baseline; gap:3mm;
|
||||
}
|
||||
h2 .step-n{
|
||||
font-size:8pt; font-weight:700; letter-spacing:.9pt; color:#fff;
|
||||
background:var(--accent); padding:1mm 2.2mm; border-radius:1mm;
|
||||
white-space:nowrap;
|
||||
}
|
||||
h3{ font-size:9.8pt; margin:2.9mm 0 1.2mm; color:var(--accent); letter-spacing:-.1pt; }
|
||||
h4{ font-size:8.4pt; margin:2.2mm 0 .8mm; letter-spacing:.2pt; text-transform:uppercase; color:var(--mid); }
|
||||
p{ margin:0 0 1.55mm; }
|
||||
em{ font-style:italic; }
|
||||
strong{ font-weight:700; }
|
||||
small{ font-size:7.7pt; color:var(--mid); }
|
||||
a{ color:var(--accent); }
|
||||
|
||||
/* ─── Page structure ──────────────────────────────────────────────────── */
|
||||
section{ page-break-before:always; break-before:page; padding-top:0; }
|
||||
section.first{ page-break-before:auto; break-before:auto; }
|
||||
.nobreak{ page-break-inside:avoid; break-inside:avoid; }
|
||||
tr{ page-break-inside:avoid; break-inside:avoid; }
|
||||
thead{ display:table-header-group; }
|
||||
tr.grp{ page-break-after:avoid; break-after:avoid; }
|
||||
h2,h3,h4{ page-break-after:avoid; break-after:avoid; }
|
||||
.why,.note{ page-break-inside:avoid; break-inside:avoid; }
|
||||
|
||||
/* ─── Tables ──────────────────────────────────────────────────────────── */
|
||||
table{ width:100%; border-collapse:collapse; margin:1.4mm 0 2.1mm; font-size:7.9pt; }
|
||||
th{
|
||||
text-align:left; font-size:7pt; font-weight:700; letter-spacing:.5pt;
|
||||
text-transform:uppercase; color:var(--mid);
|
||||
border-bottom:1pt solid var(--ink); padding:1.1mm 1.3mm .8mm; vertical-align:bottom;
|
||||
}
|
||||
td{ padding:1mm 1.25mm; border-bottom:.5pt solid var(--hair); vertical-align:top; }
|
||||
tr:last-child td{ border-bottom:.8pt solid var(--rule); }
|
||||
tbody tr:nth-child(even) td{ background:#faf7f4; }
|
||||
.grp td{ background:var(--accent-bg)!important; font-weight:700; font-size:7.6pt;
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:.3pt;
|
||||
border-bottom:.8pt solid var(--rule); color:var(--accent); }
|
||||
td.num,th.num{ text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
|
||||
.mono{ font-family:"SF Mono",Menlo,Consolas,monospace; font-size:7.6pt; }
|
||||
.tight td{ padding:.85mm 1.15mm; }
|
||||
|
||||
/* ─── Callouts ────────────────────────────────────────────────────────── */
|
||||
.why{
|
||||
background:var(--accent-bg); border-left:2.4pt solid var(--accent);
|
||||
padding:1.6mm 2.4mm 1.6mm 2.6mm; margin:1.6mm 0 2.1mm; font-size:8.3pt;
|
||||
}
|
||||
.why .tag{
|
||||
display:block; font-size:7pt; font-weight:700; letter-spacing:1.1pt;
|
||||
text-transform:uppercase; color:var(--accent); margin-bottom:.9mm;
|
||||
}
|
||||
.why p:last-child{ margin-bottom:0; }
|
||||
.warn{ background:var(--warn-bg); border-left:2.4pt solid #a8741a; }
|
||||
.warn .tag{ color:#8a5c10; }
|
||||
.note{
|
||||
border:.6pt solid var(--rule); background:var(--box);
|
||||
padding:1.6mm 2.4mm; margin:1.6mm 0 2.1mm; font-size:8.1pt;
|
||||
}
|
||||
|
||||
/* ─── Fill-in fields ──────────────────────────────────────────────────── */
|
||||
.f{
|
||||
display:inline-block; min-width:17mm; border-bottom:.9pt solid var(--ink);
|
||||
height:4.2mm; margin:0 .8mm; vertical-align:baseline;
|
||||
}
|
||||
.f.w{ min-width:34mm; } .f.xw{ min-width:58mm; } .f.n{ min-width:11mm; }
|
||||
|
||||
/* Worksheet ledger */
|
||||
.ledger{ width:100%; border-collapse:collapse; font-size:8.1pt; margin:1.6mm 0 2.4mm; }
|
||||
.ledger th{ font-size:7.2pt; }
|
||||
.ledger td{ padding:0; border:none; }
|
||||
.ledger tr.row td{
|
||||
border-bottom:.5pt solid var(--hair); padding:1.05mm 1.4mm; vertical-align:middle;
|
||||
}
|
||||
.ledger tr.row:nth-child(even) td{ background:#faf7f4; }
|
||||
.ledger td.ln{
|
||||
width:7mm; text-align:center; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size:7.4pt; font-weight:700; color:var(--faint);
|
||||
}
|
||||
.ledger td.desc{ }
|
||||
.ledger td.desc .sub{ display:block; font-size:7.2pt; color:var(--mid); line-height:1.3; }
|
||||
.ledger td.val{
|
||||
width:26mm; border-left:.6pt solid var(--rule); background:var(--box)!important;
|
||||
text-align:center; font-family:"SF Mono",Menlo,Consolas,monospace; font-size:8.4pt;
|
||||
height:6.2mm;
|
||||
}
|
||||
.ledger tr.total td{
|
||||
border-top:1.4pt solid var(--ink); border-bottom:1.4pt solid var(--ink);
|
||||
padding:1.4mm 1.4mm; font-weight:700;
|
||||
}
|
||||
.ledger tr.total td.val{ background:#f0e7dc!important; }
|
||||
.op{ font-family:"SF Mono",Menlo,Consolas,monospace; font-weight:700; color:var(--accent); }
|
||||
|
||||
/* ─── Layout helpers ──────────────────────────────────────────────────── */
|
||||
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:0 7mm; }
|
||||
.cols3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 5mm; }
|
||||
.hdr-meta{
|
||||
display:flex; justify-content:space-between; align-items:flex-end;
|
||||
border-bottom:2.4pt solid var(--ink); padding-bottom:2.5mm; margin-bottom:4mm;
|
||||
}
|
||||
.hdr-meta .sub{ font-size:8.8pt; color:var(--mid); max-width:118mm; }
|
||||
.hdr-meta .stamp{
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:7.4pt;
|
||||
color:var(--faint); text-align:right; line-height:1.5; white-space:nowrap;
|
||||
}
|
||||
ul,ol{ margin:0 0 2mm; padding-left:4.6mm; }
|
||||
li{ margin-bottom:.8mm; }
|
||||
.chk{ list-style:none; padding-left:0; }
|
||||
.chk li{ padding-left:5.6mm; position:relative; margin-bottom:1.2mm; }
|
||||
.chk li::before{
|
||||
content:""; position:absolute; left:0; top:.6mm;
|
||||
width:3.2mm; height:3.2mm; border:.9pt solid var(--ink); border-radius:.5mm;
|
||||
}
|
||||
.footer-note{
|
||||
margin-top:5mm; padding-top:2mm; border-top:.6pt solid var(--rule);
|
||||
font-size:7.4pt; color:var(--faint);
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
.flow{ width:100%; height:auto; margin:2mm 0 2.6mm; }
|
||||
|
||||
/* ─── Worksheet pages ─────────────────────────────────────────────────── */
|
||||
.wsbar{
|
||||
display:flex; justify-content:space-between; align-items:baseline;
|
||||
border-bottom:2.4pt solid var(--ink); padding-bottom:1mm; margin-bottom:2mm;
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
.wsbar .t{ font-size:12pt; font-weight:700; letter-spacing:-.2pt; }
|
||||
.wsbar .r{ font-size:7.6pt; color:var(--faint); letter-spacing:.6pt; text-transform:uppercase; }
|
||||
.wsbox{ border:.8pt solid var(--rule); margin:0 0 2.4mm; break-inside:avoid; page-break-inside:avoid; }
|
||||
.wsbox > .hd{
|
||||
display:flex; justify-content:space-between; align-items:baseline;
|
||||
background:var(--accent-bg); border-bottom:.8pt solid var(--rule);
|
||||
padding:1.1mm 2mm; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
.wsbox > .hd .n{ font-size:8pt; font-weight:700; letter-spacing:.5pt; color:var(--accent); }
|
||||
.wsbox > .hd .id{ font-size:8pt; font-weight:700; letter-spacing:.9pt; color:var(--mid); }
|
||||
.wsbox > .hd .ref{ font-size:6.9pt; color:var(--mid); letter-spacing:.3pt; }
|
||||
.wsbox > .bd{ padding:1.8mm 2mm; }
|
||||
.wsbox table{ margin:0; font-size:7.4pt; }
|
||||
.wsbox .ledger{ margin:0; }
|
||||
.wsbox > .bd > table:not(:last-child){ margin-bottom:2mm; }
|
||||
.wsline{ font-size:8.4pt; line-height:2.05; }
|
||||
.wsline .lb{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:7.4pt;
|
||||
letter-spacing:.3pt; text-transform:uppercase; color:var(--mid); }
|
||||
.wsline .sep{ color:var(--rule); padding:0 1.6mm; }
|
||||
.circ{ font-size:8pt; }
|
||||
.circ b{ font-weight:400; padding:0 .6mm; }
|
||||
.wsgrid .grid-wrap{ border:none; margin:0; }
|
||||
.wsbox{ margin-bottom:1.2mm; }
|
||||
.wsbox > .hd{ padding:.9mm 2mm; }
|
||||
.wsbox > .bd{ padding:1.1mm 1.8mm; }
|
||||
.wsbox td{ padding:.62mm 1.1mm; }
|
||||
.wsbox th{ padding:.9mm 1.1mm .6mm; }
|
||||
.wsbox .ledger tr.row td{ padding:.5mm 1.2mm; }
|
||||
.wsbox .ledger tr.total td{ padding:.8mm 1.2mm; }
|
||||
.wsbox .ledger td.val{ height:5mm; }
|
||||
.wsbox .ledger{ font-size:7.8pt; }
|
||||
.wsbox .ledger td.desc .sub{ font-size:6.7pt; line-height:1.15; }
|
||||
.wsline{ line-height:1.66; }
|
||||
.wsline.tightln{ line-height:1.32; }
|
||||
.fid{
|
||||
font-family:"SF Mono",Menlo,Consolas,monospace; font-size:6.3pt; font-weight:700;
|
||||
color:var(--accent); margin-right:.5mm;
|
||||
}
|
||||
.stepdot{
|
||||
display:inline-block; width:3.6mm; height:3.6mm; border-radius:50%;
|
||||
background:var(--accent); color:#fff; font-size:6.4pt; font-weight:700;
|
||||
text-align:center; line-height:3.6mm; margin-right:1mm; vertical-align:middle;
|
||||
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
.grid-wrap{ border:1pt solid var(--ink); padding:0; margin:2mm 0 3mm; }
|
||||
svg text{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
|
||||
Reference in New Issue
Block a user