Intrepid298/warehouse-wizard-visualizer
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Warehouse Visualization</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 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: '#6366f1',18 secondary: '#8b5cf6',19 }20 }21 }22 }23 </script>24 <style>25 .data-cell {26 transition: all 0.2s ease;27 }28 .data-cell:hover {29 transform: scale(1.05);30 z-index: 10;31 }32 .need-box-true {33 background-color: rgba(239, 68, 68, 0.2);34 border-left: 4px solid #ef4444;35 }36 .need-box-false {37 background-color: rgba(16, 185, 129, 0.2);38 border-left: 4px solid #10b981;39 }40 .glow-effect {41 box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);42 }43 @media (max-width: 768px) {44 .responsive-table {45 display: block;46 overflow-x: auto;47 }48 }49 </style>50</head>51<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen">52 <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>53 54 <div class="container mx-auto px-4 py-8">55 <!-- Header -->56 <header class="mb-10 text-center">57 <h1 class="text-4xl font-bold text-primary dark:text-primary-300 mb-2">Warehouse Wizard</h1>58 <p class="text-xl text-secondary dark:text-secondary-300">Visual Storage Management System</p>59 <div class="flex justify-center mt-4">60 <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary rounded-full"></div>61 </div>62 </header>63 64 <!-- Dashboard Overview -->65 <section class="mb-12 grid grid-cols-1 md:grid-cols-3 gap-6">66 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg glow-effect">67 <h3 class="text-lg font-semibold mb-4 text-primary dark:text-primary-300">Storage Locations</h3>68 <div class="text-3xl font-bold">142</div>69 <div class="flex items-center mt-2">70 <i data-feather="map-pin" class="w-5 h-5 mr-2 text-secondary"></i>71 <span class="text-sm">Active aisles</span>72 </div>73 </div>74 75 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg glow-effect">76 <h3 class="text-lg font-semibold mb-4 text-primary dark:text-primary-300">Box Updates Needed</h3>77 <div class="text-3xl font-bold">27</div>78 <div class="flex items-center mt-2">79 <i data-feather="alert-circle" class="w-5 h-5 mr-2 text-red-500"></i>80 <span class="text-sm">Require attention</span>81 </div>82 </div>83 84 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg glow-effect">85 <h3 class="text-lg font-semibold mb-4 text-primary dark:text-primary-300">Average Width Change</h3>86 <div class="text-3xl font-bold">+2.4cm</div>87 <div class="flex items-center mt-2">88 <i data-feather="trending-up" class="w-5 h-5 mr-2 text-green-500"></i>89 <span class="text-sm">From current boxes</span>90 </div>91 </div>92 </section>93 94 <!-- Main Visualization -->95 <section class="mb-12">96 <div class="flex flex-col md:flex-row gap-8">97 <!-- Table Section -->98 <div class="w-full md:w-1/2">99 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">100 <div class="flex justify-between items-center mb-6">101 <h2 class="text-2xl font-bold text-primary dark:text-primary-300">Storage Locations</h2>102 <div class="flex space-x-2">103 <button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary-600 transition">104 <i data-feather="filter" class="w-4 h-4 inline mr-1"></i> Filter105 </button>106 <button class="px-3 py-1 bg-secondary text-white rounded-md hover:bg-secondary-600 transition">107 <i data-feather="download" class="w-4 h-4 inline mr-1"></i> Export108 </button>109 </div>110 </div>111 112 <div class="responsive-table overflow-x-auto">113 <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">114 <thead class="bg-gray-50 dark:bg-gray-700">115 <tr>116 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aisle/Bay/Shelf</th>117 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>118 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Shelves</th>119 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Box Width</th>120 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>121 </tr>122 </thead>123 <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">124 <!-- Sample Data Rows -->125 <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">126 <td class="px-4 py-3 whitespace-nowrap data-cell">A-01/B-02/S-03</td>127 <td class="px-4 py-3 whitespace-nowrap data-cell">Standard</td>128 <td class="px-4 py-3 whitespace-nowrap data-cell">5</td>129 <td class="px-4 py-3 whitespace-nowrap data-cell">130 <div class="flex items-center">131 <span class="text-red-500">30cm</span>132 <i data-feather="arrow-right" class="w-4 h-4 mx-2 text-gray-400"></i>133 <span class="text-green-500">35cm</span>134 </div>135 </td>136 <td class="px-4 py-3 whitespace-nowrap">137 <span class="px-2 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Needs Update</span>138 </td>139 </tr>140 <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">141 <td class="px-4 py-3 whitespace-nowrap data-cell">B-05/B-01/S-04</td>142 <td class="px-4 py-3 whitespace-nowrap data-cell">Refrigerated</td>143 <td class="px-4 py-3 whitespace-nowrap data-cell">8</td>144 <td class="px-4 py-3 whitespace-nowrap data-cell">145 <div class="flex items-center">146 <span>45cm</span>147 <i data-feather="arrow-right" class="w-4 h-4 mx-2 text-gray-400"></i>148 <span>45cm</span>149 </div>150 </td>151 <td class="px-4 py-3 whitespace-nowrap">152 <span class="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">OK</span>153 </td>154 </tr>155 <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">156 <td class="px-4 py-3 whitespace-nowrap data-cell">C-03/B-02/S-01</td>157 <td class="px-4 py-3 whitespace-nowrap data-cell">Hazardous</td>158 <td class="px-4 py-3 whitespace-nowrap data-cell">3</td>159 <td class="px-4 py-3 whitespace-nowrap data-cell">160 <div class="flex items-center">161 <span class="text-red-500">25cm</span>162 <i data-feather="arrow-right" class="w-4 h-4 mx-2 text-gray-400"></i>163 <span class="text-green-500">30cm</span>164 </div>165 </td>166 <td class="px-4 py-3 whitespace-nowrap">167 <span class="px-2 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Needs Update</span>168 </td>169 </tr>170 <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">171 <td class="px-4 py-3 whitespace-nowrap data-cell">D-01/B-03/S-02</td>172 <td class="px-4 py-3 whitespace-nowrap data-cell">Standard</td>173 <td class="px-4 py-3 whitespace-nowrap data-cell">6</td>174 <td class="px-4 py-3 whitespace-nowrap data-cell">175 <div class="flex items-center">176 <span>40cm</span>177 <i data-feather="arrow-right" class="w-4 h-4 mx-2 text-gray-400"></i>178 <span>40cm</span>179 </div>180 </td>181 <td class="px-4 py-3 whitespace-nowrap">182 <span class="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">OK</span>183 </td>184 </tr>185 </tbody>186 </table>187 </div>188 </div>189 </div>190 191 <!-- Charts Section -->192 <div class="w-full md:w-1/2">193 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg mb-6">194 <h2 class="text-2xl font-bold text-primary dark:text-primary-300 mb-6">Box Width Changes</h2>195 <canvas id="widthChart" height="250"></canvas>196 </div>197 198 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">199 <h2 class="text-2xl font-bold text-primary dark:text-primary-300 mb-6">Shelf Distribution</h2>200 <canvas id="shelfChart" height="250"></canvas>201 </div>202 </div>203 </div>204 </section>205 206 <!-- Warehouse Layout Visualization -->207 <section class="mb-12">208 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">209 <div class="flex justify-between items-center mb-6">210 <h2 class="text-2xl font-bold text-primary dark:text-primary-300">Warehouse Layout</h2>211 <div class="flex space-x-2">212 <button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary-600 transition">213 <i data-feather="maximize" class="w-4 h-4 inline mr-1"></i> Fullscreen214 </button>215 </div>216 </div>217 218 <div class="relative h-64 md:h-96 bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden">219 <div class="absolute inset-0 flex items-center justify-center">220 <div class="text-center">221 <i data-feather="map" class="w-16 h-16 mx-auto text-gray-400"></i>222 <p class="mt-2 text-gray-500 dark:text-gray-400">Interactive warehouse map visualization</p>223 </div>224 </div>225 226 <!-- Sample layout elements -->227 <div class="absolute top-1/4 left-1/4 w-16 h-16 bg-red-100 dark:bg-red-900 border-2 border-red-500 rounded flex items-center justify-center cursor-pointer hover:bg-red-200 dark:hover:bg-red-800 transition" title="A-01 (Needs Update)">228 <span class="text-xs font-bold">A-01</span>229 </div>230 <div class="absolute top-1/3 right-1/4 w-16 h-16 bg-green-100 dark:bg-green-900 border-2 border-green-500 rounded flex items-center justify-center cursor-pointer hover:bg-green-200 dark:hover:bg-green-800 transition" title="B-05 (OK)">231 <span class="text-xs font-bold">B-05</span>232 </div>233 <div class="absolute bottom-1/4 left-1/3 w-16 h-16 bg-red-100 dark:bg-red-900 border-2 border-red-500 rounded flex items-center justify-center cursor-pointer hover:bg-red-200 dark:hover:bg-red-800 transition" title="C-03 (Needs Update)">234 <span class="text-xs font-bold">C-03</span>235 </div>236 <div class="absolute bottom-1/3 right-1/3 w-16 h-16 bg-green-100 dark:bg-green-900 border-2 border-green-500 rounded flex items-center justify-center cursor-pointer hover:bg-green-200 dark:hover:bg-green-800 transition" title="D-01 (OK)">237 <span class="text-xs font-bold">D-01</span>238 </div>239 </div>240 </div>241 </section>242 </div>243 244 <script>245 // Initialize Vanta.js background246 VANTA.GLOBE({247 el: "#vanta-bg",248 mouseControls: true,249 touchControls: true,250 gyroControls: false,251 minHeight: 200.00,252 minWidth: 200.00,253 scale: 1.00,254 scaleMobile: 1.00,255 color: "#6366f1",256 backgroundColor: "#111827",257 size: 0.8258 });259 260 // Initialize charts261 document.addEventListener('DOMContentLoaded', function() {262 feather.replace();263 264 // Width Comparison Chart265 const widthCtx = document.getElementById('widthChart').getContext('2d');266 const widthChart = new Chart(widthCtx, {267 type: 'bar',268 data: {269 labels: ['A-01/B-02/S-03', 'B-05/B-01/S-04', 'C-03/B-02/S-01', 'D-01/B-03/S-02'],270 datasets: [271 {272 label: 'Current Width',273 data: [30, 45, 25, 40],274 backgroundColor: 'rgba(239, 68, 68, 0.7)',275 borderColor: 'rgba(239, 68, 68, 1)',276 borderWidth: 1277 },278 {279 label: 'New Width',280 data: [35, 45, 30, 40],281 backgroundColor: 'rgba(16, 185, 129, 0.7)',282 borderColor: 'rgba(16, 185, 129, 1)',283 borderWidth: 1284 }285 ]286 },287 options: {288 responsive: true,289 scales: {290 y: {291 beginAtZero: true,292 title: {293 display: true,294 text: 'Width (cm)'295 }296 }297 },298 plugins: {299 legend: {300 position: 'top',301 },302 tooltip: {303 mode: 'index',304 intersect: false,305 }306 }307 }308 });309 310 // Shelf Distribution Chart311 const shelfCtx = document.getElementById('shelfChart').getContext('2d');312 const shelfChart = new Chart(shelfCtx, {313 type: 'doughnut',314 data: {315 labels: ['1-3 Shelves', '4-6 Shelves', '7-9 Shelves', '10+ Shelves'],316 datasets: [{317 data: [15, 35, 25, 10],318 backgroundColor: [319 'rgba(99, 102, 241, 0.7)',320 'rgba(139, 92, 246, 0.7)',321 'rgba(167, 139, 250, 0.7)',322 'rgba(203, 213, 225, 0.7)'323 ],324 borderColor: [325 'rgba(99, 102, 241, 1)',326 'rgba(139, 92, 246, 1)',327 'rgba(167, 139, 250, 1)',328 'rgba(203, 213, 225, 1)'329 ],330 borderWidth: 1331 }]332 },333 options: {334 responsive: true,335 plugins: {336 legend: {337 position: 'right',338 }339 }340 }341 });342 343 // Add interactivity to table rows344 document.querySelectorAll('.data-cell').forEach(cell => {345 cell.addEventListener('mouseenter', function() {346 const row = this.closest('tr');347 const location = row.cells[0].textContent;348 // Highlight corresponding elements in charts349 // This would be more dynamic with real data350 });351 });352 });353 </script>354 <script>feather.replace();</script>355</body>356</html>357