style: taste-skill refinements — tinted shadows, stagger animations, tactile press
Pre-redesign checkpoint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
651
dashboard-mockup-v2.html
Normal file
651
dashboard-mockup-v2.html
Normal file
@@ -0,0 +1,651 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Second Brain — Taste Skill Mockup</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* ══════════════════════════════════════════════════
|
||||||
|
TASTE SKILL MOCKUP — "Zinc + Emerald"
|
||||||
|
|
||||||
|
DESIGN_VARIANCE: 8 (Asymmetric bento grid)
|
||||||
|
MOTION_INTENSITY: 6 (CSS stagger + spring easing)
|
||||||
|
VISUAL_DENSITY: 4 (Art gallery breathing room)
|
||||||
|
|
||||||
|
Palette: Zinc neutrals + single Emerald accent
|
||||||
|
Font: Outfit (geometric sans) + JetBrains Mono
|
||||||
|
Layout: Asymmetric 2fr/1fr bento, no 3-equal-cols
|
||||||
|
Cards: Used ONLY for elevation hierarchy
|
||||||
|
══════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font: 'Outfit', system-ui, sans-serif;
|
||||||
|
--mono: 'JetBrains Mono', monospace;
|
||||||
|
|
||||||
|
/* Zinc neutral base — cool, not warm */
|
||||||
|
--canvas: #FAFAFA;
|
||||||
|
--surface: #FFFFFF;
|
||||||
|
--card: #FFFFFF;
|
||||||
|
--card-hover: #F4F4F5;
|
||||||
|
--border: rgba(0,0,0,0.06);
|
||||||
|
|
||||||
|
/* Zinc text scale */
|
||||||
|
--text-1: #18181B;
|
||||||
|
--text-2: #3F3F46;
|
||||||
|
--text-3: #71717A;
|
||||||
|
--text-4: #A1A1AA;
|
||||||
|
--text-5: #D4D4D8;
|
||||||
|
|
||||||
|
/* Single accent: Emerald — desaturated, confident */
|
||||||
|
--accent: #059669;
|
||||||
|
--accent-dim: rgba(5,150,105,0.07);
|
||||||
|
|
||||||
|
/* Semantic */
|
||||||
|
--error: #DC2626;
|
||||||
|
--error-dim: rgba(220,38,38,0.06);
|
||||||
|
--warning: #D97706;
|
||||||
|
|
||||||
|
/* Tinted shadows (zinc-tinted, not pure black) */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(24,24,27,0.04), 0 4px 8px rgba(24,24,27,0.02);
|
||||||
|
--shadow-md: 0 2px 8px rgba(24,24,27,0.05), 0 12px 24px rgba(24,24,27,0.04);
|
||||||
|
--shadow-lg: 0 4px 16px rgba(24,24,27,0.06), 0 24px 48px rgba(24,24,27,0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
font-family: var(--font);
|
||||||
|
background: var(--canvas);
|
||||||
|
color: var(--text-1);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* ═══ NAV ═══ */
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background: rgba(250,250,250,0.8);
|
||||||
|
backdrop-filter: blur(20px) saturate(1.4);
|
||||||
|
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-inner {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 24px;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
color: var(--text-1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 7px;
|
||||||
|
}
|
||||||
|
.nav-brand svg { color: var(--accent); }
|
||||||
|
|
||||||
|
.nav-links { display: flex; gap: 1px; flex: 1; }
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-4);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.nav-link:hover { color: var(--text-2); background: rgba(0,0,0,0.03); }
|
||||||
|
.nav-link.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
|
||||||
|
|
||||||
|
.nav-end {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.nav-btn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-4);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.nav-btn:hover { color: var(--text-2); background: rgba(0,0,0,0.04); }
|
||||||
|
|
||||||
|
/* ═══ PAGE ═══ */
|
||||||
|
.page {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 24px 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ HEADER — Asymmetric split ═══ */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 32px;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeUp {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-date {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--text-1);
|
||||||
|
}
|
||||||
|
.header-h1 strong { font-weight: 800; }
|
||||||
|
|
||||||
|
/* Task pill */
|
||||||
|
.task-pill {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 8px 14px 8px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.task-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
|
||||||
|
.task-pill:active { transform: scale(0.97); }
|
||||||
|
|
||||||
|
.tp-dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent);
|
||||||
|
animation: breathe 2.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes breathe {
|
||||||
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||||||
|
50% { opacity: 0.4; transform: scale(0.85); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.tp-text { font-size: 12px; font-weight: 500; color: var(--text-3); }
|
||||||
|
.tp-text b { color: var(--text-1); font-weight: 600; }
|
||||||
|
.tp-arrow { color: var(--text-5); transition: all 0.2s; }
|
||||||
|
.task-pill:hover .tp-arrow { color: var(--accent); transform: translateX(2px); }
|
||||||
|
|
||||||
|
/* ═══ BENTO — Asymmetric 2fr/1fr (NOT 3-equal) ═══ */
|
||||||
|
.bento {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 22px 24px;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.bento-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
|
||||||
|
.bento-card:active { transform: scale(0.985); }
|
||||||
|
|
||||||
|
/* Stagger */
|
||||||
|
.bento-card { animation: cardReveal 0.45s cubic-bezier(0.16,1,0.3,1) both; }
|
||||||
|
.bento-card:nth-child(1) { animation-delay: 50ms; }
|
||||||
|
.bento-card:nth-child(2) { animation-delay: 100ms; }
|
||||||
|
.bento-card:nth-child(3) { animation-delay: 150ms; }
|
||||||
|
.bento-card:nth-child(4) { animation-delay: 200ms; }
|
||||||
|
|
||||||
|
@keyframes cardReveal {
|
||||||
|
from { opacity: 0; transform: translateY(14px) scale(0.98); }
|
||||||
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Top accent on hover */
|
||||||
|
.bento-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 16px 16px 0 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.bento-card:hover::after { opacity: 1; }
|
||||||
|
.bento-card.emerald::after { background: var(--accent); }
|
||||||
|
.bento-card.rose::after { background: var(--error); }
|
||||||
|
.bento-card.amber::after { background: var(--warning); }
|
||||||
|
|
||||||
|
.bc-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--text-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc-icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bc-icon.emerald { background: var(--accent-dim); color: var(--accent); }
|
||||||
|
.bc-icon.rose { background: var(--error-dim); color: var(--error); }
|
||||||
|
.bc-icon.amber { background: rgba(217,119,6,0.07); color: var(--warning); }
|
||||||
|
|
||||||
|
.bc-value {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: var(--mono);
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--text-1);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc-value-sm {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: var(--mono);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
color: var(--text-1);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-3);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.bc-desc strong { color: var(--text-2); font-weight: 500; }
|
||||||
|
|
||||||
|
.bc-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-top: 10px;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
transition: gap 0.2s;
|
||||||
|
}
|
||||||
|
.bento-card:hover .bc-action { gap: 6px; }
|
||||||
|
|
||||||
|
/* Second bento row */
|
||||||
|
.bento-row-2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ MODULES — 7:3 split ═══ */
|
||||||
|
.modules {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 7fr 3fr;
|
||||||
|
gap: 10px;
|
||||||
|
animation: cardReveal 0.45s cubic-bezier(0.16,1,0.3,1) both;
|
||||||
|
animation-delay: 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mod {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 22px 24px;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mod-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mod-title {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--text-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mod-link {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.mod-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* Budget */
|
||||||
|
.b-amount {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 800;
|
||||||
|
font-family: var(--mono);
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
color: var(--text-1);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-sub {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-4);
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 9px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.b-row + .b-row { border-top: 1px solid var(--border); }
|
||||||
|
.b-row-name { color: var(--text-3); font-weight: 400; }
|
||||||
|
.b-row-val { font-family: var(--mono); font-weight: 500; color: var(--text-2); font-size: 12px; }
|
||||||
|
.b-row-val.green { color: var(--accent); }
|
||||||
|
|
||||||
|
/* Right column */
|
||||||
|
.right-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fitness */
|
||||||
|
.fit-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.fit-av {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent-dim);
|
||||||
|
color: var(--accent);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.fit-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
|
||||||
|
.fit-sub { font-size: 11px; color: var(--text-4); margin-top: 1px; }
|
||||||
|
|
||||||
|
.fit-bar {
|
||||||
|
height: 4px;
|
||||||
|
background: var(--card-hover);
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.fit-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--accent);
|
||||||
|
width: 31%;
|
||||||
|
transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fit-macros {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.fm-val { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--text-1); }
|
||||||
|
.fm-unit { font-size: 10px; color: var(--text-5); }
|
||||||
|
.fm-label { font-size: 10px; color: var(--text-4); margin-top: 1px; }
|
||||||
|
|
||||||
|
/* Issues — no card boxing, just divide-y */
|
||||||
|
.iss-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
.iss-row + .iss-row { border-top: 1px solid var(--border); }
|
||||||
|
|
||||||
|
.iss-bar {
|
||||||
|
width: 2px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 1px;
|
||||||
|
background: var(--error);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.iss-info { flex: 1; min-width: 0; }
|
||||||
|
.iss-name {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-2);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.iss-meta { font-size: 10px; color: var(--text-5); }
|
||||||
|
|
||||||
|
.iss-badge {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
padding: 2px 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--error-dim);
|
||||||
|
color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ MOBILE ═══ */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.nav-inner { padding: 0 16px; }
|
||||||
|
.page { padding: 20px 16px 80px; }
|
||||||
|
.header { flex-direction: column; align-items: flex-start; gap: 12px; }
|
||||||
|
.header-h1 { font-size: 22px; }
|
||||||
|
.task-pill { width: 100%; }
|
||||||
|
.bento { grid-template-columns: 1fr; }
|
||||||
|
.bento-row-2 { grid-template-columns: 1fr; }
|
||||||
|
.modules { grid-template-columns: 1fr; }
|
||||||
|
.b-amount { font-size: 28px; }
|
||||||
|
.bc-value { font-size: 24px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-inner">
|
||||||
|
<a class="nav-brand">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>
|
||||||
|
Second Brain
|
||||||
|
</a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a class="nav-link active">Dashboard</a>
|
||||||
|
<a class="nav-link">Tasks</a>
|
||||||
|
<a class="nav-link">Trips</a>
|
||||||
|
<a class="nav-link">Fitness</a>
|
||||||
|
<a class="nav-link">Inventory</a>
|
||||||
|
<a class="nav-link">Budget</a>
|
||||||
|
<a class="nav-link">Reader</a>
|
||||||
|
<a class="nav-link">Media</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-end">
|
||||||
|
<button class="nav-btn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg></button>
|
||||||
|
<button class="nav-btn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg></button>
|
||||||
|
<button class="nav-btn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<div class="header-date">Monday, March 30</div>
|
||||||
|
<h1 class="header-h1">Good evening, <strong>Yusuf</strong></h1>
|
||||||
|
</div>
|
||||||
|
<div class="task-pill">
|
||||||
|
<span class="tp-dot"></span>
|
||||||
|
<span class="tp-text"><b>3 tasks</b> · Next: Change air filters</span>
|
||||||
|
<svg class="tp-arrow" width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 3l3.5 3.5L5 10"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 1: Budget (wide) + Inventory (narrow) -->
|
||||||
|
<div class="bento">
|
||||||
|
<div class="bento-card emerald">
|
||||||
|
<div class="bc-top">
|
||||||
|
<span class="bc-label">Budget</span>
|
||||||
|
<div class="bc-icon emerald"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
|
||||||
|
</div>
|
||||||
|
<div class="bc-value">78</div>
|
||||||
|
<div class="bc-desc">uncategorized transactions<br><strong>$340,787 spent</strong> · $275,350 income this month</div>
|
||||||
|
<div class="bc-action">Review transactions <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bento-card rose">
|
||||||
|
<div class="bc-top">
|
||||||
|
<span class="bc-label">Inventory</span>
|
||||||
|
<div class="bc-icon rose"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
|
||||||
|
</div>
|
||||||
|
<div class="bc-value-sm">9 issues</div>
|
||||||
|
<div class="bc-desc">37 needs review<br>46 items need attention</div>
|
||||||
|
<div class="bc-action">View items <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 2: Fitness (half) + Calories (half) — NOT 3-equal -->
|
||||||
|
<div class="bento-row-2">
|
||||||
|
<div class="bento-card emerald">
|
||||||
|
<div class="bc-top">
|
||||||
|
<span class="bc-label">Calories</span>
|
||||||
|
<div class="bc-icon emerald"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
|
||||||
|
</div>
|
||||||
|
<div class="bc-value">1,374</div>
|
||||||
|
<div class="bc-desc">remaining today<br><strong>626 logged</strong> · 37g protein · 87g carbs</div>
|
||||||
|
<div class="bc-action">Log food <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bento-card" style="display:flex;flex-direction:column;justify-content:center;">
|
||||||
|
<div class="fit-header">
|
||||||
|
<div class="fit-av">Y</div>
|
||||||
|
<div>
|
||||||
|
<div class="fit-name">Yusuf</div>
|
||||||
|
<div class="fit-sub">626 cal · 1,374 left</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fit-bar"><div class="fit-bar-fill"></div></div>
|
||||||
|
<div class="fit-macros">
|
||||||
|
<div><div class="fm-val">37<span class="fm-unit">/150g</span></div><div class="fm-label">protein</div></div>
|
||||||
|
<div><div class="fm-val">87<span class="fm-unit">/200g</span></div><div class="fm-label">carbs</div></div>
|
||||||
|
<div><div class="fm-val">42<span class="fm-unit">/65g</span></div><div class="fm-label">fat</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MODULES: Budget detail (wide) + Issues (narrow) -->
|
||||||
|
<div class="modules">
|
||||||
|
<div class="mod">
|
||||||
|
<div class="mod-head">
|
||||||
|
<div class="mod-title">Budget · March</div>
|
||||||
|
<a class="mod-link">View all →</a>
|
||||||
|
</div>
|
||||||
|
<div class="b-amount">$340,787.9</div>
|
||||||
|
<div class="b-sub">spent this month</div>
|
||||||
|
<div class="b-row"><span class="b-row-name">Income</span><span class="b-row-val green">+$275,350</span></div>
|
||||||
|
<div class="b-row"><span class="b-row-name">COG</span><span class="b-row-val">$144,236</span></div>
|
||||||
|
<div class="b-row"><span class="b-row-name">Grocery</span><span class="b-row-val">$31,606</span></div>
|
||||||
|
<div class="b-row"><span class="b-row-name">Mortgage</span><span class="b-row-val">$4,636</span></div>
|
||||||
|
<div class="b-row"><span class="b-row-name">Shopping</span><span class="b-row-val">$2,321</span></div>
|
||||||
|
<div class="b-row"><span class="b-row-name">Sadaqah</span><span class="b-row-val">$1,768</span></div>
|
||||||
|
<div class="b-row"><span class="b-row-name">Bills</span><span class="b-row-val">$1,646</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-col">
|
||||||
|
<div class="mod">
|
||||||
|
<div class="mod-head">
|
||||||
|
<div class="mod-title">Issues</div>
|
||||||
|
<a class="mod-link">View all →</a>
|
||||||
|
</div>
|
||||||
|
<div class="iss-row">
|
||||||
|
<div class="iss-bar"></div>
|
||||||
|
<div class="iss-info"><div class="iss-name">Surface Laptop Studio 1TB</div><div class="iss-meta">#33A77277RK</div></div>
|
||||||
|
<span class="iss-badge">Issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="iss-row">
|
||||||
|
<div class="iss-bar"></div>
|
||||||
|
<div class="iss-info"><div class="iss-name">Canon EOS Rebel T7</div><div class="iss-meta">#8MB684380L</div></div>
|
||||||
|
<span class="iss-badge">Issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="iss-row">
|
||||||
|
<div class="iss-bar"></div>
|
||||||
|
<div class="iss-info"><div class="iss-name">Surface Pro X SQ2 16GB</div><div class="iss-meta">#4VN564622</div></div>
|
||||||
|
<span class="iss-badge">Issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="iss-row">
|
||||||
|
<div class="iss-bar"></div>
|
||||||
|
<div class="iss-info"><div class="iss-name">X100F</div><div class="iss-meta">#75H47874VX</div></div>
|
||||||
|
<span class="iss-badge">Issue</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
691
dashboard-mockup.html
Normal file
691
dashboard-mockup.html
Normal file
@@ -0,0 +1,691 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Second Brain — Dashboard Mockup</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* ══════════════════════════════════════
|
||||||
|
DESIGN DIRECTION: "Warm Precision"
|
||||||
|
|
||||||
|
Concept: A personal command center that
|
||||||
|
feels like an expensive notebook — warm
|
||||||
|
paper tones, sharp typographic hierarchy,
|
||||||
|
and generous breathing room. The accent
|
||||||
|
is a single deep teal that cuts through
|
||||||
|
warm neutrals like ink on cream paper.
|
||||||
|
══════════════════════════════════════ */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font: 'Outfit', -apple-system, sans-serif;
|
||||||
|
--mono: 'JetBrains Mono', monospace;
|
||||||
|
|
||||||
|
/* Warm stone palette */
|
||||||
|
--canvas: #F0EFEB;
|
||||||
|
--surface: #FAF9F6;
|
||||||
|
--card: #FFFFFF;
|
||||||
|
--card-hover: #F5F4F0;
|
||||||
|
|
||||||
|
--border: rgba(0,0,0,0.06);
|
||||||
|
--border-strong: rgba(0,0,0,0.10);
|
||||||
|
|
||||||
|
/* Warm text hierarchy */
|
||||||
|
--text-1: #1C1917;
|
||||||
|
--text-2: #44403C;
|
||||||
|
--text-3: #78716C;
|
||||||
|
--text-4: #A8A29E;
|
||||||
|
|
||||||
|
/* Deep teal accent — singular, confident */
|
||||||
|
--accent: #0D9488;
|
||||||
|
--accent-dim: rgba(13,148,136,0.08);
|
||||||
|
--accent-bg: rgba(13,148,136,0.06);
|
||||||
|
|
||||||
|
/* Semantic */
|
||||||
|
--success: #059669;
|
||||||
|
--error: #DC2626;
|
||||||
|
--warning: #D97706;
|
||||||
|
--error-dim: rgba(220,38,38,0.06);
|
||||||
|
--success-dim: rgba(5,150,105,0.06);
|
||||||
|
|
||||||
|
/* Shadows — warm tinted */
|
||||||
|
--shadow-sm: 0 1px 3px rgba(28,25,23,0.04), 0 4px 12px rgba(28,25,23,0.03);
|
||||||
|
--shadow-md: 0 2px 8px rgba(28,25,23,0.05), 0 12px 28px rgba(28,25,23,0.06);
|
||||||
|
--shadow-lg: 0 4px 16px rgba(28,25,23,0.06), 0 20px 40px rgba(28,25,23,0.08);
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
|
||||||
|
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
|
||||||
|
|
||||||
|
--radius: 14px;
|
||||||
|
--radius-sm: 8px;
|
||||||
|
--radius-xs: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; border-color: var(--border); }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
font-family: var(--font);
|
||||||
|
background: var(--canvas);
|
||||||
|
color: var(--text-1);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* ══ NAVBAR ══ */
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background: rgba(240,239,235,0.85);
|
||||||
|
backdrop-filter: blur(20px) saturate(1.5);
|
||||||
|
-webkit-backdrop-filter: blur(20px) saturate(1.5);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
height: 52px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-inner {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--text-1);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo svg { color: var(--accent); }
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
padding: 5px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-3);
|
||||||
|
transition: all 0.15s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.nav-link:hover { color: var(--text-1); background: rgba(0,0,0,0.04); }
|
||||||
|
.nav-link.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
|
||||||
|
|
||||||
|
.nav-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-3);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
.nav-icon:hover { color: var(--text-1); background: rgba(0,0,0,0.04); }
|
||||||
|
|
||||||
|
/* ══ PAGE ══ */
|
||||||
|
.page {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 36px 32px 80px;
|
||||||
|
animation: pageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pageIn {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ══ HEADER ══ */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-date {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-greeting {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: var(--text-1);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
.header-greeting strong { font-weight: 700; }
|
||||||
|
|
||||||
|
/* ══ TASK TRIGGER ══ */
|
||||||
|
.task-pill {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 10px 16px 10px 12px;
|
||||||
|
border-radius: 100px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.task-pill:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
.task-pill:active { transform: scale(0.97); }
|
||||||
|
|
||||||
|
.task-pill-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent);
|
||||||
|
flex-shrink: 0;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
.task-pill-dot.overdue { background: var(--error); }
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-pill-text {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
.task-pill-text strong { font-weight: 600; color: var(--text-1); }
|
||||||
|
|
||||||
|
.task-pill-arrow {
|
||||||
|
color: var(--text-4);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
.task-pill:hover .task-pill-arrow { transform: translateX(2px); color: var(--accent); }
|
||||||
|
|
||||||
|
/* ══ BENTO GRID ══ */
|
||||||
|
.bento {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-card {
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
}
|
||||||
|
.bento-card:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.bento-card:active { transform: scale(0.985); }
|
||||||
|
.bento-card:nth-child(1) { animation-delay: 0ms; }
|
||||||
|
.bento-card:nth-child(2) { animation-delay: 60ms; }
|
||||||
|
.bento-card:nth-child(3) { animation-delay: 120ms; }
|
||||||
|
|
||||||
|
@keyframes cardIn {
|
||||||
|
from { opacity: 0; transform: translateY(16px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card accent stripe */
|
||||||
|
.bento-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: var(--radius) var(--radius) 0 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.bento-card:hover::before { opacity: 1; }
|
||||||
|
.bento-card.teal::before { background: var(--accent); }
|
||||||
|
.bento-card.rose::before { background: var(--error); }
|
||||||
|
.bento-card.emerald::before { background: var(--success); }
|
||||||
|
|
||||||
|
.bento-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.bento-icon.teal { background: var(--accent-dim); color: var(--accent); }
|
||||||
|
.bento-icon.rose { background: var(--error-dim); color: var(--error); }
|
||||||
|
.bento-icon.emerald { background: var(--success-dim); color: var(--success); }
|
||||||
|
|
||||||
|
.bento-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--text-4);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-value {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-1);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
font-family: var(--mono);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-3);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-top: 12px;
|
||||||
|
transition: gap 0.2s;
|
||||||
|
}
|
||||||
|
.bento-card:hover .bento-action { gap: 6px; }
|
||||||
|
|
||||||
|
/* ══ MODULE GRID ══ */
|
||||||
|
.modules {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.4fr 0.6fr;
|
||||||
|
gap: 12px;
|
||||||
|
animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||||
|
animation-delay: 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module {
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.module-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module-title {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--text-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.module-link {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.module-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* Budget */
|
||||||
|
.budget-amount {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: var(--mono);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
color: var(--text-1);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.budget-sub {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-3);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.budget-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
transition: background 0.15s;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin: 0 -8px;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
.budget-row:hover { background: var(--card-hover); }
|
||||||
|
.budget-row + .budget-row { border-top: 1px solid var(--border); }
|
||||||
|
|
||||||
|
.budget-row-name { color: var(--text-2); }
|
||||||
|
.budget-row-val { font-family: var(--mono); font-weight: 500; color: var(--text-1); }
|
||||||
|
.budget-row-val.income { color: var(--success); }
|
||||||
|
|
||||||
|
/* Right stack */
|
||||||
|
.right-stack {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fitness */
|
||||||
|
.fitness-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fitness-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent-dim);
|
||||||
|
color: var(--accent);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fitness-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
|
||||||
|
.fitness-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
|
||||||
|
|
||||||
|
.fitness-bar {
|
||||||
|
height: 5px;
|
||||||
|
background: var(--card-hover);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.fitness-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 31%;
|
||||||
|
transition: width 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fitness-macros {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.macro-val {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: var(--mono);
|
||||||
|
color: var(--text-1);
|
||||||
|
}
|
||||||
|
.macro-unit { font-size: 11px; color: var(--text-4); font-weight: 400; }
|
||||||
|
.macro-label { font-size: 11px; color: var(--text-3); margin-top: 2px; }
|
||||||
|
|
||||||
|
/* Issues */
|
||||||
|
.issue-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.issue-row + .issue-row { border-top: 1px solid var(--border); }
|
||||||
|
|
||||||
|
.issue-dot {
|
||||||
|
width: 3px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--error);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.issue-info { flex: 1; min-width: 0; }
|
||||||
|
.issue-name {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-1);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.issue-meta { font-size: 11px; color: var(--text-4); margin-top: 1px; }
|
||||||
|
|
||||||
|
.issue-badge {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--error-dim);
|
||||||
|
color: var(--error);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ══ RESPONSIVE ══ */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav { padding: 0 16px; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.page { padding: 24px 16px 80px; }
|
||||||
|
.header { flex-direction: column; gap: 16px; }
|
||||||
|
.header-greeting { font-size: 24px; }
|
||||||
|
.task-pill { width: 100%; }
|
||||||
|
.bento { grid-template-columns: 1fr; }
|
||||||
|
.modules { grid-template-columns: 1fr; }
|
||||||
|
.budget-amount { font-size: 26px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- NAVBAR -->
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-inner">
|
||||||
|
<a class="nav-logo">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>
|
||||||
|
Second Brain
|
||||||
|
</a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a class="nav-link active">Dashboard</a>
|
||||||
|
<a class="nav-link">Tasks</a>
|
||||||
|
<a class="nav-link">Trips</a>
|
||||||
|
<a class="nav-link">Fitness</a>
|
||||||
|
<a class="nav-link">Inventory</a>
|
||||||
|
<a class="nav-link">Budget</a>
|
||||||
|
<a class="nav-link">Reader</a>
|
||||||
|
<a class="nav-link">Media</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-right">
|
||||||
|
<div class="nav-icon">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="nav-icon">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M6.34 17.66l-1.41 1.41"/><path d="M19.07 4.93l-1.41 1.41"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="nav-icon">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<div class="header-date">Monday, March 30</div>
|
||||||
|
<h1 class="header-greeting">Good evening, <strong>Yusuf</strong></h1>
|
||||||
|
</div>
|
||||||
|
<div class="task-pill">
|
||||||
|
<span class="task-pill-dot"></span>
|
||||||
|
<span class="task-pill-text"><strong>3 tasks</strong> · Next: Change air filters</span>
|
||||||
|
<svg class="task-pill-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 3l4 4-4 4"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BENTO GRID -->
|
||||||
|
<div class="bento">
|
||||||
|
<div class="bento-card teal">
|
||||||
|
<div class="bento-icon teal">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="bento-label">Budget</div>
|
||||||
|
<div class="bento-value">78</div>
|
||||||
|
<div class="bento-desc">uncategorized transactions<br>$340,787 spent · $275,350 income</div>
|
||||||
|
<div class="bento-action">Review <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4.5 2.5l3.5 3.5-3.5 3.5"/></svg></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bento-card rose">
|
||||||
|
<div class="bento-icon rose">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="bento-label">Inventory</div>
|
||||||
|
<div class="bento-value">9</div>
|
||||||
|
<div class="bento-desc">issues · 37 needs review<br>46 items need attention</div>
|
||||||
|
<div class="bento-action">View <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4.5 2.5l3.5 3.5-3.5 3.5"/></svg></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bento-card emerald">
|
||||||
|
<div class="bento-icon emerald">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="bento-label">Fitness</div>
|
||||||
|
<div class="bento-value">1,374</div>
|
||||||
|
<div class="bento-desc">calories remaining today<br>626 cal · 37g protein · 87g carbs</div>
|
||||||
|
<div class="bento-action">Log food <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4.5 2.5l3.5 3.5-3.5 3.5"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MODULES -->
|
||||||
|
<div class="modules">
|
||||||
|
<div class="module">
|
||||||
|
<div class="module-head">
|
||||||
|
<div class="module-title">Budget · February</div>
|
||||||
|
<a class="module-link">View all →</a>
|
||||||
|
</div>
|
||||||
|
<div class="budget-amount">$340,787.9</div>
|
||||||
|
<div class="budget-sub">spent this month</div>
|
||||||
|
<div class="budget-row"><span class="budget-row-name">Income</span><span class="budget-row-val income">+$275,350.16</span></div>
|
||||||
|
<div class="budget-row"><span class="budget-row-name">COG</span><span class="budget-row-val">$144,236.61</span></div>
|
||||||
|
<div class="budget-row"><span class="budget-row-name">Grocery</span><span class="budget-row-val">$31,606.13</span></div>
|
||||||
|
<div class="budget-row"><span class="budget-row-name">Mortgage</span><span class="budget-row-val">$4,636.64</span></div>
|
||||||
|
<div class="budget-row"><span class="budget-row-name">Shopping</span><span class="budget-row-val">$2,321.30</span></div>
|
||||||
|
<div class="budget-row"><span class="budget-row-name">Sadaqah</span><span class="budget-row-val">$1,768</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-stack">
|
||||||
|
<div class="module">
|
||||||
|
<div class="module-head">
|
||||||
|
<div class="module-title">Fitness · Today</div>
|
||||||
|
<a class="module-link">Details →</a>
|
||||||
|
</div>
|
||||||
|
<div class="fitness-top">
|
||||||
|
<div class="fitness-avatar">Y</div>
|
||||||
|
<div>
|
||||||
|
<div class="fitness-name">Yusuf</div>
|
||||||
|
<div class="fitness-sub">626 cal · 1,374 remaining</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fitness-bar"><div class="fitness-bar-fill"></div></div>
|
||||||
|
<div class="fitness-macros">
|
||||||
|
<div>
|
||||||
|
<div class="macro-val">37<span class="macro-unit">/150g</span></div>
|
||||||
|
<div class="macro-label">protein</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="macro-val">87<span class="macro-unit">/200g</span></div>
|
||||||
|
<div class="macro-label">carbs</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="macro-val">42<span class="macro-unit">/65g</span></div>
|
||||||
|
<div class="macro-label">fat</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="module">
|
||||||
|
<div class="module-head">
|
||||||
|
<div class="module-title">Issues</div>
|
||||||
|
<a class="module-link">View all →</a>
|
||||||
|
</div>
|
||||||
|
<div class="issue-row">
|
||||||
|
<div class="issue-dot"></div>
|
||||||
|
<div class="issue-info">
|
||||||
|
<div class="issue-name">Surface Laptop Studio - 1TB</div>
|
||||||
|
<div class="issue-meta">Order #33A77277RK</div>
|
||||||
|
</div>
|
||||||
|
<span class="issue-badge">Issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="issue-row">
|
||||||
|
<div class="issue-dot"></div>
|
||||||
|
<div class="issue-info">
|
||||||
|
<div class="issue-name">Canon EOS Rebel T7</div>
|
||||||
|
<div class="issue-meta">Order #8MB684380L</div>
|
||||||
|
</div>
|
||||||
|
<span class="issue-badge">Issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="issue-row">
|
||||||
|
<div class="issue-dot"></div>
|
||||||
|
<div class="issue-info">
|
||||||
|
<div class="issue-name">Surface Pro X SQ2, 16GB</div>
|
||||||
|
<div class="issue-meta">Order #4VN564622</div>
|
||||||
|
</div>
|
||||||
|
<span class="issue-badge">Issue</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -232,6 +232,29 @@
|
|||||||
100% { background-position: -200% 0; }
|
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 ── */
|
/* ── Buttons ── */
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
padding: var(--sp-2) var(--sp-4);
|
padding: var(--sp-2) var(--sp-4);
|
||||||
@@ -245,8 +268,8 @@
|
|||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
|
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-dim); }
|
||||||
.btn-primary:active { transform: translateY(0); }
|
.btn-primary:active { transform: scale(0.97); filter: none; }
|
||||||
.btn-primary.full {
|
.btn-primary.full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--sp-3) var(--sp-4);
|
padding: var(--sp-3) var(--sp-4);
|
||||||
@@ -267,6 +290,7 @@
|
|||||||
transition: all var(--transition);
|
transition: all var(--transition);
|
||||||
}
|
}
|
||||||
.btn-secondary:hover { background: var(--card-hover); color: var(--text-1); }
|
.btn-secondary:hover { background: var(--card-hover); color: var(--text-1); }
|
||||||
|
.btn-secondary:active { transform: scale(0.97); }
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
@@ -358,14 +382,12 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--inner-gap);
|
gap: var(--inner-gap);
|
||||||
padding: var(--row-pad-y) var(--row-pad-x);
|
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);
|
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:hover { background: var(--card-hover); }
|
||||||
.data-row + .data-row { border-top: 1px solid var(--border); }
|
.data-row + .data-row { border-top: 1px solid var(--border); }
|
||||||
|
.data-row:active { transform: scale(0.995); }
|
||||||
|
|
||||||
/* ── Badges ──
|
/* ── Badges ──
|
||||||
* Semantic status badges. Variants: error, success, warning, accent, muted.
|
* Semantic status badges. Variants: error, success, warning, accent, muted.
|
||||||
|
|||||||
@@ -43,13 +43,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: var(--sp-5) var(--sp-5);
|
padding: var(--sp-4) var(--sp-5);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
background: var(--card);
|
background: var(--card);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-left: 3px solid var(--border);
|
border-left: 3px solid var(--border);
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: var(--shadow-xs);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
@@ -59,17 +59,16 @@
|
|||||||
|
|
||||||
.action-card:hover {
|
.action-card:hover {
|
||||||
transform: translateY(-2px);
|
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 {
|
.action-card.primary {
|
||||||
box-shadow: var(--shadow-lg);
|
box-shadow: var(--shadow-sm);
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card.primary:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-card-left {
|
.action-card-left {
|
||||||
|
|||||||
@@ -158,7 +158,7 @@
|
|||||||
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
|
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
|
||||||
|
|
||||||
<!-- Action cards -->
|
<!-- Action cards -->
|
||||||
<div class="action-cards">
|
<div class="action-cards stagger">
|
||||||
<DashboardActionCard
|
<DashboardActionCard
|
||||||
title="{budgetUncatCount} uncategorized transactions"
|
title="{budgetUncatCount} uncategorized transactions"
|
||||||
description="{budgetSpending} spent · {budgetIncome} income"
|
description="{budgetSpending} spent · {budgetIncome} income"
|
||||||
@@ -314,7 +314,7 @@
|
|||||||
.action-cards {
|
.action-cards {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--sp-3);
|
gap: var(--sp-2);
|
||||||
margin-bottom: var(--section-gap);
|
margin-bottom: var(--section-gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user