br-onb-entry.jsx
1 // Entry/landing/welcome/empty artboards. Forms 01, 02, 99, and "ANON". 2 3 function OnbWelcome() { 4 return ( 5 <BRPage width={1280} minHeight={1600}> 6 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 7 <div style={{padding:"0 0 40px"}}> 8 {/* Full-bleed welcome mat */} 9 <div style={{background:BR.ink, color:BR.paper, padding:"60px 60px 44px", borderBottom:`4px solid ${BR.rust}`}}> 10 <div style={{fontFamily:"IBM Plex Mono", fontSize:12, letterSpacing:4, color:BR.rust}}>FORM 01 · WELCOME MAT · POSTED AT EVERY DOOR</div> 11 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:168, lineHeight:0.85, letterSpacing:-4, marginTop:10, textTransform:"uppercase"}}>The Register.</div> 12 <div style={{fontFamily:"Oswald", fontWeight:300, fontSize:32, lineHeight:1.15, marginTop:14, letterSpacing:0.5, maxWidth:900, textTransform:"uppercase"}}> 13 A bonded market for registered hulls — run on paper, under seal, since 2341. 14 </div> 15 <div style={{marginTop:36, display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:18, maxWidth:1020}}> 16 {[ 17 ["2341","YEAR OF CHARTER"], 18 ["12","ACCREDITED YARDS"], 19 ["4,218","LOTS ON THE BOOKS"], 20 ["1.75 — 6.0%","COMMISSION BANDS"], 21 ].map(([v,k])=>( 22 <div key={k}> 23 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:44, letterSpacing:-0.5, lineHeight:1}}>{v}</div> 24 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.rust, marginTop:6}}>{k}</div> 25 </div> 26 ))} 27 </div> 28 </div> 29 30 {/* Door selection */} 31 <div style={{padding:"48px 60px 0"}}> 32 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.rust}}>§ 01.02 · CHOOSE YOUR DOOR</div> 33 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:54, letterSpacing:-0.5, textTransform:"uppercase", marginTop:4}}>Who enters today?</div> 34 <div style={{fontFamily:"IBM Plex Sans", fontSize:15, color:BR.ink2, maxWidth:820, lineHeight:1.55, marginTop:8}}> 35 The Register keeps four doors. Each opens onto its own dossier, its own oath, and its own seat on the floor. Pick plainly — an error here is corrected only by the Registrar. 36 </div> 37 <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:16, marginTop:28}}> 38 {[ 39 ["I","BUYER","A private or corporate purchaser. Bonded, bidding, carrying home.","FORM 03"], 40 ["II","BROKER","A licensed dealer trading on the floor. Bonded, commissioned, liable on title.","FORM 05"], 41 ["III","FLEET OPERATOR","A flag under which many hulls fly. Commodores, pilots, cargoes.","FORM 07"], 42 ["IV","YARD INSPECTOR","A warranted eye on every hull before sale. Instruments, pledge, seal.","FORM 09"], 43 ].map(([num,t,desc,form], i)=>( 44 <div key={num} style={{border:`3px solid ${BR.ink}`, padding:"18px 18px 14px", background:BR.paper, position:"relative"}}> 45 <div style={{position:"absolute", top:-14, left:16, background:BR.ink, color:BR.paper, padding:"3px 10px", fontFamily:"Oswald", fontWeight:900, fontSize:11, letterSpacing:3}}>DOOR {num}</div> 46 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:30, letterSpacing:-0.3, textTransform:"uppercase", marginTop:8}}>{t}</div> 47 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:BR.ink2, lineHeight:1.55, marginTop:8, minHeight:80}}>{desc}</div> 48 <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginTop:12, paddingTop:10, borderTop:`1px solid ${BR.ink}`}}> 49 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>{form}</div> 50 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, color:BR.rust}}>ENTER →</div> 51 </div> 52 </div> 53 ))} 54 </div> 55 </div> 56 57 {/* Foot notice */} 58 <div style={{padding:"36px 60px 0"}}> 59 <div style={{border:`2px solid ${BR.ink}`, padding:"14px 20px", display:"flex", justifyContent:"space-between", alignItems:"center", background:BR.paper2}}> 60 <div> 61 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:3, textTransform:"uppercase"}}>Already signed on?</div> 62 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:BR.ink2, marginTop:2}}>Present your transponder code and seal at the clerk's window to resume any page of any form.</div> 63 </div> 64 <div style={{display:"flex", gap:10}}> 65 <div style={{border:`2px solid ${BR.ink}`, padding:"8px 14px", fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:2}}>SIGN ON →</div> 66 <div style={{background:BR.rust, color:BR.paper, padding:"8px 14px", fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:2}}>NEW · FORM 01.04</div> 67 </div> 68 </div> 69 </div> 70 </div> 71 <BRFooter/> 72 </BRPage> 73 ); 74 } 75 76 function OnbSignOn() { 77 return ( 78 <BRPage width={1280} minHeight={1200}> 79 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 80 <div style={{padding:"40px 60px"}}> 81 <div style={{display:"flex", justifyContent:"space-between", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 82 <div> 83 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 02 · SIGN-ON · CLERK'S WINDOW</div> 84 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:72, letterSpacing:-0.5, textTransform:"uppercase"}}>Sign On</div> 85 <div style={{fontFamily:"IBM Plex Sans", fontSize:14, color:BR.ink2, marginTop:4, maxWidth:680, lineHeight:1.55}}> 86 Present your transponder or your Coalition ID, and your seal. One entry per person, per session. The clerk keeps no copies. 87 </div> 88 </div> 89 <BRStamp rotate={3} color={BR.green}>CLERK · G-4</BRStamp> 90 </div> 91 92 <div style={{display:"grid", gridTemplateColumns:"1fr 360px", gap:40, marginTop:28}}> 93 <div> 94 <div style={{border:`3px solid ${BR.ink}`, padding:"24px 28px", background:BR.paper2}}> 95 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:3, borderBottom:`2px solid ${BR.ink}`, paddingBottom:8, marginBottom:16}}>CLERK'S LEDGER · SIGN HERE</div> 96 {[ 97 ["Transponder or Coalition ID","orlan@veyr.fleet"], 98 ["Seal / passphrase","●●●●●●●●●●●● · 12 GLYPHS"], 99 ["Door","BUYER · DOOR I"], 100 ["Session duration","D-COLOUR · 08:00 — 18:00"], 101 ].map(([k,v])=>( 102 <div key={k} style={{marginBottom:14}}> 103 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>{k.toUpperCase()}</div> 104 <div style={{border:`2px solid ${BR.ink}`, background:BR.paper, padding:"10px 12px", fontFamily:"IBM Plex Mono", fontSize:13, marginTop:4}}>{v}</div> 105 </div> 106 ))} 107 <div style={{display:"flex", gap:10, marginTop:20}}> 108 <div style={{flex:1, background:BR.ink, color:BR.paper, padding:"12px 16px", textAlign:"center", fontFamily:"Oswald", fontWeight:900, fontSize:14, letterSpacing:3}}>INSCRIBE & ENTER →</div> 109 <div style={{border:`2px solid ${BR.ink}`, padding:"12px 16px", textAlign:"center", fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3}}>LOST SEAL?</div> 110 </div> 111 </div> 112 113 <div style={{marginTop:16, display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}> 114 <div style={{border:`2px solid ${BR.ink}`, padding:"12px 14px", background:BR.paper}}> 115 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>NEW TO THE FLOOR</div> 116 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:1, marginTop:2}}>OPEN A DOSSIER · FORM 01 →</div> 117 </div> 118 <div style={{border:`2px solid ${BR.ink}`, padding:"12px 14px", background:BR.paper}}> 119 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>TRADING UNDER A HOUSE</div> 120 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:1, marginTop:2}}>ASK YOUR COMMODORE →</div> 121 </div> 122 </div> 123 </div> 124 125 <div> 126 <div style={{border:`2px solid ${BR.ink}`, padding:14}}> 127 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>CLERK ON DUTY</div> 128 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:22, letterSpacing:0, marginTop:2}}>M. ASTER</div> 129 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2, letterSpacing:1}}>GUILD CLERK · TIER III</div> 130 <div style={{marginTop:10, fontFamily:"IBM Plex Mono", fontSize:11, lineHeight:1.7}}> 131 <div><span style={{color:BR.mute}}>WINDOW</span> CLERK · G-4 · 08</div> 132 <div><span style={{color:BR.mute}}>HRS</span> D-COLOUR · 08 — 18</div> 133 <div><span style={{color:BR.mute}}>QUEUE</span> 3 AHEAD</div> 134 </div> 135 </div> 136 <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:12, background:BR.paper2}}> 137 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>SESSION NOTICE</div> 138 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2, lineHeight:1.6}}> 139 The clerk's window closes at 18:00 local. Unwritten sessions lapse at 17:45 and require fresh sign-on. Lost seals may be re-inscribed at the Registrar's office upon forfeit of 120 ℂ. 140 </div> 141 </div> 142 </div> 143 </div> 144 </div> 145 <BRFooter/> 146 </BRPage> 147 ); 148 } 149 150 function OnbAnon() { 151 return ( 152 <BRPage width={1280} minHeight={1100}> 153 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 154 <div style={{padding:"40px 60px"}}> 155 <div style={{display:"flex", justifyContent:"space-between", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 156 <div> 157 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 99 · WALKING THE FLOOR · ANONYMOUS BROWSING</div> 158 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:72, letterSpacing:-0.5, textTransform:"uppercase"}}>Browse Unbonded</div> 159 <div style={{fontFamily:"IBM Plex Sans", fontSize:14, color:BR.ink2, marginTop:4, maxWidth:760, lineHeight:1.55}}> 160 You may walk the floor without signing on — read the Catalog, the Auction Room, the Broadsheet. You may not place bids, open a Cart, or see sealed dossiers. To do so, present papers at the clerk's window. 161 </div> 162 </div> 163 <BRStamp rotate={-6}>UNBONDED</BRStamp> 164 </div> 165 166 <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:32, marginTop:28}}> 167 <div> 168 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.rust}}>§ 99.01 · WHAT YOU MAY DO</div> 169 <div style={{border:`2px solid ${BR.ink}`, padding:0, marginTop:8}}> 170 {[ 171 ["Catalog · read","OPEN"], 172 ["Dossiers · public pages","OPEN"], 173 ["Broadsheet · indices","OPEN"], 174 ["Auction room · observe","OPEN"], 175 ["Broker rolodex · scan","OPEN"], 176 ["Fleet bridges · abstracts","OPEN"], 177 ].map(([k,v],i)=>( 178 <div key={k} style={{display:"flex", justifyContent:"space-between", padding:"10px 14px", borderBottom:i<5?`1px dotted ${BR.ink}44`:"none", background:i%2?BR.paper2:BR.paper, fontFamily:"IBM Plex Mono", fontSize:12}}> 179 <span>{k.toUpperCase()}</span><BRChip ok>{v}</BRChip> 180 </div> 181 ))} 182 </div> 183 184 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.rust, marginTop:22}}>§ 99.02 · WHAT YOU MAY NOT</div> 185 <div style={{border:`2px solid ${BR.ink}`, padding:0, marginTop:8}}> 186 {[ 187 ["Place bids","SEALED"], 188 ["Open a Cart","SEALED"], 189 ["Dispatch a Manifest","SEALED"], 190 ["See surveyor's punch-lists","SEALED"], 191 ["Read sealed broker comms","SEALED"], 192 ["Pay a remittance","SEALED"], 193 ].map(([k,v],i)=>( 194 <div key={k} style={{display:"flex", justifyContent:"space-between", padding:"10px 14px", borderBottom:i<5?`1px dotted ${BR.ink}44`:"none", background:i%2?BR.paper2:BR.paper, fontFamily:"IBM Plex Mono", fontSize:12}}> 195 <span>{k.toUpperCase()}</span><BRChip rust>{v}</BRChip> 196 </div> 197 ))} 198 </div> 199 </div> 200 201 <div> 202 <div style={{border:`3px solid ${BR.ink}`, padding:"20px 22px", background:BR.paper2}}> 203 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`2px solid ${BR.ink}`, paddingBottom:6, marginBottom:10}}>TO SIGN ON · IN BRIEF</div> 204 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:BR.ink2, lineHeight:1.6}}> 205 <ol style={{margin:0, paddingLeft:18}}> 206 <li style={{marginBottom:6}}>Choose a door (Form 01).</li> 207 <li style={{marginBottom:6}}>Fill out the corresponding dossier (03 · 05 · 07 · 09).</li> 208 <li style={{marginBottom:6}}>Post the required bond or surety.</li> 209 <li style={{marginBottom:6}}>Swear the oath or pledge for your office.</li> 210 <li>Receive your seal at the clerk's window.</li> 211 </ol> 212 </div> 213 <div style={{marginTop:16, padding:"12px 14px", background:BR.rust, color:BR.paper, textAlign:"center", fontFamily:"Oswald", fontWeight:900, fontSize:13, letterSpacing:3}}>CHOOSE A DOOR → FORM 01</div> 214 </div> 215 216 <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:14}}> 217 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>YOU ARE BEING WATCHED</div> 218 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2, lineHeight:1.6}}> 219 All floor traffic is logged by the Registrar. Sustained anonymous activity at a single lot may attract a clerk's inquiry. This is not a warning — it is a courtesy. 220 </div> 221 </div> 222 </div> 223 </div> 224 </div> 225 <BRFooter/> 226 </BRPage> 227 ); 228 } 229 230 function OnbEmpty() { 231 return ( 232 <BRPage width={1280} minHeight={1100}> 233 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 234 <div style={{padding:"40px 60px"}}> 235 <div style={{display:"flex", justifyContent:"space-between", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 236 <div> 237 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 99.01 · FIRST-SESSION LEDGER · NIL ENTRIES</div> 238 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:72, letterSpacing:-0.5, textTransform:"uppercase"}}>Clean Ledger</div> 239 <div style={{fontFamily:"IBM Plex Sans", fontSize:14, color:BR.ink2, marginTop:4, maxWidth:720, lineHeight:1.55}}> 240 Your dossier is signed and your seal is in hand. The books beneath your name are empty — which is ordinary for a first session. Open them plainly. 241 </div> 242 </div> 243 <BRStamp rotate={2} color={BR.green}>SIGNED ON</BRStamp> 244 </div> 245 246 <div style={{marginTop:28, display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:18}}> 247 {[ 248 ["LOT 01","START WITH THE BROADSHEET","See what is on the floor today — indices, dispatches, lots of the week. The cheapest place to build taste.","INDEX →"], 249 ["LOT 02","WALK THE CATALOG","Set your facets, read the plates. Bids are optional; looking is free under bond.","CATALOG →"], 250 ["LOT 03","READ ONE DOSSIER FULLY","Every lot carries its own paper trail — yard survey, maintenance, prior owners. Learn the shape of the record before you bid.","DOSSIER →"], 251 ].map(([t,h,d,cta])=>( 252 <div key={t} style={{border:`3px solid ${BR.ink}`, padding:"18px 18px 14px", background:BR.paper, position:"relative"}}> 253 <div style={{position:"absolute", top:-14, left:16, background:BR.ink, color:BR.paper, padding:"3px 10px", fontFamily:"Oswald", fontWeight:900, fontSize:11, letterSpacing:3}}>{t}</div> 254 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:26, letterSpacing:-0.3, textTransform:"uppercase", marginTop:8, lineHeight:1.05}}>{h}</div> 255 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:BR.ink2, lineHeight:1.55, marginTop:10, minHeight:76}}>{d}</div> 256 <div style={{marginTop:10, paddingTop:10, borderTop:`1px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, color:BR.rust}}>{cta}</div> 257 </div> 258 ))} 259 </div> 260 261 <div style={{marginTop:22, display:"grid", gridTemplateColumns:"1fr 1fr", gap:14}}> 262 <div style={{border:`2px solid ${BR.ink}`, padding:"14px 16px", background:BR.paper2}}> 263 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:6}}>YOUR MANIFEST · EMPTY</div> 264 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2, lineHeight:1.55}}> 265 No lots committed. When a hull catches your eye, seal it to your Manifest (Form 06) and the Remittance will follow naturally. 266 </div> 267 </div> 268 <div style={{border:`2px solid ${BR.ink}`, padding:"14px 16px", background:BR.paper2}}> 269 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:6}}>YOUR BRIDGE · VACANT</div> 270 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2, lineHeight:1.55}}> 271 No hulls under your seal yet. The Commodore's Bridge (Form 12) opens the moment your first lot clears settlement and clears the yard. 272 </div> 273 </div> 274 </div> 275 </div> 276 <BRFooter/> 277 </BRPage> 278 ); 279 } 280 281 Object.assign(window, { OnbWelcome, OnbSignOn, OnbAnon, OnbEmpty });