Skip to content

Commit c330ef5

Browse files
claudeclaude
committed
feat: Console redesign — homepage rebuilt in PlotGrid's design language
The approved Console direction, built for real (not a mockup). The homepage now presents itself as the studio's plotting software: - Top console bar: PLOTFLOW* · CONSOLE · PLOTTING <code> · LIVE SIMULATION, nav + cart chip - PlotGrid-style sidebar: EDITION QUEUE (rows drive the same #suit select the plotter listens to — active row shows PLOTTING), SPEED · SIMULATION segment with the SIM ≈ ×N machine-speed note, MACHINE STATE block (Pause / Restart / Skip) pinned to the bottom - Full-bleed bristol sheet: the existing Live Plot engine (canvas + svg + pen crosshair) unchanged, artwork fills the sheet, PROGRAM VIEW label + corner ticks, DRAWN, NOT PRINTED. caption on the paper - Translucent LIVE PLOT* / MACHINE overlay card: progress, ink laid, position, elapsed, real plot time - Bottom status strip (pen / feed / sheet / マシンドロー) - Everything below the workspace (manifesto, shop grid, process, drop list, footer) untouched; cart, shop.js, consent, newsletter all keep working Verified headless: plot animates, queue switches suits (job code + plot time follow), pause/resume works, 6 shop cards render, zero JS errors. styles/console.css is additive — other pages keep the existing design until they're brought over. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JWP9tY4m4hfX8WyoEQZ1kU
1 parent 772afda commit c330ef5

2 files changed

Lines changed: 213 additions & 37 deletions

File tree

‎index.html‎

Lines changed: 81 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Noto+Sans+JP:wght@500;700;900&display=swap" rel="stylesheet">
2222
<link rel="stylesheet" href="styles/tokens.css">
2323
<link rel="stylesheet" href="styles/styles.css">
24+
<link rel="stylesheet" href="styles/console.css">
2425
<meta name="description" content="PLOTFLOW is an independent pen-plotter studio. Universal-Century mobile suits drawn in ink by machine. Limited editions, signed and numbered.">
2526
<link rel="canonical" href="https://plotflow.io/">
2627
<meta name="theme-color" content="#43463e">
@@ -38,35 +39,47 @@
3839
</head>
3940
<body>
4041

41-
<nav><div class="nav-in">
42-
<a href="/" class="brand">Plotflow<i>*</i></a>
43-
<div style="display:flex;align-items:center;gap:16px">
44-
<div class="nav-links"><a href="#shop">The Work</a><a href="#process">Process</a><a href="#feature">Live Plot</a></div>
42+
<!-- CONSOLE BAR -->
43+
<header class="pf-bar">
44+
<a href="/" class="brand">PLOTFLOW<i>*</i></a>
45+
<span class="pf-job">CONSOLE · PLOTTING <b id="pfJobCode">—</b> · LIVE SIMULATION</span>
46+
<div class="pf-nav">
47+
<a href="#shop">The Work</a><a href="#process">Process</a><a href="about.html">Studio</a>
4548
<button class="cart">Cart [0]</button>
4649
</div>
47-
</div></nav>
50+
</header>
4851

49-
<!-- HERO / LIVE PLOT FEATURE -->
50-
<header class="hero" id="feature">
51-
<div class="grain"></div><div class="scan"></div>
52-
<div class="halftone ht1"></div>
52+
<!-- WORKSPACE / LIVE PLOT -->
53+
<section class="pf-ws" id="feature">
54+
<aside class="pf-side">
55+
<div class="pf-tabs"><span>SCENE</span><span class="on">PLOT</span><span>QUEUE</span><span>LOG</span></div>
5356

54-
<div class="hero-head">
55-
<h1>PLOTFLOW<span class="s">*</span></h1>
56-
<div class="sub">independent pen-plotter studio <b>//</b> mobile suit editions, drawn by machine <b>//</b> プロットフロー</div>
57-
</div>
57+
<div class="pf-sec">
58+
<h5>EDITION QUEUE · <span class="jp">作品</span></h5>
59+
<div id="pfQueue"></div>
60+
</div>
5861

