375 lines
18 KiB
HTML
375 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html class="dark" lang="en"><head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>Expense Tracking Dashboard</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
|
|
<script id="tailwind-config">
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: "class",
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
"primary": "#2b8cee",
|
||
|
|
"background-light": "#f6f7f8",
|
||
|
|
"background-dark": "#111a22",
|
||
|
|
"card-dark": "#1a2632", // Slightly lighter than background-dark
|
||
|
|
"card-light": "#ffffff",
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
"display": ["Inter", "sans-serif"]
|
||
|
|
},
|
||
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
/* Custom scrollbar for modern feel */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #324d67;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #4b6a88;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display overflow-hidden">
|
||
|
|
<div class="flex h-screen w-full">
|
||
|
|
<!-- Side Navigation -->
|
||
|
|
<aside class="hidden lg:flex w-64 flex-col bg-[#111a22] border-r border-[#233648]">
|
||
|
|
<div class="p-6 flex flex-col h-full justify-between">
|
||
|
|
<div class="flex flex-col gap-8">
|
||
|
|
<!-- User Profile Brief -->
|
||
|
|
<div class="flex gap-3 items-center">
|
||
|
|
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 border border-[#233648]" data-alt="User profile picture showing a smiling professional" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuANUUrJ2rc1XWSNKLt215RxpZflCxewvvZq_ZylsIILmZIjcBUGlPtBIQNmsPHhZs6WjM660ExRzDkFkwHPzxwS6ta2zQ9lFfEMpKK9Ii7RTs6B-lCsDP94jjuZnAzZsrS-ZR_DLQjI16FAzAz_GvyrW9fSGpXcjzLFztbygeR64wagIlFwfYRd3RdlEG2GWH2aDXCrEO86UxzdHzBi13r2tqFH35vfLFwcg2kcbuLP4kkwWk_kese2hD4N0GgXuehsBv8AUzsQ6DU");'>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<h1 class="text-white text-base font-bold leading-none">Alex Morgan</h1>
|
||
|
|
<p class="text-[#92adc9] text-xs font-normal mt-1">Free Plan</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Navigation Links -->
|
||
|
|
<nav class="flex flex-col gap-2">
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-primary border border-primary/10" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]" data-weight="fill">dashboard</span>
|
||
|
|
<span class="text-sm font-medium">Dashboard</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#92adc9] hover:bg-[#233648] hover:text-white transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">receipt_long</span>
|
||
|
|
<span class="text-sm font-medium">Transactions</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#92adc9] hover:bg-[#233648] hover:text-white transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">pie_chart</span>
|
||
|
|
<span class="text-sm font-medium">Reports</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#92adc9] hover:bg-[#233648] hover:text-white transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">folder_open</span>
|
||
|
|
<span class="text-sm font-medium">Documents</span>
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<!-- Bottom Links -->
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#92adc9] hover:bg-[#233648] hover:text-white transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||
|
|
<span class="text-sm font-medium">Settings</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#92adc9] hover:bg-[#233648] hover:text-white transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">logout</span>
|
||
|
|
<span class="text-sm font-medium">Log out</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden relative">
|
||
|
|
<!-- Top Header -->
|
||
|
|
<header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-[#233648] bg-background-dark/95 backdrop-blur z-10 shrink-0">
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<button class="lg:hidden text-white">
|
||
|
|
<span class="material-symbols-outlined">menu</span>
|
||
|
|
</button>
|
||
|
|
<h2 class="text-white text-lg font-bold">Dashboard</h2>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-6">
|
||
|
|
<!-- Search Bar -->
|
||
|
|
<div class="hidden md:flex items-center bg-[#1a2632] rounded-lg h-10 px-3 border border-[#233648] focus-within:border-primary transition-colors w-64">
|
||
|
|
<span class="material-symbols-outlined text-[#92adc9] text-[20px]">search</span>
|
||
|
|
<input class="bg-transparent border-none text-white text-sm placeholder-[#5f7a96] focus:ring-0 w-full ml-2" placeholder="Search expenses..." type="text"/>
|
||
|
|
</div>
|
||
|
|
<!-- Actions -->
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<button class="bg-primary hover:bg-primary/90 text-white h-9 px-4 rounded-lg text-sm font-semibold shadow-lg shadow-primary/20 transition-all flex items-center gap-2">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
||
|
|
<span class="hidden sm:inline">Add Expense</span>
|
||
|
|
</button>
|
||
|
|
<button class="size-9 rounded-lg bg-[#1a2632] border border-[#233648] flex items-center justify-center text-[#92adc9] hover:text-white hover:bg-[#233648] transition-colors relative">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||
|
|
<span class="absolute top-2 right-2.5 size-1.5 bg-red-500 rounded-full border border-[#1a2632]"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<!-- Scrollable Content -->
|
||
|
|
<div class="flex-1 overflow-y-auto p-6 lg:p-8 scroll-smooth">
|
||
|
|
<div class="max-w-7xl mx-auto flex flex-col gap-8 pb-10">
|
||
|
|
<!-- KPI Cards -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6">
|
||
|
|
<!-- Total Spent -->
|
||
|
|
<div class="p-6 rounded-xl bg-[#1a2632] border border-[#233648] flex flex-col justify-between relative overflow-hidden group">
|
||
|
|
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||
|
|
<span class="material-symbols-outlined text-6xl text-primary">payments</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-[#92adc9] text-sm font-medium">Total Spent</p>
|
||
|
|
<h3 class="text-white text-3xl font-bold mt-2 tracking-tight">$2,450.00</h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 mt-4">
|
||
|
|
<span class="bg-green-500/10 text-green-400 text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||
|
|
<span class="material-symbols-outlined text-[14px]">trending_up</span>
|
||
|
|
12%
|
||
|
|
</span>
|
||
|
|
<span class="text-[#5f7a96] text-xs">vs last month</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Active Categories -->
|
||
|
|
<div class="p-6 rounded-xl bg-[#1a2632] border border-[#233648] flex flex-col justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-[#92adc9] text-sm font-medium">Active Categories</p>
|
||
|
|
<h3 class="text-white text-3xl font-bold mt-2 tracking-tight">8</h3>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-[#233648] h-1.5 rounded-full mt-6 overflow-hidden">
|
||
|
|
<div class="bg-purple-500 h-full rounded-full" style="width: 65%"></div>
|
||
|
|
</div>
|
||
|
|
<p class="text-[#5f7a96] text-xs mt-2">65% of budget utilized</p>
|
||
|
|
</div>
|
||
|
|
<!-- Total Transactions -->
|
||
|
|
<div class="p-6 rounded-xl bg-[#1a2632] border border-[#233648] flex flex-col justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-[#92adc9] text-sm font-medium">Total Transactions</p>
|
||
|
|
<h3 class="text-white text-3xl font-bold mt-2 tracking-tight">42</h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 mt-4">
|
||
|
|
<span class="bg-primary/10 text-primary text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||
|
|
<span class="material-symbols-outlined text-[14px]">add</span>
|
||
|
|
5 New
|
||
|
|
</span>
|
||
|
|
<span class="text-[#5f7a96] text-xs">this week</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Charts Section -->
|
||
|
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||
|
|
<!-- Bar Chart: Monthly Trends -->
|
||
|
|
<div class="xl:col-span-2 bg-[#1a2632] border border-[#233648] rounded-xl p-6 flex flex-col">
|
||
|
|
<div class="flex justify-between items-start mb-6">
|
||
|
|
<div>
|
||
|
|
<h3 class="text-white text-lg font-bold">Monthly Trends</h3>
|
||
|
|
<p class="text-[#92adc9] text-sm">Income vs Expense over time</p>
|
||
|
|
</div>
|
||
|
|
<button class="text-[#92adc9] hover:text-white text-sm bg-[#233648] px-3 py-1.5 rounded-lg transition-colors">Last 6 Months</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 flex items-end gap-3 sm:gap-6 min-h-[240px] px-2 pb-2">
|
||
|
|
<!-- Bars generation -->
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[140px] group-hover:bg-[#2d445a] transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/50 h-[60%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-[#92adc9] text-xs font-medium">Jan</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[180px] group-hover:bg-[#2d445a] transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/60 h-[45%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-[#92adc9] text-xs font-medium">Feb</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[160px] group-hover:bg-[#2d445a] transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/70 h-[70%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-[#92adc9] text-xs font-medium">Mar</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[200px] group-hover:bg-[#2d445a] transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary h-[55%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-[#92adc9] text-xs font-medium">Apr</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[150px] group-hover:bg-[#2d445a] transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary/80 h-[80%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-[#92adc9] text-xs font-medium">May</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||
|
|
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[190px] group-hover:bg-[#2d445a] transition-all">
|
||
|
|
<div class="absolute bottom-0 w-full bg-primary h-[65%] rounded-t-sm"></div>
|
||
|
|
</div>
|
||
|
|
<span class="text-[#92adc9] text-xs font-medium">Jun</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Pie Chart: Expense Distribution -->
|
||
|
|
<div class="bg-[#1a2632] border border-[#233648] rounded-xl p-6 flex flex-col">
|
||
|
|
<h3 class="text-white text-lg font-bold mb-1">Expense Distribution</h3>
|
||
|
|
<p class="text-[#92adc9] text-sm mb-6">Breakdown by category</p>
|
||
|
|
<div class="flex-1 flex items-center justify-center relative">
|
||
|
|
<!-- CSS Conic Gradient Pie Chart -->
|
||
|
|
<div class="size-52 rounded-full relative" style="background: conic-gradient(
|
||
|
|
#2b8cee 0% 35%,
|
||
|
|
#a855f7 35% 60%,
|
||
|
|
#0bda5b 60% 80%,
|
||
|
|
#f59e0b 80% 90%,
|
||
|
|
#ef4444 90% 100%
|
||
|
|
);">
|
||
|
|
<!-- Inner hole for donut effect -->
|
||
|
|
<div class="absolute inset-4 bg-[#1a2632] rounded-full flex flex-col items-center justify-center z-10">
|
||
|
|
<span class="text-[#92adc9] text-xs font-medium">Total</span>
|
||
|
|
<span class="text-white text-xl font-bold">$2,450</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Legend -->
|
||
|
|
<div class="mt-6 grid grid-cols-2 gap-y-2 gap-x-4">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-primary"></span>
|
||
|
|
<span class="text-[#92adc9] text-xs">House</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-purple-500"></span>
|
||
|
|
<span class="text-[#92adc9] text-xs">Mortgage</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-green-500"></span>
|
||
|
|
<span class="text-[#92adc9] text-xs">Car</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-2.5 rounded-full bg-orange-500"></span>
|
||
|
|
<span class="text-[#92adc9] text-xs">Food</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Categories Grid -->
|
||
|
|
<div>
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="text-white text-lg font-bold">Expense Categories</h3>
|
||
|
|
<a class="text-primary text-sm font-medium hover:text-primary/80" href="#">View All</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
|
|
<!-- Category Card 1 -->
|
||
|
|
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-green-500/10 flex items-center justify-center text-green-500 group-hover:bg-green-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">directions_car</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">3 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[#92adc9] text-sm font-medium">Car Expenses</span>
|
||
|
|
<span class="text-white text-xl font-bold mt-1">$450.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-green-500 h-full rounded-full" style="width: 18%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Category Card 2 -->
|
||
|
|
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">home</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">5 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[#92adc9] text-sm font-medium">House Expenses-Bills</span>
|
||
|
|
<span class="text-white text-xl font-bold mt-1">$1,200.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-primary h-full rounded-full" style="width: 45%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Category Card 3 -->
|
||
|
|
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-500 group-hover:bg-orange-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">restaurant</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">12 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[#92adc9] text-sm font-medium">Food & Drink</span>
|
||
|
|
<span class="text-white text-xl font-bold mt-1">$350.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-orange-500 h-full rounded-full" style="width: 14%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Category Card 4 -->
|
||
|
|
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-red-500/10 flex items-center justify-center text-red-500 group-hover:bg-red-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">smoking_rooms</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">8 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[#92adc9] text-sm font-medium">Smoking</span>
|
||
|
|
<span class="text-white text-xl font-bold mt-1">$120.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-red-500 h-full rounded-full" style="width: 5%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Category Card 5 -->
|
||
|
|
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-500 group-hover:bg-purple-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">account_balance</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">1 txn</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[#92adc9] text-sm font-medium">Mortgage</span>
|
||
|
|
<span class="text-white text-xl font-bold mt-1">$800.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-purple-500 h-full rounded-full" style="width: 32%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Category Card 6 -->
|
||
|
|
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="size-10 rounded-lg bg-cyan-500/10 flex items-center justify-center text-cyan-500 group-hover:bg-cyan-500 group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined">shopping_cart</span>
|
||
|
|
</div>
|
||
|
|
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">4 txns</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[#92adc9] text-sm font-medium">Supermarket</span>
|
||
|
|
<span class="text-white text-xl font-bold mt-1">$200.00</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||
|
|
<div class="bg-cyan-500 h-full rounded-full" style="width: 8%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</body></html>
|