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
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