// screens.jsx โ€” mocked-up AquaTag app screens used inside iOS device frames. // Two styles: "nursery" (cream, serif, warm) and "terrarium" (moss green, cream type). // Each screen takes a `theme` object. const NURSERY_THEME = { bg: '#f6efdf', surface: '#fff9ec', ink: '#1b2a1a', inkSoft: '#5a6b57', accent: '#2d8c4e', accentSoft: '#d7e8c8', warn: '#e8a020', danger: '#c8463a', divider: 'rgba(27,42,26,0.08)', serif: 'Fraunces, "Instrument Serif", Georgia, serif', sans: '"IBM Plex Sans", -apple-system, system-ui, sans-serif', statusDark: false, }; const TERRARIUM_THEME = { bg: '#0f2a1e', surface: '#16382a', ink: '#f3ead4', inkSoft: 'rgba(243,234,212,0.6)', accent: '#6fd69a', accentSoft: 'rgba(111,214,154,0.18)', warn: '#f4b455', danger: '#ef7d6a', divider: 'rgba(243,234,212,0.1)', serif: 'Fraunces, "Instrument Serif", Georgia, serif', sans: '"IBM Plex Sans", -apple-system, system-ui, sans-serif', statusDark: true, }; // Demo plant data (minimal density: plant + status only) const DEMO_PLANTS = [ { id: 'monty', char: 'monty', name: 'Monty', status: 'ok', days: 3, emoji: '๐ŸŒฟ' }, { id: 'cleo', char: 'cleo', name: 'Cleo', status: 'due', days: 0, emoji: '๐ŸŒต' }, { id: 'fernie', char: 'fernie', name: 'Fernie', status: 'overdue', days: -2, emoji: '๐ŸŒฟ' }, { id: 'ollie', char: 'ollie', name: 'Ollie', status: 'ok', days: 5, emoji: '๐ŸŒธ' }, { id: 'suzy', char: 'suzy', name: 'Suzy', status: 'ok', days: 4, emoji: '๐ŸŒบ' }, { id: 'pip', char: 'pip', name: 'Pip', status: 'due', days: 1, emoji: '๐ŸŒฑ' }, ]; function statusLabel(p) { const _t = (window.t || ((k, v) => { const map = { 'app.overdue_d': `${v && v.n}d overdue`, 'app.water_today': 'Water today', 'app.water_tomorrow': 'Water tomorrow', 'app.in_d': `In ${v && v.n}d` }; return map[k] || k; })); if (p.status === 'overdue') return _t('app.overdue_d', { n: Math.abs(p.days) }); if (p.status === 'due') return p.days === 0 ? _t('app.water_today') : _t('app.water_tomorrow'); return _t('app.in_d', { n: p.days }); } function statusColor(t, p) { if (p.status === 'overdue') return t.danger; if (p.status === 'due') return t.warn; return t.accent; } // โ”€โ”€โ”€ 1. PLANT LIST โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ function ScreenPlantList({ theme: t, plants = DEMO_PLANTS, useStickers = true }) { return (
{/* Large title */}
{(window.t || (()=>'Today'))('app.today', { n: plants.filter(p => p.status !== 'ok').length })}

{(window.t || (()=>'Your plants'))('app.your_plants')}

{/* Rows */}
{plants.map((p, i) => (
{/* Avatar */}
{useStickers ? ( ) : ( {p.emoji} )}
{p.name}
{statusLabel(p)}
{/* Water drop action */}
))}
{/* FAB: Scan Tag */}
{(window.t || (()=>'Scan a tag'))('app.scan_tag')}
); } // โ”€โ”€โ”€ 2. NFC SCAN (the tap moment) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ function ScreenScan({ theme: t, plant = DEMO_PLANTS[0] }) { return (
{/* Ripples */}
{[0, 1, 2].map(i => (
))}
{/* Character + glow */}
{(window.t || (()=>'NFC ยท Watered now'))('app.nfc_watered')}

{(window.t || (()=>plant.name+', hydrated.'))('app.hydrated', { name: plant.name })}

