Hugging Face's logo

Spaces:
Cremet
/
appli-oro
Running

App Files Community
Cremet commited on
Commit
3b6f2da
·
verified ·
1 Parent(s): adf5fba

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +783 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Appli Oro
3
- emoji: 📈
4
- colorFrom: red
5
  colorTo: green
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: appli-oro
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: green
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,783 @@
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 Oraux STI2D</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
+ /* Animation pour les notifications */
11
+ @keyframes slideIn {
12
+ from { transform: translateX(100%); }
13
+ to { transform: translateX(0); }
14
+ }
15
+
16
+ .notification {
17
+ animation: slideIn 0.3s ease-out;
18
+ }
19
+
20
+ /* Style personnalisé pour la timeline */
21
+ .timeline-step {
22
+ position: relative;
23
+ padding-left: 2.5rem;
24
+ }
25
+
26
+ .timeline-step:before {
27
+ content: '';
28
+ position: absolute;
29
+ left: 0.75rem;
30
+ top: 0;
31
+ height: 100%;
32
+ width: 2px;
33
+ background: #e5e7eb;
34
+ }
35
+
36
+ .timeline-step:last-child:before {
37
+ height: 50%;
38
+ }
39
+
40
+ .timeline-dot {
41
+ position: absolute;
42
+ left: 0.5rem;
43
+ top: 0.25rem;
44
+ width: 1rem;
45
+ height: 1rem;
46
+ border-radius: 50%;
47
+ background: #3b82f6;
48
+ z-index: 10;
49
+ }
50
+
51
+ /* Effet de profondeur pour les cartes */
52
+ .card-hover {
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .card-hover:hover {
57
+ transform: translateY(-2px);
58
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
59
+ }
60
+
61
+ /* Style pour les étoiles de notation */
62
+ .rating-star {
63
+ cursor: pointer;
64
+ transition: all 0.2s;
65
+ }
66
+
67
+ .rating-star:hover {
68
+ transform: scale(1.2);
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-50 font-sans">
73
+ <!-- Barre de navigation -->
74
+ <nav class="bg-blue-600 text-white shadow-lg">
75
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
76
+ <div class="flex justify-between h-16">
77
+ <div class="flex items-center">
78
+ <div class="flex-shrink-0 flex items-center">
79
+ <i class="fas fa-microphone-alt text-2xl mr-2"></i>
80
+ <span class="text-xl font-bold">OralsTracker</span>
81
+ </div>
82
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
83
+ <a href="#" class="border-blue-500 text-white px-3 py-2 rounded-md text-sm font-medium border-b-2">Tableau de bord</a>
84
+ <a href="#" class="border-transparent text-blue-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Élèves</a>
85
+ <a href="#" class="border-transparent text-blue-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Jurys</a>
86
+ <a href="#" class="border-transparent text-blue-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Planning</a>
87
+ </div>
88
+ </div>
89
+ <div class="hidden md:flex items-center">
90
+ <div class="ml-4 flex items-center md:ml-6">
91
+ <button class="bg-blue-700 p-1 rounded-full text-blue-200 hover:text-white focus:outline-none">
92
+ <i class="fas fa-bell h-6 w-6"></i>
93
+ </button>
94
+ <div class="ml-3 relative">
95
+ <div class="flex items-center">
96
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
97
+ <span class="ml-2 text-sm font-medium">Prof. Dupont</span>
98
+ <i class="fas fa-chevron-down ml-1 text-xs"></i>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ <div class="-mr-2 flex items-center md:hidden">
104
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-blue-700 focus:outline-none">
105
+ <i class="fas fa-bars h-6 w-6"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </nav>
111
+
112
+ <!-- Contenu principal -->
113
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
114
+ <!-- En-tête -->
115
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
116
+ <div>
117
+ <h1 class="text-3xl font-bold text-gray-900">Gestion des oraux STI2D</h1>
118
+ <p class="mt-2 text-sm text-gray-600">Suivi des épreuves orales pour les élèves de première</p>
119
+ </div>
120
+ <div class="mt-4 md:mt-0 flex space-x-3">
121
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
122
+ <i class="fas fa-plus mr-2"></i> Nouvel oral
123
+ </button>
124
+ <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
125
+ <i class="fas fa-download mr-2"></i> Exporter
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Statistiques -->
131
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
132
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover">
133
+ <div class="px-4 py-5 sm:p-6">
134
+ <div class="flex items-center">
135
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
136
+ <i class="fas fa-users text-white"></i>
137
+ </div>
138
+ <div class="ml-5 w-0 flex-1">
139
+ <dt class="text-sm font-medium text-gray-500 truncate">Élèves inscrits</dt>
140
+ <dd class="flex items-baseline">
141
+ <div class="text-2xl font-semibold text-gray-900">24</div>
142
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
143
+ <i class="fas fa-arrow-up mr-1 text-xs"></i> 12%
144
+ </div>
145
+ </dd>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover">
152
+ <div class="px-4 py-5 sm:p-6">
153
+ <div class="flex items-center">
154
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
155
+ <i class="fas fa-check-circle text-white"></i>
156
+ </div>
157
+ <div class="ml-5 w-0 flex-1">
158
+ <dt class="text-sm font-medium text-gray-500 truncate">Oraux terminés</dt>
159
+ <dd class="flex items-baseline">
160
+ <div class="text-2xl font-semibold text-gray-900">8</div>
161
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
162
+ <i class="fas fa-arrow-up mr-1 text-xs"></i> 33%
163
+ </div>
164
+ </dd>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover">
171
+ <div class="px-4 py-5 sm:p-6">
172
+ <div class="flex items-center">
173
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
174
+ <i class="fas fa-clock text-white"></i>
175
+ </div>
176
+ <div class="ml-5 w-0 flex-1">
177
+ <dt class="text-sm font-medium text-gray-500 truncate">En attente</dt>
178
+ <dd class="flex items-baseline">
179
+ <div class="text-2xl font-semibold text-gray-900">12</div>
180
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
181
+ <i class="fas fa-arrow-down mr-1 text-xs"></i> 8%
182
+ </div>
183
+ </dd>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="bg-white overflow-hidden shadow rounded-lg card-hover">
190
+ <div class="px-4 py-5 sm:p-6">
191
+ <div class="flex items-center">
192
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
193
+ <i class="fas fa-chart-line text-white"></i>
194
+ </div>
195
+ <div class="ml-5 w-0 flex-1">
196
+ <dt class="text-sm font-medium text-gray-500 truncate">Moyenne générale</dt>
197
+ <dd class="flex items-baseline">
198
+ <div class="text-2xl font-semibold text-gray-900">13.2</div>
199
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
200
+ <i class="fas fa-arrow-up mr-1 text-xs"></i> 2.5%
201
+ </div>
202
+ </dd>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Section principale -->
210
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
211
+ <!-- Liste des élèves -->
212
+ <div class="lg:col-span-2">
213
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
214
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
215
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Liste des élèves</h3>
216
+ <p class="mt-1 text-sm text-gray-500">Cliquez sur un élève pour voir les détails et évaluer</p>
217
+ </div>
218
+ <div class="bg-white overflow-y-auto" style="max-height: 500px;">
219
+ <table class="min-w-full divide-y divide-gray-200">
220
+ <thead class="bg-gray-50 sticky top-0">
221
+ <tr>
222
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
223
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spécialité</th>
224
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
225
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</th>
226
+ <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
227
+ </tr>
228
+ </thead>
229
+ <tbody class="bg-white divide-y divide-gray-200">
230
+ <!-- Élève 1 -->
231
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(1)">
232
+ <td class="px-6 py-4 whitespace-nowrap">
233
+ <div class="flex items-center">
234
+ <div class="flex-shrink-0 h-10 w-10">
235
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
236
+ </div>
237
+ <div class="ml-4">
238
+ <div class="text-sm font-medium text-gray-900">Martin Dubois</div>
239
+ <div class="text-sm text-gray-500">1ère STI2D</div>
240
+ </div>
241
+ </div>
242
+ </td>
243
+ <td class="px-6 py-4 whitespace-nowrap">
244
+ <div class="text-sm text-gray-900">ITEC</div>
245
+ </td>
246
+ <td class="px-6 py-4 whitespace-nowrap">
247
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Terminé</span>
248
+ </td>
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
250
+ <span class="font-bold text-gray-900">15</span>/20
251
+ </td>
252
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
253
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
254
+ <button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button>
255
+ </td>
256
+ </tr>
257
+
258
+ <!-- Élève 2 -->
259
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(2)">
260
+ <td class="px-6 py-4 whitespace-nowrap">
261
+ <div class="flex items-center">
262
+ <div class="flex-shrink-0 h-10 w-10">
263
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
264
+ </div>
265
+ <div class="ml-4">
266
+ <div class="text-sm font-medium text-gray-900">Sophie Lambert</div>
267
+ <div class="text-sm text-gray-500">1ère STI2D</div>
268
+ </div>
269
+ </div>
270
+ </td>
271
+ <td class="px-6 py-4 whitespace-nowrap">
272
+ <div class="text-sm text-gray-900">SIN</div>
273
+ </td>
274
+ <td class="px-6 py-4 whitespace-nowrap">
275
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En cours</span>
276
+ </td>
277
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
278
+ <span class="font-bold text-gray-900">-</span>/20
279
+ </td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
281
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
282
+ <button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button>
283
+ </td>
284
+ </tr>
285
+
286
+ <!-- Élève 3 -->
287
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(3)">
288
+ <td class="px-6 py-4 whitespace-nowrap">
289
+ <div class="flex items-center">
290
+ <div class="flex-shrink-0 h-10 w-10">
291
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
292
+ </div>
293
+ <div class="ml-4">
294
+ <div class="text-sm font-medium text-gray-900">Thomas Moreau</div>
295
+ <div class="text-sm text-gray-500">1ère STI2D</div>
296
+ </div>
297
+ </div>
298
+ </td>
299
+ <td class="px-6 py-4 whitespace-nowrap">
300
+ <div class="text-sm text-gray-900">EE</div>
301
+ </td>
302
+ <td class="px-6 py-4 whitespace-nowrap">
303
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">À programmer</span>
304
+ </td>
305
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
306
+ <span class="font-bold text-gray-900">-</span>/20
307
+ </td>
308
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
309
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
310
+ <button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button>
311
+ </td>
312
+ </tr>
313
+
314
+ <!-- Élève 4 -->
315
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(4)">
316
+ <td class="px-6 py-4 whitespace-nowrap">
317
+ <div class="flex items-center">
318
+ <div class="flex-shrink-0 h-10 w-10">
319
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="">
320
+ </div>
321
+ <div class="ml-4">
322
+ <div class="text-sm font-medium text-gray-900">Emma Rousseau</div>
323
+ <div class="text-sm text-gray-500">1ère STI2D</div>
324
+ </div>
325
+ </div>
326
+ </td>
327
+ <td class="px-6 py-4 whitespace-nowrap">
328
+ <div class="text-sm text-gray-900">AC</div>
329
+ </td>
330
+ <td class="px-6 py-4 whitespace-nowrap">
331
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Terminé</span>
332
+ </td>
333
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
334
+ <span class="font-bold text-gray-900">12</span>/20
335
+ </td>
336
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
337
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
338
+ <button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button>
339
+ </td>
340
+ </tr>
341
+
342
+ <!-- Élève 5 -->
343
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(5)">
344
+ <td class="px-6 py-4 whitespace-nowrap">
345
+ <div class="flex items-center">
346
+ <div class="flex-shrink-0 h-10 w-10">
347
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="">
348
+ </div>
349
+ <div class="ml-4">
350
+ <div class="text-sm font-medium text-gray-900">Lucas Bernard</div>
351
+ <div class="text-sm text-gray-500">1ère STI2D</div>
352
+ </div>
353
+ </div>
354
+ </td>
355
+ <td class="px-6 py-4 whitespace-nowrap">
356
+ <div class="text-sm text-gray-900">ITEC</div>
357
+ </td>
358
+ <td class="px-6 py-4 whitespace-nowrap">
359
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Programmé</span>
360
+ </td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
362
+ <span class="font-bold text-gray-900">-</span>/20
363
+ </td>
364
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
365
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
366
+ <button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button>
367
+ </td>
368
+ </tr>
369
+ </tbody>
370
+ </table>
371
+ </div>
372
+ <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
373
+ <div class="flex-1 flex justify-between sm:hidden">
374
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Précédent</a>
375
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Suivant</a>
376
+ </div>
377
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
378
+ <div>
379
+ <p class="text-sm text-gray-700">
380
+ Affichage de
381
+ <span class="font-medium">1</span>
382
+ à
383
+ <span class="font-medium">5</span>
384
+ sur
385
+ <span class="font-medium">24</span>
386
+ élèves
387
+ </p>
388
+ </div>
389
+ <div>
390
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
391
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
392
+ <span class="sr-only">Précédent</span>
393
+ <i class="fas fa-chevron-left"></i>
394
+ </a>
395
+ <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
396
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
397
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
398
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
399
+ <span class="sr-only">Suivant</span>
400
+ <i class="fas fa-chevron-right"></i>
401
+ </a>
402
+ </nav>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Détails de l'élève sélectionné -->
410
+ <div id="studentDetails" class="hidden lg:block">
411
+ <div class="bg-white shadow rounded-lg sticky top-4">
412
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
413
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Détails de l'élève</h3>
414
+ <p class="mt-1 text-sm text-gray-500">Sélectionnez un élève pour voir ses informations</p>
415
+ </div>
416
+ <div class="px-4 py-5 sm:p-6">
417
+ <div class="text-center">
418
+ <img class="mx-auto h-24 w-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
419
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Martin Dubois</h3>
420
+ <p class="text-sm text-gray-500">1ère STI2D - Spécialité ITEC</p>
421
+ </div>
422
+
423
+ <div class="mt-6">
424
+ <h4 class="text-sm font-medium text-gray-500 mb-2">Informations</h4>
425
+ <ul class="space-y-2">
426
+ <li class="flex items-center">
427
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
428
+ <span class="text-sm text-gray-600">[email protected]</span>
429
+ </li>
430
+ <li class="flex items-center">
431
+ <i class="fas fa-phone text-gray-400 mr-2"></i>
432
+ <span class="text-sm text-gray-600">06 12 34 56 78</span>
433
+ </li>
434
+ <li class="flex items-center">
435
+ <i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
436
+ <span class="text-sm text-gray-600">Né le 15/03/2006</span>
437
+ </li>
438
+ </ul>
439
+ </div>
440
+
441
+ <div class="mt-6">
442
+ <h4 class="text-sm font-medium text-gray-500 mb-2">Détails de l'oral</h4>
443
+ <div class="space-y-4">
444
+ <div>
445
+ <p class="text-xs text-gray-500">Date</p>
446
+ <p class="text-sm font-medium">12/05/2023 - 14h30</p>
447
+ </div>
448
+ <div>
449
+ <p class="text-xs text-gray-500">Salle</p>
450
+ <p class="text-sm font-medium">Bâtiment B - Salle 203</p>
451
+ </div>
452
+ <div>
453
+ <p class="text-xs text-gray-500">Jury</p>
454
+ <p class="text-sm font-medium">M. Durand, Mme. Leroy</p>
455
+ </div>
456
+ <div>
457
+ <p class="text-xs text-gray-500">Thème</p>
458
+ <p class="text-sm font-medium">Projet robotique autonome</p>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="mt-6">
464
+ <h4 class="text-sm font-medium text-gray-500 mb-2">Évaluation</h4>
465
+ <div class="flex items-center justify-between">
466
+ <div>
467
+ <p class="text-xs text-gray-500">Note finale</p>
468
+ <p class="text-2xl font-bold text-blue-600">15/20</p>
469
+ </div>
470
+ <div class="w-24 h-24">
471
+ <canvas id="noteChart"></canvas>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <!-- Section secondaire - Grille d'évaluation -->
481
+ <div class="mt-8">
482
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
483
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
484
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Grille d'évaluation</h3>
485
+ <p class="mt-1 text-sm text-gray-500">Évaluez les compétences de l'élève selon les critères suivants</p>
486
+ </div>
487
+ <div class="px-4 py-5 sm:p-6">
488
+ <div class="overflow-x-auto">
489
+ <table class="min-w-full divide-y divide-gray-200">
490
+ <thead class="bg-gray-50">
491
+ <tr>
492
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Critères</th>
493
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
494
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pondération</th>
495
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Évaluation</th>
496
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</th>
497
+ </tr>
498
+ </thead>
499
+ <tbody class="bg-white divide-y divide-gray-200">
500
+ <!-- Critère 1 -->
501
+ <tr>
502
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Expression orale</td>
503
+ <td class="px-6 py-4 text-sm text-gray-500">Clarté, fluidité, vocabulaire technique</td>
504
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20%</td>
505
+ <td class="px-6 py-4 whitespace-nowrap">
506
+ <div class="flex rating-stars" data-criteria="expression">
507
+ <i class="fas fa-star rating-star text-yellow-400" data-value="1"></i>
508
+ <i class="fas fa-star rating-star text-yellow-400" data-value="2"></i>
509
+ <i class="fas fa-star rating-star text-yellow-400" data-value="3"></i>
510
+ <i class="fas fa-star rating-star text-yellow-400" data-value="4"></i>
511
+ <i class="fas fa-star rating-star text-gray-300" data-value="5"></i>
512
+ </div>
513
+ </td>
514
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4/5</td>
515
+ </tr>
516
+
517
+ <!-- Critère 2 -->
518
+ <tr>
519
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Maîtrise technique</td>
520
+ <td class="px-6 py-4 text-sm text-gray-500">Connaissances, précision des explications</td>
521
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30%</td>
522
+ <td class="px-6 py-4 whitespace-nowrap">
523
+ <div class="flex rating-stars" data-criteria="technique">
524
+ <i class="fas fa-star rating-star text-yellow-400" data-value="1"></i>
525
+ <i class="fas fa-star rating-star text-yellow-400" data-value="2"></i>
526
+ <i class="fas fa-star rating-star text-yellow-400" data-value="3"></i>
527
+ <i class="fas fa-star rating-star text-gray-300" data-value="4"></i>
528
+ <i class="fas fa-star rating-star text-gray-300" data-value="5"></i>
529
+ </div>
530
+ </td>
531
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3/5</td>
532
+ </tr>
533
+
534
+ <!-- Critère 3 -->
535
+ <tr>
536
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Réponses aux questions</td>
537
+ <td class="px-6 py-4 text-sm text-gray-500">Pertinence, rapidité, argumentation</td>
538
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25%</td>
539
+ <td class="px-6 py-4 whitespace-nowrap">
540
+ <div class="flex rating-stars" data-criteria="reponses">
541
+ <i class="fas fa-star rating-star text-yellow-400" data-value="1"></i>
542
+ <i class="fas fa-star rating-star text-yellow-400" data-value="2"></i>
543
+ <i class="fas fa-star rating-star text-yellow-400" data-value="3"></i>
544
+ <i class="fas fa-star rating-star text-yellow-400" data-value="4"></i>
545
+ <i class="fas fa-star rating-star text-gray-300" data-value="5"></i>
546
+ </div>
547
+ </td>
548
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4/5</td>
549
+ </tr>
550
+
551
+ <!-- Critère 4 -->
552
+ <tr>
553
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Structure de la présentation</td>
554
+ <td class="px-6 py-4 text-sm text-gray-500">Organisation, progression logique</td>
555
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15%</td>
556
+ <td class="px-6 py-4 whitespace-nowrap">
557
+ <div class="flex rating-stars" data-criteria="structure">
558
+ <i class="fas fa-star rating-star text-yellow-400" data-value="1"></i>
559
+ <i class="fas fa-star rating-star text-yellow-400" data-value="2"></i>
560
+ <i class="fas fa-star rating-star text-yellow-400" data-value="3"></i>
561
+ <i class="fas fa-star rating-star text-yellow-400" data-value="4"></i>
562
+ <i class="fas fa-star rating-star text-yellow-400" data-value="5"></i>
563
+ </div>
564
+ </td>
565
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5/5</td>
566
+ </tr>
567
+
568
+ <!-- Critère 5 -->
569
+ <tr>
570
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Support visuel</td>
571
+ <td class="px-6 py-4 text-sm text-gray-500">Qualité, pertinence, originalité</td>
572
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10%</td>
573
+ <td class="px-6 py-4 whitespace-nowrap">
574
+ <div class="flex rating-stars" data-criteria="support">
575
+ <i class="fas fa-star rating-star text-yellow-400" data-value="1"></i>
576
+ <i class="fas fa-star rating-star text-yellow-400" data-value="2"></i>
577
+ <i class="fas fa-star rating-star text-yellow-400" data-value="3"></i>
578
+ <i class="fas fa-star rating-star text-gray-300" data-value="4"></i>
579
+ <i class="fas fa-star rating-star text-gray-300" data-value="5"></i>
580
+ </div>
581
+ </td>
582
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3/5</td>
583
+ </tr>
584
+ </tbody>
585
+ </table>
586
+ </div>
587
+
588
+ <div class="mt-6">
589
+ <label for="commentaires" class="block text-sm font-medium text-gray-700">Commentaires généraux</label>
590
+ <div class="mt-1">
591
+ <textarea id="commentaires" name="commentaires" rows="3" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Ajoutez vos commentaires sur la prestation..."></textarea>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="mt-6 flex justify-between items-center">
596
+ <div>
597
+ <p class="text-sm text-gray-500">Note finale calculée</p>
598
+ <p class="text-2xl font-bold text-blue-600">16.5/20</p>
599
+ </div>
600
+ <div class="flex space-x-3">
601
+ <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
602
+ <i class="fas fa-save mr-2"></i> Enregistrer le brouillon
603
+ </button>
604
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
605
+ <i class="fas fa-check mr-2"></i> Valider l'évaluation
606
+ </button>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </main>
613
+
614
+ <!-- Pied de page -->
615
+ <footer class="bg-white mt-12 border-t border-gray-200">
616
+ <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
617
+ <div class="flex flex-col md:flex-row justify-between items-center">
618
+ <div class="flex items-center">
619
+ <i class="fas fa-microphone-alt text-blue-600 text-xl mr-2"></i>
620
+ <span class="text-lg font-bold text-gray-900">OralsTracker</span>
621
+ </div>
622
+ <div class="mt-4 md:mt-0">
623
+ <p class="text-center text-sm text-gray-500">
624
+ &copy; 2023 Lycée STI2D - Tous droits réservés.
625
+ </p>
626
+ </div>
627
+ <div class="mt-4 md:mt-0 flex space-x-6">
628
+ <a href="#" class="text-gray-400 hover:text-gray-500">
629
+ <i class="fab fa-twitter"></i>
630
+ </a>
631
+ <a href="#" class="text-gray-400 hover:text-gray-500">
632
+ <i class="fab fa-facebook"></i>
633
+ </a>
634
+ <a href="#" class="text-gray-400 hover:text-gray-500">
635
+ <i class="fab fa-instagram"></i>
636
+ </a>
637
+ <a href="#" class="text-gray-400 hover:text-gray-500">
638
+ <i class="fab fa-github"></i>
639
+ </a>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </footer>
644
+
645
+ <!-- Scripts JavaScript -->
646
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
647
+ <script>
648
+ // Afficher les détails d'un élève
649
+ function showStudentDetails(studentId) {
650
+ document.getElementById('studentDetails').classList.remove('hidden');
651
+
652
+ // Ici, vous feriez normalement une requête AJAX pour récupérer les données de l'élève
653
+ // Pour cet exemple, nous utilisons des données statiques
654
+
655
+ // Mise à jour du graphique de note
656
+ updateNoteChart();
657
+
658
+ // Notification de succès
659
+ showNotification('Détails de l\'élève chargés avec succès', 'success');
660
+ }
661
+
662
+ // Mettre à jour le graphique de note
663
+ function updateNoteChart() {
664
+ const ctx = document.getElementById('noteChart').getContext('2d');
665
+
666
+ if (window.noteChart) {
667
+ window.noteChart.destroy();
668
+ }
669
+
670
+ window.noteChart = new Chart(ctx, {
671
+ type: 'doughnut',
672
+ data: {
673
+ labels: ['Expression', 'Technique', 'Réponses', 'Structure', 'Support'],
674
+ datasets: [{
675
+ data: [4, 3, 4, 5, 3],
676
+ backgroundColor: [
677
+ '#10B981',
678
+ '#3B82F6',
679
+ '#F59E0B',
680
+ '#8B5CF6',
681
+ '#EC4899'
682
+ ],
683
+ borderWidth: 0
684
+ }]
685
+ },
686
+ options: {
687
+ cutout: '70%',
688
+ plugins: {
689
+ legend: {
690
+ display: false
691
+ }
692
+ }
693
+ }
694
+ });
695
+ }
696
+
697
+ // Afficher une notification
698
+ function showNotification(message, type) {
699
+ const types = {
700
+ 'success': 'bg-green-100 border-green-500 text-green-700',
701
+ 'error': 'bg-red-100 border-red-500 text-red-700',
702
+ 'warning': 'bg-yellow-100 border-yellow-500 text-yellow-700',
703
+ 'info': 'bg-blue-100 border-blue-500 text-blue-700'
704
+ };
705
+
706
+ const notification = document.createElement('div');
707
+ notification.className = `notification fixed bottom-4 right-4 border-l-4 p-4 max-w-sm rounded-md shadow-md ${types[type]}`;
708
+ notification.innerHTML = `
709
+ <div class="flex items-center">
710
+ <div class="flex-shrink-0">
711
+ ${type === 'success' ? '<i class="fas fa-check-circle text-green-500"></i>' : ''}
712
+ ${type === 'error' ? '<i class="fas fa-exclamation-circle text-red-500"></i>' : ''}
713
+ ${type === 'warning' ? '<i class="fas fa-exclamation-triangle text-yellow-500"></i>' : ''}
714
+ ${type === 'info' ? '<i class="fas fa-info-circle text-blue-500"></i>' : ''}
715
+ </div>
716
+ <div class="ml-3">
717
+ <p class="text-sm font-medium">${message}</p>
718
+ </div>
719
+ <div class="ml-auto pl-3">
720
+ <button onclick="this.parentElement.parentElement.parentElement.remove()" class="focus:outline-none">
721
+ <i class="fas fa-times"></i>
722
+ </button>
723
+ </div>
724
+ </div>
725
+ `;
726
+
727
+ document.body.appendChild(notification);
728
+
729
+ setTimeout(() => {
730
+ notification.remove();
731
+ }, 5000);
732
+ }
733
+
734
+ // Gestion des étoiles de notation
735
+ document.addEventListener('DOMContentLoaded', function() {
736
+ // Initialiser le graphique
737
+ updateNoteChart();
738
+
739
+ // Simuler un clic sur le premier élève
740
+ setTimeout(() => {
741
+ showStudentDetails(1);
742
+ }, 500);
743
+
744
+ // Gestion des clics sur les étoiles
745
+ document.querySelectorAll('.rating-star').forEach(star => {
746
+ star.addEventListener('click', function() {
747
+ const value = parseInt(this.getAttribute('data-value'));
748
+ const container = this.closest('.rating-stars');
749
+ const criteria = container.getAttribute('data-criteria');
750
+
751
+ // Mettre à jour les étoiles
752
+ const stars = container.querySelectorAll('.rating-star');
753
+ stars.forEach((s, index) => {
754
+ if (index < value) {
755
+ s.classList.remove('text-gray-300');
756
+ s.classList.add('text-yellow-400');
757
+ } else {
758
+ s.classList.remove('text-yellow-400');
759
+ s.classList.add('text-gray-300');
760
+ }
761
+ });
762
+
763
+ // Mettre à jour la note affichée
764
+ const noteCell = this.closest('tr').querySelector('td:last-child');
765
+ noteCell.textContent = `${value}/5`;
766
+
767
+ // Recalculer la note finale (simplifié)
768
+ const notes = Array.from(document.querySelectorAll('tbody tr td:last-child')).map(td => {
769
+ return parseInt(td.textContent);
770
+ });
771
+ const moyenne = (notes.reduce((a, b) => a + b, 0) / notes.length) * 4;
772
+ document.querySelector('div.justify-between p.text-2xl').textContent = `${moyenne.toFixed(1)}/20`;
773
+
774
+ // Mettre à jour le graphique
775
+ updateNoteChart();
776
+
777
+ showNotification('Évaluation mise à jour', 'success');
778
+ });
779
+ });
780
+ });
781
+ </script>
782
+ <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=Cremet/appli-oro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
783
+ </html>