Hugging Face's logo

Spaces:
MoShow
/
deepsite-project-2u02q
Running

App Files Community
MoShow commited on
Commit
4fc5d1c
·
verified ·
1 Parent(s): 7881888

Initial DeepSite commit

Browse files
Files changed (8) hide show
  1. README.md +9 -6
  2. emergency.html +269 -0
  3. equipment.html +185 -0
  4. incidents.html +236 -0
  5. index.html +390 -19
  6. live-map.html +386 -0
  7. reports.html +226 -0
  8. training.html +77 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project 2u02q
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
- pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: DeepSite Project
3
+ colorFrom: pink
4
+ colorTo: purple
 
5
  sdk: static
6
+ emoji: 🛠️
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
emergency.html ADDED
@@ -0,0 +1,269 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Emergency - Staff Safety Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .safety-gradient {
13
+ background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
14
+ }
15
+ .urgent-pulse {
16
+ animation: pulse-red 2s infinite;
17
+ }
18
+ @keyframes pulse-red {
19
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
20
+ 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="bg-gray-50 text-gray-800">
25
+
26
+ <!-- Sidebar -->
27
+ <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white shadow-xl transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-40">
28
+ <div class="p-6 border-b border-gray-100">
29
+ <div class="flex items-center space-x-3">
30
+ <div class="w-10 h-10 safety-gradient rounded-lg flex items-center justify-center">
31
+ <i data-lucide="shield-check" class="text-white w-6 h-6"></i>
32
+ </div>
33
+ <div>
34
+ <h1 class="font-bold text-lg text-gray-900">SafeTeam</h1>
35
+ <p class="text-xs text-gray-500">Safety Management</p>
36
+ </div>
37
+ </div>
38
+ </div>
39
+
40
+ <nav class="p-4 space-y-2">
41
+ <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
42
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
43
+ <span>Dashboard</span>
44
+ </a>
45
+ <a href="incidents.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
46
+ <i data-lucide="alert-triangle" class="w-5 h-5"></i>
47
+ <span>Incidents</span>
48
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
49
+ </a>
50
+ <a href="training.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
51
+ <i data-lucide="graduation-cap" class="w-5 h-5"></i>
52
+ <span>Training</span>
53
+ </a>
54
+ <a href="live-map.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
55
+ <i data-lucide="map" class="w-5 h-5"></i>
56
+ <span>Live Map</span>
57
+ </a>
58
+ <a href="equipment.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
59
+ <i data-lucide="hard-hat" class="w-5 h-5"></i>
60
+ <span>Equipment</span>
61
+ </a>
62
+ <a href="reports.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
63
+ <i data-lucide="file-text" class="w-5 h-5"></i>
64
+ <span>Reports</span>
65
+ </a>
66
+ <a href="emergency.html" class="flex items-center space-x-3 px-4 py-3 bg-red-50 text-red-700 rounded-xl font-medium">
67
+ <i data-lucide="phone-call" class="w-5 h-5"></i>
68
+ <span>Emergency</span>
69
+ </a>
70
+ </nav>
71
+
72
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100">
73
+ <div class="flex items-center space-x-3 px-4 py-3">
74
+ <img src="http://static.photos/people/100x100/42" alt="User" class="w-10 h-10 rounded-full object-cover">
75
+ <div>
76
+ <p class="text-sm font-medium text-gray-900">Safety Manager</p>
77
+ <p class="text-xs text-gray-500">Admin</p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </aside>
82
+
83
+ <!-- Main Content -->
84
+ <main class="md:ml-64 min-h-screen">
85
+ <header class="bg-white shadow-sm sticky top-0 z-30">
86
+ <div class="flex items-center justify-between px-6 py-4">
87
+ <div class="flex items-center space-x-4">
88
+ <button id="menu-toggle" class="md:hidden p-2 hover:bg-gray-100 rounded-lg">
89
+ <i data-lucide="menu" class="w-6 h-6"></i>
90
+ </button>
91
+ <div>
92
+ <h2 class="text-2xl font-bold text-gray-900">Emergency Contacts</h2>
93
+ <p class="text-sm text-gray-500">Quick access to emergency resources</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </header>
98
+
99
+ <div class="p-6 space-y-6">
100
+ <!-- Emergency Buttons -->
101
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
102
+ <button onclick="triggerEmergency('fire')" class="urgent-pulse bg-red-600 hover:bg-red-700 text-white p-6 rounded-2xl flex items-center justify-between transition-colors">
103
+ <div class="flex items-center space-x-4">
104
+ <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
105
+ <i data-lucide="flame" class="w-6 h-6"></i>
106
+ </div>
107
+ <div class="text-left">
108
+ <h3 class="font-bold text-lg">Fire Emergency</h3>
109
+ <p class="text-red-100 text-sm">Alert fire department</p>
110
+ </div>
111
+ </div>
112
+ <i data-lucide="arrow-right" class="w-6 h-6"></i>
113
+ </button>
114
+
115
+ <button onclick="triggerEmergency('medical')" class="urgent-pulse bg-blue-600 hover:bg-blue-700 text-white p-6 rounded-2xl flex items-center justify-between transition-colors">
116
+ <div class="flex items-center space-x-4">
117
+ <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
118
+ <i data-lucide="heart-pulse" class="w-6 h-6"></i>
119
+ </div>
120
+ <div class="text-left">
121
+ <h3 class="font-bold text-lg">Medical Emergency</h3>
122
+ <p class="text-blue-100 text-sm">Alert medical team</p>
123
+ </div>
124
+ </div>
125
+ <i data-lucide="arrow-right" class="w-6 h-6"></i>
126
+ </button>
127
+ </div>
128
+
129
+ <!-- Emergency Contacts List -->
130
+ <div class="bg-white rounded-2xl shadow-sm border border-gray-100">
131
+ <div class="p-6 border-b border-gray-100">
132
+ <h3 class="text-lg font-bold text-gray-900">Contact Directory</h3>
133
+ </div>
134
+ <div class="divide-y divide-gray-200">
135
+ <div class="p-4 flex items-center justify-between hover:bg-gray-50">
136
+ <div class="flex items-center space-x-4">
137
+ <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
138
+ <i data-lucide="flame" class="w-5 h-5 text-red-600"></i>
139
+ </div>
140
+ <div>
141
+ <p class="font-medium text-gray-900">Fire Department</p>
142
+ <p class="text-sm text-gray-500">Station 24 - Downtown</p>
143
+ </div>
144
+ </div>
145
+ <a href="tel:911" class="text-blue-600 hover:text-blue-700 font-medium flex items-center space-x-2">
146
+ <i data-lucide="phone" class="w-4 h-4"></i>
147
+ <span>911</span>
148
+ </a>
149
+ </div>
150
+ <div class="p-4 flex items-center justify-between hover:bg-gray-50">
151
+ <div class="flex items-center space-x-4">
152
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
153
+ <i data-lucide="heart-pulse" class="w-5 h-5 text-blue-600"></i>
154
+ </div>
155
+ <div>
156
+ <p class="font-medium text-gray-900">Medical Emergency</p>
157
+ <p class="text-sm text-gray-500">City General Hospital</p>
158
+ </div>
159
+ </div>
160
+ <a href="tel:911" class="text-blue-600 hover:text-blue-700 font-medium flex items-center space-x-2">
161
+ <i data-lucide="phone" class="w-4 h-4"></i>
162
+ <span>911</span>
163
+ </a>
164
+ </div>
165
+ <div class="p-4 flex items-center justify-between hover:bg-gray-50">
166
+ <div class="flex items-center space-x-4">
167
+ <div class="w-10 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
168
+ <i data-lucide="shield" class="w-5 h-5 text-purple-600"></i>
169
+ </div>
170
+ <div>
171
+ <p class="font-medium text-gray-900">Security Team</p>
172
+ <p class="text-sm text-gray-500">Internal security office</p>
173
+ </div>
174
+ </div>
175
+ <a href="tel:5550123" class="text-blue-600 hover:text-blue-700 font-medium flex items-center space-x-2">
176
+ <i data-lucide="phone" class="w-4 h-4"></i>
177
+ <span>555-0123</span>
178
+ </a>
179
+ </div>
180
+ <div class="p-4 flex items-center justify-between hover:bg-gray-50">
181
+ <div class="flex items-center space-x-4">
182
+ <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
183
+ <i data-lucide="alert-triangle" class="w-5 h-5 text-green-600"></i>
184
+ </div>
185
+ <div>
186
+ <p class="font-medium text-gray-900">Poison Control</p>
187
+ <p class="text-sm text-gray-500">National hotline</p>
188
+ </div>
189
+ </div>
190
+ <a href="tel:18002221222" class="text-blue-600 hover:text-blue-700 font-medium flex items-center space-x-2">
191
+ <i data-lucide="phone" class="w-4 h-4"></i>
192
+ <span>1-800-222-1222</span>
193
+ </a>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Emergency Procedures -->
199
+ <div class="bg-white rounded-2xl shadow-sm border border-gray-100">
200
+ <div class="p-6 border-b border-gray-100">
201
+ <h3 class="text-lg font-bold text-gray-900">Emergency Procedures</h3>
202
+ </div>
203
+ <div class="p-6 space-y-4">
204
+ <div class="border border-gray-200 rounded-xl p-4">
205
+ <h4 class="font-semibold text-gray-900 flex items-center mb-2">
206
+ <i data-lucide="fire-extinguisher" class="w-5 h-5 text-red-600 mr-2"></i>
207
+ Fire Evacuation
208
+ </h4>
209
+ <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
210
+ <li>Activate nearest fire alarm</li>
211
+ <li>Evacuate via nearest stairwell</li>
212
+ <li>Report to assembly point</li>
213
+ <li>Do not use elevators</li>
214
+ </ol>
215
+ </div>
216
+ <div class="border border-gray-200 rounded-xl p-4">
217
+ <h4 class="font-semibold text-gray-900 flex items-center mb-2">
218
+ <i data-lucide="heart-pulse" class="w-5 h-5 text-blue-600 mr-2"></i>
219
+ Medical Emergency
220
+ </h4>
221
+ <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
222
+ <li>Call 911 immediately</li>
223
+ <li>Notify first aid responders</li>
224
+ <li>Clear area for medical access</li>
225
+ <li>Provide incident details</li>
226
+ </ol>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </main>
232
+
233
+ <!-- Toast -->
234
+ <div id="toast" class="fixed bottom-4 right-4 bg-gray-900 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center space-x-2">
235
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-400"></i>
236
+ <span id="toast-message">Notification message</span>
237
+ </div>
238
+
239
+ <script>
240
+ lucide.createIcons();
241
+
242
+ const sidebar = document.getElementById('sidebar');
243
+ const menuToggle = document.getElementById('menu-toggle');
244
+
245
+ menuToggle.addEventListener('click', () => {
246
+ sidebar.classList.toggle('-translate-x-full');
247
+ });
248
+
249
+ function triggerEmergency(type) {
250
+ const messages = {
251
+ fire: 'Fire emergency protocol activated!',
252
+ medical: 'Medical emergency team dispatched!'
253
+ };
254
+ showToast(messages[type]);
255
+ }
256
+
257
+ function showToast(message) {
258
+ const toast = document.getElementById('toast');
259
+ const toastMessage = document.getElementById('toast-message');
260
+ toastMessage.textContent = message;
261
+ toast.classList.remove('translate-y-20', 'opacity-0');
262
+
263
+ setTimeout(() => {
264
+ toast.classList.add('translate-y-20', 'opacity-0');
265
+ }, 3000);
266
+ }
267
+ </script>
268
+ </body>
269
+ </html>
equipment.html ADDED
@@ -0,0 +1,185 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Equipment - Staff Safety Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .safety-gradient {
13
+ background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
14
+ }
15
+ </style>
16
+ </head>
17
+ <body class="bg-gray-50 text-gray-800">
18
+
19
+ <!-- Sidebar -->
20
+ <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white shadow-xl transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-40">
21
+ <div class="p-6 border-b border-gray-100">
22
+ <div class="flex items-center space-x-3">
23
+ <div class="w-10 h-10 safety-gradient rounded-lg flex items-center justify-center">
24
+ <i data-lucide="shield-check" class="text-white w-6 h-6"></i>
25
+ </div>
26
+ <div>
27
+ <h1 class="font-bold text-lg text-gray-900">SafeTeam</h1>
28
+ <p class="text-xs text-gray-500">Safety Management</p>
29
+ </div>
30
+ </div>
31
+ </div>
32
+
33
+ <nav class="p-4 space-y-2">
34
+ <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
35
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
36
+ <span>Dashboard</span>
37
+ </a>
38
+ <a href="incidents.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
39
+ <i data-lucide="alert-triangle" class="w-5 h-5"></i>
40
+ <span>Incidents</span>
41
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
42
+ </a>
43
+ <a href="training.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
44
+ <i data-lucide="graduation-cap" class="w-5 h-5"></i>
45
+ <span>Training</span>
46
+ </a>
47
+ <a href="live-map.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
48
+ <i data-lucide="map" class="w-5 h-5"></i>
49
+ <span>Live Map</span>
50
+ </a>
51
+ <a href="equipment.html" class="flex items-center space-x-3 px-4 py-3 bg-blue-50 text-blue-700 rounded-xl font-medium">
52
+ <i data-lucide="hard-hat" class="w-5 h-5"></i>
53
+ <span>Equipment</span>
54
+ </a>
55
+ <a href="reports.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
56
+ <i data-lucide="file-text" class="w-5 h-5"></i>
57
+ <span>Reports</span>
58
+ </a>
59
+ <a href="emergency.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
60
+ <i data-lucide="phone-call" class="w-5 h-5"></i>
61
+ <span>Emergency</span>
62
+ </a>
63
+ </nav>
64
+
65
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100">
66
+ <div class="flex items-center space-x-3 px-4 py-3">
67
+ <img src="http://static.photos/people/100x100/42" alt="User" class="w-10 h-10 rounded-full object-cover">
68
+ <div>
69
+ <p class="text-sm font-medium text-gray-900">Safety Manager</p>
70
+ <p class="text-xs text-gray-500">Admin</p>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </aside>
75
+
76
+ <!-- Main Content -->
77
+ <main class="md:ml-64 min-h-screen">
78
+ <header class="bg-white shadow-sm sticky top-0 z-30">
79
+ <div class="flex items-center justify-between px-6 py-4">
80
+ <div class="flex items-center space-x-4">
81
+ <button id="menu-toggle" class="md:hidden p-2 hover:bg-gray-100 rounded-lg">
82
+ <i data-lucide="menu" class="w-6 h-6"></i>
83
+ </button>
84
+ <div>
85
+ <h2 class="text-2xl font-bold text-gray-900">Safety Equipment</h2>
86
+ <p class="text-sm text-gray-500">Track and manage safety gear inventory</p>
87
+ </div>
88
+ </div>
89
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition-colors">
90
+ <i data-lucide="plus" class="w-5 h-5"></i>
91
+ <span>Add Equipment</span>
92
+ </button>
93
+ </div>
94
+ </header>
95
+
96
+ <div class="p-6 space-y-6">
97
+ <!-- Equipment Grid -->
98
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
99
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
100
+ <div class="flex items-center justify-between mb-4">
101
+ <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
102
+ <i data-lucide="glasses" class="w-6 h-6 text-blue-600"></i>
103
+ </div>
104
+ <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-1 rounded-full">Available</span>
105
+ </div>
106
+ <h3 class="font-semibold text-gray-900 mb-1">Safety Glasses</h3>
107
+ <p class="text-sm text-gray-500 mb-4">Industrial grade protection</p>
108
+ <div class="flex items-center justify-between text-sm">
109
+ <span class="text-gray-600">Stock: 45/50</span>
110
+ <span class="text-gray-400">Last inspected: Oct 20</span>
111
+ </div>
112
+ <div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
113
+ <div class="h-full bg-green-500 rounded-full" style="width: 90%"></div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
118
+ <div class="flex items-center justify-between mb-4">
119
+ <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
120
+ <i data-lucide="headphones" class="w-6 h-6 text-yellow-600"></i>
121
+ </div>
122
+ <span class="text-xs font-medium bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">Low Stock</span>
123
+ </div>
124
+ <h3 class="font-semibold text-gray-900 mb-1">Hearing Protection</h3>
125
+ <p class="text-sm text-gray-500 mb-4">Noise-canceling earmuffs</p>
126
+ <div class="flex items-center justify-between text-sm">
127
+ <span class="text-gray-600">Stock: 8/30</span>
128
+ <span class="text-gray-400">Last inspected: Oct 22</span>
129
+ </div>
130
+ <div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
131
+ <div class="h-full bg-yellow-500 rounded-full" style="width: 26%"></div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
136
+ <div class="flex items-center justify-between mb-4">
137
+ <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
138
+ <i data-lucide="fire-extinguisher" class="w-6 h-6 text-red-600"></i>
139
+ </div>
140
+ <span class="text-xs font-medium bg-green-100 text-green-700 px-2 py-1 rounded-full">Good</span>
141
+ </div>
142
+ <h3 class="font-semibold text-gray-900 mb-1">Fire Extinguishers</h3>
143
+ <p class="text-sm text-gray-500 mb-4">ABC rated units</p>
144
+ <div class="flex items-center justify-between text-sm">
145
+ <span class="text-gray-600">Inspection: Current</span>
146
+ <span class="text-gray-400">Next check: Nov 15</span>
147
+ </div>
148
+ <div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
149
+ <div class="h-full bg-green-500 rounded-full" style="width: 100%"></div>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
154
+ <div class="flex items-center justify-between mb-4">
155
+ <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
156
+ <i data-lucide="activity" class="w-6 h-6 text-purple-600"></i>
157
+ </div>
158
+ <span class="text-xs font-medium bg-red-100 text-red-700 px-2 py-1 rounded-full">Expired</span>
159
+ </div>
160
+ <h3 class="font-semibold text-gray-900 mb-1">First Aid Kits</h3>
161
+ <p class="text-sm text-gray-500 mb-4">Standard workplace kits</p>
162
+ <div class="flex items-center justify-between text-sm">
163
+ <span class="text-gray-600">Expiration: Oct 15</span>
164
+ <span class="text-red-500 font-medium">Needs restocking</span>
165
+ </div>
166
+ <div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
167
+ <div class="h-full bg-red-500 rounded-full" style="width: 0%"></div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </main>
173
+
174
+ <script>
175
+ lucide.createIcons();
176
+
177
+ const sidebar = document.getElementById('sidebar');
178
+ const menuToggle = document.getElementById('menu-toggle');
179
+
180
+ menuToggle.addEventListener('click', () => {
181
+ sidebar.classList.toggle('-translate-x-full');
182
+ });
183
+ </script>
184
+ </body>
185
+ </html>
incidents.html ADDED
@@ -0,0 +1,236 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Incidents - Staff Safety Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background: #0f172a;
14
+ color: #e2e8f0;
15
+ }
16
+
17
+ .neu-dark {
18
+ background: linear-gradient(145deg, #1e293b, #0f172a);
19
+ box-shadow:
20
+ 8px 8px 16px rgba(0,0,0,0.5),
21
+ -8px -8px 16px rgba(255,255,255,0.03),
22
+ inset 1px 1px 1px rgba(255,255,255,0.05);
23
+ }
24
+
25
+ .neu-dark-inset {
26
+ background: #0f172a;
27
+ box-shadow:
28
+ inset 4px 4px 8px rgba(0,0,0,0.6),
29
+ inset -4px -4px 8px rgba(255,255,255,0.02);
30
+ }
31
+
32
+ .neu-pressed {
33
+ box-shadow:
34
+ inset 4px 4px 8px rgba(0,0,0,0.5),
35
+ inset -4px -4px 8px rgba(255,255,255,0.05);
36
+ }
37
+
38
+ .neu-btn {
39
+ background: linear-gradient(145deg, #1e293b, #0f172a);
40
+ box-shadow:
41
+ 4px 4px 8px rgba(0,0,0,0.4),
42
+ -4px -4px 8px rgba(255,255,255,0.03);
43
+ transition: all 0.2s ease;
44
+ }
45
+
46
+ .neu-btn:active {
47
+ box-shadow:
48
+ inset 4px 4px 8px rgba(0,0,0,0.4),
49
+ inset -4px -4px 8px rgba(255,255,255,0.03);
50
+ }
51
+
52
+ .text-accent { color: #eab308; }
53
+ .bg-accent { background-color: #eab308; }
54
+ .border-accent { border-color: rgba(234, 179, 8, 0.3); }
55
+ </style>
56
+ </head>
57
+ <body class="bg-slate-950 text-slate-200">
58
+
59
+ <!-- Sidebar -->
60
+ <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 neu-dark border-r border-slate-800/50 transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-40">
61
+ <div class="p-6 border-b border-slate-800/50">
62
+ <div class="flex items-center space-x-3">
63
+ <div class="w-10 h-10 neu-dark-inset rounded-lg flex items-center justify-center border border-accent">
64
+ <i data-lucide="shield-check" class="text-accent w-6 h-6"></i>
65
+ </div>
66
+ <div>
67
+ <h1 class="font-bold text-lg text-slate-100">SafeTeam</h1>
68
+ <p class="text-xs text-slate-500">Safety Management</p>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <nav class="p-4 space-y-2">
74
+ <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
75
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
76
+ <span>Dashboard</span>
77
+ </a>
78
+ <a href="incidents.html" class="flex items-center space-x-3 px-4 py-3 neu-pressed text-accent rounded-xl font-medium border border-accent/30">
79
+ <i data-lucide="alert-triangle" class="w-5 h-5"></i>
80
+ <span>Incidents</span>
81
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
82
+ </a>
83
+ <a href="training.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
84
+ <i data-lucide="graduation-cap" class="w-5 h-5"></i>
85
+ <span>Training</span>
86
+ </a>
87
+ <a href="live-map.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
88
+ <i data-lucide="map" class="w-5 h-5"></i>
89
+ <span>Live Map</span>
90
+ </a>
91
+ <a href="equipment.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
92
+ <i data-lucide="hard-hat" class="w-5 h-5"></i>
93
+ <span>Equipment</span>
94
+ </a>
95
+ <a href="reports.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
96
+ <i data-lucide="file-text" class="w-5 h-5"></i>
97
+ <span>Reports</span>
98
+ </a>
99
+ <a href="emergency.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-red-400 transition-colors">
100
+ <i data-lucide="phone-call" class="w-5 h-5"></i>
101
+ <span>Emergency</span>
102
+ </a>
103
+ </nav>
104
+
105
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-800/50">
106
+ <div class="flex items-center space-x-3 px-4 py-3 neu-dark-inset rounded-xl border border-slate-700/50">
107
+ <img src="http://static.photos/people/100x100/42" alt="User" class="w-10 h-10 rounded-full object-cover border border-slate-600">
108
+ <div>
109
+ <p class="text-sm font-medium text-slate-200">Safety Manager</p>
110
+ <p class="text-xs text-slate-500">Admin</p>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </aside>
115
+
116
+ <!-- Main Content -->
117
+ <main class="md:ml-64 min-h-screen bg-slate-950">
118
+ <header class="neu-dark border-b border-slate-800/50 sticky top-0 z-30">
119
+ <div class="flex items-center justify-between px-6 py-4">
120
+ <div class="flex items-center space-x-4">
121
+ <button id="menu-toggle" class="md:hidden p-2 neu-dark-inset text-slate-400 rounded-lg border border-slate-700">
122
+ <i data-lucide="menu" class="w-6 h-6"></i>
123
+ </button>
124
+ <div>
125
+ <h2 class="text-2xl font-bold text-slate-100">Incident Management</h2>
126
+ <p class="text-sm text-slate-500">Track and manage safety incidents</p>
127
+ </div>
128
+ </div>
129
+ <div class="flex items-center space-x-4">
130
+ <button class="bg-accent hover:bg-yellow-500 text-slate-900 px-4 py-2 rounded-lg font-semibold flex items-center space-x-2 transition-colors">
131
+ <i data-lucide="plus" class="w-5 h-5"></i>
132
+ <span>New Incident</span>
133
+ </button>
134
+ <button class="relative p-2 neu-btn text-slate-400 hover:text-accent rounded-lg">
135
+ <i data-lucide="bell" class="w-6 h-6"></i>
136
+ <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"></span>
137
+ </button>
138
+ </div>
139
+ </div>
140
+ </header>
141
+
142
+ <div class="p-6 space-y-6">
143
+ <div class="neu-dark rounded-2xl p-4 border border-slate-700/30">
144
+ <div class="flex flex-wrap gap-4 items-center">
145
+ <div class="flex-1 min-w-[200px]">
146
+ <input type="text" placeholder="Search incidents..." class="w-full px-4 py-2 neu-dark-inset text-slate-200 rounded-lg border border-slate-700/50 focus:ring-1 focus:ring-accent outline-none">
147
+ </div>
148
+ <select class="px-4 py-2 neu-dark-inset text-slate-200 rounded-lg border border-slate-700/50 outline-none">
149
+ <option>All Status</option>
150
+ <option>Open</option>
151
+ <option>In Progress</option>
152
+ <option>Closed</option>
153
+ </select>
154
+ <select class="px-4 py-2 neu-dark-inset text-slate-200 rounded-lg border border-slate-700/50 outline-none">
155
+ <option>All Severity</option>
156
+ <option>Low</option>
157
+ <option>Medium</option>
158
+ <option>High</option>
159
+ </select>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="neu-dark rounded-2xl border border-slate-700/30 overflow-hidden">
164
+ <table class="w-full">
165
+ <thead class="border-b border-slate-700/50">
166
+ <tr>
167
+ <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">ID</th>
168
+ <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Title</th>
169
+ <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Location</th>
170
+ <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Severity</th>
171
+ <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Status</th>
172
+ <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Actions</th>
173
+ </tr>
174
+ </thead>
175
+ <tbody class="divide-y divide-slate-700/30">
176
+ <tr class="hover:bg-slate-800/50 transition-colors">
177
+ <td class="px-6 py-4 text-slate-400">#INC-001</td>
178
+ <td class="px-6 py-4">
179
+ <div class="text-slate-200 font-medium">Slip and Fall - Warehouse</div>
180
+ <div class="text-sm text-slate-500">Wet floor hazard</div>
181
+ </td>
182
+ <td class="px-6 py-4 text-slate-400">Building C</td>
183
+ <td class="px-6 py-4">
184
+ <span class="px-2 py-1 text-xs font-medium bg-red-500/10 text-red-400 rounded border border-red-500/20">High</span>
185
+ </td>
186
+ <td class="px-6 py-4">
187
+ <span class="px-2 py-1 text-xs font-medium bg-yellow-500/10 text-yellow-400 rounded border border-yellow-500/20">In Progress</span>
188
+ </td>
189
+ <td class="px-6 py-4">
190
+ <button class="text-accent hover:text-yellow-400 font-medium text-sm">View</button>
191
+ </td>
192
+ </tr>
193
+ <tr class="hover:bg-slate-800/50 transition-colors">
194
+ <td class="px-6 py-4 text-slate-400">#INC-002</td>
195
+ <td class="px-6 py-4">
196
+ <div class="text-slate-200 font-medium">Electrical Hazard</div>
197
+ <div class="text-sm text-slate-500">Exposed wiring</div>
198
+ </td>
199
+ <td class="px-6 py-4 text-slate-400">Building A</td>
200
+ <td class="px-6 py-4">
201
+ <span class="px-2 py-1 text-xs font-medium bg-yellow-500/10 text-yellow-400 rounded border border-yellow-500/20">Medium</span>
202
+ </td>
203
+ <td class="px-6 py-4">
204
+ <span class="px-2 py-1 text-xs font-medium bg-green-500/10 text-green-400 rounded border border-green-500/20">Resolved</span>
205
+ </td>
206
+ <td class="px-6 py-4">
207
+ <button class="text-accent hover:text-yellow-400 font-medium text-sm">View</button>
208
+ </td>
209
+ </tr>
210
+ </tbody>
211
+ </table>
212
+ <div class="px-6 py-4 border-t border-slate-700/50 flex items-center justify-between">
213
+ <span class="text-sm text-slate-500">Showing 2 of 12 incidents</span>
214
+ <div class="flex space-x-2">
215
+ <button class="px-3 py-1 border border-slate-600 rounded-lg text-sm text-slate-400 hover:text-slate-200">Previous</button>
216
+ <button class="px-3 py-1 bg-accent text-slate-900 rounded-lg text-sm font-medium">1</button>
217
+ <button class="px-3 py-1 border border-slate-600 rounded-lg text-sm text-slate-400 hover:text-slate-200">2</button>
218
+ <button class="px-3 py-1 border border-slate-600 rounded-lg text-sm text-slate-400 hover:text-slate-200">Next</button>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </main>
224
+
225
+ <script>
226
+ lucide.createIcons();
227
+
228
+ const sidebar = document.getElementById('sidebar');
229
+ const menuToggle = document.getElementById('menu-toggle');
230
+
231
+ menuToggle.addEventListener('click', () => {
232
+ sidebar.classList.toggle('-translate-x-full');
233
+ });
234
+ </script>
235
+ </body>
236
+ </html>
index.html CHANGED
@@ -1,19 +1,390 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Dashboard - Staff Safety</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background: #0f172a;
14
+ color: #e2e8f0;
15
+ }
16
+
17
+ .neu-dark {
18
+ background: linear-gradient(145deg, #1e293b, #0f172a);
19
+ box-shadow:
20
+ 8px 8px 16px rgba(0,0,0,0.5),
21
+ -8px -8px 16px rgba(255,255,255,0.03),
22
+ inset 1px 1px 1px rgba(255,255,255,0.05);
23
+ }
24
+
25
+ .neu-dark-inset {
26
+ background: #0f172a;
27
+ box-shadow:
28
+ inset 4px 4px 8px rgba(0,0,0,0.6),
29
+ inset -4px -4px 8px rgba(255,255,255,0.02);
30
+ }
31
+
32
+ .neu-pressed {
33
+ box-shadow:
34
+ inset 4px 4px 8px rgba(0,0,0,0.5),
35
+ inset -4px -4px 8px rgba(255,255,255,0.05);
36
+ }
37
+
38
+ .neu-btn {
39
+ background: linear-gradient(145deg, #1e293b, #0f172a);
40
+ box-shadow:
41
+ 4px 4px 8px rgba(0,0,0,0.4),
42
+ -4px -4px 8px rgba(255,255,255,0.03);
43
+ transition: all 0.2s ease;
44
+ }
45
+
46
+ .neu-btn:active {
47
+ box-shadow:
48
+ inset 4px 4px 8px rgba(0,0,0,0.4),
49
+ inset -4px -4px 8px rgba(255,255,255,0.03);
50
+ }
51
+
52
+ .text-accent { color: #eab308; }
53
+ .bg-accent { background-color: #eab308; }
54
+ .border-accent { border-color: rgba(234, 179, 8, 0.3); }
55
+
56
+ .status-dot {
57
+ animation: blink 2s infinite;
58
+ }
59
+
60
+ @keyframes blink {
61
+ 0%, 100% { opacity: 1; }
62
+ 50% { opacity: 0.4; }
63
+ }
64
+
65
+ .slide-in {
66
+ animation: slideIn 0.3s ease-out;
67
+ }
68
+
69
+ @keyframes slideIn {
70
+ from { transform: translateX(100%); opacity: 0; }
71
+ to { transform: translateX(0); opacity: 1; }
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-slate-950 text-slate-200">
76
+
77
+ <!-- Sidebar -->
78
+ <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 neu-dark border-r border-slate-800/50 transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-40">
79
+ <div class="p-6 border-b border-slate-800/50">
80
+ <div class="flex items-center space-x-3">
81
+ <div class="w-10 h-10 neu-dark-inset rounded-lg flex items-center justify-center border border-accent">
82
+ <i data-lucide="shield-check" class="text-accent w-6 h-6"></i>
83
+ </div>
84
+ <div>
85
+ <h1 class="font-bold text-lg text-slate-100">SafeTeam</h1>
86
+ <p class="text-xs text-slate-500">Safety Management</p>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <nav class="p-4 space-y-2">
92
+ <a href="index.html" class="flex items-center space-x-3 px-4 py-3 neu-pressed text-accent rounded-xl font-medium border border-accent/30">
93
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
94
+ <span>Dashboard</span>
95
+ </a>
96
+ <a href="incidents.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
97
+ <i data-lucide="alert-triangle" class="w-5 h-5"></i>
98
+ <span>Incidents</span>
99
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
100
+ </a>
101
+ <a href="training.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
102
+ <i data-lucide="graduation-cap" class="w-5 h-5"></i>
103
+ <span>Training</span>
104
+ </a>
105
+ <a href="live-map.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
106
+ <i data-lucide="map" class="w-5 h-5"></i>
107
+ <span>Live Map</span>
108
+ </a>
109
+ <a href="equipment.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
110
+ <i data-lucide="hard-hat" class="w-5 h-5"></i>
111
+ <span>Equipment</span>
112
+ </a>
113
+ <a href="reports.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
114
+ <i data-lucide="file-text" class="w-5 h-5"></i>
115
+ <span>Reports</span>
116
+ </a>
117
+ <a href="emergency.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-red-400 transition-colors">
118
+ <i data-lucide="phone-call" class="w-5 h-5"></i>
119
+ <span>Emergency</span>
120
+ </a>
121
+ </nav>
122
+
123
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-800/50">
124
+ <div class="flex items-center space-x-3 px-4 py-3 neu-dark-inset rounded-xl border border-slate-700/50">
125
+ <img src="http://static.photos/people/100x100/42" alt="User" class="w-10 h-10 rounded-full object-cover border border-slate-600">
126
+ <div>
127
+ <p class="text-sm font-medium text-slate-200">Safety Manager</p>
128
+ <p class="text-xs text-slate-500">Admin</p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </aside>
133
+
134
+ <!-- Main Content -->
135
+ <main class="md:ml-64 min-h-screen bg-slate-950">
136
+ <!-- Top Header -->
137
+ <header class="neu-dark border-b border-slate-800/50 sticky top-0 z-30">
138
+ <div class="flex items-center justify-between px-6 py-4">
139
+ <div class="flex items-center space-x-4">
140
+ <button id="menu-toggle" class="md:hidden p-2 neu-dark-inset text-slate-400 rounded-lg border border-slate-700">
141
+ <i data-lucide="menu" class="w-6 h-6"></i>
142
+ </button>
143
+ <div>
144
+ <h2 class="text-2xl font-bold text-slate-100">Safety Dashboard</h2>
145
+ <p class="text-sm text-slate-500" id="current-date"></p>
146
+ </div>
147
+ </div>
148
+ <div class="flex items-center space-x-4">
149
+ <button onclick="toggleEmergencyModal()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition-colors shadow-lg">
150
+ <i data-lucide="siren" class="w-5 h-5"></i>
151
+ <span>Emergency</span>
152
+ </button>
153
+ <button class="relative p-2 neu-btn text-slate-400 hover:text-accent rounded-lg">
154
+ <i data-lucide="bell" class="w-6 h-6"></i>
155
+ <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"></span>
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </header>
160
+
161
+ <div class="p-6 space-y-6">
162
+ <!-- Safety Score Cards -->
163
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
164
+ <div class="neu-dark rounded-2xl p-6 border border-slate-700/30">
165
+ <div class="flex items-center justify-between mb-4">
166
+ <div class="w-12 h-12 neu-dark-inset rounded-xl flex items-center justify-center border border-slate-600">
167
+ <i data-lucide="shield" class="w-6 h-6 text-accent"></i>
168
+ </div>
169
+ <span class="text-xs font-medium text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded border border-emerald-400/20">+2.4%</span>
170
+ </div>
171
+ <h3 class="text-3xl font-bold text-slate-100">94%</h3>
172
+ <p class="text-sm text-slate-500">Safety Score</p>
173
+ </div>
174
+
175
+ <div class="neu-dark rounded-2xl p-6 border border-slate-700/30">
176
+ <div class="flex items-center justify-between mb-4">
177
+ <div class="w-12 h-12 neu-dark-inset rounded-xl flex items-center justify-center border border-slate-600">
178
+ <i data-lucide="alert-circle" class="w-6 h-6 text-orange-400"></i>
179
+ </div>
180
+ <span class="text-xs font-medium text-red-400 bg-red-400/10 px-2 py-1 rounded border border-red-400/20">-12%</span>
181
+ </div>
182
+ <h3 class="text-3xl font-bold text-slate-100">3</h3>
183
+ <p class="text-sm text-slate-500">Open Incidents</p>
184
+ </div>
185
+
186
+ <div class="neu-dark rounded-2xl p-6 border border-slate-700/30">
187
+ <div class="flex items-center justify-between mb-4">
188
+ <div class="w-12 h-12 neu-dark-inset rounded-xl flex items-center justify-center border border-slate-600">
189
+ <i data-lucide="users" class="w-6 h-6 text-blue-400"></i>
190
+ </div>
191
+ <span class="text-xs font-medium text-accent bg-accent/10 px-2 py-1 rounded border border-accent/20">98%</span>
192
+ </div>
193
+ <h3 class="text-3xl font-bold text-slate-100">142</h3>
194
+ <p class="text-sm text-slate-500">Staff Trained</p>
195
+ </div>
196
+
197
+ <div class="neu-dark rounded-2xl p-6 border border-slate-700/30">
198
+ <div class="flex items-center justify-between mb-4">
199
+ <div class="w-12 h-12 neu-dark-inset rounded-xl flex items-center justify-center border border-slate-600">
200
+ <i data-lucide="check-circle" class="w-6 h-6 text-purple-400"></i>
201
+ </div>
202
+ <span class="text-xs font-medium text-slate-400 bg-slate-400/10 px-2 py-1 rounded border border-slate-400/20">0</span>
203
+ </div>
204
+ <h3 class="text-3xl font-bold text-slate-100">28</h3>
205
+ <p class="text-sm text-slate-500">Days Since Last Incident</p>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Incident Reporting & Recent Activity -->
210
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
211
+ <!-- Quick Report -->
212
+ <div class="neu-dark rounded-2xl p-6 border border-slate-700/30">
213
+ <h3 class="text-lg font-bold text-slate-100 mb-4 flex items-center space-x-2">
214
+ <i data-lucide="file-plus" class="w-5 h-5 text-accent"></i>
215
+ <span>Quick Report</span>
216
+ </h3>
217
+ <form id="incident-form" class="space-y-4">
218
+ <div>
219
+ <label class="block text-sm font-medium text-slate-400 mb-1">Incident Type</label>
220
+ <select id="incident-type" class="w-full px-4 py-2 neu-dark-inset text-slate-200 rounded-lg focus:ring-1 focus:ring-accent focus:border-accent outline-none border border-slate-700/50">
221
+ <option value="">Select type...</option>
222
+ <option value="injury">Injury</option>
223
+ <option value="near-miss">Near Miss</option>
224
+ <option value="property">Property Damage</option>
225
+ <option value="environmental">Environmental</option>
226
+ <option value="security">Security</option>
227
+ </select>
228
+ </div>
229
+ <div>
230
+ <label class="block text-sm font-medium text-slate-400 mb-1">Location</label>
231
+ <input type="text" id="incident-location" placeholder="e.g., Building A, Floor 2" class="w-full px-4 py-2 neu-dark-inset text-slate-200 rounded-lg focus:ring-1 focus:ring-accent border border-slate-700/50 outline-none">
232
+ </div>
233
+ <div>
234
+ <label class="block text-sm font-medium text-slate-400 mb-1">Severity</label>
235
+ <div class="grid grid-cols-3 gap-2">
236
+ <button type="button" class="severity-btn px-3 py-2 text-sm border border-slate-600 text-slate-400 rounded-lg neu-btn hover:text-accent" data-severity="low">Low</button>
237
+ <button type="button" class="severity-btn px-3 py-2 text-sm border border-slate-600 text-slate-400 rounded-lg neu-btn hover:text-accent" data-severity="medium">Medium</button>
238
+ <button type="button" class="severity-btn px-3 py-2 text-sm border border-red-500 text-red-400 rounded-lg neu-pressed" data-severity="high">High</button>
239
+ </div>
240
+ </div>
241
+ <div>
242
+ <label class="block text-sm font-medium text-slate-400 mb-1">Description</label>
243
+ <textarea id="incident-desc" rows="3" placeholder="Describe what happened..." class="w-full px-4 py-2 neu-dark-inset text-slate-200 rounded-lg focus:ring-1 focus:ring-accent border border-slate-700/50 outline-none resize-none"></textarea>
244
+ </div>
245
+ <button type="submit" class="w-full bg-accent hover:bg-yellow-500 text-slate-900 font-semibold py-3 rounded-lg transition-colors flex items-center justify-center space-x-2 neu-btn">
246
+ <i data-lucide="send" class="w-4 h-4"></i>
247
+ <span>Submit Report</span>
248
+ </button>
249
+ </form>
250
+ </div>
251
+
252
+ <!-- Recent Incidents -->
253
+ <div class="lg:col-span-2 neu-dark rounded-2xl p-6 border border-slate-700/30">
254
+ <div class="flex items-center justify-between mb-4">
255
+ <h3 class="text-lg font-bold text-slate-100">Recent Incidents</h3>
256
+ <button class="text-accent hover:text-yellow-400 text-sm font-medium">View All</button>
257
+ </div>
258
+ <div class="space-y-3" id="incidents-list">
259
+ <div class="flex items-start space-x-4 p-4 neu-dark-inset rounded-xl border border-red-500/20">
260
+ <div class="w-10 h-10 neu-dark rounded-lg flex items-center justify-center border border-red-500/30 flex-shrink-0">
261
+ <i data-lucide="alert-triangle" class="w-5 h-5 text-red-400"></i>
262
+ </div>
263
+ <div class="flex-1">
264
+ <div class="flex items-center justify-between mb-1">
265
+ <h4 class="font-semibold text-slate-200">Slip and Fall - Warehouse</h4>
266
+ <span class="text-xs text-red-400 bg-red-400/10 px-2 py-1 rounded border border-red-400/20">High</span>
267
+ </div>
268
+ <p class="text-sm text-slate-500 mb-2">Employee slipped on wet floor near loading dock.</p>
269
+ <div class="flex items-center space-x-4 text-xs text-slate-500">
270
+ <span class="flex items-center"><i data-lucide="clock" class="w-3 h-3 mr-1 text-slate-600"></i>2 hours ago</span>
271
+ <span class="flex items-center"><i data-lucide="map-pin" class="w-3 h-3 mr-1 text-slate-600"></i>Building C</span>
272
+ </div>
273
+ </div>
274
+ <button class="text-slate-400 hover:text-accent">
275
+ <i data-lucide="more-vertical" class="w-5 h-5"></i>
276
+ </button>
277
+ </div>
278
+
279
+ <div class="flex items-start space-x-4 p-4 neu-dark-inset rounded-xl border border-yellow-500/20">
280
+ <div class="w-10 h-10 neu-dark rounded-lg flex items-center justify-center border border-yellow-500/30 flex-shrink-0">
281
+ <i data-lucide="zap" class="w-5 h-5 text-yellow-400"></i>
282
+ </div>
283
+ <div class="flex-1">
284
+ <div class="flex items-center justify-between mb-1">
285
+ <h4 class="font-semibold text-slate-200">Electrical Hazard</h4>
286
+ <span class="text-xs text-yellow-400 bg-yellow-400/10 px-2 py-1 rounded border border-yellow-400/20">Medium</span>
287
+ </div>
288
+ <p class="text-sm text-slate-500 mb-2">Exposed wiring found in maintenance room.</p>
289
+ <div class="flex items-center space-x-4 text-xs text-slate-500">
290
+ <span class="flex items-center"><i data-lucide="clock" class="w-3 h-3 mr-1 text-slate-600"></i>5 hours ago</span>
291
+ <span class="flex items-center"><i data-lucide="map-pin" class="w-3 h-3 mr-1 text-slate-600"></i>Building A</span>
292
+ </div>
293
+ </div>
294
+ <button class="text-slate-400 hover:text-accent">
295
+ <i data-lucide="more-vertical" class="w-5 h-5"></i>
296
+ </button>
297
+ </div>
298
+
299
+ <div class="flex items-start space-x-4 p-4 neu-dark-inset rounded-xl border border-slate-600/30">
300
+ <div class="w-10 h-10 neu-dark rounded-lg flex items-center justify-center border border-slate-500/30 flex-shrink-0">
301
+ <i data-lucide="package" class="w-5 h-5 text-slate-400"></i>
302
+ </div>
303
+ <div class="flex-1">
304
+ <div class="flex items-center justify-between mb-1">
305
+ <h4 class="font-semibold text-slate-200">PPE Violation</h4>
306
+ <span class="text-xs text-green-400 bg-green-400/10 px-2 py-1 rounded border border-green-400/20">Low</span>
307
+ </div>
308
+ <p class="text-sm text-slate-500 mb-2">Safety glasses not worn in restricted area.</p>
309
+ <div class="flex items-center space-x-4 text-xs text-slate-500">
310
+ <span class="flex items-center"><i data-lucide="clock" class="w-3 h-3 mr-1 text-slate-600"></i>1 day ago</span>
311
+ <span class="flex items-center"><i data-lucide="map-pin" class="w-3 h-3 mr-1 text-slate-600"></i>Lab 3</span>
312
+ </div>
313
+ </div>
314
+ <button class="text-slate-400 hover:text-accent">
315
+ <i data-lucide="more-vertical" class="w-5 h-5"></i>
316
+ </button>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </main>
323
+
324
+ <!-- Emergency Modal -->
325
+ <div id="emergency-modal" class="fixed inset-0 bg-black/80 z-50 hidden items-center justify-center p-4">
326
+ <div class="neu-dark rounded-2xl max-w-md w-full p-6 border border-red-500/30 slide-in">
327
+ <div class="text-center mb-6">
328
+ <div class="w-16 h-16 mx-auto neu-dark-inset rounded-full flex items-center justify-center border border-red-500/30">
329
+ <i data-lucide="siren" class="w-8 h-8 text-red-400"></i>
330
+ </div>
331
+ <h3 class="text-2xl font-bold text-slate-100 mt-4">Emergency Alert</h3>
332
+ <p class="text-slate-500 text-sm mt-1">Select emergency type</p>
333
+ </div>
334
+
335
+ <div class="grid grid-cols-2 gap-3 mb-6">
336
+ <button onclick="triggerEmergency('fire')" class="p-4 neu-dark-inset border border-red-500/20 hover:border-red-500 rounded-xl transition-colors flex flex-col items-center">
337
+ <i data-lucide="flame" class="w-8 h-8 text-red-400 mb-2"></i>
338
+ <span class="font-semibold text-slate-200">Fire</span>
339
+ </button>
340
+ <button onclick="triggerEmergency('medical')" class="p-4 neu-dark-inset border border-blue-500/20 hover:border-blue-500 rounded-xl transition-colors flex flex-col items-center">
341
+ <i data-lucide="heart-pulse" class="w-8 h-8 text-blue-400 mb-2"></i>
342
+ <span class="font-semibold text-slate-200">Medical</span>
343
+ </button>
344
+ <button onclick="triggerEmergency('evacuation')" class="p-4 neu-dark-inset border border-orange-500/20 hover:border-orange-500 rounded-xl transition-colors flex flex-col items-center">
345
+ <i data-lucide="door-open" class="w-8 h-8 text-orange-400 mb-2"></i>
346
+ <span class="font-semibold text-slate-200">Evacuation</span>
347
+ </button>
348
+ <button onclick="triggerEmergency('security')" class="p-4 neu-dark-inset border border-purple-500/20 hover:border-purple-500 rounded-xl transition-colors flex flex-col items-center">
349
+ <i data-lucide="lock" class="w-8 h-8 text-purple-400 mb-2"></i>
350
+ <span class="font-semibold text-slate-200">Security</span>
351
+ </button>
352
+ </div>
353
+
354
+ <button onclick="toggleEmergencyModal()" class="w-full py-3 border border-slate-600 rounded-lg font-medium text-slate-400 hover:text-slate-200 transition-colors">
355
+ Cancel
356
+ </button>
357
+ </div>
358
+ </div>
359
+
360
+ <script>
361
+ lucide.createIcons();
362
+
363
+ const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
364
+ document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', dateOptions);
365
+
366
+ const sidebar = document.getElementById('sidebar');
367
+ const menuToggle = document.getElementById('menu-toggle');
368
+
369
+ menuToggle.addEventListener('click', () => {
370
+ sidebar.classList.toggle('-translate-x-full');
371
+ });
372
+
373
+ function toggleEmergencyModal() {
374
+ const modal = document.getElementById('emergency-modal');
375
+ modal.classList.toggle('hidden');
376
+ modal.classList.toggle('flex');
377
+ }
378
+
379
+ function triggerEmergency(type) {
380
+ alert(`Emergency ${type} protocol activated!`);
381
+ toggleEmergencyModal();
382
+ }
383
+
384
+ document.getElementById('emergency-modal').addEventListener('click', (e) => {
385
+ if (e.target === e.currentTarget) toggleEmergencyModal();
386
+ });
387
+ </script>
388
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
389
+ </body>
390
+ </html>
live-map.html ADDED
@@ -0,0 +1,386 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Live Map - Staff Safety Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
10
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ height: 100vh;
16
+ overflow: hidden;
17
+ background: #0f172a;
18
+ }
19
+
20
+ /* Neuromorphic Dark Theme Base */
21
+ .neu-dark {
22
+ background: linear-gradient(145deg, #1e293b, #0f172a);
23
+ box-shadow:
24
+ 8px 8px 16px rgba(0,0,0,0.5),
25
+ -8px -8px 16px rgba(255,255,255,0.03),
26
+ inset 1px 1px 1px rgba(255,255,255,0.05);
27
+ }
28
+
29
+ .neu-dark-inset {
30
+ background: #0f172a;
31
+ box-shadow:
32
+ inset 4px 4px 8px rgba(0,0,0,0.6),
33
+ inset -4px -4px 8px rgba(255,255,255,0.02);
34
+ }
35
+
36
+ .neu-pressed {
37
+ box-shadow:
38
+ inset 4px 4px 8px rgba(0,0,0,0.5),
39
+ inset -4px -4px 8px rgba(255,255,255,0.05);
40
+ }
41
+
42
+ .neu-btn {
43
+ background: linear-gradient(145deg, #1e293b, #0f172a);
44
+ box-shadow:
45
+ 4px 4px 8px rgba(0,0,0,0.4),
46
+ -4px -4px 8px rgba(255,255,255,0.03);
47
+ transition: all 0.2s ease;
48
+ }
49
+
50
+ .neu-btn:active {
51
+ box-shadow:
52
+ inset 4px 4px 8px rgba(0,0,0,0.4),
53
+ inset -4px -4px 8px rgba(255,255,255,0.03);
54
+ }
55
+
56
+ .neu-btn.active {
57
+ background: linear-gradient(145deg, #ca8a04, #eab308);
58
+ color: #0f172a;
59
+ box-shadow:
60
+ 4px 4px 8px rgba(0,0,0,0.3),
61
+ -4px -4px 8px rgba(255,255,255,0.05);
62
+ }
63
+
64
+ /* Yellow Accent Utilities */
65
+ .text-accent { color: #eab308; }
66
+ .bg-accent { background-color: #eab308; }
67
+ .border-accent { border-color: rgba(234, 179, 8, 0.3); }
68
+
69
+ /* Map Container */
70
+ #map {
71
+ height: 100%;
72
+ width: 100%;
73
+ border-radius: 1rem;
74
+ z-index: 1;
75
+ background: #1e293b;
76
+ }
77
+
78
+ /* Custom Map Tiles Dark Mode */
79
+ .leaflet-layer,
80
+ .leaflet-control-zoom-in,
81
+ .leaflet-control-zoom-out,
82
+ .leaflet-control-attribution {
83
+ filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
84
+ }
85
+
86
+ /* Pulse Animation */
87
+ .status-dot {
88
+ animation: blink 2s infinite;
89
+ }
90
+
91
+ @keyframes blink {
92
+ 0%, 100% { opacity: 1; }
93
+ 50% { opacity: 0.4; }
94
+ }
95
+
96
+ /* Scrollbar Hidden */
97
+ ::-webkit-scrollbar { display: none; }
98
+ body { -ms-overflow-style: none; scrollbar-width: none; }
99
+ </style>
100
+ </head>
101
+ <body class="bg-slate-950 text-slate-200">
102
+
103
+ <!-- Sidebar -->
104
+ <aside class="fixed left-0 top-0 h-full w-64 neu-dark border-r border-slate-800/50 z-40 flex flex-col">
105
+ <div class="p-6 border-b border-slate-800/50">
106
+ <div class="flex items-center space-x-3">
107
+ <div class="w-10 h-10 neu-dark-inset rounded-lg flex items-center justify-center border border-accent">
108
+ <i data-lucide="shield-check" class="text-accent w-6 h-6"></i>
109
+ </div>
110
+ <div>
111
+ <h1 class="font-bold text-lg text-slate-100">SafeTeam</h1>
112
+ <p class="text-xs text-slate-500">Safety Management</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <nav class="p-4 space-y-2 flex-1">
118
+ <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
119
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
120
+ <span>Dashboard</span>
121
+ </a>
122
+ <a href="incidents.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
123
+ <i data-lucide="alert-triangle" class="w-5 h-5"></i>
124
+ <span>Incidents</span>
125
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
126
+ </a>
127
+ <a href="training.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
128
+ <i data-lucide="graduation-cap" class="w-5 h-5"></i>
129
+ <span>Training</span>
130
+ </a>
131
+ <a href="live-map.html" class="flex items-center space-x-3 px-4 py-3 neu-pressed text-accent rounded-xl font-medium border border-accent/30">
132
+ <i data-lucide="map" class="w-5 h-5"></i>
133
+ <span>Live Map</span>
134
+ <span class="ml-auto w-2 h-2 bg-accent rounded-full status-dot"></span>
135
+ </a>
136
+ <a href="equipment.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
137
+ <i data-lucide="hard-hat" class="w-5 h-5"></i>
138
+ <span>Equipment</span>
139
+ </a>
140
+ <a href="reports.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
141
+ <i data-lucide="file-text" class="w-5 h-5"></i>
142
+ <span>Reports</span>
143
+ </a>
144
+ <a href="emergency.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-red-400 transition-colors">
145
+ <i data-lucide="phone-call" class="w-5 h-5"></i>
146
+ <span>Emergency</span>
147
+ </a>
148
+ </nav>
149
+
150
+ <div class="p-4 border-t border-slate-800/50">
151
+ <div class="flex items-center space-x-3 px-4 py-3 neu-dark-inset rounded-xl border border-slate-700/50">
152
+ <img src="http://static.photos/people/100x100/42" alt="User" class="w-10 h-10 rounded-full object-cover border border-slate-600">
153
+ <div>
154
+ <p class="text-sm font-medium text-slate-200">Safety Manager</p>
155
+ <p class="text-xs text-slate-500">Admin</p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </aside>
160
+
161
+ <!-- Main Content - Fixed Height -->
162
+ <main class="md:ml-64 h-screen flex flex-col">
163
+ <!-- Header -->
164
+ <header class="h-16 neu-dark border-b border-slate-800/50 flex items-center justify-between px-6 flex-shrink-0">
165
+ <div class="flex items-center space-x-4">
166
+ <button class="md:hidden p-2 neu-dark-inset rounded-lg text-slate-400 border border-slate-700">
167
+ <i data-lucide="menu" class="w-6 h-6"></i>
168
+ </button>
169
+ <div>
170
+ <h2 class="text-xl font-bold text-slate-100">Live Transit Tracking</h2>
171
+ <p class="text-xs text-slate-500" id="current-time">Real-time monitoring active</p>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-center space-x-3">
175
+ <button class="neu-btn active px-4 py-2 rounded-lg font-semibold text-sm flex items-center space-x-2">
176
+ <i data-lucide="activity" class="w-4 h-4"></i>
177
+ <span>LIVE</span>
178
+ </button>
179
+ <div class="w-px h-8 bg-slate-700/50"></div>
180
+ <button class="p-2 neu-btn rounded-lg text-slate-400 hover:text-accent">
181
+ <i data-lucide="maximize" class="w-5 h-5"></i>
182
+ </button>
183
+ </div>
184
+ </header>
185
+
186
+ <!-- Map Viewport - No overflow -->
187
+ <div class="flex-1 p-4 relative">
188
+ <!-- Map Container -->
189
+ <div class="h-full w-full neu-dark-inset rounded-2xl border border-slate-700/50 p-2 relative">
190
+ <div id="map" class="rounded-xl border border-slate-600/30"></div>
191
+
192
+ <!-- Current Status Overlay -->
193
+ <div class="absolute top-4 left-4 z-[400] flex space-x-2">
194
+ <div class="neu-dark px-3 py-1.5 rounded-lg border border-accent/20 flex items-center space-x-2">
195
+ <div class="w-2 h-2 bg-accent rounded-full status-dot"></div>
196
+ <span class="text-xs font-medium text-slate-300">24 Staff Active</span>
197
+ </div>
198
+ <div class="neu-dark px-3 py-1.5 rounded-lg border border-green-500/20 flex items-center space-x-2">
199
+ <div class="w-2 h-2 bg-green-500 rounded-full status-dot"></div>
200
+ <span class="text-xs font-medium text-slate-300">6 Security Units</span>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Map Controls -->
205
+ <div class="absolute top-4 right-4 z-[400] flex flex-col space-y-2">
206
+ <button onclick="map.zoomIn()" class="w-10 h-10 neu-dark rounded-lg flex items-center justify-center text-slate-400 hover:text-accent border border-slate-700/50">
207
+ <i data-lucide="plus" class="w-5 h-5"></i>
208
+ </button>
209
+ <button onclick="map.zoomOut()" class="w-10 h-10 neu-dark rounded-lg flex items-center justify-center text-slate-400 hover:text-accent border border-slate-700/50">
210
+ <i data-lucide="minus" class="w-5 h-5"></i>
211
+ </button>
212
+ <button onclick="centerMap()" class="w-10 h-10 neu-dark rounded-lg flex items-center justify-center text-slate-400 hover:text-accent border border-slate-700/50">
213
+ <i data-lucide="crosshair" class="w-5 h-5"></i>
214
+ </button>
215
+ </div>
216
+
217
+ <!-- Single Active Card - Bottom Left -->
218
+ <div class="absolute bottom-4 left-4 z-[400] w-80">
219
+ <div class="neu-dark rounded-xl border border-accent/20 overflow-hidden">
220
+ <div class="p-4 border-b border-slate-700/30 flex items-center justify-between bg-slate-800/30">
221
+ <div class="flex items-center space-x-2">
222
+ <i data-lucide="navigation" class="w-4 h-4 text-accent"></i>
223
+ <span class="font-semibold text-slate-200">Active Transit</span>
224
+ </div>
225
+ <span class="text-xs font-mono text-accent">T-04</span>
226
+ </div>
227
+
228
+ <div class="p-4 space-y-4">
229
+ <div class="flex items-start space-x-3">
230
+ <div class="w-10 h-10 neu-dark-inset rounded-full flex items-center justify-center border border-slate-600 flex-shrink-0">
231
+ <span class="text-accent font-bold text-sm">LP</span>
232
+ </div>
233
+ <div class="flex-1">
234
+ <h3 class="font-bold text-slate-100">Lisa Park</h3>
235
+ <p class="text-xs text-slate-500">Site Supervisor</p>
236
+ <div class="mt-2 flex items-center space-x-2">
237
+ <span class="px-2 py-0.5 bg-green-500/10 text-green-400 text-[10px] rounded border border-green-500/20">On Track</span>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="grid grid-cols-2 gap-3">
243
+ <div class="neu-dark-inset rounded-lg p-2 border border-slate-700/30">
244
+ <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Destination</p>
245
+ <p class="text-sm font-medium text-slate-300 truncate">Office Tower</p>
246
+ </div>
247
+ <div class="neu-dark-inset rounded-lg p-2 border border-slate-700/30">
248
+ <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">ETA</p>
249
+ <p class="text-sm font-medium text-accent">3 min</p>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="h-1.5 bg-slate-800 rounded-full overflow-hidden">
254
+ <div class="h-full bg-gradient-to-r from-accent to-yellow-600 rounded-full" style="width: 75%"></div>
255
+ </div>
256
+ <div class="flex justify-between text-[10px] text-slate-500">
257
+ <span>Distance: 0.4 mi</span>
258
+ <span>75% complete</span>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="p-3 border-t border-slate-700/30 bg-slate-800/20 flex space-x-2">
263
+ <button class="flex-1 neu-btn py-2 rounded-lg text-xs font-medium text-slate-300 hover:text-accent flex items-center justify-center space-x-1">
264
+ <i data-lucide="phone" class="w-3 h-3"></i>
265
+ <span>Contact</span>
266
+ </button>
267
+ <button class="flex-1 neu-btn py-2 rounded-lg text-xs font-medium text-slate-300 hover:text-accent flex items-center justify-center space-x-1">
268
+ <i data-lucide="shield" class="w-3 h-3"></i>
269
+ <span>Escort</span>
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Security Coverage Toggle - Bottom Right -->
276
+ <div class="absolute bottom-4 right-4 z-[400]">
277
+ <button onclick="toggleCoverage()" id="coverage-btn" class="neu-dark px-4 py-3 rounded-xl border border-slate-700/50 text-slate-300 hover:text-accent flex items-center space-x-2">
278
+ <i data-lucide="shield" class="w-5 h-5"></i>
279
+ <span class="text-sm font-medium">Coverage Zones</span>
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </main>
285
+
286
+ <script>
287
+ lucide.createIcons();
288
+
289
+ // Update Time
290
+ function updateTime() {
291
+ const now = new Date();
292
+ document.getElementById('current-time').textContent = now.toLocaleTimeString('en-US', {
293
+ hour12: false,
294
+ hour: '2-digit',
295
+ minute: '2-digit',
296
+ second: '2-digit'
297
+ });
298
+ }
299
+ setInterval(updateTime, 1000);
300
+ updateTime();
301
+
302
+ // Initialize Map
303
+ const map = L.map('map', {
304
+ zoomControl: false,
305
+ attributionControl: false
306
+ }).setView([40.7128, -74.0060], 15);
307
+
308
+ L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
309
+ maxZoom: 19
310
+ }).addTo(map);
311
+
312
+ // Custom Yellow Icon
313
+ const yellowIcon = L.divIcon({
314
+ className: 'custom-div-icon',
315
+ html: `<div style="background-color: #eab308; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #0f172a; box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.4);"></div>`,
316
+ iconSize: [14, 14],
317
+ iconAnchor: [7, 7]
318
+ });
319
+
320
+ const greenIcon = L.divIcon({
321
+ className: 'custom-div-icon',
322
+ html: `<div style="background-color: #10b981; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #0f172a;"></div>`,
323
+ iconSize: [12, 12],
324
+ iconAnchor: [6, 6]
325
+ });
326
+
327
+ // Active Staff Marker (Lisa Park)
328
+ const activeMarker = L.marker([40.7128, -74.006], { icon: yellowIcon }).addTo(map)
329
+ .bindPopup(`
330
+ <div style="background: #1e293b; color: #e2e8f0; padding: 8px; border-radius: 8px; min-width: 150px; border: 1px solid rgba(234, 179, 8, 0.3);">
331
+ <div style="color: #eab308; font-weight: bold; margin-bottom: 4px;">Lisa Park</div>
332
+ <div style="font-size: 12px; color: #64748b;">Site Supervisor</div>
333
+ <div style="font-size: 11px; color: #10b981; margin-top: 4px;">● On Track</div>
334
+ </div>
335
+ `, { closeButton: false });
336
+
337
+ activeMarker.openPopup();
338
+
339
+ // Other Staff Markers
340
+ const otherLocations = [
341
+ [40.714, -74.008], [40.711, -74.004], [40.715, -74.010], [40.710, -74.002]
342
+ ];
343
+
344
+ otherLocations.forEach((loc, i) => {
345
+ L.marker(loc, { icon: greenIcon }).addTo(map)
346
+ .bindPopup(`<div style="color: #94a3b8; font-size: 12px;">Unit ${i + 1}</div>`, {
347
+ closeButton: false,
348
+ className: 'bg-slate-800 text-slate-200'
349
+ });
350
+ });
351
+
352
+ // Security Circles (Coverage)
353
+ const securityZones = [];
354
+ const coverageBtn = document.getElementById('coverage-btn');
355
+ let coverageEnabled = false;
356
+
357
+ function toggleCoverage() {
358
+ coverageEnabled = !coverageEnabled;
359
+ if (coverageEnabled) {
360
+ coverageBtn.classList.add('border-accent', 'text-accent');
361
+ securityZones.push(L.circle([40.714, -74.008], {
362
+ color: '#eab308',
363
+ fillColor: '#eab308',
364
+ fillOpacity: 0.05,
365
+ radius: 500,
366
+ weight: 1,
367
+ dashArray: '4, 4'
368
+ }).addTo(map));
369
+ } else {
370
+ coverageBtn.classList.remove('border-accent', 'text-accent');
371
+ securityZones.forEach(z => map.removeLayer(z));
372
+ securityZones.length = 0;
373
+ }
374
+ }
375
+
376
+ function centerMap() {
377
+ map.setView([40.7128, -74.006], 15);
378
+ }
379
+
380
+ // Mobile Menu
381
+ document.querySelector('.md\\\\:hidden').addEventListener('click', () => {
382
+ document.querySelector('aside').classList.toggle('-translate-x-full');
383
+ });
384
+ </script>
385
+ </body>
386
+ </html>
reports.html ADDED
@@ -0,0 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Reports - Staff Safety Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .safety-gradient {
13
+ background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
14
+ }
15
+ </style>
16
+ </head>
17
+ <body class="bg-gray-50 text-gray-800">
18
+
19
+ <!-- Sidebar -->
20
+ <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white shadow-xl transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-40">
21
+ <div class="p-6 border-b border-gray-100">
22
+ <div class="flex items-center space-x-3">
23
+ <div class="w-10 h-10 safety-gradient rounded-lg flex items-center justify-center">
24
+ <i data-lucide="shield-check" class="text-white w-6 h-6"></i>
25
+ </div>
26
+ <div>
27
+ <h1 class="font-bold text-lg text-gray-900">SafeTeam</h1>
28
+ <p class="text-xs text-gray-500">Safety Management</p>
29
+ </div>
30
+ </div>
31
+ </div>
32
+
33
+ <nav class="p-4 space-y-2">
34
+ <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
35
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
36
+ <span>Dashboard</span>
37
+ </a>
38
+ <a href="incidents.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
39
+ <i data-lucide="alert-triangle" class="w-5 h-5"></i>
40
+ <span>Incidents</span>
41
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
42
+ </a>
43
+ <a href="training.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
44
+ <i data-lucide="graduation-cap" class="w-5 h-5"></i>
45
+ <span>Training</span>
46
+ </a>
47
+ <a href="live-map.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
48
+ <i data-lucide="map" class="w-5 h-5"></i>
49
+ <span>Live Map</span>
50
+ </a>
51
+ <a href="equipment.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
52
+ <i data-lucide="hard-hat" class="w-5 h-5"></i>
53
+ <span>Equipment</span>
54
+ </a>
55
+ <a href="reports.html" class="flex items-center space-x-3 px-4 py-3 bg-blue-50 text-blue-700 rounded-xl font-medium">
56
+ <i data-lucide="file-text" class="w-5 h-5"></i>
57
+ <span>Reports</span>
58
+ </a>
59
+ <a href="emergency.html" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
60
+ <i data-lucide="phone-call" class="w-5 h-5"></i>
61
+ <span>Emergency</span>
62
+ </a>
63
+ </nav>
64
+
65
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100">
66
+ <div class="flex items-center space-x-3 px-4 py-3">
67
+ <img src="http://static.photos/people/100x100/42" alt="User" class="w-10 h-10 rounded-full object-cover">
68
+ <div>
69
+ <p class="text-sm font-medium text-gray-900">Safety Manager</p>
70
+ <p class="text-xs text-gray-500">Admin</p>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </aside>
75
+
76
+ <!-- Main Content -->
77
+ <main class="md:ml-64 min-h-screen">
78
+ <header class="bg-white shadow-sm sticky top-0 z-30">
79
+ <div class="flex items-center justify-between px-6 py-4">
80
+ <div class="flex items-center space-x-4">
81
+ <button id="menu-toggle" class="md:hidden p-2 hover:bg-gray-100 rounded-lg">
82
+ <i data-lucide="menu" class="w-6 h-6"></i>
83
+ </button>
84
+ <div>
85
+ <h2 class="text-2xl font-bold text-gray-900">Safety Reports</h2>
86
+ <p class="text-sm text-gray-500">Generate and download compliance reports</p>
87
+ </div>
88
+ </div>
89
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition-colors">
90
+ <i data-lucide="download" class="w-5 h-5"></i>
91
+ <span>Export All</span>
92
+ </button>
93
+ </div>
94
+ </header>
95
+
96
+ <div class="p-6 space-y-6">
97
+ <!-- Report Templates -->
98
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
99
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow cursor-pointer">
100
+ <div class="flex items-start justify-between">
101
+ <div class="flex items-start space-x-4">
102
+ <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
103
+ <i data-lucide="file-bar-chart" class="w-6 h-6 text-blue-600"></i>
104
+ </div>
105
+ <div>
106
+ <h4 class="font-semibold text-gray-900">Monthly Safety Summary</h4>
107
+ <p class="text-sm text-gray-500 mt-1">Comprehensive monthly incident and compliance report</p>
108
+ <div class="flex items-center space-x-2 mt-3">
109
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">PDF</span>
110
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Auto-generated</span>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ <button class="text-blue-600 hover:bg-blue-50 p-2 rounded-lg transition-colors">
115
+ <i data-lucide="download" class="w-5 h-5"></i>
116
+ </button>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow cursor-pointer">
121
+ <div class="flex items-start justify-between">
122
+ <div class="flex items-start space-x-4">
123
+ <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
124
+ <i data-lucide="clipboard-check" class="w-6 h-6 text-green-600"></i>
125
+ </div>
126
+ <div>
127
+ <h4 class="font-semibold text-gray-900">Training Compliance Report</h4>
128
+ <p class="text-sm text-gray-500 mt-1">Staff certification status and upcoming renewals</p>
129
+ <div class="flex items-center space-x-2 mt-3">
130
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Excel</span>
131
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Weekly</span>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ <button class="text-blue-600 hover:bg-blue-50 p-2 rounded-lg transition-colors">
136
+ <i data-lucide="download" class="w-5 h-5"></i>
137
+ </button>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow cursor-pointer">
142
+ <div class="flex items-start justify-between">
143
+ <div class="flex items-start space-x-4">
144
+ <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
145
+ <i data-lucide="alert-octagon" class="w-6 h-6 text-orange-600"></i>
146
+ </div>
147
+ <div>
148
+ <h4 class="font-semibold text-gray-900">Incident Analysis</h4>
149
+ <p class="text-sm text-gray-500 mt-1">Trends, root cause analysis, and recommendations</p>
150
+ <div class="flex items-center space-x-2 mt-3">
151
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">PDF</span>
152
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Quarterly</span>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ <button class="text-blue-600 hover:bg-blue-50 p-2 rounded-lg transition-colors">
157
+ <i data-lucide="download" class="w-5 h-5"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow cursor-pointer">
163
+ <div class="flex items-start justify-between">
164
+ <div class="flex items-start space-x-4">
165
+ <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
166
+ <i data-lucide="hard-hat" class="w-6 h-6 text-purple-600"></i>
167
+ </div>
168
+ <div>
169
+ <h4 class="font-semibold text-gray-900">Equipment Audit Report</h4>
170
+ <p class="text-sm text-gray-500 mt-1">Inventory status and maintenance schedules</p>
171
+ <div class="flex items-center space-x-2 mt-3">
172
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">PDF</span>
173
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Monthly</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <button class="text-blue-600 hover:bg-blue-50 p-2 rounded-lg transition-colors">
178
+ <i data-lucide="download" class="w-5 h-5"></i>
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Recent Reports -->
185
+ <div class="bg-white rounded-2xl shadow-sm border border-gray-100">
186
+ <div class="p-6 border-b border-gray-100">
187
+ <h3 class="text-lg font-bold text-gray-900">Recently Generated</h3>
188
+ </div>
189
+ <div class="divide-y divide-gray-200">
190
+ <div class="p-4 flex items-center justify-between hover:bg-gray-50">
191
+ <div class="flex items-center space-x-4">
192
+ <i data-lucide="file-text" class="w-5 h-5 text-gray-400"></i>
193
+ <div>
194
+ <p class="font-medium text-gray-900">Safety_Summary_October_2024.pdf</p>
195
+ <p class="text-sm text-gray-500">Generated on Oct 24, 2024 • 2.4 MB</p>
196
+ </div>
197
+ </div>
198
+ <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">Download</button>
199
+ </div>
200
+ <div class="p-4 flex items-center justify-between hover:bg-gray-50">
201
+ <div class="flex items-center space-x-4">
202
+ <i data-lucide="file-spreadsheet" class="w-5 h-5 text-gray-400"></i>
203
+ <div>
204
+ <p class="font-medium text-gray-900">Training_Compliance_Week_43.xlsx</p>
205
+ <p class="text-sm text-gray-500">Generated on Oct 23, 2024 • 1.8 MB</p>
206
+ </div>
207
+ </div>
208
+ <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">Download</button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </main>
214
+
215
+ <script>
216
+ lucide.createIcons();
217
+
218
+ const sidebar = document.getElementById('sidebar');
219
+ const menuToggle = document.getElementById('menu-toggle');
220
+
221
+ menuToggle.addEventListener('click', () => {
222
+ sidebar.classList.toggle('-translate-x-full');
223
+ });
224
+ </script>
225
+ </body>
226
+ </html>
training.html ADDED
@@ -0,0 +1,77 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Training - Staff Safety Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background: #0f172a;
14
+ color: #e2e8f0;
15
+ }
16
+
17
+ .neu-dark {
18
+ background: linear-gradient(145deg, #1e293b, #0f172a);
19
+ box-shadow:
20
+ 8px 8px 16px rgba(0,0,0,0.5),
21
+ -8px -8px 16px rgba(255,255,255,0.03),
22
+ inset 1px 1px 1px rgba(255,255,255,0.05);
23
+ }
24
+
25
+ .neu-dark-inset {
26
+ background: #0f172a;
27
+ box-shadow:
28
+ inset 4px 4px 8px rgba(0,0,0,0.6),
29
+ inset -4px -4px 8px rgba(255,255,255,0.02);
30
+ }
31
+
32
+ .neu-pressed {
33
+ box-shadow:
34
+ inset 4px 4px 8px rgba(0,0,0,0.5),
35
+ inset -4px -4px 8px rgba(255,255,255,0.05);
36
+ }
37
+
38
+ .neu-btn {
39
+ background: linear-gradient(145deg, #1e293b, #0f172a);
40
+ box-shadow:
41
+ 4px 4px 8px rgba(0,0,0,0.4),
42
+ -4px -4px 8px rgba(255,255,255,0.03);
43
+ transition: all 0.2s ease;
44
+ }
45
+
46
+ .text-accent { color: #eab308; }
47
+ .bg-accent { background-color: #eab308; }
48
+ .border-accent { border-color: rgba(234, 179, 8, 0.3); }
49
+
50
+ .progress-ring {
51
+ transform: rotate(-90deg);
52
+ transform-origin: 50% 50%;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-slate-950 text-slate-200">
57
+
58
+ <!-- Sidebar -->
59
+ <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 neu-dark border-r border-slate-800/50 transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-40">
60
+ <div class="p-6 border-b border-slate-800/50">
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-10 h-10 neu-dark-inset rounded-lg flex items-center justify-center border border-accent">
63
+ <i data-lucide="shield-check" class="text-accent w-6 h-6"></i>
64
+ </div>
65
+ <div>
66
+ <h1 class="font-bold text-lg text-slate-100">SafeTeam</h1>
67
+ <p class="text-xs text-slate-500">Safety Management</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <nav class="p-4 space-y-2">
73
+ <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-slate-400 neu-btn rounded-xl hover:text-accent transition-colors">
74
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
75
+ <span>Dashboard</span>
76
+ </a>
77
+ <a href="incidents.html" class="flex items-center space-x