59-
<div class="hud num">
60-
<div class="k">Progress</div><div class="row"><span id="pct">0</span><small>%</small></div>
61-
<div class="k" style="margin-top:10px">Ink drawn</div><div class="row"><span id="ink">0.00</span><small>/ <span id="inktot">0.00</span> m</small></div>
62-
<div class="k" style="margin-top:10px">Plot time</div><div class="row"><span id="elapsed">00:00</span><small>/ <span id="total">00:00</span></small></div>
63-
<div class="k" style="margin-top:10px">Position</div><div class="row"><span id="cx">000</span> · <span id="cy">000</span><small>mm</small></div>
64-
</div>
62+
<div class="pf-sec">
63+
<h5>SPEED · SIMULATION</h5>
64+
<div class="seg" id="speed"><button data-s="0.5">0.5×</button><button data-s="1" class="on">1×</button><button data-s="2">2×</button><button data-s="4">4×</button></div>
65+
<p class="pf-note" id="simx"></p>
66+
<p class="pf-note">SIMULATION PACE ONLY — THE REAL PLOT TIME SHOWS IN THE LIVE PLOT CARD.</p>
67+
</div>
6568

66-
<div class="stage-area">
69+
<div class="pf-sec pf-machine">
70+
<h5>MACHINE STATE · <b>PLOTTING</b></h5>
71+
<button class="pf-big" id="play">Pause</button>
72+
<div class="pf-row2"><button class="pf-btn" id="restart">Restart</button><button class="pf-btn" id="skip">Skip ▸︎▸︎</button></div>
73+
</div>
74+
75+
<div class="selwrap" hidden><select id="suit" aria-label="Edition"></select></div>
76+
</aside>
77+
78+
<div class="pf-stage">
6779
<div class="bed" id="bed">
6880
<span class="corner c-tl"></span><span class="corner c-tr"></span><span class="corner c-bl"></span><span class="corner c-br"></span>
6981
<span class="bl" id="bedlabel">BED 01 · ARCHIVAL</span>
82+
<span class="pf-view">PROGRAM VIEW · DRAWN IN EXECUTION ORDER · INK 0.30 MM</span>
7083
<canvas id="pcanvas"></canvas>
7184
<svg id="stage" viewBox="0 0 1493 801" preserveAspectRatio="xMidYMid meet">
7285
<path id="ppath" d=""></path>
@@ -75,27 +88,32 @@ <h1>PLOTFLOW<span class="s">*</span></h1>
7588
<path id="pen-x" d="" stroke="#15140f" stroke-width="1.6" vector-effect="non-scaling-stroke"></path>
7689
</g>
7790
</svg>
91+
<div class="pf-cap">
92+
<h2>DRAWN,<br>NOT PRINTED<i>.</i></h2>
93+
<p>マシンドロー · DRAWN BY MACHINE · EST. 2026</p>
94+
</div>
7895
<div class="replay" id="replay"><span>▶&#xFE0E; Plot again</span></div>
7996
</div>
80-
</div>
81-
82-
<div class="hero-jp">
83-
<div class="k jp">マシンドロー</div>
84-
<div class="e">Drawn by machine</div>
85-
</div>
86-
<div class="hero-collab">[ LIVE PLOT<span class="star">*</span> ]</div>
87-
<span class="ast-bug ast"><svg viewBox="0 0 100 100"><line x1="50" y1="6" x2="50" y2="94"/><line x1="6" y1="50" x2="94" y2="50"/><line x1="19" y1="19" x2="81" y2="81"/><line x1="81" y1="19" x2="19" y2="81"/></svg></span>
8897

