// Phone bezel + static recreations of the *current* (iOS 26 Liquid Glass) Oona screens. // Ported from elliott99ukhb/Oona/ios-native — SwiftUI screens recreated faithfully in HTML. // Exposes: PhoneFrame, PhoneHome, PhoneHistory, PhoneInsights const { Plus, Home, History: HistoryIcon, Insights: InsightsIcon, Family: FamilyIcon, Bell, Bottle, Moon, Droplet, Note, Pump, ChevronDown, ChevronRight, More, PauseIcon, StopIcon, ArrowLeft, Settings, Check } = window.Icons; const EVT = { feed: { c: '#EBC39E', s: '#F7E6D4', label: 'Feed', ill: 'bottle' }, sleep: { c: '#B8A9D1', s: '#E8E1F0', label: 'Sleep', ill: 'moon' }, nappy: { c: '#B8BEAA', s: '#E2E4D8', label: 'Nappy', ill: 'nappy' }, pump: { c: '#D9B7C6', s: '#F1E0E7', label: 'Pump', ill: 'pump' }, note: { c: '#D8CABE', s: '#ECE3D8', label: 'Note', ill: 'notebook' }, }; // ─── Phone bezel ───────────────────────────────────────────── function PhoneFrame({ children, scale = 1, style }) { const W = 360, H = 760; return (
{/* Status bar */}
9:41
{/* Dynamic island */}
{children} {/* Home indicator */}
); } // ─── Liquid Glass tab bar (iOS 26 native style — no FAB) ───── function LiquidGlassTabBar({ active = 'today' }) { const items = [ { id: 'today', Icon: Home, label: 'Today' }, { id: 'history', Icon: HistoryIcon, label: 'History' }, { id: 'insights', Icon: InsightsIcon, label: 'Insights' }, { id: 'family', Icon: FamilyIcon, label: 'Family' }, ]; return (
{items.map(it => )}
); } function TabBarItem({ Icon, label, active }) { const c = active ? 'var(--oona-primary)' : 'var(--fg-2)'; return (
{label}
); } // ─── Baby header (top bar) ─────────────────────────────────── function BabyHeader() { return (
W
Wren
4 mo 12 d
); } // ─── HOME (with Quick Start tiles) ─────────────────────────── function PhoneHome() { const events = [ { type: 'feed', title: 'Feed · left, 14 min', meta: '07:42', time: '23m', by: 'Mum' }, { type: 'nappy', title: 'Nappy · wet', meta: '07:15', time: '50m', by: 'Dad' }, { type: 'sleep', title: 'Nap · 1h 24m', meta: '05:50', time: '2h', by: 'auto' }, ]; return (
{/* Top bar */}
{/* Greeting */}
Morning.
Today, thursday.
{/* Compact "since last feed" line */}
Last fed 23m ago · at 07:42
{/* 2×2 quick tiles */}
{/* Add a note */}
Add a note
{/* Today's log */}
Today's log
{events.map((ev, i) => )}
); } function QuickTile({ type, running }) { const m = EVT[type]; const isRunning = !!running; return (
{isRunning && }
{isRunning ? `End ${m.label.toLowerCase()}` : m.label}
{isRunning ? running : (type === 'nappy' ? 'Wet · dirty · both' : 'Tap to start')}
); } function LivePill() { return (
LIVE
); } function EventRow({ ev }) { const m = EVT[ev.type]; return (
{ev.title}
{ev.meta} · {ev.by}
{ev.time}
); } // ─── HISTORY ───────────────────────────────────────────────── function PhoneHistory() { const groups = [ { day: 'Today', date: 'Thu 14 May', events: [ { type: 'feed', title: 'Feed · left, 14 min', meta: '07:42', time: '23m', by: 'Mum' }, { type: 'nappy', title: 'Nappy · wet', meta: '07:15', time: '50m', by: 'Dad' }, { type: 'sleep', title: 'Nap · 1h 24m', meta: '05:50–07:14', time: '2h', by: 'auto' }, ]}, { day: 'Yesterday', date: 'Wed 13 May', events: [ { type: 'pump', title: 'Pump · 110 ml', meta: '22:40', time: 'yest', by: 'Mum' }, { type: 'note', title: '"First giggle."', meta: '19:30', time: 'yest', by: 'Mum' }, ]}, ]; return (
History
{[['All', true],['Feeds'],['Sleep'],['Nappies'],['Pumps']].map(([t, a], i) => (
{t}
))}
{groups.map(g => (
{g.day} {g.date}
{g.events.map((ev, i) => )}
))}
); } // ─── INSIGHTS / REPORTS ────────────────────────────────────── function PhoneInsights() { const feeds = [6, 5, 7, 6, 8, 6, 7]; const sleep = [11, 9, 12, 10, 11, 11, 10]; const days = ['M','T','W','T','F','S','S']; const sleepMax = Math.max(...sleep); const sleepPath = sleep.map((v, i) => { const x = (i / (sleep.length - 1)) * 280; const y = 70 - (v / sleepMax) * 60 - 5; return `${i ? 'L' : 'M'}${x},${y}`; }).join(' '); return (
Insights
{/* Feeds bar card */}
Feeds · last 7 days
45 total
{feeds.map((v, i) => (
{days[i]}
))}
{/* Sleep line card */}
Sleep · hours per day
10h 40m average
{sleep.map((v, i) => { const x = (i / (sleep.length - 1)) * 280; const y = 70 - (v / sleepMax) * 60 - 5; return ; })}
{days.map((d, i) => {d})}
{/* Prose insight card */}
Sleep totals are landing.
45 feeds and roughly 75h of sleep across the last 7 days. Open a day in History for the full picture.
); } Object.assign(window, { PhoneFrame, PhoneHome, PhoneHistory, PhoneInsights, LiquidGlassTabBar }); // Keep old PhoneFeed export as alias in case anything still imports it window.PhoneFeed = PhoneInsights;