Hugging Face's logo

Spaces:
balaji-detect
/
safetyguardian-sentinel
Running

App Files Community
balaji-detect commited on
Commit
b49c754
·
verified ·
1 Parent(s): bc37a9a

Schedule Training button in Training tab and Add Incident button in Incidents tab is not functional. Add flow to it

Browse files
Files changed (4) hide show
  1. index.html +2 -2
  2. new-incident.html +126 -0
  3. new-training.html +128 -0
  4. training.html +1 -1
index.html CHANGED
@@ -48,8 +48,8 @@
48
  <a href="training.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
49
  </div>
50
  <div class="flex items-center">
51
- <a href="new-report.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
52
- <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Report
53
  </a>
54
  <div class="ml-4 relative flex-shrink-0">
55
  <div>
 
48
  <a href="training.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
49
  </div>
50
  <div class="flex items-center">
51
+ <a href="incidents.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
52
+ <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Incident
53
  </a>
54
  <div class="ml-4 relative flex-shrink-0">
55
  <div>
new-incident.html ADDED
@@ -0,0 +1,126 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>New Incident | Safety Sentinel</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://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-50">
12
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
13
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
14
+ <div class="flex justify-between h-16">
15
+ <div class="flex items-center">
16
+ <div class="flex-shrink-0 flex items-center">
17
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
18
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
19
+ </div>
20
+ </div>
21
+ <div class="flex items-center">
22
+ <a href="incidents.html" class="bg-white text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-50 mr-4">
23
+ Cancel
24
+ </a>
25
+ <button type="submit" form="incidentForm" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700">
26
+ Report Incident
27
+ </button>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </nav>
32
+
33
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
34
+ <div class="mb-8">
35
+ <h1 class="text-2xl font-bold text-gray-900">Report New Incident</h1>
36
+ <p class="mt-2 text-sm text-gray-600">Fill out the form below to report a new safety incident</p>
37
+ </div>
38
+
39
+ <form id="incidentForm" class="bg-white shadow rounded-lg p-6">
40
+ <div class="grid grid-cols-1 gap-6">
41
+ <div>
42
+ <label for="incidentType" class="block text-sm font-medium text-gray-700 mb-1">Incident Type</label>
43
+ <select id="incidentType" name="incidentType" 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>
44
+ <option value="">Select incident type</option>
45
+ <option>Near Miss</option>
46
+ <option>First Aid Case</option>
47
+ <option>Medical Treatment</option>
48
+ <option>Lost Time Injury</option>
49
+ <option>Fatality</option>
50
+ <option>Property Damage</option>
51
+ <option>Environmental</option>
52
+ </select>
53
+ </div>
54
+
55
+ <div>
56
+ <label for="severity" class="block text-sm font-medium text-gray-700 mb-1">Severity Level</label>
57
+ <select id="severity" name="severity" 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>
58
+ <option value="">Select severity level</option>
59
+ <option>Low</option>
60
+ <option>Medium</option>
61
+ <option>High</option>
62
+ <option>Critical</option>
63
+ </select>
64
+ </div>
65
+
66
+ <div>
67
+ <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date of Incident</label>
68
+ <input type="date" id="date" name="date" 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>
69
+ </div>
70
+
71
+ <div>
72
+ <label for="time" class="block text-sm font-medium text-gray-700 mb-1">Time of Incident</label>
73
+ <input type="time" id="time" name="time" 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>
74
+ </div>
75
+
76
+ <div>
77
+ <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
78
+ <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="North Processing Unit" required>
79
+ </div>
80
+
81
+ <div>
82
+ <label for="department" class="block text-sm font-medium text-gray-700 mb-1">Department</label>
83
+ <select id="department" name="department" 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>
84
+ <option value="">Select department</option>
85
+ <option>Processing</option>
86
+ <option>Maintenance</option>
87
+ <option>Logistics</option>
88
+ <option>Storage</option>
89
+ <option>Administration</option>
90
+ </select>
91
+ </div>
92
+
93
+ <div>
94
+ <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
95
+ <textarea id="description" name="description" rows="4" 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="Describe what happened..." required></textarea>
96
+ </div>
97
+
98
+ <div>
99
+ <label for="actionsTaken" class="block text-sm font-medium text-gray-700 mb-1">Immediate Actions Taken</label>
100
+ <textarea id="actionsTaken" name="actionsTaken" 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="What actions were taken immediately after the incident?" required></textarea>
101
+ </div>
102
+
103
+ <div>
104
+ <label for="reporter" class="block text-sm font-medium text-gray-700 mb-1">Reported By</label>
105
+ <input type="text" id="reporter" name="reporter" 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="Your name" required>
106
+ </div>
107
+ </div>
108
+ </form>
109
+ </div>
110
+
111
+ <script>
112
+ feather.replace();
113
+
114
+ document.getElementById('incidentForm').addEventListener('submit', function(e) {
115
+ e.preventDefault();
116
+ // Form submission logic would go here
117
+ alert('Incident reported successfully!');
118
+ window.location.href = 'incidents.html';
119
+ });
120
+
121
+ // Set default date to today
122
+ const today = new Date().toISOString().split('T')[0];
123
+ document.getElementById('date').value = today;
124
+ </script>
125
+ </body>
126
+ </html>
new-training.html ADDED
@@ -0,0 +1,128 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Schedule Training | Safety Sentinel</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://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-50">
12
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
13
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
14
+ <div class="flex justify-between h-16">
15
+ <div class="flex items-center">
16
+ <div class="flex-shrink-0 flex items-center">
17
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
18
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
19
+ </div>
20
+ </div>
21
+ <div class="flex items-center">
22
+ <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">
23
+ Cancel
24
+ </a>
25
+ <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">
26
+ Save Training
27
+ </button>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </nav>
32
+
33
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
34
+ <div class="mb-8">
35
+ <h1 class="text-2xl font-bold text-gray-900">Schedule New Training</h1>
36
+ <p class="mt-2 text-sm text-gray-600">Fill out the form below to schedule a new safety training session</p>
37
+ </div>
38
+
39
+ <form id="trainingForm" class="bg-white shadow rounded-lg p-6">
40
+ <div class="grid grid-cols-1 gap-6">
41
+ <div>
42
+ <label for="trainingType" class="block text-sm font-medium text-gray-700 mb-1">Training Type</label>
43
+ <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>
44
+ <option value="">Select a training type</option>
45
+ <option>General Safety Orientation</option>
46
+ <option>Hazardous Materials Handling</option>
47
+ <option>LOTO (Lockout/Tagout)</option>
48
+ <option>Emergency Response</option>
49
+ <option>First Aid & CPR</option>
50
+ <option>Forklift Certification</option>
51
+ <option>Fire Safety</option>
52
+ </select>
53
+ </div>
54
+
55
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
56
+ <div>
57
+ <label for="startDate" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
58
+ <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>
59
+ </div>
60
+ <div>
61
+ <label for="endDate" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
62
+ <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>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
67
+ <div>
68
+ <label for="startTime" class="block text-sm font-medium text-gray-700 mb-1">Start Time</label>
69
+ <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>
70
+ </div>
71
+ <div>
72
+ <label for="endTime" class="block text-sm font-medium text-gray-700 mb-1">End Time</label>
73
+ <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>
74
+ </div>
75
+ </div>
76
+
77
+ <div>
78
+ <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
79
+ <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>
80
+ </div>
81
+
82
+ <div>
83
+ <label for="trainer" class="block text-sm font-medium text-gray-700 mb-1">Trainer</label>
84
+ <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>
85
+ </div>
86
+
87
+ <div>
88
+ <label for="maxAttendees" class="block text-sm font-medium text-gray-700 mb-1">Maximum Attendees</label>
89
+ <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>
90
+ </div>
91
+
92
+ <div>
93
+ <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
94
+ <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>
95
+ </div>
96
+
97
+ <div>
98
+ <label for="departments" class="block text-sm font-medium text-gray-700 mb-1">Departments</label>
99
+ <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">
100
+ <option>Processing</option>
101
+ <option>Maintenance</option>
102
+ <option>Logistics</option>
103
+ <option>Storage</option>
104
+ <option>Administration</option>
105
+ </select>
106
+ <p class="mt-2 text-sm text-gray-500">Hold Ctrl/Cmd to select multiple departments</p>
107
+ </div>
108
+ </div>
109
+ </form>
110
+ </div>
111
+
112
+ <script>
113
+ feather.replace();
114
+
115
+ document.getElementById('trainingForm').addEventListener('submit', function(e) {
116
+ e.preventDefault();
117
+ // Form submission logic would go here
118
+ alert('Training scheduled successfully!');
119
+ window.location.href = 'training.html';
120
+ });
121
+
122
+ // Set default date values to today
123
+ const today = new Date().toISOString().split('T')[0];
124
+ document.getElementById('startDate').value = today;
125
+ document.getElementById('endDate').value = today;
126
+ </script>
127
+ </body>
128
+ </html>
training.html CHANGED
@@ -56,7 +56,7 @@
56
  <a href="new-training.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
57
  <i data-feather="plus" class="h-4 w-4 mr-2"></i> Schedule Training
58
  </a>
59
- </div>
60
  </div>
61
 
62
  <!-- Training Stats -->
 
56
  <a href="new-training.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
57
  <i data-feather="plus" class="h-4 w-4 mr-2"></i> Schedule Training
58
  </a>
59
+ </div>
60
  </div>
61
 
62
  <!-- Training Stats -->