Zchief/financial-transparency-tracker
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>DataViz Delight Dashboard</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>12 <script src="components/navbar.js"></script>13 <script src="components/data-card.js"></script>14 <script src="components/financial-card.js"></script>15</head>16<body class="bg-gray-50 min-h-screen">17 <custom-navbar></custom-navbar>18 19 <main class="container mx-auto px-4 py-8">20 <div class="flex flex-col md:flex-row gap-6 mb-8">21 <div class="w-full md:w-1/3">22 <h2 class="text-2xl font-bold text-gray-800 mb-4">Financial Highlights</h2>23 <financial-card>24 <span slot="title">Total Assets</span>25 <span slot="value">$59.55M</span>26 <span slot="change" class="positive">+50.9%</span>27 <i slot="trend-icon" data-feather="trending-up"></i>28 <div class="text-sm text-gray-500">From $39.49M in 2024</div>29 </financial-card>30 </div>31 <div class="w-full md:w-1/3">32 <financial-card>33 <span slot="title">Revenue</span>34 <span slot="value">$36.03M</span>35 <span slot="change" class="positive">+139.8%</span>36 <i slot="trend-icon" data-feather="trending-up"></i>37 <div class="text-sm text-gray-500">From $15.03M in 2024</div>38 </financial-card>39 </div>40 <div class="w-full md:w-1/3">41 <financial-card>42 <span slot="title">Net Financial Assets</span>43 <span slot="value">$35.75M</span>44 <span slot="change" class="positive">+33.5%</span>45 <i slot="trend-icon" data-feather="trending-up"></i>46 <div class="text-sm text-gray-500">From $26.78M in 2024</div>47 </financial-card>48 </div>49 </div>50 51 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">52 <div class="bg-white p-6 rounded-xl shadow-sm">53 <h3 class="text-lg font-semibold text-gray-800 mb-4">Revenue Sources</h3>54 <canvas id="revenueChart" height="250"></canvas>55 </div>56 <div class="bg-white p-6 rounded-xl shadow-sm">57 <h3 class="text-lg font-semibold text-gray-800 mb-4">Expense Breakdown</h3>58 <canvas id="expenseChart" height="250"></canvas>59 </div>60 </div>61<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">62 <div class="bg-white p-6 rounded-xl shadow-sm">63 <div class="flex justify-between items-center mb-4">64 <h3 class="text-lg font-semibold text-gray-800">User Growth</h3>65 <div class="flex space-x-2">66 <button class="px-3 py-1 text-xs bg-blue-100 text-blue-600 rounded-full">Monthly</button>67 <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Quarterly</button>68 </div>69 </div>70 <canvas id="lineChart" height="250"></canvas>71 </div>72 <div class="bg-white p-6 rounded-xl shadow-sm">73 <h3 class="text-lg font-semibold text-gray-800 mb-4">Revenue Sources</h3>74 <canvas id="doughnutChart" height="250"></canvas>75 </div>76 </div>77 78 <div class="bg-white p-6 rounded-xl shadow-sm mb-8">79 <h3 class="text-lg font-semibold text-gray-800 mb-4">Performance Metrics</h3>80 <canvas id="barChart" height="300"></canvas>81 </div>82 83 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">84 <div class="bg-white p-6 rounded-xl shadow-sm">85 <h3 class="text-lg font-semibold text-gray-800 mb-4">Top Categories</h3>86 <div class="space-y-4">87 <div class="flex items-center justify-between">88 <span class="text-gray-600">Technology</span>89 <div class="w-1/2 bg-gray-200 rounded-full h-2.5">90 <div class="bg-blue-500 h-2.5 rounded-full" style="width: 72%"></div>91 </div>92 <span class="text-gray-800 font-medium">72%</span>93 </div>94 <div class="flex items-center justify-between">95 <span class="text-gray-600">Finance</span>96 <div class="w-1/2 bg-gray-200 rounded-full h-2.5">97 <div class="bg-green-500 h-2.5 rounded-full" style="width: 58%"></div>98 </div>99 <span class="text-gray-800 font-medium">58%</span>100 </div>101 <div class="flex items-center justify-between">102 <span class="text-gray-600">Healthcare</span>103 <div class="w-1/2 bg-gray-200 rounded-full h-2.5">104 <div class="bg-purple-500 h-2.5 rounded-full" style="width: 45%"></div>105 </div>106 <span class="text-gray-800 font-medium">45%</span>107 </div>108 <div class="flex items-center justify-between">109 <span class="text-gray-600">Retail</span>110 <div class="w-1/2 bg-gray-200 rounded-full h-2.5">111 <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 32%"></div>112 </div>113 <span class="text-gray-800 font-medium">32%</span>114 </div>115 </div>116 </div>117 <div class="bg-white p-6 rounded-xl shadow-sm">118 <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h3>119 <div class="space-y-4">120 <div class="flex items-start">121 <div class="bg-blue-100 p-2 rounded-full mr-3">122 <i data-feather="user-plus" class="text-blue-500"></i>123 </div>124 <div>125 <p class="text-gray-800 font-medium">New user registered</p>126 <p class="text-gray-500 text-sm">John Doe joined the platform</p>127 <p class="text-gray-400 text-xs mt-1">2 hours ago</p>128 </div>129 </div>130 <div class="flex items-start">131 <div class="bg-green-100 p-2 rounded-full mr-3">132 <i data-feather="shopping-cart" class="text-green-500"></i>133 </div>134 <div>135 <p class="text-gray-800 font-medium">New purchase</p>136 <p class="text-gray-500 text-sm">Premium subscription</p>137 <p class="text-gray-400 text-xs mt-1">5 hours ago</p>138 </div>139 </div>140 <div class="flex items-start">141 <div class="bg-purple-100 p-2 rounded-full mr-3">142 <i data-feather="message-square" class="text-purple-500"></i>143 </div>144 <div>145 <p class="text-gray-800 font-medium">New feedback</p>146 <p class="text-gray-500 text-sm">User left a 5-star review</p>147 <p class="text-gray-400 text-xs mt-1">1 day ago</p>148 </div>149 </div>150 </div>151 </div>152 </div>153 </main>154 155 <script src="script.js"></script>156 <script>157 feather.replace();158 159 // Line Chart160 const lineCtx = document.getElementById('lineChart').getContext('2d');161 new Chart(lineCtx, {162 type: 'line',163 data: {164 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],165 datasets: [{166 label: 'New Users',167 data: [320, 450, 380, 510, 490, 620, 700],168 borderColor: '#3B82F6',169 backgroundColor: 'rgba(59, 130, 246, 0.1)',170 tension: 0.3,171 fill: true172 }]173 },174 options: {175 responsive: true,176 plugins: {177 legend: {178 display: false179 }180 },181 scales: {182 y: {183 beginAtZero: true184 }185 }186 }187 });188 189 // Doughnut Chart190 const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');191 new Chart(doughnutCtx, {192 type: 'doughnut',193 data: {194 labels: ['Subscriptions', 'Products', 'Services', 'Ads'],195 datasets: [{196 data: [45, 25, 20, 10],197 backgroundColor: [198 '#3B82F6',199 '#10B981',200 '#8B5CF6',201 '#F59E0B'202 ],203 borderWidth: 0204 }]205 },206 options: {207 responsive: true,208 plugins: {209 legend: {210 position: 'right'211 }212 },213 cutout: '70%'214 }215 });216 217 // Bar Chart218 const barCtx = document.getElementById('barChart').getContext('2d');219 new Chart(barCtx, {220 type: 'bar',221 data: {222 labels: ['Page Views', 'Avg. Session', 'Bounce Rate', 'Conversion'],223 datasets: [{224 label: 'Current',225 data: [1250, 3.2, 42, 2.8],226 backgroundColor: '#3B82F6',227 borderRadius: 4228 }, {229 label: 'Previous',230 data: [980, 2.8, 48, 2.1],231 backgroundColor: '#E5E7EB',232 borderRadius: 4233 }]234 },235 options: {236 responsive: true,237 scales: {238 y: {239 beginAtZero: true240 }241 }242 }243 });244 </script>245<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>246</body>247</html>