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 ">
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 "> Current Editions</ 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,34 +88,39 @@ <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 class ="jpcap "> マシンドロー</ h2 >
93+ < p > DRAWN BY MACHINE · EST. 2026</ p >
94+ </ div >
7895 < div class ="replay " id ="replay "> < span > ▶︎ 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 ">
102120 < div class ="grain "> </ div >
103121 < div class ="wrap mani-in ">
104- < div > < h2 > Drawn, < br > not printed < span class ="star "> .</ span > </ h2 > < div class ="jp "> マシンドロー</ div > </ div >
105- < p > Each Universal-Century mobile suit is rebuilt as a vector drawing and traced in ink by an AxiDraw plotter on Strathmore Bristol. No printing. Every impression is unique to its edition, signed and numbered.</ p >
122+ < div > < h2 > Drawn by < br > machine < span class ="star "> .</ span > </ h2 > < div class ="jp "> マシンドロー</ div > </ div >
123+ < p > Each Universal-Century mobile suit is rebuilt as a vector drawing and traced in ink by an AxiDraw plotter on Strathmore Bristol. Every impression is unique to its edition, signed and numbered.</ p >
106124 </ div >
107125</ section >
108126
@@ -111,7 +129,7 @@ <h1>PLOTFLOW<span class="s">*</span></h1>
111129 < div class ="grain "> </ div >
112130 < div class ="wrap ">
113131 < div class ="shop-head ">
114- < h2 > The Work < span class ="star "> *</ span > </ h2 > < span class ="jp "> 作品</ span >
132+ < h2 > Current Editions < span class ="star "> *</ span > </ h2 > < span class ="jp "> 作品</ span >
115133 < div class ="meta tiny "> Limited editions, made to order. Minor variation in line + ink is a feature of the medium.</ div >
116134 </ div >
117135 < div class ="grid " id ="grid "> </ div >
@@ -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 >
0 commit comments