Hugging Face's logo

Spaces:
elsecond
/
gesco
Running

App Files Community
elsecond commited on
Commit
7ea54ad
·
verified ·
1 Parent(s): 67d4bf1

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +640 -38
index.html CHANGED
@@ -1,41 +1,643 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=elsecond/gesco" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </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>Système de Gestion Scolaire - RDC</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, #1e3a8a 0%, #1e40af 100%);
12
+ }
13
+ .sidebar-item:hover {
14
+ background-color: rgba(255, 255, 255, 0.1);
15
+ transform: translateX(5px);
16
+ transition: all 0.3s ease;
17
+ }
18
+ .dashboard-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
21
+ transition: all 0.3s ease;
22
+ }
23
+ .chart-container {
24
+ height: 300px;
25
+ }
26
+ .notification-badge {
27
+ position: absolute;
28
+ top: -5px;
29
+ right: -5px;
30
+ }
31
+ .active-tab {
32
+ border-bottom: 3px solid #3b82f6;
33
+ font-weight: 600;
34
+ }
35
  </style>
36
+ </head>
37
+ <body class="bg-gray-100 font-sans">
38
+ <div class="flex h-screen overflow-hidden">
39
+ <!-- Sidebar -->
40
+ <div class="hidden md:flex md:flex-shrink-0">
41
+ <div class="flex flex-col w-64 gradient-bg text-white">
42
+ <div class="flex items-center justify-center h-16 px-4 border-b border-blue-800">
43
+ <div class="flex items-center">
44
+ <i class="fas fa-graduation-cap text-2xl mr-2 text-blue-300"></i>
45
+ <span class="text-xl font-bold">EduRDC</span>
46
+ </div>
47
+ </div>
48
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
49
+ <!-- User Profile -->
50
+ <div class="flex items-center mb-8 p-2 rounded-lg bg-blue-900 bg-opacity-50">
51
+ <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Admin">
52
+ <div class="ml-3">
53
+ <p class="text-sm font-medium">Marie Kabasele</p>
54
+ <p class="text-xs text-blue-200">Administrateur</p>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Navigation -->
59
+ <nav class="flex-1 space-y-2">
60
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white bg-blue-900 bg-opacity-30">
61
+ <i class="fas fa-tachometer-alt mr-3 text-blue-300"></i>
62
+ Tableau de bord
63
+ </a>
64
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white">
65
+ <i class="fas fa-user-graduate mr-3 text-blue-300"></i>
66
+ Élèves
67
+ </a>
68
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white">
69
+ <i class="fas fa-chalkboard-teacher mr-3 text-blue-300"></i>
70
+ Enseignants
71
+ </a>
72
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white">
73
+ <i class="fas fa-book mr-3 text-blue-300"></i>
74
+ Notes & Bilans
75
+ </a>
76
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white">
77
+ <i class="fas fa-money-bill-wave mr-3 text-blue-300"></i>
78
+ Finances
79
+ </a>
80
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white">
81
+ <i class="fas fa-chart-bar mr-3 text-blue-300"></i>
82
+ Statistiques
83
+ </a>
84
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white">
85
+ <i class="fas fa-envelope mr-3 text-blue-300"></i>
86
+ Messagerie
87
+ </a>
88
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white">
89
+ <i class="fas fa-cog mr-3 text-blue-300"></i>
90
+ Paramètres
91
+ </a>
92
+ </nav>
93
+ </div>
94
+ <div class="p-4 border-t border-blue-800">
95
+ <button class="flex items-center justify-center w-full px-4 py-2 text-sm text-white bg-blue-900 rounded-lg hover:bg-blue-800">
96
+ <i class="fas fa-sign-out-alt mr-2"></i>
97
+ Déconnexion
98
+ </button>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Main Content -->
104
+ <div class="flex flex-col flex-1 overflow-hidden">
105
+ <!-- Top Navigation -->
106
+ <header class="bg-white shadow-sm z-10">
107
+ <div class="flex items-center justify-between px-4 py-3 sm:px-6">
108
+ <!-- Mobile menu button -->
109
+ <div class="md:hidden">
110
+ <button class="text-gray-500 hover:text-gray-600 focus:outline-none">
111
+ <i class="fas fa-bars text-xl"></i>
112
+ </button>
113
+ </div>
114
+
115
+ <!-- Search bar -->
116
+ <div class="flex-1 max-w-md mx-4">
117
+ <div class="relative">
118
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
119
+ <i class="fas fa-search text-gray-400"></i>
120
+ </div>
121
+ <input class="block w-full py-2 pl-10 pr-3 text-sm bg-gray-100 border border-transparent rounded-md focus:bg-white focus:border-blue-500 focus:ring-blue-500" placeholder="Rechercher...">
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Right side icons -->
126
+ <div class="flex items-center space-x-4">
127
+ <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 hover:bg-gray-100 focus:outline-none relative">
128
+ <i class="fas fa-bell text-xl"></i>
129
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
130
+ </button>
131
+ <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 hover:bg-gray-100 focus:outline-none">
132
+ <i class="fas fa-question-circle text-xl"></i>
133
+ </button>
134
+ <div class="relative">
135
+ <button class="flex items-center text-sm text-gray-700 rounded-full focus:outline-none">
136
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Admin">
137
+ </button>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </header>
142
+
143
+ <!-- Main Content Area -->
144
+ <main class="flex-1 overflow-y-auto p-4 sm:p-6 bg-gray-50">
145
+ <div class="max-w-7xl mx-auto">
146
+ <!-- Page Header -->
147
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
148
+ <div>
149
+ <h1 class="text-2xl font-bold text-gray-900">Tableau de bord</h1>
150
+ <p class="text-sm text-gray-500">Bienvenue dans le système de gestion scolaire EduRDC</p>
151
+ </div>
152
+ <div class="mt-4 sm:mt-0">
153
+ <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 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
154
+ <i class="fas fa-plus mr-2"></i>
155
+ Nouvelle inscription
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Stats Cards -->
161
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
162
+ <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg">
163
+ <div class="px-4 py-5 sm:p-6">
164
+ <div class="flex items-center">
165
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
166
+ <i class="fas fa-user-graduate text-white text-xl"></i>
167
+ </div>
168
+ <div class="ml-5 w-0 flex-1">
169
+ <dt class="text-sm font-medium text-gray-500 truncate">
170
+ Élèves inscrits
171
+ </dt>
172
+ <dd class="flex items-baseline">
173
+ <div class="text-2xl font-semibold text-gray-900">
174
+ 1,248
175
+ </div>
176
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
177
+ <i class="fas fa-arrow-up text-xs"></i>
178
+ <span class="sr-only">Increased by</span>
179
+ 12%
180
+ </div>
181
+ </dd>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg">
188
+ <div class="px-4 py-5 sm:p-6">
189
+ <div class="flex items-center">
190
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
191
+ <i class="fas fa-chalkboard-teacher text-white text-xl"></i>
192
+ </div>
193
+ <div class="ml-5 w-0 flex-1">
194
+ <dt class="text-sm font-medium text-gray-500 truncate">
195
+ Enseignants
196
+ </dt>
197
+ <dd class="flex items-baseline">
198
+ <div class="text-2xl font-semibold text-gray-900">
199
+ 58
200
+ </div>
201
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
202
+ <i class="fas fa-arrow-up text-xs"></i>
203
+ <span class="sr-only">Increased by</span>
204
+ 5%
205
+ </div>
206
+ </dd>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg">
213
+ <div class="px-4 py-5 sm:p-6">
214
+ <div class="flex items-center">
215
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
216
+ <i class="fas fa-money-bill-wave text-white text-xl"></i>
217
+ </div>
218
+ <div class="ml-5 w-0 flex-1">
219
+ <dt class="text-sm font-medium text-gray-500 truncate">
220
+ Recettes mensuelles
221
+ </dt>
222
+ <dd class="flex items-baseline">
223
+ <div class="text-2xl font-semibold text-gray-900">
224
+ 24,750,000 FCFA
225
+ </div>
226
+ </dd>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg">
233
+ <div class="px-4 py-5 sm:p-6">
234
+ <div class="flex items-center">
235
+ <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
236
+ <i class="fas fa-user-times text-white text-xl"></i>
237
+ </div>
238
+ <div class="ml-5 w-0 flex-1">
239
+ <dt class="text-sm font-medium text-gray-500 truncate">
240
+ Taux d'absentéisme
241
+ </dt>
242
+ <dd class="flex items-baseline">
243
+ <div class="text-2xl font-semibold text-gray-900">
244
+ 8.2%
245
+ </div>
246
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
247
+ <i class="fas fa-arrow-up text-xs"></i>
248
+ <span class="sr-only">Increased by</span>
249
+ 2.1%
250
+ </div>
251
+ </dd>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Charts and Tables -->
259
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
260
+ <!-- Student Distribution Chart -->
261
+ <div class="bg-white shadow rounded-lg p-6 lg:col-span-2">
262
+ <div class="flex items-center justify-between mb-4">
263
+ <h3 class="text-lg font-medium text-gray-900">Répartition des élèves par niveau</h3>
264
+ <div class="relative">
265
+ <select class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:bg-white focus:border-blue-500 text-sm">
266
+ <option>Année scolaire 2023-2024</option>
267
+ <option>Année scolaire 2022-2023</option>
268
+ </select>
269
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
270
+ <i class="fas fa-chevron-down text-xs"></i>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ <div class="chart-container">
275
+ <canvas id="studentDistributionChart"></canvas>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Recent Activities -->
280
+ <div class="bg-white shadow rounded-lg overflow-hidden">
281
+ <div class="px-6 py-5 border-b border-gray-200">
282
+ <h3 class="text-lg font-medium text-gray-900">Activités récentes</h3>
283
+ </div>
284
+ <div class="divide-y divide-gray-200">
285
+ <div class="px-6 py-4">
286
+ <div class="flex items-start">
287
+ <div class="flex-shrink-0">
288
+ <i class="fas fa-user-plus text-blue-500"></i>
289
+ </div>
290
+ <div class="ml-3">
291
+ <p class="text-sm font-medium text-gray-900">Nouvelle inscription</p>
292
+ <p class="text-sm text-gray-500">Jean Kabasele en 6ème A</p>
293
+ <p class="text-xs text-gray-400 mt-1">Il y a 2 heures</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <div class="px-6 py-4">
298
+ <div class="flex items-start">
299
+ <div class="flex-shrink-0">
300
+ <i class="fas fa-money-bill-wave text-green-500"></i>
301
+ </div>
302
+ <div class="ml-3">
303
+ <p class="text-sm font-medium text-gray-900">Paiement effectué</p>
304
+ <p class="text-sm text-gray-500">Famille Mbayo - 150,000 FCFA</p>
305
+ <p class="text-xs text-gray-400 mt-1">Il y a 5 heures</p>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ <div class="px-6 py-4">
310
+ <div class="flex items-start">
311
+ <div class="flex-shrink-0">
312
+ <i class="fas fa-book text-purple-500"></i>
313
+ </div>
314
+ <div class="ml-3">
315
+ <p class="text-sm font-medium text-gray-900">Notes mises à jour</p>
316
+ <p class="text-sm text-gray-500">Mathématiques Terminale C</p>
317
+ <p class="text-xs text-gray-400 mt-1">Hier à 14:30</p>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <div class="px-6 py-4">
322
+ <div class="flex items-start">
323
+ <div class="flex-shrink-0">
324
+ <i class="fas fa-user-tie text-yellow-500"></i>
325
+ </div>
326
+ <div class="ml-3">
327
+ <p class="text-sm font-medium text-gray-900">Nouvel enseignant</p>
328
+ <p class="text-sm text-gray-500">M. Tshibangu - Physique-Chimie</p>
329
+ <p class="text-xs text-gray-400 mt-1">Hier à 10:15</p>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div class="bg-gray-50 px-6 py-4">
335
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Voir toutes les activités</a>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Financial Overview and Student List -->
341
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
342
+ <!-- Financial Overview -->
343
+ <div class="bg-white shadow rounded-lg overflow-hidden lg:col-span-2">
344
+ <div class="px-6 py-5 border-b border-gray-200">
345
+ <h3 class="text-lg font-medium text-gray-900">Aperçu financier</h3>
346
+ </div>
347
+ <div class="px-6 py-4">
348
+ <div class="flex justify-between mb-4">
349
+ <div>
350
+ <p class="text-sm text-gray-500">Recettes totales</p>
351
+ <p class="text-xl font-semibold text-gray-900">74,250,000 FCFA</p>
352
+ </div>
353
+ <div>
354
+ <p class="text-sm text-gray-500">Dépenses totales</p>
355
+ <p class="text-xl font-semibold text-gray-900">52,800,000 FCFA</p>
356
+ </div>
357
+ <div>
358
+ <p class="text-sm text-gray-500">Solde</p>
359
+ <p class="text-xl font-semibold text-green-600">+21,450,000 FCFA</p>
360
+ </div>
361
+ </div>
362
+ <div class="chart-container">
363
+ <canvas id="financialChart"></canvas>
364
+ </div>
365
+ </div>
366
+ <div class="bg-gray-50 px-6 py-4">
367
+ <div class="flex justify-between items-center">
368
+ <div>
369
+ <p class="text-sm text-gray-500">Modes de paiement</p>
370
+ <div class="flex space-x-2 mt-2">
371
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
372
+ <i class="fas fa-money-bill-wave mr-1"></i> Espèces 45%
373
+ </span>
374
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
375
+ <i class="fas fa-mobile-alt mr-1"></i> Mobile Money 30%
376
+ </span>
377
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
378
+ <i class="fas fa-university mr-1"></i> Virement 20%
379
+ </span>
380
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
381
+ <i class="fas fa-money-check-alt mr-1"></i> Chèque 5%
382
+ </span>
383
+ </div>
384
+ </div>
385
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Voir détails</a>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Top Students -->
391
+ <div class="bg-white shadow rounded-lg overflow-hidden">
392
+ <div class="px-6 py-5 border-b border-gray-200">
393
+ <h3 class="text-lg font-medium text-gray-900">Meilleurs élèves</h3>
394
+ </div>
395
+ <div class="divide-y divide-gray-200">
396
+ <div class="px-6 py-4">
397
+ <div class="flex items-center">
398
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
399
+ <span class="text-blue-800 font-bold">1</span>
400
+ </div>
401
+ <div class="ml-4">
402
+ <p class="text-sm font-medium text-gray-900">Sarah Mbuyi</p>
403
+ <p class="text-sm text-gray-500">Terminale D - Moyenne: 18.7/20</p>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ <div class="px-6 py-4">
408
+ <div class="flex items-center">
409
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
410
+ <span class="text-green-800 font-bold">2</span>
411
+ </div>
412
+ <div class="ml-4">
413
+ <p class="text-sm font-medium text-gray-900">David Kanku</p>
414
+ <p class="text-sm text-gray-500">Terminale C - Moyenne: 17.9/20</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ <div class="px-6 py-4">
419
+ <div class="flex items-center">
420
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
421
+ <span class="text-yellow-800 font-bold">3</span>
422
+ </div>
423
+ <div class="ml-4">
424
+ <p class="text-sm font-medium text-gray-900">Grace Tshibangu</p>
425
+ <p class="text-sm text-gray-500">4ème - Moyenne: 17.5/20</p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ <div class="px-6 py-4">
430
+ <div class="flex items-center">
431
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
432
+ <span class="text-gray-800 font-bold">4</span>
433
+ </div>
434
+ <div class="ml-4">
435
+ <p class="text-sm font-medium text-gray-900">Jonathan Ilunga</p>
436
+ <p class="text-sm text-gray-500">CM2 - Moyenne: 9.2/10</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ <div class="px-6 py-4">
441
+ <div class="flex items-center">
442
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
443
+ <span class="text-gray-800 font-bold">5</span>
444
+ </div>
445
+ <div class="ml-4">
446
+ <p class="text-sm font-medium text-gray-900">Ruth Mukendi</p>
447
+ <p class="text-sm text-gray-500">CE2 - Moyenne: 9.0/10</p>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ <div class="bg-gray-50 px-6 py-4">
453
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Voir tous les résultats</a>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </main>
459
+ </div>
460
+ </div>
461
+
462
+ <!-- Mobile Sidebar -->
463
+ <div class="md:hidden fixed inset-0 z-40 hidden">
464
+ <div class="fixed inset-0">
465
+ <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
466
+ </div>
467
+ <div class="relative flex-1 flex flex-col max-w-xs w-full gradient-bg">
468
+ <div class="absolute top-0 right-0 -mr-14 p-1">
469
+ <button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600">
470
+ <i class="fas fa-times text-white"></i>
471
+ </button>
472
+ </div>
473
+ <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
474
+ <div class="flex-shrink-0 flex items-center px-4">
475
+ <i class="fas fa-graduation-cap text-2xl mr-2 text-blue-300"></i>
476
+ <span class="text-xl font-bold text-white">EduRDC</span>
477
+ </div>
478
+ <nav class="mt-5 px-2 space-y-1">
479
+ <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-blue-900 focus:outline-none focus:bg-blue-800 transition ease-in-out duration-150">
480
+ <i class="fas fa-tachometer-alt mr-4 text-blue-300"></i>
481
+ Tableau de bord
482
+ </a>
483
+ <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150">
484
+ <i class="fas fa-user-graduate mr-4 text-blue-300"></i>
485
+ Élèves
486
+ </a>
487
+ <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150">
488
+ <i class="fas fa-chalkboard-teacher mr-4 text-blue-300"></i>
489
+ Enseignants
490
+ </a>
491
+ <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150">
492
+ <i class="fas fa-book mr-4 text-blue-300"></i>
493
+ Notes & Bilans
494
+ </a>
495
+ <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150">
496
+ <i class="fas fa-money-bill-wave mr-4 text-blue-300"></i>
497
+ Finances
498
+ </a>
499
+ </nav>
500
+ </div>
501
+ <div class="flex-shrink-0 flex border-t border-blue-800 p-4">
502
+ <button class="flex-shrink-0 w-full group block">
503
+ <div class="flex items-center">
504
+ <div>
505
+ <img class="inline-block h-9 w-9 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Admin">
506
+ </div>
507
+ <div class="ml-3">
508
+ <p class="text-sm font-medium text-white">Marie Kabasele</p>
509
+ <p class="text-xs font-medium text-blue-200 group-hover:text-white">Voir profil</p>
510
+ </div>
511
+ </div>
512
+ </button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
518
+ <script>
519
+ // Student Distribution Chart
520
+ const studentCtx = document.getElementById('studentDistributionChart').getContext('2d');
521
+ const studentChart = new Chart(studentCtx, {
522
+ type: 'bar',
523
+ data: {
524
+ labels: ['Primaire', 'Collège', 'Lycée'],
525
+ datasets: [
526
+ {
527
+ label: 'Garçons',
528
+ data: [320, 280, 180],
529
+ backgroundColor: '#3b82f6',
530
+ borderColor: '#3b82f6',
531
+ borderWidth: 1
532
+ },
533
+ {
534
+ label: 'Filles',
535
+ data: [290, 260, 150],
536
+ backgroundColor: '#8b5cf6',
537
+ borderColor: '#8b5cf6',
538
+ borderWidth: 1
539
+ }
540
+ ]
541
+ },
542
+ options: {
543
+ responsive: true,
544
+ maintainAspectRatio: false,
545
+ scales: {
546
+ y: {
547
+ beginAtZero: true,
548
+ ticks: {
549
+ callback: function(value) {
550
+ return value;
551
+ }
552
+ }
553
+ }
554
+ },
555
+ plugins: {
556
+ legend: {
557
+ position: 'top',
558
+ },
559
+ tooltip: {
560
+ callbacks: {
561
+ label: function(context) {
562
+ return context.dataset.label + ': ' + context.raw + ' élèves';
563
+ }
564
+ }
565
+ }
566
+ }
567
+ }
568
+ });
569
+
570
+ // Financial Chart
571
+ const financialCtx = document.getElementById('financialChart').getContext('2d');
572
+ const financialChart = new Chart(financialCtx, {
573
+ type: 'line',
574
+ data: {
575
+ labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'],
576
+ datasets: [
577
+ {
578
+ label: 'Recettes',
579
+ data: [5.2, 6.0, 6.8, 7.5, 8.2, 6.5, 5.8, 6.2, 7.8, 8.5, 7.2, 6.8],
580
+ borderColor: '#10b981',
581
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
582
+ borderWidth: 2,
583
+ fill: true,
584
+ tension: 0.4
585
+ },
586
+ {
587
+ label: 'Dépenses',
588
+ data: [4.0, 4.5, 5.0, 5.5, 6.0, 5.8, 5.2, 4.8, 5.5, 6.2, 5.8, 5.5],
589
+ borderColor: '#ef4444',
590
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
591
+ borderWidth: 2,
592
+ fill: true,
593
+ tension: 0.4
594
+ }
595
+ ]
596
+ },
597
+ options: {
598
+ responsive: true,
599
+ maintainAspectRatio: false,
600
+ scales: {
601
+ y: {
602
+ beginAtZero: true,
603
+ ticks: {
604
+ callback: function(value) {
605
+ return value + 'M';
606
+ }
607
+ }
608
+ }
609
+ },
610
+ plugins: {
611
+ legend: {
612
+ position: 'top',
613
+ },
614
+ tooltip: {
615
+ callbacks: {
616
+ label: function(context) {
617
+ return context.dataset.label + ': ' + context.raw + 'M FCFA';
618
+ }
619
+ }
620
+ }
621
+ }
622
+ }
623
+ });
624
+
625
+ // Mobile menu toggle
626
+ document.addEventListener('DOMContentLoaded', function() {
627
+ const mobileMenuButton = document.querySelector('.md\\:hidden button');
628
+ const mobileMenu = document.querySelector('.md\\:hidden.fixed');
629
+
630
+ mobileMenuButton.addEventListener('click', function() {
631
+ mobileMenu.classList.toggle('hidden');
632
+ });
633
+
634
+ // Close mobile menu when clicking outside
635
+ document.addEventListener('click', function(event) {
636
+ if (!mobileMenu.contains(event.target) && event.target !== mobileMenuButton) {
637
+ mobileMenu.classList.add('hidden');
638
+ }
639
+ });
640
+ });
641
+ </script>
642
+ <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=elsecond/gesco" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
643
+ </html>