89-
<div class="pbar"><b id="pbar"></b></div>
90-
<div class="dock">
91-
<div class="selwrap"><select id="suit"></select></div>
92-
<button class="btn pri" id="play">Pause</button>
93-
<button class="btn" id="restart">Restart</button>
94-
<button class="btn" id="skip">Skip ▸︎▸︎</button>
95-
<div class="seg" id="speed"><button data-s="0.5">0.5×</button><button data-s="1" class="on">1×</button><button data-s="2">2×</button><button data-s="4">4×</button></div>
96-
<span class="tiny" id="simx" style="color:var(--dim);letter-spacing:.08em;align-self:center"></span>
98+
<aside class="pf-card">
99+
<div class="hd"><b>LIVE PLOT*</b><span>MACHINE</span></div>
100+
<div class="big"><label>PROGRESS</label><b><span id="pct">0</span><i>%</i></b></div>
101+
<div class="pbar"><b id="pbar"></b></div>
102+
<div class="grid">
103+
<div><label>INK LAID</label><b><span id="ink">0.00</span><i>/ <span id="inktot">0.00</span> m</i></b></div>
104+
<div><label>POSITION</label><b><span id="cx">000</span> · <span id="cy">000</span><i>mm</i></b></div>
105+
<div><label>ELAPSED</label><b><span id="elapsed">00:00</span></b></div>
106+
<div><label>PLOT TIME</label><b><span id="total">00:00</span></b></div>
107+
</div>
108+
<div class="ft"><span>PEN-UP TRAVEL</span><span>SIMULATED ON SHEET</span></div>
109+
</aside>
97110
</div>
98-
</header>
111+
</section>
112+
<div class="pf-status">
113+
<span>PEN 0.3 MM · RED</span><span>FEED 1100 MM/MIN</span><span>SHEET 11×14″ BRISTOL</span>
114+
<span class="sp"></span>
115+
<span>AXIDRAW · SIMULATED</span><span class="jp">マシンドロー</span>
116+
</div>
99117

100118
<!-- MANIFESTO -->
101119
<section class="mani">
@@ -168,6 +186,32 @@ <h2>Join the drop list<span class="star">*</span></h2>
168186
<script src="scripts/stock.js"></script>
169187
<script src="scripts/shop.js"></script>
170188
<script src="scripts/plotter.js"></script>
189+
<script>
190+
// Sidebar edition queue — drives the same #suit select plotter.js listens to.
191+
(function () {
192+
var sel = document.getElementById('suit'), box = document.getElementById('pfQueue');
193+
var job = document.getElementById('pfJobCode');
194+
if (!sel || !box || !window.PLOTFLOW) return;
195+
var S = PLOTFLOW.suits, ORDER = PLOTFLOW.plotterOrder || Object.keys(S);
196+
function draw() {
197+
box.innerHTML = ORDER.map(function (k) {
198+
var s = S[k], on = sel.value === k;
199+
return '<button class="pf-q' + (on ? ' on' : '') + '" data-k="' + k + '">' +
200+
'<span class="code">' + s.code + '</span><span class="nm">' + s.name + '</span>' +
201+
'<span class="st">' + (on ? 'PLOTTING' : 'AVAILABLE') + '</span></button>';
202+
}).join('');
203+
if (job && S[sel.value]) job.textContent = S[sel.value].code;
204+
}
205+
box.addEventListener('click', function (e) {
206+
var b = e.target.closest('.pf-q'); if (!b) return;
207+
sel.value = b.dataset.k;
208+
sel.dispatchEvent(new Event('change'));
209+
draw();
210+
});
211+
sel.addEventListener('change', draw);
212+
draw();
213+
})();
214+
</script>
171215
<script src="scripts/newsletter.js"></script>
172216
<script src="scripts/cart.js"></script>
173217
</body>

