Maniacs_Mansion/NestQuest-UI-Design
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: Maniacs_Mansion/NestQuest-UI-Design:main
Branches Tags
Maniacs_Mansion/NestQuest-UI-Design:main Maniacs_Mansion/NestQuest-UI-Design:pages Maniacs_Mansion/NestQuest-UI-Design:design/update-sunday-first
..
pull from: Maniacs_Mansion/NestQuest-UI-Design:design/update-sunday-first
Branches Tags
Maniacs_Mansion/NestQuest-UI-Design:pages Maniacs_Mansion/NestQuest-UI-Design:design/update-sunday-first Maniacs_Mansion/NestQuest-UI-Design:main
6 Commits
main .. design/update-sunday-first
Author SHA1 Message Date
orchestrator-agent 334aae5a1e design: Sunday-first Schedule week, multi-pattern presence, task Start date 
Schedule (1f): the weekday header is S M T W T F S, the month grid is padded
for Sunday-first (Sep 2026 starts Tuesday), the anchor reads "Sunday, Sep 6",
and the single "Presence pattern" card becomes a multi-pattern "Presence
patterns" list (one child shown with two patterns) with an Add affordance.

Tasks (1e): the edit sheet gains a Start date field between Due time and Window.

Regenerates admin-1e-tasks and admin-1f-schedule (img/ and
design/examples/img/). The design-doc HTML (index.html and NestQuest Mockups.dc.html)
is edited in place; the doc's icon set has no plain "calendar", so the Start
date field is a plain value box.
 2026-09-25 11:34:02 -04:00
