Design files

This commit is contained in:
Joshua King
2026-10-02 15:09:42 -04:00
parent 3f2ba4ed21
commit 3a83e6c942
37 changed files with 7687 additions and 0 deletions
File diff suppressed because one or more lines are too long
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap">
<link rel="stylesheet" href="_ds/organic-cd54d318-425e-4a60-adfb-d590f70d40bd/styles.css">
<style>body{margin:0;background:#e9e4dc}a{color:#68449b}a:hover{color:#4a2d73}button{font:inherit}button:focus-visible{outline:2px solid #5a358c;outline-offset:2px}</style>
</helmet>
<div style="--color-bg:#f9f6f1;--color-surface:#eee9de;--color-accent:#5a358c;--color-accent-100:#f8f1ff;--color-accent-200:#eedfff;--color-accent-300:#dac3ff;--color-accent-700:#68449b;--color-accent-800:#4a2d73;--color-accent-2:#29889c;--color-accent-2-100:#e0fbff;--color-accent-2-200:#bbf3ff;--color-accent-2-600:#008aaa;--color-accent-2-700:#006b88;--color-accent-2-800:#004c63;--color-accent-2-900:#002f3e;--on-accent:#f9f6f1;--font-heading:'Bagel Fat One',system-ui,sans-serif;min-height:100vh;padding:48px;display:flex;gap:48px;flex-wrap:wrap;align-items:flex-start;font-family:var(--font-body);color:var(--color-text)">
<div style="width:360px;height:760px;position:relative;border-radius:36px;background:var(--color-bg);overflow:hidden;box-shadow:var(--shadow-lg);flex:none">
<div style="height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:700"><span>9:41</span><span style="width:22px;height:10px;border-radius:3px;background:var(--color-text)"></span></div>
<sc-if value="{{ onDiscover }}" hint-placeholder-val="{{ true }}">
<div style="padding:8px 20px 0;display:flex;align-items:flex-end;justify-content:space-between">
<div><div style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)">Discover</div><div style="font-family:var(--font-heading);font-size:30px;line-height:1.1">Side quests</div></div>
<div ref="{{ refCount }}" style="padding:7px 12px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-800);font-size:12px;font-weight:700">Quest log · {{ questCount }}</div>
</div>
<div style="position:relative;margin:18px 20px 0;height:440px;perspective:1000px">
<sc-for list="{{ cards }}" as="card" hint-placeholder-count="3">
<div ref="{{ card.ref }}" onPointerDown="{{ card.onDown }}" onPointerMove="{{ card.onMove }}" onPointerUp="{{ card.onUp }}" onPointerCancel="{{ card.onUp }}" style="{{ card.style }}">
<div style="height:220px;margin:10px;border-radius:24px;background:repeating-linear-gradient(135deg,#dcd3c4 0 8px,#eee7db 8px 16px);display:flex;align-items:center;justify-content:center;font:11px ui-monospace,Menlo,monospace;color:#645c50">dish photo</div>
<div style="padding:4px 20px 0;display:flex;flex-direction:column;gap:10px">
<div style="font-family:var(--font-heading);font-size:24px;line-height:1.1">{{ card.name }}</div>
<div style="display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#645c50"><span style="display:flex;gap:3px"><span style="{{ card.d1 }}"></span><span style="{{ card.d2 }}"></span><span style="{{ card.d3 }}"></span></span>{{ card.diff }}</div>
<div style="padding:12px 14px;border-radius:18px;background:var(--color-accent-2-100);color:var(--color-accent-2-900);font-size:13px;line-height:1.45"><b>Why this?</b> {{ card.why }}</div>
</div>
<div data-stamp="1" style="position:absolute;top:26px;left:22px;transform:rotate(-12deg);padding:6px 14px;border:3px solid var(--color-accent-2-700);border-radius:14px;font-family:var(--font-heading);font-size:24px;color:var(--color-accent-2-800);background:var(--color-accent-2-100);opacity:0;pointer-events:none">Try it!</div>
<div data-pass="1" style="position:absolute;top:26px;right:22px;transform:rotate(12deg);padding:6px 14px;border:3px solid #474238;border-radius:14px;font-family:var(--font-heading);font-size:24px;color:#2e2b25;background:#f9f4ed;opacity:0;pointer-events:none">Pass</div>
<div data-shade="1" style="position:absolute;inset:0;border-radius:32px;background:#201e1d;opacity:0;pointer-events:none"></div>
</div>
</sc-for>
</div>
<div style="display:flex;justify-content:center;gap:28px;margin-top:22px">
<button onClick="{{ pass }}" style="border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#645c50"><span ref="{{ refPassBtn }}" style="width:62px;height:62px;border-radius:50%;background:#f9f4ed;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--color-text)"><svg viewBox="0 0 24 24" width="26" height="26" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span>Pass</button>
<button onClick="{{ tryIt }}" style="border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#645c50"><span ref="{{ refTryBtn }}" style="width:62px;height:62px;border-radius:50%;background:var(--color-accent-2-600);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--color-bg)"><svg viewBox="0 0 24 24" width="26" height="26" style="fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg></span>Try it</button>
</div>
</sc-if>
<sc-if value="{{ offDiscover }}" hint-placeholder-val="{{ false }}">
<div style="padding:24px 20px;display:flex;flex-direction:column;gap:8px"><div style="font-family:var(--font-heading);font-size:30px">{{ tab }}</div><div style="font-size:14px;color:#645c50">Placeholder: see the static mockups for this tab. Tap Discover to return to the card demo.</div></div>
</sc-if>
<div style="position:absolute;left:12px;right:12px;bottom:16px;height:62px;border-radius:999px;background:var(--color-text);display:flex;align-items:center;justify-content:space-around;padding:0 6px">
<div ref="{{ refPill }}" style="position:absolute;top:10px;height:42px;left:0;width:0;border-radius:999px;background:var(--color-accent);pointer-events:none"></div>
<button ref="{{ refHome }}" onClick="{{ goHome }}" aria-label="Home" style="{{ navHome }}"><svg viewBox="0 0 24 24" width="21" height="21" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg><sc-if value="{{ isHome }}" hint-placeholder-val="{{ false }}"><span data-label="1">Home</span></sc-if></button>
<button ref="{{ refPlan }}" onClick="{{ goPlan }}" aria-label="Plan" style="{{ navPlan }}"><svg viewBox="0 0 24 24" width="21" height="21" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><sc-if value="{{ isPlan }}" hint-placeholder-val="{{ false }}"><span data-label="1">Plan</span></sc-if></button>
<button ref="{{ refDiscover }}" onClick="{{ goDiscover }}" aria-label="Discover" style="{{ navDiscover }}"><svg viewBox="0 0 24 24" width="21" height="21" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="10"></circle><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path></svg><sc-if value="{{ isDiscover }}" hint-placeholder-val="{{ true }}"><span data-label="1">Discover</span></sc-if></button>
<button ref="{{ refQuick }}" onClick="{{ goQuick }}" aria-label="Quick" style="{{ navQuick }}"><svg viewBox="0 0 24 24" width="21" height="21" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.020A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><sc-if value="{{ isQuick }}" hint-placeholder-val="{{ false }}"><span data-label="1">Quick</span></sc-if></button>
<button ref="{{ refSettings }}" onClick="{{ goSettings }}" aria-label="Settings" style="{{ navSettings }}"><svg viewBox="0 0 24 24" width="21" height="21" style="flex:none;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg><sc-if value="{{ isSettings }}" hint-placeholder-val="{{ false }}"><span data-label="1">Settings</span></sc-if></button>
</div>
</div>
<div style="max-width:420px;display:flex;flex-direction:column;gap:18px">
<div style="font-family:var(--font-heading);font-size:34px;line-height:1.1">MealQuest motion reference</div>
<div style="font-size:14px;line-height:1.55;color:#474238">Live reference for the three signature animations. Tap the buttons, drag the card, or switch tabs. Exact keyframes are in the handoff README.</div>
<div style="padding:18px 20px;border-radius:26px;background:#f9f6f1;display:flex;flex-direction:column;gap:6px"><div style="font-family:var(--font-heading);font-size:18px">Nav pill slide</div><div style="font-size:13px;line-height:1.5;color:#474238">Pill animates left + width to the tapped item, 420 ms, cubic-bezier(.34,1.4,.64,1). Other icons FLIP to their new spots on the same curve; label fades in after 120 ms.</div></div>
<div style="padding:18px 20px;border-radius:26px;background:#f9f6f1;display:flex;flex-direction:column;gap:6px"><div style="font-family:var(--font-heading);font-size:18px">Try it</div><div style="font-size:13px;line-height:1.5;color:#474238">Stamp pops in. Card wiggles (±4°, 420 ms), pulls back slightly, then flies off right with a 28° tilt (480 ms, ease-in). Quest log pill bumps.</div></div>
<div style="padding:18px 20px;border-radius:26px;background:#f9f6f1;display:flex;flex-direction:column;gap:6px"><div style="font-family:var(--font-heading);font-size:18px">Pass</div><div style="font-size:13px;line-height:1.5;color:#474238">Card folds over on its left edge (rotateY to −80°, shading darkens), then drops and tumbles off left (720 ms total).</div></div>
<div style="display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#474238"><button onClick="{{ toggleReduced }}" style="border:1.5px solid rgba(32,30,29,.16);background:none;border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700">Reduced motion: {{ reducedLabel }}</button><span>{{ lastAction }}</span></div>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script>
const SPRING = 'cubic-bezier(.34,1.4,.64,1)';
const DEPTH_TF = ['translateY(0px) scale(1)', 'translateY(8px) scale(.95)', 'translateY(16px) scale(.9)'];
const DECK = [
{ name: 'Korean beef bowls', level: 1, diff: 'Easy', why: 'You make Chicken stir-fry and Beef tacos most weeks. Same flavors, sweet-savory twist.' },
{ name: 'Crock pot chicken tikka masala', level: 2, diff: 'Medium', why: 'Butter chicken night is a household favorite. This one cooks itself while you work.' },
{ name: 'Lemon garlic shrimp orzo', level: 2, diff: 'Medium', why: 'Your Shrimp scampi is on repeat. Orzo makes it a one-pot night.' },
{ name: 'Turkey chili', level: 1, diff: 'Easy', why: 'A lighter take on the chili you make every fall.' },
{ name: 'Thai basil chicken', level: 2, diff: 'Medium', why: 'Close to your stir-fry, with a fresh herby kick.' }
];
class Component extends DCLogic {
state = { idx: 0, tab: 'Discover', quest: 6, reduced: false, last: '' };
busy = false; cardEls = []; nav = {}; drag = null;
constructor(p) {
super(p);
this.cardRefs = [0, 1, 2].map(d => el => { this.cardEls[d] = el; });
['Home', 'Plan', 'Discover', 'Quick', 'Settings'].forEach(t => {
this['ref' + t] = el => { this.nav[t] = el; };
this['go' + t] = () => this.selectTab(t);
});
this.refPill = el => { this.pill = el; };
this.refCount = el => { this.countEl = el; };
this.refTryBtn = el => { this.tryBtn = el; };
this.refPassBtn = el => { this.passBtn = el; };
}
componentDidMount() {
this.state.reduced = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
this.forceUpdate();
const place = () => { const el = this.nav[this.state.tab]; if (el && this.pill) { this.pill.style.left = el.offsetLeft + 'px'; this.pill.style.width = el.offsetWidth + 'px'; } };
requestAnimationFrame(place);
document.fonts && document.fonts.ready.then(place);
}
selectTab(t) {
if (t === this.state.tab) return;
const before = {}; Object.keys(this.nav).forEach(k => before[k] = this.nav[k].getBoundingClientRect().left);
const from = { left: this.pill.offsetLeft, width: this.pill.offsetWidth };
this.setState({ tab: t }, () => {
const el = this.nav[t]; const to = { left: el.offsetLeft, width: el.offsetWidth };
this.pill.style.left = to.left + 'px'; this.pill.style.width = to.width + 'px';
if (this.state.reduced) return;
this.pill.animate([{ left: from.left + 'px', width: from.width + 'px' }, { left: to.left + 'px', width: to.width + 'px' }], { duration: 420, easing: SPRING });
Object.keys(this.nav).forEach(k => {
const dx = before[k] - this.nav[k].getBoundingClientRect().left;
if (Math.abs(dx) > 0.5) this.nav[k].animate([{ transform: `translateX(${dx}px)` }, { transform: 'translateX(0)' }], { duration: 420, easing: SPRING });
});
const lab = el.querySelector('[data-label]');
if (lab) lab.animate([{ opacity: 0, transform: 'translateX(-4px)' }, { opacity: 1, transform: 'none' }], { duration: 220, delay: 120, easing: 'ease-out', fill: 'backwards' });
});
}
top() { return this.cardEls[0]; }
bump(el) { el && el.animate([{ transform: 'scale(1)' }, { transform: 'scale(.88)' }, { transform: 'scale(1.06)' }, { transform: 'scale(1)' }], { duration: 300, easing: 'ease-out' }); }
tryIt = (fromDrag) => {
if (this.busy && fromDrag !== true) return; this.busy = true;
const el = this.top(); const stamp = el.querySelector('[data-stamp]');
if (fromDrag !== true) this.bump(this.tryBtn);
if (this.state.reduced) return el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: 'forwards' }).finished.then(() => this.advance(true));
const cur = el.style.transform || 'translate(0px,0px) rotate(0deg)';
stamp.animate([{ opacity: 0, transform: 'rotate(-12deg) scale(1.5)' }, { opacity: 1, transform: 'rotate(-12deg) scale(1)' }], { duration: 220, easing: SPRING, fill: 'forwards' });
const wiggle = fromDrag === true ? Promise.resolve() : el.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(-4deg)' }, { transform: 'rotate(4deg)' }, { transform: 'rotate(-3deg)' }, { transform: 'rotate(2deg)' }, { transform: 'rotate(0deg)' }
], { duration: 420, easing: 'ease-in-out' }).finished;
wiggle.then(() => el.animate(
fromDrag === true
? [{ transform: cur }, { transform: 'translate(150%,-60px) rotate(28deg)', opacity: 0 }]
: [{ transform: 'translate(0px,0px) rotate(0deg)' }, { transform: 'translate(-14px,4px) rotate(-3deg)', offset: 0.18 }, { transform: 'translate(150%,-60px) rotate(28deg)', opacity: 0 }],
{ duration: fromDrag === true ? 340 : 480, easing: 'cubic-bezier(.55,0,.8,.4)', fill: 'forwards' }
).finished).then(() => this.advance(true));
};
pass = (fromDrag) => {
if (this.busy && fromDrag !== true) return; this.busy = true;
const el = this.top(); const shade = el.querySelector('[data-shade]');
if (fromDrag !== true) this.bump(this.passBtn);
if (this.state.reduced) return el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: 'forwards' }).finished.then(() => this.advance(false));
const cur = el.style.transform || 'translate(0px,0px) rotate(0deg)';
el.style.transformOrigin = '0% 50%';
shade.animate([{ opacity: 0 }, { opacity: 0.4, offset: 0.45 }, { opacity: 0.55 }], { duration: 720, fill: 'forwards' });
el.animate([
{ transform: `${cur} rotateY(0deg)`, easing: 'cubic-bezier(.45,0,.85,.55)' },
{ transform: `${cur} rotateY(-80deg)`, offset: 0.45, easing: 'cubic-bezier(.4,0,.9,.6)' },
{ transform: 'translate(-45%,560px) rotate(-35deg) rotateY(-90deg)', opacity: 0 }
], { duration: 720, fill: 'forwards' }).finished.then(() => this.advance(false));
};
advance(accepted) {
this.cardEls.forEach(el => { if (!el) return; el.getAnimations({ subtree: true }).forEach(a => a.cancel()); el.style.transform = ''; el.style.transformOrigin = ''; });
this.setState(s => ({ idx: s.idx + 1, quest: s.quest + (accepted ? 1 : 0), last: accepted ? 'Added to Quest log' : 'Passed' }), () => {
if (accepted) this.bump(this.countEl);
if (!this.state.reduced) [0, 1].forEach(d => { const el = this.cardEls[d]; el && el.animate([{ transform: DEPTH_TF[d + 1] }, { transform: DEPTH_TF[d] }], { duration: 300, easing: 'cubic-bezier(.2,.8,.2,1)' }); });
this.busy = false;
});
}
onDown = e => {
if (this.busy) return;
const el = this.top(); el.setPointerCapture(e.pointerId);
this.drag = { x: e.clientX, y: e.clientY, dx: 0 };
};
onMove = e => {
if (!this.drag) return;
const el = this.top(); const dx = e.clientX - this.drag.x, dy = e.clientY - this.drag.y; this.drag.dx = dx;
el.style.transform = `translate(${dx}px,${dy * 0.3}px) rotate(${dx / 18}deg)`;
el.querySelector('[data-stamp]').style.opacity = Math.max(0, Math.min(1, dx / 100));
el.querySelector('[data-pass]').style.opacity = Math.max(0, Math.min(1, -dx / 100));
};
onUp = () => {
if (!this.drag) return;
const el = this.top(); const dx = this.drag.dx; this.drag = null;
const st = el.querySelector('[data-stamp]'), ps = el.querySelector('[data-pass]');
if (dx > 110) { this.busy = true; ps.style.opacity = 0; return this.tryIt(true); }
if (dx < -110) { this.busy = true; st.style.opacity = 0; return this.pass(true); }
const cur = el.style.transform; el.style.transform = '';
st.style.opacity = 0; ps.style.opacity = 0;
if (cur) el.animate([{ transform: cur }, { transform: 'translate(0px,0px) rotate(0deg)' }], { duration: 420, easing: SPRING });
};
navStyle(t) {
const on = this.state.tab === t;
return { position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 6, height: 42, padding: '0 12px', border: 0, background: 'none', borderRadius: 999, cursor: 'pointer', fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap', color: on ? 'var(--on-accent)' : '#c0b6a5', transition: 'color .2s' };
}
renderVals() {
const s = this.state;
const dot = on => ({ width: 8, height: 8, borderRadius: '50%', background: on ? 'var(--color-accent)' : '#dcd3c4' });
const cards = [2, 1, 0].map(d => {
const c = DECK[(s.idx + d) % DECK.length];
return {
...c, ref: this.cardRefs[d],
d1: dot(c.level >= 1), d2: dot(c.level >= 2), d3: dot(c.level >= 3),
onDown: d === 0 ? this.onDown : undefined, onMove: d === 0 ? this.onMove : undefined, onUp: d === 0 ? this.onUp : undefined,
style: { position: 'absolute', inset: 0, borderRadius: 32, background: d === 0 ? '#f9f4ed' : d === 1 ? 'var(--color-surface)' : '#dcd3c4', boxShadow: d === 0 ? 'var(--shadow-lg)' : 'none', overflow: 'hidden', transform: DEPTH_TF[d], zIndex: 3 - d, touchAction: 'none', userSelect: 'none', cursor: d === 0 ? 'grab' : 'default', willChange: 'transform' }
};
});
const v = {
cards, questCount: s.quest, tab: s.tab, onDiscover: s.tab === 'Discover', offDiscover: s.tab !== 'Discover',
pass: this.pass, tryIt: this.tryIt, refPill: this.refPill, refCount: this.refCount, refTryBtn: this.refTryBtn, refPassBtn: this.refPassBtn,
toggleReduced: () => this.setState(x => ({ reduced: !x.reduced })), reducedLabel: s.reduced ? 'on' : 'off', lastAction: s.last
};
['Home', 'Plan', 'Discover', 'Quick', 'Settings'].forEach(t => {
v['ref' + t] = this['ref' + t]; v['go' + t] = this['go' + t]; v['nav' + t] = this.navStyle(t); v['is' + t] = s.tab === t;
});
return v;
}
}
</script>
</body>
</html>
@@ -0,0 +1,296 @@
# Handoff: MealQuest — mobile-first meal planning PWA
## Overview
MealQuest helps one household plan weekly dinners. The household enters the dinners they make on repeat ("regulars"); an AI assistant suggests new dinners to try ("side quests"), which the household accepts or declines with a swipe-card UI. Accepted dinners go into a to-try pool (the "Quest log"). Each week the AI drafts a plan that mixes regulars with Quest-log picks; the household swaps days, then the plan is pushed to Google Calendar. A shopping list is generated from the planned dinners, grouped by dinner, minus anything the household unchecks as already on hand. Each week's list is archived as a "post" in a blog-style history (by week / month / year). Push notifications and Google Chat webhook messages announce key events. An admin area inside Settings configures the LLM.
### Product decisions (confirmed with the client)
| Topic | Decision |
|---|---|
| Users | One **shared household account** (no per-member profiles). Anyone in the household can edit everything, including Admin. |
| Swipe accept | Goes into the **Quest log** (to-try pool), scheduled later. |
| Suggestion card shows | Photo, **why it was suggested** (referencing regular dinners), **difficulty**. |
| Week building | **AI builds the week** mixing regulars + Quest-log meals; the user swaps/adjusts. No fixed new-vs-regular ratio. |
| Google Calendar | **One-way: app is source of truth**, pushes dinners to a Google Calendar. |
| Shopping list | All ingredients for planned dinners, **grouped by dinner**. The user **unchecks items they already have** (this is the only pantry mechanism — no persistent pantry). |
| History | **Each weekly shopping list is a new post**; filter Week / Month / Year. |
| Quick dinners | "Quick" = **crock pot** OR **≤ 30 min prep-to-table**. Shown as **two tabs** (Crock pot / 30 min or less). Reachable from a **bottom-nav tab** AND a Home shortcut, and as a "Quick only" filter in Cook-from-what-I-have. |
| Notifications (push + Google Chat) | New weekly plan ready · Shopping list ready · Day-of dinner reminder · New suggestions to swipe. Each event is toggled separately for Push and Chat. |
| Admin (LLM) | Provider + model picker · API key management · Temperature (creativity) · System prompt editor. Lives **inside Settings**. |
| Copy tone | Playful, quest-themed, but every label stays plain enough to understand. |
### Vocabulary (use consistently in UI copy)
- **Regulars** — the household's routine dinners.
- **Side quests** — AI dinner suggestions (Discover tab).
- **Quest log** — accepted suggestions waiting to be scheduled (to-try pool).
- **Supply run** — the current week's shopping list.
- **Supply archive** — shopping-list history.
## About the design files
The files in this bundle are **design references built in HTML** — static hi-fi mockups plus one interactive motion prototype. They show the intended look and behavior; they are **not production code to copy**. Recreate them in the target codebase using its established patterns. There is no existing codebase, so the recommended stack is:
- **React 18 + TypeScript + Vite**, `vite-plugin-pwa` (Workbox) for the service worker + manifest.
- Styling: CSS variables from `tokens.css` + CSS Modules or Tailwind configured to those variables. Do not hard-code hex values in components.
- Motion: **Web Animations API** (as in the prototype) or **Framer Motion** — the keyframes below translate 1:1.
- Icons: **Lucide** (`lucide-react`), `strokeWidth={2.75}` everywhere.
- Routing: React Router. Data: TanStack Query against a small API (backend out of scope for this handoff; integration points listed under *State & data*).
## Fidelity
**High-fidelity.** Colors, type, radii, spacing, copy and layout are final. Recreate pixel-accurately. Photos are placeholders (striped boxes labelled "dish photo") — real recipe photography will be supplied and should be rendered through the Organic "washed" treatment (`filter: saturate(.6) contrast(.85) brightness(1.1) opacity(.94)`), with rounded corners.
---
## Design tokens
All values are in `tokens.css`. Summary:
**Color**
| Role | Token | Hex |
|---|---|---|
| Page / phone background | `--color-bg` | `#f9f6f1` |
| Surface (cards, rows, inputs) | `--color-surface` | `#eee9de` |
| Ink | `--color-text` | `#201e1d` |
| Primary accent (Grape) | `--color-accent` | `#5a358c` |
| Text on accent | `--on-accent` | `#f9f6f1` |
| Second accent (Teal blue) | `--color-accent-2` | `#29889c` |
| Divider | `--color-divider` | `#201e1d` @ 16% |
Ramps (100→900): Grape `#f8f1ff #eedfff #dac3ff #c1a1f9 #a47ee1 #865fc0 #68449b #4a2d73 #2d1a49`; Teal `#e0fbff #bbf3ff #88e0f6 #3fc7e4 #00a9ca #008aaa #006b88 #004c63 #002f3e`; Neutral `#f9f4ed #eee7db #dcd3c4 #c0b6a5 #a19786 #82796a #645c50 #474238 #2e2b25`.
Usage rules:
- Grape fill (`--color-accent`) = primary buttons, active nav pill, selected segmented option, checked checkboxes, slider fill. **Always `--on-accent` text on it.**
- Grape small text (kickers, links) uses `--color-accent-700`.
- "Side quest"/new-dinner highlights: grape-100 fill + grape-300 inset ring (rows) or teal-200/300 fills (tiles). Tags: grape-100 bg / grape-800 text.
- Teal = positive/confirmation voice: "Why this?" boxes (teal-100 bg, teal-900 text), "Synced"/"Connected" status text (teal-800), toggles ON and "Try it" button (teal-600), Quest-log count pill (teal-200 bg, teal-800 text).
- Neutral-100 = secondary card fill; neutral-700 = muted meta text.
**Typography**
| Use | Font | Size / line-height |
|---|---|---|
| Mobile screen title | Bagel Fat One 400 | 26–30px / 1.1 |
| Card title (suggestion) | Bagel Fat One | 24px / 1.1 |
| Section/card heading | Bagel Fat One | 16–22px / 1.15 |
| Tablet/desktop page title | Bagel Fat One | 36–40px / 1.1 |
| Buttons | Bagel Fat One | 14–16px |
| Body | Figtree 400 | 13–15px / 1.45–1.55 |
| Row label | Figtree 700 | 14–15px |
| Kicker | Figtree 700, uppercase, letter-spacing .1em | 11–12px |
| Meta / tag | Figtree 700 | 10–12px |
| Mono (URLs, keys, system prompt, photo placeholder) | ui-monospace | 11–13px |
**Shape:** buttons, inputs, tags, nav, segmented controls are pills (999px). Mobile cards 24–32px radius; list rows 18–24px; inner photo 24px inset 10px from card edge. Phone frame in mocks is 36px (device chrome only).
**Elevation:** `--shadow-sm` (segmented selected), `--shadow-md` (round action buttons, tiles), `--shadow-lg` (top swipe card, dragged items).
**Icons (Lucide, stroke 2.75):** house, calendar, compass, zap, sliders-horizontal, x, heart, check, chevron-left/right/down, refresh-cw (swap), plus, shopping-cart, message-square, bell, search, archive, users. Nav icons 21–22px; inline 15–18px.
---
## Layout & navigation
### Breakpoints
- **Mobile < 768px** — design width 360–390px. Bottom nav bar.
- **Tablet 768–1199px** — design 1180×820 landscape. 96px left icon rail.
- **Desktop ≥ 1200px** — design 1440×900. 208px left sidebar.
### Primary nav (5 items, same order everywhere)
`Home · Plan · Discover · Quick · Settings`
- **Mobile bottom bar:** absolute, `left/right 12px`, `bottom 16px` (+ safe-area inset), height 62px, pill, background `--color-text`, `justify-content: space-around`, padding 0 6px. Inactive items: icon only, color `#c0b6a5` (neutral-400). Active item: icon + label (Figtree 700 13px) on a grape pill (height 42px, padding 0 12–14px, `--on-accent` text). **The grape pill is one shared element that slides between items — see Motion.**
- **Tablet rail:** 96px, `--color-surface` bg. Top: 48px grape circle with "M". Items stacked, gap 18px: 56×36 icon pill (active = grape fill) over an 11px 700 label.
- **Desktop sidebar:** 208px, `--color-surface`, padding 28px 16px. "MealQuest" wordmark (Bagel Fat One 28px, grape). Items: pill rows 12px 16px, gap 12px, Figtree 700 15px; active = grape fill + on-accent text. Footer card "Our kitchen / Shared household" with 36px teal avatar.
### Routes
| Route | Screen | Mock id |
|---|---|---|
| `/` | Home | 1g |
| `/onboarding` | Add regular dinners (step 2 of 3 shown) | 1h |
| `/plan` | Weekly plan (draft board) | **1f** (mobile), 2c (tablet), 2d (desktop) |
| `/plan/shopping` | Shopping list | 1l, 2b, 2f |
| `/plan/shopping/archive` | Supply archive | 1m, 2f (right panel) |
| `/discover` | Swipe suggestions | **1a** |
| `/quick` | Quick dinners (tabs) | 1j |
| `/cook-from-pantry` | Cook from what I have | 1i |
| `/dinner/:id` | Recipe / dinner detail | 1k, 2a (tablet reading mode) |
| `/settings` | Settings home | 1p |
| `/settings/notifications` | Notifications & Google Chat | 1n |
| `/settings/ai` | Admin · AI assistant | 1o |
Desktop settings (2e) shows Notifications, Google Chat webhook and AI assistant on one page (two columns).
**Chosen mobile directions:** Discover = **1a** (card stack), Plan = **1f** (draft board). Mocks 1b, 1c, 1d, 1e are rejected alternatives — ignore them.
---
## Screens
All mobile screens: background `--color-bg`; status-bar area 40px; content side padding 20px; bottom nav overlays the last 94px, so scrollable content needs ≥ 100px bottom padding.
### 1g · Home
- Header: "Friday, Oct 2" (12px 700 neutral-700) over title "Tonight's quest". Right: 40px round bell button (surface) with 8px grape unread dot.
- Tonight card (surface, radius 32): 150px photo inset 10px, then dinner name (Bagel 22px), meta "Regular · 40 min", right-aligned dark pill button "Recipe" (`--color-text` bg, `--color-bg` text).
- Two 104px tiles, 2-col grid gap 10: **Quick dinner** (grape fill, zap icon, on-accent text) → `/quick`; **Cook from what I have** (teal-300 fill, teal-900 text, search icon) → `/cook-from-pantry`.
- Status rows (neutral-100, radius 20, 12px 14px): "10 new side quests to swipe" → Discover; "Shopping list ready · Oct 5–11" → Shopping. Icon in grape-700, chevron right.
### 1h · Onboarding — regular dinners
3 progress bars (6px pills, filled = grape). "Step 2 of 3" kicker, title "What's on your usual rotation?" (30px), helper "Add the dinners your household makes on repeat. MealQuest builds suggestions from these." Input pill (48px, surface) with 36px grape "+" button. "Your regulars · N": chips teal-200/teal-900 with "×". "Common picks": dashed-outline chips "+ Chili" etc. Fixed bottom primary button "Next: notifications" (52px).
### 1a · Discover — swipe (CHOSEN)
- Header: kicker "Discover", title "Side quests"; right pill "Quest log · 6" (teal-200/teal-800).
- Deck area: margin 18px 20px, height 440px, `perspective: 1000px`. Three stacked cards: depth 0 `none`, depth 1 `translateY(8px) scale(.95)`, depth 2 `translateY(16px) scale(.9)`. Top card bg `#f9f4ed`, shadow-lg; depth 1 surface; depth 2 neutral-300. Radius 32.
- Card content: photo 220px inset 10px (radius 24); title (Bagel 24px); difficulty = 3 dots 8px (filled grape, empty neutral-300) + label "Easy/Medium/Hard"; "Why this?" box (teal-100, radius 18, 12px 14px, 13px/1.45) — e.g. "You make Chicken stir-fry and Beef tacos most weeks. Same flavors, sweet-savory twist."
- Stamps (hidden until gesture): "Try it!" top-left, rotate −12°, teal; "Pass" top-right, rotate 12°, neutral.
- Actions (centered, gap 28, 22px below deck): 62px round **Pass** (neutral-100, X) and **Try it** (teal-600, heart, on-accent icon), 11px labels below.
### 1f · Plan — draft board (CHOSEN)
- Header: "Oct 5 – 11" (26px) + "Draft" tag (grape-100/800). After pushing, tag becomes "Synced".
- Assistant bubble: 32px grape "Q" avatar + bubble (surface, radius 4 18 18 18): "I mixed 5 of your regulars with 2 from your Quest log. Tap any day to swap it."
- 2-col grid, gap 8, tiles 86px, radius 22, padding 12: day kicker (10px 700 .1em) + dinner (Bagel 15px). Regular = surface; Quest-log pick = teal-300 with "WED · NEW" kicker (teal-900). Swapping state = bg + 2px grape inset ring, kicker "FRI · SWAPPING…", muted name. 8th tile = dashed "+ Rebuild week".
- Primary button "Looks good — push to Calendar" (50px).
- Tapping a tile opens a swap sheet (not mocked; use Quest log + Regulars lists from 2d's right panel as a bottom sheet).
### 1j · Quick dinners
Header with 36px grape zap circle + "Quick dinners". Segmented tabs (surface track, 4px padding; selected = bg + shadow-sm): **Crock pot | 30 min or less**. Helper line per tab ("Prep to table in 30 minutes or less, picked from your tastes." / crock-pot equivalent). Rows (neutral-100, radius 24): 64px round photo, name (Bagel 16px), "25 min · Medium", 36px teal "+" (adds to Quest log). Footer link "↻ Show me more" (grape-700). Nav: Quick active.
### 1i · Cook from what I have
Back button + title. Ingredient chip field (surface, radius 26; chips bg-colored "Chicken thighs ×"; trailing "Add ingredient…"). Segmented "Any time | Quick only" + dark "Find ideas" button. Result cards (neutral-100, radius 24): name + time, teal-800 line "Uses all 5 · missing: 1 lime", buttons "Cook tonight" (grape) and "Add to Quest log" (outline).
### 1k · Recipe detail (mobile) / 2a · Kitchen reading mode (tablet)
Mobile: 250px full-bleed photo with round back button; sheet overlaps by 28px (radius 32 top). Tags (Side quest / Easy / 30 min), title 28px, "Why it was picked" teal box, Ingredients list with qty right-aligned and dividers, sticky bottom "Add to this week" + heart button.
Tablet 2a: header (back, "Saturday, Oct 10 · Side quest", title 36px) with **Keep screen on** toggle (Screen Wake Lock API) and **text size** segmented A/A/A. Two columns `400px | 1fr`: Ingredients card with 22px checkboxes (checked = struck-through, "3 of 9 set out"); Steps list — completed step muted with check, **current step** highlighted (grape-100 bg, 2px grape-300 ring, number circle grape, text 22px), others 18px. "Previous / Next step" buttons bottom-right.
### 1l · Shopping list / 2b tablet / 2f desktop
Kicker "Supply run · Oct 5–11", title "Shopping list", count "19 / 23". Helper "Uncheck anything you already have — it won't be counted." One card per dinner (surface, radius 24): dinner name (Bagel 16px) + day (11px). Items: 20–22px checkbox (checked = grape fill w/ white check = **to buy**; unchecked = 2px neutral-400 outline, struck-through name, "have it" label). Status line: "Sent to Google Chat · Sat 8:00 am" (teal-800, message icon). Tablet/desktop: CSS `column-count: 3` masonry, actions "Archive" (outline) + "Send to Google Chat" (primary).
### 1m · Supply archive (and 2f right panel)
Segmented "Week | Month | Year". Month headings (Bagel 18px). Post cards: kicker "WEEK 41 · OCT 5 – 11", AI-written title e.g. "Tacos, tikka & a salmon finale", meta "7 dinners · 23 items · 4 already on hand", dinner chips. Current week post = grape-100 + grape-300 ring, "· Current". Tapping a post opens the frozen list (read-only).
### 1p · Settings home
Title "Settings". Household banner (teal-100, 44px avatar "K", "Our kitchen / Shared household · changes apply to everyone"). Grouped list cards (surface, radius 26; rows 14px 16px; 38px round icon; chevron):
- HOUSEHOLD: Regular dinners ("7 on rotation"), Google Calendar ("Connected · Dinners calendar").
- ALERTS: Notifications & Google Chat.
- ADMIN: AI assistant ("Anthropic · Claude Sonnet") + "Admin" tag; card has grape-300 inset ring.
### 1n · Notifications & Google Chat
Back + title. Grid `1fr 46px 46px`: Event | PUSH | CHAT with toggles (40×24 pill; ON teal-600, knob right; OFF neutral-300). Events: New weekly plan ready · Shopping list ready · Day-of dinner reminder ("at 4:30 pm", tappable time) · New suggestions to swipe. Google Chat webhook card: mono URL input (ellipsis), "Connected · Dinner Crew space", "Send test" button. Message preview bubble: "MealQuest · preview — This week's plan is ready: Tacos, Bolognese, Tikka masala + 4 more. Open the plan →".
### 1o · Admin · AI assistant
Back + kicker "Settings · Admin" + title "AI assistant". Provider + Model dropdown pills (2-col). API key: masked mono "sk-••••••••3f9a" + "Replace" chip; "Verified · Oct 1" (teal-800). Temperature slider 0–1 step 0.1 (8px track, grape fill, 24px knob with 3px grape ring), labels "Familiar ↔ Adventurous", value right. System prompt textarea (mono 12px, radius 22). Bottom: "Reset" (outline) + "Save changes" (primary). Store API keys server-side only; the client only ever sees the masked tail.
### 2c tablet / 2d desktop · Plan manager
Header: kicker "Week 41", title "Oct 5 – 11", prev/next circles (+ "This week" pill on desktop), actions "Shopping list · 28", "Rebuild week", "Push to Calendar" (primary). Status "Synced to Google Calendar 2 min ago" (teal-800). 7-column grid (`repeat(7, minmax(0,1fr))`, gap 12): day label + card (photo 96–110px, name Bagel 16–17px, time, crock-pot "Start by 12:30 pm" hint, tag Regular/Side quest, swap icon). Side-quest cards teal-200.
Desktop right panel (290px, left divider): segmented "Quest log · 6 | Regulars · 9", helper "Drag a dinner onto a day to swap it in.", draggable rows (48px photo, name, difficulty, 6-dot grip). **Drag state:** source row becomes a dashed ghost at 55% opacity; target day shows dashed 2.5px grape border on grape-100 with "Drop to swap / Replaces Pizza night"; dragged card floats with shadow-lg, rotate −3°. Tablet 2c shows the Quest log as a chip strip under the grid with the same drag behavior.
### 2e · Desktop settings
Title + "Changes apply to everyone in the household." Sub-tabs: Household · Regular dinners · **Notifications & AI**. Left column: Notifications matrix card, Google Chat webhook card. Right column: AI assistant card (same fields as 1o, prompt textarea flexes to fill).
---
## Motion
A working reference is in **`MealQuest Motion.dc.html`** (open in a browser; tap buttons, drag the card, switch tabs, toggle reduced motion). Implement with WAAPI or Framer Motion using these exact values.
### 1. Bottom-nav pill slide
One absolutely positioned grape pill (`top:10px; height:42px`) lives behind the nav items (items are `position:relative; z-index:1`).
1. On tap, record each item's `getBoundingClientRect().left` and the pill's current `left/width`.
2. Commit the new active tab (active item now renders its label, so items reflow).
3. Measure the active item's `offsetLeft/offsetWidth`; set the pill to it and animate **from old → new `left` + `width`, 420ms, `cubic-bezier(.34,1.4,.64,1)`** (slight overshoot).
4. FLIP every nav item: animate `translateX(oldLeft − newLeft) → 0` with the same duration/easing so icons glide instead of jumping.
5. Label fades in: `opacity 0, translateX(-4px) → 1, none`, 220ms ease-out, **120ms delay**.
6. Icon color crossfades (inactive `#c0b6a5` → `--on-accent`) via `transition: color .2s`.
Recompute pill position on resize and after fonts load.
### 2. "Try it" (accept)
Triggered by the Try it button (gesture variant below).
1. Button bump: `scale 1 → .88 → 1.06 → 1`, 300ms ease-out.
2. "Try it!" stamp pops: `opacity 0, rotate(-12deg) scale(1.5) → opacity 1, rotate(-12deg) scale(1)`, 220ms spring, fill forwards.
3. **Wiggle:** card `rotate 0 → -4° → 4° → -3° → 2° → 0`, 420ms ease-in-out (transform-origin center).
4. **Fly off right:** keyframes `translate(0,0) rotate(0)` → at 18% `translate(-14px,4px) rotate(-3deg)` (anticipation) → `translate(150%,-60px) rotate(28deg); opacity 0`. 480ms, `cubic-bezier(.55,0,.8,.4)`, fill forwards.
5. On finish: add dinner to Quest log (optimistic), bump the "Quest log · N" pill (same bump as step 1), advance the deck (see 5).
### 3. "Pass" (decline)
1. Button bump (as above).
2. Set `transform-origin: 0% 50%` (left edge — the card folds over like a page).
3. Card keyframes (720ms total, fill forwards):
- 0%: `rotateY(0deg)` — easing to next frame `cubic-bezier(.45,0,.85,.55)`
- 45%: `rotateY(-80deg)` — easing to next frame `cubic-bezier(.4,0,.9,.6)`
- 100%: `translate(-45%,560px) rotate(-35deg) rotateY(-90deg); opacity 0` (drops and tumbles off left)
4. Shade overlay inside the card (`#201e1d`, inset 0, radius 32): opacity `0 → .4 (45%) → .55`, 720ms — sells the fold.
5. Parent deck container has `perspective: 1000px`.
6. On finish: record the decline (so the AI doesn't re-suggest), advance the deck.
### 4. Swipe gesture (top card only)
- Pointer events with `setPointerCapture`; card has `touch-action: none`.
- While dragging: `transform: translate(dx, dy*0.3) rotate(dx/18 deg)`. "Try it!" stamp opacity = `clamp(dx/100, 0, 1)`; "Pass" stamp opacity = `clamp(-dx/100, 0, 1)`.
- Release with **dx > 110px** → accept: skip the wiggle, fly from the current transform to `translate(150%,-60px) rotate(28deg); opacity 0`, 340ms, same throw easing.
- Release with **dx < −110px** → pass: run the Pass fold, prefixing the first two keyframes with the current drag transform.
- Otherwise snap back to `translate(0,0) rotate(0)`, 420ms `cubic-bezier(.34,1.4,.64,1)`; reset stamps.
- Lock input (`busy`) while any exit animation runs.
### 5. Deck advance
After an exit, cancel the exited card's animations, remove it, and promote the others: depth 1→0 and 2→1 animate from their previous depth transform to the new one, **300ms `cubic-bezier(.2,.8,.2,1)`**. Prefetch suggestions so the deck always has ≥ 3 cards.
### 6. Reduced motion
Respect `prefers-reduced-motion: reduce`: nav pill jumps instantly (no FLIP/overshoot); Try it / Pass become a 200ms opacity fade; no wiggle, fold or deck promotion.
### Other transitions (not prototyped; keep consistent)
- Screen push/pop: 260ms `cubic-bezier(.2,.8,.2,1)`, slide 24px + fade.
- Toggles: knob slides 180ms spring; track color 150ms.
- Checkbox check: scale `.8 → 1` 160ms spring; strike-through fades in 150ms.
- Bottom sheets: rise from 100% → 0, 320ms `cubic-bezier(.2,.8,.2,1)`, scrim fade to 50% neutral-900.
- Buttons: hover = one ramp step darker (`--color-accent-600`… on grape use `#4a2d73` for pressed), pressed `scale(.97)` 100ms. Focus: `outline 2px solid var(--color-accent); outline-offset 2px`.
---
## State & data
### Core entities
```ts
type Difficulty = 'easy' | 'medium' | 'hard';
interface Dinner { id: string; name: string; photoUrl?: string; minutes: number; method: 'stovetop'|'oven'|'crockpot'|'other';
difficulty: Difficulty; ingredients: Ingredient[]; steps: string[]; source: 'regular'|'suggestion'; }
interface Ingredient { name: string; qty?: string; }
interface Suggestion { dinner: Dinner; reason: string; /* "why this?" copy from the LLM, cites regulars */
status: 'pending'|'accepted'|'declined'; }
interface WeekPlan { weekStart: string /* ISO Monday */; days: { date: string; dinnerId: string; isNew: boolean }[];
status: 'draft'|'synced'; calendarSyncedAt?: string; }
interface ShoppingList { weekStart: string; groups: { dinnerId: string; day: string;
items: { name: string; qty?: string; needed: boolean /* false = "have it" */ }[] }[];
sentToChatAt?: string; title: string /* blog post title, AI-generated */; }
interface Settings { notifications: Record<'planReady'|'listReady'|'dayOfReminder'|'newSuggestions', { push: boolean; chat: boolean }>;
reminderTime: string; chatWebhookUrl?: string; calendarId?: string;
ai: { provider: string; model: string; temperature: number; systemPrompt: string; apiKeyLast4?: string; keyVerifiedAt?: string }; }
```
`isQuick(d) = d.method === 'crockpot' || d.minutes <= 30` (prep-to-table).
### Client state
- `activeTab` (nav), deck `{ queue: Suggestion[], busy: boolean, drag?: {x,y,dx} }`, `questLogCount`.
- Plan: `selectedDay` for swap sheet, drag-and-drop source/target on tablet/desktop.
- Shopping list item toggles are optimistic and persisted per week; once the week ends, the list is frozen into the archive.
### Integration points (backend — out of scope, but the UI depends on them)
- **LLM** — suggestion generation, week drafting, ingredient-based ideas, quick ideas, archive post titles. Uses Admin settings. Never expose the API key to the client.
- **Google Calendar** — OAuth once (Settings → Google Calendar); "Push to Calendar" creates/updates one event per dinner (one-way).
- **Google Chat** — server POSTs to the stored incoming-webhook URL for enabled events; "Send test" posts a sample.
- **Web Push** — VAPID; request permission during onboarding step 3 ("notifications"), not on first load. iOS requires the PWA to be installed to the home screen — show an install hint.
- **PWA** — manifest (`name: MealQuest`, `theme_color: #5a358c`, `background_color: #f9f6f1`, `display: standalone`), offline cache for the current plan, shopping list and recipes (kitchen use).
### Empty / loading / error states (not mocked — follow the system)
- Deck empty: Bagel title "All caught up", body "New side quests arrive Sunday." + "Get more now" primary.
- Loading: pill-shaped skeletons in `--color-surface` with a slow 1.2s opacity pulse.
- Errors: inline teal/grape-toned banner (neutral-100 card, grape-700 text) with a retry button; webhook test failure shows the HTTP status under the URL field.
## Accessibility
- Swipe is never the only path: Pass / Try it buttons always present; also support ← / → keys on Discover.
- All text ≥ 4.5:1 (on-accent on grape ≈ 9:1). Hit targets ≥ 44px (nav items are 42px tall inside a 62px bar — keep the full bar height tappable).
- Toggles are `role="switch"`; checkboxes native inputs styled; nav items `aria-current="page"`.
## Assets
- Fonts: Bagel Fat One, Figtree (Google Fonts).
- Icons: Lucide.
- Photos: placeholders only — supply real dinner photos and apply the washed treatment.
- Base system: Organic design system (`_ds/.../styles.css`), overridden by `tokens.css`.
## Files
- `README.md` — this document.
- `tokens.css` — final design tokens (use these).
- `MealQuest Mockups v2.dc.html` — all screens. Section 2 = tablet & desktop (2a–2f); section 1 = mobile (1a–1p). Chosen mobile directions are badged "Chosen".
- `MealQuest Motion.dc.html` — interactive motion reference (nav pill, Try it, Pass, swipe).
- `screenshots/` — PNG of every chosen screen: `mobile-1a…1p-*.png` (720×1520, 2× of a 360×760 phone), `tablet-2a…2c-*.png` (1180×820), `desktop-2d…2f-*.png` (1440×900). Rejected mobile alternatives (1b–1e) are not included. Note: the static screenshot of 1a doesn't show the two stacked cards behind the top card; see Motion → deck depth transforms.
- `support.js`, `_ds/organic-…/styles.css` — needed only to open the HTML references locally (serve the folder over a local web server, e.g. `npx serve`).
@@ -0,0 +1,257 @@
/* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;600;700&display=swap');
:root {
--color-bg: #f5ead8;
--color-surface: #ebddc5;
--color-text: #201e1d;
--color-accent: #c67139;
--color-accent-2: #7a8a5e;
--color-divider: color-mix(in srgb, #201e1d 16%, transparent);
/* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
same step of any role matches the others in visual value. */
--color-neutral-100: #f9f4ed;
--color-neutral-200: #eee7db;
--color-neutral-300: #dcd3c4;
--color-neutral-400: #c0b6a5;
--color-neutral-500: #a19786;
--color-neutral-600: #82796a;
--color-neutral-700: #645c50;
--color-neutral-800: #474238;
--color-neutral-900: #2e2b25;
--color-accent-100: #fff2eb;
--color-accent-200: #ffe1d0;
--color-accent-300: #ffc6a5;
--color-accent-400: #f6a06b;
--color-accent-500: #d67f48;
--color-accent-600: #b2622d;
--color-accent-700: #8c491a;
--color-accent-800: #643312;
--color-accent-900: #402310;
--color-accent-2-100: #f0fae1;
--color-accent-2-200: #e1eecc;
--color-accent-2-300: #ccdbb2;
--color-accent-2-400: #aebf92;
--color-accent-2-500: #8fa073;
--color-accent-2-600: #728157;
--color-accent-2-700: #56633f;
--color-accent-2-800: #3d472b;
--color-accent-2-900: #272e1b;
--font-heading: "Caprasimo", system-ui, sans-serif;
--font-heading-weight: 400;
--font-body: "Figtree", system-ui, sans-serif;
--space-1: 4.4px;
--space-2: 8.8px;
--space-3: 13.2px;
--space-4: 17.6px;
--space-6: 26.4px;
--space-8: 35.2px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;
/* Elevation — derived from the ground: soft ink-tinted shadows on a
light theme, a hairline edge + ambient darkness on a dark one. */
--shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
--shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
--shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}
/* ══════════════════════════════════════════════════════════════════════════
Components — built with the tokens above. Plain CSS
on plain HTML: no JavaScript, no build step. Each class is documented in
readme.md and demonstrated in foundations/ and components/.
══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
font-size: 11px; margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
/* — rules — */
.hr {
height: 1px; border: 0; margin: var(--space-4) 0;
background: var(--color-divider);
}
/* — buttons — */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; text-decoration: none;
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
the pair sits side by side in sign-up rows */
background: transparent; border: 1px solid transparent;
padding: var(--space-2) calc(var(--space-3) * 1.2);
border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
/* — forms — */
.field > label {
display: block; font-size: 12px; margin-bottom: 5px;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
background: var(--color-surface);
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
width: 16px; height: 16px; flex: none; border-radius: 50%;
border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
border-color: var(--color-accent); background: var(--color-accent);
box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
display: inline-flex; overflow: hidden;
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* — cards — */
.card {
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
display: flex; align-items: center; gap: 6px; font-size: 11px;
color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
/* — tags — */
.tag {
display: inline-flex; align-items: center; font-size: 11px;
letter-spacing: 0.02em; padding: 3px 10px;
border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* — navigation — */
.nav {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: none;
}
.nav-brand {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 60%, transparent);
padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
padding: var(--space-2);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* — dialog — */
.dialog-backdrop {
position: fixed; inset: 0; display: grid; place-items: center;
padding: var(--space-4);
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-4); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
/* — rounded frame: everything softens, small controls go pill — */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }
Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

File diff suppressed because it is too large Load Diff
@@ -0,0 +1,76 @@
/* MealQuest design tokens — final palette "B4: Grape + teal blue on off-white".
Built on the Organic design system (styles.css in this bundle); these values OVERRIDE its defaults. */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Figtree:wght@400;600;700&display=swap');
:root {
/* Ground + ink */
--color-bg: #f9f6f1; /* oklch(0.975 0.008 85) — page / phone background */
--color-surface: #eee9de; /* oklch(0.935 0.016 85) — cards, rows, inputs */
--color-text: #201e1d;
--color-divider: color-mix(in srgb, #201e1d 16%, transparent);
--on-accent: #f9f6f1; /* text/icons on --color-accent fills (never dark text on grape) */
/* Primary accent — Grape (hue 300) */
--color-accent: #5a358c; /* oklch(0.42 0.14 300) */
--color-accent-100: #f8f1ff;
--color-accent-200: #eedfff;
--color-accent-300: #dac3ff;
--color-accent-400: #c1a1f9;
--color-accent-500: #a47ee1;
--color-accent-600: #865fc0;
--color-accent-700: #68449b; /* accent-colored small text on light grounds */
--color-accent-800: #4a2d73;
--color-accent-900: #2d1a49;
/* Second accent — Teal blue (hue 215) */
--color-accent-2: #29889c; /* oklch(0.58 0.09 215) */
--color-accent-2-100: #e0fbff;
--color-accent-2-200: #bbf3ff;
--color-accent-2-300: #88e0f6;
--color-accent-2-400: #3fc7e4;
--color-accent-2-500: #00a9ca;
--color-accent-2-600: #008aaa; /* toggles ON, "Try it" button, + buttons */
--color-accent-2-700: #006b88;
--color-accent-2-800: #004c63; /* teal text on teal-100/200 fills */
--color-accent-2-900: #002f3e;
/* Neutrals (unchanged from Organic) */
--color-neutral-100: #f9f4ed;
--color-neutral-200: #eee7db;
--color-neutral-300: #dcd3c4;
--color-neutral-400: #c0b6a5;
--color-neutral-500: #a19786;
--color-neutral-600: #82796a;
--color-neutral-700: #645c50;
--color-neutral-800: #474238;
--color-neutral-900: #2e2b25;
/* Type */
--font-heading: "Bagel Fat One", system-ui, sans-serif; /* weight 400 only */
--font-body: "Figtree", system-ui, sans-serif; /* 400 / 600 / 700 */
--font-mono: ui-monospace, Menlo, monospace;
/* Radii */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;
--radius-card: 32px; /* mobile hero cards */
--radius-pill: 999px; /* buttons, inputs, tags, nav */
/* Spacing (Organic, density 1.1) */
--space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px;
/* Elevation */
--shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
--shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
--shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
/* Motion */
--ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* nav pill, snap-back, bumps */
--ease-out-soft: cubic-bezier(.2, .8, .2, 1); /* card promotion */
--ease-throw: cubic-bezier(.55, 0, .8, .4); /* fly-off right */
}
@media (prefers-reduced-motion: reduce) {
:root { --motion-scale: 0; }
}