diff --git a/dashboard-mockup-v2.html b/dashboard-mockup-v2.html new file mode 100644 index 0000000..40792d5 --- /dev/null +++ b/dashboard-mockup-v2.html @@ -0,0 +1,651 @@ + + + + + +Second Brain — Taste Skill Mockup + + + + + + + + +
+ +
+
+
Monday, March 30
+

Good evening, Yusuf

+
+
+ + 3 tasks · Next: Change air filters + +
+
+ + +
+
+
+ Budget +
+
+
78
+
uncategorized transactions
$340,787 spent · $275,350 income this month
+
Review transactions
+
+ +
+
+ Inventory +
+
+
9 issues
+
37 needs review
46 items need attention
+
View items
+
+
+ + +
+
+
+ Calories +
+
+
1,374
+
remaining today
626 logged · 37g protein · 87g carbs
+
Log food
+
+ +
+
+
Y
+
+
Yusuf
+
626 cal · 1,374 left
+
+
+
+
+
37/150g
protein
+
87/200g
carbs
+
42/65g
fat
+
+
+
+ + +
+
+
+
Budget · March
+ View all → +
+
$340,787.9
+
spent this month
+
Income+$275,350
+
COG$144,236
+
Grocery$31,606
+
Mortgage$4,636
+
Shopping$2,321
+
Sadaqah$1,768
+
Bills$1,646
+
+ +
+
+
+
Issues
+ View all → +
+
+
+
Surface Laptop Studio 1TB
#33A77277RK
+ Issue +
+
+
+
Canon EOS Rebel T7
#8MB684380L
+ Issue +
+
+
+
Surface Pro X SQ2 16GB
#4VN564622
+ Issue +
+
+
+
X100F
#75H47874VX
+ Issue +
+
+
+
+ +
+ + diff --git a/dashboard-mockup.html b/dashboard-mockup.html new file mode 100644 index 0000000..5d6c03b --- /dev/null +++ b/dashboard-mockup.html @@ -0,0 +1,691 @@ + + + + + +Second Brain — Dashboard Mockup + + + + + + + + + +
+ +
+
+
Monday, March 30
+

Good evening, Yusuf

