Hugging Face's logo

Spaces:
supportATP
/
gestiontemps
Running

App Files Community
supportATP commited on
Commit
a8df8b8
·
verified ·
1 Parent(s): 468d257

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +505 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gestiontemps
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: gray
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: gestiontemps
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
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,505 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gestion Temps de Travail - Entrepôt</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
12
+ }
13
+ .pulse-animation {
14
+ animation: pulse 2s infinite;
15
+ }
16
+ @keyframes pulse {
17
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
18
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
19
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
20
+ }
21
+ .slide-in {
22
+ animation: slideIn 0.5s forwards;
23
+ }
24
+ @keyframes slideIn {
25
+ from { transform: translateY(20px); opacity: 0; }
26
+ to { transform: translateY(0); opacity: 1; }
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-100 font-sans">
31
+ <!-- Header -->
32
+ <header class="gradient-bg text-white shadow-lg">
33
+ <div class="container mx-auto px-4 py-6">
34
+ <div class="flex justify-between items-center">
35
+ <div class="flex items-center space-x-3">
36
+ <i class="fas fa-warehouse text-3xl"></i>
37
+ <h1 class="text-2xl font-bold">Gestion Temps de Travail</h1>
38
+ </div>
39
+ <div class="flex items-center space-x-4">
40
+ <span id="current-time" class="font-mono text-lg bg-blue-800 px-3 py-1 rounded"></span>
41
+ <button class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition">
42
+ <i class="fas fa-user mr-2"></i>Admin
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </header>
48
+
49
+ <!-- Main Content -->
50
+ <main class="container mx-auto px-4 py-8">
51
+ <!-- Mode Selection -->
52
+ <div class="mb-12 text-center">
53
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Sélectionnez le mode de saisie</h2>
54
+ <div class="flex justify-center space-x-8">
55
+ <div class="mode-card bg-white rounded-xl shadow-lg p-6 w-64 cursor-pointer hover:shadow-xl transition transform hover:-translate-y-1" data-mode="scan">
56
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
57
+ <i class="fas fa-qrcode text-blue-600 text-3xl"></i>
58
+ </div>
59
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Scan QR Code</h3>
60
+ <p class="text-gray-600">Utilisez la scannette sur poste fixe</p>
61
+ </div>
62
+ <div class="mode-card bg-white rounded-xl shadow-lg p-6 w-64 cursor-pointer hover:shadow-xl transition transform hover:-translate-y-1" data-mode="form">
63
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
64
+ <i class="fas fa-mobile-alt text-green-600 text-3xl"></i>
65
+ </div>
66
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Formulaire Mobile</h3>
67
+ <p class="text-gray-600">Accès via QR code sur smartphone</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Scan Mode (Hidden by default) -->
73
+ <div id="scan-mode" class="hidden max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden slide-in">
74
+ <div class="gradient-bg p-6 text-white">
75
+ <div class="flex justify-between items-center">
76
+ <h2 class="text-2xl font-bold"><i class="fas fa-qrcode mr-3"></i>Mode Scan</h2>
77
+ <button class="back-btn bg-white text-blue-600 px-3 py-1 rounded-lg text-sm font-medium hover:bg-blue-50 transition">
78
+ <i class="fas fa-arrow-left mr-1"></i>Retour
79
+ </button>
80
+ </div>
81
+ <p class="mt-2 opacity-90">Scannez votre badge puis le QR code de la tâche</p>
82
+ </div>
83
+
84
+ <div class="p-6">
85
+ <div class="flex flex-col md:flex-row gap-8">
86
+ <!-- Scan Area -->
87
+ <div class="flex-1">
88
+ <div class="bg-gray-100 rounded-lg p-4 mb-6 text-center">
89
+ <div class="p-4 border-2 border-dashed border-gray-300 rounded-lg mb-4">
90
+ <i class="fas fa-barcode text-5xl text-gray-400 mb-3"></i>
91
+ <p class="text-gray-600 font-medium">Zone de scan</p>
92
+ </div>
93
+ <button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center mx-auto">
94
+ <i class="fas fa-camera mr-2"></i>Activer la scannette
95
+ </button>
96
+ </div>
97
+
98
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
99
+ <div class="flex">
100
+ <div class="flex-shrink-0">
101
+ <i class="fas fa-info-circle text-blue-500"></i>
102
+ </div>
103
+ <div class="ml-3">
104
+ <p class="text-sm text-blue-700">
105
+ <span class="font-semibold">Instructions :</span> Scannez d'abord votre badge opérateur, puis scannez le QR code de la tâche. Le système détectera automatiquement s'il s'agit d'un début ou d'une fin de session.
106
+ </p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Current Session Info -->
113
+ <div class="flex-1">
114
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Session en cours</h3>
115
+
116
+ <div class="bg-gray-50 rounded-lg p-4 mb-4">
117
+ <div class="flex items-center mb-3">
118
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
119
+ <i class="fas fa-user text-blue-600"></i>
120
+ </div>
121
+ <div>
122
+ <p class="text-sm text-gray-500">Opérateur</p>
123
+ <p class="font-medium" id="current-operator">Non identifié</p>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="flex items-center mb-3">
128
+ <div class="bg-green-100 p-2 rounded-full mr-3">
129
+ <i class="fas fa-tasks text-green-600"></i>
130
+ </div>
131
+ <div>
132
+ <p class="text-sm text-gray-500">Tâche</p>
133
+ <p class="font-medium" id="current-task">Aucune tâche en cours</p>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="flex items-center">
138
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
139
+ <i class="fas fa-clock text-purple-600"></i>
140
+ </div>
141
+ <div>
142
+ <p class="text-sm text-gray-500">Temps écoulé</p>
143
+ <p class="font-mono font-medium" id="session-timer">00:00:00</p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
149
+ <div class="flex">
150
+ <div class="flex-shrink-0">
151
+ <i class="fas fa-exclamation-triangle text-yellow-500"></i>
152
+ </div>
153
+ <div class="ml-3">
154
+ <p class="text-sm text-yellow-700">
155
+ <span class="font-semibold">Remarque :</span> Toutes les sessions seront automatiquement clôturées à 12h00 et 17h00.
156
+ </p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Form Mode (Hidden by default) -->
166
+ <div id="form-mode" class="hidden max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden slide-in">
167
+ <div class="gradient-bg p-6 text-white">
168
+ <div class="flex justify-between items-center">
169
+ <h2 class="text-2xl font-bold"><i class="fas fa-mobile-alt mr-3"></i>Mode Formulaire</h2>
170
+ <button class="back-btn bg-white text-blue-600 px-3 py-1 rounded-lg text-sm font-medium hover:bg-blue-50 transition">
171
+ <i class="fas fa-arrow-left mr-1"></i>Retour
172
+ </button>
173
+ </div>
174
+ <p class="mt-2 opacity-90">Accédez au formulaire via QR code mobile</p>
175
+ </div>
176
+
177
+ <div class="p-6">
178
+ <div class="flex flex-col md:flex-row gap-8">
179
+ <!-- QR Code Display -->
180
+ <div class="flex-1">
181
+ <div class="bg-gray-100 rounded-lg p-6 mb-6 text-center">
182
+ <div class="p-4 mb-4">
183
+ <div class="bg-white p-4 rounded inline-block">
184
+ <div class="w-48 h-48 bg-gray-200 flex items-center justify-center mx-auto mb-3">
185
+ <i class="fas fa-qrcode text-5xl text-gray-400"></i>
186
+ </div>
187
+ <p class="text-gray-600 text-sm">Exemple de QR code pour la tâche</p>
188
+ </div>
189
+ </div>
190
+ <p class="text-gray-700 mb-4">Scannez ce QR code avec votre appareil mobile pour accéder au formulaire de saisie</p>
191
+ <button class="bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition flex items-center justify-center mx-auto">
192
+ <i class="fas fa-sync-alt mr-2"></i>Générer un nouveau QR code
193
+ </button>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Form Instructions -->
198
+ <div class="flex-1">
199
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Instructions</h3>
200
+
201
+ <div class="space-y-4 mb-6">
202
+ <div class="flex items-start">
203
+ <div class="bg-blue-100 p-2 rounded-full mr-3 mt-1">
204
+ <span class="text-blue-600 font-bold">1</span>
205
+ </div>
206
+ <div>
207
+ <p class="font-medium text-gray-800">Scannez le QR code avec votre smartphone</p>
208
+ <p class="text-sm text-gray-600">Utilisez l'appareil photo ou une application de scan de QR code</p>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="flex items-start">
213
+ <div class="bg-green-100 p-2 rounded-full mr-3 mt-1">
214
+ <span class="text-green-600 font-bold">2</span>
215
+ </div>
216
+ <div>
217
+ <p class="font-medium text-gray-800">Remplissez le formulaire</p>
218
+ <p class="text-sm text-gray-600">Sélectionnez votre nom et la tâche en cours</p>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="flex items-start">
223
+ <div class="bg-purple-100 p-2 rounded-full mr-3 mt-1">
224
+ <span class="text-purple-600 font-bold">3</span>
225
+ </div>
226
+ <div>
227
+ <p class="font-medium text-gray-800">Soumettez pour enregistrer</p>
228
+ <p class="text-sm text-gray-600">Le système détectera automatiquement début/fin de session</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
234
+ <div class="flex">
235
+ <div class="flex-shrink-0">
236
+ <i class="fas fa-info-circle text-blue-500"></i>
237
+ </div>
238
+ <div class="ml-3">
239
+ <p class="text-sm text-blue-700">
240
+ <span class="font-semibold">Conseil :</span> Des QR codes colorés sont affichés dans l'entrepôt pour chaque donneur d'ordre et type de tâche.
241
+ </p>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Dashboard Preview -->
251
+ <div class="mt-16 max-w-6xl mx-auto">
252
+ <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Tableau de bord de suivi</h2>
253
+
254
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
255
+ <div class="gradient-bg p-6 text-white">
256
+ <h3 class="text-xl font-bold"><i class="fas fa-chart-bar mr-3"></i>Aperçu des données</h3>
257
+ </div>
258
+
259
+ <div class="p-6">
260
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
261
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
262
+ <div class="flex justify-between">
263
+ <div>
264
+ <p class="text-sm text-blue-600 font-medium">Opérateurs actifs</p>
265
+ <p class="text-2xl font-bold text-gray-800">24</p>
266
+ </div>
267
+ <div class="bg-blue-100 p-3 rounded-full">
268
+ <i class="fas fa-users text-blue-600"></i>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
274
+ <div class="flex justify-between">
275
+ <div>
276
+ <p class="text-sm text-green-600 font-medium">Tâches en cours</p>
277
+ <p class="text-2xl font-bold text-gray-800">18</p>
278
+ </div>
279
+ <div class="bg-green-100 p-3 rounded-full">
280
+ <i class="fas fa-tasks text-green-600"></i>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
286
+ <div class="flex justify-between">
287
+ <div>
288
+ <p class="text-sm text-purple-600 font-medium">Heures travaillées</p>
289
+ <p class="text-2xl font-bold text-gray-800">127.5</p>
290
+ </div>
291
+ <div class="bg-purple-100 p-3 rounded-full">
292
+ <i class="fas fa-clock text-purple-600"></i>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="overflow-x-auto">
299
+ <table class="min-w-full divide-y divide-gray-200">
300
+ <thead class="bg-gray-50">
301
+ <tr>
302
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Opérateur</th>
303
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tâche</th>
304
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Donneur d'ordre</th>
305
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Début</th>
306
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fin</th>
307
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Durée</th>
308
+ </tr>
309
+ </thead>
310
+ <tbody class="bg-white divide-y divide-gray-200">
311
+ <tr>
312
+ <td class="px-6 py-4 whitespace-nowrap">Jean Dupont</td>
313
+ <td class="px-6 py-4 whitespace-nowrap">Préparation commande</td>
314
+ <td class="px-6 py-4 whitespace-nowrap">Client A</td>
315
+ <td class="px-6 py-4 whitespace-nowrap">08:15</td>
316
+ <td class="px-6 py-4 whitespace-nowrap">10:30</td>
317
+ <td class="px-6 py-4 whitespace-nowrap font-medium">2h15</td>
318
+ </tr>
319
+ <tr>
320
+ <td class="px-6 py-4 whitespace-nowrap">Marie Martin</td>
321
+ <td class="px-6 py-4 whitespace-nowrap">Réception marchandises</td>
322
+ <td class="px-6 py-4 whitespace-nowrap">Fournisseur B</td>
323
+ <td class="px-6 py-4 whitespace-nowrap">09:00</td>
324
+ <td class="px-6 py-4 whitespace-nowrap">12:00</td>
325
+ <td class="px-6 py-4 whitespace-nowrap font-medium">3h00</td>
326
+ </tr>
327
+ <tr>
328
+ <td class="px-6 py-4 whitespace-nowrap">Pierre Lambert</td>
329
+ <td class="px-6 py-4 whitespace-nowrap">Inventaire</td>
330
+ <td class="px-6 py-4 whitespace-nowrap">Interne</td>
331
+ <td class="px-6 py-4 whitespace-nowrap">13:30</td>
332
+ <td class="px-6 py-4 whitespace-nowrap">-</td>
333
+ <td class="px-6 py-4 whitespace-nowrap font-medium text-blue-600">En cours</td>
334
+ </tr>
335
+ </tbody>
336
+ </table>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </main>
342
+
343
+ <!-- Footer -->
344
+ <footer class="bg-gray-800 text-white py-8 mt-12">
345
+ <div class="container mx-auto px-4">
346
+ <div class="flex flex-col md:flex-row justify-between">
347
+ <div class="mb-6 md:mb-0">
348
+ <h3 class="text-lg font-bold mb-4">Gestion Temps de Travail</h3>
349
+ <p class="text-gray-400">Solution de suivi des opérateurs en entrepôt</p>
350
+ </div>
351
+ <div class="grid grid-cols-2 gap-8 md:grid-cols-3">
352
+ <div>
353
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Navigation</h4>
354
+ <ul class="space-y-2">
355
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
356
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tableau de bord</a></li>
357
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Rapports</a></li>
358
+ </ul>
359
+ </div>
360
+ <div>
361
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Support</h4>
362
+ <ul class="space-y-2">
363
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
364
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
365
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
366
+ </ul>
367
+ </div>
368
+ <div>
369
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Légal</h4>
370
+ <ul class="space-y-2">
371
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
372
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions</a></li>
373
+ </ul>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
378
+ <p>© 2023 Gestion Temps de Travail. Tous droits réservés.</p>
379
+ </div>
380
+ </div>
381
+ </footer>
382
+
383
+ <script>
384
+ // Update current time
385
+ function updateTime() {
386
+ const now = new Date();
387
+ const timeString = now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
388
+ document.getElementById('current-time').textContent = timeString;
389
+
390
+ // Check for auto-closing times (12:00 and 17:00)
391
+ const hours = now.getHours();
392
+ const minutes = now.getMinutes();
393
+
394
+ if ((hours === 12 && minutes === 0) || (hours === 17 && minutes === 0)) {
395
+ showAutoCloseNotification();
396
+ }
397
+ }
398
+
399
+ setInterval(updateTime, 1000);
400
+ updateTime();
401
+
402
+ // Mode selection
403
+ const modeCards = document.querySelectorAll('.mode-card');
404
+ const scanMode = document.getElementById('scan-mode');
405
+ const formMode = document.getElementById('form-mode');
406
+ const backButtons = document.querySelectorAll('.back-btn');
407
+
408
+ modeCards.forEach(card => {
409
+ card.addEventListener('click', () => {
410
+ const mode = card.getAttribute('data-mode');
411
+
412
+ // Hide all content
413
+ document.querySelector('main > div:not(.hidden)').classList.add('hidden');
414
+
415
+ // Show selected mode
416
+ if (mode === 'scan') {
417
+ scanMode.classList.remove('hidden');
418
+ startSessionTimer();
419
+ } else {
420
+ formMode.classList.remove('hidden');
421
+ }
422
+ });
423
+ });
424
+
425
+ backButtons.forEach(button => {
426
+ button.addEventListener('click', () => {
427
+ scanMode.classList.add('hidden');
428
+ formMode.classList.add('hidden');
429
+ stopSessionTimer();
430
+ });
431
+ });
432
+
433
+ // Session timer simulation
434
+ let timerInterval;
435
+ let seconds = 0;
436
+
437
+ function startSessionTimer() {
438
+ // Simulate scanning an operator badge
439
+ document.getElementById('current-operator').textContent = "Jean Dupont (ID: 45678)";
440
+ document.getElementById('current-task').textContent = "Préparation commande - Client A";
441
+
442
+ // Start timer
443
+ seconds = 0;
444
+ updateTimerDisplay();
445
+ timerInterval = setInterval(() => {
446
+ seconds++;
447
+ updateTimerDisplay();
448
+ }, 1000);
449
+ }
450
+
451
+ function stopSessionTimer() {
452
+ clearInterval(timerInterval);
453
+ document.getElementById('current-operator').textContent = "Non identifié";
454
+ document.getElementById('current-task').textContent = "Aucune tâche en cours";
455
+ document.getElementById('session-timer').textContent = "00:00:00";
456
+ }
457
+
458
+ function updateTimerDisplay() {
459
+ const hours = Math.floor(seconds / 3600);
460
+ const minutes = Math.floor((seconds % 3600) / 60);
461
+ const secs = seconds % 60;
462
+
463
+ document.getElementById('session-timer').textContent =
464
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
465
+ }
466
+
467
+ // Auto-close notification
468
+ function showAutoCloseNotification() {
469
+ const notification = document.createElement('div');
470
+ notification.className = 'fixed bottom-4 right-4 bg-white shadow-xl rounded-lg p-4 max-w-sm border-l-4 border-red-500 z-50 slide-in';
471
+ notification.innerHTML = `
472
+ <div class="flex">
473
+ <div class="flex-shrink-0">
474
+ <i class="fas fa-clock text-red-500 text-xl mt-1"></i>
475
+ </div>
476
+ <div class="ml-3">
477
+ <h3 class="text-lg font-medium text-gray-900">Session automatiquement clôturée</h3>
478
+ <p class="mt-1 text-sm text-gray-600">Toutes les sessions en cours ont été clôturées comme prévu à ${new Date().getHours()}h00.</p>
479
+ <button class="mt-2 text-sm text-blue-600 font-medium hover:text-blue-500 focus:outline-none">
480
+ Fermer
481
+ </button>
482
+ </div>
483
+ </div>
484
+ `;
485
+
486
+ document.body.appendChild(notification);
487
+
488
+ notification.querySelector('button').addEventListener('click', () => {
489
+ notification.classList.remove('slide-in');
490
+ notification.classList.add('slide-out');
491
+ setTimeout(() => notification.remove(), 500);
492
+ });
493
+
494
+ // Auto-remove after 10 seconds
495
+ setTimeout(() => {
496
+ if (document.body.contains(notification)) {
497
+ notification.classList.remove('slide-in');
498
+ notification.classList.add('slide-out');
499
+ setTimeout(() => notification.remove(), 500);
500
+ }
501
+ }, 10000);
502
+ }
503
+ </script>
504
+ <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=supportATP/gestiontemps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
505
+ </html>