3704687793
Pre-redesign checkpoint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
692 lines
19 KiB
HTML
692 lines
19 KiB
HTML
<!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>
|