+
+
+ + 3 tasks · Next: Change air filters + +
+
+ + +
+
+
+ +
+
Budget
+
78
+
uncategorized transactions
$340,787 spent · $275,350 income
+
Review
+
+ +
+
+ +
+
Inventory
+
9
+
issues · 37 needs review
46 items need attention
+
View
+
+ +
+
+ +
+
Fitness
+
1,374
+
calories remaining today
626 cal · 37g protein · 87g carbs
+
Log food
+
+
+ + +
+
+
+
Budget · February
+ View all → +
+
$340,787.9
+
spent this month
+
Income+$275,350.16
+
COG$144,236.61
+
Grocery$31,606.13
+
Mortgage$4,636.64
+
Shopping$2,321.30
+
Sadaqah$1,768
+
+ +
+
+
+
Fitness · Today
+ Details → +
+
+
Y
+
+
Yusuf
+
626 cal · 1,374 remaining
+
+
+
+
+
+
37/150g
+
protein
+
+
+
87/200g
+
carbs
+
+
+
42/65g
+
fat
+
+
+
+ +
+
+
Issues
+ View all → +
+
+
+
+
Surface Laptop Studio - 1TB
+
Order #33A77277RK
+
+ Issue +
+
+
+
+
Canon EOS Rebel T7
+
Order #8MB684380L
+
+ Issue +
+
+
+
+
Surface Pro X SQ2, 16GB
+
Order #4VN564622
+
+ Issue +
+
+
+
+
+ + + diff --git a/frontend-v2/src/app.css b/frontend-v2/src/app.css index f952d74..809cc72 100644 --- a/frontend-v2/src/app.css +++ b/frontend-v2/src/app.css @@ -232,6 +232,29 @@ 100% { background-position: -200% 0; } } +/* ── Staggered reveal ── + * Add .stagger to a container and children auto-cascade. + * Or use .reveal on individual elements. + */ +@keyframes cardIn { + from { opacity: 0; transform: translateY(12px); } + to { opacity: 1; transform: translateY(0); } +} +.reveal { + animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; +} +.stagger > * { + animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; +} +.stagger > *:nth-child(1) { animation-delay: 0ms; } +.stagger > *:nth-child(2) { animation-delay: 60ms; } +.stagger > *:nth-child(3) { animation-delay: 120ms; } +.stagger > *:nth-child(4) { animation-delay: 180ms; } +.stagger > *:nth-child(5) { animation-delay: 240ms; } +.stagger > *:nth-child(6) { animation-delay: 300ms; } +.stagger > *:nth-child(7) { animation-delay: 360ms; } +.stagger > *:nth-child(8) { animation-delay: 420ms; } + /* ── Buttons ── */ .btn-primary { padding: var(--sp-2) var(--sp-4); @@ -245,8 +268,8 @@ transition: all 0.2s ease; letter-spacing: 0.01em; } -.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } -.btn-primary:active { transform: translateY(0); } +.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-dim); } +.btn-primary:active { transform: scale(0.97); filter: none; } .btn-primary.full { width: 100%; padding: var(--sp-3) var(--sp-4); @@ -267,6 +290,7 @@ transition: all var(--transition); } .btn-secondary:hover { background: var(--card-hover); color: var(--text-1); } +.btn-secondary:active { transform: scale(0.97); } .btn-icon { width: 36px; @@ -358,14 +382,12 @@ align-items: center; gap: var(--inner-gap); padding: var(--row-pad-y) var(--row-pad-x); - transition: background 0.15s ease; + transition: background 0.2s ease, transform 0.2s ease; border-radius: var(--radius-sm); - margin: 0 calc(-1 * var(--sp-1)); - padding-left: calc(var(--row-pad-x) + var(--sp-1)); - padding-right: calc(var(--row-pad-x) + var(--sp-1)); } .data-row:hover { background: var(--card-hover); } .data-row + .data-row { border-top: 1px solid var(--border); } +.data-row:active { transform: scale(0.995); } /* ── Badges ── * Semantic status badges. Variants: error, success, warning, accent, muted. diff --git a/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte b/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte index 6309176..ade52d5 100644 --- a/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte +++ b/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte @@ -43,13 +43,13 @@ display: flex; align-items: center; justify-content: space-between; - padding: var(--sp-5) var(--sp-5); + padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border); - box-shadow: var(--shadow-sm); - transition: all 0.2s ease; + box-shadow: var(--shadow-xs); + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; text-decoration: none; } @@ -59,17 +59,16 @@ .action-card:hover { transform: translateY(-2px); - box-shadow: var(--shadow-lg); + box-shadow: var(--shadow-md); } + .action-card.budget:hover { box-shadow: 0 4px 16px var(--accent-dim), var(--shadow-sm); } + .action-card.inventory:hover { box-shadow: 0 4px 16px var(--error-dim), var(--shadow-sm); } + .action-card.fitness:hover { box-shadow: 0 4px 16px var(--success-dim), var(--shadow-sm); } + + .action-card:active { transform: scale(0.985); } .action-card.primary { - box-shadow: var(--shadow-lg); - transform: translateY(-1px); - } - - .action-card.primary:hover { - transform: translateY(-3px); - box-shadow: var(--shadow-lg); + box-shadow: var(--shadow-sm); } .action-card-left { diff --git a/frontend-v2/src/routes/(app)/+page.svelte b/frontend-v2/src/routes/(app)/+page.svelte index 9938f7a..92c80da 100644 --- a/frontend-v2/src/routes/(app)/+page.svelte +++ b/frontend-v2/src/routes/(app)/+page.svelte @@ -158,7 +158,7 @@ { taskPanelOpen = false; loadTasks(); }} /> -
+