Hugging Face's logo

Spaces:
Jansome
/
da-model
Running

App Files Community
Jansome commited on
Commit
a8c30ea
·
verified ·
1 Parent(s): 4f42ce6

Build a full-stack AI-driven web application that predicts student academic performance based on internal assessments, attendance, and previous academic records. The goal is to assist educators in identifying at-risk students early and enabling timely intervention. Include user authentication, an intuitive UI dashboard, ML integration for predictions, and data visualization. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +522 -592
index.html CHANGED
@@ -3,53 +3,33 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>EduPredict - Student Performance 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>
10
- tailwind.config = {
11
- theme: {
12
- extend: {
13
- colors: {
14
- primary: '#4F46E5',
15
- secondary: '#10B981',
16
- danger: '#EF4444',
17
- warning: '#F59E0B',
18
- }
19
- }
20
- }
21
- }
22
- </script>
23
  <style>
24
- .sidebar {
25
- transition: all 0.3s ease;
26
  }
27
- .sidebar.collapsed {
28
- width: 70px;
29
- }
30
- .sidebar.collapsed .nav-text {
31
- display: none;
32
- }
33
- .main-content {
34
  transition: all 0.3s ease;
35
  }
36
- .sidebar.collapsed + .main-content {
37
- margin-left: 70px;
38
- }
39
- .chart-container {
40
- height: 300px;
41
  }
42
  .risk-high {
43
- background-color: rgba(239, 68, 68, 0.1);
44
- border-left: 4px solid #EF4444;
45
  }
46
  .risk-medium {
47
- background-color: rgba(245, 158, 11, 0.1);
48
- border-left: 4px solid #F59E0B;
49
  }
50
  .risk-low {
51
- background-color: rgba(16, 185, 129, 0.1);
52
- border-left: 4px solid #10B981;
53
  }
