Studio Notebook: vision, Phase 1 designs, and working prototype
- 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>
This commit is contained in:
Bonna
295
design/phase1-glaze-firing-screens.html
Normal file
295
design/phase1-glaze-firing-screens.html
Normal file
@@ -0,0 +1,295 @@
|
||||
<!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>
|
||||
251
design/phase1-studio-notebook-mockup.html
Normal file
251
design/phase1-studio-notebook-mockup.html
Normal file
@@ -0,0 +1,251 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Studio Notebook — 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: 30px; font-weight: 600; letter-spacing: 0.2px; color: var(--plum-deep); }
|
||||
h1 .moon { font-style: normal; }
|
||||
.sub { color: #9c8698; font-size: 15px; margin-top: 3px; font-style: italic; font-family: Georgia, serif; }
|
||||
|
||||
/* CSS-only tabs — radio inputs, no scripts needed */
|
||||
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
|
||||
nav { display: flex; gap: 8px; margin: 24px 0 26px; flex-wrap: wrap; }
|
||||
nav label { border: 1.5px solid var(--line); background: var(--card); color: #a08fa0; padding: 9px 20px; border-radius: 999px; font-size: 14.5px; cursor: pointer; font-weight: 600; transition: all .15s; }
|
||||
nav label:hover { border-color: var(--blush-deep); color: var(--plum-deep); }
|
||||
.panel { display: none; }
|
||||
#t-today:checked ~ .wrap nav label[for="t-today"],
|
||||
#t-glazes:checked ~ .wrap nav label[for="t-glazes"],
|
||||
#t-firings:checked ~ .wrap nav label[for="t-firings"],
|
||||
#t-notes:checked ~ .wrap nav label[for="t-notes"] { background: var(--plum); border-color: var(--plum); color: #fff; }
|
||||
#t-today:checked ~ .wrap #today, #t-glazes:checked ~ .wrap #glazes,
|
||||
#t-firings:checked ~ .wrap #firings, #t-notes:checked ~ .wrap #notes { display: block; }
|
||||
|
||||
.grid { display: grid; gap: 14px; } .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); }
|
||||
@media (max-width: 640px){ .g2, .g3 { 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; }
|
||||
.big-capture { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(141,107,148,0.06); }
|
||||
.big-capture .row1 { display: flex; gap: 10px; }
|
||||
.big-capture input[type=text] { flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 15px; font-size: 15px; background: var(--bg); color: var(--ink); font-family: inherit; }
|
||||
.big-capture .cam, .big-capture .go { border: none; border-radius: 12px; padding: 0 18px; cursor: pointer; font-family: inherit; }
|
||||
.big-capture .cam { background: var(--blush); font-size: 18px; }
|
||||
.big-capture .go { background: var(--plum); color: #fff; font-size: 14.5px; font-weight: 700; }
|
||||
.chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
|
||||
.chips .hint { font-size: 12.5px; color: #b1a0ae; margin-right: 2px; }
|
||||
.chip { font-size: 12.5px; font-weight: 650; padding: 4px 12px; border-radius: 999px; background: var(--moon); color: var(--plum-deep); border: 1px solid transparent; cursor: pointer; }
|
||||
.chip:hover { border-color: var(--plum); }
|
||||
.todo { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
|
||||
.todo:last-child { border: none; }
|
||||
.todo input { width: 17px; height: 17px; accent-color: var(--sage); }
|
||||
.todo .done { text-decoration: line-through; color: #b1a0ae; }
|
||||
.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; }
|
||||
.swatch { height: 74px; border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(0,0,0,0.05); }
|
||||
.glaze h4, .fire h4, .note-card h4 { font-family: Georgia, serif; font-size: 16.5px; font-weight: 600; color: var(--plum-deep); }
|
||||
.meta { color: #9c8698; font-size: 13.5px; margin: 2px 0 8px; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
|
||||
td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
|
||||
td:last-child { text-align: right; color: #9c8698; font-variant-numeric: tabular-nums; }
|
||||
tr:last-child td { border: none; }
|
||||
.fire { margin-bottom: 14px; }
|
||||
.fire .load { margin-top: 10px; font-size: 14px; }
|
||||
.fire .load li { margin-left: 18px; padding: 2px 0; }
|
||||
.result { background: var(--moon); border-radius: 12px; padding: 10px 14px; margin-top: 12px; font-size: 14px; }
|
||||
.photos { display: flex; gap: 8px; margin-top: 12px; }
|
||||
.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; }
|
||||
.note-card p { font-size: 14.5px; margin-top: 6px; }
|
||||
.note-card .tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.mt { margin-top: 14px; }
|
||||
.kiln { display: flex; align-items: center; gap: 12px; }
|
||||
.kiln .dot { width: 10px; height: 10px; border-radius: 50%; background: #cabfd0; }
|
||||
.footnote { color: #b1a0ae; font-size: 13px; margin-top: 28px; text-align: center; font-style: italic; font-family: Georgia, serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input class="tab-radio" type="radio" name="tabs" id="t-today" checked>
|
||||
<input class="tab-radio" type="radio" name="tabs" id="t-glazes">
|
||||
<input class="tab-radio" type="radio" name="tabs" id="t-firings">
|
||||
<input class="tab-radio" type="radio" name="tabs" id="t-notes">
|
||||
|
||||
<div class="wrap">
|
||||
<header>
|
||||
<div class="banner">✏️ Still a <strong>sketch, not the app</strong> — pretend data, made to be reacted to. Tabs work now!</div>
|
||||
<h1><span class="moon">🌙</span> Studio Notebook</h1>
|
||||
<div class="sub">Good morning, Bonna — day 3 in the new studio</div>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<label for="t-today">Today</label>
|
||||
<label for="t-glazes">Glazes</label>
|
||||
<label for="t-firings">Firing Log</label>
|
||||
<label for="t-notes">Notes</label>
|
||||
</nav>
|
||||
|
||||
<!-- TODAY -->
|
||||
<section class="panel" id="today">
|
||||
<div class="big-capture">
|
||||
<div class="row1">
|
||||
<input type="text" placeholder="Jot anything… a thought, a glaze idea, what's drying">
|
||||
<button class="cam" title="Snap a photo">📷</button>
|
||||
<button class="go">Save</button>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<span class="hint">file it as…</span>
|
||||
<span class="chip">✨ just a note</span><span class="chip">🧪 glaze</span><span class="chip">🔥 firing</span><span class="chip">✓ to-do</span><span class="chip">🏺 piece</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid g2">
|
||||
<div class="card">
|
||||
<h3>To-do</h3>
|
||||
<div class="todo"><input type="checkbox"><span>Wedge clay for mug run (B-Mix)</span></div>
|
||||
<div class="todo"><input type="checkbox"><span>Mix test batch — Celadon variation #2</span></div>
|
||||
<div class="todo"><input type="checkbox" checked><span class="done">Unload bisque firing</span></div>
|
||||
<div class="todo"><input type="checkbox"><span>Order silica — running low</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>In the studio</h3>
|
||||
<div class="todo"><span>🏺 6 mugs — <b>leather hard</b>, trim today</span></div>
|
||||
<div class="todo"><span>🥣 2 serving bowls — drying, 2 more days</span></div>
|
||||
<div class="todo"><span>🥄 Walnut spoon blanks — roughed out</span></div>
|
||||
<div class="mt"><span class="pill butter">next firing: bisque, ~Sat</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Kiln</h3>
|
||||
<div class="kiln"><div class="dot"></div><span>Idle — last fired 3 days ago (bisque, ∆04)</span></div>
|
||||
<div class="mt"><span class="pill sage">Tony's controller plugs in here, Phase 5</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Recent notes</h3>
|
||||
<div class="todo"><span>“Celadon breaks beautifully over carved texture…”</span></div>
|
||||
<div class="todo"><span>“New wheel position feels right by the window”</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Shopping list 🧺</h3>
|
||||
<div class="todo"><input type="checkbox"><span>Silica — 10 lb <span class="pill butter">pantry says low</span></span></div>
|
||||
<div class="todo"><input type="checkbox"><span>Business cards — reorder</span></div>
|
||||
<div class="todo"><input type="checkbox"><span>Tissue paper + moon stickers</span></div>
|
||||
<div class="todo"><input type="checkbox"><span>Trimming tool (the sharp little one)</span></div>
|
||||
<div class="mt"><span class="pill sage">one list for everything — materials, tools, packaging, paper goods</span></div>
|
||||
</div>
|
||||
<div class="card" style="grid-column: 1 / -1;">
|
||||
<h3>How things land here</h3>
|
||||
<div class="todo"><span>✍️ Jot “order more wax resist” anywhere → chip it as <b>to-do</b> or say “shopping” → it files itself onto this list.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GLAZES -->
|
||||
<section class="panel" id="glazes">
|
||||
<div class="grid g3">
|
||||
<div class="card glaze">
|
||||
<div class="swatch" style="background:linear-gradient(150deg,#b8cec4,#8fb0a3)"></div>
|
||||
<h4>Sea-glass Celadon</h4>
|
||||
<div class="meta">∆6 ox · glossy · translucent</div>
|
||||
<span class="pill sage">tested · loves B-Mix</span>
|
||||
</div>
|
||||
<div class="card glaze">
|
||||
<div class="swatch" style="background:linear-gradient(150deg,#c98d5f,#8a5637)"></div>
|
||||
<h4>Toasted Amber</h4>
|
||||
<div class="meta">∆6 ox · satin · breaks rust</div>
|
||||
<span class="pill">2 tests · crawls on porcelain</span>
|
||||
</div>
|
||||
<div class="card glaze">
|
||||
<div class="swatch" style="background:linear-gradient(150deg,#ece7de,#cfc8ba)"></div>
|
||||
<h4>Oat Matte</h4>
|
||||
<div class="meta">∆6 ox · matte · opaque</div>
|
||||
<span class="pill butter">untested — from Glazy</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt">
|
||||
<h3>Recipe — Sea-glass Celadon</h3>
|
||||
<table>
|
||||
<tr><td>Custer Feldspar</td><td>38</td></tr>
|
||||
<tr><td>Silica</td><td>28</td></tr>
|
||||
<tr><td>Whiting</td><td>18</td></tr>
|
||||
<tr><td>EPK Kaolin</td><td>16</td></tr>
|
||||
<tr><td>+ Copper Carbonate</td><td>0.5</td></tr>
|
||||
<tr><td>+ Bentonite</td><td>2</td></tr>
|
||||
</table>
|
||||
<div class="result">📒 <b>Notebook:</b> thin = washes out; 3 dips or S.G. 1.45. Gorgeous pooling in carved lines. <b>Works with:</b> B-Mix ✓, Speckled Brownstone ✓, Porcelain — untested.</div>
|
||||
<div class="photos"><div class="ph">🏺</div><div class="ph">🫖</div><div class="ph">🧪</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FIRING LOG -->
|
||||
<section class="panel" id="firings">
|
||||
<div class="card fire">
|
||||
<h4>Firing #4 — Glaze, ∆6 oxidation</h4>
|
||||
<div class="meta">Aug 2 · slow ramp, 15 min hold · 11 hrs</div>
|
||||
<ul class="load">
|
||||
<li>6 mugs — B-Mix — Sea-glass Celadon</li>
|
||||
<li>2 bowls — Speckled Brownstone — Toasted Amber</li>
|
||||
<li>4 test tiles — Oat Matte variations</li>
|
||||
</ul>
|
||||
<div class="result">✨ <b>Result:</b> Celadon perfect on carved mugs. Amber ran on bowl #2 — thinner next time or catch plates. Oat tiles: #3 is the keeper.</div>
|
||||
<div class="photos"><div class="ph">📷</div><div class="ph">📷</div></div>
|
||||
</div>
|
||||
<div class="card fire">
|
||||
<h4>Firing #3 — Bisque, ∆04</h4>
|
||||
<div class="meta">Jul 29 · standard bisque · 9 hrs</div>
|
||||
<ul class="load"><li>Full load — mugs, bowls, tiles</li></ul>
|
||||
<div class="result">All clean, no cracks. New kiln shelves level. 🎉</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NOTES -->
|
||||
<section class="panel" id="notes">
|
||||
<div class="big-capture">
|
||||
<div class="row1">
|
||||
<input type="text" placeholder="New note…">
|
||||
<button class="cam" title="Snap a photo">📷</button>
|
||||
<button class="go">Save</button>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<span class="hint">tag it…</span>
|
||||
<span class="chip">glaze</span><span class="chip">wood</span><span class="chip">new studio</span><span class="chip">collection ideas</span><span class="chip">shows</span><span class="chip">+ new tag</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid g2">
|
||||
<div class="card note-card">
|
||||
<h4>Carving + celadon = the thing</h4>
|
||||
<p>The break over carved texture is exactly the look. Lean the whole first collection into carved surfaces. Chattering tool next?</p>
|
||||
<div class="photos"><div class="ph">🏺</div></div>
|
||||
<div class="tags"><span class="pill">glaze</span><span class="pill">collection ideas</span></div>
|
||||
</div>
|
||||
<div class="card note-card">
|
||||
<h4>Studio layout</h4>
|
||||
<p>Wheel by the window is right. Wedging table needs to move closer to clay storage — too many trips.</p>
|
||||
<div class="tags"><span class="pill">new studio</span></div>
|
||||
</div>
|
||||
<div class="card note-card">
|
||||
<h4>Spoon shapes</h4>
|
||||
<p>Walnut roughing went fast. Try a shorter, deeper bowl on the next blanks — more of a tasting spoon.</p>
|
||||
<div class="photos"><div class="ph">🥄</div><div class="ph">🪵</div></div>
|
||||
<div class="tags"><span class="pill">wood</span></div>
|
||||
</div>
|
||||
<div class="card note-card">
|
||||
<h4>Market idea — Fall Makers Fair</h4>
|
||||
<p>Deadline usually mid-September? Check fee. This becomes a real tracked thing in Phase 3.</p>
|
||||
<div class="tags"><span class="pill">shows</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="footnote">🌙 Phase 1 sketch · tell me what feels right and what doesn't</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user