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>DD2977 Risk Assessment - 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 <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>12 <style>13 .step {14 display: none;15 }16 .step.active {17 display: block;18 }19 .risk-matrix td {20 width: 20%;21 text-align: center;22 padding: 8px;23 border: 1px solid #e5e7eb;24 }25 .risk-matrix th {26 background-color: #f3f4f6;27 font-weight: 500;28 }29 .severity-critical { background-color: #ef4444; color: white; }30 .severity-high { background-color: #f59e0b; color: white; }31 .severity-medium { background-color: #3b82f6; color: white; }32 .severity-low { background-color: #10b981; color: white; }33 </style>34</head>35<body class="min-h-screen" style="background-image: url('https://static.photos/military/1200x630/5'); background-size: cover; background-attachment: fixed;">36 <div class="min-h-screen bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-sm">37<!-- Mobile Menu Button -->38 <button class="md:hidden fixed top-4 left-4 z-50 bg-primary text-white p-2 rounded-full shadow-lg" id="menuToggle">39 <i data-feather="menu"></i>40 </button>41 42 <!-- Sidebar Navigation -->43 <div class="sidebar bg-white w-64 min-h-screen fixed shadow-lg md:relative md:translate-x-0">44 <div class="p-4 border-b border-gray-200 flex items-center">45 <div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">46 <img src="https://static.photos/military/200x200/1" alt="Military Shield" class="w-full h-full rounded-full object-cover">47 </div>48 </div>49<h1 class="ml-3 font-bold text-xl text-gray-800">HAZARDGUARD <span class="text-primary">PRO</span></h1>50</div>51 <nav class="mt-6">52 <div class="px-4">53 <div class="text-xs uppercase font-semibold text-gray-500 mb-2">Main Menu</div>54 <a href="index.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">55 <i data-feather="home" class="w-5 h-5 mr-3"></i>56 Dashboard57 </a>58 <a href="report-builder.html" class="flex items-center py-2 px-4 bg-primary/10 text-primary rounded-lg mb-1">59 <i data-feather="file-text" class="w-5 h-5 mr-3"></i>60 Report Builder (DD2977)61 </a>62 <a href="chemical-database.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">63 <i data-feather="alert-triangle" class="w-5 h-5 mr-3"></i>64 Chemicals Database65 </a>66 <a href="explosives-tool.html" class="flex items-center py-2 px-4 text-gray-600 hover:bg-gray-100 rounded-lg mb-1">67 <i data-feather="zap" class="w-5 h-5 mr-3"></i>68 Explosives (Yellowbook)69 </a>70 </div>71 </nav>72 </div>73 74 <!-- Main Content -->75 <div class="md:ml-64">76 <header class="bg-gray-800 text-white shadow-md">77 <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">78 <h2 class="text-lg font-semibold">DD2977 DELIBERATE RISK ASSESSMENT WORKSHEET</h2>79</div>80 </header>81 <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 font-sans">82<!-- Progress Steps -->83 <div class="flex justify-between mb-8 relative">84 <div class="flex-1 flex flex-col items-center">85 <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">1</div>86 <span class="text-sm font-medium">Basic Info</span>87 </div>88 <div class="flex-1 flex flex-col items-center">89 <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">2</div>90 <span class="text-sm font-medium">Hazards</span>91 </div>92 <div class="flex-1 flex flex-col items-center">93 <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">3</div>94 <span class="text-sm font-medium">Controls</span>95 </div>96 <div class="flex-1 flex flex-col items-center">97 <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">4</div>98 <span class="text-sm font-medium">Review</span>99 </div>100 <div class="flex-1 flex flex-col items-center">101 <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">5</div>102 <span class="text-sm font-medium">Generate</span>103 </div>104 <div class="absolute top-4 -z-10 h-1 bg-gray-200 w-full"></div>105 </div>106 <!-- Step 1: Basic Information -->107 <div class="step active" id="step1">108 <div class="bg-gray-800 text-white rounded-lg shadow-lg p-6 mb-6 border-l-4 border-primary">109<h3 class="text-lg font-medium text-gray-900 mb-4">Mission/Task Description</h3>110 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">111 <div>112 <label class="block text-sm font-medium text-gray-700 mb-1">Date Prepared</label>113 <input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">114 </div>115 <div>116 <label class="block text-sm font-medium text-gray-700 mb-1">Prepared By</label>117 <input type="text" placeholder="Name and rank/position" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">118 </div>119 <div class="md:col-span-2">120 <label class="block text-sm font-medium text-gray-700 mb-1">Unit/Organization</label>121 <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">122 </div>123 <div class="md:col-span-2">124 <label class="block text-sm font-medium text-gray-700 mb-1">Mission/Task Description</label>125 <textarea rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>126 </div>127 </div>128 </div>129 130 <div class="flex justify-end">131 <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg" onclick="nextStep(1, 2)">132 Next: Hazards <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>133 </button>134 </div>135 </div>136 137 <!-- Step 2: Hazards Selection -->138 <div class="step" id="step2">139 <div class="bg-white rounded-lg shadow p-6 mb-6">140 <h3 class="text-lg font-medium text-gray-900 mb-4">Select Hazards</h3>141 142 <div class="mb-6">143 <h4 class="font-medium text-gray-700 mb-2">Chemical Hazards</h4>144 <select multiple class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent h-[200px]">145 <option value="sulfuric_acid">Sulfuric Acid</option>146 <option value="acetone">Acetone</option>147 <option value="sodium_cyanide">Sodium Cyanide</option>148 <option value="hydrogen_peroxide">Hydrogen Peroxide (30%)</option>149 </select>150 </div>151 152 <div class="mb-6">153 <h4 class="font-medium text-gray-700 mb-2">Explosives</h4>154 <select multiple class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent h-[200px]">155 <option value="tnt">TNT (Trinitrotoluene)</option>156 <option value="rdx">RDX (Cyclonite)</option>157 <option value="c4">C4 (Composition C-4)</option>158 <option value="black_powder">Black Powder</option>159 </select>160 </div>161 162 <div class="mb-4">163 <h4 class="font-medium text-gray-700 mb-2">Other Hazards</h4>164 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">165 <label class="flex items-center">166 <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">167 <span class="ml-2">Electrical</span>168 </label>169 <label class="flex items-center">170 <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">171 <span class="ml-2">Mechanical</span>172 </label>173 <label class="flex items-center">174 <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">175 <span class="ml-2">Fire</span>176 </label>177 <label class="flex items-center">178 <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">179 <span class="ml-2">Noise</span>180 </label>181 <label class="flex items-center">182 <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">183 <span class="ml-2">Radiation</span>184 </label>185 <label class="flex items-center">186 <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary">187 <span class="ml-2">Environmental</span>188 </label>189 </div>190 </div>191 </div>192 193 <div class="flex justify-between">194 <button class="text-gray-600 hover:text-gray-900 px-6 py-2 rounded-lg border border-gray-300" onclick="prevStep(2, 1)">195 <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back196 </button>197 <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg" onclick="nextStep(2, 3)">198 Next: Controls <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>199 </button>200 </div>201 </div>202 203 <!-- Step 3: Risk Controls -->204 <div class="step" id="step3">205 <div class="bg-white rounded-lg shadow p-6 mb-6">206 <h3 class="text-lg font-medium text-gray-900 mb-6">Risk Control Measures</h3>207 208 <!-- Risk Matrix -->209 <div class="mb-8">210 <h4 class="font-medium text-gray-900 mb-3">Risk Assessment Matrix</h4>211 <table class="w-full risk-matrix">212 <thead>213 <tr>214 <th>Severity/Probability</th>215 <th>Frequent</th>216 <th>Likely</th>217 <th>Occasional</th>218 <th>Seldom</th>219 <th>Unlikely</th>220 </tr>221 </thead>222 <tbody>223 <tr>224 <th>Catastrophic</th>225 <td class="severity-critical">Extreme</td>226 <td class="severity-critical">Extreme</td>227 <td class="severity-critical">Extreme</td>228 <td class="severity-high">High</td>229 <td class="severity-high">High</td>230 </tr>231 <tr>232 <th>Critical</th>233 <td class="severity-critical">Extreme</td>234 <td class="severity-high">High</td>235 <td class="severity-high">High</td>236 <td class="severity-medium">Medium</td>237 <td class="severity-medium">Medium</td>238 </tr>239 <tr>240 <th>Marginal</th>241 <td class="severity-high">High</td>242 <td class="severity-medium">Medium</td>243 <td class="severity-medium">Medium</td>244 <td class="severity-low">Low</td>245 <td class="severity-low">Low</td>246 </tr>247 <tr>248 <th>Negligible</th>249 <td class="severity-medium">Medium</td>250 <td class="severity-medium">Medium</td>251 <td class="severity-low">Low</td>252 <td class="severity-low">Low</td>253 <td class="severity-low">Low</td>254 </tr>255 </tbody>256 </table>257 </div>258 259 <!-- Control Selection -->260 <div class="mb-6">261 <h4 class="font-medium text-gray-700 mb-3">Select Control Measures</h4>262 <div class="space-y-4">263 <div class="flex items-start">264 <input type="checkbox" id="ppe" class="mt-1 rounded border-gray-300 text-primary focus:ring-primary">265 <label for="ppe" class="ml-2">266 <span class="block font-medium">Personal Protective Equipment (PPE)</span>267 <span class="block text-sm text-gray-500">Require appropriate PPE for all personnel</span>268 </label>269 </div>270 <div class="flex items-start">271 <input type="checkbox" id="training" class="mt-1 rounded border-gray-300 text-primary focus:ring-primary" checked>272 <label for="training" class="ml-2">273 <span class="block font-medium">Specialized Training</span>274 <span class="block text-sm text-gray-500">Provide hazard-specific training</span>275 </label>276 </div>277 <div class="flex items-start">278 <input type="checkbox" id="engineering" class="mt-1 rounded border-gray-300 text-primary focus:ring-primary">279 <label for="engineering" class="ml-2">280 <span class="block font-medium">Engineering Controls</span>281 <span class="block text-sm text-gray-500">Ventilation, isolation, barriers</span>282 </label>283 </div>284 <div class="flex items-start">285 <input type="checkbox" id="supervision" class="mt-1 rounded border-gray-300 text-primary focus:ring-primary" checked>286 <label for="supervision" class="ml-2">287 <span class="block font-medium">Increased Supervision</span>288 <span class="block text-sm text-gray-500">Designated safety officers</span>289 </label>290 </div>291 <div class="flex items-start">292 <input type="checkbox" id="emergency" class="mt-1 rounded border-gray-300 text-primary focus:ring-primary">293 <label for="emergency" class="ml-2">294 <span class="block font-medium">Emergency Procedures</span>295 <span class="block text-sm text-gray-500">Spill containment, first aid</span>296 </label>297 </div>298 </div>299 </div>300 301 <!-- Residual Risk -->302 <div>303 <h4 class="font-medium text-gray-700 mb-2">Residual Risk Assessment</h4>304 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">305 <div>306 <label class="block text-sm font-medium text-gray-700 mb-1">Severity After Controls</label>307 <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">308 <option>Catastrophic</option>309 <option>Critical</option>310 <option>Marginal</option>311 <option>Negligible</option>312 </select>313 </div>314 <div>315 <label class="block text-sm font-medium text-gray-700 mb-1">Probability After Controls</label>316 <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">317 <option>Frequent</option>318 <option>Likely</option>319 <option>Occasional</option>320 <option>Seldom</option>321 <option>Unlikely</option>322 </select>323 </div>324 </div>325 </div>326 </div>327 328 <div class="flex justify-between">329 <button class="text-gray-600 hover:text-gray-900 px-6 py-2 rounded-lg border border-gray-300" onclick="prevStep(3, 2)">330 <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back331 </button>332 <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg" onclick="nextStep(3, 4)">333 Next: Review <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>334 </button>335 </div>336 </div>337 338 <!-- Step 4: Review -->339 <div class="step" id="step4">340 <div class="bg-white rounded-lg shadow p-6 mb-6">341 <h3 class="text-lg font-medium text-gray-900 mb-6">Review Your Assessment</h3>342 343 <!-- Summary -->344 <div class="mb-8">345 <h4 class="font-medium text-gray-900 border-b pb-2 mb-4">Mission/Task Summary</h4>346 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">347 <div>348 <p class="text-sm text-gray-500">Date Prepared</p>349 <p class="font-medium">June 15, 2023</p>350 </div>351 <div>352 <p class="text-sm text-gray-500">Prepared By</p>353 <p class="font-medium">SSG Smith, Safety Officer</p>354 </div>355 <div>356 <p class="text-sm text-gray-500">Unit/Organization</p>357 <p class="font-medium">45th Engineering Battalion</p>358 </div>359 <div>360 <p class="text-sm text-gray-500">Mission/Task</p>361 <p class="font-medium">Explosive demolition of concrete structures</p>362 </div>363 </div>364 </div>365 366 <!-- Hazards Summary -->367 <div class="mb-8">368 <h4 class="font-medium text-gray-900 border-b pb-2 mb-4">Identified Hazards</h4>369 <div class="space-y-4">370 <div>371 <p class="font-medium">Chemical Hazards</p>372 <ul class="list-disc pl-5 text-sm text-gray-600 mt-1">373 <li>RDX (Cyclonite) - UN: 0081 - 1.1D</li>374 <li>TNT (Trinitrotoluene) - UN: 0209 - 1.1D</li>375 </ul>376 </div>377 <div>378 <p class="font-medium">Other Hazards</p>379 <ul class="list-disc pl-5 text-sm text-gray-600 mt-1">380 <li>Flying debris</li>381 <li>Noise exposure</li>382 </ul>383 </div>384 </div>385 </div>386 387 <!-- Controls Summary -->388 <div class="mb-4">389 <h4 class="font-medium text-gray-900 border-b pb-2 mb-4">Risk Control Measures</h4>390 <ul class="list-disc pl-5 text-sm text-gray-600 space-y-2">391 <li>Specialized training for all explosive handlers</li>392 <li>Increased supervision during operations</li>393 <li>Standard PPE including hard hats, eye protection, hearing protection</li>394 <li>Establishment of blast exclusion zones</li>395 <li>Pre-operation safety briefing</li>396 </ul>397 </div>398 399 <!-- Final Risk Assessment -->400 <div class="mt-8 bg-gray-50 p-4 rounded-lg">401 <h4 class="font-medium text-gray-900 mb-3">Final Risk Assessment</h4>402 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">403 <div>404 <p class="text-sm text-gray-500">Initial Risk Level</p>405 <p class="font-medium text-danger">High (Critical/Likely)</p>406 </div>407 <div>408 <p class="text-sm text-gray-500">Residual Risk Level</p>409 <p class="font-medium text-warning">Medium (Marginal/Occasional)</p>410 </div>411 </div>412 </div>413 </div>414 415 <div class="flex justify-between">416 <button class="text-gray-600 hover:text-gray-900 px-6 py-2 rounded-lg border border-gray-300" onclick="prevStep(4, 3)">417 <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back418 </button>419 <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg" onclick="nextStep(4, 5)">420 Generate Report <i data-feather="file-text" class="w-4 h-4 ml-2"></i>421 </button>422 </div>423 </div>424 425 <!-- Step 5: Generate Report -->426 <div class="step" id="step5">427 <div class="bg-white rounded-lg shadow p-6 mb-6 text-center">428 <div class="max-w-md mx-auto">429 <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">430 <i data-feather="check" class="w-8 h-8 text-green-600"></i>431 </div>432 <h3 class="text-lg font-medium text-gray-900 mb-2">DD2977 Report Ready!</h3>433 <p class="text-gray-600 mb-6">Your Deliberate Risk Assessment Worksheet has been prepared.</p>434 435 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">436 <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center justify-center" onclick="generatePDF()">437 <i data-feather="download" class="w-4 h-4 mr-2"></i>438 Download PDF439 </button>440 <button class="border border-primary text-primary hover:bg-primary/5 px-4 py-2 rounded-lg flex items-center justify-center">441 <i data-feather="printer" class="w-4 h-4 mr-2"></i>442 Print443 </button>444 </div>445 </div>446 </div>447 448 <div class="flex justify-center">449 <button class="text-gray-600 hover:text-gray-900 px-6 py-2 rounded-lg border border-gray-300" onclick="restartProcess()">450 <i data-feather="plus" class="w-4 h-4 mr-2"></i>451 Start New Assessment452 </button>453 </div>454 </div>455 </main>456 </div>457 458 <script>459 // Mobile menu toggle460 document.getElementById('menuToggle').addEventListener('click', function() {461 document.querySelector('.sidebar').classList.toggle('active');462 });463 464 // Step navigation465 function nextStep(current, next) {466 document.getElementById('step'+current).classList.remove('active');467 document.getElementById('step'+next).classList.add('active');468 469 // Update progress indicator470 document.querySelectorAll('.flex-1 div').forEach((el, index) => {471 if (index < next-1) {472 el.classList.remove('bg-gray-200', 'text-gray-600');473 el.classList.add('bg-primary', 'text-white');474 } else if (index === next-1) {475 el.classList.remove('bg-gray-200', 'text-gray-600');476 el.classList.add('bg-primary', 'text-white');477 } else {478 el.classList.remove('bg-primary', 'text-white');479 el.classList.add('bg-gray-200', 'text-gray-600');480 }481 });482 }483 484 function prevStep(current, prev) {485 document.getElementById('step'+current).classList.remove('active');486 document.getElementById('step'+prev).classList.add('active');487 488 // Update progress indicator489 document.querySelectorAll('.flex-1 div').forEach((el, index) => {490 if (index < prev-1) {491 el.classList.remove('bg-gray-200', 'text-gray-600');492 el.classList.add('bg-primary', 'text-white');493 } else if (index === prev-1) {494 el.classList.remove('bg-gray-200', 'text-gray-600');495 el.classList.add('bg-primary', 'text-white');496 } else {497 el.classList.remove('bg-primary', 'text-white');498 el.classList.add('bg-gray-200', 'text-gray-600');499 }500 });501 }502 503 function restartProcess() {504 document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));505 document.getElementById('step1').classList.add('active');506 507 // Reset progress indicator508 document.querySelectorAll('.flex-1 div').forEach((el, index) => {509 if (index === 0) {510 el.classList.remove('bg-gray-200', 'text-gray-600');511 el.classList.add('bg-primary', 'text-white');512 } else {513 el.classList.remove('bg-primary', 'text-white');514 el.classList.add('bg-gray-200', 'text-gray-600');515 }516 });517 }518 519 // PDF Generation520 function generatePDF() {521 const { jsPDF } = window.jspdf;522 const doc = new jsPDF();523 524 // Add DD2977 Form content525 doc.setFontSize(12);526 doc.text('DEPARTMENT OF THE ARMY', 105, 20, { align: 'center' });527 doc.setFontSize(14);528 doc.text('DELIBERATE RISK ASSESSMENT WORKSHEET', 105, 30, { align: 'center' });529 530 // Add form fields and content531 doc.setFontSize(10);532 doc.text('1. Mission/Task Description:', 20, 50);533 doc.text('Explosive demolition of concrete structures', 20, 60);534 535 doc.text('2. Hazards Identified:', 20, 80);536 doc.text('- RDX (Cyclonite) - UN: 0081 - 1.1D', 25, 90);537 doc.text('- TNT (Trinitrotoluene) - UN: 0209 - 1.1D', 25, 100);538 539 doc.text('3. Initial Risk Level: High (Critical/Likely)', 20, 120);540 doc.text('4. Controls Implemented:', 20, 130);541 doc.text('- Specialized training', 25, 140);542 doc.text('- Increased supervision', 25, 150);543 544 doc.text('5. Residual Risk Level: Medium (Marginal/Occasional)', 20, 170);545 doc.text('6. Approval:', 20, 190);546 doc.text('__________________________________', 25, 200);547 doc.text('Commander/Designated Representative', 25, 210);548 549 // Save the PDF550 doc.save('DD2977_Risk_Assessment.pdf');551 }552 553 // Initialize feather icons554 document.addEventListener('DOMContentLoaded', function() {555 feather.replace();556 });557 </script>558</body>559</html>