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

Design: Sunday-first Schedule week, multi-pattern presence, task Start date #1

Merged
overseer merged 1 commits from design/update-sunday-first into pages 2026-09-25 12:52:41 -04:00
Conversation 0 Commits 1 Files Changed 6
+18 -8
6 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
NestQuest Mockups.dc.html
+9 -4
View File
@@ -403,6 +403,8 @@ a{color:#3B3AB8}a:hover{color:#A035CC}
<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>
@@ -425,15 +427,16 @@ a{color:#3B3AB8}a:hover{color:#A035CC}
<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 Monday, Sep 1</div></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>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span></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>
@@ -473,8 +476,10 @@ a{color:#3B3AB8}a:hover{color:#A035CC}
</div>
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46;margin-bottom:10px">Presence pattern</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 · Jordyn</span><span style="font:600 12px Nunito;color:#52525E">Weeks 1 &amp; 3 of cycle</span></div>
<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>
design/examples/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

design/examples/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

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
+9 -4
View File
@@ -403,6 +403,8 @@ a{color:#3B3AB8}a:hover{color:#A035CC}
<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>
@@ -425,15 +427,16 @@ a{color:#3B3AB8}a:hover{color:#A035CC}
<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 Monday, Sep 1</div></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>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span></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>
@@ -473,8 +476,10 @@ a{color:#3B3AB8}a:hover{color:#A035CC}
</div>
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46;margin-bottom:10px">Presence pattern</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 · Jordyn</span><span style="font:600 12px Nunito;color:#52525E">Weeks 1 &amp; 3 of cycle</span></div>
<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>