Hugging Face's logo

Spaces:
melassy
/
dr-elassy7
Running

App Files Community
melassy commited on
Commit
3879fd7
·
verified ·
1 Parent(s): dfbb483

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1367 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dr Elassy7
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: red
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: dr-elassy7
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1367 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Smart Academic Advisor</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #3498db;
11
+ --secondary-color: #2ecc71;
12
+ --danger-color: #e74c3c;
13
+ --warning-color: #f39c12;
14
+ --dark-color: #2c3e50;
15
+ --light-color: #ecf0f1;
16
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: #f5f7fa;
28
+ color: #333;
29
+ }
30
+
31
+ .container {
32
+ display: flex;
33
+ min-height: 100vh;
34
+ }
35
+
36
+ /* Sidebar Styles */
37
+ .sidebar {
38
+ width: 250px;
39
+ background-color: var(--dark-color);
40
+ color: white;
41
+ padding: 20px 0;
42
+ transition: all 0.3s;
43
+ position: relative;
44
+ z-index: 10;
45
+ }
46
+
47
+ .sidebar-header {
48
+ text-align: center;
49
+ padding: 20px 0;
50
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
51
+ }
52
+
53
+ .sidebar-header h3 {
54
+ font-size: 1.3rem;
55
+ margin-bottom: 5px;
56
+ }
57
+
58
+ .sidebar-header p {
59
+ font-size: 0.8rem;
60
+ opacity: 0.8;
61
+ }
62
+
63
+ .sidebar-menu {
64
+ padding: 20px 0;
65
+ }
66
+
67
+ .menu-item {
68
+ padding: 12px 20px;
69
+ display: flex;
70
+ align-items: center;
71
+ cursor: pointer;
72
+ transition: all 0.2s;
73
+ border-left: 3px solid transparent;
74
+ }
75
+
76
+ .menu-item:hover {
77
+ background-color: rgba(255, 255, 255, 0.1);
78
+ border-left: 3px solid var(--primary-color);
79
+ }
80
+
81
+ .menu-item.active {
82
+ background-color: rgba(255, 255, 255, 0.1);
83
+ border-left: 3px solid var(--primary-color);
84
+ }
85
+
86
+ .menu-item i {
87
+ margin-right: 10px;
88
+ font-size: 1.1rem;
89
+ }
90
+
91
+ /* Main Content Styles */
92
+ .main-content {
93
+ flex: 1;
94
+ padding: 20px;
95
+ overflow-y: auto;
96
+ }
97
+
98
+ .header {
99
+ display: flex;
100
+ justify-content: space-between;
101
+ align-items: center;
102
+ margin-bottom: 20px;
103
+ padding-bottom: 15px;
104
+ border-bottom: 1px solid #ddd;
105
+ }
106
+
107
+ .header h2 {
108
+ color: var(--dark-color);
109
+ }
110
+
111
+ .user-info {
112
+ display: flex;
113
+ align-items: center;
114
+ }
115
+
116
+ .user-info img {
117
+ width: 40px;
118
+ height: 40px;
119
+ border-radius: 50%;
120
+ margin-right: 10px;
121
+ }
122
+
123
+ /* Dashboard Cards */
124
+ .dashboard-cards {
125
+ display: grid;
126
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
127
+ gap: 20px;
128
+ margin-bottom: 30px;
129
+ }
130
+
131
+ .card {
132
+ background-color: white;
133
+ border-radius: 8px;
134
+ padding: 20px;
135
+ box-shadow: var(--shadow);
136
+ transition: transform 0.3s;
137
+ }
138
+
139
+ .card:hover {
140
+ transform: translateY(-5px);
141
+ }
142
+
143
+ .card-header {
144
+ display: flex;
145
+ justify-content: space-between;
146
+ align-items: center;
147
+ margin-bottom: 15px;
148
+ }
149
+
150
+ .card-header h3 {
151
+ font-size: 1rem;
152
+ color: #555;
153
+ }
154
+
155
+ .card-header i {
156
+ font-size: 1.5rem;
157
+ color: var(--primary-color);
158
+ }
159
+
160
+ .card-body h2 {
161
+ font-size: 2rem;
162
+ margin-bottom: 5px;
163
+ color: var(--dark-color);
164
+ }
165
+
166
+ .card-body p {
167
+ font-size: 0.9rem;
168
+ color: #777;
169
+ }
170
+
171
+ .card.success {
172
+ border-top: 4px solid var(--secondary-color);
173
+ }
174
+
175
+ .card.warning {
176
+ border-top: 4px solid var(--warning-color);
177
+ }
178
+
179
+ .card.danger {
180
+ border-top: 4px solid var(--danger-color);
181
+ }
182
+
183
+ .card.primary {
184
+ border-top: 4px solid var(--primary-color);
185
+ }
186
+
187
+ /* Tables */
188
+ .table-container {
189
+ background-color: white;
190
+ border-radius: 8px;
191
+ padding: 20px;
192
+ box-shadow: var(--shadow);
193
+ margin-bottom: 30px;
194
+ overflow-x: auto;
195
+ }
196
+
197
+ table {
198
+ width: 100%;
199
+ border-collapse: collapse;
200
+ }
201
+
202
+ th, td {
203
+ padding: 12px 15px;
204
+ text-align: left;
205
+ border-bottom: 1px solid #ddd;
206
+ }
207
+
208
+ th {
209
+ background-color: #f8f9fa;
210
+ font-weight: 600;
211
+ color: #555;
212
+ }
213
+
214
+ tr:hover {
215
+ background-color: #f5f5f5;
216
+ }
217
+
218
+ .badge {
219
+ display: inline-block;
220
+ padding: 4px 8px;
221
+ border-radius: 20px;
222
+ font-size: 0.75rem;
223
+ font-weight: 600;
224
+ }
225
+
226
+ .badge-success {
227
+ background-color: #d4edda;
228
+ color: #155724;
229
+ }
230
+
231
+ .badge-warning {
232
+ background-color: #fff3cd;
233
+ color: #856404;
234
+ }
235
+
236
+ .badge-danger {
237
+ background-color: #f8d7da;
238
+ color: #721c24;
239
+ }
240
+
241
+ .action-btn {
242
+ padding: 5px 10px;
243
+ border: none;
244
+ border-radius: 4px;
245
+ cursor: pointer;
246
+ font-size: 0.8rem;
247
+ margin-right: 5px;
248
+ transition: all 0.2s;
249
+ }
250
+
251
+ .btn-primary {
252
+ background-color: var(--primary-color);
253
+ color: white;
254
+ }
255
+
256
+ .btn-primary:hover {
257
+ background-color: #2980b9;
258
+ }
259
+
260
+ .btn-success {
261
+ background-color: var(--secondary-color);
262
+ color: white;
263
+ }
264
+
265
+ .btn-success:hover {
266
+ background-color: #27ae60;
267
+ }
268
+
269
+ .btn-danger {
270
+ background-color: var(--danger-color);
271
+ color: white;
272
+ }
273
+
274
+ .btn-danger:hover {
275
+ background-color: #c0392b;
276
+ }
277
+
278
+ /* Forms */
279
+ .form-container {
280
+ background-color: white;
281
+ border-radius: 8px;
282
+ padding: 20px;
283
+ box-shadow: var(--shadow);
284
+ margin-bottom: 30px;
285
+ }
286
+
287
+ .form-group {
288
+ margin-bottom: 15px;
289
+ }
290
+
291
+ .form-group label {
292
+ display: block;
293
+ margin-bottom: 5px;
294
+ font-weight: 600;
295
+ color: #555;
296
+ }
297
+
298
+ .form-control {
299
+ width: 100%;
300
+ padding: 10px;
301
+ border: 1px solid #ddd;
302
+ border-radius: 4px;
303
+ font-size: 1rem;
304
+ }
305
+
306
+ .form-control:focus {
307
+ outline: none;
308
+ border-color: var(--primary-color);
309
+ box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
310
+ }
311
+
312
+ /* Student View */
313
+ .student-view {
314
+ max-width: 800px;
315
+ margin: 0 auto;
316
+ padding: 20px;
317
+ }
318
+
319
+ .student-card {
320
+ background-color: white;
321
+ border-radius: 8px;
322
+ padding: 30px;
323
+ box-shadow: var(--shadow);
324
+ margin-bottom: 30px;
325
+ }
326
+
327
+ .student-header {
328
+ text-align: center;
329
+ margin-bottom: 30px;
330
+ }
331
+
332
+ .student-header img {
333
+ width: 100px;
334
+ height: 100px;
335
+ border-radius: 50%;
336
+ object-fit: cover;
337
+ margin-bottom: 15px;
338
+ border: 3px solid var(--primary-color);
339
+ }
340
+
341
+ .student-header h2 {
342
+ color: var(--dark-color);
343
+ margin-bottom: 5px;
344
+ }
345
+
346
+ .student-header p {
347
+ color: #777;
348
+ }
349
+
350
+ .info-row {
351
+ display: flex;
352
+ justify-content: space-between;
353
+ margin-bottom: 15px;
354
+ padding-bottom: 15px;
355
+ border-bottom: 1px solid #eee;
356
+ }
357
+
358
+ .info-label {
359
+ font-weight: 600;
360
+ color: #555;
361
+ }
362
+
363
+ .info-value {
364
+ color: #333;
365
+ }
366
+
367
+ .gpa-value {
368
+ font-weight: 700;
369
+ font-size: 1.2rem;
370
+ }
371
+
372
+ .gpa-low {
373
+ color: var(--danger-color);
374
+ }
375
+
376
+ .gpa-medium {
377
+ color: var(--warning-color);
378
+ }
379
+
380
+ .gpa-high {
381
+ color: var(--secondary-color);
382
+ }
383
+
384
+ .whatsapp-btn {
385
+ display: inline-block;
386
+ background-color: #25D366;
387
+ color: white;
388
+ padding: 12px 20px;
389
+ border-radius: 50px;
390
+ text-decoration: none;
391
+ font-weight: 600;
392
+ margin-top: 20px;
393
+ transition: all 0.3s;
394
+ }
395
+
396
+ .whatsapp-btn:hover {
397
+ background-color: #128C7E;
398
+ transform: translateY(-2px);
399
+ }
400
+
401
+ .whatsapp-btn i {
402
+ margin-right: 8px;
403
+ }
404
+
405
+ /* Modal */
406
+ .modal {
407
+ display: none;
408
+ position: fixed;
409
+ top: 0;
410
+ left: 0;
411
+ width: 100%;
412
+ height: 100%;
413
+ background-color: rgba(0, 0, 0, 0.5);
414
+ z-index: 100;
415
+ justify-content: center;
416
+ align-items: center;
417
+ }
418
+
419
+ .modal-content {
420
+ background-color: white;
421
+ border-radius: 8px;
422
+ width: 90%;
423
+ max-width: 500px;
424
+ padding: 20px;
425
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
426
+ position: relative;
427
+ }
428
+
429
+ .close-modal {
430
+ position: absolute;
431
+ top: 15px;
432
+ right: 15px;
433
+ font-size: 1.5rem;
434
+ cursor: pointer;
435
+ color: #777;
436
+ }
437
+
438
+ /* Responsive */
439
+ @media (max-width: 768px) {
440
+ .container {
441
+ flex-direction: column;
442
+ }
443
+ .sidebar {
444
+ width: 100%;
445
+ height: auto;
446
+ }
447
+ .dashboard-cards {
448
+ grid-template-columns: 1fr;
449
+ }
450
+ }
451
+
452
+ /* Tabs */
453
+ .tabs {
454
+ display: flex;
455
+ border-bottom: 1px solid #ddd;
456
+ margin-bottom: 20px;
457
+ }
458
+
459
+ .tab {
460
+ padding: 10px 20px;
461
+ cursor: pointer;
462
+ border-bottom: 3px solid transparent;
463
+ transition: all 0.2s;
464
+ }
465
+
466
+ .tab.active {
467
+ border-bottom: 3px solid var(--primary-color);
468
+ color: var(--primary-color);
469
+ font-weight: 600;
470
+ }
471
+
472
+ .tab-content {
473
+ display: none;
474
+ }
475
+
476
+ .tab-content.active {
477
+ display: block;
478
+ }
479
+
480
+ /* Chart Container */
481
+ .chart-container {
482
+ height: 300px;
483
+ margin-bottom: 30px;
484
+ }
485
+ </style>
486
+ </head>
487
+ <body>
488
+ <div class="container">
489
+ <!-- Sidebar -->
490
+ <div class="sidebar">
491
+ <div class="sidebar-header">
492
+ <h3>Smart Academic Advisor</h3>
493
+ <p>Dr. Mohammed Al-Asi</p>
494
+ </div>
495
+ <div class="sidebar-menu">
496
+ <div class="menu-item active" onclick="showDashboard()">
497
+ <i class="fas fa-tachometer-alt"></i>
498
+ <span>Dashboard</span>
499
+ </div>
500
+ <div class="menu-item" onclick="showStudents()">
501
+ <i class="fas fa-users"></i>
502
+ <span>Students</span>
503
+ </div>
504
+ <div class="menu-item" onclick="showCourses()">
505
+ <i class="fas fa-book"></i>
506
+ <span>Courses</span>
507
+ </div>
508
+ <div class="menu-item" onclick="showExams()">
509
+ <i class="fas fa-calendar-alt"></i>
510
+ <span>Exams</span>
511
+ </div>
512
+ <div class="menu-item" onclick="showMessages()">
513
+ <i class="fas fa-comments"></i>
514
+ <span>Messages</span>
515
+ </div>
516
+ <div class="menu-item" onclick="showSettings()">
517
+ <i class="fas fa-cog"></i>
518
+ <span>Settings</span>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Main Content -->
524
+ <div class="main-content">
525
+ <!-- Dashboard View -->
526
+ <div id="dashboard-view">
527
+ <div class="header">
528
+ <h2>Dashboard</h2>
529
+ <div class="user-info">
530
+ <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User">
531
+ <span>Dr. Mohammed Al-Asi</span>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="dashboard-cards">
536
+ <div class="card success">
537
+ <div class="card-header">
538
+ <h3>Total Students</h3>
539
+ <i class="fas fa-users"></i>
540
+ </div>
541
+ <div class="card-body">
542
+ <h2>1,245</h2>
543
+ <p>+12% from last month</p>
544
+ </div>
545
+ </div>
546
+ <div class="card warning">
547
+ <div class="card-header">
548
+ <h3>At-Risk Students</h3>
549
+ <i class="fas fa-exclamation-triangle"></i>
550
+ </div>
551
+ <div class="card-body">
552
+ <h2>87</h2>
553
+ <p>GPA below 2.0</p>
554
+ </div>
555
+ </div>
556
+ <div class="card danger">
557
+ <div class="card-header">
558
+ <h3>Unread Messages</h3>
559
+ <i class="fas fa-comment"></i>
560
+ </div>
561
+ <div class="card-body">
562
+ <h2>23</h2>
563
+ <p>Waiting for response</p>
564
+ </div>
565
+ </div>
566
+ <div class="card primary">
567
+ <div class="card-header">
568
+ <h3>Upcoming Exams</h3>
569
+ <i class="fas fa-calendar"></i>
570
+ </div>
571
+ <div class="card-body">
572
+ <h2>15</h2>
573
+ <p>Next 7 days</p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+
578
+ <div class="chart-container">
579
+ <!-- This would be replaced with an actual chart in a real implementation -->
580
+ <div style="background-color: #f8f9fa; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
581
+ <p>Performance Analytics Chart</p>
582
+ </div>
583
+ </div>
584
+
585
+ <div class="table-container">
586
+ <h3>Recent At-Risk Students</h3>
587
+ <table>
588
+ <thead>
589
+ <tr>
590
+ <th>Student ID</th>
591
+ <th>Name</th>
592
+ <th>GPA</th>
593
+ <th>Major</th>
594
+ <th>Status</th>
595
+ <th>Actions</th>
596
+ </tr>
597
+ </thead>
598
+ <tbody>
599
+ <tr>
600
+ <td>20231001</td>
601
+ <td>Ahmed Mohammed</td>
602
+ <td>1.8</td>
603
+ <td>Computer Science</td>
604
+ <td><span class="badge badge-danger">Critical</span></td>
605
+ <td>
606
+ <button class="action-btn btn-primary" onclick="viewStudent('20231001')"><i class="fas fa-eye"></i></button>
607
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231001')"><i class="fab fa-whatsapp"></i></button>
608
+ </td>
609
+ </tr>
610
+ <tr>
611
+ <td>20231002</td>
612
+ <td>Fatima Ali</td>
613
+ <td>1.9</td>
614
+ <td>Business Administration</td>
615
+ <td><span class="badge badge-warning">Warning</span></td>
616
+ <td>
617
+ <button class="action-btn btn-primary" onclick="viewStudent('20231002')"><i class="fas fa-eye"></i></button>
618
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231002')"><i class="fab fa-whatsapp"></i></button>
619
+ </td>
620
+ </tr>
621
+ <tr>
622
+ <td>20231003</td>
623
+ <td>Omar Khalid</td>
624
+ <td>1.7</td>
625
+ <td>Electrical Engineering</td>
626
+ <td><span class="badge badge-danger">Critical</span></td>
627
+ <td>
628
+ <button class="action-btn btn-primary" onclick="viewStudent('20231003')"><i class="fas fa-eye"></i></button>
629
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231003')"><i class="fab fa-whatsapp"></i></button>
630
+ </td>
631
+ </tr>
632
+ <tr>
633
+ <td>20231004</td>
634
+ <td>Layla Hassan</td>
635
+ <td>1.95</td>
636
+ <td>Medicine</td>
637
+ <td><span class="badge badge-warning">Warning</span></td>
638
+ <td>
639
+ <button class="action-btn btn-primary" onclick="viewStudent('20231004')"><i class="fas fa-eye"></i></button>
640
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231004')"><i class="fab fa-whatsapp"></i></button>
641
+ </td>
642
+ </tr>
643
+ </tbody>
644
+ </table>
645
+ </div>
646
+ </div>
647
+
648
+ <!-- Students View -->
649
+ <div id="students-view" style="display: none;">
650
+ <div class="header">
651
+ <h2>Student Management</h2>
652
+ <button class="action-btn btn-primary" onclick="openImportModal()">
653
+ <i class="fas fa-file-import"></i> Import Students
654
+ </button>
655
+ </div>
656
+
657
+ <div class="tabs">
658
+ <div class="tab active" onclick="switchTab('all-students')">All Students</div>
659
+ <div class="tab" onclick="switchTab('at-risk')">At-Risk Students</div>
660
+ <div class="tab" onclick="switchTab('improving')">Improving Students</div>
661
+ </div>
662
+
663
+ <div class="tab-content active" id="all-students">
664
+ <div class="table-container">
665
+ <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
666
+ <div>
667
+ <input type="text" class="form-control" placeholder="Search students..." style="width: 300px;">
668
+ </div>
669
+ <div>
670
+ <button class="action-btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
671
+ <button class="action-btn btn-success"><i class="fas fa-download"></i> Export</button>
672
+ </div>
673
+ </div>
674
+ <table>
675
+ <thead>
676
+ <tr>
677
+ <th>Student ID</th>
678
+ <th>Name</th>
679
+ <th>GPA</th>
680
+ <th>Major</th>
681
+ <th>Status</th>
682
+ <th>Last Contact</th>
683
+ <th>Actions</th>
684
+ </tr>
685
+ </thead>
686
+ <tbody>
687
+ <tr>
688
+ <td>20231001</td>
689
+ <td>Ahmed Mohammed</td>
690
+ <td>1.8</td>
691
+ <td>Computer Science</td>
692
+ <td><span class="badge badge-danger">Critical</span></td>
693
+ <td>2 days ago</td>
694
+ <td>
695
+ <button class="action-btn btn-primary" onclick="viewStudent('20231001')"><i class="fas fa-eye"></i></button>
696
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231001')"><i class="fab fa-whatsapp"></i></button>
697
+ <button class="action-btn btn-danger" onclick="showDeleteModal('20231001')"><i class="fas fa-trash"></i></button>
698
+ </td>
699
+ </tr>
700
+ <tr>
701
+ <td>20231002</td>
702
+ <td>Fatima Ali</td>
703
+ <td>1.9</td>
704
+ <td>Business Administration</td>
705
+ <td><span class="badge badge-warning">Warning</span></td>
706
+ <td>1 week ago</td>
707
+ <td>
708
+ <button class="action-btn btn-primary" onclick="viewStudent('20231002')"><i class="fas fa-eye"></i></button>
709
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231002')"><i class="fab fa-whatsapp"></i></button>
710
+ <button class="action-btn btn-danger" onclick="showDeleteModal('20231002')"><i class="fas fa-trash"></i></button>
711
+ </td>
712
+ </tr>
713
+ <tr>
714
+ <td>20231005</td>
715
+ <td>Yousef Ibrahim</td>
716
+ <td>3.2</td>
717
+ <td>Mechanical Engineering</td>
718
+ <td><span class="badge badge-success">Good</span></td>
719
+ <td>Never</td>
720
+ <td>
721
+ <button class="action-btn btn-primary" onclick="viewStudent('20231005')"><i class="fas fa-eye"></i></button>
722
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231005')"><i class="fab fa-whatsapp"></i></button>
723
+ <button class="action-btn btn-danger" onclick="showDeleteModal('20231005')"><i class="fas fa-trash"></i></button>
724
+ </td>
725
+ </tr>
726
+ <tr>
727
+ <td>20231006</td>
728
+ <td>Mariam Saleh</td>
729
+ <td>2.8</td>
730
+ <td>Architecture</td>
731
+ <td><span class="badge badge-success">Good</span></td>
732
+ <td>Never</td>
733
+ <td>
734
+ <button class="action-btn btn-primary" onclick="viewStudent('20231006')"><i class="fas fa-eye"></i></button>
735
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231006')"><i class="fab fa-whatsapp"></i></button>
736
+ <button class="action-btn btn-danger" onclick="showDeleteModal('20231006')"><i class="fas fa-trash"></i></button>
737
+ </td>
738
+ </tr>
739
+ </tbody>
740
+ </table>
741
+ <div style="display: flex; justify-content: space-between; margin-top: 15px;">
742
+ <div>
743
+ <span>Showing 1 to 4 of 1245 entries</span>
744
+ </div>
745
+ <div>
746
+ <button class="action-btn">Previous</button>
747
+ <button class="action-btn btn-primary">1</button>
748
+ <button class="action-btn">2</button>
749
+ <button class="action-btn">3</button>
750
+ <button class="action-btn">Next</button>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <div class="tab-content" id="at-risk">
757
+ <div class="table-container">
758
+ <table>
759
+ <thead>
760
+ <tr>
761
+ <th>Student ID</th>
762
+ <th>Name</th>
763
+ <th>GPA</th>
764
+ <th>Major</th>
765
+ <th>Status</th>
766
+ <th>Last Contact</th>
767
+ <th>Actions</th>
768
+ </tr>
769
+ </thead>
770
+ <tbody>
771
+ <tr>
772
+ <td>20231001</td>
773
+ <td>Ahmed Mohammed</td>
774
+ <td>1.8</td>
775
+ <td>Computer Science</td>
776
+ <td><span class="badge badge-danger">Critical</span></td>
777
+ <td>2 days ago</td>
778
+ <td>
779
+ <button class="action-btn btn-primary" onclick="viewStudent('20231001')"><i class="fas fa-eye"></i></button>
780
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231001')"><i class="fab fa-whatsapp"></i></button>
781
+ <button class="action-btn btn-danger" onclick="showDeleteModal('20231001')"><i class="fas fa-trash"></i></button>
782
+ </td>
783
+ </tr>
784
+ <tr>
785
+ <td>20231002</td>
786
+ <td>Fatima Ali</td>
787
+ <td>1.9</td>
788
+ <td>Business Administration</td>
789
+ <td><span class="badge badge-warning">Warning</span></td>
790
+ <td>1 week ago</td>
791
+ <td>
792
+ <button class="action-btn btn-primary" onclick="viewStudent('20231002')"><i class="fas fa-eye"></i></button>
793
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231002')"><i class="fab fa-whatsapp"></i></button>
794
+ <button class="action-btn btn-danger" onclick="showDeleteModal('20231002')"><i class="fas fa-trash"></i></button>
795
+ </td>
796
+ </tr>
797
+ </tbody>
798
+ </table>
799
+ </div>
800
+ </div>
801
+
802
+ <div class="tab-content" id="improving">
803
+ <div class="table-container">
804
+ <table>
805
+ <thead>
806
+ <tr>
807
+ <th>Student ID</th>
808
+ <th>Name</th>
809
+ <th>GPA</th>
810
+ <th>Major</th>
811
+ <th>Status</th>
812
+ <th>Improvement</th>
813
+ <th>Actions</th>
814
+ </tr>
815
+ </thead>
816
+ <tbody>
817
+ <tr>
818
+ <td>20231007</td>
819
+ <td>Khalid Omar</td>
820
+ <td>2.1</td>
821
+ <td>Civil Engineering</td>
822
+ <td><span class="badge badge-success">Improving</span></td>
823
+ <td>+0.4 last semester</td>
824
+ <td>
825
+ <button class="action-btn btn-primary" onclick="viewStudent('20231007')"><i class="fas fa-eye"></i></button>
826
+ <button class="action-btn btn-success" onclick="sendWhatsApp('20231007')"><i class="fab fa-whatsapp"></i></button>
827
+ <button class="action-btn btn-danger" onclick="showDeleteModal('20231007')"><i class="fas fa-trash"></i></button>
828
+ </td>
829
+ </tr>
830
+ </tbody>
831
+ </table>
832
+ </div>
833
+ </div>
834
+ </div>
835
+
836
+ <!-- Courses View -->
837
+ <div id="courses-view" style="display: none;">
838
+ <div class="header">
839
+ <h2>Course Management</h2>
840
+ <button class="action-btn btn-primary" onclick="openAddCourseModal()">
841
+ <i class="fas fa-plus"></i> Add Course
842
+ </button>
843
+ </div>
844
+
845
+ <div class="table-container">
846
+ <table>
847
+ <thead>
848
+ <tr>
849
+ <th>Course Code</th>
850
+ <th>Course Name</th>
851
+ <th>Department</th>
852
+ <th>Credits</th>
853
+ <th>At-Risk Students</th>
854
+ <th>Actions</th>
855
+ </tr>
856
+ </thead>
857
+ <tbody>
858
+ <tr>
859
+ <td>CS101</td>
860
+ <td>Introduction to Programming</td>
861
+ <td>Computer Science</td>
862
+ <td>3</td>
863
+ <td>12</td>
864
+ <td>
865
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i></button>
866
+ <button class="action-btn btn-success"><i class="fas fa-edit"></i></button>
867
+ <button class="action-btn btn-danger"><i class="fas fa-trash"></i></button>
868
+ </td>
869
+ </tr>
870
+ <tr>
871
+ <td>MATH201</td>
872
+ <td>Calculus II</td>
873
+ <td>Mathematics</td>
874
+ <td>4</td>
875
+ <td>18</td>
876
+ <td>
877
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i></button>
878
+ <button class="action-btn btn-success"><i class="fas fa-edit"></i></button>
879
+ <button class="action-btn btn-danger"><i class="fas fa-trash"></i></button>
880
+ </td>
881
+ </tr>
882
+ <tr>
883
+ <td>BUS101</td>
884
+ <td>Principles of Management</td>
885
+ <td>Business Administration</td>
886
+ <td>3</td>
887
+ <td>8</td>
888
+ <td>
889
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i></button>
890
+ <button class="action-btn btn-success"><i class="fas fa-edit"></i></button>
891
+ <button class="action-btn btn-danger"><i class="fas fa-trash"></i></button>
892
+ </td>
893
+ </tr>
894
+ </tbody>
895
+ </table>
896
+ </div>
897
+ </div>
898
+
899
+ <!-- Exams View -->
900
+ <div id="exams-view" style="display: none;">
901
+ <div class="header">
902
+ <h2>Exam Schedule</h2>
903
+ <button class="action-btn btn-primary" onclick="openImportExamModal()">
904
+ <i class="fas fa-file-import"></i> Import Schedule
905
+ </button>
906
+ </div>
907
+
908
+ <div class="table-container">
909
+ <table>
910
+ <thead>
911
+ <tr>
912
+ <th>Course</th>
913
+ <th>Date</th>
914
+ <th>Time</th>
915
+ <th>Location</th>
916
+ <th>At-Risk Students</th>
917
+ <th>Actions</th>
918
+ </tr>
919
+ </thead>
920
+ <tbody>
921
+ <tr>
922
+ <td>CS101 - Introduction to Programming</td>
923
+ <td>15/06/2023</td>
924
+ <td>09:00 - 11:00</td>
925
+ <td>Building A, Room 203</td>
926
+ <td>12</td>
927
+ <td>
928
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i></button>
929
+ <button class="action-btn btn-success"><i class="fas fa-bell"></i> Notify</button>
930
+ </td>
931
+ </tr>
932
+ <tr>
933
+ <td>MATH201 - Calculus II</td>
934
+ <td>17/06/2023</td>
935
+ <td>13:00 - 15:00</td>
936
+ <td>Building C, Room 105</td>
937
+ <td>18</td>
938
+ <td>
939
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i></button>
940
+ <button class="action-btn btn-success"><i class="fas fa-bell"></i> Notify</button>
941
+ </td>
942
+ </tr>
943
+ <tr>
944
+ <td>BUS101 - Principles of Management</td>
945
+ <td>20/06/2023</td>
946
+ <td>10:00 - 12:00</td>
947
+ <td>Building B, Room 301</td>
948
+ <td>8</td>
949
+ <td>
950
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i></button>
951
+ <button class="action-btn btn-success"><i class="fas fa-bell"></i> Notify</button>
952
+ </td>
953
+ </tr>
954
+ </tbody>
955
+ </table>
956
+ </div>
957
+ </div>
958
+
959
+ <!-- Messages View -->
960
+ <div id="messages-view" style="display: none;">
961
+ <div class="header">
962
+ <h2>Student Messages</h2>
963
+ <button class="action-btn btn-primary" onclick="openNewMessageModal()">
964
+ <i class="fas fa-plus"></i> New Message
965
+ </button>
966
+ </div>
967
+
968
+ <div class="table-container">
969
+ <table>
970
+ <thead>
971
+ <tr>
972
+ <th>Student</th>
973
+ <th>Message</th>
974
+ <th>Date</th>
975
+ <th>Status</th>
976
+ <th>Actions</th>
977
+ </tr>
978
+ </thead>
979
+ <tbody>
980
+ <tr>
981
+ <td>Ahmed Mohammed (20231001)</td>
982
+ <td>I need help with CS101 assignment...</td>
983
+ <td>2 days ago</td>
984
+ <td><span class="badge badge-warning">Pending</span></td>
985
+ <td>
986
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i> View</button>
987
+ <button class="action-btn btn-success"><i class="fas fa-reply"></i> Reply</button>
988
+ </td>
989
+ </tr>
990
+ <tr>
991
+ <td>Fatima Ali (20231002)</td>
992
+ <td>Can I get an extension for MATH201?</td>
993
+ <td>1 week ago</td>
994
+ <td><span class="badge badge-success">Replied</span></td>
995
+ <td>
996
+ <button class="action-btn btn-primary"><i class="fas fa-eye"></i> View</button>
997
+ <button class="action-btn btn-success"><i class="fas fa-reply"></i> Reply</button>
998
+ </td>
999
+ </tr>
1000
+ </tbody>
1001
+ </table>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <!-- Settings View -->
1006
+ <div id="settings-view" style="display: none;">
1007
+ <div class="header">
1008
+ <h2>Settings</h2>
1009
+ </div>
1010
+
1011
+ <div class="form-container">
1012
+ <h3>WhatsApp Integration</h3>
1013
+ <div class="form-group">
1014
+ <label for="whatsapp-number">WhatsApp Number</label>
1015
+ <input type="text" id="whatsapp-number" class="form-control" placeholder="+966501234567">
1016
+ </div>
1017
+ <div class="form-group">
1018
+ <label for="whatsapp-message">Default Message Template</label>
1019
+ <textarea id="whatsapp-message" class="form-control" rows="5">Dear {student_name},
1020
+
1021
+ We noticed your current GPA is {gpa}. We're here to help you improve your academic performance.
1022
+
1023
+ Please review your courses at: {portal_link}
1024
+ Exam schedule: {exam_link}
1025
+
1026
+ You can reply to this message for assistance or schedule a meeting with Dr. Mohammed Al-Asi.
1027
+
1028
+ Best regards,
1029
+ Academic Advisor</textarea>
1030
+ </div>
1031
+ <button class="action-btn btn-primary">Save Settings</button>
1032
+ </div>
1033
+
1034
+ <div class="form-container">
1035
+ <h3>Data Import Settings</h3>
1036
+ <div class="form-group">
1037
+ <label for="student-portal">Student Portal URL</label>
1038
+ <input type="text" id="student-portal" class="form-control" placeholder="https://portal.university.edu.sa">
1039
+ </div>
1040
+ <div class="form-group">
1041
+ <label for="exam-portal">Exam Portal URL</label>
1042
+ <input type="text" id="exam-portal" class="form-control" placeholder="https://exams.university.edu.sa">
1043
+ </div>
1044
+ <button class="action-btn btn-primary">Save Settings</button>
1045
+ </div>
1046
+ </div>
1047
+
1048
+ <!-- Student Detail View (hidden by default) -->
1049
+ <div id="student-detail-view" style="display: none;">
1050
+ <div class="header">
1051
+ <h2>Student Profile</h2>
1052
+ <button class="action-btn btn-primary" onclick="backToStudents()">
1053
+ <i class="fas fa-arrow-left"></i> Back to Students
1054
+ </button>
1055
+ </div>
1056
+
1057
+ <div class="student-view">
1058
+ <div class="student-card">
1059
+ <div class="student-header">
1060
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student">
1061
+ <h2 id="student-name">Ahmed Mohammed</h2>
1062
+ <p id="student-id">Student ID: 20231001</p>
1063
+ </div>
1064
+
1065
+ <div class="info-row">
1066
+ <span class="info-label">Major:</span>
1067
+ <span class="info-value" id="student-major">Computer Science</span>
1068
+ </div>
1069
+ <div class="info-row">
1070
+ <span class="info-label">Academic Level:</span>
1071
+ <span class="info-value" id="student-level">Sophomore</span>
1072
+ </div>
1073
+ <div class="info-row">
1074
+ <span class="info-label">Current GPA:</span>
1075
+ <span class="info-value gpa-value gpa-low" id="student-gpa">1.8</span>
1076
+ </div>
1077
+ <div class="info-row">
1078
+ <span class="info-label">Status:</span>
1079
+ <span class="info-value badge badge-danger" id="student-status">At Risk</span>
1080
+ </div>
1081
+ <div class="info-row">
1082
+ <span class="info-label">Last Contact:</span>
1083
+ <span class="info-value" id="student-contact">2 days ago</span>
1084
+ </div>
1085
+
1086
+ <div style="text-align: center; margin-top: 30px;">
1087
+ <a href="#" class="whatsapp-btn" onclick="sendWhatsApp('20231001')">
1088
+ <i class="fab fa-whatsapp"></i> Send WhatsApp Message
1089
+ </a>
1090
+ </div>
1091
+ </div>
1092
+
1093
+ <div class="table-container" style="margin-top: 30px;">
1094
+ <h3>Registered Courses</h3>
1095
+ <table>
1096
+ <thead>
1097
+ <tr>
1098
+ <th>Course Code</th>
1099
+ <th>Course Name</th>
1100
+ <th>Credits</th>
1101
+ <th>Current Grade</th>
1102
+ <th>Instructor</th>
1103
+ </tr>
1104
+ </thead>
1105
+ <tbody>
1106
+ <tr>
1107
+ <td>CS101</td>
1108
+ <td>Introduction to Programming</td>
1109
+ <td>3</td>
1110
+ <td>D+</td>
1111
+ <td>Dr. Ali Khan</td>
1112
+ </tr>
1113
+ <tr>
1114
+ <td>MATH201</td>
1115
+ <td>Calculus II</td>
1116
+ <td>4</td>
1117
+ <td>D</td>
1118
+ <td>Dr. Samir Ahmed</td>
1119
+ </tr>
1120
+ <tr>
1121
+ <td>ENG102</td>
1122
+ <td>Academic Writing</td>
1123
+ <td>2</td>
1124
+ <td>C</td>
1125
+ <td>Dr. Layla Mohammed</td>
1126
+ </tr>
1127
+ </tbody>
1128
+ </table>
1129
+ </div>
1130
+
1131
+ <div class="table-container" style="margin-top: 30px;">
1132
+ <h3>Upcoming Exams</h3>
1133
+ <table>
1134
+ <thead>
1135
+ <tr>
1136
+ <th>Course</th>
1137
+ <th>Date</th>
1138
+ <th>Time</th>
1139
+ <th>Location</th>
1140
+ </tr>
1141
+ </thead>
1142
+ <tbody>
1143
+ <tr>
1144
+ <td>CS101 - Introduction to Programming</td>
1145
+ <td>15/06/2023</td>
1146
+ <td>09:00 - 11:00</td>
1147
+ <td>Building A, Room 203</td>
1148
+ </tr>
1149
+ <tr>
1150
+ <td>MATH201 - Calculus II</td>
1151
+ <td>17/06/2023</td>
1152
+ <td>13:00 - 15:00</td>
1153
+ <td>Building C, Room 105</td>
1154
+ </tr>
1155
+ </tbody>
1156
+ </table>
1157
+ </div>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ </div>
1162
+
1163
+ <!-- Modals -->
1164
+ <div class="modal" id="import-modal">
1165
+ <div class="modal-content">
1166
+ <span class="close-modal" onclick="closeModal('import-modal')">&times;</span>
1167
+ <h3>Import Student Data</h3>
1168
+ <div class="form-group">
1169
+ <label>Select Excel File</label>
1170
+ <input type="file" class="form-control" accept=".xlsx, .xls">
1171
+ </div>
1172
+ <div class="form-group">
1173
+ <label>Data Type</label>
1174
+ <select class="form-control">
1175
+ <option>Student Records</option>
1176
+ <option>Course Registration</option>
1177
+ <option>Grades</option>
1178
+ </select>
1179
+ </div>
1180
+ <button class="action-btn btn-primary" style="width: 100%; margin-top: 15px;">Import Data</button>
1181
+ </div>
1182
+ </div>
1183
+
1184
+ <div class="modal" id="add-course-modal">
1185
+ <div class="modal-content">
1186
+ <span class="close-modal" onclick="closeModal('add-course-modal')">&times;</span>
1187
+ <h3>Add New Course</h3>
1188
+ <div class="form-group">
1189
+ <label>Course Code</label>
1190
+ <input type="text" class="form-control" placeholder="e.g. CS101">
1191
+ </div>
1192
+ <div class="form-group">
1193
+ <label>Course Name</label>
1194
+ <input type="text" class="form-control" placeholder="e.g. Introduction to Programming">
1195
+ </div>
1196
+ <div class="form-group">
1197
+ <label>Department</label>
1198
+ <select class="form-control">
1199
+ <option>Computer Science</option>
1200
+ <option>Mathematics</option>
1201
+ <option>Business Administration</option>
1202
+ <option>Engineering</option>
1203
+ </select>
1204
+ </div>
1205
+ <div class="form-group">
1206
+ <label>Credit Hours</label>
1207
+ <input type="number" class="form-control" placeholder="e.g. 3">
1208
+ </div>
1209
+ <button class="action-btn btn-primary" style="width: 100%; margin-top: 15px;">Add Course</button>
1210
+ </div>
1211
+ </div>
1212
+
1213
+ <div class="modal" id="delete-modal">
1214
+ <div class="modal-content">
1215
+ <span class="close-modal" onclick="closeModal('delete-modal')">&times;</span>
1216
+ <h3>Confirm Deletion</h3>
1217
+ <p>Are you sure you want to delete this student record? This action cannot be undone.</p>
1218
+ <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
1219
+ <button class="action-btn" onclick="closeModal('delete-modal')" style="margin-right: 10px;">Cancel</button>
1220
+ <button class="action-btn btn-danger">Delete</button>
1221
+ </div>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <script>
1226
+ // Navigation functions
1227
+ function showDashboard() {
1228
+ hideAllViews();
1229
+ document.getElementById('dashboard-view').style.display = 'block';
1230
+ setActiveMenuItem('dashboard');
1231
+ }
1232
+
1233
+ function showStudents() {
1234
+ hideAllViews();
1235
+ document.getElementById('students-view').style.display = 'block';
1236
+ setActiveMenuItem('students');
1237
+ }
1238
+
1239
+ function showCourses() {
1240
+ hideAllViews();
1241
+ document.getElementById('courses-view').style.display = 'block';
1242
+ setActiveMenuItem('courses');
1243
+ }
1244
+
1245
+ function showExams() {
1246
+ hideAllViews();
1247
+ document.getElementById('exams-view').style.display = 'block';
1248
+ setActiveMenuItem('exams');
1249
+ }
1250
+
1251
+ function showMessages() {
1252
+ hideAllViews();
1253
+ document.getElementById('messages-view').style.display = 'block';
1254
+ setActiveMenuItem('messages');
1255
+ }
1256
+
1257
+ function showSettings() {
1258
+ hideAllViews();
1259
+ document.getElementById('settings-view').style.display = 'block';
1260
+ setActiveMenuItem('settings');
1261
+ }
1262
+
1263
+ function viewStudent(studentId) {
1264
+ hideAllViews();
1265
+ document.getElementById('student-detail-view').style.display = 'block';
1266
+
1267
+ // In a real app, we would fetch student data based on ID
1268
+ // For demo purposes, we'll just update with sample data
1269
+ if(studentId === '20231001') {
1270
+ document.getElementById('student-name').textContent = 'Ahmed Mohammed';
1271
+ document.getElementById('student-id').textContent = 'Student ID: 20231001';
1272
+ document.getElementById('student-major').textContent = 'Computer Science';
1273
+ document.getElementById('student-level').textContent = 'Sophomore';
1274
+ document.getElementById('student-gpa').textContent = '1.8';
1275
+ document.getElementById('student-status').textContent = 'At Risk';
1276
+ document.getElementById('student-contact').textContent = '2 days ago';
1277
+ } else if(studentId === '20231002') {
1278
+ document.getElementById('student-name').textContent = 'Fatima Ali';
1279
+ document.getElementById('student-id').textContent = 'Student ID: 20231002';
1280
+ document.getElementById('student-major').textContent = 'Business Administration';
1281
+ document.getElementById('student-level').textContent = 'Junior';
1282
+ document.getElementById('student-gpa').textContent = '1.9';
1283
+ document.getElementById('student-status').textContent = 'Warning';
1284
+ document.getElementById('student-contact').textContent = '1 week ago';
1285
+ }
1286
+ }
1287
+
1288
+ function backToStudents() {
1289
+ hideAllViews();
1290
+ document.getElementById('students-view').style.display = 'block';
1291
+ setActiveMenuItem('students');
1292
+ }
1293
+
1294
+ function hideAllViews() {
1295
+ const views = ['dashboard-view', 'students-view', 'courses-view', 'exams-view', 'messages-view', 'settings-view', 'student-detail-view'];
1296
+ views.forEach(view => {
1297
+ document.getElementById(view).style.display = 'none';
1298
+ });
1299
+ }
1300
+
1301
+ function setActiveMenuItem(menuItem) {
1302
+ const menuItems = document.querySelectorAll('.menu-item');
1303
+ menuItems.forEach(item => {
1304
+ item.classList.remove('active');
1305
+ });
1306
+
1307
+ // Find and activate the correct menu item
1308
+ menuItems.forEach(item => {
1309
+ if(item.textContent.toLowerCase().includes(menuItem)) {
1310
+ item.classList.add('active');
1311
+ }
1312
+ });
1313
+ }
1314
+
1315
+ // Tab switching
1316
+ function switchTab(tabId) {
1317
+ const tabs = document.querySelectorAll('.tab');
1318
+ tabs.forEach(tab => {
1319
+ tab.classList.remove('active');
1320
+ });
1321
+
1322
+ const tabContents = document.querySelectorAll('.tab-content');
1323
+ tabContents.forEach(content => {
1324
+ content.classList.remove('active');
1325
+ });
1326
+
1327
+ // Activate selected tab
1328
+ document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('active');
1329
+ document.getElementById(tabId).classList.add('active');
1330
+ }
1331
+
1332
+ // Modal functions
1333
+ function openImportModal() {
1334
+ document.getElementById('import-modal').style.display = 'flex';
1335
+ }
1336
+
1337
+ function openAddCourseModal() {
1338
+ document.getElementById('add-course-modal').style.display = 'flex';
1339
+ }
1340
+
1341
+ function showDeleteModal(studentId) {
1342
+ document.getElementById('delete-modal').style.display = 'flex';
1343
+ // In a real app, we would store the student ID to delete when confirmed
1344
+ }
1345
+
1346
+ function closeModal(modalId) {
1347
+ document.getElementById(modalId).style.display = 'none';
1348
+ }
1349
+
1350
+ // WhatsApp integration (simulated)
1351
+ function sendWhatsApp(studentId) {
1352
+ // In a real implementation, this would open WhatsApp with a pre-filled message
1353
+ alert(`Preparing WhatsApp message for student ${studentId}. In a real app, this would open WhatsApp with a pre-filled message.`);
1354
+
1355
+ // Example of what would happen in a real implementation:
1356
+ // const phoneNumber = '966501234567';
1357
+ // const message = `Dear Student,\n\nWe noticed your academic performance needs improvement...`;
1358
+ // window.open(`https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`, '_blank');
1359
+ }
1360
+
1361
+ // Initialize dashboard view
1362
+ document.addEventListener('DOMContentLoaded', function() {
1363
+ showDashboard();
1364
+ });
1365
+ </script>
1366
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1367
+ </html>