br-onb-inspector.jsx
1 // Yard Inspector onboarding (Form 09). Warmer, apprentice-manual tone. 2 // 3 artboards: inspector's apprenticeship, instruments & calibration, pledge of honest work. 3 4 function OnbInsp1() { 5 return ( 6 <BRPage width={1280} minHeight={2000}> 7 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 8 <div style={{padding:"32px 60px 20px"}}> 9 <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 10 <div> 11 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 09 · INSPECTOR'S APPRENTICESHIP · PAGE 1 OF 3</div> 12 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:62, letterSpacing:-0.5, textTransform:"uppercase"}}>Apprenticeship</div> 13 <div style={{fontFamily:"IBM Plex Sans", fontSize:14, color:BR.ink2, marginTop:4, maxWidth:760, lineHeight:1.55}}> 14 A Yard Inspector stands between a pilot and a bad ship. That is the whole of the office. This packet is a short one — because the long part is the work, and the work cannot be signed for. 15 </div> 16 </div> 17 <BRStamp rotate={-5} color={BR.green}>APPRENTICE</BRStamp> 18 </div> 19 </div> 20 <div style={{padding:"10px 60px"}}> 21 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10, marginBottom:20}}> 22 {[["01","Apprenticeship","IN HAND"],["02","Instruments","PENDING"],["03","Pledge of Honest Work","PENDING"]].map(([n,t,s],i)=>( 23 <div key={n} style={{border:`2px solid ${BR.ink}`, padding:"8px 12px", background:i===0?BR.ink:BR.paper, color:i===0?BR.paper:BR.ink}}> 24 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, opacity:0.7}}>PAGE {n}</div> 25 <div style={{display:"flex", justifyContent:"space-between"}}> 26 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, letterSpacing:2, textTransform:"uppercase"}}>{t}</div> 27 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2}}>· {s}</div> 28 </div> 29 </div> 30 ))} 31 </div> 32 <div style={{display:"grid", gridTemplateColumns:"1fr 360px", gap:40}}> 33 <div> 34 <BRH n="09.01">The apprentice</BRH> 35 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}> 36 {[ 37 ["Name","TOLEM · Q. · RUI"], 38 ["Years in yards","3 (STRATA · WAYPOINT)"], 39 ["Master yardmaster","KIR-7 · STRATA DOCK 4"], 40 ["Trade before yards","HULL WELDER · IV"], 41 ["Preferred class","HAULERS · INDUSTRIAL"], 42 ["Fluent in","PLEX · FORGE CANT · GESTURAL"], 43 ].map(([k,v])=>( 44 <div key={k}> 45 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute}}>{k.toUpperCase()}</div> 46 <div style={{border:`2px solid ${BR.ink}`, background:BR.paper2, padding:"8px 10px", fontFamily:"IBM Plex Mono", fontSize:12, marginTop:3}}>{v}</div> 47 </div> 48 ))} 49 </div> 50 <BRH n="09.02">From the master yardmaster</BRH> 51 <div style={{border:`4px double ${BR.ink}`, padding:"18px 20px", background:BR.paper2, position:"relative"}}> 52 <div style={{position:"absolute", top:-14, left:24, background:BR.paper, padding:"0 10px", fontFamily:"Oswald", fontWeight:900, fontSize:12, letterSpacing:4}}>APPRENTICESHIP PAPER</div> 53 <div style={{fontFamily:"IBM Plex Sans", fontSize:14, lineHeight:1.7, fontStyle:"italic"}}> 54 Tolem has stood three years under my eye at Strata Dock 4. She learned the hull before the clipboard — first as a welder, then on the diagnostic line — which is the order I prefer. She will argue with you about a tolerance she can feel under her hand, and she will lose that argument to a gauge when the gauge is right. She is ready. 55 <br/><br/> 56 Honest work, sharp eye, steady hand. — <span style={{fontFamily:"Caveat", fontStyle:"normal", fontSize:22}}>KIR-7, Yardmaster</span> 57 </div> 58 </div> 59 <BRH n="09.03">Curriculum served</BRH> 60 <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8}}> 61 {[ 62 ["Hull integrity","SERVED"], 63 ["Drive stacks","SERVED"], 64 ["Avionics","SERVED"], 65 ["Life-support","SERVED"], 66 ["Structure · fatigue","SERVED"], 67 ["Refit planning","SERVED"], 68 ["Arbitration · yard","SERVED"], 69 ["Survey · ownership","SERVED"], 70 ].map(([k,v])=>( 71 <div key={k} style={{border:`2px solid ${BR.ink}`, padding:"10px 12px", background:BR.paper}}> 72 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>PAPER</div> 73 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:1}}>{k.toUpperCase()}</div> 74 <div style={{marginTop:4}}><BRChip ok>{v}</BRChip></div> 75 </div> 76 ))} 77 </div> 78 <BRH n="09.04">Ships touched in apprenticeship</BRH> 79 <div style={{border:`2px solid ${BR.ink}`, padding:"10px 14px", fontFamily:"IBM Plex Mono", fontSize:12, lineHeight:1.7, background:BR.paper2}}> 80 <div><span style={{color:BR.mute}}>CLASS III</span> · 28 HULLS · HAULERS & INDUSTRIAL</div> 81 <div><span style={{color:BR.mute}}>CLASS II</span> · 11 HULLS · INTERCEPTORS & CORVETTES</div> 82 <div><span style={{color:BR.mute}}>CLASS I</span> · 3 HULLS · YACHTS & COURIERS</div> 83 <div><span style={{color:BR.mute}}>SALVAGE</span> · 4 HULLS · CASUALTY RECOVERIES</div> 84 <div style={{marginTop:8, paddingTop:6, borderTop:`1px solid ${BR.ink}44`, color:BR.mute, letterSpacing:2}}>TOTAL · 46 HULLS · 14,200 YARD-HOURS</div> 85 </div> 86 </div> 87 <div> 88 <div style={{border:`2px solid ${BR.ink}`, padding:14, background:BR.paper2}}> 89 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>AN OLD HAND WRITES ·</div> 90 <div style={{fontFamily:"Caveat", fontSize:19, lineHeight:1.35, color:BR.ink}}> 91 "The hull will tell you everything if you don't interrupt it. Instruments confirm what the hull has already said." 92 </div> 93 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, marginTop:8, textAlign:"right"}}>— KIR-7 · Yardmaster · 22 YRS</div> 94 </div> 95 <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:12}}> 96 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>APPRENTICE'S PLATE</div> 97 <div style={{aspectRatio:"1/1.2", background:`repeating-linear-gradient(45deg, ${BR.paper} 0 8px, ${BR.paper2} 8px 16px)`, border:`2px solid ${BR.ink}`, display:"flex", alignItems:"center", justifyContent:"center"}}> 98 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute}}>WORKSHOP PHOTO · 2396.062</div> 99 </div> 100 <div style={{marginTop:10, display:"grid", gridTemplateColumns:"auto 1fr", gap:8, fontFamily:"IBM Plex Mono", fontSize:11}}> 101 <div style={{color:BR.mute}}>YARD</div><div>STRATA · DOCK 4</div> 102 <div style={{color:BR.mute}}>APPRENTICE</div><div>T. Q. RUI</div> 103 <div style={{color:BR.mute}}>TERM</div><div>2393.201 → 2396.114</div> 104 </div> 105 </div> 106 <div style={{marginTop:14, padding:"10px 14px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, textAlign:"center"}}>PROCEED TO INSTRUMENTS →</div> 107 </div> 108 </div> 109 </div> 110 <BRFooter/> 111 </BRPage> 112 ); 113 } 114 115 function OnbInsp2() { 116 return ( 117 <BRPage width={1280} minHeight={2000}> 118 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 119 <div style={{padding:"32px 60px 20px"}}> 120 <div style={{display:"flex", justifyContent:"space-between", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 121 <div> 122 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 09 · PAGE 2 OF 3 · INSTRUMENTS & CALIBRATION</div> 123 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:62, letterSpacing:-0.5, textTransform:"uppercase"}}>Instruments</div> 124 </div> 125 </div> 126 </div> 127 <div style={{padding:"10px 60px"}}> 128 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10, marginBottom:20}}> 129 {[["01","Apprenticeship","SIGNED"],["02","Instruments","IN HAND"],["03","Pledge of Honest Work","PENDING"]].map(([n,t,s],i)=>( 130 <div key={n} style={{border:`2px solid ${BR.ink}`, padding:"8px 12px", background:i===1?BR.ink:BR.paper, color:i===1?BR.paper:BR.ink}}> 131 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, opacity:0.7}}>PAGE {n}</div> 132 <div style={{display:"flex", justifyContent:"space-between"}}> 133 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, letterSpacing:2}}>{t.toUpperCase()}</div> 134 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2}}>· {s}</div> 135 </div> 136 </div> 137 ))} 138 </div> 139 <div style={{display:"grid", gridTemplateColumns:"1fr 360px", gap:40}}> 140 <div> 141 <BRH n="09.05">Instruments of the office</BRH> 142 <div style={{border:`2px solid ${BR.ink}`}}> 143 <div style={{display:"grid", gridTemplateColumns:"50px 1.5fr 1fr 1fr 110px 90px", borderBottom:`2px solid ${BR.ink}`, background:BR.ink, color:BR.paper}}> 144 {["#","INSTRUMENT","MAKER","SERIAL","LAST CAL.","STATE"].map(h=>( 145 <div key={h} style={{padding:"8px 10px", fontFamily:"Oswald", fontWeight:700, fontSize:10, letterSpacing:2}}>{h}</div> 146 ))} 147 </div> 148 {[ 149 ["01","HULL CALIPER · 0.01 MM","TORSK & FEN","HC-044218","2396.101","IN CAL."], 150 ["02","DRIVE-STACK PROBE · MK VII","BRELMIR","DS-771-09","2396.062","IN CAL."], 151 ["03","AVIONICS LINE TESTER","KOTA WORKS","AL-2218-G","2396.110","IN CAL."], 152 ["04","LIFE-SUPPORT SNIFFER","STRATA","LS-44012","2396.091","IN CAL."], 153 ["05","FATIGUE WAND · ULTRASONIC","OLD VOI","FW-0097","2395.308","DUE"], 154 ["06","SURVEY PLATE · STEEL RULE","BENCH-MADE","—","—","ETERNAL"], 155 ["07","HEADLAMP + LOUPE","STANDARD","—","—","N/A"], 156 ].map((r,i)=>( 157 <div key={r[0]} style={{display:"grid", gridTemplateColumns:"50px 1.5fr 1fr 1fr 110px 90px", borderBottom:`1px dotted ${BR.ink}44`, background:i%2?BR.paper2:BR.paper, fontFamily:"IBM Plex Mono", fontSize:11}}> 158 {r.map((c,j)=><div key={j} style={{padding:"8px 10px"}}>{j===5?<BRChip rust={c==="DUE"} ok={c==="IN CAL."}>{c}</BRChip>:c}</div>)} 159 </div> 160 ))} 161 </div> 162 <BRH n="09.06">Calibration record · rolling year</BRH> 163 <div style={{border:`2px solid ${BR.ink}`, padding:14, background:BR.paper2}}> 164 <div style={{display:"grid", gridTemplateColumns:"repeat(12,1fr)", gap:4, fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:1}}> 165 {["093","132","170","205","244","278","311","345","014","048","081","114"].map((d,i)=>( 166 <div key={d} style={{textAlign:"center"}}>D {d}</div> 167 ))} 168 </div> 169 <div style={{display:"grid", gridTemplateColumns:"repeat(12,1fr)", gap:4, marginTop:4}}> 170 {[3,4,2,5,3,6,2,4,5,3,2,6].map((h,i)=>( 171 <div key={i} style={{height:48, background:BR.ink, position:"relative"}}> 172 <div style={{position:"absolute", bottom:0, left:0, right:0, height:h*8, background:BR.rust}}/> 173 </div> 174 ))} 175 </div> 176 <div style={{marginTop:8, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>CALIBRATIONS LOGGED · 45 IN YEAR · MEAN DRIFT 0.07%</div> 177 </div> 178 <BRH n="09.07">Sector & yards under warrant</BRH> 179 <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8}}> 180 {[["Strata · Dock 4","HOME"],["Strata · Dock 6","YES"],["Waypoint · 2","YES"],["Helion · 1","REVIEW"]].map(([k,v])=>( 181 <div key={k} style={{border:`2px solid ${BR.ink}`, padding:"10px 12px", background:v==="HOME"?BR.ink:BR.paper, color:v==="HOME"?BR.paper:BR.ink}}> 182 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, opacity:0.7, letterSpacing:2}}>YARD</div> 183 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:1}}>{k.toUpperCase()}</div> 184 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, marginTop:3, opacity:0.8}}>· {v}</div> 185 </div> 186 ))} 187 </div> 188 </div> 189 <div> 190 <div style={{border:`2px solid ${BR.ink}`, padding:14}}> 191 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>KIT OF THE OFFICE</div> 192 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, lineHeight:1.7}}> 193 <div>· HEADLAMP + LOUPE</div> 194 <div>· OVERALLS · GREY CANVAS</div> 195 <div>· CLIPBOARD · STEEL</div> 196 <div>· PEN · FOUNTAIN</div> 197 <div>· WAX STICK · BLACK</div> 198 <div>· SEAL · INSPECTOR'S OFFICE</div> 199 </div> 200 </div> 201 <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:12, background:BR.paper2}}> 202 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>NOTE ON THE FATIGUE WAND</div> 203 <div style={{fontFamily:"Caveat", fontSize:18, lineHeight:1.35}}> 204 "Due for calibration before first warranted survey. Do not sign a Class-I inspection with a wand outside tolerance." 205 </div> 206 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, marginTop:8, textAlign:"right"}}>— KIR-7</div> 207 </div> 208 <div style={{marginTop:14, padding:"10px 14px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, textAlign:"center"}}>PROCEED TO PLEDGE →</div> 209 </div> 210 </div> 211 </div> 212 <BRFooter/> 213 </BRPage> 214 ); 215 } 216 217 function OnbInsp3() { 218 return ( 219 <BRPage width={1280} minHeight={1700}> 220 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 221 <div style={{padding:"32px 60px 20px"}}> 222 <div style={{display:"flex", justifyContent:"space-between", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 223 <div> 224 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 09 · PAGE 3 OF 3 · PLEDGE OF HONEST WORK</div> 225 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:62, letterSpacing:-0.5, textTransform:"uppercase"}}>Pledge of Honest Work</div> 226 </div> 227 <BRStamp rotate={-5} color={BR.green}>SIGNED UNDER</BRStamp> 228 </div> 229 </div> 230 <div style={{padding:"10px 60px"}}> 231 <div style={{display:"grid", gridTemplateColumns:"1fr 340px", gap:40}}> 232 <div style={{border:`4px double ${BR.ink}`, padding:"28px 34px", background:BR.paper2, position:"relative"}}> 233 <div style={{position:"absolute", top:-16, left:24, background:BR.paper, padding:"0 10px", fontFamily:"Oswald", fontWeight:900, fontSize:14, letterSpacing:4}}>PLEDGE · §9.21</div> 234 <div style={{fontFamily:"IBM Plex Sans", fontSize:15, lineHeight:1.75}}> 235 I, <span style={{fontFamily:"Caveat", fontSize:22, color:BR.rust, borderBottom:`1px solid ${BR.ink}`, padding:"0 8px"}}>Tolem Q. Rui</span>, having served three years under the yardmaster of Strata Dock 4, and having proved my papers and my instruments to the satisfaction of my elders, do plainly pledge: 236 <br/><br/> 237 — <strong>That I will not sign what I have not seen.</strong> A survey is the record of my own eye and my own hand. I will not rent my signature. 238 <br/><br/> 239 — <strong>That I will refuse work I am unfit for.</strong> A Class-I hull is not mine to warrant until I have served a Class-I apprenticeship. I will send the hull on to the proper hand. 240 <br/><br/> 241 — <strong>That I will not accept favour, coin, or consideration</strong> from a party to the inspection, save my fee as laid down in Form 09, schedule 3. 242 <br/><br/> 243 — <strong>That my findings shall be written plainly</strong>, without softening for a friend or sharpening for a grudge, and shall name defect, tolerance, and degree of each. 244 <br/><br/> 245 — <strong>That I will stand behind my seal</strong>, and upon finding of malfeasance, forfeit it and my place at the yards. 246 <br/><br/> 247 <strong>So pledged, so sealed, so entered on the books.</strong> 248 </div> 249 <div style={{marginTop:30, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:24}}> 250 {[["Apprentice","Tolem Q. Rui","2396.114.1018Z"],["Yardmaster","KIR-7","2396.114.1019Z"],["Guild clerk","M. Aster","2396.114.1021Z"]].map(([l,n,t])=>( 251 <div key={l}><div style={{height:34, borderBottom:`2px solid ${BR.ink}`, fontFamily:"Caveat", fontSize:22, paddingLeft:6}}>{n}</div><div style={{display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2, marginTop:4}}><span>{l.toUpperCase()}</span><span>{t}</span></div></div> 252 ))} 253 </div> 254 </div> 255 <div> 256 <div style={{border:`2px solid ${BR.ink}`, padding:14}}> 257 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>FEES · SCHEDULE 3</div> 258 {[["Survey · Class III","180 ℂ"],["Survey · Class II","280 ℂ"],["Survey · Class I","440 ℂ"],["Salvage survey","520 ℂ"]].map(([k,v])=>( 259 <div key={k} style={{display:"flex", justifyContent:"space-between", padding:"3px 0", fontFamily:"IBM Plex Mono", fontSize:11}}> 260 <span style={{color:BR.mute}}>{k}</span><span style={{fontWeight:700}}>{v}</span> 261 </div> 262 ))} 263 <div style={{borderTop:`2px solid ${BR.ink}`, marginTop:8, paddingTop:6, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>FEES PAYABLE ON COMPLETION · NO RETAINER ALLOWED</div> 264 </div> 265 <div style={{marginTop:14, padding:"14px 14px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:900, fontSize:14, letterSpacing:3, textAlign:"center"}}>INSCRIBE & WARRANT →</div> 266 </div> 267 </div> 268 </div> 269 <BRFooter/> 270 </BRPage> 271 ); 272 } 273 274 Object.assign(window, { OnbInsp1, OnbInsp2, OnbInsp3 });