// Screens, part 1: Login/landing, Skanna, Camera+AI, Resultat (low-conf), Scan-detail. // All use chrome from components.jsx and tokens from tokens.css. const { fmtDate, fmtDateShort, fmtNum, fmtInt, daysSince } = window; const ICON = { camera: , upload: , arrow: , back: , check: , close: , }; // ─── 0. LOGIN / LANDING ──────────────────────────────────────────── function ScreenLogin({ onContinue }) { return (
●
InBody-arkiv

Ditt InBody-papper, i arkivet.

Fotografera pappret. Vi tolkar siffrorna och visar hur du utvecklas över månader och år.

Logga in
E-POST

Vi mejlar en länk som loggar in dig. Ingen lösenord — länken gäller i 15 minuter.

INBODY/v2026-05 OM TJÄNSTEN
); } // ─── 1. SKANNA — entry view, with previous scan as reference ───────── function ScreenSkanna({ onScan, onNav, embed }) { const last = window.LATEST_SCAN; const days = daysSince(last.scan_date); return (
{!embed && } Det är {days} dagar sedan din senaste mätning.} sub="Fotografera ditt InBody-pappersark så lägger vi värdena i ditt arkiv." /> {/* Reference card — last scan as a footnote / set */} {fmtDateShort(last.scan_date)}}/>
{[ ['Vikt', last.weight, 'kg'], ['Muskel', last.skeletal_muscle_mass, 'kg'], ['Fett', last.body_fat_percent, '%'], ].map(([l,v,u]) => (
{l}
{v}{u}
))}
InBody-poäng {last.inbody_score}/100
{/* Primary CTA */}

STÄLL PAPPRET PÅ JÄMN BAKGRUND · UNDVIK BLANK

); } // Empty state variant — first-ever user function ScreenSkannaEmpty({ onScan, onNav, embed }) { return (
{!embed && } Inga mätningar än.} sub="Lägg in din första InBody-mätning. När du har två kan vi börja visa utveckling." />
0
MÄTNINGAR I ARKIVET
); } // ─── 2. KAMERA + ANALYSERAR ───────────────────────────────────────── function ScreenCamera({ onCapture, onCancel }) { return (
{/* Viewfinder — page-shaped frame with corner ticks */}
{/* mock paper preview lines */}
{[1,1,1,0.6,1,1,0.7,1,1,1,0.5,1].map((w,i)=>
)}
{/* corner ticks — bigger, accent-colored, animated */} {[ { top: -2, left: -2, br: 'top left', borders: { borderTop: '3px solid var(--accent)', borderLeft: '3px solid var(--accent)', borderTopLeftRadius: 14 } }, { top: -2, right: -2, br: 'top right', borders: { borderTop: '3px solid var(--accent)', borderRight: '3px solid var(--accent)', borderTopRightRadius: 14 } }, { bottom: -2, left: -2, br: 'bottom left', borders: { borderBottom: '3px solid var(--accent)', borderLeft: '3px solid var(--accent)', borderBottomLeftRadius: 14 } }, { bottom: -2, right: -2, br: 'bottom right', borders: { borderBottom: '3px solid var(--accent)', borderRight: '3px solid var(--accent)', borderBottomRightRadius: 14 } }, ].map((p, i) => (
))} {/* center reticle dot */}
{/* Hint pill — M3 expressive, animates */}
◎ Rikta in pappret
{/* Keyframes injected once per render — cheap and isolated */} {/* shutter */}
); } // AI analyzing — minimal, quiet function ScreenAnalyzing({ progress = 0.45, onCancel }) { const phases = [ { p: 0.20, label: 'Bildkvalitet' }, { p: 0.55, label: 'Värden' }, { p: 0.90, label: 'Granskar' }, ]; const currentPhase = phases.findIndex(ph => progress < ph.p); const phaseLabel = (currentPhase === -1 ? phases[phases.length - 1] : phases[currentPhase]).label; return (

Tolkar resultaten.

