// @ds-adherence-ignore -- device-frame mockups (raw px/hex for phone bezels & scaled-down screens, by design — mirrors the DS's own ios-frame.jsx). Brand colours flow through the C/FONT atoms.
// vote-screens.jsx — visual option mockups for the 5to9 voting page.
// Each fork shows two little phone screens (the real product UI for each option),
// built from the design-system app atoms on window (C, FONT, GROUP, Icon, Eyebrow).
// Exports to window: MiniPhone, Scene.
(function () {
const { C, FONT, GROUP, Icon, Eyebrow } = window;
const e = React.createElement;
// category → group hue (ADR-016: colour encodes activity category)
const CAT = {
'Food & drink': 'ochre', 'Outdoors': 'teal', 'Culture': 'plum',
'Nightlife': 'dusk', 'Wellness': 'sage', 'Social': 'clay',
};
// ── frame ──────────────────────────────────────────────────────────────
function MiniPhone({ children }) {
return (
{/* status bar */}
{/* content */}
{children}
{/* home indicator */}
);
}
// ── shared bits ──────────────────────────────────────────────────────────
const Pad = ({ children, style }) => {children}
;
const Title = ({ children, size = 22, style }) => {children}
;
const Body = ({ children, c = C.ink2, size = 12.5, style }) => {children}
;
const Mono = ({ children, c = C.ink3 }) => {children};
function Tile({ children, style }) {
return {children}
;
}
function Chip({ label, hue, dot }) {
const g = GROUP[hue];
return (
{dot && }{label}
);
}
function Av({ hue, ch }) {
const g = GROUP[hue];
return {ch};
}
// ── SCENES ────────────────────────────────────────────────────────────────
const SCENES = {
// COLOUR — same plans, coloured by GROUP
'colour-group': () => (
Tonight
Pick your night
{[['Padel + drinks', 'clay', 'Uni friends', '18:30'],
['Supper club', 'plum', 'Sanne\u2019s crew', '19:30'],
['Canal run', 'sage', 'Run club', '19:00']].map(([t, h, g, tm], i) => (
{tm}
{t}
))}
Colour = who you’re with
),
// COLOUR — same plans, coloured by CATEGORY
'colour-category': () => (
Tonight
Pick your night
{[['Natural-wine tasting', 'Food & drink', '18:30', ['clay', 'sage']],
['Bouldering at Klimmuur', 'Outdoors', '19:00', ['plum']],
['Jazz at Bimhuis', 'Culture', '20:30', ['dusk', 'ochre']]].map(([t, cat, tm, avs], i) => (
{tm}
{t}
))}
Colour = the kind of night
),
// CHAT — in-app thread
'chat-inapp': () => (
Friday · 19:30
Dinner at Chabrol
{[['S', 'clay', 'running 10 late — start without me'], ['J', 'plum', 'np, grabbing the table']].map(([ch, h, m], i) => (
))}
Message the group…
),
// CHAT — keep it in WhatsApp
'chat-whatsapp': () => (
Friday · 19:30
Dinner at Chabrol
The chat stays where your group already is. Nothing new to check.
),
// REFLECTION — yes, show me
'reflect-yes': () => {
const rows = [['Food & drink', 'ochre', 42], ['Outdoors', 'teal', 26], ['Culture', 'plum', 20], ['Nightlife', 'dusk', 12]];
return (
Your 5-to-9 · Spring
Where the evenings went
{rows.map(([lab, h, pct], i) => (
))}
11 nights out · 6 with friends · private to you
);
},
// REFLECTION — no, keep it minimal
'reflect-no': () => (
Tonight
Your evening’s wide open. Good.
No dashboards. No streaks. Nothing to check.
),
// ONBOARDING — drop me straight in
'onb-straight': () => (
Monday · 2 June
Evening, Daan.
Your evening17:00–21:00 free
Tonight · 1 of 3fits 18:30
Natural-wine tasting
Jordaan
18:30
{[['tonight', 'Tonight', true], ['plan', 'Plan'], ['groups', 'Groups']].map(([ic, lb, on]) => (
{lb}
))}
),
// ONBOARDING — walk me through it
'onb-setup': () => (
{[0, 1, 2].map(i => )}
Set up · step 1 of 3
Add your friend groups
{[['Uni friends', 'clay', true], ['Climbing crew', 'teal', true]].map(([n, h, done], i) => (
{n}
))}
),
// PRIVACY — fully siloed
'priv-siloed': () => (
Uni friends
This week
{[['Wed', null], ['Thu', ['Padel 18:30', 'clay']], ['Fri', null], ['Sat', ['Supper 19:30', 'clay']]].map(([d, ev], i) => (
{d}
{ev
?
{ev[0]}
:
open
}
))}
You only see this group’s plans.
),
// PRIVACY — shared free/busy
'priv-shared': () => (
Uni friends
This week · + when you’re busy elsewhere
{[['Wed', ['Busy', 'grey']], ['Thu', ['Padel 18:30', 'clay']], ['Fri', ['Busy', 'grey']], ['Sat', ['Supper 19:30', 'clay']]].map(([d, ev], i) => (
{d}
{ev[1] === 'grey'
?
{ev[0]}another group
:
{ev[0]}
}
))}
Groups see when — never with who.
),
// FIRST — calendar import
'first-calendar': () => (
Your week
Find your free evenings
{[['Mon', 'Work till 18:00', 'Free 18–21'], ['Tue', 'Gym 19:00', null], ['Wed', null, 'Free 17–21'], ['Thu', 'Call 20:00', 'Free 18–20']].map(([d, busy, free], i) => (
{d}
{busy &&
{busy}
}
{free &&
{free}
}
))}
We only read busy blocks — never what or who.
),
// FIRST — discovery picks
'first-picks': () => (
Tonight · Amsterdam-West
Three things to do
{[['Natural-wine tasting', 'Jordaan', '18:30', 'Food & drink'], ['Bouldering', 'Oost', '19:00', 'Outdoors']].map(([t, w, tm, cat], i) => (
{i + 1} of 3
{t}
{w}
{tm}
))}
),
};
function Scene({ id }) {
const S = SCENES[id];
return S ? e(S) : null;
}
Object.assign(window, { MiniPhone, Scene });
})();