/ Print Edition.html
Print Edition.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6 <title>STRATA⁄FLEET — Print Edition</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com"> 8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 9 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600;700;900&family=Caveat:wght@500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> 10 <style> 11 html, body { margin:0; padding:0; background:#999; overscroll-behavior:none; } 12 * { box-sizing:border-box; } 13 input, textarea, button { font: inherit; } 14 15 /* Screen layout — show each artboard stacked, paper-like on grey */ 16 .artboard { 17 width: 1280px; 18 margin: 24px auto; 19 background: #ece7dc; 20 box-shadow: 0 8px 32px rgba(0,0,0,0.25); 21 overflow: hidden; 22 page-break-after: always; 23 break-after: page; 24 } 25 .artboard:last-child { page-break-after: auto; } 26 27 .print-banner { 28 position: sticky; top: 0; z-index: 100; 29 background: #1a1612; color: #ece7dc; 30 padding: 14px 28px; 31 font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 2px; 32 display: flex; justify-content: space-between; align-items: center; 33 } 34 .print-banner button { 35 padding: 10px 22px; background: #c2421a; color: #ece7dc; 36 border: none; font-family: 'Oswald', sans-serif; font-weight: 900; 37 font-size: 12px; letter-spacing: 3px; cursor: pointer; 38 } 39 40 /* PRINT — one artboard per page, scale to fit */ 41 @page { 42 size: 1280px 2100px; 43 margin: 0; 44 } 45 @media print { 46 html, body { background: white; } 47 .print-banner { display: none; } 48 .artboard { 49 margin: 0 auto; 50 box-shadow: none; 51 page-break-after: always; 52 break-after: page; 53 } 54 } 55 </style> 56 </head> 57 <body> 58 59 <div class="print-banner"> 60 <span>STRATA⁄FLEET · PRINT EDITION · 16 FORMS IN FILING ORDER</span> 61 <span>PRINT: CMD/CTRL + P → SAVE AS PDF · 1280 × 2100 PAGE SIZE</span> 62 <button onclick="window.print()">▸ PRINT / SAVE PDF</button> 63 </div> 64 65 <div id="root"></div> 66 67 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script> 68 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script> 69 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script> 70 <script type="text/babel" src="concepts/ship-data.jsx"></script> 71 <script type="text/babel" src="brutalist/br-tokens.jsx"></script> 72 <script type="text/babel" src="brutalist/br-cover.jsx"></script> 73 <script type="text/babel" src="brutalist/br-home.jsx"></script> 74 <script type="text/babel" src="brutalist/br-catalog.jsx"></script> 75 <script type="text/babel" src="brutalist/br-product.jsx"></script> 76 <script type="text/babel" src="brutalist/br-auction.jsx"></script> 77 <script type="text/babel" src="brutalist/br-broker.jsx"></script> 78 <script type="text/babel" src="brutalist/br-cart.jsx"></script> 79 <script type="text/babel" src="brutalist/br-pay.jsx"></script> 80 <script type="text/babel" src="brutalist/br-receipt.jsx"></script> 81 <script type="text/babel" src="brutalist/br-punchlist.jsx"></script> 82 <script type="text/babel" src="brutalist/br-service.jsx"></script> 83 <script type="text/babel" src="brutalist/br-onboard.jsx"></script> 84 <script type="text/babel" src="brutalist/br-fleet.jsx"></script> 85 <script type="text/babel" src="brutalist/br-debrief.jsx"></script> 86 <script type="text/babel" src="brutalist/br-comms.jsx"></script> 87 <script type="text/babel" src="brutalist/br-contacts.jsx"></script> 88 89 <script type="text/babel"> 90 function PrintEdition() { 91 const noop = () => {}; 92 const demoCart = [ 93 { ship: makeShip("KRV-IC-2849-AX"), price: Math.round(makeShip("KRV-IC-2849-AX").price * 1.18), config: "TACTICAL" }, 94 { ship: makeShip("VNT-CH-1044-BM"), price: makeShip("VNT-CH-1044-BM").price, config: "STANDARD" }, 95 ]; 96 97 // Filing order per Cover Sheet: 98 // 00 Cover → 04 Home → 07 Catalog → 07B Dossier → 63 Auction → 18 Broker 99 // → 09A Cart → 09B Pay → 14 Receipt 100 // → 71 Punch → 47 Service → 31 Onboard 101 // → 22 Fleet → 58 Debrief → 33 Comms → 29 Contacts 102 const pages = [ 103 ["Cover", <BRCover onNav={noop}/>], 104 ["Home", <BRHome onNav={noop} onShip={noop}/>], 105 ["Catalog", <BRCatalog onNav={noop} onShip={noop}/>], 106 ["Dossier", <BRProduct seed="KRV-IC-2849-AX" cartCount={demoCart.length} onNav={noop} onAddToCart={noop}/>], 107 ["Auction", <BRAuction onNav={noop}/>], 108 ["Broker", <BRBroker onNav={noop}/>], 109 ["Cart", <BRCart cart={demoCart} onNav={noop} onRemove={noop} onProceed={noop}/>], 110 ["Pay", <BRPay cart={demoCart} onNav={noop} onComplete={noop}/>], 111 ["Receipt", <BRReceipt cart={demoCart} onNav={noop}/>], 112 ["Punch", <BRPunchlist onNav={noop}/>], 113 ["Service", <BRService onNav={noop}/>], 114 ["Onboard", <BROnboard onNav={noop}/>], 115 ["Fleet", <BRFleet onNav={noop}/>], 116 ["Debrief", <BRDebrief onNav={noop}/>], 117 ["Comms", <BRComms onNav={noop}/>], 118 ["Contacts", <BRContacts onNav={noop}/>], 119 ]; 120 121 return ( 122 <div> 123 {pages.map(([label, el], i) => ( 124 <div key={label} className="artboard"> 125 {el} 126 </div> 127 ))} 128 </div> 129 ); 130 } 131 132 ReactDOM.createRoot(document.getElementById("root")).render(<PrintEdition/>); 133 </script> 134 </body> 135 </html>