ipadhyay/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>Track Your Gift - FundFiesta</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>10</head>11<body class="bg-gray-50">12 <div class="container mx-auto px-4 py-12">13 <div class="mb-8">14 <h1 class="text-3xl font-bold text-gray-800 flex items-center">15 <i data-feather="bar-chart-2" class="text-primary-500 mr-3"></i>16 Track Your Gift17 </h1>18 <p class="text-gray-600 mt-2">Monitor your investment's performance over time</p>19 </div>20 21 <div class="grid md:grid-cols-3 gap-6 mb-8">22 <div class="bg-white p-6 rounded-xl shadow-sm">23 <p class="text-gray-500 text-sm mb-1">Initial Investment</p>24 <p class="text-2xl font-bold">₹5,000.00</p>25 </div>26 <div class="bg-white p-6 rounded-xl shadow-sm">27 <p class="text-gray-500 text-sm mb-1">Current Value</p>28 <p class="text-2xl font-bold text-green-600">₹6,342.50</p>29 </div>30 <div class="bg-white p-6 rounded-xl shadow-sm">31 <p class="text-gray-500 text-sm mb-1">Growth</p>32 <div class="flex items-baseline">33 <p class="text-2xl font-bold">₹1,342.50</p>34 <p class="ml-2 text-green-600">(+26.85%)</p>35 </div>36 </div>37 </div>38 39 <div class="bg-white p-6 rounded-xl shadow-sm mb-8">40 <div class="flex justify-between items-center mb-6">41 <h2 class="text-xl font-bold text-gray-800">Performance Chart</h2>42 <select class="border border-gray-300 rounded-lg px-3 py-2 text-sm">43 <option>1 Month</option>44 <option>3 Months</option>45 <option selected>1 Year</option>46 <option>All Time</option>47 </select>48 </div>49 <canvas id="performanceChart" height="300"></canvas>50 </div>51 52 <div class="grid md:grid-cols-2 gap-6 mb-8">53 <div class="bg-white p-6 rounded-xl shadow-sm">54 <h2 class="text-xl font-bold text-gray-800 mb-4">Gift Details</h2>55 <div class="space-y-4">56 <div class="flex justify-between">57 <p class="text-gray-600">Fund Name</p>58 <p class="font-medium">BlueChip Growth</p>59 </div>60 <div class="flex justify-between">61 <p class="text-gray-600">Gift Date</p>62 <p class="font-medium">15 Jan 2023</p>63 </div>64 <div class="flex justify-between">65 <p class="text-gray-600">Redeemed On</p>66 <p class="font-medium">20 Jan 2023</p>67 </div>68 <div class="flex justify-between">69 <p class="text-gray-600">Gift From</p>70 <p class="font-medium">Priya Patel</p>71 </div>72 <div class="pt-4 border-t border-gray-100">73 <p class="text-gray-600 italic">"Happy graduation! May this investment grow along with your bright future."</p>74 </div>75 </div>76 </div>77 78 <div class="bg-white p-6 rounded-xl shadow-sm">79 <h2 class="text-xl font-bold text-gray-800 mb-4">Fund Details</h2>80 <div class="space-y-4">81 <div class="flex justify-between">82 <p class="text-gray-600">Fund House</p>83 <p class="font-medium">ABC Mutual Fund</p>84 </div>85 <div class="flex justify-between">86 <p class="text-gray-600">Category</p>87 <p class="font-medium">Large Cap Equity</p>88 </div>89 <div class="flex justify-between">90 <p class="text-gray-600">Risk Level</p>91 <p class="font-medium">Moderately High</p>92 </div>93 <div class="flex justify-between">94 <p class="text-gray-600">Expense Ratio</p>95 <p class="font-medium">0.75%</p>96 </div>97 <div class="flex justify-between">98 <p class="text-gray-600">Fund Manager</p>99 <p class="font-medium">Rahul Sharma</p>100 </div>101 <div class="pt-4 border-t border-gray-100">102 <a href="#" class="text-primary-500 hover:text-primary-600 font-medium flex items-center">103 <i data-feather="external-link" class="w-4 h-4 mr-2"></i>104 View Fund Fact Sheet105 </a>106 </div>107 </div>108 </div>109 </div>110 111 <div class="bg-white p-6 rounded-xl shadow-sm">112 <h2 class="text-xl font-bold text-gray-800 mb-4">Transaction History</h2>113 <div class="overflow-x-auto">114 <table class="min-w-full divide-y divide-gray-200">115 <thead class="bg-gray-50">116 <tr>117 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>118 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction</th>119 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>120 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Units</th>121 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NAV</th>122 </tr>123 </thead>124 <tbody class="bg-white divide-y divide-gray-200">125 <tr>126 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20 Jan 2023</td>127 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Purchase</td>128 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹5,000.00</td>129 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42.553</td>130 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">117.50</td>131 </tr>132 <tr>133 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Mar 2023</td>134 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Dividend</td>135 <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">₹342.50</td>136 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>137 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>138 </tr>139 </tbody>140 </table>141 </div>142 </div>143 </div>144 145 <script>146 feather.replace();147 148 // Initialize chart149 const ctx = document.getElementById('performanceChart').getContext('2d');150 const chart = new Chart(ctx, {151 type: 'line',152 data: {153 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],154 datasets: [{155 label: 'Investment Value',156 data: [5000, 5100, 5250, 5375, 5450, 5600, 5725, 5800, 5925, 6100, 6250, 6342.5],157 borderColor: '#6366f1',158 backgroundColor: 'rgba(99, 102, 241, 0.1)',159 borderWidth: 2,160 fill: true,161 tension: 0.3162 }]163 },164 options: {165 responsive: true,166 plugins: {167 legend: {168 display: false169 },170 tooltip: {171 callbacks: {172 label: function(context) {173 return '₹' + context.parsed.y.toFixed(2);174 }175 }176 }177 },178 scales: {179 y: {180 beginAtZero: false,181 ticks: {182 callback: function(value) {183 return '₹' + value;184 }185 }186 }187 }188 }189 });190 </script>191</body>192</html>