cd83fd61cb
- VISION.md: the full studio-backbone product vision (craft core, operations, selling, daily driver), Bonna's approved design decisions, and phasing - design/: two clickable Phase 1 mockups (moonlit palette, CSS-only tabs) - prototype/: zero-dependency local app (Node built-ins + SQLite) — Today with jot-first capture + subtask outliner, Clay & Glazes library, fill-and-go Firing Log with emoji unload ratings feeding evidence tables, Pieces with core line/tiles/one-of-a-kind + money card, Files with per-piece attachment, Sourcing with price ledger + live supplier search links (9 suppliers seeded) - CLAUDE.md: access notes updated for the provisioned site + this repo's state Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
296 lines
20 KiB
HTML
296 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Glaze & Firing screens — Phase 1 sketch</title>
|
||
<style>
|
||
:root {
|
||
--bg: #fdf7f2; --card: #ffffff; --ink: #4a3b47;
|
||
--plum: #8d6b94; --plum-deep: #6e4f78; --blush: #f3dbe4; --blush-deep: #c98da8;
|
||
--sage: #8fa68a; --sage-soft: #e4ecdf; --butter: #f7ecd8; --line: #eddfe3;
|
||
--moon: #f0e6f4;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: "Avenir Next", "Nunito", "Trebuchet MS", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; }
|
||
.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px 60px; }
|
||
header { padding: 30px 0 0; }
|
||
.banner { background: var(--butter); border: 1.5px dashed var(--blush-deep); border-radius: 14px; padding: 10px 16px; font-size: 13px; color: #8d6a52; margin-bottom: 22px; }
|
||
h1 { font-family: Georgia, "Iowan Old Style", serif; font-size: 26px; font-weight: 600; color: var(--plum-deep); }
|
||
.sub { color: #9c8698; font-size: 14.5px; margin-top: 3px; font-style: italic; font-family: Georgia, serif; }
|
||
|
||
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
|
||
nav { display: flex; gap: 8px; margin: 22px 0 26px; flex-wrap: wrap; }
|
||
nav label { border: 1.5px solid var(--line); background: var(--card); color: #a08fa0; padding: 9px 16px; border-radius: 999px; font-size: 14px; cursor: pointer; font-weight: 600; transition: all .15s; }
|
||
nav label:hover { border-color: var(--blush-deep); color: var(--plum-deep); }
|
||
.panel { display: none; }
|
||
#s-glaze:checked ~ .wrap nav label[for="s-glaze"],
|
||
#s-newglaze:checked ~ .wrap nav label[for="s-newglaze"],
|
||
#s-firing:checked ~ .wrap nav label[for="s-firing"],
|
||
#s-results:checked ~ .wrap nav label[for="s-results"] { background: var(--plum); border-color: var(--plum); color: #fff; }
|
||
#s-glaze:checked ~ .wrap #glaze, #s-newglaze:checked ~ .wrap #newglaze,
|
||
#s-firing:checked ~ .wrap #firing, #s-results:checked ~ .wrap #results { display: block; }
|
||
|
||
.grid { display: grid; gap: 14px; } .g2 { grid-template-columns: 1fr 1fr; }
|
||
@media (max-width: 640px){ .g2 { grid-template-columns: 1fr; } }
|
||
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(141,107,148,0.06); }
|
||
.card h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blush-deep); font-weight: 700; margin-bottom: 12px; }
|
||
h4 { font-family: Georgia, serif; font-size: 17px; font-weight: 600; color: var(--plum-deep); }
|
||
.meta { color: #9c8698; font-size: 13.5px; }
|
||
.pill { display: inline-block; font-size: 12px; font-weight: 650; padding: 3px 11px; border-radius: 999px; background: var(--blush); color: var(--plum-deep); }
|
||
.pill.sage { background: var(--sage-soft); color: #5c7157; }
|
||
.pill.butter { background: var(--butter); color: #8d6a52; }
|
||
.pill.ghost { background: transparent; border: 1.5px dashed var(--blush-deep); }
|
||
table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #b1a0ae; font-weight: 700; padding: 4px; }
|
||
th:last-child, td:last-child { text-align: right; }
|
||
td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
|
||
td:last-child { color: #9c8698; font-variant-numeric: tabular-nums; }
|
||
tr:last-child td { border: none; }
|
||
.hero { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
|
||
.hero .swatch { width: 110px; height: 110px; border-radius: 16px; background: linear-gradient(150deg,#b8cec4,#8fb0a3); border: 1px solid rgba(0,0,0,0.05); flex-shrink: 0; }
|
||
.hero .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
|
||
.result { background: var(--moon); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
|
||
.photos { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
|
||
.ph { width: 64px; height: 64px; border-radius: 10px; background: linear-gradient(135deg, var(--blush), var(--moon)); display: flex; align-items: center; justify-content: center; font-size: 22px; }
|
||
.ph.add { background: transparent; border: 1.5px dashed var(--blush-deep); color: var(--blush-deep); font-size: 26px; }
|
||
.mt { margin-top: 14px; }
|
||
.matrix td:first-child { font-weight: 600; }
|
||
.yes { color: #5c7157; font-weight: 700; } .no { color: #b3556b; font-weight: 700; } .unk { color: #b1a0ae; }
|
||
.field { margin-bottom: 13px; }
|
||
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--blush-deep); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
|
||
.field input[type=text], .field textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; background: var(--bg); color: var(--ink); font-family: inherit; }
|
||
.choices { display: flex; gap: 6px; flex-wrap: wrap; }
|
||
.choice { font-size: 13px; font-weight: 650; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); color: #a08fa0; cursor: pointer; }
|
||
.choice.on { background: var(--plum); border-color: var(--plum); color: #fff; }
|
||
.btn { display: inline-block; border: none; border-radius: 12px; padding: 11px 22px; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
|
||
.btn.primary { background: var(--plum); color: #fff; }
|
||
.btn.soft { background: var(--blush); color: var(--plum-deep); }
|
||
.steps { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
|
||
.step { font-size: 12.5px; font-weight: 650; padding: 4px 12px; border-radius: 999px; background: var(--moon); color: var(--plum-deep); }
|
||
.step.dim { background: transparent; color: #b1a0ae; border: 1px dashed var(--line); }
|
||
.loadrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; flex-wrap: wrap; }
|
||
.loadrow:last-child { border: none; }
|
||
.verdict { display: flex; gap: 6px; }
|
||
.verdict span { font-size: 16px; padding: 5px 10px; border-radius: 10px; background: var(--bg); border: 1.5px solid var(--line); cursor: pointer; }
|
||
.verdict span.on { background: var(--sage-soft); border-color: var(--sage); }
|
||
.note-inline { font-size: 13px; color: #9c8698; font-style: italic; }
|
||
.footnote { color: #b1a0ae; font-size: 13px; margin-top: 28px; text-align: center; font-style: italic; font-family: Georgia, serif; }
|
||
.sparkle { background: var(--sage-soft); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; color: #55624c; margin-top: 12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<input class="tab-radio" type="radio" name="tabs" id="s-glaze" checked>
|
||
<input class="tab-radio" type="radio" name="tabs" id="s-newglaze">
|
||
<input class="tab-radio" type="radio" name="tabs" id="s-firing">
|
||
<input class="tab-radio" type="radio" name="tabs" id="s-results">
|
||
|
||
<div class="wrap">
|
||
<header>
|
||
<div class="banner">✏️ Sketch round 3 — the deep screens. Four tabs = four different moments in studio life.</div>
|
||
<h1>🌙 Glazes & Firings — the deep screens</h1>
|
||
<div class="sub">a glaze's home page · adding a new one · loading the kiln · unload day</div>
|
||
</header>
|
||
|
||
<nav>
|
||
<label for="s-glaze">🧪 A glaze's page</label>
|
||
<label for="s-newglaze">＋ New glaze</label>
|
||
<label for="s-firing">🔥 Start a firing</label>
|
||
<label for="s-results">✨ Unload day</label>
|
||
</nav>
|
||
|
||
<!-- ============ GLAZE DETAIL ============ -->
|
||
<section class="panel" id="glaze">
|
||
<div class="card">
|
||
<div class="hero">
|
||
<div class="swatch"></div>
|
||
<div>
|
||
<h4>Sea-glass Celadon</h4>
|
||
<div class="meta">∆6 oxidation · glossy · translucent · dip 3s ×3</div>
|
||
<div class="pills">
|
||
<span class="pill sage">7 firings logged</span>
|
||
<span class="pill">S.G. 1.45</span>
|
||
<span class="pill butter">from my old notebook</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid g2">
|
||
<div>
|
||
<h3>Recipe <span class="note-inline">· tap a number to edit</span></h3>
|
||
<table>
|
||
<tr><th>Material</th><th>%</th><th>2,000 g batch</th></tr>
|
||
<tr><td>Custer Feldspar</td><td>38</td><td>760 g</td></tr>
|
||
<tr><td>Silica</td><td>28</td><td>560 g</td></tr>
|
||
<tr><td>Whiting</td><td>18</td><td>360 g</td></tr>
|
||
<tr><td>EPK Kaolin</td><td>16</td><td>320 g</td></tr>
|
||
<tr><td>＋ Copper Carbonate</td><td>0.5</td><td>10 g</td></tr>
|
||
<tr><td>＋ Bentonite</td><td>2</td><td>40 g</td></tr>
|
||
</table>
|
||
<div class="mt"><span class="pill ghost">⚖️ scale batch: 500g · 1kg · 2kg · 5 gal</span></div>
|
||
</div>
|
||
<div>
|
||
<h3>Plays well with…</h3>
|
||
<table class="matrix">
|
||
<tr><th>Clay body</th><th>Verdict</th><th>Evidence</th></tr>
|
||
<tr><td>B-Mix</td><td class="yes">♥ lovely</td><td>4 firings</td></tr>
|
||
<tr><td>Speckled Brownstone</td><td class="yes">✓ good</td><td>2 firings</td></tr>
|
||
<tr><td>Porcelain</td><td class="unk">? untested</td><td>—</td></tr>
|
||
<tr><td>Dark stoneware</td><td class="no">✗ pinholes</td><td>1 firing</td></tr>
|
||
</table>
|
||
<div class="sparkle">🌱 This table grows by itself — every unload day where you rate a piece adds a row of evidence. You never fill it in directly.</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt">
|
||
<h3>Journal</h3>
|
||
<div class="result">📒 <b>Jul 12</b> — thin = washes out. 3 dips or S.G. 1.45. Pools gorgeously in carved lines.</div>
|
||
<div class="result mt">📒 <b>Jun 30</b> — variation #2 with +1% copper: too dark, muddy. Staying with original.</div>
|
||
</div>
|
||
<div class="mt">
|
||
<h3>Test tiles & pieces</h3>
|
||
<div class="photos"><div class="ph">🧪</div><div class="ph">🏺</div><div class="ph">🫖</div><div class="ph">🥣</div><div class="ph add">＋</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card mt">
|
||
<h3>Where it lands — the chemistry map <span class="note-inline">· the Stull chart, like Glazy's</span></h3>
|
||
<svg viewBox="0 0 380 310" role="img" aria-label="Stull chart: Sea-glass Celadon plotted in the bright gloss region" style="width:100%;max-width:560px;display:block">
|
||
<!-- regions (schematic; the real app computes these per cone) -->
|
||
<polygon points="40,20 340,20 340,60 90,80 40,90" fill="#f0ece6"/>
|
||
<polygon points="40,90 90,80 110,260 40,260" fill="#f3dbe4" opacity="0.75"/>
|
||
<polygon points="90,80 340,60 340,120 150,260 110,260" fill="#e4ecdf"/>
|
||
<polygon points="340,120 340,180 200,260 150,260" fill="#f0e6f4"/>
|
||
<polygon points="340,180 340,260 200,260" fill="#f7ecd8"/>
|
||
<!-- region labels -->
|
||
<text x="185" y="45" font-size="11" fill="#a08fa0" text-anchor="middle" font-style="italic">under-fired</text>
|
||
<text x="63" y="170" font-size="11" fill="#b3849a" text-anchor="middle" font-style="italic" transform="rotate(-78 63 170)">crazed</text>
|
||
<text x="205" y="115" font-size="12" fill="#5c7157" text-anchor="middle" font-weight="600" font-style="italic">bright gloss</text>
|
||
<text x="252" y="212" font-size="11" fill="#8d6b94" text-anchor="middle" font-style="italic">semi-matte</text>
|
||
<text x="303" y="240" font-size="11" fill="#8d6a52" text-anchor="middle" font-style="italic">matte</text>
|
||
<!-- axes -->
|
||
<line x1="40" y1="20" x2="40" y2="260" stroke="#d8c9ce" stroke-width="1.5"/>
|
||
<line x1="40" y1="260" x2="340" y2="260" stroke="#d8c9ce" stroke-width="1.5"/>
|
||
<text x="190" y="290" font-size="11.5" fill="#9c8698" text-anchor="middle">alumina (Al₂O₃) →</text>
|
||
<text x="16" y="140" font-size="11.5" fill="#9c8698" text-anchor="middle" transform="rotate(-90 16 140)">silica (SiO₂) →</text>
|
||
<text x="90" y="274" font-size="10" fill="#b1a0ae" text-anchor="middle">0.2</text>
|
||
<text x="190" y="274" font-size="10" fill="#b1a0ae" text-anchor="middle">0.4</text>
|
||
<text x="290" y="274" font-size="10" fill="#b1a0ae" text-anchor="middle">0.6</text>
|
||
<text x="32" y="216" font-size="10" fill="#b1a0ae" text-anchor="end">2</text>
|
||
<text x="32" y="168" font-size="10" fill="#b1a0ae" text-anchor="end">3</text>
|
||
<text x="32" y="120" font-size="10" fill="#b1a0ae" text-anchor="end">4</text>
|
||
<text x="32" y="72" font-size="10" fill="#b1a0ae" text-anchor="end">5</text>
|
||
<!-- other glazes, faded -->
|
||
<circle cx="250" cy="195" r="5" fill="#c9b8d4"/>
|
||
<text x="250" y="184" font-size="9.5" fill="#b1a0ae" text-anchor="middle">Toasted Amber</text>
|
||
<circle cx="290" cy="217" r="5" fill="#c9b8d4"/>
|
||
<text x="296" y="232" font-size="9.5" fill="#b1a0ae" text-anchor="middle">Oat Matte</text>
|
||
<!-- this glaze -->
|
||
<circle cx="165" cy="145" r="8" fill="#6e4f78" stroke="#ffffff" stroke-width="2.5"/>
|
||
<text x="165" y="132" font-size="11" fill="#6e4f78" text-anchor="middle" font-weight="700">Sea-glass Celadon</text>
|
||
</svg>
|
||
<div class="sparkle">🧮 Computed from the recipe automatically — no data entry. The dot says <i>why</i> it's glossy; nudge silica or alumina and watch the dot move before you mix anything. Faded dots are your other glazes, so the map doubles as a family portrait. (Regions shift with cone — the real chart adjusts to ∆6.)</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ NEW GLAZE ============ -->
|
||
<section class="panel" id="newglaze">
|
||
<div class="card">
|
||
<h4>New glaze</h4>
|
||
<div class="meta" style="margin-bottom:16px">Only the name is required — everything else can arrive later.</div>
|
||
<div class="field"><label>Name</label><input type="text" placeholder="e.g. Moonrise Blue"></div>
|
||
<div class="grid g2">
|
||
<div class="field"><label>Cone</label>
|
||
<div class="choices"><span class="choice">∆04</span><span class="choice on">∆6</span><span class="choice">∆10</span><span class="choice">other</span></div>
|
||
</div>
|
||
<div class="field"><label>Atmosphere</label>
|
||
<div class="choices"><span class="choice on">oxidation</span><span class="choice">reduction</span></div>
|
||
</div>
|
||
<div class="field"><label>Surface</label>
|
||
<div class="choices"><span class="choice">glossy</span><span class="choice on">satin</span><span class="choice">matte</span></div>
|
||
</div>
|
||
<div class="field"><label>Where's it from?</label>
|
||
<div class="choices"><span class="choice on">mine</span><span class="choice">Glazy</span><span class="choice">book / friend</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="field"><label>Recipe</label>
|
||
<table>
|
||
<tr><td>Nepheline Syenite</td><td>45</td></tr>
|
||
<tr><td>Silica</td><td>25</td></tr>
|
||
<tr><td><span class="note-inline">＋ add material (autocompletes from your pantry)</span></td><td></td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="field"><label>First note</label><textarea rows="2" placeholder="Why this glaze? What are you hoping for?"></textarea></div>
|
||
<button class="btn primary">Save glaze</button>
|
||
<button class="btn soft">Save & mix a test batch</button>
|
||
<div class="sparkle">💡 Later (Phase 4): paste a Glazy link and the recipe fills itself in.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ START A FIRING ============ -->
|
||
<section class="panel" id="firing">
|
||
<div class="card">
|
||
<div class="steps">
|
||
<span class="step">1 · plan</span><span class="step">2 · load</span><span class="step dim">3 · fire</span><span class="step dim">4 · unload</span>
|
||
<span class="note-inline">← a trail, not a form. Skip everything.</span>
|
||
</div>
|
||
<h4>Firing #5</h4>
|
||
<div class="result" style="margin-top:10px">🔥 <b>Fill-the-kiln-and-go mode:</b> tap <i>start firing</i> with nothing filled in — just "glaze ∆6, go." Tell it what went in later, even on unload day. The load list below is for when you feel like it, not homework.</div>
|
||
<div class="grid g2 mt">
|
||
<div class="field"><label>Type</label>
|
||
<div class="choices"><span class="choice">bisque ∆04</span><span class="choice on">glaze ∆6</span></div>
|
||
</div>
|
||
<div class="field"><label>Schedule</label>
|
||
<div class="choices"><span class="choice on">slow ramp + 15 min hold</span><span class="choice">standard</span><span class="choice">custom…</span></div>
|
||
</div>
|
||
</div>
|
||
<h3>What's going in <span class="note-inline">· piece + clay + glaze — this is the magic combo</span></h3>
|
||
<div class="loadrow"><span>🏺 6 carved mugs</span><span class="meta">B-Mix · Sea-glass Celadon</span></div>
|
||
<div class="loadrow"><span>🥣 2 serving bowls</span><span class="meta">Speckled Brownstone · Toasted Amber</span></div>
|
||
<div class="loadrow"><span>🧪 Test tiles ×4</span><span class="meta">Porcelain · Sea-glass Celadon <span class="pill butter">first porcelain test!</span></span></div>
|
||
<div class="mt"><span class="pill ghost">＋ add from "in the studio" list</span></div>
|
||
<div class="mt">
|
||
<h3>Kiln photo before closing</h3>
|
||
<div class="photos"><div class="ph">📷</div><div class="ph add">＋</div></div>
|
||
<div class="note-inline mt">Future-you, on unload day, will be very glad this exists.</div>
|
||
</div>
|
||
<div class="mt">
|
||
<button class="btn primary">Kiln is loaded — start firing 🔥</button>
|
||
</div>
|
||
<div class="sparkle">🔌 Phase 5: this button actually talks to Tony's kiln controller — ramp status and cone-offs show up right here.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ UNLOAD DAY ============ -->
|
||
<section class="panel" id="results">
|
||
<div class="card">
|
||
<div class="steps">
|
||
<span class="step dim">1 · plan</span><span class="step dim">2 · load</span><span class="step dim">3 · fire</span><span class="step">4 · unload ✨</span>
|
||
</div>
|
||
<h4>Firing #5 — unload day!</h4>
|
||
<div class="meta" style="margin-bottom:14px">Rate each thing as it comes out. One tap each — notes only where you want them.</div>
|
||
<div class="loadrow">
|
||
<span>🏺 Carved mugs <span class="meta">B-Mix · Celadon</span></span>
|
||
<span class="verdict"><span class="on">😍</span><span>🙂</span><span>😕</span><span>💔</span></span>
|
||
</div>
|
||
<div class="loadrow">
|
||
<span>🥣 Bowls <span class="meta">Brownstone · Amber</span></span>
|
||
<span class="verdict"><span>😍</span><span class="on">🙂</span><span>😕</span><span>💔</span></span>
|
||
</div>
|
||
<div class="loadrow">
|
||
<span>🧪 Tiles <span class="meta">Porcelain · Celadon</span></span>
|
||
<span class="verdict"><span>😍</span><span>🙂</span><span class="on">😕</span><span>💔</span></span>
|
||
</div>
|
||
<div class="field mt"><label>Notes on the 😕</label><textarea rows="2" placeholder="Celadon on porcelain: washed out even at 3 dips. Maybe 4? Or S.G. up to 1.5.">Celadon on porcelain: washed out even at 3 dips. Maybe 4 dips? Or S.G. up to 1.5.</textarea></div>
|
||
<div class="mt">
|
||
<h3>Photos</h3>
|
||
<div class="photos"><div class="ph">📷</div><div class="ph">📷</div><div class="ph">📷</div><div class="ph add">＋</div></div>
|
||
</div>
|
||
<div class="mt"><button class="btn primary">Save unload ✨</button></div>
|
||
<div class="sparkle">🌱 Saving this updates everything automatically: the mugs move to "ready to sell," Celadon's page gains a porcelain row ("😕 washed out — 1 firing"), and Firing #5 closes with its story told. One screen, three systems fed.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="footnote">🌙 round 3 · the deep screens · what would make unload day feel like opening presents?</div>
|
||
</div>
|
||
</body>
|
||
</html>
|