// landing-screens.jsx — phone screen React components used in App Store deck + landing page. // Auto-extracted from appstore/AppStore Screenshots.html. Edit there, regenerate here. // Phone screens — faithful recreations of TuckIn's real UI from user screenshots. const AT = { bg: '#EEEEF1', card: '#FFFFFF', text: '#0E0E12', textMute: '#7A7A82', textSoft: '#B2B2B9', divider: 'rgba(14,14,18,0.08)', primary: '#6B5BE8', primarySoft: '#E7E3FB', primaryInk: '#4B3FBD', strain: '#F08A2B', strainSoft: '#FDECDC', danger: '#EF4444', coffee: '#8B5A2B', coffeeDeep: '#6E4520', coffeeSoft: '#F4EBDD', coffeeTint: '#FAF4EA', caffMod: '#F08A2B', caffModSoft: '#FCE4C8', ok: '#22A06B', }; function Sparkle({ color, size }) { const s = size || 14; return ( ); } function CoffeeMug({ size }) { const s = size || 28; return ( ); } function CoffeeCup({ size }) { const s = size || 28; return ( ); } function SleepInsightCard({ children }) { return (
Sleep Insight
{children}
); } function CaffeineInsightCard({ children }) { return (
Caffeine Insight
{children}
); } function StrainInsightInline({ children }) { return (
{children}
); } function LoggedDoseRow({ Icon, name, time, mg, fillPct, residual }) { return (
{name} · {time}
{residual} still in your system at bedtime
{mg} mg
); } function CaffeineFactorCard({ expanded }) { return (
Caffeine
MODERATE
{expanded && (
At bedtime (11:17 PM)
42 mg
Clean by
past
Last call
past
LOGGED TODAY
)}
); } function AppStatusBar() { return (
9:41
); } function PageHeader({ title, sub }) { return (
{title}
{sub}
); } function BottomTabs({ active }) { const Bed = ({ color }) => ( ); const Bars = ({ color }) => ( ); const Tab = ({ id, label, Icon }) => { const on = active === id; return (
{label}
); }; return (
); } function Card({ children, style }) { return (
{children}
); } function NeedRow({ dot, label, value }) { return (
{label}
{value}
); } function ReminderRow({ label, toggle }) { return (
{label} {toggle && (
)}
); } function BarRow({ label, value, fill, pct, segments }) { return (
{label} {value}
{segments ? segments.map((s, i) => (
)) : (
)}
); } function LegendRow({ dot, label, value }) { return (
{label} {value}
); } // ═══ SCREEN 1 — Schedule (future bedtime) ═══ function ScheduleFutureScreen() { return (
BedTime
22:46 PM
80%│ 06:30 AM│ PERFORM
Today's Strain
11.9
High strain — bedtime shifted 29 mins earlier to help you fully recover.
Sleep Schedule
BEDTIME
10:46 PM
7h 43m
WAKE UP
06:30 AM
11 PM1 AM3 AM5 AM
🔔 Reminder set for 10:01 PM
); } // ═══ SCREEN 2 — Schedule (NOW) ═══ function ScheduleNowScreen() { return (
BEDTIME
NOW
WAKE UP
06:30 AM
12 AM1 AM2 AM3 AM4 AM5 AM6 AM
🔔 Reminder set for 10:28 PM
Sleep Need
i
Total Sleep Requirement
9h 6m
Reminders
); } // ═══ SCREEN 3 — Performance 83% ring ═══ function PerformanceScreen() { const size = 200, stroke = 14, r = (size - stroke) / 2; const pct = 0.83; // Build an explicit arc path so html-to-image doesn't mishandle stroke-dasharray. const cx = size / 2, cy = size / 2; const startAngle = -Math.PI / 2; // 12 o'clock const endAngle = startAngle + 2 * Math.PI * pct; const sx = cx + r * Math.cos(startAngle); const sy = cy + r * Math.sin(startAngle); const ex = cx + r * Math.cos(endAngle); const ey = cy + r * Math.sin(endAngle); const largeArc = pct > 0.5 ? 1 : 0; const arcPath = `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} 1 ${ex} ${ey}`; return (
83%
of needed
🌙 11:19 PM │ ☀ 07:24 AM │ 🛏 8h 5m
You didn't get as much sleep as you needed, especially because of caffeine that kept you up later than usual. Try going to bed earlier tonight to help catch up.
Needed vs Actual
You were pretty active yesterday and had a higher heart rate all day, which means your body needed more recovery time than usual.
); } // ═══ SCREEN 4 — Performance: debt chart + weekly bars ═══ function DebtAreaChart() { const pts = [48, 42, 46, 44, 42, 42, 40, 38, 28, 42, 34, 30, 28, 32]; const W = 380, H = 120, padL = 10, padR = 10, padT = 12, padB = 10; const stepX = (W - padL - padR) / (pts.length - 1); const maxV = 55, minV = 20; const y = (v) => padT + (H - padT - padB) * (1 - (v - minV) / (maxV - minV)); const coords = pts.map((v, i) => [padL + i * stepX, y(v)]); const path = coords.map((p, i) => (i === 0 ? 'M' : 'L') + p.join(',')).join(' '); const area = `${path} L${W - padR},${H - padB} L${padL},${H - padB} Z`; const last = coords[coords.length - 1]; return ( {coords.map((p, i) => ( ))} ); } function WeeklyBars() { const data = [73, 90, 46, 78, 83, 73, 83]; const days = ['Mo','Tu','We','Th','Fr','Sa','Su']; const avg = 75; const H = 150; return (
{data.map((v, i) => ( {v}% ))}
avg 75%
{data.map((v, i) => (
))}
{days.map((d, i) => ( {d} ))}
); } function DebtScreen() { return (
Sleep Debt
Over Past Two Weeks
1h 21m
{['Mo','Tu','We','Th','Fr','Sa','Su','Mo','Tu','We','Th','Fr','Sa','Su'].map((d, i) => ( {d} ))}
Sleep Performance
This Week
); } // ═══ SCREEN 5 — Sleep Need focus ═══ function SleepNeedScreen() { return (
Factors (Beta)
Factors adapt to you as you log more. Starting with caffeine — more factors coming soon.
Logging more details helps TuckIn personalise your recommendations over time.
Late caffeine has been hurting sleep. Tonight, you're projected to be in the moderate caffeine zone, which may impact your sleep negatively.
Alcohol
SOON
Late meals
SOON
); } Object.assign(window, { ScheduleFutureScreen, ScheduleNowScreen, PerformanceScreen, DebtScreen, SleepNeedScreen, });