Joshua King 9ed33142a6 fixed pages 2026-09-25 10:23:21 -04:00
overseer 77c9e77eb9 Update README.md 2026-09-25 10:03:24 -04:00
overseer 749c98ff7d Update README.md 2026-09-25 08:08:28 -04:00
overseer 38f5d6b907 Update README.md 2026-09-25 08:06:45 -04:00
Joshua King 52064bbc21 updates 2026-09-25 07:56:16 -04:00
53 changed files with 7505 additions and 375 deletions
Expand all files Collapse all files
.DS_Store
Vendored
BIN
View File
Binary file not shown.
NestQuest Mockups.dc.html
+673
View File
@@ -0,0 +1,673 @@
<!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>
<template id="__bundler_thumbnail"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#3B3AB8"/><text x="50" y="64" text-anchor="middle" font-family="Georgia,serif" font-size="44" font-weight="700" fill="#fff">N</text></svg></template>
<x-dc>
<helmet data-dc-atomics><meta name="design_doc_mode" content="canvas">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/fonts.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/colors.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/typography.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/spacing.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cinzel+Decorative:wght@400;700;900&display=swap">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<script src="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_ds_bundle.js"></script>
<style>
body{margin:0;background:#f0eee9;font-family:Nunito,system-ui,sans-serif}
a{color:#3B3AB8}a:hover{color:#A035CC}
.dv-turn{padding:40px 44px 32px;border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:16px}
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 20px}
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#1a1a1a;color:#fff;border-radius:4px;text-decoration:none}
.dv-tname{font:600 13px/1.2 Nunito,system-ui,sans-serif;color:#1a1a1a}
.dv-opts{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.dv-opt{flex:none;display:flex;flex-direction:column;gap:9px;scroll-margin-top:16px}
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(0,0,0,.08);color:#1a1a1a;border-radius:5px;text-decoration:none}
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:400 11px/1.3 Nunito,system-ui,sans-serif;color:rgba(0,0,0,.55)}
.dv-card{max-width:100%;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden}
.dv-opt:target .dv-oid{background:#2a78d6;color:#fff}
.dv-next{margin:22px 0 0;font:12px/1.5 Nunito,system-ui,sans-serif;color:rgba(0,0,0,.5)}
</style></helmet>
<section class="dv-turn" id="t1">
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Kids' DAKOS wall panel — 1920×1080, full tabletop</span></div>
<div class="dv-opts">
<div class="dv-opt" id="1a"><div class="dv-olabel"><a class="dv-oid" href="#1a">1a</a>Attract state — The Party</div>
<div class="dv-card" data-screen-label="Panel: The Party">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),repeating-linear-gradient(2deg,rgba(150,115,70,.04) 0 3px,transparent 3px 7px),linear-gradient(#f0e4c7,#ddcca3);box-shadow:inset 0 0 200px rgba(80,52,20,.35)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none"></div>
<div style="position:absolute;inset:36px;border:1px solid rgba(92,62,26,.28);border-radius:8px;pointer-events:none"></div>
<div style="position:absolute;top:64px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px">
<div style="display:flex;align-items:center;gap:22px">
<div style="width:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(92,62,26,.6))"></div>
<img src="design/assets/nestquest-mark.png" alt="" style="height:124px;width:auto;display:block;filter:drop-shadow(0 3px 0 rgba(92,62,26,.18))">
<img src="design/assets/nestquest-wordmark.png" alt="NestQuest" style="height:78px;width:auto;display:block;filter:drop-shadow(0 3px 0 rgba(92,62,26,.18))">
<div style="width:64px;height:1px;background:linear-gradient(90deg,rgba(92,62,26,.6),transparent)"></div>
</div>
<div style="font:600 21px/1 Cinzel,serif;letter-spacing:.3em;text-transform:uppercase;color:#6b5433">The Party · Monday, September 14</div>
</div>
<div style="position:absolute;top:262px;left:110px;right:110px;display:grid;grid-template-columns:repeat(3,1fr);gap:56px">
<div style="display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 6px 0 rgba(92,62,26,.18),inset 0 2px 0 rgba(255,255,255,.7)">
<div style="width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22)">
<div style="font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">D</div></div>
<div style="font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14">Declan</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:#e8f4ea;border:1px solid rgba(22,120,60,.35)">
<i data-lucide="check-circle" style="width:22px;height:22px;color:#157a3c"></i>
<span style="font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#146b36">Home today</span></div>
<div style="font:700 26px/1 Nunito;color:#6b5433">3 of 7 quests claimed</div>
<div style="width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.18);overflow:hidden;border:1px solid rgba(92,62,26,.25)">
<div style="width:43%;height:100%;background:linear-gradient(90deg,#4a49a8,#8b3fae)"></div></div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 6px 0 rgba(92,62,26,.18),inset 0 2px 0 rgba(255,255,255,.7)">
<div style="width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22)">
<div style="font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">J</div></div>
<div style="font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14">Jordyn</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:#e8f4ea;border:1px solid rgba(22,120,60,.35)">
<i data-lucide="check-circle" style="width:22px;height:22px;color:#157a3c"></i>
<span style="font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#146b36">Home today</span></div>
<div style="font:700 26px/1 Nunito;color:#6b5433">5 of 5 quests claimed</div>
<div style="width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.18);overflow:hidden;border:1px solid rgba(92,62,26,.25)">
<div style="width:100%;height:100%;background:linear-gradient(90deg,#4a49a8,#8b3fae)"></div></div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#f2ecdd,#e6dcc6);border:2px dashed rgba(92,62,26,.34);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)">
<div style="width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#6b6b7a,#7a7286);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.18)">
<div style="font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">C</div></div>
<div style="font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#4d4433">Chloe</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:rgba(92,62,26,.1);border:1px solid rgba(92,62,26,.3)">
<i data-lucide="tent" style="width:22px;height:22px;color:#6b5433"></i>
<span style="font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#6b5433">On travels</span></div>
<div style="font:700 26px/1 Nunito;color:#5c452a">Returns Sunday, Sep 21</div>
<div style="width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.12);border:1px solid rgba(92,62,26,.2)"></div>
</div>
</div>
<div style="position:absolute;bottom:150px;left:0;right:0;text-align:center;font:600 27px/1 Nunito;color:#5c452a">Tap your crest to open your Quest Log</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)">
<i data-lucide="cloud-sun" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">64°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Partly cloudy · high 71° · low 52°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Rain moving in after 6 PM</span>
</div>
</div>
</div></div>
<div class="dv-opt" id="1b"><div class="dv-olabel"><a class="dv-oid" href="#1b">1b</a>Declan's Quest Log — mid-day</div>
<div class="dv-card" data-screen-label="Panel: Quest Log">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),linear-gradient(#f0e4c7,#ddcca3);box-shadow:inset 0 0 200px rgba(80,52,20,.35)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none"></div>
<div style="position:absolute;top:56px;left:62px;right:62px;display:flex;align-items:center;gap:30px">
<div style="width:96px;height:110px;flex:none;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;justify-content:center;padding-top:14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.22)">
<div style="font:700 44px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">D</div></div>
<div style="flex:1;min-width:0">
<div style="font:700 56px/1.08 'Cinzel Decorative',Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Declan's Quest Log</div>
<div style="margin-top:10px;font:600 20px/1 Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:#6b5433">Monday, September 14 · 3 of 7 claimed</div>
</div>
<div style="flex:none;display:flex;align-items:center;gap:18px;padding:18px 30px;border-radius:14px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 4px 0 rgba(92,62,26,.16)">
<div style="width:44px;height:44px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:grid;place-items:center;color:#fff;font:700 19px Cinzel,serif">4</div>
<div><div style="font:700 28px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14">4 quests left</div>
<div style="font:600 22px/1.2 Nunito;color:#5c452a">Party progress · 8 of 12 today</div></div>
</div>
</div>
<div style="position:absolute;top:236px;left:62px;right:62px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px">
<div style="display:flex;flex-direction:column;gap:24px">
<div style="display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)">
<i data-lucide="sunrise" style="width:34px;height:34px;color:#6b5433"></i>
<div style="flex:1"><div style="font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14">Morning</div>
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Until 11:59 AM</div></div>
<div style="font:700 26px/1 Cinzel,serif;color:#5c452a">3/4</div>
</div>
<div style="position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)"><i data-lucide="scissors" style="width:34px;height:34px;color:#7a6242"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through">Brush hair</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Claimed 7:12 AM</div></div>
<div style="position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(-9deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center">
<i data-lucide="check" style="width:38px;height:38px;color:rgba(255,235,235,.95)"></i></div>
</div>
<div style="position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)"><i data-lucide="smile" style="width:34px;height:34px;color:#7a6242"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through">Brush teeth</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Claimed 7:15 AM</div></div>
<div style="position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(6deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center">
<i data-lucide="check" style="width:38px;height:38px;color:rgba(255,235,235,.95)"></i></div>
</div>
<div style="position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)"><i data-lucide="spray-can" style="width:34px;height:34px;color:#7a6242"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through">Put on deodorant</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Claimed 7:16 AM</div></div>
<div style="position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(-4deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center">
<i data-lucide="check" style="width:38px;height:38px;color:rgba(255,235,235,.95)"></i></div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="bird" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Fill bird feeder</div>
<div style="font:700 22px/1.3 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#8f1526">Overdue · due 9:00 AM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:24px">
<div style="display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)">
<i data-lucide="sun" style="width:34px;height:34px;color:#6b5433"></i>
<div style="flex:1"><div style="font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14">Afternoon</div>
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">12:00 – 5:00 PM</div></div>
<div style="font:700 26px/1 Cinzel,serif;color:#5c452a">0/1</div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="dog" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Clean dog poop</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 5:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
<div style="margin-top:6px;padding:26px 24px;border-radius:12px;border:1px dashed rgba(92,62,26,.32);background:rgba(255,255,255,.24)">
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Party roll-up</div>
<div style="margin-top:10px;font:600 23px/1.45 Nunito;color:#6b5433">Jordyn has finished her log. Chloe is on travels until Sunday.</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:24px">
<div style="display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)">
<i data-lucide="moon" style="width:34px;height:34px;color:#6b5433"></i>
<div style="flex:1"><div style="font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14">Evening</div>
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">5:00 – 9:00 PM</div></div>
<div style="font:700 26px/1 Cinzel,serif;color:#5c452a">0/3</div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="smile" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Brush teeth</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 9:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="cat" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Stack cat food</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 8:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="droplets" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Fill cat fountains</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 8:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
</div>
</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)">
<i data-lucide="cloud-sun" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">64°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Partly cloudy · high 71° · low 52°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Rain moving in after 6 PM</span>
</div>
</div>
</div></div>
<div class="dv-opt" id="1c"><div class="dv-olabel"><a class="dv-oid" href="#1c">1c</a>Quest complete — all sealed</div>
<div class="dv-card" data-screen-label="Panel: Quest complete">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 26%,rgba(255,255,255,.7),transparent 52%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.3),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),linear-gradient(#f2e7cc,#dccca2);box-shadow:inset 0 0 220px rgba(80,52,20,.4)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none"></div>
<div style="position:absolute;inset:36px;border:1px solid rgba(92,62,26,.28);border-radius:8px;pointer-events:none"></div>
<div style="position:absolute;top:96px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:34px">
<div style="width:168px;height:168px;border-radius:50%;transform:rotate(-6deg);background:radial-gradient(circle at 35% 28%,#a8283a,#661020);box-shadow:0 10px 24px rgba(60,10,20,.42),inset 0 0 0 7px rgba(255,255,255,.15);display:grid;place-items:center">
<i data-lucide="check" style="width:86px;height:86px;color:rgba(255,238,238,.95)"></i></div>
<div style="font:900 86px/1 'Cinzel Decorative',Cinzel,serif;letter-spacing:.01em;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));-webkit-background-clip:text;background-clip:text;color:transparent">Quest complete</div>
<div style="font:600 34px/1.4 Nunito;color:#6b5433;max-width:1000px;text-align:center;text-wrap:pretty">Declan cleared all 7 quests for Monday, September 14. Every seal set before the evening bell.</div>
</div>
<div style="position:absolute;top:540px;left:200px;right:200px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px">
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">7</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Quests claimed</div></div>
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">6</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">On time</div></div>
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">1</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Late</div></div>
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">12/12</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">The Party</div></div>
</div>
<div style="position:absolute;bottom:174px;left:0;right:0;text-align:center;font:600 25px/1 Nunito;color:#5c452a">Returning to The Party in 12 seconds</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)">
<i data-lucide="cloud-moon" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">58°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Light rain · low 52°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Clearing by morning</span>
</div>
</div>
</div></div>
<div class="dv-opt" id="1j"><div class="dv-olabel"><a class="dv-oid" href="#1j">1j</a>Confirm step — no undo for kids</div>
<div class="dv-card" data-screen-label="Panel: Confirm">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),linear-gradient(#f0e4c7,#ddcca3)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px"></div>
<div style="position:absolute;inset:0;background:rgba(30,20,10,.62)"></div>
<div style="position:absolute;top:196px;left:460px;width:1000px;padding:64px 68px 56px;border-radius:20px;background:radial-gradient(ellipse at 30% 10%,rgba(255,255,255,.6),transparent 60%),linear-gradient(#f7ecd2,#e6d7b2);border:3px solid rgba(92,62,26,.5);box-shadow:0 26px 60px rgba(20,10,0,.5),inset 0 2px 0 rgba(255,255,255,.7)">
<div style="display:flex;align-items:center;gap:26px">
<div style="width:104px;height:104px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple))"><i data-lucide="dog" style="width:56px;height:56px;color:#fff"></i></div>
<div style="min-width:0"><div style="font:600 21px/1 Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:#5c452a">Afternoon quest</div>
<div style="margin-top:12px;font:700 58px/1.05 'Cinzel Decorative',Cinzel,serif;color:#2b1f14">Clean dog poop</div></div>
</div>
<div style="margin-top:40px;font:600 32px/1.45 Nunito;color:#3f2f1c;text-wrap:pretty">Mark this quest complete? Once the seal is set, only a parent can undo it.</div>
<div style="margin-top:44px;display:flex;gap:24px">
<div style="flex:1;height:108px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:12px;background:rgba(92,62,26,.1);border:2px solid rgba(92,62,26,.45)"><i data-lucide="x" style="width:34px;height:34px;color:#3f2f1c"></i><span style="font:700 30px/1 Cinzel,serif;letter-spacing:.06em;color:#3f2f1c">Not yet</span></div>
<div style="flex:2;height:108px;display:flex;align-items:center;justify-content:center;gap:16px;border-radius:12px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 5px 0 rgba(40,20,60,.4)"><i data-lucide="check" style="width:38px;height:38px;color:#fff"></i><span style="font:700 32px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.94);display:flex;align-items:center;justify-content:center;gap:26px">
<i data-lucide="cloud-sun" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">64°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Partly cloudy · high 71° · low 52°</span>
</div>
</div>
</div></div>
</div>
<div class="dv-thd" style="margin:46px 0 20px"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Parent admin — 390×844 phone, plain words, compact density</span></div>
<div class="dv-opts">
<div class="dv-opt" id="1d"><div class="dv-olabel"><a class="dv-oid" href="#1d">1d</a>Today overview</div>
<div class="dv-card" data-screen-label="Admin: Today (compact)">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 14px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between">
<div style="display:flex;align-items:center;gap:12px;min-width:0"><img src="design/assets/nestquest-mark.png" alt="NestQuest" style="width:40px;height:auto;flex:none;display:block">
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Today</div>
<div style="font:600 12px/1.4 Nunito;color:#52525E">Monday, September 14 · cycle day 3 of 14</div></div></div>
<div style="width:36px;height:36px;border-radius:8px;background:#F4F4F6;display:grid;place-items:center"><i data-lucide="settings" style="width:19px;height:19px;color:#52525E"></i></div></div>
<div style="padding:14px 16px 92px;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;gap:8px">
<div style="flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 22px/1 Nunito;color:var(--brand-blue)">8</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Done</div></div>
<div style="flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 22px/1 Nunito;color:#18181D">4</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Remaining</div></div>
<div style="flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 22px/1 Nunito;color:#DC2626">1</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Overdue</div></div>
</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1">
<div style="width:30px;height:30px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 13px Nunito;color:#fff">D</div>
<div style="flex:1;min-width:0"><div style="font:700 14px/1.2 Nunito;color:#18181D">Declan</div><div style="font:600 11px/1.3 Nunito;color:#52525E">3 of 7 · 1 overdue</div></div>
<div style="width:82px;height:6px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:43%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1">
<div style="width:30px;height:30px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 13px Nunito;color:#fff">J</div>
<div style="flex:1;min-width:0"><div style="font:700 14px/1.2 Nunito;color:#18181D">Jordyn</div><div style="font:600 11px/1.3 Nunito;color:#15803D">5 of 5 · all done</div></div>
<div style="width:82px;height:6px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:100%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px">
<div style="width:30px;height:30px;flex:none;border-radius:7px;background:#9898A8;display:grid;place-items:center;font:800 13px Nunito;color:#fff">C</div>
<div style="flex:1;min-width:0"><div style="font:700 14px/1.2 Nunito;color:#52525E">Chloe</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Away · returns Sep 21</div></div>
<span style="font:600 10px/1 Nunito;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:9999px;background:#F4F4F6;color:#3C3C46;border:1px solid #E4E4EA">override</span>
</div>
</div>
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-top:4px">Needs attention</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1">
<i data-lucide="bird" style="width:18px;height:18px;color:#52525E"></i>
<div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Fill bird feeder · Declan</div><div style="font:600 11px/1.3 Nunito;color:#DC2626">Overdue since 9:00 AM</div></div>
<span style="font:700 11px/1 Nunito;color:var(--brand-blue)">Mark done</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px">
<i data-lucide="smile" style="width:18px;height:18px;color:#52525E"></i>
<div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Brush teeth · Jordyn</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Completed 7:04 AM from panel</div></div>
<span style="font:700 11px/1 Nunito;color:var(--brand-purple)">Undo</span></div>
</div>
<div style="display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;background:#DBEAFE;border:1px solid rgba(37,99,235,.3)">
<i data-lucide="info" style="width:16px;height:16px;flex:none;color:#1D4ED8;margin-top:1px"></i>
<div style="font:600 11.5px/1.45 Nunito;color:#1E3A8A">Undo is admin-only. A panel tap can never reverse a completion.</div></div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">History</span></div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1e"><div class="dv-olabel"><a class="dv-oid" href="#1e">1e</a>Task definitions + edit sheet</div>
<div class="dv-card" data-screen-label="Admin: Tasks">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between">
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Tasks</div><div style="font:600 12px/1.4 Nunito;color:#52525E">7 definitions · 3 children</div></div>
<div style="display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple))"><i data-lucide="plus" style="width:15px;height:15px;color:#fff"></i><span style="font:700 13px Nunito;color:#fff">New</span></div></div>
<div style="padding:12px 16px 0;display:flex;gap:7px">
<span style="font:700 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#18181D;color:#fff">All</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Declan</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Jordyn</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Chloe</span>
</div>
<div style="margin:12px 16px;border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="scissors" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Brush hair</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · daily · morning</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="smile" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Brush teeth</div><div style="font:600 11px/1.3 Nunito;color:#52525E">All three · daily · morning + evening</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="spray-can" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Put on deodorant</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · daily · morning</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1;background:#EBEBF8"><i data-lucide="dog" style="width:17px;height:17px;color:var(--brand-blue)"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Clean dog poop</div><div style="font:700 11px/1.3 Nunito;color:var(--brand-blue)">Editing</div></div><i data-lucide="chevron-down" style="width:16px;height:16px;color:var(--brand-blue)"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="bird" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Fill bird feeder</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · every 2 days · afternoon</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="droplets" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Fill cat fountains</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · daily · evening</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px"><i data-lucide="cat" style="width:17px;height:17px;color:#70707E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#52525E">Stack cat food</div><div style="font:600 11px/1.3 Nunito;color:#70707E">Chloe · weekly Sun · inactive</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 -8px 28px rgba(9,9,11,.18);padding:14px 18px 24px">
<div style="width:38px;height:4px;border-radius:9999px;background:#E4E4EA;margin:0 auto 14px"></div>
<div style="font:800 19px/1.2 Nunito;color:#18181D">Clean dog poop</div>
<div style="margin-top:14px;display:flex;flex-direction:column;gap:11px">
<div><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Assigned child</div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA"><span style="font:700 13.5px Nunito;color:#18181D">Declan</span><i data-lucide="chevron-down" style="width:15px;height:15px;color:#52525E"></i></div></div>
<div style="display:flex;gap:9px">
<div style="flex:1"><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Repeats</div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA"><span style="font:700 13.5px Nunito;color:#18181D">Daily</span><i data-lucide="chevron-down" style="width:15px;height:15px;color:#52525E"></i></div></div>
<div style="flex:1"><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Due time</div>
<div style="padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 13.5px Nunito;color:#18181D">5:00 PM</div></div>
</div>
<div><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Start date</div>
<div style="padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 13.5px Nunito;color:#18181D">Sep 14, 2026</div></div>
<div><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Window</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px">
<span style="text-align:center;font:600 12px/1 Nunito;padding:10px 0;border-radius:8px;border:1px solid #E4E4EA;color:#3C3C46">Morning</span>
<span style="text-align:center;font:700 12px/1 Nunito;padding:10px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));color:#fff">Afternoon</span>
<span style="text-align:center;font:600 12px/1 Nunito;padding:10px 0;border-radius:8px;border:1px solid #E4E4EA;color:#3C3C46">Evening</span></div></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;background:#F4F4F6">
<div><div style="font:700 13px/1.2 Nunito;color:#18181D">Skip on away days</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">No instance when the child is absent</div></div>
<div style="width:42px;height:24px;flex:none;border-radius:9999px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));position:relative"><div style="position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff"></div></div></div>
<div style="display:flex;gap:9px;margin-top:2px">
<div style="flex:1;text-align:center;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;font:700 14px Nunito;color:#3C3C46">Cancel</div>
<div style="flex:2;text-align:center;padding:13px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));font:700 14px Nunito;color:#fff">Save changes</div></div>
</div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1f"><div class="dv-olabel"><a class="dv-oid" href="#1f">1f</a>Schedule + custody cycle</div>
<div class="dv-card" data-screen-label="Admin: Schedule">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA">
<div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Schedule</div>
<div style="font:600 12px/1.4 Nunito;color:#52525E">2-week cycle · anchor Sunday, Sep 6</div></div>
<div style="padding:14px 16px 92px;display:flex;flex-direction:column;gap:10px">
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:11px">
<span style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46">September 2026</span>
<div style="display:flex;gap:12px"><i data-lucide="chevron-left" style="width:17px;height:17px;color:#52525E"></i><i data-lucide="chevron-right" style="width:17px;height:17px;color:#52525E"></i></div></div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font:700 10px/1 Nunito;color:#70707E;text-align:center;margin-bottom:6px"><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px">
<div style="aspect-ratio:1"></div><div style="aspect-ratio:1"></div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">1</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">2</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">3</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">4</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">5</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">6</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">7</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">8</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">9</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">10</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">11</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">12</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">13</div>
<div style="aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 12px Nunito;color:#fff">14</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">15</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">16</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">17</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">18</div>
<div style="aspect-ratio:1;border-radius:6px;background:#FEF3C7;display:grid;place-items:center;font:700 12px Nunito;color:#92400E;border:1px solid rgba(217,119,6,.4)">19</div>
<div style="aspect-ratio:1;border-radius:6px;background:#FEF3C7;display:grid;place-items:center;font:700 12px Nunito;color:#92400E;border:1px solid rgba(217,119,6,.4)">20</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">21</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">22</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">23</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">24</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">25</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">26</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">27</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">28</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">29</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">30</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px">
<span style="display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46"><span style="width:11px;height:11px;border-radius:3px;background:#EBEBF8;border:1px solid #CDCDF0"></span>Chloe + Jordyn home</span>
<span style="display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46"><span style="width:11px;height:11px;border-radius:3px;background:#F4F4F6;border:1px solid #E4E4EA"></span>Away week</span>
<span style="display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46"><span style="width:11px;height:11px;border-radius:3px;background:#FEF3C7;border:1px solid rgba(217,119,6,.5)"></span>Override</span>
</div>
</div>
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px"><span style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46">Presence patterns</span><span style="font:700 11.5px Nunito;color:var(--brand-blue)">Add</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1"><span style="font:700 13px Nunito;color:#18181D">Chloe · Custody</span><span style="font:600 12px Nunito;color:#52525E">Away · every 2 weeks</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1"><span style="font:700 13px Nunito;color:#18181D">Chloe · School term</span><span style="font:600 12px Nunito;color:#52525E">Home · every week</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1"><span style="font:700 13px Nunito;color:#18181D">Jordyn · Custody</span><span style="font:600 12px Nunito;color:#52525E">Away · every 2 weeks</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0"><span style="font:700 13px Nunito;color:#18181D">Declan</span><span style="font:600 12px Nunito;color:#52525E">Every day</span></div>
</div>
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px"><span style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46">Overrides</span><span style="font:700 11.5px Nunito;color:var(--brand-blue)">Add</span></div>
<div style="display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #EDEDF1"><i data-lucide="calendar-x" style="width:16px;height:16px;color:#D97706"></i><div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Chloe away · Sep 14 – 20</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Traded week · beats the pattern</div></div><i data-lucide="trash-2" style="width:15px;height:15px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:9px;padding:9px 0"><i data-lucide="calendar-check" style="width:16px;height:16px;color:#15803D"></i><div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Jordyn home · Sep 19 – 20</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Birthday weekend</div></div><i data-lucide="trash-2" style="width:15px;height:15px;color:#70707E"></i></div>
</div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">History</span></div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1g"><div class="dv-olabel"><a class="dv-oid" href="#1g">1g</a>History + CSV export</div>
<div class="dv-card" data-screen-label="Admin: History">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between">
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">History</div><div style="font:600 12px/1.4 Nunito;color:#52525E">Append-only event log · last 14 days</div></div>
<div style="display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#fff"><i data-lucide="download" style="width:15px;height:15px;color:#3C3C46"></i><span style="font:700 12px Nunito;color:#3C3C46">CSV</span></div></div>
<div style="padding:14px 16px 92px;display:flex;flex-direction:column;gap:12px">
<div style="display:flex;gap:8px">
<div style="flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 20px/1 Nunito;color:#18181D">91%</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">On time</div></div>
<div style="flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 20px/1 Nunito;color:#18181D">128</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Completed</div></div>
<div style="flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 20px/1 Nunito;color:#18181D">7</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Missed</div></div>
</div>
<div style="display:flex;gap:7px">
<span style="font:700 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#18181D;color:#fff">All events</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Reversals</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Missed</span>
</div>
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E">Today</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Brush teeth · Jordyn</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · panel (Jordyn) · on time</div></div><span style="font:600 11px Nunito;color:#52525E">7:04 AM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Brush hair · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · panel (Declan) · on time</div></div><span style="font:600 11px Nunito;color:#52525E">7:12 AM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#A035CC"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Stack cat food · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#7D28A0">uncompleted · joshua (admin)</div></div><span style="font:600 11px Nunito;color:#52525E">8:31 AM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#DC2626"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Fill bird feeder · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#B91C1C">missed · nightly sweep</div></div><span style="font:600 11px Nunito;color:#52525E">12:00 AM</span></div>
</div>
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E">Sunday, Sep 13</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Fill cat fountains · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · panel (Declan) · late 22 min</div></div><span style="font:600 11px Nunito;color:#52525E">8:22 PM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Clean dog poop · Jordyn</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · joshua (admin) · on time</div></div><span style="font:600 11px Nunito;color:#52525E">4:48 PM</span></div>
</div>
<div style="display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;background:#F4F4F6;border:1px solid #E4E4EA">
<i data-lucide="lock" style="width:15px;height:15px;flex:none;color:#3C3C46;margin-top:1px"></i>
<div style="font:600 11px/1.45 Nunito;color:#3C3C46">Events are never edited or deleted. A reversal is its own row.</div></div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">History</span></div>
</div>
</div>
</div></div>
</div>
<div class="dv-thd" style="margin:46px 0 20px"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Parent admin — roomy density, same screens for comparison</span></div>
<div class="dv-opts">
<div class="dv-opt" id="1h"><div class="dv-olabel"><a class="dv-oid" href="#1h">1h</a>Today overview · roomy (compare to <a class="dv-oid" href="#1d">1d</a>)</div>
<div class="dv-card" data-screen-label="Admin: Today (roomy)">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:16px 22px 20px;background:#fff;border-bottom:1px solid #E4E4EA">
<div style="font:700 11px/1 Nunito;letter-spacing:.14em;text-transform:uppercase;color:#52525E">Monday, September 14</div>
<div style="margin-top:6px;font:800 32px/1.05 Nunito;letter-spacing:-.02em;color:#18181D">8 of 12 done</div>
<div style="margin-top:12px;height:10px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:67%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
<div style="margin-top:10px;font:600 13px/1.4 Nunito;color:#52525E">1 overdue · cycle day 3 of 14</div>
</div>
<div style="padding:18px 20px 92px;display:flex;flex-direction:column;gap:16px">
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06)">
<div style="display:flex;align-items:center;gap:14px">
<div style="width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 20px Nunito;color:#fff">D</div>
<div style="flex:1;min-width:0"><div style="font:800 19px/1.2 Nunito;color:#18181D">Declan</div><div style="font:600 13px/1.4 Nunito;color:#52525E">Home every day</div></div>
<div style="text-align:right"><div style="font:800 19px/1 Nunito;color:#18181D">3/7</div><div style="font:600 11px/1.3 Nunito;color:#B91C1C">1 overdue</div></div>
</div>
<div style="margin-top:14px;height:8px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:43%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
<div style="margin-top:14px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:8px;background:#FEE2E2">
<div style="min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Fill bird feeder</div><div style="font:600 11.5px/1.3 Nunito;color:#B91C1C">Overdue since 9:00 AM</div></div>
<span style="font:700 12.5px Nunito;color:var(--brand-blue)">Mark done</span></div>
</div>
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06)">
<div style="display:flex;align-items:center;gap:14px">
<div style="width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 20px Nunito;color:#fff">J</div>
<div style="flex:1;min-width:0"><div style="font:800 19px/1.2 Nunito;color:#18181D">Jordyn</div><div style="font:600 13px/1.4 Nunito;color:#52525E">Home this week</div></div>
<div style="text-align:right"><div style="font:800 19px/1 Nunito;color:#18181D">5/5</div><div style="font:600 11px/1.3 Nunito;color:#15803D">All done</div></div>
</div>
<div style="margin-top:14px;height:8px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:100%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
</div>
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;gap:14px">
<div style="width:48px;height:48px;flex:none;border-radius:10px;background:#9898A8;display:grid;place-items:center;font:800 20px Nunito;color:#fff">C</div>
<div style="flex:1;min-width:0"><div style="font:800 19px/1.2 Nunito;color:#3C3C46">Chloe</div><div style="font:600 13px/1.4 Nunito;color:#52525E">Away until Sunday, Sep 21</div></div>
<span style="font:600 10px/1 Nunito;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:9999px;background:#F4F4F6;color:#3C3C46;border:1px solid #E4E4EA">override</span>
</div>
</div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">History</span></div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1i"><div class="dv-olabel"><a class="dv-oid" href="#1i">1i</a>Presence overrides · roomy</div>
<div class="dv-card" data-screen-label="Admin: Presence overrides">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:14px 22px 18px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;gap:12px">
<i data-lucide="chevron-left" style="width:22px;height:22px;color:#3C3C46"></i>
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Presence override</div><div style="font:600 12px/1.4 Nunito;color:#52525E">Beats the custody pattern for these dates</div></div></div>
<div style="padding:18px 20px;display:flex;flex-direction:column;gap:16px">
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:16px">
<div><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Child</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
<span style="text-align:center;font:700 13px/1 Nunito;padding:13px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));color:#fff">Chloe</span>
<span style="text-align:center;font:600 13px/1 Nunito;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46">Jordyn</span>
<span style="text-align:center;font:600 13px/1 Nunito;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46">Declan</span>
</div></div>
<div><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Status for these dates</div>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px">
<span style="text-align:center;font:700 13px/1 Nunito;padding:14px 0;border-radius:8px;background:#18181D;color:#fff">Away</span>
<span style="text-align:center;font:600 13px/1 Nunito;padding:14px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46">Home</span>
</div></div>
<div style="display:flex;gap:10px">
<div style="flex:1"><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">From</div>
<div style="padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 14px Nunito;color:#18181D">Sep 14, 2026</div></div>
<div style="flex:1"><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Through</div>
<div style="padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 14px Nunito;color:#18181D">Sep 20, 2026</div></div>
</div>
<div><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Reason (optional)</div>
<div style="padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:600 14px Nunito;color:#18181D">Traded week</div></div>
</div>
<div style="padding:16px 18px;border-radius:12px;background:#FEF3C7;border:1px solid rgba(217,119,6,.35)">
<div style="display:flex;align-items:flex-start;gap:10px">
<i data-lucide="alert-circle" style="width:17px;height:17px;flex:none;color:#92400E;margin-top:2px"></i>
<div><div style="font:700 13.5px/1.3 Nunito;color:#92400E">This removes 5 upcoming tasks</div>
<div style="margin-top:5px;font:600 12px/1.5 Nunito;color:#78350F">Chloe's instances for Sep 14–20 will not be generated. Completed days are untouched.</div></div>
</div></div>
<div style="display:flex;gap:10px">
<div style="flex:1;text-align:center;padding:15px 0;border-radius:8px;border:1px solid #E4E4EA;background:#fff;font:700 14.5px Nunito;color:#3C3C46">Cancel</div>
<div style="flex:2;text-align:center;padding:15px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));font:700 14.5px Nunito;color:#fff">Save override</div>
</div>
</div>
</div>
</div></div>
</div>
<p class="dv-next">Try: "go compact everywhere" · "make the seals smaller on <a class="dv-oid" href="#1b">1b</a>" · "darker parchment on the panel" · "add the schedule + history screens in roomy too"</p>
</section>
</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
componentDidMount() { this.icons(); }
componentDidUpdate() { this.icons(); }
icons() {
const run = () => { if (window.lucide) window.lucide.createIcons(); else setTimeout(run, 120); };
run();
}
renderVals() { return {}; }
}
</script>
</body>
</html>
NestQuest UI mockups.zip
BIN
View File
Binary file not shown.
NestQuest UI mockups/.DS_Store
Vendored
BIN
View File
Binary file not shown.
NestQuest UI mockups/.thumbnail
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

