Schedule Training button in Training tab and Add Incident button in Incidents tab is not functional. Add flow to it
b49c754
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Schedule Training | 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> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <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="training.html" class="bg-white text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-50 mr-4"> | |
| Cancel | |
| </a> | |
| <button type="submit" form="trainingForm" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700"> | |
| Save Training | |
| </button> | |
| </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="mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-900">Schedule New Training</h1> | |
| <p class="mt-2 text-sm text-gray-600">Fill out the form below to schedule a new safety training session</p> | |
| </div> | |
| <form id="trainingForm" class="bg-white shadow rounded-lg p-6"> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div> | |
| <label for="trainingType" class="block text-sm font-medium text-gray-700 mb-1">Training Type</label> | |
| <select id="trainingType" name="trainingType" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| <option value="">Select a training type</option> | |
| <option>General Safety Orientation</option> | |
| <option>Hazardous Materials Handling</option> | |
| <option>LOTO (Lockout/Tagout)</option> | |
| <option>Emergency Response</option> | |
| <option>First Aid & CPR</option> | |
| <option>Forklift Certification</option> | |
| <option>Fire Safety</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="startDate" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label> | |
| <input type="date" id="startDate" name="startDate" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| </div> | |
| <div> | |
| <label for="endDate" class="block text-sm font-medium text-gray-700 mb-1">End Date</label> | |
| <input type="date" id="endDate" name="endDate" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="startTime" class="block text-sm font-medium text-gray-700 mb-1">Start Time</label> | |
| <input type="time" id="startTime" name="startTime" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| </div> | |
| <div> | |
| <label for="endTime" class="block text-sm font-medium text-gray-700 mb-1">End Time</label> | |
| <input type="time" id="endTime" name="endTime" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> | |
| <input type="text" id="location" name="location" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="Training Room A" required> | |
| </div> | |
| <div> | |
| <label for="trainer" class="block text-sm font-medium text-gray-700 mb-1">Trainer</label> | |
| <input type="text" id="trainer" name="trainer" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="John Smith" required> | |
| </div> | |
| <div> | |
| <label for="maxAttendees" class="block text-sm font-medium text-gray-700 mb-1">Maximum Attendees</label> | |
| <input type="number" id="maxAttendees" name="maxAttendees" min="1" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="20" required> | |
| </div> | |
| <div> | |
| <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="description" name="description" rows="3" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="Provide details about the training session"></textarea> | |
| </div> | |
| <div> | |
| <label for="departments" class="block text-sm font-medium text-gray-700 mb-1">Departments</label> | |
| <select multiple id="departments" name="departments" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Processing</option> | |
| <option>Maintenance</option> | |
| <option>Logistics</option> | |
| <option>Storage</option> | |
| <option>Administration</option> | |
| </select> | |
| <p class="mt-2 text-sm text-gray-500">Hold Ctrl/Cmd to select multiple departments</p> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| document.getElementById('trainingForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Form submission logic would go here | |
| alert('Training scheduled successfully!'); | |
| window.location.href = 'training.html'; | |
| }); | |
| // Set default date values to today | |
| const today = new Date().toISOString().split('T')[0]; | |
| document.getElementById('startDate').value = today; | |
| document.getElementById('endDate').value = today; | |
| </script> | |
| </body> | |
| </html> |