54
  @keyframes pulse {
55
  0%, 100% {
@@ -64,664 +44,614 @@
64
  }
65
  </style>
66
  </head>
67
- <body class="bg-gray-50">
68
- <div class="flex h-screen overflow-hidden">
69
- <!-- Sidebar -->
70
- <div class="sidebar bg-white shadow-lg w-64 flex-shrink-0">
71
- <div class="p-4 border-b border-gray-200 flex items-center justify-between">
72
- <div class="flex items-center">
73
- <i class="fas fa-graduation-cap text-primary text-2xl mr-3"></i>
74
- <span class="text-xl font-bold text-gray-800 nav-text">EduPredict</span>
75
- </div>
76
- <button id="toggleSidebar" class="text-gray-500 hover:text-gray-700">
77
- <i class="fas fa-bars"></i>
78
  </button>
79
  </div>
80
- <nav class="p-4">
 
 
 
 
81
  <div class="mb-6">
82
- <p class="text-xs uppercase text-gray-500 font-semibold mb-2 nav-text">Navigation</p>
83
- <ul>
84
- <li class="mb-1">
85
- <a href="#" class="flex items-center p-2 text-primary bg-indigo-50 rounded-lg">
86
- <i class="fas fa-tachometer-alt mr-3"></i>
87
- <span class="nav-text">Dashboard</span>
88
- </a>
89
- </li>
90
- <li class="mb-1">
91
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
92
- <i class="fas fa-users mr-3"></i>
93
- <span class="nav-text">Students</span>
94
- </a>
95
- </li>
96
- <li class="mb-1">
97
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
98
- <i class="fas fa-chart-line mr-3"></i>
99
- <span class="nav-text">Analytics</span>
100
- </a>
101
- </li>
102
- <li class="mb-1">
103
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
104
- <i class="fas fa-bell mr-3"></i>
105
- <span class="nav-text">Alerts</span>
106
- </a>
107
- </li>
108
- </ul>
109
  </div>
110
  <div class="mb-6">
111
- <p class="text-xs uppercase text-gray-500 font-semibold mb-2 nav-text">Management</p>
112
- <ul>
113
- <li class="mb-1">
114
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
115
- <i class="fas fa-book mr-3"></i>
116
- <span class="nav-text">Courses</span>
117
- </a>
118
- </li>
119
- <li class="mb-1">
120
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
121
- <i class="fas fa-calendar-alt mr-3"></i>
122
- <span class="nav-text">Attendance</span>
123
- </a>
124
- </li>
125
- <li class="mb-1">
126
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
127
- <i class="fas fa-clipboard-check mr-3"></i>
128
- <span class="nav-text">Assessments</span>
129
- </a>
130
- </li>
131
- </ul>
132
  </div>
133
- <div>
134
- <p class="text-xs uppercase text-gray-500 font-semibold mb-2 nav-text">Settings</p>
135
- <ul>
136
- <li class="mb-1">
137
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
138
- <i class="fas fa-cog mr-3"></i>
139
- <span class="nav-text">Settings</span>
140
- </a>
141
- </li>
142
- <li class="mb-1">
143
- <a href="#" class="flex items-center p-2 text-gray-600 hover:text-primary hover:bg-indigo-50 rounded-lg">
144
- <i class="fas fa-sign-out-alt mr-3"></i>
145
- <span class="nav-text">Logout</span>
146
- </a>
147
- </li>
148
- </ul>
149
  </div>
150
- </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
151
  </div>
152
 
153
  <!-- Main Content -->
154
- <div class="main-content flex-1 overflow-auto ml-64">
155
- <!-- Header -->
156
- <header class="bg-white shadow-sm p-4">
157
- <div class="flex justify-between items-center">
158
- <h1 class="text-2xl font-bold text-gray-800">Student Performance Dashboard</h1>
 
 
 
 
 
159
  <div class="flex items-center space-x-4">
160
  <div class="relative">
161
- <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
162
- <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 
 
163
  </div>
164
- <div class="flex items-center space-x-2">
165
- <div class="relative">
166
- <i class="fas fa-bell text-gray-600 text-xl cursor-pointer"></i>
167
- <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
168
- </div>
169
- <div class="flex items-center">
170
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="h-8 w-8 rounded-full">
171
- <span class="ml-2 text-gray-700 hidden md:inline">Dr. Sarah Johnson</span>
172
- </div>
173
  </div>
174
  </div>
175
  </div>
176
  </header>
177
 
178
- <!-- Dashboard Content -->
179
  <main class="p-6">
180
  <!-- Stats Cards -->
181
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
182
- <div class="bg-white p-6 rounded-xl shadow-sm">
183
- <div class="flex items-center justify-between">
184
  <div>
185
- <p class="text-gray-500">Total Students</p>
186
- <h3 class="text-3xl font-bold mt-2">248</h3>
 
187
  </div>
188
- <div class="bg-indigo-100 p-3 rounded-full">
189
- <i class="fas fa-users text-primary text-xl"></i>
190
  </div>
191
  </div>
192
- <div class="mt-4">
193
- <span class="text-green-500 text-sm font-medium"><i class="fas fa-caret-up mr-1"></i> 12% from last term</span>
194
- </div>
195
  </div>
196
- <div class="bg-white p-6 rounded-xl shadow-sm">
197
- <div class="flex items-center justify-between">
198
  <div>
199
- <p class="text-gray-500">At Risk Students</p>
200
- <h3 class="text-3xl font-bold mt-2">32</h3>
 
201
  </div>
202
- <div class="bg-red-100 p-3 rounded-full">
203
- <i class="fas fa-exclamation-triangle text-danger text-xl"></i>
204
  </div>
205
  </div>
206
- <div class="mt-4">
207
- <span class="text-red-500 text-sm font-medium"><i class="fas fa-caret-up mr-1"></i> 8% from last term</span>
208
- </div>
209
  </div>
210
- <div class="bg-white p-6 rounded-xl shadow-sm">
211
- <div class="flex items-center justify-between">
212
  <div>
213
- <p class="text-gray-500">Avg. Attendance</p>
214
- <h3 class="text-3xl font-bold mt-2">87%</h3>
 
215
  </div>
216
- <div class="bg-green-100 p-3 rounded-full">
217
- <i class="fas fa-calendar-check text-secondary text-xl"></i>
218
  </div>
219
  </div>
220
- <div class="mt-4">
221
- <span class="text-green-500 text-sm font-medium"><i class="fas fa-caret-up mr-1"></i> 3% from last term</span>
222
- </div>
223
  </div>
224
- <div class="bg-white p-6 rounded-xl shadow-sm">
225
- <div class="flex items-center justify-between">
226
  <div>
227
- <p class="text-gray-500">Avg. Performance</p>
228
- <h3 class="text-3xl font-bold mt-2">72%</h3>
 
229
  </div>
230
- <div class="bg-yellow-100 p-3 rounded-full">
231
- <i class="fas fa-chart-bar text-warning text-xl"></i>
232
  </div>
233
  </div>
234
- <div class="mt-4">
235
- <span class="text-green-500 text-sm font-medium"><i class="fas fa-caret-up mr-1"></i> 5% from last term</span>
236
- </div>
237
  </div>
238
  </div>
239
 
240
- <!-- Main Dashboard Area -->
241
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
242
- <!-- Performance Prediction Chart -->
243
- <div class="bg-white p-6 rounded-xl shadow-sm lg:col-span-2">
244
  <div class="flex justify-between items-center mb-6">
245
- <h2 class="text-lg font-semibold text-gray-800">Performance Prediction Overview</h2>
246
  <div class="flex space-x-2">
247
- <button class="px-3 py-1 bg-primary text-white text-sm rounded-lg">This Term</button>
248
- <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-lg">Last Term</button>
249
- <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-lg">Custom</button>
250
  </div>
251
  </div>
252
- <div class="chart-container">
253
  <canvas id="performanceChart"></canvas>
254
  </div>
255
  </div>
256
-
257
- <!-- Risk Distribution -->
258
- <div class="bg-white p-6 rounded-xl shadow-sm">
259
- <h2 class="text-lg font-semibold text-gray-800 mb-6">Risk Distribution</h2>
260
- <div class="chart-container">
261
  <canvas id="riskChart"></canvas>
262
  </div>
263
- <div class="mt-4 grid grid-cols-3 gap-2 text-center">
264
- <div>
265
- <div class="h-2 bg-danger rounded-full"></div>
266
- <p class="text-xs mt-1">High Risk</p>
267
- <p class="font-semibold">13%</p>
268
- </div>
269
- <div>
270
- <div class="h-2 bg-warning rounded-full"></div>
271
- <p class="text-xs mt-1">Medium Risk</p>
272
- <p class="font-semibold">24%</p>
273
- </div>
274
- <div>
275
- <div class="h-2 bg-secondary rounded-full"></div>
276
- <p class="text-xs mt-1">Low Risk</p>
277
- <p class="font-semibold">63%</p>
278
- </div>
279
- </div>
280
  </div>
281
  </div>
282
 
283
- <!-- At-Risk Students -->
284
- <div class="bg-white p-6 rounded-xl shadow-sm mb-6">
285
- <div class="flex justify-between items-center mb-6">
286
- <h2 class="text-lg font-semibold text-gray-800">At-Risk Students Requiring Intervention</h2>
287
- <button class="px-4 py-2 bg-primary text-white text-sm rounded-lg flex items-center">
288
- <i class="fas fa-plus mr-2"></i> Create Intervention Plan
289
- </button>
290
- </div>
291
- <div class="overflow-x-auto">
292
- <table class="min-w-full divide-y divide-gray-200">
293
- <thead class="bg-gray-50">
294
- <tr>
295
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
296
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
297
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risk Level</th>
298
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Predicted Grade</th>
299
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attendance</th>
300
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Assessment</th>
301
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
302
- </tr>
303
- </thead>
304
- <tbody class="bg-white divide-y divide-gray-200">
305
- <tr class="risk-high hover:bg-gray-50">
306
- <td class="px-6 py-4 whitespace-nowrap">
307
- <div class="flex items-center">
308
- <div class="flex-shrink-0 h-10 w-10">
309
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
310
- </div>
311
- <div class="ml-4">
312
- <div class="text-sm font-medium text-gray-900">Michael Johnson</div>
313
- <div class="text-sm text-gray-500">ID: S-2023-045</div>
314
- </div>
315
- </div>
316
- </td>
317
- <td class="px-6 py-4 whitespace-nowrap">
318
- <div class="text-sm text-gray-900">Calculus II</div>
319
- <div class="text-sm text-gray-500">MAT202</div>
320
- </td>
321
- <td class="px-6 py-4 whitespace-nowrap">
322
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger text-white">High Risk</span>
323
- </td>
324
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
325
- <div class="flex items-center">
326
- <span class="font-bold text-danger">D+</span>
327
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
328
- <div class="bg-danger h-2 rounded-full" style="width: 45%"></div>
329
- </div>
330
- </div>
331
- </td>
332
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
333
- <div class="flex items-center">
334
- <span class="font-bold">68%</span>
335
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
336
- <div class="bg-danger h-2 rounded-full" style="width: 68%"></div>
337
- </div>
338
- </div>
339
- </td>
340
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
341
- <div class="flex items-center">
342
- <span class="font-bold">52%</span>
343
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
344
- <div class="bg-danger h-2 rounded-full" style="width: 52%"></div>
345
- </div>
346
- </div>
347
- </td>
348
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
349
- <button class="text-primary hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
350
- <button class="text-secondary hover:text-green-700"><i class="fas fa-comment-alt"></i></button>
351
- </td>
352
- </tr>
353
- <tr class="risk-high hover:bg-gray-50">
354
- <td class="px-6 py-4 whitespace-nowrap">
355
- <div class="flex items-center">
356
- <div class="flex-shrink-0 h-10 w-10">
357
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/28.jpg" alt="">
358
- </div>
359
- <div class="ml-4">
360
- <div class="text-sm font-medium text-gray-900">Emily Rodriguez</div>
361
- <div class="text-sm text-gray-500">ID: S-2023-112</div>
362
- </div>
363
- </div>
364
- </td>
365
- <td class="px-6 py-4 whitespace-nowrap">
366
- <div class="text-sm text-gray-900">Organic Chemistry</div>
367
- <div class="text-sm text-gray-500">CHE301</div>
368
- </td>
369
- <td class="px-6 py-4 whitespace-nowrap">
370
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger text-white">High Risk</span>
371
- </td>
372
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
373
- <div class="flex items-center">
374
- <span class="font-bold text-danger">D</span>
375
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
376
- <div class="bg-danger h-2 rounded-full" style="width: 40%"></div>
377
- </div>
378
- </div>
379
- </td>
380
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
381
- <div class="flex items-center">
382
- <span class="font-bold">72%</span>
383
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
384
- <div class="bg-danger h-2 rounded-full" style="width: 72%"></div>
385
- </div>
386
- </div>
387
- </td>
388
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
389
- <div class="flex items-center">
390
- <span class="font-bold">48%</span>
391
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
392
- <div class="bg-danger h-2 rounded-full" style="width: 48%"></div>
393
- </div>
394
- </div>
395
- </td>
396
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
397
- <button class="text-primary hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
398
- <button class="text-secondary hover:text-green-700"><i class="fas fa-comment-alt"></i></button>
399
- </td>
400
- </tr>
401
- <tr class="risk-medium hover:bg-gray-50">
402
- <td class="px-6 py-4 whitespace-nowrap">
403
- <div class="flex items-center">
404
- <div class="flex-shrink-0 h-10 w-10">
405
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
406
- </div>
407
- <div class="ml-4">
408
- <div class="text-sm font-medium text-gray-900">David Kim</div>
409
- <div class="text-sm text-gray-500">ID: S-2023-087</div>
410
- </div>
411
- </div>
412
- </td>
413
- <td class="px-6 py-4 whitespace-nowrap">
414
- <div class="text-sm text-gray-900">Data Structures</div>
415
- <div class="text-sm text-gray-500">CS202</div>
416
- </td>
417
- <td class="px-6 py-4 whitespace-nowrap">
418
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning text-white">Medium Risk</span>
419
- </td>
420
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
421
- <div class="flex items-center">
422
- <span class="font-bold text-warning">C+</span>
423
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
424
- <div class="bg-warning h-2 rounded-full" style="width: 65%"></div>
425
- </div>
426
- </div>
427
- </td>
428
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
429
- <div class="flex items-center">
430
- <span class="font-bold">82%</span>
431
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
432
- <div class="bg-warning h-2 rounded-full" style="width: 82%"></div>
433
- </div>
434
- </div>
435
- </td>
436
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
437
- <div class="flex items-center">
438
- <span class="font-bold">65%</span>
439
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
440
- <div class="bg-warning h-2 rounded-full" style="width: 65%"></div>
441
  </div>
442
- </div>
443
- </td>
444
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
445
- <button class="text-primary hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
446
- <button class="text-secondary hover:text-green-700"><i class="fas fa-comment-alt"></i></button>
447
- </td>
448
- </tr>
449
- <tr class="risk-medium hover:bg-gray-50">
450
- <td class="px-6 py-4 whitespace-nowrap">
451
- <div class="flex items-center">
452
- <div class="flex-shrink-0 h-10 w-10">
453
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="">
454
  </div>
455
- <div class="ml-4">
456
- <div class="text-sm font-medium text-gray-900">Sophia Chen</div>
457
- <div class="text-sm text-gray-500">ID: S-2023-134</div>
 
 
 
 
 
 
 
 
 
 
458
  </div>
459
- </div>
460
- </td>
461
- <td class="px-6 py-4 whitespace-nowrap">
462
- <div class="text-sm text-gray-900">Physics II</div>
463
- <div class="text-sm text-gray-500">PHY202</div>
464
- </td>
465
- <td class="px-6 py-4 whitespace-nowrap">
466
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning text-white">Medium Risk</span>
467
- </td>
468
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
469
- <div class="flex items-center">
470
- <span class="font-bold text-warning">C</span>
471
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
472
- <div class="bg-warning h-2 rounded-full" style="width: 60%"></div>
473
  </div>
474
- </div>
475
- </td>
476
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
477
- <div class="flex items-center">
478
- <span class="font-bold">78%</span>
479
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
480
- <div class="bg-warning h-2 rounded-full" style="width: 78%"></div>
 
 
 
 
 
 
481
  </div>
482
- </div>
483
- </td>
484
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
485
- <div class="flex items-center">
486
- <span class="font-bold">62%</span>
487
- <div class="ml-2 w-full bg-gray-200 rounded-full h-2">
488
- <div class="bg-warning h-2 rounded-full" style="width: 62%"></div>
 
 
 
 
489
  </div>
490
- </div>
491
- </td>
492
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
493
- <button class="text-primary hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
494
- <button class="text-secondary hover:text-green-700"><i class="fas fa-comment-alt"></i></button>
495
- </td>
496
- </tr>
497
- </tbody>
498
- </table>
499
- </div>
500
- <div class="mt-4 text-center">
501
- <button class="text-primary font-medium hover:underline">View All At-Risk Students (32)</button>
502
  </div>
503
- </div>
504
 
505
- <!-- Recent Interventions -->
506
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
507
- <div class="bg-white p-6 rounded-xl shadow-sm">
508
- <h2 class="text-lg font-semibold text-gray-800 mb-6">Recent Interventions</h2>
 
 
509
  <div class="space-y-4">
510
- <div class="flex items-start p-3 border border-gray-100 rounded-lg hover:bg-gray-50">
511
- <div class="bg-indigo-100 p-2 rounded-full mr-3">
512
- <i class="fas fa-comments text-primary"></i>
513
- </div>
514
- <div class="flex-1">
515
- <div class="flex justify-between items-start">
516
- <h4 class="font-medium text-gray-800">Counseling Session</h4>
517
- <span class="text-xs text-gray-500">2 days ago</span>
518
- </div>
519
- <p class="text-sm text-gray-600 mt-1">Michael Johnson attended a counseling session to address academic challenges.</p>
520
- <div class="mt-2">
521
- <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Completed</span>
522
  </div>
523
  </div>
524
- </div>
525
- <div class="flex items-start p-3 border border-gray-100 rounded-lg hover:bg-gray-50">
526
- <div class="bg-yellow-100 p-2 rounded-full mr-3">
527
- <i class="fas fa-book text-warning"></i>
528
  </div>
529
- <div class="flex-1">
530
- <div class="flex justify-between items-start">
531
- <h4 class="font-medium text-gray-800">Tutoring Assignment</h4>
532
- <span class="text-xs text-gray-500">1 week ago</span>
533
- </div>
534
- <p class="text-sm text-gray-600 mt-1">Emily Rodriguez was assigned a tutor for Organic Chemistry.</p>
535
- <div class="mt-2">
536
- <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">In Progress</span>
537
  </div>
538
  </div>
539
- </div>
540
- <div class="flex items-start p-3 border border-gray-100 rounded-lg hover:bg-gray-50">
541
- <div class="bg-purple-100 p-2 rounded-full mr-3">
542
- <i class="fas fa-user-friends text-purple-600"></i>
543
  </div>
544
- <div class="flex-1">
545
- <div class="flex justify-between items-start">
546
- <h4 class="font-medium text-gray-800">Study Group</h4>
547
- <span class="text-xs text-gray-500">2 weeks ago</span>
 
548
  </div>
549
- <p class="text-sm text-gray-600 mt-1">David Kim joined a peer study group for Data Structures.</p>
550
- <div class="mt-2">
551
- <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Completed</span>
 
 
 
 
 
 
 
 
552
  </div>
553
  </div>
 
 
 
 
 
554
  </div>
555
  </div>
556
- <div class="mt-4 text-center">
557
- <button class="text-primary font-medium hover:underline">View All Interventions</button>
558
- </div>
559
  </div>
 
560
 
561
- <!-- Performance Factors -->
562
- <div class="bg-white p-6 rounded-xl shadow-sm">
563
- <h2 class="text-lg font-semibold text-gray-800 mb-6">Key Performance Factors</h2>
564
- <div class="space-y-4">
565
- <div>
566
- <div class="flex justify-between mb-1">
567
- <span class="text-sm font-medium text-gray-700">Attendance Rate</span>
568
- <span class="text-sm font-medium text-gray-700">87%</span>
569
- </div>
570
- <div class="w-full bg-gray-200 rounded-full h-2.5">
571
- <div class="bg-secondary h-2.5 rounded-full" style="width: 87%"></div>
572
- </div>
573
- <p class="text-xs text-gray-500 mt-1">Strong correlation with performance (r=0.72)</p>
 
 
 
 
 
 
574
  </div>
575
- <div>
576
- <div class="flex justify-between mb-1">
577
- <span class="text-sm font-medium text-gray-700">Assignment Submission</span>
578
- <span class="text-sm font-medium text-gray-700">76%</span>
579
- </div>
580
- <div class="w-full bg-gray-200 rounded-full h-2.5">
581
- <div class="bg-warning h-2.5 rounded-full" style="width: 76%"></div>
582
- </div>
583
- <p class="text-xs text-gray-500 mt-1">Moderate correlation with performance (r=0.58)</p>
584
  </div>
585
- <div>
586
- <div class="flex justify-between mb-1">
587
- <span class="text-sm font-medium text-gray-700">Previous Grades</span>
588
- <span class="text-sm font-medium text-gray-700">68%</span>
589
- </div>
590
- <div class="w-full bg-gray-200 rounded-full h-2.5">
591
- <div class="bg-primary h-2.5 rounded-full" style="width: 68%"></div>
592
- </div>
593
- <p class="text-xs text-gray-500 mt-1">Strongest predictor of performance (r=0.81)</p>
594
  </div>
595
- <div>
596
- <div class="flex justify-between mb-1">
597
- <span class="text-sm font-medium text-gray-700">Engagement Metrics</span>
598
- <span class="text-sm font-medium text-gray-700">62%</span>
599
- </div>
600
- <div class="w-full bg-gray-200 rounded-full h-2.5">
601
- <div class="bg-indigo-500 h-2.5 rounded-full" style="width: 62%"></div>
 
 
 
 
 
602
  </div>
603
- <p class="text-xs text-gray-500 mt-1">Includes LMS activity, participation (r=0.49)</p>
604
  </div>
605
  </div>
606
- <div class="mt-6 bg-blue-50 p-4 rounded-lg">
607
- <h4 class="font-medium text-blue-800 mb-2">AI Recommendation</h4>
608
- <p class="text-sm text-blue-700">Focus on improving assignment submission rates through automated reminders and early intervention for late submissions. This could improve overall performance by 8-12% based on historical data.</p>
609
- </div>
610
  </div>
611
  </div>
612
  </main>
613
  </div>
614
  </div>
615
 
616
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
617
  <script>
618
- // Toggle sidebar
619
- document.getElementById('toggleSidebar').addEventListener('click', function() {
620
- document.querySelector('.sidebar').classList.toggle('collapsed');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
621
  });
622
 
623
- // Performance Chart
624
- const performanceCtx = document.getElementById('performanceChart').getContext('2d');
625
- const performanceChart = new Chart(performanceCtx, {
626
- type: 'line',
627
- data: {
628
- labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7'],
629
- datasets: [
630
- {
631
- label: 'Current Term',
632
- data: [65, 68, 70, 72, 71, 73, 75],
633
- borderColor: '#4F46E5',
634
- backgroundColor: 'rgba(79, 70, 229, 0.1)',
635
- tension: 0.3,
636
- fill: true
637
- },
638
- {
639
- label: 'Previous Term',
640
- data: [60, 62, 65, 63, 66, 68, 70],
641
- borderColor: '#9CA3AF',
642
- backgroundColor: 'rgba(156, 163, 175, 0.1)',
643
- borderDash: [5, 5],
644
- tension: 0.3,
645
- fill: true
646
- },
647
- {
648
- label: 'Predicted',
649
- data: [65, 68, 70, 72, 74, 76, 78],
650
- borderColor: '#10B981',
651
- backgroundColor: 'rgba(16, 185, 129, 0.1)',
652
- borderDash: [5, 5],
653
- tension: 0.3,
654
- fill: true
655
- }
656
- ]
657
- },
658
- options: {
659
- responsive: true,
660
- maintainAspectRatio: false,
661
- plugins: {
662
- legend: {
663
- position: 'top',
664
- },
665
- tooltip: {
666
- mode: 'index',
667
- intersect: false,
668
- }
669
  },
670
- scales: {
671
- y: {
672
- beginAtZero: false,
673
- min: 50,
674
- max: 100,
675
- ticks: {
676
- callback: function(value) {
677
- return value + '%';
 
 
 
 
 
 
 
 
 
 
 
 
 
678
  }
679
  }
680
  }
681
  }
682
- }
683
- });
684
 
685
- // Risk Distribution Chart
686
- const riskCtx = document.getElementById('riskChart').getContext('2d');
687
- const riskChart = new Chart(riskCtx, {
688
- type: 'doughnut',
689
- data: {
690
- labels: ['High Risk', 'Medium Risk', 'Low Risk'],
691
- datasets: [{
692
- data: [13, 24, 63],
693
- backgroundColor: [
694
- '#EF4444',
695
- '#F59E0B',
696
- '#10B981'
697
- ],
698
- borderWidth: 0
699
- }]
700
- },
701
- options: {
702
- responsive: true,
703
- maintainAspectRatio: false,
704
- cutout: '70%',
705
- plugins: {
706
- legend: {
707
- display: false,
708
- }
 
 
 
 
 
 
 
 
 
 
 
 
709
  }
710
- }
711
- });
712
 
713
- // Simulate AI processing
714
- function simulateAIProcessing() {
715
- const aiRecommendation = document.querySelector('.bg-blue-50 p');
716
- aiRecommendation.classList.add('animate-pulse');
717
-
718
- setTimeout(() => {
719
- aiRecommendation.classList.remove('animate-pulse');
720
- }, 3000);
721
- }
722
-
723
- // Run simulation every 10 seconds
724
- setInterval(simulateAIProcessing, 10000);
725
  </script>
726
  <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=Jansome/da-model" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
727
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EduPredict - Student Performance Analytics</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
14
  }
