SNPerformance/velocity-vault-auto-works
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>Data Visualization | Velocity Vault</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 <style>11 .data-card {12 backdrop-filter: blur(10px);13 box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);14 transition: transform 0.3s ease;15 }16 .data-card:hover {17 transform: translateY(-5px);18 }19 canvas {20 max-height: 500px;21 }22 </style>23</head>24<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white">25 <!-- Navigation -->26 <nav class="bg-gray-900 bg-opacity-90 py-4 px-4 sm:px-6 lg:px-8">27 <div class="max-w-7xl mx-auto flex justify-between items-center">28 <a href="index.html" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">29 Velocity Vault30 </a>31 <div class="flex space-x-6">32 <a href="index.html" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">Home</a>33 <a href="visualization.html" class="text-blue-400">Visualization</a>34 </div>35 </div>36 </nav>37 38 <!-- Main Content -->39 <main class="py-12 px-4 sm:px-6 lg:px-8">40 <div class="max-w-7xl mx-auto">41 <h1 class="text-4xl font-bold mb-12 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">42 Performance Data Visualization43 </h1>44 45 <!-- Data Cards Grid -->46 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">47 <div class="data-card bg-gray-800 bg-opacity-70 rounded-2xl p-6">48 <h2 class="text-2xl font-bold mb-4">Quarterly Sales</h2>49 <canvas id="salesChart"></canvas>50 </div>51 <div class="data-card bg-gray-800 bg-opacity-70 rounded-2xl p-6">52 <h2 class="text-2xl font-bold mb-4">Product Categories</h2>53 <canvas id="categoriesChart"></canvas>54 </div>55 <div class="data-card bg-gray-800 bg-opacity-70 rounded-2xl p-6">56 <h2 class="text-2xl font-bold mb-4">Customer Growth</h2>57 <canvas id="customersChart"></canvas>58 </div>59 <div class="data-card bg-gray-800 bg-opacity-70 rounded-2xl p-6">60 <h2 class="text-2xl font-bold mb-4">Performance Metrics</h2>61 <canvas id="metricsChart"></canvas>62 </div>63 </div>64 65 <!-- Data Table -->66 <div class="data-card bg-gray-800 bg-opacity-70 rounded-2xl p-6 overflow-x-auto">67 <h2 class="text-2xl font-bold mb-6">Detailed Performance Data</h2>68 <table class="min-w-full divide-y divide-gray-700">69 <thead>70 <tr>71 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Metric</th>72 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Q1</th>73 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Q2</th>74 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Q3</th>75 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Q4</th>76 </tr>77 </thead>78 <tbody class="divide-y divide-gray-700">79 <tr>80 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-400">Sales ($)</td>81 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">125,000</td>82 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">145,000</td>83 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">165,000</td>84 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">195,000</td>85 </tr>86 <tr>87 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-400">New Customers</td>88 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">320</td>89 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">380</td>90 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">420</td>91 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">510</td>92 </tr>93 <tr>94 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-400">Avg. Order Value</td>95 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">$195</td>96 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">$210</td>97 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">$225</td>98 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">$240</td>99 </tr>100 </tbody>101 </table>102 </div>103 </div>104 </main>105 106 <!-- Footer -->107 <footer class="bg-gray-900 bg-opacity-90 py-12 px-4 sm:px-6 lg:px-8 mt-12">108 <div class="max-w-7xl mx-auto">109 <div class="flex flex-col items-center justify-center">110 <div class="flex space-x-6 mb-6">111 <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-200">112 <i data-feather="twitter" class="w-6 h-6"></i>113 </a>114 <a href="#" class="text-gray-400 hover:text-red-500 transition-colors duration-200">115 <i data-feather="instagram" class="w-6 h-6"></i>116 </a>117 <a href="#" class="text-gray-400 hover:text-pink-600 transition-colors duration-200">118 <i data-feather="youtube" class="w-6 h-6"></i>119 </a>120 <a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-200">121 <i data-feather="facebook" class="w-6 h-6"></i>122 </a>123 </div>124 <p class="text-center text-gray-400 text-sm">125 This shop will be powered by <a href="#" class="text-blue-400 hover:text-blue-300">Shopify</a>126 </p>127 <p class="mt-2 text-center text-gray-500 text-xs">128 © 2023 Velocity Vault Auto Works. All rights reserved.129 </p>130 </div>131 </div>132 </footer>133 134 <script>135 feather.replace();136 137 // Initialize charts138 document.addEventListener('DOMContentLoaded', function() {139 // Sales Chart140 const salesCtx = document.getElementById('salesChart').getContext('2d');141 new Chart(salesCtx, {142 type: 'line',143 data: {144 labels: ['Q1', 'Q2', 'Q3', 'Q4'],145 datasets: [{146 label: 'Sales ($)',147 data: [125000, 145000, 165000, 195000],148 backgroundColor: 'rgba(99, 102, 241, 0.2)',149 borderColor: 'rgba(99, 102, 241, 1)',150 borderWidth: 2,151 tension: 0.3,152 fill: true153 }]154 },155 options: {156 responsive: true,157 plugins: {158 legend: {159 labels: {160 color: '#fff'161 }162 }163 },164 scales: {165 y: {166 beginAtZero: true,167 grid: {168 color: 'rgba(255, 255, 255, 0.1)'169 },170 ticks: {171 color: '#fff'172 }173 },174 x: {175 grid: {176 color: 'rgba(255, 255, 255, 0.1)'177 },178 ticks: {179 color: '#fff'180 }181 }182 }183 }184 });185 186 // Categories Chart187 const categoriesCtx = document.getElementById('categoriesChart').getContext('2d');188 new Chart(categoriesCtx, {189 type: 'doughnut',190 data: {191 labels: ['Performance Parts', 'Maintenance', 'Accessories', 'Customization'],192 datasets: [{193 data: [35, 25, 20, 20],194 backgroundColor: [195 'rgba(99, 102, 241, 0.8)',196 'rgba(167, 139, 250, 0.8)',197 'rgba(129, 140, 248, 0.8)',198 'rgba(196, 181, 253, 0.8)'199 ],200 borderColor: [201 'rgba(99, 102, 241, 1)',202 'rgba(167, 139, 250, 1)',203 'rgba(129, 140, 248, 1)',204 'rgba(196, 181, 253, 1)'205 ],206 borderWidth: 1207 }]208 },209 options: {210 responsive: true,211 plugins: {212 legend: {213 position: 'right',214 labels: {215 color: '#fff'216 }217 }218 }219 }220 });221 222 // Customers Chart223 const customersCtx = document.getElementById('customersChart').getContext('2d');224 new Chart(customersCtx, {225 type: 'bar',226 data: {227 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],228 datasets: [{229 label: 'New Customers',230 data: [85, 75, 95, 105, 120, 130],231 backgroundColor: 'rgba(167, 139, 250, 0.6)',232 borderColor: 'rgba(167, 139, 250, 1)',233 borderWidth: 1234 }]235 },236 options: {237 responsive: true,238 plugins: {239 legend: {240 labels: {241 color: '#fff'242 }243 }244 },245 scales: {246 y: {247 beginAtZero: true,248 grid: {249 color: 'rgba(255, 255, 255, 0.1)'250 },251 ticks: {252 color: '#fff'253 }254 },255 x: {256 grid: {257 color: 'rgba(255, 255, 255, 0.1)'258 },259 ticks: {260 color: '#fff'261 }262 }263 }264 }265 });266 267 // Metrics Chart268 const metricsCtx = document.getElementById('metricsChart').getContext('2d');269 new Chart(metricsCtx, {270 type: 'radar',271 data: {272 labels: ['Sales Growth', 'Customer Satisfaction', 'Market Reach', 'Product Quality', 'Brand Awareness'],273 datasets: [{274 label: '2023 Metrics',275 data: [85, 90, 75, 95, 80],276 backgroundColor: 'rgba(129, 140, 248, 0.2)',277 borderColor: 'rgba(129, 140, 248, 1)',278 pointBackgroundColor: 'rgba(129, 140, 248, 1)',279 pointBorderColor: '#fff',280 pointHoverBackgroundColor: '#fff',281 pointHoverBorderColor: 'rgba(129, 140, 248, 1)',282 borderWidth: 2283 }]284 },285 options: {286 responsive: true,287 plugins: {288 legend: {289 labels: {290 color: '#fff'291 }292 }293 },294 scales: {295 r: {296 angleLines: {297 color: 'rgba(255, 255, 255, 0.1)'298 },299 grid: {300 color: 'rgba(255, 255, 255, 0.1)'301 },302 pointLabels: {303 color: '#fff'304 },305 ticks: {306 backdropColor: 'rgba(0, 0, 0, 0)',307 color: '#fff'308 }309 }310 }311 }312 });313 });314 </script>315</body>316</html>