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.
674 lines
75 KiB
HTML
674 lines
75 KiB
HTML
<!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>
|