{(window.t || (()=>'Next drink in X days.'))('app.next_in', { n: CHARACTERS[plant.char].species === 'Monstera deliciosa' ? '7' : '5' })}
{/* Check */}
); } // โ”€โ”€โ”€ 3. PLANT DETAIL โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ function ScreenDetail({ theme: t, plant = DEMO_PLANTS[0] }) { return (
{/* Hero */}
{(window.t||(()=>'Edit'))('app.edit')}

{plant.name}

{CHARACTERS[plant.char].species}
{/* Big status card */}
{(window.t||(()=>'Next watering'))('app.next_watering')}
{statusLabel(plant)}
{(window.t||(()=>'Last tapped 3 days ago ยท by iPhone 15'))('app.last_tapped')}
{/* Water bar */}
{/* Rows */}
{(() => { const _t = window.t || ((k)=>k); return [ [_t('app.row.interval'), _t('app.row.interval.v')], [_t('app.row.tag'), 'aquatag:' + plant.id], [_t('app.row.ha'), _t('app.row.ha.v')], [_t('app.row.notif'), _t('app.row.notif.v')], ]; })().map(([k, v], i) => (
{k} {v}
))}
{/* Write tag button */}
{(window.t||(()=>'Write to a new NFC tag'))('app.write_tag')}
); } // โ”€โ”€โ”€ 4. ADD PLANT โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ function ScreenAdd({ theme: t }) { const [selected] = [3]; // "basil" row return (
{(window.t||(()=>'Cancel'))('app.cancel')}
{(window.t||(()=>'Save'))('app.save')}

'Meet your new
plant friend.'))('app.meet_new.html') }}/>

{/* Character picker */}
{(window.t||(()=>'Pick a character'))('app.pick_character')}
{['pip', 'monty', 'cleo', 'fernie', 'ollie', 'suzy'].map((c, i) => (
))}
{/* Form fields */}
{(() => { const _t = window.t || ((k)=>k); return [ [_t('app.field.name'), 'Pip', true], [_t('app.field.species'), _t('app.field.species.v'), false], [_t('app.field.water'), _t('app.field.water.v'), false], ]; })().map(([k, v, strong], i) => (
{k} {v}
))}
{/* Interval dial */}
4
{(window.t||(()=>'days between waters'))('app.days_between')}
{[...Array(14)].map((_, i) => (
))}
); } // โ”€โ”€โ”€ 5. HISTORY โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ function ScreenHistory({ theme: t }) { const _t = window.t || ((k)=>k); const weeks = [ [_t('app.day.mon'), 1, 0, 1, 0, 1, 1, 0], [_t('app.day.tue'), 0, 1, 0, 1, 0, 1, 1], [_t('app.day.wed'), 1, 0, 1, 1, 0, 1, 0], [_t('app.day.thu'), 0, 1, 1, 0, 1, 0, 1], [_t('app.day.fri'), 1, 1, 0, 1, 0, 1, 1], [_t('app.day.sat'), 0, 1, 0, 1, 1, 0, 1], [_t('app.day.sun'), 1, 0, 1, 0, 1, 1, 0], ]; return (
{_t('app.last_six')}

{_t('app.history')}

{/* Big stat */}
142
{_t('app.waterings')}
31
{_t('app.day_streak')}
{/* Heatmap */}
{weeks.map(([day, ...cells]) => (
{day}
{cells.map((v, i) => (
))}
))}
{/* Recent entries */}
{_t('app.this_week')}
{[ ['monty', 'Monty', _t('app.when.2h'), 'Andrei'], ['cleo', 'Cleo', _t('app.when.yesterday'), 'Mira'], ['fernie','Fernie',_t('app.when.monday'), 'Andrei'], ].map(([c, name, when, who]) => (
{name}
{_t('app.watered_by', { when, who })}
))}
); } window.THEMES = { nursery: NURSERY_THEME, terrarium: TERRARIUM_THEME }; window.DEMO_PLANTS = DEMO_PLANTS; window.ScreenPlantList = ScreenPlantList; window.ScreenScan = ScreenScan; window.ScreenDetail = ScreenDetail; window.ScreenAdd = ScreenAdd; window.ScreenHistory = ScreenHistory;