15
+ .sidebar {
 
 
 
 
 
 
16
  transition: all 0.3s ease;
17
  }
18
+ .card-hover:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 
 
21
  }
22
  .risk-high {
23
+ background-color: #fef2f2;
24
+ border-left: 4px solid #ef4444;
25
  }
26
  .risk-medium {
27
+ background-color: #fffbeb;
28
+ border-left: 4px solid #f59e0b;
29
  }
30
  .risk-low {
31
+ background-color: #ecfdf5;
32
+ border-left: 4px solid #10b981;
33
  }
34
  @keyframes pulse {
35
  0%, 100% {
 
44
  }
45
  </style>
46
  </head>
47
+ <body class="bg-gray-50 font-sans">
48
+ <!-- Auth Modal -->
49
+ <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
50
+ <div class="bg-white rounded-xl p-8 w-full max-w-md">
51
+ <div class="flex justify-between items-center mb-6">
52
+ <h2 class="text-2xl font-bold text-gray-800">Welcome to EduPredict</h2>
53
+ <button onclick="closeAuthModal()" class="text-gray-500 hover:text-gray-700">
54
+ <i class="fas fa-times"></i>
 
 
 
55
  </button>
56
  </div>
57
+ <div id="loginForm">
58
+ <div class="mb-4">
59
+ <label class="block text-gray-700 mb-2" for="loginEmail">Email</label>
60
+ <input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
61
+ </div>
62
  <div class="mb-6">
63
+ <label class="block text-gray-700 mb-2" for="loginPassword">Password</label>
64
+ <input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
65
+ </div>
66
+ <button onclick="login()" class="w-full gradient-bg text-white py-2 rounded-lg font-semibold mb-4 hover:opacity-90 transition">Sign In</button>
67
+ <p class="text-center text-gray-600">Don't have an account? <button onclick="showRegisterForm()" class="text-purple-600 font-medium hover:underline">Register</button></p>
68
+ </div>
69
+ <div id="registerForm" class="hidden">
70
+ <div class="mb-4">
71
+ <label class="block text-gray-700 mb-2" for="regName">Full Name</label>
72
+ <input type="text" id="regName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
73
+ </div>
74
+ <div class="mb-4">
75
+ <label class="block text-gray-700 mb-2" for="regEmail">Email</label>
76
+ <input type="email" id="regEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
77
+ </div>
78
+ <div class="mb-4">
79
+ <label class="block text-gray-700 mb-2" for="regPassword">Password</label>
80
+ <input type="password" id="regPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
 
 
 
 
 
 
 
 
 
81
  </div>
82
  <div class="mb-6">
83
+ <label class="block text-gray-700 mb-2" for="regConfirmPassword">Confirm Password</label>
84
+ <input type="password" id="regConfirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  </div>
86
+ <button onclick="register()" class="w-full gradient-bg text-white py-2 rounded-lg font-semibold mb-4 hover:opacity-90 transition">Create Account</button>
87
+ <p class="text-center text-gray-600">Already have an account? <button onclick="showLoginForm()" class="text-purple-600 font-medium hover:underline">Sign In</button></p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Main Layout -->
93
+ <div class="flex h-screen overflow-hidden">
94
+ <!-- Sidebar -->
95
+ <div id="sidebar" class="sidebar bg-white w-64 border-r flex flex-col">
96
+ <div class="p-4 border-b">
97
+ <div class="flex items-center">
98
+ <div class="gradient-bg p-2 rounded-lg mr-3">
99
+ <i class="fas fa-graduation-cap text-white text-xl"></i>
100
+ </div>
101
+ <h1 class="text-xl font-bold text-gray-800">EduPredict</h1>
102
  </div>
103
+ </div>
104
+ <div class="flex-1 overflow-y-auto">
105
+ <nav class="p-4">
106
+ <div class="mb-6">
107
+ <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Dashboard</p>
108
+ <ul>
109
+ <li>
110
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg bg-purple-50 text-purple-600 font-medium">
111
+ <i class="fas fa-chart-pie mr-3"></i>
112
+ <span>Overview</span>
113
+ </a>
114
+ </li>
115
+ <li>
116
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mt-1">
117
+ <i class="fas fa-users mr-3"></i>
118
+ <span>Students</span>
119
+ </a>
120
+ </li>
121
+ <li>
122
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mt-1">
123
+ <i class="fas fa-chart-line mr-3"></i>
124
+ <span>Performance</span>
125
+ </a>
126
+ </li>
127
+ <li>
128
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mt-1">
129
+ <i class="fas fa-calendar-alt mr-3"></i>
130
+ <span>Attendance</span>
131
+ </a>
132
+ </li>
133
+ </ul>
134
+ </div>
135
+ <div class="mb-6">
136
+ <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Analytics</p>
137
+ <ul>
138
+ <li>
139
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100">
140
+ <i class="fas fa-brain mr-3"></i>
141
+ <span>AI Predictions</span>
142
+ </a>
143
+ </li>
144
+ <li>
145
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mt-1">
146
+ <i class="fas fa-exclamation-triangle mr-3"></i>
147
+ <span>At-Risk Students</span>
148
+ </a>
149
+ </li>
150
+ <li>
151
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mt-1">
152
+ <i class="fas fa-chart-bar mr-3"></i>
153
+ <span>Reports</span>
154
+ </a>
155
+ </li>
156
+ </ul>
157
+ </div>
158
+ <div>
159
+ <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Settings</p>
160
+ <ul>
161
+ <li>
162
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100">
163
+ <i class="fas fa-cog mr-3"></i>
164
+ <span>Account</span>
165
+ </a>
166
+ </li>
167
+ <li>
168
+ <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mt-1">
169
+ <i class="fas fa-sign-out-alt mr-3"></i>
170
+ <span>Logout</span>
171
+ </a>
172
+ </li>
173
+ </ul>
174
+ </div>
175
+ </nav>
176
+ </div>
177
  </div>
178
 
179
  <!-- Main Content -->
180
+ <div class="flex-1 overflow-auto">
181
+ <!-- Top Navigation -->
182
+ <header class="bg-white border-b sticky top-0 z-10">
183
+ <div class="flex justify-between items-center p-4">
184
+ <div class="flex items-center">
185
+ <button id="sidebarToggle" class="mr-4 text-gray-600 hover:text-gray-900">
186
+ <i class="fas fa-bars"></i>
187
+ </button>
188
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2>
189
+ </div>
190
  <div class="flex items-center space-x-4">
191
  <div class="relative">
192
+ <button class="text-gray-600 hover:text-gray-900">
193
+ <i class="fas fa-bell"></i>
194
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
195
+ </button>
196
  </div>
197
+ <div class="flex items-center">
198
+ <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white font-semibold mr-2">JD</div>
199
+ <span class="text-gray-700">John Doe</span>
 
 
 
 
 
 
200
  </div>
201
  </div>
202
  </div>
203
  </header>
204
 
205
+ <!-- Main Content Area -->
206
  <main class="p-6">
207
  <!-- Stats Cards -->
208
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
209
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition">
210
+ <div class="flex justify-between items-start">
211
  <div>
212
+ <p class="text-sm font-medium text-gray-500">Total Students</p>
213
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">1,248</h3>
214
+ <p class="text-sm text-green-500 mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from last term</p>
215
  </div>
216
+ <div class="p-3 rounded-lg bg-blue-50 text-blue-600">
217
+ <i class="fas fa-users text-xl"></i>
218
  </div>
219
  </div>
 
 
 
220
  </div>
221
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition">
222
+ <div class="flex justify-between items-start">
223
  <div>
224
+ <p class="text-sm font-medium text-gray-500">At-Risk Students</p>
225
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">87</h3>
226
+ <p class="text-sm text-red-500 mt-2"><i class="fas fa-arrow-up mr-1"></i> 5% from last term</p>
227
  </div>
228
+ <div class="p-3 rounded-lg bg-red-50 text-red-600">
229
+ <i class="fas fa-exclamation-triangle text-xl"></i>
230
  </div>
231
  </div>
 
 
 
232
  </div>
233
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition">
234
+ <div class="flex justify-between items-start">
235
  <div>
236
+ <p class="text-sm font-medium text-gray-500">Avg. Attendance</p>
237
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">89%</h3>
238
+ <p class="text-sm text-yellow-500 mt-2"><i class="fas fa-arrow-down mr-1"></i> 3% from last term</p>
239
  </div>
240
+ <div class="p-3 rounded-lg bg-green-50 text-green-600">
241
+ <i class="fas fa-calendar-check text-xl"></i>
242
  </div>
243
  </div>
 
 
 
244
  </div>
245
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition">
246
+ <div class="flex justify-between items-start">
247
  <div>
248
+ <p class="text-sm font-medium text-gray-500">Prediction Accuracy</p>
249
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">92%</h3>
250
+ <p class="text-sm text-purple-500 mt-2"><i class="fas fa-arrow-up mr-1"></i> 7% improved</p>
251
  </div>
252
+ <div class="p-3 rounded-lg bg-purple-50 text-purple-600">
253
+ <i class="fas fa-brain text-xl"></i>
254
  </div>
255
  </div>
 
 
 
256
  </div>
257
  </div>
258
 
259
+ <!-- Charts Row -->
260
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
261
+ <!-- Performance Trend Chart -->
262
+ <div class="bg-white rounded-xl shadow-sm p-6 col-span-2">
263
  <div class="flex justify-between items-center mb-6">
264
+ <h3 class="text-lg font-semibold text-gray-800">Performance Trend Analysis</h3>
265
  <div class="flex space-x-2">
266
+ <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg">Term 1</button>
267
+ <button class="px-3 py-1 text-sm bg-purple-100 text-purple-600 rounded-lg">Term 2</button>
268
+ <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg">Term 3</button>
269
  </div>
270
  </div>
271
+ <div class="h-80">
272
  <canvas id="performanceChart"></canvas>
273
  </div>
274
  </div>
275
+
276
+ <!-- Risk Distribution Chart -->
277
+ <div class="bg-white rounded-xl shadow-sm p-6">
278
+ <h3 class="text-lg font-semibold text-gray-800 mb-6">Risk Level Distribution</h3>
279
+ <div class="h-80">
280
  <canvas id="riskChart"></canvas>
281
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
282
  </div>
283
  </div>
284
 
285
+ <!-- At-Risk Students and Recent Activity -->
286
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
287
+ <!-- At-Risk Students -->
288
+ <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
289
+ <div class="flex justify-between items-center mb-6">
290
+ <h3 class="text-lg font-semibold text-gray-800">At-Risk Students</h3>
291
+ <button class="text-sm text-purple-600 font-medium hover:underline">View All</button>
292
+ </div>
293
+ <div class="overflow-x-auto">
294
+ <table class="w-full">
295
+ <thead>
296
+ <tr class="text-left text-gray-500 text-sm border-b">
297
+ <th class="pb-3 font-medium">Student</th>
298
+ <th class="pb-3 font-medium">Class</th>
299
+ <th class="pb-3 font-medium">Risk Level</th>
300
+ <th class="pb-3 font-medium">Prediction Score</th>
301
+ <th class="pb-3 font-medium">Action</th>
302
+ </tr>
303
+ </thead>
304
+ <tbody class="divide-y">
305
+ <tr class="risk-high">
306
+ <td class="py-4">
307
+ <div class="flex items-center">
308
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 font-semibold mr-3">SM</div>
309
+ <div>
310
+ <p class="font-medium">Sarah Miller</p>
311
+ <p class="text-sm text-gray-500">ID: #STU-2045</p>
312
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  </div>
314
+ </td>
315
+ <td class="py-4">Grade 10-B</td>
316
+ <td class="py-4">
317
+ <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700">High Risk</span>
318
+ </td>
319
+ <td class="py-4">
320
+ <div class="flex items-center">
321
+ <div class="w-16 bg-gray-200 rounded-full h-1.5 mr-2">
322
+ <div class="bg-red-500 h-1.5 rounded-full" style="width: 85%"></div>
323
+ </div>
324
+ <span>85%</span>
 
325
  </div>
326
+ </td>
327
+ <td class="py-4">
328
+ <button class="text-sm text-purple-600 font-medium hover:underline">Intervene</button>
329
+ </td>
330
+ </tr>
331
+ <tr class="risk-medium">
332
+ <td class="py-4">
333
+ <div class="flex items-center">
334
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 font-semibold mr-3">RJ</div>
335
+ <div>
336
+ <p class="font-medium">Robert Johnson</p>
337
+ <p class="text-sm text-gray-500">ID: #STU-1872</p>
338
+ </div>
339
  </div>
340
+ </td>
341
+ <td class="py-4">Grade 11-A</td>
342
+ <td class="py-4">
343
+ <span class="px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Medium Risk</span>
344
+ </td>
345
+ <td class="py-4">
346
+ <div class="flex items-center">
347
+ <div class="w-16 bg-gray-200 rounded-full h-1.5 mr-2">
348
+ <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 65%"></div>
349
+ </div>
350
+ <span>65%</span>
 
 
 
351
  </div>
352
+ </td>
353
+ <td class="py-4">
354
+ <button class="text-sm text-purple-600 font-medium hover:underline">Monitor</button>
355
+ </td>
356
+ </tr>
357
+ <tr class="risk-low">
358
+ <td class="py-4">
359
+ <div class="flex items-center">
360
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-semibold mr-3">AD</div>
361
+ <div>
362
+ <p class="font-medium">Amanda Davis</p>
363
+ <p class="text-sm text-gray-500">ID: #STU-2156</p>
364
+ </div>
365
  </div>
366
+ </td>
367
+ <td class="py-4">Grade 9-C</td>
368
+ <td class="py-4">
369
+ <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">Low Risk</span>
370
+ </td>
371
+ <td class="py-4">
372
+ <div class="flex items-center">
373
+ <div class="w-16 bg-gray-200 rounded-full h-1.5 mr-2">
374
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 30%"></div>
375
+ </div>
376
+ <span>30%</span>
377
  </div>
378
+ </td>
379
+ <td class="py-4">
380
+ <button class="text-sm text-purple-600 font-medium hover:underline">Review</button>
381
+ </td>
382
+ </tr>
383
+ </tbody>
384
+ </table>
385
+ </div>
 
 
 
 
386
  </div>
 
387
 
388
+ <!-- Recent Activity -->
389
+ <div class="bg-white rounded-xl shadow-sm p-6">
390
+ <div class="flex justify-between items-center mb-6">
391
+ <h3 class="text-lg font-semibold text-gray-800">Recent Interventions</h3>
392
+ <button class="text-sm text-purple-600 font-medium hover:underline">View All</button>
393
+ </div>
394
  <div class="space-y-4">
395
+ <div class="flex">
396
+ <div class="mr-3">
397
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
398
+ <i class="fas fa-user-graduate"></i>
 
 
 
 
 
 
 
 
399
  </div>
400
  </div>
401
+ <div>
402
+ <p class="font-medium">Tutoring session scheduled</p>
403
+ <p class="text-sm text-gray-500">For Sarah Miller (High Risk)</p>
404
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
405
  </div>
406
+ </div>
407
+ <div class="flex">
408
+ <div class="mr-3">
409
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
410
+ <i class="fas fa-envelope"></i>
 
 
 
411
  </div>
412
  </div>
413
+ <div>
414
+ <p class="font-medium">Parent notification sent</p>
415
+ <p class="text-sm text-gray-500">For Robert Johnson (Medium Risk)</p>
416
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
417
  </div>
418
+ </div>
419
+ <div class="flex">
420
+ <div class="mr-3">
421
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
422
+ <i class="fas fa-chart-line"></i>
423
  </div>
424
+ </div>
425
+ <div>
426
+ <p class="font-medium">Performance improved</p>
427
+ <p class="text-sm text-gray-500">Michael Brown (Previously High Risk)</p>
428
+ <p class="text-xs text-gray-400 mt-1">1 day ago</p>
429
+ </div>
430
+ </div>
431
+ <div class="flex">
432
+ <div class="mr-3">
433
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
434
+ <i class="fas fa-exclamation-circle"></i>
435
  </div>
436
  </div>
437
+ <div>
438
+ <p class="font-medium">New at-risk student</p>
439
+ <p class="text-sm text-gray-500">Emily Wilson identified (Medium Risk)</p>
440
+ <p class="text-xs text-gray-400 mt-1">2 days ago</p>
441
+ </div>
442
  </div>
443
  </div>
 
 
 
444
  </div>
445
+ </div>
446
 
447
+ <!-- AI Prediction Section -->
448
+ <div class="bg-white rounded-xl shadow-sm p-6 mt-6">
449
+ <div class="flex justify-between items-center mb-6">
450
+ <h3 class="text-lg font-semibold text-gray-800">AI Performance Prediction</h3>
451
+ <button class="px-4 py-2 gradient-bg text-white rounded-lg font-medium hover:opacity-90 transition">
452
+ <i class="fas fa-plus mr-2"></i> New Prediction
453
+ </button>
454
+ </div>
455
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
456
+ <div>
457
+ <div class="mb-4">
458
+ <label class="block text-gray-700 mb-2">Select Student</label>
459
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
460
+ <option>Select a student</option>
461
+ <option>Sarah Miller (Grade 10-B)</option>
462
+ <option>Robert Johnson (Grade 11-A)</option>
463
+ <option>Amanda Davis (Grade 9-C)</option>
464
+ <option>Michael Brown (Grade 12-D)</option>
465
+ </select>
466
  </div>
467
+ <div class="mb-4">
468
+ <label class="block text-gray-700 mb-2">Academic Records</label>
469
+ <input type="file" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
 
 
 
 
 
 
470
  </div>
471
+ <div class="mb-4">
472
+ <label class="block text-gray-700 mb-2">Attendance Data</label>
473
+ <input type="file" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
 
 
 
 
 
 
474
  </div>
475
+ </div>
476
+ <div>
477
+ <div class="bg-gray-50 border rounded-xl p-6 h-full flex flex-col justify-center">
478
+ <div class="text-center">
479
+ <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
480
+ <i class="fas fa-brain text-white text-3xl"></i>
481
+ </div>
482
+ <h4 class="text-lg font-semibold text-gray-800 mb-2">Run Performance Prediction</h4>
483
+ <p class="text-gray-600 mb-6">Upload student data and our AI will analyze performance patterns to predict future outcomes and identify risk factors.</p>
484
+ <button class="px-6 py-2 gradient-bg text-white rounded-lg font-medium hover:opacity-90 transition">
485
+ <i class="fas fa-play mr-2"></i> Analyze Now
486
+ </button>
487
  </div>
 
488
  </div>
489
  </div>
 
 
 
 
490
  </div>
491
  </div>
492
  </main>
493
  </div>
494
  </div>
495
 
 
496
  <script>
497
+ // Authentication functions
498
+ function showRegisterForm() {
499
+ document.getElementById('loginForm').classList.add('hidden');
500
+ document.getElementById('registerForm').classList.remove('hidden');
501
+ }
502
+
503
+ function showLoginForm() {
504
+ document.getElementById('registerForm').classList.add('hidden');
505
+ document.getElementById('loginForm').classList.remove('hidden');
506
+ }
507
+
508
+ function closeAuthModal() {
509
+ document.getElementById('authModal').classList.add('hidden');
510
+ }
511
+
512
+ function login() {
513
+ const email = document.getElementById('loginEmail').value;
514
+ const password = document.getElementById('loginPassword').value;
515
+
516
+ if(email && password) {
517
+ // In a real app, you would validate credentials with a backend
518
+ document.getElementById('authModal').classList.add('hidden');
519
+ } else {
520
+ alert('Please enter both email and password');
521
+ }
522
+ }
523
+
524
+ function register() {
525
+ const name = document.getElementById('regName').value;
526
+ const email = document.getElementById('regEmail').value;
527
+ const password = document.getElementById('regPassword').value;
528
+ const confirmPassword = document.getElementById('regConfirmPassword').value;
529
+
530
+ if(password !== confirmPassword) {
531
+ alert('Passwords do not match');
532
+ return;
533
+ }
534
+
535
+ if(name && email && password) {
536
+ // In a real app, you would register the user with a backend
537
+ showLoginForm();
538
+ alert('Registration successful! Please login.');
539
+ } else {
540
+ alert('Please fill in all fields');
541
+ }
542
+ }
543
+
544
+ // Sidebar toggle
545
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
546
+ const sidebar = document.getElementById('sidebar');
547
+ sidebar.classList.toggle('hidden');
548
+ sidebar.classList.toggle('md:flex');
549
  });
