|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MESP - Modern Efficient Savings Platform</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); |
|
|
} |
|
|
.dashboard-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.savings-progress { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.nav-item.active { |
|
|
border-left: 4px solid #3b82f6; |
|
|
background-color: rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
.transaction-history { |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.transaction-history::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
.transaction-history::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
.transaction-history::-webkit-scrollbar-thumb { |
|
|
background: #cbd5e1; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.transaction-history::-webkit-scrollbar-thumb:hover { |
|
|
background: #94a3b8; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="hidden md:flex md:flex-shrink-0"> |
|
|
<div class="flex flex-col w-64 gradient-bg text-white"> |
|
|
<div class="flex items-center justify-center h-16 px-4 border-b border-blue-800"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-piggy-bank text-2xl mr-2 text-blue-200"></i> |
|
|
<span class="text-xl font-bold">MESP</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-col flex-grow px-4 py-4"> |
|
|
<div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item active"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
<span>Dashboard</span> |
|
|
</div> |
|
|
<div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item"> |
|
|
<i class="fas fa-wallet mr-3"></i> |
|
|
<span>Savings</span> |
|
|
</div> |
|
|
<div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item"> |
|
|
<i class="fas fa-hand-holding-usd mr-3"></i> |
|
|
<span>Loans</span> |
|
|
</div> |
|
|
<div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item"> |
|
|
<i class="fas fa-exchange-alt mr-3"></i> |
|
|
<span>Transactions</span> |
|
|
</div> |
|
|
<div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span>Reports</span> |
|
|
</div> |
|
|
<div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
<span>Members</span> |
|
|
</div> |
|
|
<div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>Settings</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 py-4 border-t border-blue-800"> |
|
|
<div class="flex items-center"> |
|
|
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Jane Cooper</p> |
|
|
<p class="text-xs text-blue-200">Admin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> |
|
|
<div class="flex items-center md:hidden"> |
|
|
<button class="text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative"> |
|
|
<input type="text" class="w-full md:w-64 px-4 py-2 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Search..."> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="p-2 ml-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</button> |
|
|
<div class="ml-4 relative"> |
|
|
<button class="flex items-center focus:outline-none"> |
|
|
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile"> |
|
|
<span class="ml-2 hidden md:inline">Jane Cooper</span> |
|
|
<i class="fas fa-chevron-down ml-1 text-gray-500 hidden md:inline"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto p-4 bg-gray-50"> |
|
|
<div class="mb-6"> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Dashboard</h1> |
|
|
<p class="text-gray-600">Welcome back, Jane! Here's your financial overview.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Savings</p> |
|
|
<h3 class="text-2xl font-bold mt-1">Ksh 245,890</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-piggy-bank text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-sm"> |
|
|
<span class="text-green-600">+12.5%</span> |
|
|
<span class="text-gray-500">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Active Loans</p> |
|
|
<h3 class="text-2xl font-bold mt-1">Ksh 120,500</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-hand-holding-usd text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-sm"> |
|
|
<span class="text-red-600">-3.2%</span> |
|
|
<span class="text-gray-500">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Dividends</p> |
|
|
<h3 class="text-2xl font-bold mt-1">Ksh 15,200</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-chart-pie text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-sm"> |
|
|
<span class="text-green-600">+8.7%</span> |
|
|
<span class="text-gray-500">vs last year</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">New Members</p> |
|
|
<h3 class="text-2xl font-bold mt-1">24</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-sm"> |
|
|
<span class="text-green-600">+20%</span> |
|
|
<span class="text-gray-500">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Savings Goals</h2> |
|
|
<button class="text-sm text-blue-600 hover:text-blue-800">View All</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex items-center justify-between mb-1"> |
|
|
<span class="font-medium">Emergency Fund</span> |
|
|
<span class="text-sm text-gray-600">Ksh 45,000 / Ksh 100,000</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full savings-progress"> |
|
|
<div class="bg-blue-600 savings-progress" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex items-center justify-between mb-1"> |
|
|
<span class="font-medium">Education Fund</span> |
|
|
<span class="text-sm text-gray-600">Ksh 12,500 / Ksh 50,000</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full savings-progress"> |
|
|
<div class="bg-green-500 savings-progress" style="width: 25%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex items-center justify-between mb-1"> |
|
|
<span class="font-medium">Retirement</span> |
|
|
<span class="text-sm text-gray-600">Ksh 188,390 / Ksh 500,000</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full savings-progress"> |
|
|
<div class="bg-purple-500 savings-progress" style="width: 38%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="mt-6 w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition duration-200"> |
|
|
<i class="fas fa-plus mr-2"></i> Add New Goal |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h2> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-blue-500 hover:bg-blue-50 transition duration-200"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2"> |
|
|
<i class="fas fa-plus text-lg"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Deposit</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-green-500 hover:bg-green-50 transition duration-200"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600 mb-2"> |
|
|
<i class="fas fa-minus text-lg"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Withdraw</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-purple-500 hover:bg-purple-50 transition duration-200"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2"> |
|
|
<i class="fas fa-hand-holding-usd text-lg"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Apply Loan</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-yellow-500 hover:bg-yellow-50 transition duration-200"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2"> |
|
|
<i class="fas fa-exchange-alt text-lg"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Transfer</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Transactions</h2> |
|
|
<button class="text-sm text-blue-600 hover:text-blue-800">View All</button> |
|
|
</div> |
|
|
|
|
|
<div class="transaction-history"> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Deposit</p> |
|
|
<p class="text-sm text-gray-500">12 May 2023, 10:30 AM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-green-600">+ Ksh 15,000</p> |
|
|
<p class="text-sm text-gray-500">Completed</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-red-100 text-red-600 mr-3"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Withdrawal</p> |
|
|
<p class="text-sm text-gray-500">10 May 2023, 2:15 PM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-red-600">- Ksh 5,000</p> |
|
|
<p class="text-sm text-gray-500">Completed</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3"> |
|
|
<i class="fas fa-hand-holding-usd"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Loan Payment</p> |
|
|
<p class="text-sm text-gray-500">8 May 2023, 9:00 AM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-green-600">+ Ksh 3,500</p> |
|
|
<p class="text-sm text-gray-500">Completed</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Transfer</p> |
|
|
<p class="text-sm text-gray-500">5 May 2023, 4:45 PM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-red-600">- Ksh 2,000</p> |
|
|
<p class="text-sm text-gray-500">Completed</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Deposit</p> |
|
|
<p class="text-sm text-gray-500">1 May 2023, 11:20 AM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-green-600">+ Ksh 10,000</p> |
|
|
<p class="text-sm text-gray-500">Completed</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Loan Status</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="p-4 border border-gray-200 rounded-lg"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-medium">Personal Loan</span> |
|
|
<span class="text-sm px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Active</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Amount:</span> |
|
|
<span>Ksh 50,000</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Interest Rate:</span> |
|
|
<span>12% p.a.</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Due Date:</span> |
|
|
<span>15 Aug 2023</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Balance:</span> |
|
|
<span class="font-medium">Ksh 32,500</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 35%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>35% paid</span> |
|
|
<span>65% remaining</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border border-gray-200 rounded-lg"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-medium">Business Loan</span> |
|
|
<span class="text-sm px-2 py-1 bg-green-100 text-green-800 rounded-full">Approved</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Amount:</span> |
|
|
<span>Ksh 100,000</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Interest Rate:</span> |
|
|
<span>10% p.a.</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Disbursement:</span> |
|
|
<span class="text-blue-600">Pending</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-3 w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200 text-sm"> |
|
|
View Details |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<button class="w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition duration-200"> |
|
|
<i class="fas fa-plus mr-2"></i> Apply for New Loan |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
|
|
|
const navItems = document.querySelectorAll('.nav-item'); |
|
|
navItems.forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
|
|
|
navItems.forEach(i => i.classList.remove('active')); |
|
|
|
|
|
this.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=brian256/mesp" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
