Hugging Face's logo

Spaces:
wajdi22
/
buuu
Running

App Files Community
wajdi22 commited on
Commit
164ba8c
路
verified 路
1 Parent(s): e39ed04

make log in page choose normal user or admin in sing up page just put name and number and whaite for admin to confirm - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +998 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Buuu
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: buuu
3
+ emoji: 馃惓
4
+ colorFrom: yellow
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,998 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Civissol Drilling - Professional Operations Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#1e3a8a',
17
+ secondary: '#0ea5e9',
18
+ accent: '#10b981',
19
+ danger: '#ef4444',
20
+ warning: '#f59e0b'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+ body {
29
+ font-family: 'Inter', sans-serif;
30
+ background-color: #f5f7fa;
31
+ transition: background-color 0.3s ease;
32
+ margin: 0;
33
+ padding: 0;
34
+ }
35
+ .dark body {
36
+ background-color: #0f172a;
37
+ }
38
+ .sidebar {
39
+ transition: all 0.3s ease;
40
+ }
41
+ .card {
42
+ border-radius: 12px;
43
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
44
+ transition: transform 0.2s;
45
+ }
46
+ .card:hover {
47
+ transform: translateY(-3px);
48
+ }
49
+ .stat-card {
50
+ border-left: 4px solid;
51
+ }
52
+ .notification-panel {
53
+ max-height: calc(100vh - 100px);
54
+ overflow-y: auto;
55
+ }
56
+ .grid-bg {
57
+ background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
58
+ linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
59
+ background-size: 20px 20px;
60
+ }
61
+ .dark .grid-bg {
62
+ background-image: linear-gradient(#1e293b 1px, transparent 1px),
63
+ linear-gradient(90deg, #1e293b 1px, transparent 1px);
64
+ }
65
+ .progress-ring__circle {
66
+ transition: stroke-dashoffset 0.5s;
67
+ transform: rotate(-90deg);
68
+ transform-origin: 50% 50%;
69
+ }
70
+ .kpi-card::before {
71
+ content: '';
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ width: 4px;
76
+ height: 100%;
77
+ border-radius: 4px 0 0 4px;
78
+ }
79
+ .dashboard-grid {
80
+ display: grid;
81
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
82
+ gap: 1.5rem;
83
+ }
84
+ .notification-badge {
85
+ position: absolute;
86
+ top: -6px;
87
+ right: -6px;
88
+ width: 22px;
89
+ height: 22px;
90
+ border-radius: 50%;
91
+ font-size: 0.7rem;
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ }
96
+ .qr-code {
97
+ min-width: 120px;
98
+ height: 120px;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ background: white;
103
+ border-radius: 8px;
104
+ padding: 10px;
105
+ }
106
+ .machine-thumbnail {
107
+ width: 100%;
108
+ aspect-ratio: 16/9;
109
+ object-fit: cover;
110
+ border-radius: 8px;
111
+ }
112
+ #soundToggle {
113
+ transition: all 0.3s ease;
114
+ }
115
+ .settings-card {
116
+ transition: all 0.2s ease;
117
+ }
118
+ .language-selector:after {
119
+ content: "";
120
+ position: absolute;
121
+ right: 15px;
122
+ top: 50%;
123
+ transform: translateY(-50%);
124
+ width: 0;
125
+ height: 0;
126
+ border-left: 5px solid transparent;
127
+ border-right: 5px solid transparent;
128
+ border-top: 5px solid #666;
129
+ pointer-events: none;
130
+ }
131
+ .dark .language-selector:after {
132
+ border-top: 5px solid #aaa;
133
+ }
134
+ .chat-bubble {
135
+ max-width: 90%;
136
+ animation: fadeIn 0.3s ease;
137
+ }
138
+ @keyframes fadeIn {
139
+ from { opacity: 0; transform: translateY(10px); }
140
+ to { opacity: 1; transform: translateY(0); }
141
+ }
142
+ .minimized-chat {
143
+ transform: translateY(calc(100% - 50px));
144
+ transition: transform 0.3s ease;
145
+ }
146
+ </style>
147
+ </head>
148
+ <body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
149
+ <!-- App Container -->
150
+ <div class="flex min-h-screen">
151
+ <!-- Sidebar -->
152
+ <div class="sidebar bg-white dark:bg-gray-800 w-20 md:w-64 py-6 transition-all duration-300 overflow-hidden">
153
+ <div class="flex items-center justify-center md:justify-between px-6 mb-10">
154
+ <div class="flex items-center">
155
+ <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary">
156
+ <i class="fas fa-diamond text-white text-xl"></i>
157
+ </div>
158
+ <span class="hidden md:block text-xl font-bold ml-3 dark:text-white">Civissol</span>
159
+ </div>
160
+ <i class="fas fa-bars hidden md:block text-gray-500 dark:text-gray-400 cursor-pointer" id="toggleSidebar"></i>
161
+ </div>
162
+
163
+ <!-- Navigation -->
164
+ <nav class="px-2 md:px-4">
165
+ <a href="/dashboard" class="nav-link flex items-center py-3 px-4 rounded-xl bg-primary-100 dark:bg-gray-700 text-primary dark:text-white mb-2" data-section="dashboard">
166
+ <i class="fas fa-tachometer-alt text-lg"></i>
167
+ <span class="ml-4 hidden md:block">Dashboard</span>
168
+ </a>
169
+ <a href="/tasks" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="tasks">
170
+ <i class="fas fa-tasks text-lg"></i>
171
+ <span class="ml-4 hidden md:block">Tasks</span>
172
+ </a>
173
+ <a href="/machines" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="machines">
174
+ <i class="fas fa-hard-hat text-lg"></i>
175
+ <span class="ml-4 hidden md:block">Machines</span>
176
+ </a>
177
+ <a href="/inventory" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="inventory">
178
+ <i class="fas fa-warehouse text-lg"></i>
179
+ <span class="ml-4 hidden md:block">Inventory</span>
180
+ </a>
181
+ <a href="/analytics" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="analytics">
182
+ <i class="fas fa-chart-line text-lg"></i>
183
+ <span class="ml-4 hidden md:block">Analytics</span>
184
+ </a>
185
+ <a href="/admin" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="admin">
186
+ <i class="fas fa-users-cog text-lg"></i>
187
+ <span class="ml-4 hidden md:block">Admin</span>
188
+ </a>
189
+ </nav>
190
+
191
+ <!-- Settings at bottom -->
192
+ <div class="absolute bottom-0 w-full px-2 md:px-4 py-4 hidden md:block">
193
+ <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
194
+ <a href="#" class="flex items-center text-gray-700 dark:text-gray-300 py-2">
195
+ <i class="fas fa-cog text-lg"></i>
196
+ <span class="ml-4">Settings</span>
197
+ </a>
198
+ <a href="#" class="flex items-center text-gray-700 dark:text-gray-300 py-2">
199
+ <i class="fas fa-sign-out-alt text-lg"></i>
200
+ <span class="ml-4">Logout</span>
201
+ </a>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Main Content -->
207
+ <div class="flex-1 relative">
208
+ <!-- Top Navigation -->
209
+ <header class="bg-white dark:bg-gray-800 py-4 px-6 shadow-sm flex justify-between items-center">
210
+ <div class="flex items-center">
211
+ <i class="fas fa-search text-gray-400 mr-3"></i>
212
+ <input type="text" placeholder="Search machines, tasks, inventory..." class="bg-transparent border-0 focus:outline-none text-gray-900 dark:text-white w-64">
213
+ </div>
214
+
215
+ <div class="flex items-center space-x-4">
216
+ <!-- Language Selector -->
217
+ <div class="relative">
218
+ <div class="language-selector">
219
+ <select id="languageSelect" class="appearance-none bg-gray-100 dark:bg-gray-700 border-0 text-gray-700 dark:text-gray-300 text-sm rounded-lg focus:ring-secondary focus:border-secondary block w-full p-2 pr-8">
220
+ <option value="en" selected>English</option>
221
+ <option value="es">Espa帽ol</option>
222
+ <option value="fr">Fran莽ais</option>
223
+ <option value="de">Deutsch</option>
224
+ <option value="pt">Portugu锚s</option>
225
+ </select>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Sound Toggle -->
230
+ <button id="soundToggle" class="bg-gray-100 dark:bg-gray-700 p-2 rounded-full text-gray-600 dark:text-gray-300">
231
+ <i class="fas fa-volume-up"></i>
232
+ </button>
233
+
234
+ <div class="relative">
235
+ <button id="notificationButton" class="bg-gray-100 dark:bg-gray-700 p-2 rounded-full relative">
236
+ <i class="fas fa-bell text-gray-600 dark:text-gray-300"></i>
237
+ <span class="notification-badge bg-danger text-white">12</span>
238
+ </button>
239
+ <!-- Notification Panel Code Remains -->
240
+ </div>
241
+
242
+ <div class="relative">
243
+ <button id="settingsButton" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
244
+ <i class="fas fa-cog text-gray-600 dark:text-gray-300"></i>
245
+ </button>
246
+ <!-- Settings Dropdown Code Remains -->
247
+ </div>
248
+
249
+ <div class="relative">
250
+ <button id="userMenuButton" class="flex items-center">
251
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
252
+ <span class="font-bold text-white">DJ</span>
253
+ </div>
254
+ <span class="ml-2 hidden md:block text-gray-800 dark:text-white">David Johnson</span>
255
+ <i class="fas fa-chevron-down ml-2 text-gray-500 hidden md:block"></i>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </header>
260
+
261
+ <!-- Dashboard -->
262
+ <main class="p-6">
263
+ <!-- Page Title and Quick Actions -->
264
+ <div class="mb-8">
265
+ <div class="flex justify-between items-center">
266
+ <div>
267
+ <h1 class="text-2xl md:text-3xl font-bold dark:text-white">Operations Dashboard</h1>
268
+ <p class="text-gray-600 dark:text-gray-400 mt-1">Drilling operations overview and key metrics</p>
269
+ </div>
270
+ <div class="flex items-center space-x-2">
271
+ <button class="flex items-center bg-white dark:bg-gray-800 shadow px-4 py-2 rounded-lg text-sm font-medium text-gray-800 dark:text-white hover:shadow-md transition">
272
+ <i class="fas fa-file-export mr-2"></i> Export PDF
273
+ </button>
274
+ <button class="flex items-center bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">
275
+ <i class="fas fa-plus mr-2"></i> New Task
276
+ </button>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Quick Actions Toolbar -->
281
+ <div class="flex flex-wrap gap-3 mt-4">
282
+ <button class="flex items-center bg-white dark:bg-gray-800 shadow rounded-lg px-4 py-2 text-sm font-medium text-gray-800 dark:text-white hover:shadow-md transition">
283
+ <i class="fas fa-file-medical mr-2 text-secondary"></i> Create Report
284
+ </button>
285
+ <button class="flex items-center bg-white dark:bg-gray-800 shadow rounded-lg px-4 py-2 text-sm font-medium text-gray-800 dark:text-white hover:shadow-md transition">
286
+ <i class="fas fa-qrcode mr-2 text-blue-500"></i> Scan Inventory
287
+ </button>
288
+ <button class="flex items-center bg-white dark:bg-gray-800 shadow rounded-lg px-4 py-2 text-sm font-medium text-gray-800 dark:text-white hover:shadow-md transition">
289
+ <i class="fas fa-route mr-2 text-amber-500"></i> Route Optimization
290
+ </button>
291
+ <button class="flex items-center bg-white dark:bg-gray-800 shadow rounded-lg px-4 py-2 text-sm font-medium text-gray-800 dark:text-white hover:shadow-md transition">
292
+ <i class="fas fa-upload mr-2 text-emerald-500"></i> Upload Photos
293
+ </button>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Stats Cards -->
298
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
299
+ <div class="card dark:bg-gray-800 bg-white p-6">
300
+ <div class="flex justify-between items-start">
301
+ <div>
302
+ <h3 class="text-gray-500 dark:text-gray-400 mb-1">Total Machines</h3>
303
+ <p class="text-2xl font-bold dark:text-white">42</p>
304
+ </div>
305
+ <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-500 dark:bg-gray-700 flex items-center justify-center">
306
+ <i class="fas fa-hard-hat text-lg"></i>
307
+ </div>
308
+ </div>
309
+ <div class="mt-3">
310
+ <div class="flex items-center">
311
+ <span class="text-xs py-1 px-2 bg-green-50 text-green-600 rounded-full">
312
+ <i class="fas fa-arrow-up mr-1"></i> 5%
313
+ </span>
314
+ <span class="text-xs text-gray-500 ml-2">vs last month</span>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="card dark:bg-gray-800 bg-white p-6">
320
+ <div class="flex justify-between items-start">
321
+ <div>
322
+ <h3 class="text-gray-500 dark:text-gray-400 mb-1">Active Tasks</h3>
323
+ <p class="text-2xl font-bold dark:text-white">138</p>
324
+ </div>
325
+ <div class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-500 dark:bg-gray-700 flex items-center justify-center">
326
+ <i class="fas fa-tasks text-lg"></i>
327
+ </div>
328
+ </div>
329
+ <div class="mt-3">
330
+ <div class="flex items-center">
331
+ <span class="text-xs py-1 px-2 bg-red-50 text-red-600 rounded-full">
332
+ <i class="fas fa-arrow-down mr-1"></i> 8%
333
+ </span>
334
+ <span class="text-xs text-gray-500 ml-2">vs last month</span>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="card dark:bg-gray-800 bg-white p-6">
340
+ <div class="flex justify-between items-start">
341
+ <div>
342
+ <h3 class="text-gray-500 dark:text-gray-400 mb-1">Machines Health</h3>
343
+ <p class="text-2xl font-bold dark:text-white">88%</p>
344
+ </div>
345
+ <div class="w-12 h-12 rounded-full bg-green-50 text-green-500 dark:bg-gray-700 flex items-center justify-center">
346
+ <i class="fas fa-heartbeat text-lg"></i>
347
+ </div>
348
+ </div>
349
+ <div class="mt-3">
350
+ <div class="flex items-center">
351
+ <span class="text-xs py-1 px-2 bg-green-50 text-green-600 rounded-full">
352
+ <i class="fas fa-arrow-up mr-1"></i> 3%
353
+ </span>
354
+ <span class="text-xs text-gray-500 ml-2">vs last month</span>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="card dark:bg-gray-800 bg-white p-6">
360
+ <div class="flex justify-between items-start">
361
+ <div>
362
+ <h3 class="text-gray-500 dark:text-gray-400 mb-1">Pending Issues</h3>
363
+ <p class="text-2xl font-bold dark:text-white">18</p>
364
+ </div>
365
+ <div class="w-12 h-12 rounded-full bg-red-50 text-red-500 dark:bg-gray-700 flex items-center justify-center">
366
+ <i class="fas fa-exclamation-triangle text-lg"></i>
367
+ </div>
368
+ </div>
369
+ <div class="mt-3">
370
+ <div class="flex items-center">
371
+ <span class="text-xs py-1 px-2 bg-green-50 text-green-600 rounded-full">
372
+ <i class="fas fa-arrow-down mr-1"></i> 12%
373
+ </span>
374
+ <span class="text-xs text-gray-500 ml-2">vs last month</span>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Enhanced Charts Section -->
381
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
382
+ <!-- Production Metrics -->
383
+ <div class="card p-6 dark:bg-gray-800">
384
+ <div class="flex justify-between items-center mb-6">
385
+ <div>
386
+ <h3 class="text-lg font-semibold dark:text-white">Production Metrics</h3>
387
+ <p class="text-sm text-gray-500 dark:text-gray-400">Daily drilling depth comparisons</p>
388
+ </div>
389
+ <div class="flex space-x-2">
390
+ <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700">
391
+ Last 7d
392
+ </button>
393
+ <button class="px-3 py-1 text-sm rounded-lg bg-primary text-white">
394
+ Last 30d
395
+ </button>
396
+ </div>
397
+ </div>
398
+ <div class="h-72">
399
+ <canvas id="productionChart"></canvas>
400
+ </div>
401
+ <div class="mt-4 flex justify-between items-center">
402
+ <div>
403
+ <p class="text-gray-600 dark:text-gray-400">Avg Daily Depth</p>
404
+ <p class="text-lg font-bold dark:text-white">312.4 meters</p>
405
+ </div>
406
+ <div class="flex items-center">
407
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">
408
+ +8.3% since last week
409
+ </span>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Predictive Maintenance -->
415
+ <div class="card p-6 dark:bg-gray-800">
416
+ <div class="flex justify-between items-center mb-6">
417
+ <div>
418
+ <h3 class="text-lg font-semibold dark:text-white">Predictive Maintenance</h3>
419
+ <p class="text-sm text-gray-500 dark:text-gray-400">AI-generated failure predictions</p>
420
+ </div>
421
+ <button class="text-primary">
422
+ <i class="fas fa-chevron-right"></i>
423
+ </button>
424
+ </div>
425
+ <div class="space-y-4">
426
+ <div class="p-4 bg-red-50 dark:bg-red-900/30 rounded-xl flex items-start">
427
+ <div class="bg-red-100 dark:bg-red-800 p-3 rounded-lg">
428
+ <i class="fas fa-engine-warning text-red-600 dark:text-red-300 text-lg"></i>
429
+ </div>
430
+ <div class="ml-4 flex-1">
431
+ <div class="flex justify-between items-start">
432
+ <h4 class="font-medium dark:text-white">High Risk</h4>
433
+ <span class="text-xs bg-red-200 px-2 py-1 rounded-full">UNDER REVIEW</span>
434
+ </div>
435
+ <p class="text-sm mt-2 dark:text-gray-300">Bearing imbalance detected on HD35 excavator</p>
436
+ <div class="flex justify-between items-center mt-2">
437
+ <div>
438
+ <span class="text-xs text-gray-500 dark:text-gray-400">Probability: 92%</span>
439
+ </div>
440
+ <span class="text-xs text-gray-500 dark:text-gray-400">Predicted in 48-72 hours</span>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="p-4 bg-amber-50 dark:bg-amber-900/30 rounded-xl flex items-start">
446
+ <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-lg">
447
+ <i class="fas fa-exclamation-triangle text-amber-600 dark:text-amber-300 text-lg"></i>
448
+ </div>
449
+ <div class="ml-4">
450
+ <div class="flex justify-between items-start">
451
+ <h4 class="font-medium dark:text-white">Medium Risk</h4>
452
+ <span class="text-xs bg-amber-200 px-2 py-1 rounded-full">NEW</span>
453
+ </div>
454
+ <p class="text-sm mt-2 dark:text-gray-300">Hydraulic pressure anomaly on B18 loader</p>
455
+ <div class="flex justify-between items-center mt-2">
456
+ <div>
457
+ <span class="text-xs text-gray-500 dark:text-gray-400">Probability: 68%</span>
458
+ </div>
459
+ <span class="text-xs text-gray-500 dark:text-gray-400">Predicted in 5-8 days</span>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="p-4 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-start">
465
+ <div class="bg-blue-100 dark:bg-blue-800 p-3 rounded-lg">
466
+ <i class="fas fa-info-circle text-blue-600 dark:text-blue-300 text-lg"></i>
467
+ </div>
468
+ <div class="ml-4 flex-1">
469
+ <div class="flex justify-between items-start">
470
+ <h4 class="font-medium dark:text-white">AI Health Check</h4>
471
+ </div>
472
+ <p class="text-sm mt-2 dark:text-gray-300">Optimize maintenance schedules for 48 machines</p>
473
+ <div class="flex items-center mt-2">
474
+ <span class="text-xs text-gray-500 dark:text-gray-400">Saves $32k potential downtime costs</span>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <!-- Machine Management -->
483
+ <div class="card p-6 dark:bg-gray-800 mb-6">
484
+ <div class="flex justify-between items-center mb-6">
485
+ <h3 class="text-lg font-semibold dark:text-white">Machine Management</h3>
486
+ <div class="flex space-x-2">
487
+ <button class="flex items-center bg-primary/10 text-primary px-3 py-2 rounded-lg text-sm">
488
+ <i class="fas fa-plus mr-2"></i> Add Machine
489
+ </button>
490
+ <button class="flex items-center bg-gray-100 dark:bg-gray-700 px-3 py-2 text-sm rounded-lg">
491
+ <i class="fas fa-sliders-h mr-2"></i> Filter
492
+ </button>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
497
+ <!-- Machine Card 1 -->
498
+ <div class="border dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-lg transition-all ease-in-out duration-300">
499
+ <div class="p-4 border-b dark:border-b-gray-700">
500
+ <div class="flex items-center justify-between">
501
+ <div>
502
+ <h4 class="font-semibold text-lg dark:text-white">HD35 Excavator</h4>
503
+ <div class="flex items-center mt-1">
504
+ <span class="rounded-full w-2 h-2 bg-green-500 mr-2"></span>
505
+ <span class="text-xs text-gray-500">Active at Site A</span>
506
+ </div>
507
+ </div>
508
+ <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Operational</span>
509
+ </div>
510
+ </div>
511
+
512
+ <div class="p-4">
513
+ <img src="https://images.unsplash.com/photo-1592508957730-19ddfdfa7414?auto=format&fit=crop&w=600&q=80" alt="Excavator" class="machine-thumbnail mb-4">
514
+
515
+ <div class="grid grid-cols-2 gap-4 mb-4">
516
+ <div>
517
+ <p class="text-sm text-gray-500">Hours Operated</p>
518
+ <p class="font-bold dark:text-white">642 hrs</p>
519
+ </div>
520
+ <div>
521
+ <p class="text-sm text-gray-500">Last Service</p>
522
+ <p class="font-bold dark:text-white">7 days ago</p>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="mb-4">
527
+ <p class="text-sm text-gray-500 mb-1">Maintenance Status</p>
528
+ <div class="flex items-center">
529
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
530
+ <div class="bg-amber-500 h-2 rounded-full" style="width: 82%"></div>
531
+ </div>
532
+ <span class="text-xs text-gray-500 ml-2">82%</span>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="flex justify-between items-center">
537
+ <button class="flex items-center text-primary text-sm">
538
+ <i class="fas fa-eye mr-1"></i> View Details
539
+ </button>
540
+ <div class="flex space-x-2">
541
+ <button class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700">
542
+ <i class="fas fa-ellipsis-v text-gray-500"></i>
543
+ </button>
544
+ <button class="p-2 rounded-lg bg-primary text-white">
545
+ <i class="fas fa-tasks"></i>
546
+ </button>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Machine Card 2 -->
553
+ <div class="border dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-lg transition-all ease-in-out duration-300">
554
+ <div class="p-4 border-b dark:border-b-gray-700">
555
+ <div class="flex items-center justify-between">
556
+ <div>
557
+ <h4 class="font-semibold text-lg dark:text-white">MD24 Drill Rig</h4>
558
+ <div class="flex items-center mt-1">
559
+ <span class="rounded-full w-2 h-2 bg-green-500 mr-2"></span>
560
+ <span class="text-xs text-gray-500">Active at Site C</span>
561
+ </div>
562
+ </div>
563
+ <span class="text-xs px-2 py-1 rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">Maintenance</span>
564
+ </div>
565
+ </div>
566
+
567
+ <div class="p-4">
568
+ <img src="https://images.unsplash.com/photo-1519676788564-189c7d7d6d80?auto=format&fit=crop&w=600&q=80" alt="Drill Rig" class="machine-thumbnail mb-4">
569
+
570
+ <div class="grid grid-cols-2 gap-4 mb-4">
571
+ <div>
572
+ <p class="text-sm text-gray-500">Hours Operated</p>
573
+ <p class="font-bold dark:text-white">1,348 hrs</p>
574
+ </div>
575
+ <div>
576
+ <p class="text-sm text-gray-500">Last Service</p>
577
+ <p class="font-bold dark:text-white">32 days ago</p>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="mb-4">
582
+ <p class="text-sm text-gray-500 mb-1">Maintenance Status</p>
583
+ <div class="flex items-center">
584
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
585
+ <div class="bg-red-500 h-2 rounded-full" style="width: 65%"></div>
586
+ </div>
587
+ <span class="text-xs text-gray-500 ml-2">65%</span>
588
+ </div>
589
+ </div>
590
+
591
+ <div class="flex justify-between items-center">
592
+ <button class="flex items-center text-primary text-sm">
593
+ <i class="fas fa-eye mr-1"></i> View Details
594
+ </button>
595
+ <div class="flex space-x-2">
596
+ <button class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700">
597
+ <i class="fas fa-ellipsis-v text-gray-500"></i>
598
+ </button>
599
+ <button class="p-2 rounded-lg bg-primary text-white">
600
+ <i class="fas fa-tasks"></i>
601
+ </button>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <!-- Machine Card with QR Feature -->
608
+ <div class="border dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-lg transition-all ease-in-out duration-300">
609
+ <div class="p-4 border-b dark:border-b-gray-700">
610
+ <div class="flex items-center justify-between">
611
+ <div>
612
+ <h4 class="font-semibold text-lg dark:text-white">B18 Loader</h4>
613
+ <div class="flex items-center mt-1">
614
+ <span class="rounded-full w-2 h-2 bg-green-500 mr-2"></span>
615
+ <span class="text-xs text-gray-500">Active at Site B</span>
616
+ </div>
617
+ </div>
618
+ <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Operational</span>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="p-4">
623
+ <div class="flex flex-col items-center mb-4">
624
+ <div class="qr-code">
625
+ <canvas id="qrCanvas"></canvas>
626
+ </div>
627
+ <p class="text-xs text-gray-500 mt-2">Scan for inventory checklist</p>
628
+ </div>
629
+
630
+ <div class="mb-4">
631
+ <p class="text-sm text-gray-500 mb-1">Maintenance Status</p>
632
+ <div class="flex items-center">
633
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
634
+ <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
635
+ </div>
636
+ <span class="text-xs text-gray-500 ml-2">92%</span>
637
+ </div>
638
+ </div>
639
+
640
+ <div class="flex justify-between">
641
+ <button class="flex-1 bg-gray-100 dark:bg-gray-800 rounded-lg py-2 flex items-center justify-center">
642
+ <i class="fas fa-file-pdf text-red-500 mr-2"></i>
643
+ <span class="text-sm">Manual</span>
644
+ </button>
645
+ <button class="flex-1 ml-2 bg-gray-100 dark:bg-gray-800 rounded-lg py-2 flex items-center justify-center">
646
+ <i class="fas fa-toolbox text-blue-500 mr-2"></i>
647
+ <span class="text-sm">Parts</span>
648
+ </button>
649
+ <button class="flex-1 ml-2 bg-gray-100 dark:bg-gray-800 rounded-lg py-2 flex items-center justify-center">
650
+ <i class="fas fa-history text-green-500 mr-2"></i>
651
+ <span class="text-sm">Logs</span>
652
+ </button>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- Recent Activity and Chat -->
660
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
661
+ <!-- Recent Activity -->
662
+ <div class="card p-6 dark:bg-gray-800 lg:col-span-2">
663
+ <div class="flex justify-between items-center mb-6">
664
+ <h3 class="text-lg font-semibold dark:text-white">Recent Activity</h3>
665
+ <button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
666
+ <i class="fas fa-ellipsis-h text-gray-600 dark:text-gray-300"></i>
667
+ </button>
668
+ </div>
669
+
670
+ <div class="space-y-4">
671
+ <div class="flex items-start">
672
+ <div class="flex-shrink-0 mr-3">
673
+ <div class="mt-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 w-10 h-10 rounded-full flex items-center justify-center">
674
+ <i class="fas fa-hard-hat"></i>
675
+ </div>
676
+ </div>
677
+ <div class="flex-1">
678
+ <div class="flex justify-between items-start">
679
+ <h4 class="font-medium dark:text-white">New Machine Assigned</h4>
680
+ <span class="text-xs text-gray-500">8:45 AM</span>
681
+ </div>
682
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">P27-Turbo drill assigned to Site C</p>
683
+ <div class="flex items-center mt-2 text-xs">
684
+ <span class="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 px-2 py-1 rounded-full">Equipment</span>
685
+ <span class="ml-2 flex items-center text-gray-500 dark:text-gray-400">
686
+ <i class="fas fa-user mr-1"></i> Michael Chen
687
+ </span>
688
+ </div>
689
+ </div>
690
+ </div>
691
+
692
+ <div class="flex items-start">
693
+ <div class="flex-shrink-0 mr-3">
694
+ <div class="mt-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 w-10 h-10 rounded-full flex items-center justify-center">
695
+ <i class="fas fa-temperature-high"></i>
696
+ </div>
697
+ </div>
698
+ <div class="flex-1">
699
+ <div class="flex justify-between items-start">
700
+ <h4 class="font-medium dark:text-white">High Temperature Alert</h4>
701
+ <span class="text-xs text-gray-500">9:20 AM</span>
702
+ </div>
703
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Engine temperature exceeded threshold on MD24 drill</p>
704
+ <div class="flex items-center mt-2 text-xs">
705
+ <span class="bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 px-2 py-1 rounded-full">Critical</span>
706
+ <span class="ml-2 flex items-center text-gray-500 dark:text-gray-400">
707
+ <i class="fas fa-hard-hat mr-1"></i> Drill MD24
708
+ </span>
709
+ </div>
710
+ </div>
711
+ </div>
712
+
713
+ <div class="flex items-start">
714
+ <div class="flex-shrink-0 mr-3">
715
+ <div class="mt-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 w-10 h-10 rounded-full flex items-center justify-center">
716
+ <i class="fas fa-check-circle"></i>
717
+ </div>
718
+ </div>
719
+ <div class="flex-1">
720
+ <div class="flex justify-between items-start">
721
+ <h4 class="font-medium dark:text-white">Task Completed</h4>
722
+ <span class="text-xs text-gray-500">10:15 AM</span>
723
+ </div>
724
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Hydraulic system check completed on HD35</p>
725
+ <div class="flex items-center mt-2 text-xs">
726
+ <span class="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 px-2 py-1 rounded-full">Maintenance</span>
727
+ <span class="ml-2 flex items-center text-gray-500 dark:text-gray-400">
728
+ <i class="fas fa-user mr-1"></i> Sarah Williams
729
+ </span>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <div class="flex items-start">
735
+ <div class="flex-shrink-0 mr-3">
736
+ <div class="mt-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 w-10 h-10 rounded-full flex items-center justify-center">
737
+ <i class="fas fa-box-open"></i>
738
+ </div>
739
+ </div>
740
+ <div class="flex-1">
741
+ <div class="flex justify-between items-start">
742
+ <h4 class="font-medium dark:text-white">Inventory Delivery</h4>
743
+ <span class="text-xs text-gray-500">11:05 AM</span>
744
+ </div>
745
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Received 250L of hydraulic fluid at Site A warehouse</p>
746
+ <div class="flex items-center mt-2 text-xs">
747
+ <span class="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 px-2 py-1 rounded-full">Inventory</span>
748
+ <span class="ml-2 flex items-center text-gray-500 dark:text-gray-400">
749
+ <i class="fas fa-warehouse mr-1"></i> Site A
750
+ </span>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ </div>
756
+
757
+ <!-- Chat Widget -->
758
+ <div class="card p-6 dark:bg-gray-800">
759
+ <div class="flex justify-between items-center mb-6">
760
+ <h3 class="text-lg font-semibold dark:text-white">Team Chat</h3>
761
+ <div class="flex space-x-2">
762
+ <button class="text-gray-500 dark:text-gray-400 p-1 relative">
763
+ <i class="fas fa-ellipsis-h"></i>
764
+ </button>
765
+ <button class="text-primary">
766
+ <i class="fas fa-expand"></i>
767
+ </button>
768
+ </div>
769
+ </div>
770
+
771
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-3 mb-4 h-72 overflow-y-auto">
772
+ <div class="space-y-3">
773
+ <!-- Message from Sarah -->
774
+ <div class="flex items-end">
775
+ <div class="flex-shrink-0">
776
+ <div class="w-8 h-8 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-800/30 flex items-center justify-center">
777
+ S
778
+ </div>
779
+ </div>
780
+ <div class="ml-3 chat-bubble">
781
+ <div class="bg-white dark:bg-gray-600 rounded-2xl rounded-bl-none p-3 shadow-sm">
782
+ <p class="text-sm dark:text-gray-100">David, did you check the maintenance schedule for HD35? It's due in 2 days.</p>
783
+ </div>
784
+ <span class="text-xs text-gray-400 mt-1 block">Sarah Williams 路 9:15 AM</span>
785
+ </div>
786
+ </div>
787
+
788
+ <!-- My Response -->
789
+ <div class="flex items-end justify-end">
790
+ <div class="chat-bubble max-w-xs">
791
+ <div class="bg-primary text-white rounded-2xl rounded-br-none p-3">
792
+ <p class="text-sm">Yes, I've scheduled it for tomorrow. Have you found the hydraulic sensor?</p>
793
+ </div>
794
+ <span class="text-xs text-gray-400 text-right mt-1 block">You 路 9:17 AM</span>
795
+ </div>
796
+ <div class="flex-shrink-0 ml-3">
797
+ <div class="w-8 h-8 rounded-full bg-primary-100 text-primary-700 dark:bg-primary-800/30 flex items-center justify-center">
798
+ D
799
+ </div>
800
+ </div>
801
+ </div>
802
+
803
+ <!-- Message from Michael -->
804
+ <div class="flex items-end">
805
+ <div class="flex-shrink-0">
806
+ <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-800/30 flex items-center justify-center">
807
+ M
808
+ </div>
809
+ </div>
810
+ <div class="ml-3 chat-bubble">
811
+ <div class="bg-white dark:bg-gray-600 rounded-2xl rounded-bl-none p-3 shadow-sm">
812
+ <p class="text-sm dark:text-gray-100">I have photos of the bearing issue on MD24. Uploading now.</p>
813
+ </div>
814
+ <div class="mt-2">
815
+ <img src="https://images.unsplash.com/photo-1621625073782-1a5d1d766781?auto=format&fit=crop&w=200&h=120&q=60" class="rounded-lg">
816
+ </div>
817
+ <span class="text-xs text-gray-400 mt-1 block">Michael Chen 路 9:22 AM</span>
818
+ </div>
819
+ </div>
820
+
821
+ <!-- New message -->
822
+ <div class="flex items-end justify-end">
823
+ <div class="chat-bubble max-w-xs">
824
+ <div class="bg-primary text-white rounded-2xl rounded-br-none p-3">
825
+ <p class="text-sm">Thanks Michael. Sarah please prioritize this.</p>
826
+ </div>
827
+ <span class="text-xs text-gray-400 text-right mt-1 block">You 路 9:24 AM</span>
828
+ </div>
829
+ <div class="flex-shrink-0 ml-3">
830
+ <div class="w-8 h-8 rounded-full bg-primary-100 text-primary-700 dark:bg-primary-800/30 flex items-center justify-center">
831
+ D
832
+ </div>
833
+ </div>
834
+ </div>
835
+
836
+ <!-- Quick suggestion -->
837
+ <div class="bg-gray-100 dark:bg-gray-600/50 rounded-lg p-3 mt-3">
838
+ <p class="text-xs text-gray-600 dark:text-gray-300 italic">Tip: Type /reports for site reports or /inventory for stock levels</p>
839
+ </div>
840
+ </div>
841
+ </div>
842
+
843
+ <div class="relative">
844
+ <input type="text" placeholder="Type your message..." class="w-full bg-gray-100 dark:bg-gray-700 rounded-full py-3 pl-4 pr-12 border-0 focus:ring-2 focus:ring-primary">
845
+ <div class="absolute right-0 top-0 h-full flex items-center pr-3 space-x-2">
846
+ <button class="p-2 text-gray-500 dark:text-gray-400">
847
+ <i class="far fa-image"></i>
848
+ </button>
849
+ <button class="p-2 text-gray-500 dark:text-gray-400">
850
+ <i class="fas fa-microphone"></i>
851
+ </button>
852
+ <button class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center">
853
+ <i class="fas fa-paper-plane"></i>
854
+ </button>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </main>
860
+ </div>
861
+
862
+ <!-- Floating Action Button -->
863
+ <div class="fixed bottom-8 right-8 z-50 flex space-x-4">
864
+ <button class="w-14 h-14 rounded-full bg-primary shadow-lg flex items-center justify-center text-white hover:scale-105 transition-transform">
865
+ <i class="fas fa-plus"></i>
866
+ </button>
867
+ <button id="documentsButton" class="w-14 h-14 rounded-full bg-secondary shadow-lg flex items-center justify-center text-white hover:scale-105 transition-transform">
868
+ <i class="fas fa-file"></i>
869
+ </button>
870
+ </div>
871
+ </div>
872
+
873
+ <!-- Settings Modal -->
874
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center">
875
+ <div class="bg-white dark:bg-gray-800 rounded-xl w-full max-w-2xl p-6 transform transition-all duration-300 scale-95 opacity-0">
876
+ <div class="flex justify-between items-center mb-6">
877
+ <h3 class="text-lg font-semibold dark:text-white">Advanced Settings</h3>
878
+ <button id="closeSettings" class="text-gray-500 dark:text-gray-400">
879
+ <i class="fas fa-times"></i>
880
+ </button>
881
+ </div>
882
+
883
+ <div class="space-y-6">
884
+ <!-- Role Management -->
885
+ <div class="settings-card border border-gray-200 dark:border-gray-700 rounded-xl p-5">
886
+ <h4 class="text-lg font-medium mb-4 dark:text-white">Access Management</h4>
887
+ <div class="space-y-4">
888
+ <div>
889
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">User Permission Levels</label>
890
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
891
+ <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4">
892
+ <div class="text-center mb-3">
893
+ <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-800/30 text-blue-600 dark:text-blue-300">
894
+ <i class="fas fa-user-shield"></i>
895
+ </div>
896
+ </div>
897
+ <h5 class="font-semibold text-center dark:text-white">Administrator</h5>
898
+ <ul class="mt-2 text-xs space-y-1 text-gray-600 dark:text-gray-300">
899
+ <li class="flex items-start">
900
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
901
+ Full system access
902
+ </li>
903
+ <li class="flex items-start">
904
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
905
+ User management
906
+ </li>
907
+ <li class="flex items-start">
908
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
909
+ Edit global settings
910
+ </li>
911
+ </ul>
912
+ </div>
913
+
914
+ <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4">
915
+ <div class="text-center mb-3">
916
+ <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 dark:bg-green-800/30 text-green-600 dark:text-green-300">
917
+ <i class="fas fa-user-tie"></i>
918
+ </div>
919
+ </div>
920
+ <h5 class="font-semibold text-center dark:text-white">Operations Manager</h5>
921
+ <ul class="mt-2 text-xs space-y-1 text-gray-600 dark:text-gray-300">
922
+ <li class="flex items-start">
923
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
924
+ Manage tasks & schedules
925
+ </li>
926
+ <li class="flex items-start">
927
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
928
+ View all equipment
929
+ </li>
930
+ <li class="flex items-start">
931
+ <i class="fas fa-ban text-gray-300 mr-2 mt-0.5"></i>
932
+ No user management
933
+ </li>
934
+ </ul>
935
+ </div>
936
+
937
+ <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4">
938
+ <div class="text-center mb-3">
939
+ <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-800/30 text-purple-600 dark:text-purple-300">
940
+ <i class="fas fa-user-hard-hat"></i>
941
+ </div>
942
+ </div>
943
+ <h5 class="font-semibold text-center dark:text-white">Maintenance Team</h5>
944
+ <ul class="mt-2 text-xs space-y-1 text-gray-600 dark:text-gray-300">
945
+ <li class="flex items-start">
946
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
947
+ Update task progress
948
+ </li>
949
+ <li class="flex items-start">
950
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
951
+ Report issues
952
+ </li>
953
+ <li class="flex items-start">
954
+ <i class="fas fa-ban text-gray-300 mr-2 mt-0.5"></i>
955
+ Limited reports view
956
+ </li>
957
+ </ul>
958
+ </div>
959
+ </div>
960
+ </div>
961
+
962
+ <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
963
+ <button class="flex items-center text-primary font-medium">
964
+ <i class="fas fa-shield-alt mr-2"></i>
965
+ Enable Two-Factor Authentication (2FA)
966
+ </button>
967
+ </div>
968
+ </div>
969
+ </div>
970
+
971
+ <!-- Branding Customization -->
972
+ <div class="settings-card border border-gray-200 dark:border-gray-700 rounded-xl p-5">
973
+ <h4 class="text-lg font-medium mb-4 dark:text-white">Branding Settings</h4>
974
+ <div class="flex flex-wrap gap-6">
975
+ <div>
976
+ <label class="block text-sm font-medium mb-2 dark:text-gray-300">Organization Logo</label>
977
+ <div class="border border-dashed border-gray-300 dark:border-gray-600 rounded-xl w-40 h-32 flex items-center justify-center">
978
+ <button class="text-center p-4">
979
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
980
+ <p class="text-xs text-gray-500">Choose Image</p>
981
+ </button>
982
+ </div>
983
+ </div>
984
+
985
+ <div class="flex-1 min-w-[200px]">
986
+ <div class="mb-4">
987
+ <label class="block text-sm font-medium mb-2 dark:text-gray-300">Color Theme</label>
988
+ <div class="flex space-x-3">
989
+ <div class="w-10 h-10 rounded-full bg-blue-800 border-2 border-blue-600"></div>
990
+ <div class="w-10 h-10 rounded-full bg-emerald-600 border"></div>
991
+ <div class="w-10 h-10 rounded-full bg-indigo-700 border"></div>
992
+ <div class="w-10 h-10 rounded-full bg-amber-500 border"></div>
993
+ </div>
994
+ </div>
995
+
996
+ <div class="mb-4
997
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=wajdi22/buuu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
998
+ </html>