550
 
551
+ // Initialize charts when DOM is loaded
552
+ document.addEventListener('DOMContentLoaded', function() {
553
+ // Performance Trend Chart
554
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
555
+ const performanceChart = new Chart(performanceCtx, {
556
+ type: 'line',
557
+ data: {
558
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7'],
559
+ datasets: [
560
+ {
561
+ label: 'High Performers',
562
+ data: [85, 82, 84, 87, 89, 88, 90],
563
+ borderColor: '#10b981',
564
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
565
+ tension: 0.3,
566
+ fill: true
567
+ },
568
+ {
569
+ label: 'Average Students',
570
+ data: [72, 70, 73, 75, 74, 76, 77],
571
+ borderColor: '#3b82f6',
572
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
573
+ tension: 0.3,
574
+ fill: true
575
+ },
576
+ {
577
+ label: 'At-Risk Students',
578
+ data: [58, 55, 53, 52, 50, 49, 48],
579
+ borderColor: '#ef4444',
580
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
581
+ tension: 0.3,
582
+ fill: true
583
+ }
584
+ ]
 
 
 
 
 
 
 
 
 
 
 
 
585
  },
586
+ options: {
587
+ responsive: true,
588
+ maintainAspectRatio: false,
589
+ plugins: {
590
+ legend: {
591
+ position: 'top',
592
+ },
593
+ tooltip: {
594
+ mode: 'index',
595
+ intersect: false,
596
+ }
597
+ },
598
+ scales: {
599
+ y: {
600
+ beginAtZero: false,
601
+ min: 40,
602
+ max: 100,
603
+ ticks: {
604
+ callback: function(value) {
605
+ return value + '%';
606
+ }
607
  }
608
  }
609
  }
610
  }
611
+ });
 
612
 
613
+ // Risk Distribution Chart
614
+ const riskCtx = document.getElementById('riskChart').getContext('2d');
615
+ const riskChart = new Chart(riskCtx, {
616
+ type: 'doughnut',
617
+ data: {
618
+ labels: ['High Risk', 'Medium Risk', 'Low Risk'],
619
+ datasets: [{
620
+ data: [15, 25, 60],
621
+ backgroundColor: [
622
+ '#ef4444',
623
+ '#f59e0b',
624
+ '#10b981'
625
+ ],
626
+ borderWidth: 0
627
+ }]
628
+ },
629
+ options: {
630
+ responsive: true,
631
+ maintainAspectRatio: false,
632
+ plugins: {
633
+ legend: {
634
+ position: 'bottom',
635
+ },
636
+ tooltip: {
637
+ callbacks: {
638
+ label: function(context) {
639
+ const label = context.label || '';
640
+ const value = context.raw || 0;
641
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
642
+ const percentage = Math.round((value / total) * 100);
643
+ return `${label}: ${percentage}% (${value} students)`;
644
+ }
645
+ }
646
+ }
647
+ },
648
+ cutout: '70%'
649
  }
650
+ });
 
651
 
652
+ // Show auth modal by default (in a real app, you'd check for existing session)
653
+ document.getElementById('authModal').classList.remove('hidden');
654
+ });
 
 
 
 
 
 
 
 
 
655
  </script>
656
  <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=Jansome/da-model" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
657
  </html>