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>Explosives Hazard Tool (DOD 6055.09) - HazardGuard Pro</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 <style>12 .explosive-card {13 transition: all 0.3s ease;14 border-left: 4px solid #f59e0b;15 }16 .explosive-card:hover {17 transform: translateY(-3px);18 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);19 }20 .hazard-class-1 { background-color: #fef3c7; color: #92400e; } /* Minimal */21 .hazard-class-2 { background-color: #fde68a; color: #92400e; } /* Low */22 .hazard-class-3 { background-color: #fbbf24; color: #92400e; } /* Moderate */23 .hazard-class-4 { background-color: #f59e0b; color: #92400e; } /* High */24 .hazard-class-5 { background-color: #d97706; color: white; } /* Extreme */25 </style>26</head>27<body class="min-h-screen" style="background-image: url('https://static.photos/military/1200x630/4'); background-size: cover; background-attachment: fixed;">28 <div class="min-h-screen bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-sm">29<!-- Mobile Menu Button -->30 <button class="md:hidden fixed top-4 left-4 z-50 bg-primary text-white p-2 rounded-full shadow-lg" id="menuToggle">31 <i data-feather="menu"></i>32 </button>33 34 <!-- Sidebar Navigation -->35 <div class="sidebar bg-white w-64 min-h-screen fixed shadow-lg md:relative md:translate-x-0">36 <div class="p-4 border-b border-gray-200 flex items-center">37 <div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">38 <img src="https://static.photos/military/200x200/1" alt="Military Shield" class="w-full h-full rounded-full object-cover">39 </div>40 </div>41<h1 class="ml-3 font-bold text-xl text-gray-800">HAZARDGUARD <span class="text-primary">PRO</span></h1>42</div>43 <nav class="mt-6">44 <div class="px-4">45 <div class="text-xs uppercase font-semibold text-gray-500 mb-2">Main Menu</div>46 <a href="index.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">47 <i data-feather="home" class="w-5 h-5 mr-3"></i>48 Dashboard49 </a>50 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">51 <i data-feather="activity" class="w-5 h-5 mr-3"></i>52 Risk Assessment53 </a>54 <a href="chemical-database.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">55 <i data-feather="alert-triangle" class="w-5 h-5 mr-3"></i>56 Chemicals Database57 </a>58 <a href="explosives-tool.html" class="flex items-center py-2 px-4 bg-primary/10 text-primary rounded-lg mb-1">59 <i data-feather="zap" class="w-5 h-5 mr-3"></i>60 Explosives (Yellowbook)61 </a>62 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">63 <i data-feather="hard-drive" class="w-5 h-5 mr-3"></i>64 Equipment Hazards65 </a>66 <a href="#" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">67 <i data-feather="factory" class="w-5 h-5 mr-3"></i>68 Facilities69 </a>70 <a href="report-builder.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">71 <i data-feather="file-text" class="w-5 h-5 mr-3"></i>72 Report Builder (DD2977)73 </a>74</div>75 </nav>76 </div>77 78 <!-- Main Content -->79 <div class="md:ml-64">80 <!-- Top Navigation -->81 <header class="bg-gray-800 text-white shadow-md">82 <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">83 <h2 class="text-lg font-semibold">EXPLOSIVES HAZARD TOOL (DOD 6055.09)</h2>84<div class="flex items-center space-x-4">85 <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">86 <i data-feather="plus" class="w-4 h-4 mr-2"></i>87 NEW EXPLOSIVE88 </button>89</div>90 </div>91 </header>92 <!-- Explosives Tool Content -->93 <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 font-sans">94 <!-- Search and Filter -->95 <div class="bg-gray-800 text-white rounded-lg shadow-lg p-6 mb-6 border-l-4 border-primary">96<div class="grid grid-cols-1 md:grid-cols-3 gap-4">97 <div class="relative">98 <input type="text" placeholder="Search explosives..." class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">99 <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>100 </div>101 <select class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">102 <option value="">All Hazard Divisions</option>103 <option value="1.1">1.1 - Mass Explosion Hazard</option>104 <option value="1.2">1.2 - Projection Hazard</option>105 <option value="1.3">1.3 - Fire Hazard</option>106 <option value="1.4">1.4 - Minor Explosion Hazard</option>107 <option value="1.5">1.5 - Insensitive Explosives</option>108 <option value="1.6">1.6 - Extremely Insensitive</option>109 </select>110 <select class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">111 <option value="">All Compatibility Groups</option>112 <option value="A">A - Primary Explosive</option>113 <option value="B">B - Article with Primary Explosive</option>114 <option value="C">C - Propellant Explosive</option>115 <option value="D">D - Secondary Detonating Explosive</option>116 <option value="E">E - Article with Secondary Explosive</option>117 <option value="F">F - Article with Secondary Explosive</option>118 <option value="G">G - Pyrotechnic Substance</option>119 <option value="H">H - Explosives of Division 1.6</option>120 <option value="J">J - Articles Containing Both Explosive Substance</option>121 <option value="K">K - Articles Containing Both Explosive Substance</option>122 <option value="L">L - Explosives Not Fitted Into Other Groups</option>123 <option value="N">N - Articles with Extremely Insensitive Substances</option>124 <option value="S">S - Packaged to Limit Effects</option>125 </select>126 </div>127 </div>128 <!-- Explosives Cards Grid -->129 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">130 <!-- Explosive Card 1 -->131 <div class="explosive-card bg-gray-800 text-white rounded-lg shadow-lg p-6 border border-gray-700">132<div class="flex justify-between items-start">133 <div>134 <h3 class="font-bold text-lg">TNT (Trinitrotoluene)</h3>135 <p class="text-sm text-gray-500">UN: 0209</p>136 </div>137 <div class="flex items-center">138 <span class="hazard-class-4 px-2 py-1 rounded-full text-xs font-bold">1.1D</span>139 </div>140 </div>141 <div class="mt-4">142 <div class="flex justify-between text-sm mb-2">143 <span class="font-medium">Hazard Division:</span>144 <span class="font-bold">1.1 - Mass Explosion Hazard</span>145 </div>146 <div class="flex justify-between text-sm mb-2">147 <span class="font-medium">Compatibility Group:</span>148 <span class="font-bold">D - Secondary Detonating</span>149 </div>150 <div class="flex justify-between text-sm mb-2">151 <span class="font-medium">Net Explosive Weight:</span>152 <span>Variable</span>153 </div>154 <div class="flex justify-between text-sm mb-2">155 <span class="font-medium">Storage Q-Distance:</span>156 <span class="font-bold">150 ft/lb<sup>1/3</sup></span>157 </div>158 <div class="flex justify-between text-sm">159 <span class="font-medium">PPE Required:</span>160 <div class="flex space-x-1">161 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Flame Retardant</span>162 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Gloves</span>163 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Safety Shoes</span>164 </div>165 </div>166 </div>167 <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between">168 <button class="text-primary hover:text-primary/90 text-sm font-medium flex items-center">169 <i data-feather="file-text" class="w-4 h-4 mr-1"></i>170 View SDS171</button>172 <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center">173 <i data-feather="edit" class="w-4 h-4 mr-1"></i>174 Edit175 </button>176 </div>177 </div>178 179 <!-- Explosive Card 2 -->180 <div class="explosive-card bg-white rounded-lg shadow p-6">181 <div class="flex justify-between items-start">182 <div>183 <h3 class="font-bold text-lg">RDX (Cyclonite)</h3>184 <p class="text-sm text-gray-500">UN: 0081</p>185 </div>186 <div class="flex items-center">187 <span class="hazard-class-4 px-2 py-1 rounded-full text-xs font-bold">1.1D</span>188 </div>189 </div>190 <div class="mt-4">191 <div class="flex justify-between text-sm mb-2">192 <span class="font-medium">Hazard Division:</span>193 <span class="font-bold">1.1 - Mass Explosion Hazard</span>194 </div>195 <div class="flex justify-between text-sm mb-2">196 <span class="font-medium">Compatibility Group:</span>197 <span class="font-bold">D - Secondary Detonating</span>198 </div>199 <div class="flex justify-between text-sm mb-2">200 <span class="font-medium">Net Explosive Weight:</span>201 <span>Variable</span>202 </div>203 <div class="flex justify-between text-sm mb-2">204 <span class="font-medium">Storage Q-Distance:</span>205 <span class="font-bold">150 ft/lb<sup>1/3</sup></span>206 </div>207 <div class="flex justify-between text-sm">208 <span class="font-medium">PPE Required:</span>209 <div class="flex space-x-1">210 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Respirator</span>211 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Gloves</span>212 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Protective Suit</span>213 </div>214 </div>215 </div>216 <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between">217 <button class="text-primary hover:text-primary/90 text-sm font-medium flex items-center">218 <i data-feather="file-text" class="w-4 h-4 mr-1"></i>219 View SDS220</button>221 <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center">222 <i data-feather="edit" class="w-4 h-4 mr-1"></i>223 Edit224 </button>225 </div>226 </div>227 228 <!-- Explosive Card 3 -->229 <div class="explosive-card bg-white rounded-lg shadow p-6">230 <div class="flex justify-between items-start">231 <div>232 <h3 class="font-bold text-lg">C4 (Composition C-4)</h3>233 <p class="text-sm text-gray-500">UN: 0135</p>234 </div>235 <div class="flex items-center">236 <span class="hazard-class-4 px-2 py-1 rounded-full text-xs font-bold">1.1D</span>237 </div>238 </div>239 <div class="mt-4">240 <div class="flex justify-between text-sm mb-2">241 <span class="font-medium">Hazard Division:</span>242 <span class="font-bold">1.1 - Mass Explosion Hazard</span>243 </div>244 <div class="flex justify-between text-sm mb-2">245 <span class="font-medium">Compatibility Group:</span>246 <span class="font-bold">D - Secondary Detonating</span>247 </div>248 <div class="flex justify-between text-sm mb-2">249 <span class="font-medium">Net Explosive Weight:</span>250 <span>1.34 g/cm³</span>251 </div>252 <div class="flex justify-between text-sm mb-2">253 <span class="font-medium">Storage Q-Distance:</span>254 <span class="font-bold">150 ft/lb<sup>1/3</sup></span>255 </div>256 <div class="flex justify-between text-sm">257 <span class="font-medium">PPE Required:</span>258 <div class="flex space-x-1">259 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Gloves</span>260 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Safety Glasses</span>261 </div>262 </div>263 </div>264 <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between">265 <button class="text-primary hover:text-primary/90 text-sm font-medium flex items-center">266 <i data-feather="file-text" class="w-4 h-4 mr-1"></i>267 View SDS268</button>269 <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center">270 <i data-feather="edit" class="w-4 h-4 mr-1"></i>271 Edit272 </button>273 </div>274 </div>275 276 <!-- Explosive Card 4 -->277 <div class="explosive-card bg-white rounded-lg shadow p-6">278 <div class="flex justify-between items-start">279 <div>280 <h3 class="font-bold text-lg">Black Powder</h3>281 <p class="text-sm text-gray-500">UN: 0027</p>282 </div>283 <div class="flex items-center">284 <span class="hazard-class-3 px-2 py-1 rounded-full text-xs font-bold">1.1D</span>285 </div>286 </div>287 <div class="mt-4">288 <div class="flex justify-between text-sm mb-2">289 <span class="font-medium">Hazard Division:</span>290 <span class="font-bold">1.1 - Mass Explosion Hazard</span>291 </div>292 <div class="flex justify-between text-sm mb-2">293 <span class="font-medium">Compatibility Group:</span>294 <span class="font-bold">D - Secondary Detonating</span>295 </div>296 <div class="flex justify-between text-sm mb-2">297 <span class="font-medium">Net Explosive Weight:</span>298 <span>Variable</span>299 </div>300 <div class="flex justify-between text-sm mb-2">301 <span class="font-medium">Storage Q-Distance:</span>302 <span class="font-bold">100 ft/lb<sup>1/3</sup></span>303 </div>304 <div class="flex justify-between text-sm">305 <span class="font-medium">PPE Required:</span>306 <div class="flex space-x-1">307 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Dust Mask</span>308 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Gloves</span>309 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Safety Glasses</span>310 </div>311 </div>312 </div>313 <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between">314 <button class="text-primary hover:text-primary/90 text-sm font-medium flex items-center">315 <i data-feather="file-text" class="w-4 h-4 mr-1"></i>316 View SDS317</button>318 <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center">319 <i data-feather="edit" class="w-4 h-4 mr-1"></i>320 Edit321 </button>322 </div>323 </div>324 325 <!-- Explosive Card 5 -->326 <div class="explosive-card bg-white rounded-lg shadow p-6">327 <div class="flex justify-between items-start">328 <div>329 <h3 class="font-bold text-lg">Detonating Cord</h3>330 <p class="text-sm text-gray-500">UN: 0065</p>331 </div>332 <div class="flex items-center">333 <span class="hazard-class-2 px-2 py-1 rounded-full text-xs font-bold">1.4D</span>334 </div>335 </div>336 <div class="mt-4">337 <div class="flex justify-between text-sm mb-2">338 <span class="font-medium">Hazard Division:</span>339 <span class="font-bold">1.4 - Minor Explosion Hazard</span>340 </div>341 <div class="flex justify-between text-sm mb-2">342 <span class="font-medium">Compatibility Group:</span>343 <span class="font-bold">D - Secondary Detonating</span>344 </div>345 <div class="flex justify-between text-sm mb-2">346 <span class="font-medium">Net Explosive Weight:</span>347 <span>50-100 g/m</span>348 </div>349 <div class="flex justify-between text-sm mb-2">350 <span class="font-medium">Storage Q-Distance:</span>351 <span class="font-bold">50 ft/lb<sup>1/3</sup></span>352 </div>353 <div class="flex justify-between text-sm">354 <span class="font-medium">PPE Required:</span>355 <div class="flex space-x-1">356 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Gloves</span>357 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Safety Glasses</span>358 </div>359 </div>360 </div>361 <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between">362 <button class="text-primary hover:text-primary/90 text-sm font-medium flex items-center">363 <i data-feather="file-text" class="w-4 h-4 mr-1"></i>364 View SDS365</button>366 <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center">367 <i data-feather="edit" class="w-4 h-4 mr-1"></i>368 Edit369 </button>370 </div>371 </div>372 373 <!-- Explosive Card 6 -->374 <div class="explosive-card bg-white rounded-lg shadow p-6">375 <div class="flex justify-between items-start">376 <div>377 <h3 class="font-bold text-lg">Blasting Caps</h3>378 <p class="text-sm text-gray-500">UN: 0081</p>379 </div>380 <div class="flex items-center">381 <span class="hazard-class-5 px-2 py-1 rounded-full text-xs font-bold">1.1B</span>382 </div>383 </div>384 <div class="mt-4">385 <div class="flex justify-between text-sm mb-2">386 <span class="font-medium">Hazard Division:</span>387 <span class="font-bold">1.1 - Mass Explosion Hazard</span>388 </div>389 <div class="flex justify-between text-sm mb-2">390 <span class="font-medium">Compatibility Group:</span>391 <span class="font-bold">B - Primary Explosive</span>392 </div>393 <div class="flex justify-between text-sm mb-2">394 <span class="font-medium">Net Explosive Weight:</span>395 <span>1-5 g per cap</span>396 </div>397 <div class="flex justify-between text-sm mb-2">398 <span class="font-medium">Storage Q-Distance:</span>399 <span class="font-bold">200 ft/lb<sup>1/3</sup></span>400 </div>401 <div class="flex justify-between text-sm">402 <span class="font-medium">PPE Required:</span>403 <div class="flex space-x-1">404 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Anti-static</span>405 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Gloves</span>406 <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">Safety Glasses</span>407 </div>408 </div>409 </div>410 <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between">411 <button class="text-primary hover:text-primary/90 text-sm font-medium flex items-center">412 <i data-feather="file-text" class="w-4 h-4 mr-1"></i>413 View SDS414</button>415 <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center">416 <i data-feather="edit" class="w-4 h-4 mr-1"></i>417 Edit418 </button>419 </div>420 </div>421 </div>422 <!-- Hazard Controls Section -->423 <div class="bg-white rounded-lg shadow p-6 mt-8">424 <h3 class="text-lg font-medium text-gray-900 mb-6">Hazard Control Measures</h3>425 426 <!-- Personnel Controls -->427 <div class="mb-8">428 <h4 class="font-medium text-gray-900 mb-3 flex items-center border-b pb-2">429 <i data-feather="users" class="w-5 h-5 mr-2 text-primary"></i>430 Personnel Controls431 </h4>432 <ul class="list-disc pl-5 text-sm text-gray-600 space-y-2">433 <li>Mandatory minimum two-person rule for all explosive handling</li>434 <li>Quarterly specialized training for all personnel</li>435 <li>Medical fitness certifications for explosive handlers</li>436 <li>Strict no-smoking policy within 500 feet of storage</li>437 <li>Personnel accountability system with check-in/out procedures</li>438 <li>Regular drug/alcohol testing for authorized personnel</li>439 <li>Emergency response drills every 60 days</li>440 </ul>441 </div>442 443 <!-- Equipment Controls -->444 <div class="mb-8">445 <h4 class="font-medium text-gray-900 mb-3 flex items-center border-b pb-2">446 <i data-feather="tool" class="w-5 h-5 mr-2 text-warning"></i>447 Equipment Controls448 </h4>449 <ul class="list-disc pl-5 text-sm text-gray-600 space-y-2">450 <li>Intrinsically safe tools and equipment in storage areas</li>451 <li>Grounding and bonding systems for all transfer equipment</li>452 <li>Explosion-proof electrical installations</li>453 <li>Non-sparking forklifts and handling equipment</li>454 <li>Approved containers with proper hazard labeling</li>455 <li>Automated fire suppression systems</li>456 <li>Daily equipment inspections before use</li>457 </ul>458 </div>459 460 <!-- Facility Controls -->461 <div class="mb-4">462 <h4 class="font-medium text-gray-900 mb-3 flex items-center border-b pb-2">463 <i data-feather="home" class="w-5 h-5 mr-2 text-danger"></i>464 Explosive Facility Controls465 </h4>466 <ul class="list-disc pl-5 text-sm text-gray-600 space-y-2">467 <li>Blast-resistant construction meeting DoD standards</li>468 <li>Minimum Q-Distance maintained per DoD 6055.09</li>469 <li>Lightning protection systems with regular testing</li>470 <li>Perimeter security with motion sensors and cameras</li>471 <li>Positive ventilation systems with explosion relief panels</li>472 <li>Segregated storage for incompatible materials</li>473 <li>Monthly structural integrity inspections</li>474 <li>Restricted access with biometric verification</li>475 </ul>476 </div>477</div>478</main>479 </div>480 481 <script>482 // Mobile menu toggle483 document.getElementById('menuToggle').addEventListener('click', function() {484 document.querySelector('.sidebar').classList.toggle('active');485 });486 487 // Initialize feather icons488 document.addEventListener('DOMContentLoaded', function() {489 feather.replace();490 });491 </script>492</body>493</html>494