README.md
+3
View File
@@ -17,3 +17,6 @@ Interactive mockup canvas: [index.html](index.html) (self-contained; works on Gi
| ![Today](img/admin-1d-today.png) | ![Tasks](img/admin-1e-tasks.png) | ![Schedule](img/admin-1f-schedule.png) |
| **History** | **Today (roomy)** | **Presence overrides** |
| ![History](img/admin-1g-history.png) | ![Today roomy](img/admin-1h-today-roomy.png) | ![Presence](img/admin-1i-presence.png) |
## Updates
Setup git pages deploy - Trial run
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_adherence.oxlintrc.json
+503
View File
@@ -0,0 +1,503 @@
{
"plugins": [
"react",
"import"
],
"rules": {
"react/forbid-elements": [
"warn",
{
"forbid": []
}
],
"no-restricted-imports": [
"warn",
{
"patterns": [
{
"group": [
"components/core/**",
"components/product/**",
"ui_kits/storefront/**"
],
"message": "Import design-system components from 'index.js', not component internals."
}
]
}
],
"no-restricted-syntax": [
"warn",
{
"selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
"message": "Raw hex color — use a design-system color token via var()."
},
{
"selector": "Literal[value=/\\b\\d+px\\b/]",
"message": "Raw px value — use a design-system spacing token via var()."
},
{
"selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Nunito|Nunito Fallback))/i]",
"message": "Font not provided by the design system. Available: Nunito, Nunito Fallback."
},
{
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|dot|key|ref|className|style|children)$/]",
"message": "<Badge> doesn't accept that prop. Declared props: children, variant, size, dot."
},
{
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:brand|blue|purple|neutral|success|warning|error|dark|outline)$/]",
"message": "<Badge> variant must be one of 'brand' | 'blue' | 'purple' | 'neutral' | 'success' | 'warning' | 'error' | 'dark' | 'outline'."
},
{
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
"message": "<Badge> size must be one of 'sm' | 'md' | 'lg'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|disabled|fullWidth|icon|iconPosition|onClick|type|href|children|key|ref|className|style|children)$/]",
"message": "<Button> doesn't accept that prop. Declared props: variant, size, disabled, fullWidth, icon, iconPosition, onClick, type, href, children."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:gradient|primary|secondary|outline|ghost|danger)$/]",
"message": "<Button> variant must be one of 'gradient' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg|xl)$/]",
"message": "<Button> size must be one of 'sm' | 'md' | 'lg' | 'xl'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='iconPosition'] > Literal[value!=/^(?:left|right)$/]",
"message": "<Button> iconPosition must be one of 'left' | 'right'."
},
{
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
"message": "<Button> type must be one of 'button' | 'submit' | 'reset'."
},
{
"selector": "JSXOpeningElement[name.name='CategoryCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:image|title|description|ctaLabel|href|align|badge|key|ref|className|style|children)$/]",
"message": "<CategoryCard> doesn't accept that prop. Declared props: image, title, description, ctaLabel, href, align, badge."
},
{
"selector": "JSXOpeningElement[name.name='CategoryCard'] > JSXAttribute[name.name='align'] > Literal[value!=/^(?:left|right)$/]",
"message": "<CategoryCard> align must be one of 'left' | 'right'."
},
{
"selector": "JSXOpeningElement[name.name='ProductCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:image|name|price|originalPrice|badge|category|onAddToCart|onWishlist|wishlisted|href|key|ref|className|style|children)$/]",
"message": "<ProductCard> doesn't accept that prop. Declared props: image, name, price, originalPrice, badge, category, onAddToCart, onWishlist, wishlisted, href."
},
{
"selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|active|onClick|onRemove|color|key|ref|className|style|children)$/]",
"message": "<Tag> doesn't accept that prop. Declared props: children, active, onClick, onRemove, color."
},
{
"selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute[name.name='color'] > Literal[value!=/^(?:default|blue|purple|green|orange)$/]",
"message": "<Tag> color must be one of 'default' | 'blue' | 'purple' | 'green' | 'orange'."
}
]
},
"overrides": [
{
"files": [
"**/index.js"
],
"rules": {
"no-restricted-imports": "off"
}
}
],
"x-omelette": {
"components": {
"Badge": {
"replaces": []
},
"Button": {
"replaces": []
},
"CategoryCard": {
"replaces": []
},
"ProductCard": {
"replaces": []
},
"Tag": {
"replaces": []
}
},
"tokens": [
"--border-brand",
"--border-default",
"--border-strong",
"--border-subtle",
"--brand-blue",
"--brand-gradient",
"--brand-gradient-h",
"--brand-purple",
"--color-accent-100",
"--color-accent-200",
"--color-accent-300",
"--color-accent-400",
"--color-accent-50",
"--color-accent-500",
"--color-accent-600",
"--color-accent-700",
"--color-accent-800",
"--color-accent-900",
"--color-error",
"--color-error-bg",
"--color-info",
"--color-info-bg",
"--color-neutral-0",
"--color-neutral-100",
"--color-neutral-1000",
"--color-neutral-150",
"--color-neutral-200",
"--color-neutral-300",
"--color-neutral-400",
"--color-neutral-50",
"--color-neutral-500",
"--color-neutral-600",
"--color-neutral-700",
"--color-neutral-800",
"--color-neutral-900",
"--color-primary-100",
"--color-primary-200",
"--color-primary-300",
"--color-primary-400",
"--color-primary-50",
"--color-primary-500",
"--color-primary-600",
"--color-primary-700",
"--color-primary-800",
"--color-primary-900",
"--color-success",
"--color-success-bg",
"--color-warning",
"--color-warning-bg",
"--container-2xl",
"--container-lg",
"--container-md",
"--container-sm",
"--container-xl",
"--duration-base",
"--duration-fast",
"--duration-slow",
"--ease-in",
"--ease-in-out",
"--ease-out",
"--ease-spring",
"--font-mono",
"--font-primary",
"--fw-black",
"--fw-bold",
"--fw-extrabold",
"--fw-light",
"--fw-medium",
"--fw-regular",
"--fw-semibold",
"--header-height",
"--lh-loose",
"--lh-normal",
"--lh-relaxed",
"--lh-snug",
"--lh-tight",
"--ls-normal",
"--ls-snug",
"--ls-tight",
"--ls-wide",
"--ls-wider",
"--ls-widest",
"--nav-height",
"--radius-2xl",
"--radius-3xl",
"--radius-brand",
"--radius-full",
"--radius-lg",
"--radius-md",
"--radius-none",
"--radius-sm",
"--radius-xl",
"--radius-xs",
"--shadow-accent",
"--shadow-brand",
"--shadow-lg",
"--shadow-md",
"--shadow-sm",
"--shadow-xl",
"--shadow-xs",
"--space-0",
"--space-0-5",
"--space-1",
"--space-1-5",
"--space-10",
"--space-12",
"--space-14",
"--space-16",
"--space-2",
"--space-20",
"--space-24",
"--space-28",
"--space-3",
"--space-32",
"--space-4",
"--space-40",
"--space-48",
"--space-5",
"--space-6",
"--space-7",
"--space-8",
"--space-px",
"--surface-card",
"--surface-overlay",
"--surface-page",
"--surface-raised",
"--surface-subtle",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-5xl",
"--text-6xl",
"--text-accent",
"--text-base",
"--text-brand",
"--text-inverse",
"--text-lg",
"--text-md",
"--text-muted",
"--text-primary",
"--text-secondary",
"--text-sm",
"--text-xl",
"--text-xs",
"--transition-base",
"--transition-spring",
"--type-body-family",
"--type-body-lg-lh",
"--type-body-lg-size",
"--type-body-lh",
"--type-body-size",
"--type-body-weight",
"--type-btn-ls",
"--type-btn-size",
"--type-btn-weight",
"--type-caption-ls",
"--type-caption-size",
"--type-caption-weight",
"--type-display-family",
"--type-display-lh",
"--type-display-ls",
"--type-display-size",
"--type-display-weight",
"--type-h1-family",
"--type-h1-lh",
"--type-h1-ls",
"--type-h1-size",
"--type-h1-weight",
"--type-h2-lh",
"--type-h2-size",
"--type-h2-weight",
"--type-h3-lh",
"--type-h3-size",
"--type-h3-weight",
"--type-h4-lh",
"--type-h4-size",
"--type-h4-weight",
"--z-base",
"--z-dropdown",
"--z-modal",
"--z-overlay",
"--z-raised",
"--z-sticky",
"--z-toast",
"--z-tooltip"
],
"tokenKinds": {
"--brand-blue": "color",
"--brand-purple": "color",
"--brand-gradient": "color",
"--brand-gradient-h": "color",
"--color-primary-50": "color",
"--color-primary-100": "color",
"--color-primary-200": "color",
"--color-primary-300": "color",
"--color-primary-400": "color",
"--color-primary-500": "color",
"--color-primary-600": "color",
"--color-primary-700": "color",
"--color-primary-800": "color",
"--color-primary-900": "color",
"--color-accent-50": "color",
"--color-accent-100": "color",
"--color-accent-200": "color",
"--color-accent-300": "color",
"--color-accent-400": "color",
"--color-accent-500": "color",
"--color-accent-600": "color",
"--color-accent-700": "color",
"--color-accent-800": "color",
"--color-accent-900": "color",
"--color-neutral-0": "color",
"--color-neutral-50": "color",
"--color-neutral-100": "color",
"--color-neutral-150": "color",
"--color-neutral-200": "color",
"--color-neutral-300": "color",
"--color-neutral-400": "color",
"--color-neutral-500": "color",
"--color-neutral-600": "color",
"--color-neutral-700": "color",
"--color-neutral-800": "color",
"--color-neutral-900": "color",
"--color-neutral-1000": "color",
"--color-success": "color",
"--color-success-bg": "color",
"--color-warning": "color",
"--color-warning-bg": "color",
"--color-error": "color",
"--color-error-bg": "color",
"--color-info": "color",
"--color-info-bg": "color",
"--text-primary": "font",
"--text-secondary": "font",
"--text-muted": "font",
"--text-inverse": "font",
"--text-brand": "font",
"--text-accent": "font",
"--surface-page": "color",
"--surface-subtle": "color",
"--surface-card": "color",
"--surface-raised": "color",
"--surface-overlay": "color",
"--border-subtle": "color",
"--border-default": "color",
"--border-strong": "color",
"--border-brand": "color",
"--font-primary": "font",
"--font-mono": "font",
"--fw-light": "other",
"--fw-regular": "other",
"--fw-medium": "other",
"--fw-semibold": "other",
"--fw-bold": "other",
"--fw-extrabold": "other",
"--fw-black": "other",
"--text-xs": "font",
"--text-sm": "font",
"--text-base": "font",
"--text-md": "font",
"--text-lg": "font",
"--text-xl": "font",
"--text-2xl": "font",
"--text-3xl": "font",
"--text-4xl": "font",
"--text-5xl": "font",
"--text-6xl": "font",
"--lh-tight": "other",
"--lh-snug": "other",
"--lh-normal": "other",
"--lh-relaxed": "other",
"--lh-loose": "other",
"--ls-tight": "other",
"--ls-snug": "other",
"--ls-normal": "other",
"--ls-wide": "other",
"--ls-wider": "other",
"--ls-widest": "other",
"--type-display-family": "font",
"--type-display-weight": "font",
"--type-display-size": "font",
"--type-display-lh": "font",
"--type-display-ls": "font",
"--type-h1-family": "font",
"--type-h1-weight": "font",
"--type-h1-size": "font",
"--type-h1-lh": "font",
"--type-h1-ls": "font",
"--type-h2-weight": "font",
"--type-h2-size": "font",
"--type-h2-lh": "font",
"--type-h3-weight": "font",
"--type-h3-size": "font",
"--type-h3-lh": "font",
"--type-h4-weight": "font",
"--type-h4-size": "font",
"--type-h4-lh": "font",
"--type-body-family": "font",
"--type-body-weight": "font",
"--type-body-size": "font",
"--type-body-lh": "font",
"--type-body-lg-size": "font",
"--type-body-lg-lh": "font",
"--type-caption-weight": "font",
"--type-caption-size": "font",
"--type-caption-ls": "font",
"--type-btn-weight": "font",
"--type-btn-size": "font",
"--type-btn-ls": "font",
"--space-0": "spacing",
"--space-px": "spacing",
"--space-0-5": "spacing",
"--space-1": "spacing",
"--space-1-5": "spacing",
"--space-2": "spacing",
"--space-3": "spacing",
"--space-4": "spacing",
"--space-5": "spacing",
"--space-6": "spacing",
"--space-7": "spacing",
"--space-8": "spacing",
"--space-10": "spacing",
"--space-12": "spacing",
"--space-14": "spacing",
"--space-16": "spacing",
"--space-20": "spacing",
"--space-24": "spacing",
"--space-28": "spacing",
"--space-32": "spacing",
"--space-40": "spacing",
"--space-48": "spacing",
"--radius-none": "radius",
"--radius-xs": "radius",
"--radius-sm": "radius",
"--radius-md": "radius",
"--radius-lg": "radius",
"--radius-xl": "radius",
"--radius-2xl": "radius",
"--radius-3xl": "radius",
"--radius-full": "radius",
"--radius-brand": "radius",
"--shadow-xs": "shadow",
"--shadow-sm": "shadow",
"--shadow-md": "shadow",
"--shadow-lg": "shadow",
"--shadow-xl": "shadow",
"--shadow-brand": "shadow",
"--shadow-accent": "shadow",
"--container-sm": "spacing",
"--container-md": "spacing",
"--container-lg": "spacing",
"--container-xl": "spacing",
"--container-2xl": "spacing",
"--header-height": "spacing",
"--nav-height": "spacing",
"--ease-out": "other",
"--ease-in": "other",
"--ease-in-out": "other",
"--ease-spring": "other",
"--duration-fast": "other",
"--duration-base": "other",
"--duration-slow": "other",
"--transition-base": "other",
"--transition-spring": "other",
"--z-base": "other",
"--z-raised": "other",
"--z-dropdown": "other",
"--z-sticky": "other",
"--z-overlay": "other",
"--z-modal": "other",
"--z-toast": "other",
"--z-tooltip": "other"
},
"fontFamilies": [
"Nunito",
"Nunito Fallback"
]
}
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_ds_bundle.js
+1591
View File
File diff suppressed because it is too large Load Diff
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_ds_manifest.json
+1
View File
File diff suppressed because one or more lines are too long
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Bold.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-ExtraBold.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Italic-Variable.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Light.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Regular.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-SemiBold.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/assets/fonts/Nunito-Variable.ttf
BIN
View File
Binary file not shown.
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/readme.md
+217
View File
@@ -0,0 +1,217 @@
# CubeCraft Creations Design System
> **Made with creativity. Crafted with heart.**
CubeCraft Creations is a small-batch, handcrafted goods shop offering three distinct product categories: **crocheted plush items**, **branded apparel**, and **3D-printed collectibles** (most notably their "Pet Rocks" character line). The brand sits at the intersection of maker culture, playful design, and community warmth — it's a creator-run shop where every item carries a personal touch.
---
## Sources
The following resources were provided to build this design system. Readers with access are encouraged to explore them for deeper fidelity:
- **GitHub repo** — `talon2king/cubecraft_shopify_theme` (https://github.com/talon2king/cubecraft_shopify_theme) — Shopify theme source. Access was unavailable at time of authoring; CSS variables, Liquid templates, and component markup would significantly deepen token fidelity if explored.
- **Uploaded brand assets** — Logos (PNG, SVG), product photography, Nunito/Nunito Sans font family zip.
---
## Products & Categories
| Category | Description |
|---|---|
| **Crocheted Items** | Handmade yarn crafts — hats, plushes, seasonal ornaments. Warm, tactile, artisan feel. |
| **Apparel** | Branded t-shirts and tops featuring the CubeCraft logo gradient. |
| **3D Prints** | Custom-printed collectibles, most notably the "Pet Rocks" line — expressive stone-character figurines printed on a Bambu Lab printer. |
---
## CONTENT FUNDAMENTALS
### Voice & Tone
CubeCraft Creations writes like a **friendly maker talking to their community** — not a corporate brand, not a detached marketplace. Copy is warm, enthusiastic, and personal.
**Core traits:**
- **First-person plural ("we")** for the brand; **second-person ("you")** for customers. "We made this for you."
- **Sentence case** for headlines and UI labels — not Title Case or ALL CAPS. Feels approachable, not stiff.
- **Short sentences.** Punchy. Enthusiastic. Never verbose.
- **Exclamation points are OK** — sparingly, where genuine excitement lives. "Shop the new Pet Rocks drop!"
- **No jargon.** Never "utilize," "leverage," or "synergy." Real words. Maker words.
- **Playful but not silly.** The brand can be lighthearted ("your next favorite rock-solid friend") without going cringe.
- **Emoji are used sparingly** and only in informal contexts (social captions, thank-you notes). Never in product names or navigation.
**Tagline:** *Made with creativity. Crafted with heart.*
**Example product copy style:**
> "These little Pet Rocks have big personalities — printed fresh on our Bambu Lab, hand-finished, and ready to cause trouble on your shelf."
**Example CTA style:**
> "Shop Pet Rocks" — not "Explore Our 3D-Printed Collectible Collection"
### Casing
- Headlines: Sentence case
- Nav items: Title Case (e.g. "Shop All", "3D Prints")
- Buttons: Title Case
- Body: Standard sentence case
- Tags/badges: Lowercase
---
## VISUAL FOUNDATIONS
### Color
The brand is defined by a **blue-to-purple gradient** that runs through every logo mark and primary UI element. This is not a flat brand — color lives as movement.
- **Brand Blue** `#3B3AB8` — deep cobalt/indigo. Anchors primary actions and headings.
- **Brand Purple** `#A035CC` — vibrant magenta-purple. Gradient terminus; accent for hover, highlights.
- **Gradient** — `135deg, #3B3AB8 → #A035CC`. Used on logo, primary buttons, hero text.
- **Neutrals** — clean white backgrounds with very light lavender-gray surfaces (`#F4F4F6`). The palette leans light and airy to let product photography breathe.
- **Text** — near-black `#18181D` for primary; medium gray `#52525E` for secondary.
The brand does **not** use warm tones (no orange, red, or yellow in UI). Product photography may contain warm wood/workshop tones — these are environmental, not brand palette.
### Typography
**Nunito** is the sole typeface — a rounded, humanist sans-serif with soft terminals that perfectly matches the brand's handmade, friendly personality. It is used at all weights from Light (300) for fine print to ExtraBold (800) for display headlines. The roundness of Nunito echoes the rounded-square logo frame.
- **Display / Hero:** Nunito ExtraBold (800), tight tracking (`-0.03em`)
- **Headings:** Nunito Bold–ExtraBold (700–800)
- **Body:** Nunito Regular (400), relaxed line-height (1.65)
- **Labels/Captions:** Nunito SemiBold (600), wide tracking (`0.05em`), uppercase
No serif, no condensed, no display-only face. Nunito does everything.
### Spacing
4px base unit. Generous white space is a brand value — layouts never feel cramped. Section padding is typically 64–96px vertical. Cards have 20–24px internal padding.
### Backgrounds & Surfaces
- **Page background:** Pure white (`#FFFFFF`)
- **Subtle surfaces / alternating sections:** Very light lavender-gray (`#F4F4F6`)
- **Cards:** White with a light border (`#E4E4EA`) or subtle shadow
- **Hero sections:** May use a gradient overlay on product photography, or a solid white layout with a large gradient typographic element
- **No full-bleed patterned backgrounds.** No textures in UI (textures appear in product photography only).
### Imagery Style
- Photography has a **warm workshop / maker aesthetic** — wood grain tables, filament spools, yarn balls, scissors, hand tools visible in frame
- Lighting is natural and slightly warm, but white-balanced; images are crisp and well-lit
- Product shots blend seamlessly into warm neutral backgrounds — no stark studio white
- 3D Print hero images feature the Pet Rocks characters in playful, narrative arrangements (e.g. one being "printed" by the machine)
- No grain, no film effects, no desaturation — bright, clear, saturated imagery
### Gradient Usage
The brand gradient (`#3B3AB8 → #A035CC`, 135°) appears on:
1. The logo icon stroke and rounded-square frame
2. Primary CTA buttons (gradient fill)
3. Display/hero headlines (gradient text fill via `background-clip: text`)
4. Active state indicators, pill badges
### Borders & Cards
- Border radius: `8px` (cards/inputs), `12px` (feature cards), `20px` (logo-matching large panels), `9999px` (pills/chips)
- Cards: `1px solid #E4E4EA`, `border-radius: 12px`, `box-shadow: 0 4px 12px rgba(0,0,0,0.08)`
- No heavy outer shadows. Shadows are subtle, short-range diffusion (not long dramatic drops).
### Hover & Interaction States
- **Buttons:** Slight brightness increase + scale(1.02) on hover; scale(0.98) on press
- **Cards:** Subtle `translateY(-2px)` lift + shadow increase on hover
- **Links:** Color transition to `--brand-purple`; no underline on hover (underline on focus only)
- **Icons:** Opacity 0.7 default → 1.0 on hover
### Animation & Motion
- Easing: `cubic-bezier(0.0, 0.0, 0.2, 1.0)` (ease-out) for entrances; spring easing for interactive feedback
- Duration: 120ms for micro-interactions; 200ms for most transitions; 350ms for modals/drawers
- No infinite loops on content. Subtle entrance animations (fade-up) on page load sections.
### Corner Radii Summary
| Use | Value |
|---|---|
| Small inputs, chips | 6px |
| Buttons, cards | 8–12px |
| Feature panels | 20px |
| Logo/brand frame | 20px |
| Pills/tags | 9999px |
### Iconography
- See ICONOGRAPHY section below
---
## ICONOGRAPHY
CubeCraft Creations uses **Lucide Icons** (stroke-based, 2px stroke weight, 24px base size) for all UI iconography. Lucide is the recommended Shopify-ecosystem icon set and matches the brand's clean, rounded aesthetic perfectly.
**CDN:** `https://unpkg.com/lucide@latest/dist/umd/lucide.js`
**Usage pattern:**
```html
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<i data-lucide="shopping-cart"></i>
<script>lucide.createIcons();</script>
```
**Common icons in use:**
- Navigation: `menu`, `x`, `search`, `shopping-cart`, `user`, `heart`
- Actions: `plus`, `minus`, `trash-2`, `edit-3`, `share-2`, `download`
- Feedback: `check-circle`, `alert-circle`, `info`, `star`
- Products: `package`, `tag`, `layers`, `scissors`
- Social: `instagram`, `facebook`, `twitter`
**Icon sizing:**
- UI icons (inline with text): 16px
- Navigation icons: 20px
- Feature icons / section icons: 24px–32px
- Never scaled via CSS filter; always sized via `width`/`height` attrs
**No emoji as icons.** No hand-drawn SVGs for UI chrome. Logo marks are PNG/SVG files in `assets/logos/`.
**Brand logos available in `assets/logos/`:**
- `CubeCraftCreations_Logo_Official_No_BG.png` — full stacked logo, transparent BG
- `Header_Logo.png` — horizontal lockup for header/nav
- `SEO_Logo.png` — square social/SEO variant
- `Full_Logo_SVG.svg` — vector master
---
## FILE INDEX
```
/
├── styles.css ← Root stylesheet (import this)
├── readme.md ← This file
├── SKILL.md ← Claude Code skill definition
│
├── tokens/
│ ├── colors.css ← Color custom properties
│ ├── typography.css ← Type scale + role aliases
│ ├── spacing.css ← Spacing, radius, shadow, motion
│ └── fonts.css ← @font-face declarations
│
├── assets/
│ ├── logos/ ← Brand marks (PNG + SVG)
│ ├── images/ ← Product photography
│ └── fonts/ ← Nunito TTF files
│
├── components/
│ ├── core/ ← Button, Badge, Tag, Pill
│ └── product/ ← ProductCard, CategoryCard
│
├── guidelines/
│ ├── colors/ ← Color specimen cards
│ ├── typography/ ← Type specimen cards
│ ├── spacing/ ← Spacing specimen cards
│ └── brand/ ← Logo + gradient specimen cards
│
└── ui_kits/
└── storefront/ ← CubeCraft e-commerce UI kit
```
### Components
| Component | Location | Description |
|---|---|---|
| `Button` | `components/core/` | Primary, secondary, ghost, gradient variants |
| `Badge` | `components/core/` | Status and category labels |
| `Tag` | `components/core/` | Pill-shaped content tags |
| `ProductCard` | `components/product/` | Shop product grid card |
| `CategoryCard` | `components/product/` | Homepage category feature card |
### UI Kits
| Kit | Location | Screens |
|---|---|---|
| Storefront | `ui_kits/storefront/` | Homepage, Product listing, Product detail, Cart |
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/styles.css
+9
View File
@@ -0,0 +1,9 @@
/* ============================================================
CubeCraft Creations Design System — Root Stylesheet
Import this single file to get all tokens + fonts.
============================================================ */
@import './tokens/fonts.css';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/colors.css
+80
View File
@@ -0,0 +1,80 @@
/* ============================================================
CubeCraft Creations — Color Tokens
Brand gradient: cobalt blue #3B3AB8 → magenta purple #A035CC
============================================================ */
:root {
/* ── Brand Gradient ──────────────────────────────────────── */
--brand-blue: #3B3AB8; /* gradient start / logo blue */
--brand-purple: #A035CC; /* gradient end / logo purple */
--brand-gradient: linear-gradient(135deg, #3B3AB8 0%, #A035CC 100%); /* @kind color */
--brand-gradient-h: linear-gradient(90deg, #3B3AB8 0%, #A035CC 100%); /* @kind color */
/* ── Primary ─────────────────────────────────────────────── */
--color-primary-50: #EBEBF8;
--color-primary-100: #CDCDF0;
--color-primary-200: #9F9EE0;
--color-primary-300: #7170D0;
--color-primary-400: #5554CC;
--color-primary-500: #3B3AB8; /* base */
--color-primary-600: #2D2C9A;
--color-primary-700: #201F7A;
--color-primary-800: #141358;
--color-primary-900: #0A0938;
/* ── Accent (Purple) ─────────────────────────────────────── */
--color-accent-50: #F6EAFD;
--color-accent-100: #E8CBFA;
--color-accent-200: #D49AF5;
--color-accent-300: #C060E8;
--color-accent-400: #B040D8;
--color-accent-500: #A035CC; /* base */
--color-accent-600: #7D28A0;
--color-accent-700: #5C1C78;
--color-accent-800: #3C1050;
--color-accent-900: #1E0828;
/* ── Neutral ─────────────────────────────────────────────── */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAFAFA;
--color-neutral-100: #F4F4F6;
--color-neutral-150: #EDEDF1;
--color-neutral-200: #E4E4EA;
--color-neutral-300: #C8C8D4;
--color-neutral-400: #9898A8;
--color-neutral-500: #70707E;
--color-neutral-600: #52525E;
--color-neutral-700: #3C3C46;
--color-neutral-800: #27272F;
--color-neutral-900: #18181D;
--color-neutral-1000: #09090B;
/* ── Semantic Status ─────────────────────────────────────── */
--color-success: #16A34A;
--color-success-bg: #DCFCE7;
--color-warning: #D97706;
--color-warning-bg: #FEF3C7;
--color-error: #DC2626;
--color-error-bg: #FEE2E2;
--color-info: #2563EB;
--color-info-bg: #DBEAFE;
/* ── Semantic Aliases ────────────────────────────────────── */
--text-primary: var(--color-neutral-900);
--text-secondary: var(--color-neutral-600);
--text-muted: var(--color-neutral-400);
--text-inverse: var(--color-neutral-0);
--text-brand: var(--brand-blue);
--text-accent: var(--brand-purple);
--surface-page: var(--color-neutral-0);
--surface-subtle: var(--color-neutral-50);
--surface-card: var(--color-neutral-0);
--surface-raised: var(--color-neutral-0);
--surface-overlay: rgba(9, 9, 11, 0.50);
--border-subtle: var(--color-neutral-150);
--border-default: var(--color-neutral-200);
--border-strong: var(--color-neutral-300);
--border-brand: var(--brand-blue);
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/fonts.css
+61
View File
@@ -0,0 +1,61 @@
/* ============================================================
CubeCraft Creations — @font-face Declarations
Nunito variable font (covers all weights 200–900)
============================================================ */
@font-face {
font-family: 'Nunito';
src: url('../assets/fonts/Nunito-Variable.ttf') format('truetype');
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito';
src: url('../assets/fonts/Nunito-Italic-Variable.ttf') format('truetype');
font-weight: 200 900;
font-style: italic;
font-display: swap;
}
/* Static fallbacks for environments that don't support variable fonts */
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito Fallback';
src: url('../assets/fonts/Nunito-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/spacing.css
+86
View File
@@ -0,0 +1,86 @@
/* ============================================================
CubeCraft Creations — Spacing & Layout Tokens
Base unit: 4px
============================================================ */
:root {
/* ── Spacing Scale ───────────────────────────────────────── */
--space-0: 0px;
--space-px: 1px;
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-28: 112px;
--space-32: 128px;
--space-40: 160px;
--space-48: 192px;
/* ── Border Radius ───────────────────────────────────────── */
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-3xl: 28px;
--radius-full: 9999px;
/* Logo icon uses a large rounded square — matches brand mark */
--radius-brand: 20px;
/* ── Shadows ─────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.06);
--shadow-sm: 0 2px 6px 0 rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px 0 rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px 0 rgba(0,0,0,0.12);
--shadow-xl: 0 16px 48px 0 rgba(0,0,0,0.16);
--shadow-brand: 0 4px 20px 0 rgba(59,58,184,0.25);
--shadow-accent: 0 4px 20px 0 rgba(160,53,204,0.25);
/* ── Layout ─────────────────────────────────────────────── */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--header-height: 68px;
--nav-height: 44px;
/* ── Transitions ─────────────────────────────────────────── */
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); /* @kind other */
--ease-in: cubic-bezier(0.4, 0.0, 1.0, 1.0); /* @kind other */
--ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0); /* @kind other */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0); /* @kind other */
--duration-fast: 120ms; /* @kind other */
--duration-base: 200ms; /* @kind other */
--duration-slow: 350ms; /* @kind other */
--transition-base: all var(--duration-base) var(--ease-out); /* @kind other */
--transition-spring: all var(--duration-slow) var(--ease-spring); /* @kind other */
/* ── Z-Index ─────────────────────────────────────────────── */
--z-base: 0; /* @kind other */
--z-raised: 10; /* @kind other */
--z-dropdown: 100; /* @kind other */
--z-sticky: 200; /* @kind other */
--z-overlay: 300; /* @kind other */
--z-modal: 400; /* @kind other */
--z-toast: 500; /* @kind other */
--z-tooltip: 600; /* @kind other */
}
_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/typography.css
+97
View File
@@ -0,0 +1,97 @@
/* ============================================================
CubeCraft Creations — Typography Tokens
Primary typeface: Nunito (rounded, friendly, playful)
============================================================ */
:root {
/* ── Font Families ───────────────────────────────────────── */
--font-primary: 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
--font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
/* ── Font Weights ────────────────────────────────────────── */
--fw-light: 300; /* @kind other */
--fw-regular: 400; /* @kind other */
--fw-medium: 500; /* @kind other */
--fw-semibold: 600; /* @kind other */
--fw-bold: 700; /* @kind other */
--fw-extrabold: 800; /* @kind other */
--fw-black: 900; /* @kind other */
/* ── Font Sizes — base 16px, 1.25 type scale ─────────────── */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
--text-4xl: 3rem; /* 48px */
--text-5xl: 3.75rem; /* 60px */
--text-6xl: 4.5rem; /* 72px */
/* ── Line Heights ────────────────────────────────────────── */
--lh-tight: 1.2; /* @kind other */
--lh-snug: 1.35; /* @kind other */
--lh-normal: 1.5; /* @kind other */
--lh-relaxed: 1.65; /* @kind other */
--lh-loose: 2.0; /* @kind other */
/* ── Letter Spacing ──────────────────────────────────────── */
--ls-tight: -0.03em; /* @kind other */
--ls-snug: -0.01em; /* @kind other */
--ls-normal: 0em; /* @kind other */
--ls-wide: 0.02em; /* @kind other */
--ls-wider: 0.05em; /* @kind other */
--ls-widest: 0.12em; /* @kind other */
/* ── Semantic Role Aliases ───────────────────────────────── */
/* Display — hero headlines, splash copy */
--type-display-family: var(--font-primary);
--type-display-weight: var(--fw-extrabold);
--type-display-size: var(--text-5xl);
--type-display-lh: var(--lh-tight);
--type-display-ls: var(--ls-tight);
/* Heading 1 */
--type-h1-family: var(--font-primary);
--type-h1-weight: var(--fw-extrabold);
--type-h1-size: var(--text-4xl);
--type-h1-lh: var(--lh-tight);
--type-h1-ls: var(--ls-snug);
/* Heading 2 */
--type-h2-weight: var(--fw-bold);
--type-h2-size: var(--text-3xl);
--type-h2-lh: var(--lh-snug);
/* Heading 3 */
--type-h3-weight: var(--fw-bold);
--type-h3-size: var(--text-2xl);
--type-h3-lh: var(--lh-snug);
/* Heading 4 */
--type-h4-weight: var(--fw-semibold);
--type-h4-size: var(--text-xl);
--type-h4-lh: var(--lh-normal);
/* Body */
--type-body-family: var(--font-primary);
--type-body-weight: var(--fw-regular);
--type-body-size: var(--text-base);
--type-body-lh: var(--lh-relaxed);
/* Body Large */
--type-body-lg-size: var(--text-md);
--type-body-lg-lh: var(--lh-relaxed);
/* Caption / Label */
--type-caption-weight: var(--fw-semibold);
--type-caption-size: var(--text-xs);
--type-caption-ls: var(--ls-wider);
/* Button */
--type-btn-weight: var(--fw-bold);
--type-btn-size: var(--text-sm);
--type-btn-ls: var(--ls-wide);
}
design/ADMIN-SPEC.md
+136
View File
@@ -0,0 +1,136 @@
# Admin spec — parent phone card
Screens `1d`–`1i`. One card, `nestquest-admin-card`, four tabs. Reference viewport
390×844. Plain CubeCraft styling and plain domain words — no parchment, no Cinzel, no
quest vocabulary in this surface.
## 1. Shell
- Page `--nq-a-page`; cards `--nq-a-surface` with 1px `--nq-a-border`.
- **Header** white, 1px bottom border: screen title 24px/800, tracking −.02em, plus a
12px/600 `--nq-a-ink-secondary` sub-line. Optional trailing action (icon square 36px,
or a gradient `New` button).
- **Tab bar** absolute bottom, `--nq-a-tabbar-height` 70px + 12px bottom padding, white,
1px top border, 4 items: `house` Today · `list-checks` Tasks · `calendar-days` Schedule ·
`history` History. Active icon and label `--nq-brand-blue` at 700; inactive icon
`--nq-a-ink-tertiary`, label `--nq-a-ink-secondary` 600.
- **Every scroll column ends with 92px bottom padding** so content clears the tab bar.
This was a real defect in review — do not omit it.
- Two densities exist. Ship **compact**; `--nq-a-density-*` carries the roomy values.
- Everything this card mutates goes through a NestQuest service, which enforces the admin
allowlist server-side. The card must assume it can be rendered by a non-admin and still
be safe — hiding controls is not the boundary (D-003).
## 2. Today (1d compact, 1h roomy)
### 2.1 Header
Title `Today`; sub `<weekday>, <Month D> · cycle day N of 14`; trailing `settings` square.
### 2.2 Stat row
Three equal cards, 8px gap, padding 12px: numeral 22px/800 (done in `--nq-brand-blue`,
remaining in `--nq-a-ink`, overdue in `--nq-a-danger`), label 10px/600 uppercase tracking
.08em `--nq-a-ink-secondary` — `Done`, `Remaining`, `Overdue`.
### 2.3 Child rows
One card, rows divided by `--nq-a-divider`, row padding 11px 13px:
30px gradient avatar square (radius 7px, initial 13px/800 white) · name 14px/700 ·
meta 11px/600 (`3 of 7 · 1 overdue`; all-done in `--nq-a-success`; away reads
`Away · returns <Mon D>`) · 82×6px progress track with gradient fill. An away child's
avatar is flat `#9898A8` and the row carries a lowercase `override` pill when the absence
comes from a presence override rather than the pattern.
### 2.4 Roomy variant (1h)
Header becomes a hero: kicker 11px/700 uppercase, `8 of 12 done` 32px/800, 10px gradient
progress bar, 13px/600 sub-line. Each child gets its own 12px-radius card with
`0 4px 12px rgba(0,0,0,.06)`, 48px avatar, 19px/800 name, right-aligned `3/7` +
status line, and its overdue item inlined as a `--nq-a-danger-bg` row with a
`Mark done` action.
### 2.5 Needs attention
Section label 11px/700 uppercase, then one card of event rows: Lucide glyph 18px ·
title `<Quest> · <Child>` 13px/700 · meta 11px/600 (`Overdue since 9:00 AM` in
`--nq-a-danger`; `Completed 7:04 AM from panel` in `--nq-a-ink-secondary`) · trailing
text action `Mark done` (`--nq-brand-blue`) or `Undo` (`--nq-brand-purple`).
### 2.6 Permission note
An info strip (`--nq-a-info-bg`, `info` glyph, 11.5px/600 `--nq-a-info-ink`):
"Undo is admin-only. A panel tap can never reverse a completion." Keep this copy — it is
the one place the security model is explained to the user.
## 3. Definitions (1e)
### 3.1 List
Header `Tasks` / `7 definitions · 3 children` + gradient `New` button. Filter chips row
(All / one per child): active `#18181D` fill white text, inactive white with border.
Rows: glyph 17px · title 13.5px/700 · meta 11px/600 `<assignees> · <recurrence> · <windows>`
· `chevron-right`. An inactive definition renders the whole row at
`--nq-a-ink-tertiary` with `· inactive` in the meta — never hard-deleted (glossary).
The row being edited takes `--nq-a-selected` with brand-blue glyph, `Editing` meta and
`chevron-down`.
### 3.2 Edit sheet
Bottom sheet, `--nq-a-radius-sheet`, `--nq-a-sheet-shadow`, 38×4px grabber, padding
14px 18px 24px. Title 19px/800. Fields, 11px gap, each with a 10px/700 uppercase label:
| Field | Control |
|---|---|
| Assigned children | multi-select row → sheet; shows `Declan` or `All three` |
| Repeats | select (Daily / Weekly / Monthly / Yearly / Custom + interval) |
| Due time | time field per window |
| Window | 3-up segmented, **multi-select** — a definition may own several |
| Skip on away days | toggle, gradient when on, sub "No instance when the child is absent" |
Footer: `Cancel` (flex 1, bordered) + `Save changes` (flex 2, gradient), both 13px vertical
padding. Sheet enters over the dimmed list in `--nq-dur-modal`.
### 3.3 Icon picker
Each definition carries a Lucide glyph, shown on both surfaces. **The allowed subset is not
yet defined** — pick 24–40 household-relevant glyphs and ship them as a grid picker.
## 4. Schedule (1f)
- Header `Schedule` / `2-week cycle · anchor <weekday>, <Mon D>`.
- **Month grid** card: month label 11px/700 uppercase + chevron pair; weekday initials
10px/700 `--nq-a-ink-tertiary`; day cells `aspect-ratio: 1`, radius 6px —
rotation-home days `--nq-a-selected` with `#201F7A` numerals, away days
`--nq-a-page` with `--nq-a-ink-secondary`, override days `--nq-a-warning-bg` with
`--nq-a-warning-ink` and a 1px warning border, today filled with the brand gradient in
white 800. Legend row beneath, 10.5px/600, one swatch per state.
- **Presence pattern** card: one row per child, name 13px/700 + rule 12px/600
(`Weeks 1 & 3 of cycle`, `Every day`).
- **Overrides** card: `Add` text action; rows with `calendar-x` / `calendar-check`,
title `<Child> away · <Mon D – D>`, meta reason, trailing `trash-2`.
- Cycle position is always computed from the anchor date. **Never** from ISO week numbers
or week parity (D-004).
## 5. History (1g)
- Header `History` / `Append-only event log · last 14 days` + bordered `CSV` button
(`download` glyph) that exports the filtered range.
- Stat row: `91%` On time · `128` Completed · `7` Missed, numerals 20px/800.
- Filter chips: `All events` / `Reversals` / `Missed`.
- Day-grouped sections (label 11px/700 uppercase) of event rows: 7px status dot
(green completed, `--nq-a-reversal` un-completed, `--nq-a-danger` missed) ·
title `<Quest> · <Child>` 12.5px/700 · meta 10.5px/600 giving event type, actor and
on-time flag (`completed · panel (Declan) · on time`, `uncompleted · joshua (admin)`,
`missed · nightly sweep`, `completed · panel (Declan) · late 22 min`) · time 11px/600.
- Footer strip (`--nq-a-page`, `lock` glyph): "Events are never edited or deleted. A
reversal is its own row." Rows are never editable in the UI (D-005).
## 6. Presence override editor (1i)
Pushed screen with a back chevron; title `Presence override` / sub "Beats the custody
pattern for these dates".
- Form card (roomy density, 18px padding, 16px gaps):
**Child** 3-up segmented, selected = gradient;
**Status for these dates** 2-up segmented (`Away` / `Home`), selected = `#18181D`;
**From** / **Through** date fields side by side, 13px padding, 14px/700 values;
**Reason (optional)** text field.
- **Consequence warning** — `--nq-a-warning-bg` card with `alert-circle`:
headline `This removes N upcoming tasks` 13.5px/700 `--nq-a-warning-ink`, body 12px/600
`--nq-a-warning-ink-2` naming the child, the date range, and stating "Completed days are
untouched." The count must be computed live from the materialiser before saving.
- Footer: `Cancel` (flex 1, white, bordered) + `Save override` (flex 2, gradient), 15px
vertical padding.
- Saving must never delete an instance that already has a completion event.
design/DESIGN-HANDOFF.md
+82
View File
@@ -0,0 +1,82 @@
# NestQuest — design handoff
Approved UI design for the NestQuest Home Assistant integration, ready to implement.
Source of truth for visuals: the mockup file `NestQuest Mockups.dc.html` (9 screens,
option ids `1a`–`1j`). This folder is the written form of those screens.
## What is in here
| File | Contents |
|---|---|
| `PANEL-SPEC.md` | Kids' DAKOS wall panel: party board, quest log, confirm, quest complete |
| `ADMIN-SPEC.md` | Parent phone admin: today, definitions, schedule, history, overrides |
| `ENTITIES-AND-SERVICES.md` | Every screen mapped to the HA entities, services and events it needs |
| `IMPLEMENTATION-ORDER.md` | Build order, with the decisions that change existing code first |
| `tokens/nestquest-panel-tokens.css` | Panel card custom properties |
| `tokens/nestquest-admin-tokens.css` | Admin card custom properties |
## Screen index
| id | Screen | Surface | Spec |
|---|---|---|---|
| 1a | The Party (attract) | panel 1920×1080 | PANEL §2 |
| 1b | Quest Log | panel 1920×1080 | PANEL §3 |
| 1j | Complete confirm | panel 1920×1080 | PANEL §4 |
| 1c | Quest complete | panel 1920×1080 | PANEL §5 |
| 1d | Today (compact) | phone 390×844 | ADMIN §2 |
| 1e | Definitions + edit sheet | phone 390×844 | ADMIN §3 |
| 1f | Schedule + custody | phone 390×844 | ADMIN §4 |
| 1g | History + CSV | phone 390×844 | ADMIN §5 |
| 1h | Today (roomy) | phone 390×844 | ADMIN §2.4 |
| 1i | Presence override | phone 390×844 | ADMIN §6 |
## Design decisions taken during this handoff
These were open in CTXD and are now settled. Several contradict the current repo and
docs — read `IMPLEMENTATION-ORDER.md` §1 before writing code.
1. **`quest_*` naming throughout.** The domain model is renamed from `task_*` to
`quest_*` in DB, services, entities and UI. Migration note in IMPLEMENTATION-ORDER §1.1.
2. **Instance key becomes `(definition_id, child_id, due_date, window)`.** Required by
multi-assignee definitions and by twice-daily quests. Supersedes the documented
`(definition_id, due_date)`.
3. **A definition may have multiple assignees**, and materialises one instance per
assigned child per date per window. Each child completes their own.
4. **A definition may declare more than one window** (morning / afternoon / evening),
producing one instance per window per day.
5. **Missed quests vanish from the panel at rollover.** Kids never see a wall of failure;
the missed event is in the parent's history only.
6. **Three Lovelace cards**: `nestquest-party-board-card`, `nestquest-quest-log-card`,
`nestquest-admin-card`. Board and log live in separate Lovelace views; a crest tap
navigates.
7. **Completion needs a confirm step** (screen 1j) because children cannot undo.
8. **The quest log owns idle return**: 40 s of no touch navigates back to the board.
TouchHub Auto-Return must be configured longer than 40 s so the two do not fight.
9. **Actor on a panel completion** is `panel` plus the tapped child profile, per glossary.
10. **Weather is a configured entity** on the party board card (`weather_entity`), not
NestQuest data.
11. **Fonts are bundled** as local woff2 in the card's `www/` folder — the panel may be
offline. Nunito (400/600/700/800) and Cinzel + Cinzel Decorative.
## Vocabulary
The panel speaks tabletop; the admin speaks plainly. Both sit on the same `quest_*` model.
| Model / admin | Panel display string |
|---|---|
| quest instance | quest |
| child | adventurer |
| child's task list | Quest Log |
| household | The Party |
| all complete | Quest complete |
| absent | On travels |
## Open questions
- Empty and error states are unspecified by request (child with no quests, everyone away,
integration unconfigured, DB unreachable). Panel must not render a blank parchment —
decide before shipping the card.
- No gamification is in scope. XP, levels, streaks and rarity were explicitly deferred,
but the append-only event log already supports computing them later.
- Icon per quest definition is chosen by the parent from a Lucide subset; the subset is
not yet defined (`ADMIN-SPEC.md` §3.3).
design/ENTITIES-AND-SERVICES.md
+117
View File
@@ -0,0 +1,117 @@
# Screens → HA entities, services and events
Planned surface from CTXD CONTEXT.MD, adjusted for the design decisions in
`DESIGN-HANDOFF.md`. Names use the `quest_*` model.
## 1. Entities the cards read
| Entity | Type | Used by |
|---|---|---|
| `sensor.nestquest_<child>_quests_due_today` | int | 1a plate progress, 1b counts, 1d stats |
| `sensor.nestquest_<child>_quests_completed_today` | int | 1a, 1b, 1c, 1d, 1h |
| `sensor.nestquest_<child>_quests_remaining_today` | int | 1b remaining block, 1d |
| `sensor.nestquest_<child>_completion_pct_today` | float | progress bars |
| `sensor.nestquest_<child>_next_quest` | str + attrs | optional panel hint |
| `binary_sensor.nestquest_<child>_all_done` | bool | 1c trigger, 1d "all done" |
| `binary_sensor.nestquest_<child>_present_today` | bool | 1a away plate, 1d away row |
| `sensor.nestquest_household_quests_due_today` | int | 1b party line, 1c party stat |
| `sensor.nestquest_household_quests_completed_today` | int | same |
| `sensor.nestquest_cycle_day` | int | 1d sub-line, 1f header |
| *configured* `weather.<entity>` | HA core | panel dock |
Per-instance data is too granular for entity state. The cards read the day's instance list
from an attribute payload on the per-child sensor (or a websocket command —
implementer's call), shaped:
```json
{
"instances": [
{ "id": 4821, "definition_id": 12, "child_id": 3, "title": "Fill bird feeder",
"icon": "bird", "window": "afternoon", "due_time": "17:00",
"state": "open", "overdue": true, "completed_at": null, "on_time": null }
]
}
```
`state` ∈ `open` | `completed`. Missed instances are **omitted** from panel payloads
(decision 5) and included in admin payloads.
## 2. Services the cards call
| Service | Admin only | Called from |
|---|---|---|
| `nestquest.complete_quest` | no (panel allowed) | 1j confirm |
| `nestquest.uncomplete_quest` | **yes** | 1d `Undo` |
| `nestquest.create_quest_definition` | **yes** | 1e `New` |
| `nestquest.update_quest_definition` | **yes** | 1e sheet `Save changes` |
| `nestquest.set_quest_definition_active` | **yes** | 1e row action |
| `nestquest.set_presence_pattern` | **yes** | 1f presence card |
| `nestquest.create_presence_override` | **yes** | 1i `Save override` |
| `nestquest.delete_presence_override` | **yes** | 1f override row `trash-2` |
| `nestquest.export_history_csv` | **yes** | 1g `CSV` |
| `nestquest.manage_child` | **yes** | settings |
`complete_quest` payload from the panel:
```yaml
service: nestquest.complete_quest
data:
instance_id: 4821
actor: panel # kiosk user context
actor_child_id: 3 # the tapped profile (decision 9)
```
Every service resolves `call.context.user_id` against the admin allowlist and **fails
closed** with no user context (D-003). The panel's kiosk user is never allowlisted, so
`uncomplete_quest` is unreachable from the wall even though the card never renders the
control.
## 3. Events the cards listen for
| Event | Effect |
|---|---|
| `nestquest_quest_completed` | stamp the seal, re-sort the column, refresh counts |
| `nestquest_quest_uncompleted` | un-seal, restore the card (admin action, panel must reflect it) |
| `nestquest_quest_missed` | remove the instance from the panel; add a history row |
| `nestquest_child_day_complete` | show screen 1c |
All four come off the `DataUpdateCoordinator`; cards should also refresh on
`state_changed` for their sensors so they recover if an event is dropped.
## 4. Card configuration
```yaml
# kids' panel, view 1
type: custom:nestquest-party-board-card
weather_entity: weather.home # optional; dock falls back to date/time
quest_log_path: /nestquest/log # view the crest tap navigates to
child_order: [declan, jordyn, chloe]
# kids' panel, view 2
type: custom:nestquest-quest-log-card
board_path: /nestquest/board
idle_return_seconds: 40 # must be shorter than TouchHub Auto-Return
confirm_timeout_seconds: 15
complete_screen_seconds: 12
# parent phone
type: custom:nestquest-admin-card
density: compact # compact | roomy
default_tab: today
```
The quest log reads the selected child from the view's URL/`hass` path parameter so the
board → log hop is a plain Lovelace navigation (decision 6).
## 5. Data-shape consequences of the design
1. Instance key is `(definition_id, child_id, due_date, window)` — the schema's
`task_instances` unique index must widen.
2. `quest_definitions` needs an **assignees** join table, replacing the single
`child_id` column.
3. `quest_definitions` needs a **windows** set (morning/afternoon/evening) plus an
optional due time per window.
4. The materialiser emits one instance per (assignee × window × firing date), still
idempotent on the widened key, still only when the child is present.
5. `completion_events` gains `actor_child_id` so a panel completion records which
profile was tapped, while `actor` stays `panel`.
design/IMPLEMENTATION-ORDER.md
+80
View File
@@ -0,0 +1,80 @@
# Implementation order
Written for an agent working in `code.cubecraftlabs.com/Maniacs_Mansion/NestQuest`.
Steps 1.x change existing code and must land first; the frontend is step 4 onward.
## 1. Model changes (breaking, pre-release)
### 1.1 Rename `task_*` → `quest_*`
Nothing is released (main/dev are at "first commit", version 0.1.0), so rename in place
rather than aliasing.
- `schema.py`: `task_definitions` → `quest_definitions`, `task_instances` →
`quest_instances`. Keep `completion_events`, `children`, `admin_users`,
`schedule_rules`, `presence_schedules`, `presence_overrides`.
- `db.py` / `store.py`: rename DAO methods and any SQL literals.
- `const.py`: no table names live there today; keep it that way.
- `tests/test_schema.py`, `tests/test_store.py`, `tests/test_db.py`: update expectations.
- **Migration note:** the versioned migration runner has no released version to upgrade
from. Bump the schema version, and make migration 1 create the `quest_*` tables
directly. If any dev machine already holds a `nestquest.db` with `task_*` tables, the
runner should detect the legacy names and `ALTER TABLE ... RENAME TO` before applying
the widened index — a dev-only path, worth ~20 lines and a test.
### 1.2 Widen the instance key
Unique index becomes `(definition_id, child_id, due_date, window)`. Materialisation stays
idempotent on that tuple. Add a test for the twice-daily case (one definition, two windows,
one child, one date → two rows) and the shared case (one definition, three assignees, one
window → three rows).
### 1.3 Multi-assignee definitions
Add `quest_definition_assignees(definition_id, child_id)`. Drop the single `child_id`
column on the definition. The "exactly one assigned child" rule in GLOSSARY.MD no longer
holds — CTXD has been updated.
### 1.4 Windows
Add `quest_definition_windows(definition_id, window, due_time)` with
`window ∈ ('morning','afternoon','evening')`. Window clock ranges are fixed for now:
morning ≤ 11:59, afternoon 12:00–17:00, evening 17:00–21:00. Store the ranges in
`const.py` so they are configurable later.
### 1.5 `actor_child_id` on completion events
Nullable int. Set for panel completions, null for admin ones. Still append-only.
## 2. Engines and materialisation
Unchanged in intent: pure recurrence engine, pure presence engine with anchor-date
arithmetic, daily materialiser over `horizon_days` at `day_rollover_time`. Only the
instance fan-out changes (assignees × windows).
## 3. Services, permissions, entities
Implement the service table in `ENTITIES-AND-SERVICES.md` §2 behind the permission
decorator, then the sensors and binary sensors in §1, then the four events in §3.
`complete_quest` is the only service a non-admin context may call.
## 4. Frontend groundwork
1. Create `custom_components/nestquest/www/`.
2. Bundle fonts as woff2: Nunito 400/600/700/800; Cinzel 600/700/900; Cinzel Decorative
700/900. Declare `@font-face` with `font-display: swap` in a shared
`nestquest-fonts.css`. No CDN — the panel may be offline.
3. Copy `design/tokens/nestquest-panel-tokens.css` and
`design/tokens/nestquest-admin-tokens.css` in as the cards' `:host` blocks.
4. Register the three cards with `customCards` and ship editors later; hand-written YAML
is fine for v1.
## 5. Cards, in this order
1. `nestquest-party-board-card` (screen 1a) — read-only, proves the entity payload.
2. `nestquest-quest-log-card` (1b) — read-only first, no completion.
3. Confirm dialog + `complete_quest` (1j) with optimistic seal and revert-on-failure.
4. Quest complete screen (1c) driven by `nestquest_child_day_complete`.
5. Idle return (40 s) and the documented TouchHub Auto-Return constraint.
6. `nestquest-admin-card`: Today (1d) → Definitions + sheet (1e) → Schedule (1f) →
History + CSV (1g) → Presence override (1i).
## 6. Before shipping
- `use_x_frame_options: false` is required for TouchHub embedding — document the
clickjacking trade-off next to the setting, per D-006.
- Verify no NestQuest control in the dock strip is tappable.
- Verify the kiosk HA user is absent from the admin allowlist, and that
`uncomplete_quest` denies it with a logged denial.
- Empty and error states are still unspecified (see DESIGN-HANDOFF "Open questions").
Do not ship a card that renders a blank parchment.
design/LOGO-PROMPT.md
+66
View File
@@ -0,0 +1,66 @@
# NestQuest — logo generation prompt
For Midjourney, DALL·E, Ideogram, Firefly, or similar. Ideogram handles lettering best;
Midjourney gives the best mark quality but mangles text — for MJ, generate the **mark only**
and set the wordmark in Cinzel Decorative yourself.
---
## Primary prompt (mark + wordmark)
> Logo design for "NestQuest", a family chore-quest app displayed on a wall-mounted
> touchscreen. A twenty-sided die seen face-on as a flat hexagonal silhouette, sitting at
> the exact centre of a compass rose. The compass rose has four long cardinal points and
> four shorter intercardinal points radiating outward as clean tapered spikes, in the style
> of a medieval quest-map marker or Dungeons & Dragons faction sigil. The d20's internal
> facet lines are drawn as thin geometric strokes, and a capital letter N is formed by
> those facet lines within the die face. Beneath the mark, the word "NestQuest" in an
> engraved Roman capital serif with strong flared serifs, letterspaced, similar to Cinzel
> Decorative.
> Colour: a smooth diagonal gradient from deep cobalt indigo #3B3AB8 to vivid magenta-purple
> #A035CC, on a plain warm parchment cream background #f0e4c7. No other colours.
> Flat vector illustration, bold confident uniform line weight, no gradients other than the
> brand gradient, no shading, no 3D, no bevels, no drop shadows, no photorealism.
> Perfectly symmetrical, centred, generous margin. Crisp, high contrast, legible at small size.
> --no photo, realistic, 3d render, texture, noise, gloss, mockup, watermark, extra text, bird, nest, eggs
## Mark-only variant (recommended for Midjourney)
> Compass rose with a twenty-sided die at its centre, flat hexagonal die silhouette, four
> long cardinal points and four short intercardinal points as tapered spikes, thin geometric
> facet lines inside the die forming a capital letter N, flat vector, bold uniform stroke
> weight, single diagonal gradient from #3B3AB8 to #A035CC, plain cream #f0e4c7 background,
> centred, perfectly symmetrical, medieval quest-map marker / D&D faction sigil style,
> minimal, no text, legible as a small app icon.
> --no text, letters, photo, 3d, shading, texture, watermark, bird, nest
## Variations to try alongside it
**A. Ring-bound** — same composition, with a thin circular ring binding the eight compass
points, die centred inside the ring. Reads more like a seal or coin.
**B. Four-point only** — drop the intercardinal spikes; four long cardinal points only,
die at centre. Simpler, stronger at favicon size.
**C. Die as the rose** — no separate die shape; the compass points radiate directly from a
hexagonal centre so the die and the rose are one continuous form. The most distinctive, the
hardest to get right.
**D. N-forward** — the capital N is the dominant element, filling the die face with heavy
flared strokes, compass points small and subordinate. Reads as a monogram first.
## Constraints to keep whatever you generate on-brand
| | |
|---|---|
| Gradient | `135deg, #3B3AB8 → #A035CC` — nothing else |
| Parchment | `#f0e4c7` background, `#2b1f14` if ink is needed |
| Wordmark face | Cinzel Decorative 700/900, letterspaced ~0.01em |
| Forbidden | warm brand colours (orange/red/yellow), emoji, 3D renders, bevels, long shadows, textures, mascots |
| Must survive | 1-colour print, 64px favicon, and white-on-gradient inversion |
## When you have a result
Drop the file into this project and I'll trace it into clean SVG, build the lockup with the
Cinzel wordmark, produce the horizontal / stacked / icon-only variants, and add it to the
panel's attract screen in place of the current d20-and-rules wordmark row.
design/PANEL-SPEC.md
+170
View File
@@ -0,0 +1,170 @@
# Panel spec — kids' DAKOS wall panel
Screens `1a`, `1b`, `1j`, `1c` of the mockups. Two cards:
`nestquest-party-board-card` (§2) and `nestquest-quest-log-card` (§3–5).
## 1. Frame and constraints
- **Canvas** 1920×1080, landscape, fixed. No scrolling — content must fit. Every screen in
the mockups measures exactly 1920×1080 with no overflow; keep it that way.
- **Viewing distance** ~3 ft. **No text below 22px.** Meta lines are 22px/600 Nunito;
quest titles 30px/700 Cinzel; section heads 32px.
- **Contrast** every ink token is ≥4.5:1 on parchment. Do not introduce alpha-muted text.
- **Ground** `--nq-p-parchment` + `--nq-p-vignette`, CSS only, no image assets.
- **Double frame** inset 26px (`--nq-p-frame-outer`, radius 14px) and inset 36px
(`--nq-p-frame-inner`, radius 8px), both `pointer-events: none`.
- **Dock** bottom strip, 84px, inset 46px, radius 14px, `--nq-p-dock-bg`. Weather only.
**Nothing in the dock is tappable** (D-006).
- **No login.** Every action comes from the kiosk HA user; the kiosk user is never in the
admin allowlist.
## 2. The Party — attract state (1a)
Default view on the wall. Layout top to bottom:
1. **Wordmark row** at y=64. Rule · d20 hexagon · `NestQuest` (66px/900 display, brand
gradient via `background-clip: text`) · d20 · rule. d20 marks are 34px hexagons
(`clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)`) filled with
the brand gradient, numeral 15px/700 Cinzel.
2. **Kicker** `The Party · <weekday>, <Month D>` — 21px/600 Cinzel, tracking .30em, uppercase.
3. **Adventurer plates**, 3-up grid, 56px gap, page inset 110px, top y=262. One plate per
child returned by the party sensor, in configured order.
4. **Hint line** `Tap your crest to open your Quest Log`, 27px/600 Nunito, y≈930.
5. **Dock.**
### 2.1 Adventurer plate (present)
Radius 20px, `--nq-p-card-panel`, 2px `--nq-p-panel-border`, `--nq-p-panel-shadow`,
padding 44px 28px 40px, contents centred, 26px gap. **The whole plate is the tap target**
(≥188px wide, ≥600px tall — far above minimum).
- **Crest** 188×214, shield via `clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%)`,
`--nq-p-crest`, inset ring `inset 0 0 0 4px rgba(255,255,255,.22)`, child's initial
82px/700 display in white.
- **Name** 48px/700 Cinzel, `--nq-p-ink`, tracking .02em.
- **Presence pill** radius 9999px, `#e8f4ea` on `rgba(22,120,60,.35)`, `check-circle` 22px
`#157a3c`, label `Home today` 19px/600 Cinzel uppercase `#146b36`.
- **Progress line** `N of M quests claimed` 26px/700 Cinzel `--nq-p-ink-secondary`.
- **Progress bar** full width, 16px, radius 9999px, track `rgba(92,62,26,.18)` with 1px
border, fill `--nq-brand-gradient-h`.
### 2.2 Adventurer plate (away)
Same geometry, muted: `linear-gradient(#f2ecdd, #e6dcc6)`, **2px dashed** border, no lift
shadow. Crest uses `--nq-p-crest-away`; initial stays **full-opacity white** (never alpha).
Name in `--nq-p-ink-away`. Pill: `tent` icon, label `On travels`, neutral fill. Progress
line reads `Returns <weekday>, <Mon D>`; empty progress track, no fill. **Not tappable** —
the plate must not navigate, since the child has no instances.
### 2.3 Dock
`cloud-sun` 40px · temperature 38px/800 Nunito `--nq-p-dock-ink` · 1px divider ·
condition + high/low 26px/600 `--nq-p-dock-ink-secondary` · divider · one short forecast
phrase. All read from the configured `weather_entity`; if unset, render the dock with date
and time only rather than removing it (the strip is part of the frame).
## 3. Quest Log (1b)
Reached by tapping a present crest. Header at y=56, page inset 62px:
- Small crest 96×110 (initial 44px/700 display).
- Title `<Name>'s Quest Log` 56px/700 display.
- Sub `<weekday>, <Month D> · N of M claimed` 20px/600 Cinzel, tracking .24em, uppercase.
- **Remaining block** right-aligned: radius 14px panel, d20 mark 44px with the remaining
count, `N quests left` 28px/700 Cinzel, and a party line
`Party progress · X of Y today` 22px/600 Nunito.
### 3.1 Window columns
Three equal columns, 34px gap, top y=236, one per window — **Morning** (until 11:59 AM),
**Afternoon** (12:00–5:00 PM), **Evening** (5:00–9:00 PM). Column head: icon
(`sunrise` / `sun` / `moon`) 34px, name 32px/700 Cinzel, sub-label 21px/600 Cinzel
uppercase with the window's clock range, right-aligned `done/total` 26px/700 Cinzel,
14px bottom padding, `--nq-p-rule` underline.
Cards stack at `--nq-p-quest-gap` (24px). Order within a column: **incomplete first,
sealed below**. A window with no quests renders its head and nothing else — do not
collapse the column, the three-column rhythm is the layout.
### 3.2 Quest card — open
`--nq-p-quest-min-height` 116px, radius 12px, `--nq-p-card-open`, 1px
`--nq-p-card-border`, `--nq-p-card-shadow`, padding 22px, 22px gap, row layout:
1. **Icon tile** 64×64, radius 10px, `--nq-p-icon-tile`, Lucide glyph 34px white.
2. **Text** title 30px/700 Cinzel `--nq-p-ink`; meta 22px/600 Nunito
`--nq-p-ink-secondary` reading `Due by <h:mm A>`. If past due:
`Overdue · due <h:mm A>` in 22px/700 Cinzel uppercase, tracking .10em,
`--nq-p-ink-late`.
3. **Complete button** `--nq-p-button-height` 72px × min 150px, radius 10px,
`--nq-brand-gradient`, `check` 30px + `Complete` 24px/700 Cinzel white,
`box-shadow: 0 3px 0 rgba(40,20,60,.35)`.
Both the card body and the button open the confirm dialog (§4). Press feedback:
`scale(.98)`, `--nq-dur-micro`.
### 3.3 Quest card — sealed
`--nq-p-card-done`, `opacity: .82`, no shadow, **not tappable**. Icon tile
`--nq-p-icon-tile-done` with the glyph in `--nq-p-ink-secondary`. Title 30px/700 Cinzel
`--nq-p-ink-muted` with `text-decoration: line-through`. Meta reads
`Claimed <h:mm A>` 22px/600 Nunito `--nq-p-ink-secondary`.
**Wax seal** `--nq-p-seal-size` 78px circle, `--nq-p-seal`, `--nq-p-seal-shadow`,
`check` 38px in `rgba(255,235,235,.95)`, absolutely positioned `right: 16px; top: -12px`,
rotated a few degrees — **vary the rotation per card** (−9°, +6°, −4° in the mockup) so the
board looks stamped by hand, not templated. Entrance: fade + `scale(1.15 → 1)`,
`--nq-dur-base`, `--nq-ease-out`.
### 3.4 Party roll-up
An optional dashed panel in the afternoon column: label `Party roll-up` 18px/600 Cinzel
uppercase, body 23px/600 Nunito `--nq-p-ink-secondary` — one or two sentences on the other
children ("Jordyn has finished her log. Chloe is on travels until Sunday."). Read-only.
### 3.5 Idle return
40 s with no touch → navigate back to the party board view. Reset on any pointer or touch
event. The card owns this; TouchHub Auto-Return must be set longer than 40 s.
## 4. Complete confirm (1j)
Modal over the dimmed log — scrim `rgba(30,20,10,.62)` over the live board.
Dialog 1000px wide at `top: 196px; left: 460px`, radius 20px, parchment panel with 3px
`rgba(92,62,26,.5)`, `box-shadow: 0 26px 60px rgba(20,10,0,.5)`, padding 64px 68px 56px.
- Header row: 104px icon tile (radius 12px, brand gradient, glyph 56px) · window kicker
21px/600 Cinzel uppercase tracking .24em · quest title 58px/700 display.
- Body 32px/600 Nunito `#3f2f1c`: `Mark this quest complete? Once the seal is set, only a
parent can undo it.`
- Buttons, 24px gap, both `--nq-p-confirm-button` 108px tall:
**Not yet** flex 1, `rgba(92,62,26,.1)` with 2px border, `x` 34px + 30px/700 Cinzel;
**Complete** flex 2, brand gradient, `check` 38px + 32px/700 Cinzel white.
- Dialog enters with fade + `scale(.96 → 1)`, `--nq-dur-modal`, `--nq-ease-out`.
- Dismiss: **Not yet**, scrim tap, or 15 s of no input.
On confirm, call the completion service optimistically, stamp the seal, and re-sort the
column. On service failure, revert the card and surface a single-line parchment toast.
## 5. Quest complete (1c)
Shown when the last instance for a child's day is completed; auto-returns to the board
after 12 s (countdown line `Returning to The Party in N seconds`, 25px/600 Nunito).
- Large seal 168px at y=96 (`check` 86px), rotated −6°, `0 10px 24px rgba(60,10,20,.42)`.
- `Quest complete` 86px/900 display, brand-gradient text fill.
- Sub 34px/600 Nunito `--nq-p-ink-secondary`, max-width 1000px, centred, `text-wrap: pretty`:
names the child, the date, and how the day went.
- **Stat blocks** 4-up at y=540, inset 200px, 26px gap: radius 16px parchment panels,
numeral 58px/900 Cinzel, label 17px/600 Cinzel uppercase tracking .14em —
`Quests claimed`, `On time`, `Late`, `The Party` (household X/Y).
- Dock switches to the evening variant (`cloud-moon`).
## 6. Accessibility and input
- Minimum tap target on this surface is the quest card itself (116px) and the 72px button;
nothing interactive is smaller than 72px.
- 24px between adjacent tap targets so a stray finger cannot claim the wrong quest.
- No hover states — this is a touch-only surface. Provide `:active` feedback only.
- No animation loops. Entrances only, per the CubeCraft motion rules.
design/assets/nestquest-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 868 KiB

design/assets/nestquest-mark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 611 KiB

design/assets/nestquest-wordmark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

design/examples/README.md
+19
View File
@@ -0,0 +1,19 @@
# NestQuest design examples
Interactive mockup canvas: [index.html](index.html) (self-contained; works on GitHub Pages).
## Wall panel (1920×1080)
| Attract — The Party | Quest Log |
|---|---|
| ![The Party](img/panel-1a-party.png) | ![Quest Log](img/panel-1b-quest-log.png) |
| **Confirm** | **Quest complete** |
| ![Confirm](img/panel-1j-confirm.png) | ![Quest complete](img/panel-1c-complete.png) |
## Parent admin (390×844, @2x)
| Today | Tasks | Schedule |
|---|---|---|
| ![Today](img/admin-1d-today.png) | ![Tasks](img/admin-1e-tasks.png) | ![Schedule](img/admin-1f-schedule.png) |
| **History** | **Today (roomy)** | **Presence overrides** |
| ![History](img/admin-1g-history.png) | ![Today roomy](img/admin-1h-today-roomy.png) | ![Presence](img/admin-1i-presence.png) |
design/examples/img/admin-1d-today.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

design/examples/img/admin-1e-tasks.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

design/examples/img/admin-1f-schedule.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

design/examples/img/admin-1g-history.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

design/examples/img/admin-1h-today-roomy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB

design/examples/img/admin-1i-presence.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

design/examples/img/panel-1a-party.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

design/examples/img/panel-1b-quest-log.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

design/examples/img/panel-1c-complete.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

design/examples/img/panel-1j-confirm.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 992 KiB

design/examples/index.html
+385
View File
File diff suppressed because one or more lines are too long
design/tokens/nestquest-admin-tokens.css
+76
View File
@@ -0,0 +1,76 @@
/* ============================================================
NestQuest — Parent admin card tokens
Surface: phone, 390x844 reference. Plain CubeCraft styling,
no tabletop treatment, plain domain words in the UI.
Scope on the card host: nestquest-admin-card.
Derived from the approved mockups (admin screens 1d-1i).
Two densities were built; COMPACT is the default. Flip
--nq-a-density-* to the roomy values for the alternative.
============================================================ */
:host {
/* ── Brand + neutrals (CubeCraft tokens, verbatim) ─────── */
--nq-brand-blue: #3B3AB8;
--nq-brand-purple: #A035CC;
--nq-brand-gradient: linear-gradient(135deg, var(--nq-brand-blue), var(--nq-brand-purple));
--nq-brand-gradient-h: linear-gradient(90deg, var(--nq-brand-blue), var(--nq-brand-purple));
--nq-a-page: #F4F4F6;
--nq-a-surface: #FFFFFF;
--nq-a-surface-subtle: #FAFAFA;
--nq-a-selected: #EBEBF8; /* row being edited */
--nq-a-border: #E4E4EA;
--nq-a-divider: #EDEDF1;
--nq-a-ink: #18181D;
--nq-a-ink-secondary: #52525E;
--nq-a-ink-tertiary: #70707E; /* inactive rows, unselected nav icons */
--nq-a-success: #15803D;
--nq-a-danger: #DC2626;
--nq-a-danger-strong: #B91C1C;
--nq-a-danger-bg: #FEE2E2;
--nq-a-warning-ink: #92400E;
--nq-a-warning-ink-2: #78350F;
--nq-a-warning-bg: #FEF3C7;
--nq-a-warning-border: rgba(217,119,6,.35);
--nq-a-info-bg: #DBEAFE;
--nq-a-info-ink: #1E3A8A;
--nq-a-info-icon: #1D4ED8;
--nq-a-reversal: #7D28A0; /* un-complete events in history */
/* ── Type ─────────────────────────────────────────────── */
--nq-a-font: Nunito, system-ui, sans-serif;
--nq-a-size-screen: 24px; /* 800, screen title */
--nq-a-size-hero: 32px; /* 800, roomy "8 of 12 done" */
--nq-a-size-card-title: 19px; /* 800, roomy child card */
--nq-a-size-stat: 22px; /* 800, compact stat number */
--nq-a-size-row: 13.5px;/* 700, list row title */
--nq-a-size-meta: 11px; /* 600, row meta */
--nq-a-size-label: 10px; /* 700, uppercase field label */
--nq-a-track-label: .10em;
/* ── Density: COMPACT (default) ───────────────────────── */
--nq-a-density-page-pad: 14px 16px 92px; /* bottom clears the 70px tab bar */
--nq-a-density-gap: 10px;
--nq-a-density-card-pad: 13px;
--nq-a-density-row-pad: 11px 13px;
--nq-a-density-radius: 8px;
--nq-a-density-shadow: none;
/* Density: ROOMY — page-pad 18px 20px 92px; gap 16px;
card-pad 18px; radius 12px; shadow 0 4px 12px rgba(0,0,0,.06) */
/* ── Metrics ──────────────────────────────────────────── */
--nq-a-tabbar-height: 70px; /* + 12px safe-area padding */
--nq-a-tap-min: 44px; /* every row/control clears this */
--nq-a-radius-pill: 9999px;
--nq-a-radius-sheet: 20px 20px 0 0;
--nq-a-sheet-shadow: 0 -8px 28px rgba(9,9,11,.18);
--nq-a-progress-height: 6px; /* 8px roomy, 10px hero */
/* ── Motion ───────────────────────────────────────────── */
--nq-ease-out: cubic-bezier(0, 0, .2, 1);
--nq-dur-micro: 120ms;
--nq-dur-base: 200ms;
--nq-dur-modal: 350ms;
}
design/tokens/nestquest-panel-tokens.css
+94
View File
@@ -0,0 +1,94 @@
/* ============================================================
NestQuest — Kids' panel card tokens
Surface: DAKboard DAKOS wall panel, 1920x1080 landscape,
viewed from ~3 ft, no login, read/complete only.
Scope these on the card host: nestquest-quest-log-card,
nestquest-party-board-card.
Derived from the approved mockups (panel screens 1a, 1b, 1c, 1j).
============================================================ */
:host {
/* ── Parchment ground ─────────────────────────────────── */
--nq-p-parchment-top: #f0e4c7;
--nq-p-parchment-bottom: #ddcca3;
--nq-p-parchment: radial-gradient(ellipse at 25% 10%, rgba(255,255,255,.5), transparent 55%),
radial-gradient(ellipse at 85% 90%, rgba(120,86,44,.28), transparent 60%),
repeating-linear-gradient(93deg, rgba(150,115,70,.05) 0 2px, transparent 2px 6px),
repeating-linear-gradient(2deg, rgba(150,115,70,.04) 0 3px, transparent 3px 7px),
linear-gradient(var(--nq-p-parchment-top), var(--nq-p-parchment-bottom));
--nq-p-vignette: inset 0 0 200px rgba(80,52,20,.35);
/* Card surfaces sitting on parchment */
--nq-p-card-open: linear-gradient(#fdf7e6, #f2e7c9); /* incomplete quest */
--nq-p-card-done: linear-gradient(#f0e8d3, #e6dcc2); /* sealed quest */
--nq-p-card-panel: linear-gradient(#fcf6e6, #f1e6ca); /* adventurer plate, stat block */
--nq-p-card-border: rgba(120,88,48,.38);
--nq-p-panel-border: rgba(92,62,26,.40);
--nq-p-card-shadow: 0 3px 0 rgba(120,88,48,.20), inset 0 1px 0 rgba(255,255,255,.70);
--nq-p-panel-shadow: 0 6px 0 rgba(92,62,26,.18), inset 0 2px 0 rgba(255,255,255,.70);
--nq-p-frame-outer: 2px solid rgba(92,62,26,.45);
--nq-p-frame-inner: 1px solid rgba(92,62,26,.28);
--nq-p-rule: 2px solid rgba(92,62,26,.35);
/* ── Ink (all values >= 4.5:1 on parchment) ───────────── */
--nq-p-ink: #2b1f14; /* titles, quest names */
--nq-p-ink-secondary: #5c452a; /* meta, window labels, counts */
--nq-p-ink-muted: #6f6455; /* sealed quest titles only */
--nq-p-ink-away: #4d4433; /* away adventurer name */
--nq-p-ink-late: #8f1526; /* overdue line */
/* ── Brand (CubeCraft, toned down: accents only) ──────── */
--nq-brand-blue: #3B3AB8;
--nq-brand-purple: #A035CC;
--nq-brand-gradient: linear-gradient(135deg, var(--nq-brand-blue), var(--nq-brand-purple));
--nq-p-icon-tile: var(--nq-brand-gradient); /* open quest icon tile */
--nq-p-icon-tile-done: rgba(92,62,26,.16);
--nq-p-crest: var(--nq-brand-gradient);
--nq-p-crest-away: linear-gradient(135deg, #6b6b7a, #7a7286);
/* ── Wax seal (completed marker) ──────────────────────── */
--nq-p-seal: radial-gradient(circle at 35% 30%, #a8283a, #6d1322);
--nq-p-seal-shadow: 0 4px 10px rgba(60,10,20,.40), inset 0 0 0 4px rgba(255,255,255,.14);
--nq-p-seal-size: 78px; /* 168px on the quest-complete screen */
/* ── Dock (bottom strip, non-interactive) ─────────────── */
--nq-p-dock-bg: rgba(43,31,20,.90);
--nq-p-dock-ink: #f7efdb;
--nq-p-dock-ink-secondary: #d8c9a6;
--nq-p-dock-divider: rgba(233,220,189,.30);
--nq-p-dock-height: 84px;
/* ── Type ─────────────────────────────────────────────── */
--nq-p-font-display: 'Cinzel Decorative', Cinzel, serif; /* NestQuest, names, Quest complete */
--nq-p-font-heading: Cinzel, serif; /* section heads, quest titles, numerals */
--nq-p-font-body: Nunito, system-ui, sans-serif; /* meta lines, dock */
--nq-p-size-hero: 86px; /* 900 weight, "Quest complete" */
--nq-p-size-wordmark: 66px; /* 900 weight */
--nq-p-size-title: 56px; /* 700, "Declan's Quest Log" */
--nq-p-size-name: 48px; /* 700, adventurer name */
--nq-p-size-section: 32px; /* 700, Morning / Afternoon / Evening */
--nq-p-size-quest: 30px; /* 700, quest title */
--nq-p-size-body: 22px; /* 600 Nunito, meta — PANEL MINIMUM */
--nq-p-size-label: 21px; /* 600 Cinzel, uppercase, tracked */
--nq-p-track-label: .14em;
--nq-p-track-kicker: .30em;
/* ── Metrics: touch ───────────────────────────────────── */
--nq-p-quest-min-height: 116px; /* whole card is the tap target */
--nq-p-quest-gap: 24px; /* separation between tap targets */
--nq-p-button-height: 72px; /* "Complete" button on a quest card */
--nq-p-button-min-width: 150px;
--nq-p-confirm-button: 108px; /* confirm dialog buttons */
--nq-p-radius-card: 12px;
--nq-p-radius-panel: 20px;
--nq-p-radius-pill: 9999px;
--nq-p-page-inset: 62px;
--nq-p-frame-inset: 26px;
/* ── Motion (CubeCraft easing) ────────────────────────── */
--nq-ease-out: cubic-bezier(0, 0, .2, 1);
--nq-dur-micro: 120ms;
--nq-dur-base: 200ms;
--nq-dur-modal: 350ms;
}
img/admin-1e-tasks.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 252 KiB

After

Width:  |  Height:  |  Size: 150 KiB

img/admin-1f-schedule.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 121 KiB

index.html
+663 -375
View File
File diff suppressed because one or more lines are too long
index_v1.html
+385
View File
File diff suppressed because one or more lines are too long
support.js
+1911
View File
File diff suppressed because it is too large Load Diff
uploads/NestQuest-NoBG.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 KiB

uploads/NestQuest_Logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

uploads/nest_quest_small.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB