hridayl/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Dashboard | FinFusion</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Inter', sans-serif;15 }16 .gradient-text {17 background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);18 -webkit-background-clip: text;19 background-clip: text;20 color: transparent;21 }22 .card-hover:hover {23 transform: translateY(-5px);24 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);25 }26 </style>27</head>28<body class="bg-gray-900 text-white">29 <!-- Navigation -->30 <nav class="bg-gray-800 bg-opacity-80 backdrop-blur-md fixed w-full z-10">31 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">32 <div class="flex items-center justify-between h-16">33 <div class="flex items-center">34 <div class="flex-shrink-0 flex items-center">35 <i data-feather="dollar-sign" class="text-blue-400 h-8 w-8"></i>36 <span class="ml-2 text-xl font-bold gradient-text">FinFusion</span>37 </div>38 <div class="hidden md:block">39 <div class="ml-10 flex items-baseline space-x-4">40 <a href="dashboard.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-blue-600 text-white">Dashboard</a>41 <a href="invest.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Invest</a>42 <a href="payments.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Payments</a>43 <a href="learn.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Learn</a>44 <a href="community.html" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Community</a>45 </div>46 </div>47 </div>48 <div class="hidden md:block">49 <div class="ml-4 flex items-center md:ml-6">50 <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">51 <i data-feather="bell"></i>52 </button>53 <div class="ml-3 relative">54 <div>55 <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu">56 <img class="h-8 w-8 rounded-full" src="http://static.photos/finance/200x200/42" alt="">57 </button>58 </div>59 </div>60 </div>61 </div>62 <div class="-mr-2 flex md:hidden">63 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">64 <i data-feather="menu"></i>65 </button>66 </div>67 </div>68 </div>69 </nav>70 71 <!-- Main Content -->72 <div class="pt-24 pb-10 px-4 sm:px-6 lg:px-8">73 <div class="max-w-7xl mx-auto">74 <div class="flex justify-between items-center mb-8">75 <h1 class="text-3xl font-bold">Your Dashboard</h1>76 <div class="flex space-x-4">77 <button class="px-4 py-2 bg-blue-600 rounded-md hover:bg-blue-700">+ Add Funds</button>78 <button class="px-4 py-2 bg-gray-700 rounded-md hover:bg-gray-600">Withdraw</button>79 </div>80 </div>81 82 <!-- Stats Cards -->83 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">84 <div class="bg-gray-800 rounded-lg p-6 card-hover">85 <div class="flex items-center">86 <div class="p-3 rounded-full bg-blue-500 bg-opacity-20">87 <i data-feather="dollar-sign" class="text-blue-400"></i>88 </div>89 <div class="ml-4">90 <p class="text-sm text-gray-400">Total Balance</p>91 <h3 class="text-2xl font-bold">$24,589.00</h3>92 </div>93 </div>94 </div>95 <div class="bg-gray-800 rounded-lg p-6 card-hover">96 <div class="flex items-center">97 <div class="p-3 rounded-full bg-green-500 bg-opacity-20">98 <i data-feather="trending-up" class="text-green-400"></i>99 </div>100 <div class="ml-4">101 <p class="text-sm text-gray-400">Investment Growth</p>102 <h3 class="text-2xl font-bold">+12.5%</h3>103 </div>104 </div>105 </div>106 <div class="bg-gray-800 rounded-lg p-6 card-hover">107 <div class="flex items-center">108 <div class="p-3 rounded-full bg-purple-500 bg-opacity-20">109 <i data-feather="credit-card" class="text-purple-400"></i>110 </div>111 <div class="ml-4">112 <p class="text-sm text-gray-400">Monthly Spending</p>113 <h3 class="text-2xl font-bold">$2,450.00</h3>114 </div>115 </div>116 </div>117 <div class="bg-gray-800 rounded-lg p-6 card-hover">118 <div class="flex items-center">119 <div class="p-3 rounded-full bg-yellow-500 bg-opacity-20">120 <i data-feather="award" class="text-yellow-400"></i>121 </div>122 <div class="ml-4">123 <p class="text-sm text-gray-400">Learning Points</p>124 <h3 class="text-2xl font-bold">1,250</h3>125 </div>126 </div>127 </div>128 </div>129 130 <!-- Charts Section -->131 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-10">132 <div class="bg-gray-800 rounded-lg p-6 card-hover">133 <h3 class="text-lg font-semibold mb-4">Portfolio Performance</h3>134 <canvas id="performanceChart" height="250"></canvas>135 </div>136 <div class="bg-gray-800 rounded-lg p-6 card-hover">137 <h3 class="text-lg font-semibold mb-4">Spending Breakdown</h3>138 <canvas id="spendingChart" height="250"></canvas>139 </div>140 </div>141 142 <!-- Recent Transactions -->143 <div class="bg-gray-800 rounded-lg p-6 card-hover">144 <div class="flex justify-between items-center mb-6">145 <h3 class="text-lg font-semibold">Recent Transactions</h3>146 <a href="payments.html" class="text-blue-400 hover:text-blue-300 text-sm">View All</a>147 </div>148 <div class="overflow-x-auto">149 <table class="min-w-full divide-y divide-gray-700">150 <thead>151 <tr>152 <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Description</th>153 <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Category</th>154 <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Amount</th>155 <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th>156 </tr>157 </thead>158 <tbody class="divide-y divide-gray-700">159 <tr>160 <td class="px-6 py-4 whitespace-nowrap">Stock Purchase - AAPL</td>161 <td class="px-6 py-4 whitespace-nowrap">Investments</td>162 <td class="px-6 py-4 whitespace-nowrap text-green-400">+$1,250.00</td>163 <td class="px-6 py-4 whitespace-nowrap">Today, 10:45 AM</td>164 </tr>165 <tr>166 <td class="px-6 py-4 whitespace-nowrap">Amazon Shopping</td>167 <td class="px-6 py-4 whitespace-nowrap">Shopping</td>168 <td class="px-6 py-4 whitespace-nowrap text-red-400">-$89.99</td>169 <td class="px-6 py-4 whitespace-nowrap">Yesterday, 2:30 PM</td>170 </tr>171 <tr>172 <td class="px-6 py-4 whitespace-nowrap">Salary Deposit</td>173 <td class="px-6 py-4 whitespace-nowrap">Income</td>174 <td class="px-6 py-4 whitespace-nowrap text-green-400">+$5,000.00</td>175 <td class="px-6 py-4 whitespace-nowrap">Mar 30, 2023</td>176 </tr>177 <tr>178 <td class="px-6 py-4 whitespace-nowrap">Netflix Subscription</td>179 <td class="px-6 py-4 whitespace-nowrap">Entertainment</td>180 <td class="px-6 py-4 whitespace-nowrap text-red-400">-$14.99</td>181 <td class="px-6 py-4 whitespace-nowrap">Mar 28, 2023</td>182 </tr>183 <tr>184 <td class="px-6 py-4 whitespace-nowrap">Grocery Store</td>185 <td class="px-6 py-4 whitespace-nowrap">Food</td>186 <td class="px-6 py-4 whitespace-nowrap text-red-400">-$124.75</td>187 <td class="px-6 py-4 whitespace-nowrap">Mar 27, 2023</td>188 </tr>189 </tbody>190 </table>191 </div>192 </div>193 </div>194 </div>195 196 <script>197 feather.replace();198 199 // Performance Chart200 const perfCtx = document.getElementById('performanceChart').getContext('2d');201 const performanceChart = new Chart(perfCtx, {202 type: 'line',203 data: {204 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],205 datasets: [{206 label: 'Portfolio Value',207 data: [12000, 15000, 18000, 19000, 22000, 23000, 24589],208 borderColor: '#3b82f6',209 backgroundColor: 'rgba(59, 130, 246, 0.1)',210 borderWidth: 2,211 fill: true,212 tension: 0.4213 }]214 },215 options: {216 responsive: true,217 plugins: {218 legend: {219 display: false220 }221 },222 scales: {223 y: {224 grid: {225 color: 'rgba(255, 255, 255, 0.1)'226 },227 ticks: {228 color: 'rgba(255, 255, 255, 0.7)'229 }230 },231 x: {232 grid: {233 color: 'rgba(255, 255, 255, 0.1)'234 },235 ticks: {236 color: 'rgba(255, 255, 255, 0.7)'237 }238 }239 }240 }241 });242 243 // Spending Chart244 const spendCtx = document.getElementById('spendingChart').getContext('2d');245 const spendingChart = new Chart(spendCtx, {246 type: 'doughnut',247 data: {248 labels: ['Shopping', 'Food', 'Entertainment', 'Bills', 'Transport'],249 datasets: [{250 data: [30, 25, 15, 20, 10],251 backgroundColor: [252 '#3b82f6',253 '#10b981',254 '#8b5cf6',255 '#f59e0b',256 '#ef4444'257 ],258 borderWidth: 0259 }]260 },261 options: {262 responsive: true,263 plugins: {264 legend: {265 position: 'right',266 labels: {267 color: 'rgba(255, 255, 255, 0.7)'268 }269 }270 },271 cutout: '70%'272 }273 });274 </script>275</body>276</html>