{phaseLabel}
{/* Single thin spinning ring, very slow. That's it. */}
{/* Slim progress capsule, no labels under */}
); } // ─── 3. RESULTAT — just after scan, with low_confidence flag ───────── function ScreenResultat({ scan, onSave, onRetake, onDiscard }) { const s = scan || window.FRESH_SCAN_LOWCONF; const prev = window.LATEST_SCAN; const isUncertain = (k) => s.uncertain_fields && s.uncertain_fields.includes(k); const dW = +(s.weight - prev.weight).toFixed(1); return (
{/* Hero number */}
01.RESVikt
{s.weight} kg
{dW > 0 ? '+' : ''}{dW} kg sedan {fmtDateShort(prev.scan_date)}
{/* Low-confidence editorial sidebar */} {s.low_confidence && (
Bilden var något otydlig
Konfidens {s.confidence_score}. {s.uncertain_fields.length} värden tolkades med låg säkerhet — märkta nedan. Du kan spara ändå eller ta om bilden.
)}
); } // ─── 4. SCAN-DETAIL (from history) — full data + segmental ──────────── // Body diagram for segmental_data. // Body diagram for segmental_data — sleek anatomical silhouette function BodyDiagram({ seg }) { if (!seg) return null; // Single continuous human-like silhouette in a 240x320 viewBox. // Each region is a tinted overlay on top of a neutral base body. // Smooth curves, no robot blocks. const partPaths = { // Right arm (anatomical right = viewer's left) right_arm: 'M 80 92 C 70 96 62 108 58 124 C 54 142 54 160 56 178 C 57 188 60 196 64 200 C 68 202 73 200 75 196 C 76 188 75 178 76 168 C 78 154 82 138 84 126 C 86 116 86 102 84 96 Z', left_arm: 'M 160 92 C 170 96 178 108 182 124 C 186 142 186 160 184 178 C 183 188 180 196 176 200 C 172 202 167 200 165 196 C 164 188 165 178 164 168 C 162 154 158 138 156 126 C 154 116 154 102 156 96 Z', trunk: 'M 96 70 C 110 64 130 64 144 70 L 150 96 C 154 116 154 138 152 156 L 148 174 C 146 178 142 180 138 180 L 102 180 C 98 180 94 178 92 174 L 88 156 C 86 138 86 116 90 96 Z', right_leg: 'M 102 180 C 108 180 114 182 118 184 L 122 224 C 124 252 124 280 122 300 C 121 308 117 312 113 312 C 108 312 104 308 102 300 C 99 280 98 252 99 224 Z', left_leg: 'M 138 180 C 132 180 126 182 122 184 L 118 224 C 116 252 116 280 118 300 C 119 308 123 312 127 312 C 132 312 136 308 138 300 C 141 280 142 252 141 224 Z', }; // Label positions outside the body, anchored on each side const labels = [ { key: 'right_arm', side: 'left', x: 18, y: 138, anchorY: 142 }, { key: 'trunk', side: 'right', x: 222, y: 110, anchorY: 118 }, { key: 'left_arm', side: 'right', x: 222, y: 168, anchorY: 168 }, { key: 'right_leg', side: 'left', x: 18, y: 248, anchorY: 252 }, { key: 'left_leg', side: 'right', x: 222, y: 248, anchorY: 252 }, ]; const partAnchors = { right_arm: { x: 70, y: 142 }, left_arm: { x: 170, y: 142 }, trunk: { x: 120, y: 118 }, right_leg: { x: 110, y: 252 }, left_leg: { x: 130, y: 252 }, }; const partLabels = { right_arm: 'H. arm', left_arm: 'V. arm', trunk: 'Bål', right_leg: 'H. ben', left_leg: 'V. ben' }; const fillFor = (data) => { if (!data) return 'var(--surface-2)'; const pct = (data.lean_percent || data.percent || 100); const intensity = Math.min(1, Math.max(0.10, (pct - 90) / 30)); return `color-mix(in oklab, var(--accent) ${(intensity * 100).toFixed(0)}%, var(--surface-2))`; }; return ( {/* Head + neck */} {/* Body parts — filled by intensity */} {Object.entries(partPaths).map(([key, d]) => ( ))} {/* Hairline center line (subtle anatomical guide) */} {/* Leader dots + labels */} {labels.map(l => { const data = seg[l.key]; const value = data && data.lean_mass != null ? data.lean_mass.toFixed(1) : '—'; const pct = data ? Math.round(data.lean_percent || data.percent || 100) : null; const a = partAnchors[l.key]; const lineX1 = l.side === 'right' ? l.x - 4 : l.x + 4; return ( {/* leader: small accent dot on body + thin line to label */} {/* label block */} {partLabels[l.key]} {value} kg {pct != null && ( {pct}% )} ); })} ); } function ScreenScanDetail({ scan, onBack }) { const s = scan || window.LATEST_SCAN; const seg = s.segmental_data || {}; const hasNewSeg = seg.right_arm && 'fat_mass' in seg.right_arm; return (
{/* Custom chrome with back button */}
SCAN/{s.id.slice(0,8)}
{fmtDate(s.scan_date)} KONF · {s.confidence_score.toFixed(2)}

{s.weight}kg · {s.inbody_score}/100

{/* Segmental body */} ENDAST MUSKEL}/>

Mörkare = högre muskelandel jämfört med rekommenderat (100 % = balanserad).

{/* Vikt & komposition */}

RADERING ÅNGERBAR I 30 DAGAR · DÄREFTER PERMANENT

); } Object.assign(window, { ScreenLogin, ScreenSkanna, ScreenSkannaEmpty, ScreenCamera, ScreenAnalyzing, ScreenResultat, ScreenScanDetail, BodyDiagram, ICON });