|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Safety Checklist | Safety Sentinel</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div id="vanta-bg" class="fixed inset-0 -z-10"></div> |
|
|
|
|
|
|
|
|
<nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="shield" class="h-8 w-8 text-blue-600"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<a href="index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Back to Dashboard</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto"> |
|
|
<div class="bg-white p-8 rounded-lg shadow"> |
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-6">Safety Inspection Checklist</h1> |
|
|
|
|
|
<form> |
|
|
<div class="mb-8"> |
|
|
<label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> |
|
|
<input type="text" id="location" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Building 4, North Processing Unit"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<label for="inspector" class="block text-sm font-medium text-gray-700 mb-1">Inspector</label> |
|
|
<input type="text" id="inspector" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Your name"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date</label> |
|
|
<input type="date" id="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
|
</div> |
|
|
|
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="py-4"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">PPE Compliance</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">All personnel wearing required PPE</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-1-yes" name="ppe-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="ppe-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-1-no" name="ppe-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="ppe-1-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-1-na" name="ppe-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="ppe-1-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">PPE in good condition</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-2-yes" name="ppe-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="ppe-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-2-no" name="ppe-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="ppe-2-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-2-na" name="ppe-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="ppe-2-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">Proper storage of PPE</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-3-yes" name="ppe-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="ppe-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-3-no" name="ppe-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="ppe-3-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="ppe-3-na" name="ppe-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="ppe-3-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="py-4"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">Equipment Safety</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">Equipment properly guarded</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-1-yes" name="equip-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="equip-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-1-no" name="equip-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="equip-1-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-1-na" name="equip-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="equip-1-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">LOTO procedures followed</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-2-yes" name="equip-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="equip-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-2-no" name="equip-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="equip-2-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-2-na" name="equip-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="equip-2-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">Equipment in good working condition</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-3-yes" name="equip-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="equip-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-3-no" name="equip-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="equip-3-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="equip-3-na" name="equip-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="equip-3-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="py-4"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">Hazardous Materials</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">Proper labeling of containers</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-1-yes" name="hazmat-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="hazmat-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-1-no" name="hazmat-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="hazmat-1-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-1-na" name="hazmat-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="hazmat-1-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">MSDS/SDS available</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-2-yes" name="hazmat-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="hazmat-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-2-no" name="hazmat-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="hazmat-2-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-2-na" name="hazmat-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="hazmat-2-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">Proper storage of hazardous materials</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-3-yes" name="hazmat-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="hazmat-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-3-no" name="hazmat-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="hazmat-3-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="hazmat-3-na" name="hazmat-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="hazmat-3-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="py-4"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">Emergency Preparedness</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">Emergency exits unobstructed</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-1-yes" name="emerg-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="emerg-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-1-no" name="emerg-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="emerg-1-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-1-na" name="emerg-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="emerg-1-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">Fire extinguishers charged and accessible</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-2-yes" name="emerg-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="emerg-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-2-no" name="emerg-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="emerg-2-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-2-na" name="emerg-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="emerg-2-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="block text-sm font-medium text-gray-700">First aid kits fully stocked</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-3-yes" name="emerg-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"> |
|
|
<label for="emerg-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-3-no" name="emerg-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300"> |
|
|
<label for="emerg-3-no" class="ml-2 block text-sm text-gray-700">No</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="emerg-3-na" name="emerg-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300"> |
|
|
<label for="emerg-3-na" class="ml-2 block text-sm text-gray-700">N/A</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="py-4"> |
|
|
<label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label> |
|
|
<textarea id="notes" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Any additional observations or comments"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="py-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Attach Photos (if applicable)</label> |
|
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> |
|
|
<div class="space-y-1 text-center"> |
|
|
<div class="flex text-sm text-gray-600"> |
|
|
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> |
|
|
<span>Upload files</span> |
|
|
<input id="file-upload" name="file-upload" type="file" class="sr-only" multiple> |
|
|
</label> |
|
|
<p class="pl-1">or drag and drop</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">PNG, JPG up to 10MB</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3 pt-6"> |
|
|
<button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
Cancel |
|
|
</button> |
|
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
Submit Inspection |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
color: 0x172b4d, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.75, |
|
|
zoom: 0.8 |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
