Longandlean/hazardguard-pro
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>HazardGuard Pro - Military Risk Assessment Suite</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://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/vanta@latest/dist/vanta.globe.min.js"></script>12 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>13 <script>14 tailwind.config = {15 theme: {16 extend: {17 colors: {18 primary: '#3b82f6', // blue-500 as default primary19 secondary: '#10b981', // emerald-500 as default secondary20 danger: '#ef4444', // red-500 for hazards21 warning: '#f59e0b', // amber-500 for warnings22 }23 }24 }25 }26 </script>27 <style>28 body {29 background-image: url('https://static.photos/military/1200x630/2');30 background-size: cover;31 background-attachment: fixed;32 background-position: center;33 }34 .content-overlay {35 background-color: rgba(255, 255, 255, 0.95);36 backdrop-filter: blur(5px);37 }38.hazard-card {39 transition: all 0.3s ease;40 border-left: 4px solid #ef4444;41 }42 .hazard-card:hover {43 transform: translateY(-5px);44 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);45 }46 .sidebar {47 transition: all 0.3s ease;48 }49 @media (max-width: 768px) {50 .sidebar {51 transform: translateX(-100%);52 position: fixed;53 z-index: 50;54 height: 100vh;55 }56 .sidebar.active {57 transform: translateX(0);58 }59 }60 </style>61</head>62<body class="min-h-screen">63 <div class="content-overlay min-h-screen">64<!-- Mobile Menu Button -->65 <button class="md:hidden fixed top-4 left-4 z-50 bg-primary text-white p-2 rounded-full shadow-lg" id="menuToggle">66 <i data-feather="menu"></i>67 </button>68 69 <!-- Sidebar Navigation -->70 <div class="sidebar bg-white w-64 min-h-screen fixed shadow-lg md:relative md:translate-x-0">71 <div class="p-4 border-b border-gray-200 flex items-center">72 <div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">73 <img src="https://static.photos/military/200x200/1" alt="Military Shield" class="w-full h-full rounded-full object-cover">74 </div>75 <h1 class="ml-3 font-bold text-xl text-gray-800">HAZARDGUARD <span class="text-primary">PRO</span></h1>76</div>77 <nav class="mt-6">78 <div class="px-4">79 <div class="text-xs uppercase font-semibold text-gray-500 mb-2">Main Menu</div>80 <a href="#" class="flex items-center py-2 px-4 bg-primary/10 text-primary rounded-lg mb-1">81 <i data-feather="home" class="w-5 h-5 mr-3"></i>82 Dashboard83 </a>84 <a href="report-builder.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">85 <i data-feather="activity" class="w-5 h-5 mr-3"></i>86 Risk Assessments87</a>88 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">89 <i data-feather="alert-triangle" class="w-5 h-5 mr-3"></i>90 Chemicals Database91 </a>92 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">93 <i data-feather="zap" class="w-5 h-5 mr-3"></i>94 Explosives (Yellowbook)95 </a>96 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">97 <i data-feather="hard-drive" class="w-5 h-5 mr-3"></i>98 Equipment Hazards99 </a>100 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">101 <i data-feather="factory" class="w-5 h-5 mr-3"></i>102 Facilities103 </a>104 <a href="report-builder.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">105 <i data-feather="file-text" class="w-5 h-5 mr-3"></i>106 Report Builder (DD2977)107 </a>108</div>109 <div class="px-4 mt-6">110 <div class="text-xs uppercase font-semibold text-gray-500 mb-2">Tools</div>111 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">112 <i data-feather="shield" class="w-5 h-5 mr-3"></i>113 PPE Advisor114 </a>115 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">116 <i data-feather="map" class="w-5 h-5 mr-3"></i>117 Evacuation Planner118 </a>119 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">120 <i data-feather="tool" class="w-5 h-5 mr-3"></i>121 SDS Finder122 </a>123 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">124 <i data-feather="map-pin" class="w-5 h-5 mr-3"></i>125 Site Inspector126</a>127 </div>128 </nav>129 </div>130 131 <!-- Main Content -->132 <div class="md:ml-64">133 <!-- Top Navigation -->134 <header class="bg-gray-900 text-white shadow-md">135 <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">136 <h2 class="text-lg font-semibold">DASHBOARD OVERVIEW</h2>137<div class="flex items-center space-x-4">138 <div class="relative">139 <input type="text" placeholder="Search hazards..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">140 <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>141 </div>142 <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center border border-primary-dark shadow-md">143 <i data-feather="plus" class="w-4 h-4 mr-2"></i>144 MISSION ASSESSMENT145 </button>146<div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">147 <i data-feather="user"></i>148 </div>149 </div>150 </div>151 </header>152 <!-- Dashboard Content -->153 <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 font-sans">154 <!-- Stats Cards -->155 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">156 <div class="bg-gray-800 text-white rounded-lg shadow-lg p-6 border-l-4 border-primary">157<div class="flex items-center justify-between">158 <div>159 <p class="text-sm font-medium text-gray-300">ACTIVE MISSIONS</p>160 <p class="text-2xl font-bold mt-1 text-white">24</p>161</div>162 <div class="bg-primary/10 p-3 rounded-full">163 <i data-feather="file-text" class="text-primary"></i>164 </div>165 </div>166 <div class="mt-4 flex items-center text-sm text-green-600">167 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>168 <span>12% from last month</span>169 </div>170 </div>171 <div class="bg-white rounded-lg shadow p-6">172 <div class="flex items-center justify-between">173 <div>174 <p class="text-sm font-medium text-gray-500">Chemical Hazards</p>175 <p class="text-2xl font-bold mt-1">156</p>176 </div>177 <div class="bg-danger/10 p-3 rounded-full">178 <i data-feather="alert-triangle" class="text-danger"></i>179 </div>180 </div>181 <div class="mt-4 flex items-center text-sm text-green-600">182 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>183 <span>12% new entries</span>184 </div>185 </div>186<div class="bg-white rounded-lg shadow p-6">187 <div class="flex items-center justify-between">188 <div>189 <p class="text-sm font-medium text-gray-500">Explosive Items</p>190 <p class="text-2xl font-bold mt-1">36</p>191 </div>192 <div class="bg-warning/10 p-3 rounded-full">193 <i data-feather="zap" class="text-warning"></i>194 </div>195 </div>196 <div class="mt-4 flex items-center text-sm text-red-600">197 <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>198 <span>3% reduced</span>199 </div>200 </div>201 <div class="bg-white rounded-lg shadow p-6">202 <div class="flex items-center justify-between">203 <div>204 <p class="text-sm font-medium text-gray-500">PPE Requirements</p>205 <p class="text-2xl font-bold mt-1">94</p>206 </div>207 <div class="bg-secondary/10 p-3 rounded-full">208 <i data-feather="shield" class="text-secondary"></i>209 </div>210 </div>211 <div class="mt-4 flex items-center text-sm text-green-600">212 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>213 <span>8% more protection</span>214 </div>215 </div>216</div>217 218 <!-- Recent Assessments -->219 <div class="bg-white rounded-lg shadow overflow-hidden mb-8">220 <div class="px-6 py-4 border-b border-gray-200">221 <h3 class="text-lg font-medium text-gray-900">Recent Risk Assessments</h3>222 </div>223 <div class="divide-y divide-gray-200">224 <div class="p-6 hover:bg-gray-50 cursor-pointer transition">225 <div class="flex items-center justify-between">226 <div>227 <h4 class="font-medium text-gray-900">Explosives Storage Area - Monthly</h4>228 <p class="text-sm text-gray-500 mt-1">Facility #4, Building B</p>229 </div>230 <div class="flex items-center">231 <span class="bg-danger/10 text-danger px-3 py-1 rounded-full text-xs font-medium">High Risk</span>232 <i data-feather="chevron-right" class="ml-4 text-gray-400"></i>233 </div>234 </div>235 <div class="mt-4 flex items-center text-sm text-gray-500">236 <i data-feather="calendar" class="w-4 h-4 mr-1.5"></i>237 <span>Last updated 2 days ago</span>238 </div>239 </div>240 <div class="p-6 hover:bg-gray-50 cursor-pointer transition">241 <div class="flex items-center justify-between">242 <div>243 <h4 class="font-medium text-gray-900">Chemical Handling - Production Line</h4>244 <p class="text-sm text-gray-500 mt-1">Main Manufacturing Floor</p>245 </div>246 <div class="flex items-center">247 <span class="bg-warning/10 text-warning px-3 py-1 rounded-full text-xs font-medium">Medium Risk</span>248 <i data-feather="chevron-right" class="ml-4 text-gray-400"></i>249 </div>250 </div>251 <div class="mt-4 flex items-center text-sm text-gray-500">252 <i data-feather="calendar" class="w-4 h-4 mr-1.5"></i>253 <span>Last updated 5 days ago</span>254 </div>255 </div>256 <div class="p-6 hover:bg-gray-50 cursor-pointer transition">257 <div class="flex items-center justify-between">258 <div>259 <h4 class="font-medium text-gray-900">Material Handling Equipment</h4>260 <p class="text-sm text-gray-500 mt-1">Warehouse Sector 3</p>261 </div>262 <div class="flex items-center">263 <span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-xs font-medium">Low Risk</span>264 <i data-feather="chevron-right" class="ml-4 text-gray-400"></i>265 </div>266 </div>267 <div class="mt-4 flex items-center text-sm text-gray-500">268 <i data-feather="calendar" class="w-4 h-4 mr-1.5"></i>269 <span>Last updated 1 week ago</span>270 </div>271 </div>272 </div>273 <div class="px-6 py-3 bg-gray-50 text-right">274 <a href="#" class="text-sm font-medium text-primary hover:text-primary/90">View all assessments</a>275 </div>276 </div>277 278 <!-- Charts Section -->279 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">280 <div class="bg-white rounded-lg shadow p-6">281 <h3 class="text-lg font-medium text-gray-900 mb-4">Hazard Distribution</h3>282 <canvas id="hazardChart" height="250"></canvas>283 </div>284 <div class="bg-white rounded-lg shadow p-6">285 <h3 class="text-lg font-medium text-gray-900 mb-4">Risk Level Trends</h3>286 <canvas id="riskChart" height="250"></canvas>287 </div>288 </div>289 290 <!-- Quick Actions -->291 <div class="bg-white rounded-lg shadow overflow-hidden">292 <div class="px-6 py-4 border-b border-gray-200">293 <h3 class="text-lg font-medium text-gray-900">Quick Actions</h3>294 </div>295 <div class="grid grid-cols-2 md:grid-cols-4 gap-6 p-6">296 <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition">297 <div class="bg-primary/10 p-3 rounded-full mb-3">298 <i data-feather="file-plus" class="text-primary"></i>299 </div>300 <span class="font-medium text-gray-900">New Assessment</span>301 </a>302 <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:border-danger hover:bg-danger/5 transition">303 <div class="bg-danger/10 p-3 rounded-full mb-3">304 <i data-feather="alert-triangle" class="text-danger"></i>305 </div>306 <span class="font-medium text-gray-900">Add Hazard</span>307 </a>308 <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:border-warning hover:bg-warning/5 transition">309 <div class="bg-warning/10 p-3 rounded-full mb-3">310 <i data-feather="zap" class="text-warning"></i>311 </div>312 <span class="font-medium text-gray-900">Explosives Tool</span>313 </a>314 <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:border-secondary hover:bg-secondary/5 transition">315 <div class="bg-secondary/10 p-3 rounded-full mb-3">316 <i data-feather="shield" class="text-secondary"></i>317 </div>318 <span class="font-medium text-gray-900">PPE Advisor</span>319 </a>320 </div>321 </div>322 </main>323 </div>324 325 <script>326 // Mobile menu toggle327 document.getElementById('menuToggle').addEventListener('click', function() {328 document.querySelector('.sidebar').classList.toggle('active');329 });330 331 // Initialize charts332 document.addEventListener('DOMContentLoaded', function() {333 feather.replace();334 335 // Hazard Distribution Chart336 const hazardCtx = document.getElementById('hazardChart').getContext('2d');337 const hazardChart = new Chart(hazardCtx, {338 type: 'doughnut',339 data: {340 labels: ['Chemical', 'Explosives', 'Equipment', 'Material Handling', 'Manufacturing'],341 datasets: [{342 data: [35, 15, 25, 15, 10],343 backgroundColor: [344 '#ef4444', // red for chemical345 '#f59e0b', // amber for explosives346 '#3b82f6', // blue for equipment347 '#10b981', // emerald for material handling348 '#8b5cf6' // violet for manufacturing349 ],350 borderWidth: 0351 }]352 },353 options: {354 responsive: true,355 plugins: {356 legend: {357 position: 'bottom'358 }359 }360 }361 });362 363 // Risk Level Trends Chart364 const riskCtx = document.getElementById('riskChart').getContext('2d');365 const riskChart = new Chart(riskCtx, {366 type: 'line',367 data: {368 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],369 datasets: [370 {371 label: 'High Risk',372 data: [12, 15, 18, 10, 14, 16, 13],373 borderColor: '#ef4444',374 backgroundColor: 'rgba(239, 68, 68, 0.1)',375 tension: 0.3,376 fill: true377 },378 {379 label: 'Medium Risk',380 data: [24, 22, 20, 25, 23, 21, 24],381 borderColor: '#f59e0b',382 backgroundColor: 'rgba(245, 158, 11, 0.1)',383 tension: 0.3,384 fill: true385 },386 {387 label: 'Low Risk',388 data: [32, 35, 38, 40, 37, 39, 42],389 borderColor: '#10b981',390 backgroundColor: 'rgba(16, 185, 129, 0.1)',391 tension: 0.3,392 fill: true393 }394 ]395 },396 options: {397 responsive: true,398 plugins: {399 legend: {400 position: 'bottom'401 }402 },403 scales: {404 y: {405 beginAtZero: true406 }407 }408 }409 });410 // Close content overlay div411 </div>412});413 </script>414</body>415</html>416