‎styles/console.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/* ============================================================
2+
PLOTFLOW · CONSOLE — homepage workspace styled like PlotGrid.
3+
The site presents itself as the studio's plotting software:
4+
sidebar (queue / speed / machine state), full-bleed sheet,
5+
translucent LIVE PLOT card floating over the canvas.
6+
Only .pf-* classes + scoped overrides; the sections below the
7+
workspace (manifesto/shop/process/news) keep styles.css.
8+
============================================================ */
9+
10+
/* ── top status bar ── */
11+
.pf-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
12+
padding:11px 18px;background:#16170f;border-bottom:1px solid var(--line)}
13+
.pf-bar .brand{font-weight:900;font-size:15px;letter-spacing:.06em;color:var(--white);text-decoration:none}
14+
.pf-bar .brand i{color:var(--red);font-style:normal}
15+
.pf-job{font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
16+
.pf-job b{color:var(--white)}
17+
.pf-nav{margin-left:auto;display:flex;gap:20px;align-items:center}
18+
.pf-nav a{font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
19+
color:var(--mute);text-decoration:none}
20+
.pf-nav a:hover{color:var(--white)}
21+
.pf-bar .cart{background:none;border:1px solid var(--red);color:var(--red);font-weight:800;
22+
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;cursor:pointer}
23+
.pf-bar .cart:hover{background:var(--red);color:#fff}
24+
25+
/* ── workspace ── */
26+
.pf-ws{display:grid;grid-template-columns:288px 1fr;height:calc(100vh - 44px);min-height:640px;
27+
border-bottom:1px solid var(--line);background:var(--con2)}
28+
29+
/* sidebar */
30+
.pf-side{background:#181a13;border-right:1px solid var(--line);display:flex;flex-direction:column;
31+
overflow-y:auto}
32+
.pf-tabs{display:flex;border-bottom:1px solid var(--line)}
33+
.pf-tabs span{padding:10px 13px;font-weight:800;font-size:9.5px;letter-spacing:.16em;color:var(--dim)}
34+
.pf-tabs span.on{background:var(--white);color:var(--ink)}
35+
.pf-sec{padding:16px;border-bottom:1px solid var(--line)}
36+
.pf-sec h5{font-weight:800;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
37+
color:var(--dim);margin:0 0 12px}
38+
.pf-sec h5 .jp{font-family:var(--jp)}
39+
.pf-sec h5 b{color:var(--red)}
40+
.pf-note{font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
41+
color:var(--dim);line-height:1.8;margin:10px 0 0}
42+
43+
/* edition queue */
44+
.pf-q{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;
45+
border:1px solid transparent;border-bottom:1px solid var(--line);padding:9px 8px;cursor:pointer;
46+
color:var(--mute)}
47+
.pf-q:last-child{border-bottom-color:transparent}
48+
.pf-q .code{font-weight:700;font-size:9px;letter-spacing:.1em;color:var(--dim);width:74px;flex:none}
49+
.pf-q .nm{font-weight:800;font-size:11.5px;color:var(--white);flex:1}
50+
.pf-q .st{font-weight:800;font-size:8px;letter-spacing:.16em;padding:3px 7px;
51+
border:1px solid var(--line);color:var(--dim)}
52+
.pf-q:hover{border-color:var(--line)}
53+
.pf-q.on{border-color:var(--red)}
54+
.pf-q.on .st{border-color:var(--red);color:var(--red)}
55+
56+
/* speed segment (reuses #speed .seg buttons) */
57+
.pf-side .seg{display:flex;width:100%}
58+
.pf-side .seg button{flex:1;background:none;border:1px solid var(--line);border-right-width:0;
59+
color:var(--mute);font-weight:800;font-size:10px;letter-spacing:.08em;padding:9px 0;cursor:pointer}
60+
.pf-side .seg button:last-child{border-right-width:1px}
61+
.pf-side .seg button.on{background:var(--white);color:var(--ink);border-color:var(--white)}
62+
63+
/* machine state */
64+
.pf-machine{margin-top:auto}
65+
.pf-big{width:100%;background:var(--red);border:none;color:#fff;font-weight:900;font-size:12.5px;
66+
letter-spacing:.1em;text-transform:uppercase;padding:14px;cursor:pointer}
67+
.pf-big:hover{filter:brightness(1.08)}
68+
.pf-row2{display:flex;gap:8px;margin-top:8px}
69+
.pf-row2 .pf-btn{flex:1;background:none;border:1px solid var(--line);color:var(--mute);
70+
font-weight:800;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 0;cursor:pointer}
71+
.pf-row2 .pf-btn:hover{color:var(--white);border-color:var(--mute)}
72+
73+
/* stage — the sheet takes the whole block */
74+
.pf-stage{position:relative;padding:16px;min-height:0;overflow:hidden;
75+
background:radial-gradient(1100px 640px at 55% 42%,#474a41 0%,#31342c 72%)}
76+
.pf-stage .bed{position:absolute;inset:16px;width:auto;max-height:none;aspect-ratio:auto}
77+
/* leave paper margins for the labels + caption; canvas & svg share the same
78+
box so the pen crosshair stays aligned with the ink */
79+
.pf-stage #pcanvas,.pf-stage #stage{inset:46px 40px 92px}
80+
.pf-stage .bed .bl{left:16px;transform:none}
81+
.pf-view{position:absolute;top:8px;right:16px;z-index:3;font-weight:700;font-size:8px;
82+
letter-spacing:.16em;text-transform:uppercase;color:#a99a76}
83+
.pf-cap{position:absolute;left:26px;bottom:20px;z-index:3;pointer-events:none}
84+
.pf-cap h2{font-weight:900;font-size:clamp(1.5rem,3vw,2.6rem);line-height:.95;color:#15160f;margin:0}
85+
.pf-cap h2 i{color:var(--red);font-style:normal}
86+
.pf-cap p{font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
87+
color:#8f8873;margin:7px 0 0}
88+
89+
/* LIVE PLOT overlay card */
90+
.pf-card{position:absolute;top:34px;right:34px;z-index:9;width:284px;
91+
background:rgba(18,20,13,.82);border:1px solid rgba(245,244,239,.16);
92+
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
93+
box-shadow:0 16px 44px rgba(0,0,0,.4);color:var(--mute)}
94+
.pf-card .hd{display:flex;justify-content:space-between;padding:10px 14px;
95+
border-bottom:1px solid rgba(245,244,239,.14);font-weight:800;font-size:9px;letter-spacing:.2em;
96+
text-transform:uppercase;color:var(--dim)}
97+
.pf-card .hd b{color:var(--red)}
98+
.pf-card .big{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px 8px}
99+
.pf-card .big label{font-weight:800;font-size:8.5px;letter-spacing:.2em;color:var(--dim)}
100+
.pf-card .big b{font-weight:900;font-size:26px;color:var(--white)}
101+
.pf-card .big b i{font-style:normal;font-weight:700;font-size:13px;color:var(--dim);margin-left:2px}
102+
.pf-card .pbar{margin:0 14px;background:rgba(245,244,239,.14)}
103+
.pf-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:13px 14px}
104+
.pf-card .grid label{display:block;font-weight:800;font-size:8px;letter-spacing:.18em;color:var(--dim)}
105+
.pf-card .grid b{font-weight:800;font-size:13.5px;color:var(--white)}
106+
.pf-card .grid b i{font-style:normal;font-weight:700;font-size:9.5px;color:var(--dim);margin-left:2px}
107+
.pf-card .ft{display:flex;justify-content:space-between;padding:9px 14px;
108+
border-top:1px solid rgba(245,244,239,.14);font-weight:700;font-size:8px;letter-spacing:.16em;
109+
text-transform:uppercase;color:var(--dim)}
110+
111+
/* bottom status strip */
112+
.pf-status{display:flex;gap:22px;align-items:center;padding:8px 18px;background:#16170f;
113+
border-bottom:1px solid var(--line);font-weight:700;font-size:9px;letter-spacing:.16em;
114+
text-transform:uppercase;color:var(--dim)}
115+
.pf-status .sp{flex:1}
116+
.pf-status .jp{font-family:var(--jp);color:var(--red)}
117+
118+
/* responsive: stack sidebar under the stage; card goes static */
119+
@media(max-width:940px){
120+
.pf-ws{grid-template-columns:1fr;height:auto}
121+
.pf-stage{order:1;height:72vh;min-height:420px}
122+
.pf-side{order:2;border-right:none;border-top:1px solid var(--line)}
123+
.pf-machine{margin-top:0}
124+
.pf-card{width:auto;left:34px}
125+
.pf-cap{display:none}
126+
}
127+
@media(max-width:560px){
128+
.pf-card{top:16px;left:16px;right:16px}
129+
.pf-stage .bed{inset:10px}
130+
.pf-stage #pcanvas,.pf-stage #stage{inset:34px 16px 40px}
131+
.pf-job{display:none}
132+
}

0 commit comments

Comments
 (0)