Help me with user flow for all actionable buttons such as New Report, New Incident etc...
830b132
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>New Safety Report | 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> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Main Form --> | |
| <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">New Safety Report</h1> | |
| <form> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div> | |
| <label for="report-type" class="block text-sm font-medium text-gray-700 mb-1">Report Type</label> | |
| <select id="report-type" 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"> | |
| <option>Incident Report</option> | |
| <option>Near Miss</option> | |
| <option>Hazard Identification</option> | |
| <option>Safety Suggestion</option> | |
| </select> | |
| </div> | |
| <div> | |
| <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> | |
| <label for="date-time" class="block text-sm font-medium text-gray-700 mb-1">Date & Time</label> | |
| <input type="datetime-local" id="date-time" 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> | |
| <label for="severity" class="block text-sm font-medium text-gray-700 mb-1">Severity Level</label> | |
| <select id="severity" 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"> | |
| <option>Low</option> | |
| <option>Medium</option> | |
| <option>High</option> | |
| <option>Critical</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="description" 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="Provide detailed information about the incident or observation"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Attachments</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, PDF up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="immediate-action" name="immediate-action" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="immediate-action" class="ml-2 block text-sm text-gray-700">Immediate action was taken</label> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <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 Report | |
| </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> |