// web-screens-v2.jsx — Additional app screens + cafe scene illustration // Scan, tasting notes, share card, brew result. // Needs shared.jsx + brand1518.jsx + ig-illustrations.jsx + web-screens.jsx (for Phone, StatusBar). // ════════════════════════════════════════════════════════════ // CAFE SCENE — warm illustrated interior for hero bg // Pendant lamps, counter, shelves, steam, warm light pools. // ════════════════════════════════════════════════════════════ function CafeScene({ width=1200, height=700 }){ const uid = 'cafe-'+Math.random().toString(36).slice(2,6); return ( {/* bg */} {/* back wall — subtle brick texture lines */} {Array.from({length:18}).map((_,i)=>( ))} {Array.from({length:24}).map((_,i)=>( ))} {/* shelf — back wall */} {/* bags on shelf */} {[80,130,185,240,290,345].map((x,i)=>( ))} {/* espresso machine — right side */} {/* portafilter */} {/* drip tray */} {/* gauges */} {/* counter surface */} {/* wood grain on counter */} {Array.from({length:8}).map((_,i)=>( ))} {/* V60 on counter */} {/* carafe underneath */} {/* cup on counter — center */} {/* steam from cup */} {/* scale on counter */} {/* pendant lamps */} {[300,600,900].map((x,i)=>( {/* warm light cone */} {/* bulb glow */} ))} {/* coffee bag on counter — foreground, being scanned */} {/* label detail */} {/* grain overlay */} ); } // ════════════════════════════════════════════════════════════ // SCREEN: Scan / Camera viewfinder // ════════════════════════════════════════════════════════════ function ScreenScan(){ const P = useP(); return (
{/* "camera feed" — warm dark cafe-like bg */}
{/* simulated bag in viewfinder */}
{/* viewfinder corners */}
{/* scan frame corners */} {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h],k)=>(
))} {/* scanning line */}
{/* bottom bar */}
Scanning
Point at any coffee bag
1518 reads the label automatically
); } // ════════════════════════════════════════════════════════════ // SCREEN: Scan result — bag recognized // ════════════════════════════════════════════════════════════ function ScreenScanResult(){ const P = useP(); return (
{/* success badge */}
Bag recognized
{/* coffee card */}
Pink Bourbon
Finca La Esperanza
Huila, Colombia · 1,850 masl
{['Washed','Light roast'].map((t,k)=>( {t} ))}
{/* recipe preview */}
Suggested recipe
{[['Coffee','15 g'],['Water','250 g'],['Temp','96 °C'],['Time','3:15']].map(([l,v],k)=>(
{l}
{v}
))}
{/* brew button */}
Start brewing
); } // ════════════════════════════════════════════════════════════ // SCREEN: Tasting notes — flavor wheel // ════════════════════════════════════════════════════════════ function ScreenTasting(){ const P = useP(); const axes = [ { label:'Fruity', value:0.8, angle:0 }, { label:'Floral', value:0.6, angle:60 }, { label:'Sweet', value:0.75, angle:120 }, { label:'Nutty', value:0.4, angle:180 }, { label:'Chocolate', value:0.55, angle:240 }, { label:'Bright', value:0.7, angle:300 }, ]; const R = 72; const cx = 120, cy = 120; const poly = axes.map(a=>{ const rad = (a.angle - 90) * Math.PI / 180; return `${cx + R*a.value*Math.cos(rad)},${cy + R*a.value*Math.sin(rad)}`; }).join(' '); const grid = axes.map(a=>{ const rad = (a.angle - 90) * Math.PI / 180; return { x: cx + R*Math.cos(rad), y: cy + R*Math.sin(rad), label:a.label }; }); return (
Tasting notes
Pink Bourbon
Colombia · Huila
{/* flavor wheel */}
{/* grid rings */} {[0.33,0.66,1].map((s,k)=>( { const dx=g.x-cx, dy=g.y-cy; return `${cx+dx*s},${cy+dy*s}`; }).join(' ')} fill="none" stroke={P.line} strokeWidth="0.8" /> ))} {/* axis lines */} {grid.map((g,k)=>( ))} {/* data polygon */} {/* dots */} {axes.map((a,k)=>{ const rad = (a.angle - 90) * Math.PI / 180; return ; })} {/* labels */} {grid.map((g,k)=>{ const dx = g.x-cx, dy = g.y-cy; const lx = cx+dx*1.28, ly = cy+dy*1.28; return {g.label}; })}
{/* note tags */}
{['Raspberry','Jasmine','Honey','Citrus zest','Clean finish'].map((n,k)=>( {n} ))}
{/* overall score */}
88
Your rating
); } // ════════════════════════════════════════════════════════════ // SCREEN: Share brew card // ════════════════════════════════════════════════════════════ function ScreenShare(){ const P = useP(); return (
Share your brew
{/* brew card */}
{/* card header with landscape */}
Pink Bourbon
Finca La Esperanza · Colombia
{/* card body */}
{[['Dose','15 g'],['Water','250 g'],['Time','3:15']].map(([l,v],k)=>(
{l}
{v}
))}
{['Raspberry','Jasmine','Honey'].map((n,k)=>( {n} ))}
1518.coffee
88
{/* share options */}
{[ { label:'Share', d:'M12 16V4 M7.5 8.5l4.5-4.5 4.5 4.5 M5 14v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5' }, { label:'Save', d:'M6.5 4.5h11v16l-5.5-4-5.5 4z' }, { label:'Favorite', d:'M12 20.2C6.2 16 3.6 13.4 3.6 10.1A3.9 3.9 0 0 1 12 7.7 3.9 3.9 0 0 1 20.4 10.1C20.4 13.4 17.8 16 12 20.2z' }, ].map((a,k)=>(
{a.label}
))}
Your brew card — share it or keep it.
); } // ════════════════════════════════════════════════════════════ // SCREEN: Brew complete — congrats moment // ════════════════════════════════════════════════════════════ function ScreenBrewComplete(){ const P = useP(); return (
{/* checkmark circle */}
Brew complete.
Take a sip. Let it settle. Then tell 1518 what you tasted.
{/* streak */}
◆ Day 7 brew streak
Log tasting notes
); } Object.assign(window, { CafeScene, ScreenScan, ScreenScanResult, ScreenTasting, ScreenShare, ScreenBrewComplete, });