Hugging Face's logo

Spaces:
dramit80
/
app-futbta-11
Running

App Files Community
dramit80 commited on
Commit
7b9f00e
·
verified ·
1 Parent(s): 704d878

Upload folder using huggingface_hub

Browse files
Files changed (3) hide show
  1. assets/css/styles.css +996 -0
  2. assets/js/script.js +417 -0
  3. index.html +917 -19
assets/css/styles.css ADDED
@@ -0,0 +1,996 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ :root {
8
+ --primary-color: #4a69bd;
9
+ --secondary-color: #6c5ce7;
10
+ --success-color: #27ae60;
11
+ --warning-color: #f39c12;
12
+ --danger-color: #e74c3c;
13
+ --dark-color: #2c3e50;
14
+ --light-color: #ecf0f1;
15
+ --background: #f8f9fa;
16
+ --card-shadow: 0 2px 10px rgba(0,0,0,0.1);
17
+ --transition: all 0.3s ease;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22
+ background-color: var(--background);
23
+ color: var(--dark-color);
24
+ line-height: 1.6;
25
+ }
26
+
27
+ .container {
28
+ max-width: 1400px;
29
+ margin: 0 auto;
30
+ padding: 0 20px;
31
+ }
32
+
33
+ /* Header Styles */
34
+ .header {
35
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
36
+ color: white;
37
+ padding: 1rem 0;
38
+ box-shadow: var(--card-shadow);
39
+ position: sticky;
40
+ top: 0;
41
+ z-index: 1000;
42
+ }
43
+
44
+ .header-content {
45
+ display: flex;
46
+ justify-content: space-between;
47
+ align-items: center;
48
+ }
49
+
50
+ .logo {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 10px;
54
+ font-size: 1.5rem;
55
+ font-weight: bold;
56
+ }
57
+
58
+ .logo i {
59
+ font-size: 2rem;
60
+ }
61
+
62
+ .nav-list {
63
+ display: flex;
64
+ list-style: none;
65
+ gap: 2rem;
66
+ }
67
+
68
+ .nav-link {
69
+ color: white;
70
+ text-decoration: none;
71
+ padding: 0.5rem 1rem;
72
+ border-radius: 5px;
73
+ transition: var(--transition);
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 5px;
77
+ }
78
+
79
+ .nav-link:hover,
80
+ .nav-link.active {
81
+ background: rgba(255,255,255,0.2);
82
+ }
83
+
84
+ .header-actions {
85
+ display: flex;
86
+ gap: 1rem;
87
+ }
88
+
89
+ .btn-icon {
90
+ background: none;
91
+ border: none;
92
+ color: white;
93
+ font-size: 1.2rem;
94
+ cursor: pointer;
95
+ padding: 0.5rem;
96
+ border-radius: 5px;
97
+ transition: var(--transition);
98
+ }
99
+
100
+ .btn-icon:hover {
101
+ background: rgba(255,255,255,0.2);
102
+ }
103
+
104
+ /* Main Content */
105
+ .main {
106
+ padding: 2rem 0;
107
+ min-height: calc(100vh - 80px);
108
+ }
109
+
110
+ .content-section {
111
+ display: none;
112
+ }
113
+
114
+ .content-section.active {
115
+ display: block;
116
+ animation: fadeIn 0.3s ease;
117
+ }
118
+
119
+ @keyframes fadeIn {
120
+ from { opacity: 0; transform: translateY(10px); }
121
+ to { opacity: 1; transform: translateY(0); }
122
+ }
123
+
124
+ .section-header {
125
+ display: flex;
126
+ justify-content: space-between;
127
+ align-items: center;
128
+ margin-bottom: 2rem;
129
+ }
130
+
131
+ .section-header h1 {
132
+ color: var(--dark-color);
133
+ font-size: 2rem;
134
+ }
135
+
136
+ .section-header p {
137
+ color: #666;
138
+ margin-top: 0.5rem;
139
+ }
140
+
141
+ /* Buttons */
142
+ .btn-primary {
143
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
144
+ color: white;
145
+ border: none;
146
+ padding: 0.75rem 1.5rem;
147
+ border-radius: 5px;
148
+ cursor: pointer;
149
+ font-size: 1rem;
150
+ transition: var(--transition);
151
+ display: inline-flex;
152
+ align-items: center;
153
+ gap: 5px;
154
+ }
155
+
156
+ .btn-primary:hover {
157
+ transform: translateY(-2px);
158
+ box-shadow: 0 5px 15px rgba(74, 105, 189, 0.3);
159
+ }
160
+
161
+ .btn-secondary {
162
+ background: white;
163
+ color: var(--primary-color);
164
+ border: 2px solid var(--primary-color);
165
+ padding: 0.5rem 1rem;
166
+ border-radius: 5px;
167
+ cursor: pointer;
168
+ font-size: 0.9rem;
169
+ transition: var(--transition);
170
+ }
171
+
172
+ .btn-secondary:hover {
173
+ background: var(--primary-color);
174
+ color: white;
175
+ }
176
+
177
+ .btn-icon-small {
178
+ background: none;
179
+ border: none;
180
+ color: var(--primary-color);
181
+ font-size: 1rem;
182
+ cursor: pointer;
183
+ padding: 0.25rem 0.5rem;
184
+ border-radius: 3px;
185
+ transition: var(--transition);
186
+ }
187
+
188
+ .btn-icon-small:hover {
189
+ background: rgba(74, 105, 189, 0.1);
190
+ }
191
+
192
+ /* Dashboard Stats */
193
+ .stats-grid {
194
+ display: grid;
195
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
196
+ gap: 1.5rem;
197
+ margin-bottom: 2rem;
198
+ }
199
+
200
+ .stat-card {
201
+ background: white;
202
+ padding: 1.5rem;
203
+ border-radius: 10px;
204
+ box-shadow: var(--card-shadow);
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 1rem;
208
+ transition: var(--transition);
209
+ }
210
+
211
+ .stat-card:hover {
212
+ transform: translateY(-5px);
213
+ box-shadow: 0 5px 20px rgba(0,0,0,0.15);
214
+ }
215
+
216
+ .stat-icon {
217
+ width: 60px;
218
+ height: 60px;
219
+ border-radius: 10px;
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: center;
223
+ font-size: 1.5rem;
224
+ color: white;
225
+ }
226
+
227
+ .stat-icon.blue { background: linear-gradient(135deg, #667eea, #764ba2); }
228
+ .stat-icon.green { background: linear-gradient(135deg, #27ae60, #2ecc71); }
229
+ .stat-icon.purple { background: linear-gradient(135deg, #f093fb, #f5576c); }
230
+ .stat-icon.orange { background: linear-gradient(135deg, #fa709a, #fee140); }
231
+
232
+ .stat-info h3 {
233
+ font-size: 2rem;
234
+ color: var(--dark-color);
235
+ }
236
+
237
+ .stat-info p {
238
+ color: #666;
239
+ font-size: 0.9rem;
240
+ }
241
+
242
+ /* Dashboard Grid */
243
+ .dashboard-grid {
244
+ display: grid;
245
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
246
+ gap: 1.5rem;
247
+ }
248
+
249
+ /* Cards */
250
+ .card {
251
+ background: white;
252
+ border-radius: 10px;
253
+ box-shadow: var(--card-shadow);
254
+ margin-bottom: 1.5rem;
255
+ overflow: hidden;
256
+ }
257
+
258
+ .card-header {
259
+ padding: 1.5rem;
260
+ border-bottom: 1px solid #eee;
261
+ display: flex;
262
+ justify-content: space-between;
263
+ align-items: center;
264
+ }
265
+
266
+ .card-header h3 {
267
+ color: var(--dark-color);
268
+ font-size: 1.2rem;
269
+ }
270
+
271
+ .card-body {
272
+ padding: 1.5rem;
273
+ }
274
+
275
+ /* Activity List */
276
+ .activity-list {
277
+ display: flex;
278
+ flex-direction: column;
279
+ gap: 1rem;
280
+ }
281
+
282
+ .activity-item {
283
+ display: flex;
284
+ align-items: center;
285
+ gap: 1rem;
286
+ padding: 0.75rem;
287
+ background: var(--background);
288
+ border-radius: 5px;
289
+ }
290
+
291
+ .activity-item i {
292
+ font-size: 1.2rem;
293
+ }
294
+
295
+ .activity-content p {
296
+ color: var(--dark-color);
297
+ margin-bottom: 0.25rem;
298
+ }
299
+
300
+ .time {
301
+ font-size: 0.8rem;
302
+ color: #666;
303
+ }
304
+
305
+ /* Quick Actions */
306
+ .quick-actions {
307
+ display: grid;
308
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
309
+ gap: 1rem;
310
+ }
311
+
312
+ .quick-action-btn {
313
+ background: var(--background);
314
+ border: 2px solid transparent;
315
+ padding: 1rem;
316
+ border-radius: 10px;
317
+ cursor: pointer;
318
+ transition: var(--transition);
319
+ display: flex;
320
+ flex-direction: column;
321
+ align-items: center;
322
+ gap: 0.5rem;
323
+ }
324
+
325
+ .quick-action-btn:hover {
326
+ border-color: var(--primary-color);
327
+ background: white;
328
+ }
329
+
330
+ .quick-action-btn i {
331
+ font-size: 1.5rem;
332
+ color: var(--primary-color);
333
+ }
334
+
335
+ .quick-action-btn span {
336
+ font-size: 0.9rem;
337
+ color: var(--dark-color);
338
+ }
339
+
340
+ /* Tabs */
341
+ .tabs {
342
+ display: flex;
343
+ gap: 1rem;
344
+ margin-bottom: 2rem;
345
+ border-bottom: 2px solid #eee;
346
+ }
347
+
348
+ .tab-btn {
349
+ background: none;
350
+ border: none;
351
+ padding: 1rem 1.5rem;
352
+ cursor: pointer;
353
+ color: #666;
354
+ font-size: 1rem;
355
+ transition: var(--transition);
356
+ border-bottom: 3px solid transparent;
357
+ margin-bottom: -2px;
358
+ }
359
+
360
+ .tab-btn.active,
361
+ .tab-btn:hover {
362
+ color: var(--primary-color);
363
+ border-bottom-color: var(--primary-color);
364
+ }
365
+
366
+ .tab-content {
367
+ display: none;
368
+ }
369
+
370
+ .tab-content.active {
371
+ display: block;
372
+ animation: fadeIn 0.3s ease;
373
+ }
374
+
375
+ /* Search Bar */
376
+ .search-bar {
377
+ display: flex;
378
+ gap: 1rem;
379
+ margin-bottom: 2rem;
380
+ }
381
+
382
+ .search-input {
383
+ flex: 1;
384
+ padding: 0.75rem 1rem;
385
+ border: 2px solid #ddd;
386
+ border-radius: 5px;
387
+ font-size: 1rem;
388
+ transition: var(--transition);
389
+ }
390
+
391
+ .search-input:focus {
392
+ outline: none;
393
+ border-color: var(--primary-color);
394
+ }
395
+
396
+ .filter-select {
397
+ padding: 0.75rem 1rem;
398
+ border: 2px solid #ddd;
399
+ border-radius: 5px;
400
+ font-size: 1rem;
401
+ background: white;
402
+ cursor: pointer;
403
+ }
404
+
405
+ /* Data Table */
406
+ .data-table-container {
407
+ overflow-x: auto;
408
+ }
409
+
410
+ .data-table {
411
+ width: 100%;
412
+ border-collapse: collapse;
413
+ background: white;
414
+ border-radius: 10px;
415
+ overflow: hidden;
416
+ box-shadow: var(--card-shadow);
417
+ }
418
+
419
+ .data-table th {
420
+ background: var(--primary-color);
421
+ color: white;
422
+ padding: 1rem;
423
+ text-align: left;
424
+ font-weight: 600;
425
+ }
426
+
427
+ .data-table td {
428
+ padding: 1rem;
429
+ border-bottom: 1px solid #eee;
430
+ }
431
+
432
+ .data-table tr:hover {
433
+ background: var(--background);
434
+ }
435
+
436
+ /* UDISE Grid */
437
+ .udise-grid {
438
+ display: grid;
439
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
440
+ gap: 1.5rem;
441
+ margin-bottom: 2rem;
442
+ }
443
+
444
+ .udise-stats {
445
+ display: flex;
446
+ flex-direction: column;
447
+ gap: 1rem;
448
+ }
449
+
450
+ .udise-stat {
451
+ display: flex;
452
+ justify-content: space-between;
453
+ padding: 0.75rem;
454
+ background: var(--background);
455
+ border-radius: 5px;
456
+ }
457
+
458
+ .udise-stat .value {
459
+ font-weight: bold;
460
+ color: var(--primary-color);
461
+ }
462
+
463
+ .facility-list {
464
+ display: flex;
465
+ flex-direction: column;
466
+ gap: 0.75rem;
467
+ }
468
+
469
+ .facility-item {
470
+ display: flex;
471
+ align-items: center;
472
+ gap: 0.75rem;
473
+ padding: 0.5rem;
474
+ background: var(--background);
475
+ border-radius: 5px;
476
+ }
477
+
478
+ .facility-item i {
479
+ font-size: 1.2rem;
480
+ }
481
+
482
+ /* Enrollment Chart */
483
+ .enrollment-chart {
484
+ display: flex;
485
+ flex-direction: column;
486
+ gap: 1rem;
487
+ }
488
+
489
+ .chart-bar {
490
+ display: flex;
491
+ align-items: center;
492
+ gap: 1rem;
493
+ }
494
+
495
+ .bar-label {
496
+ min-width: 100px;
497
+ font-size: 0.9rem;
498
+ }
499
+
500
+ .bar-container {
501
+ flex: 1;
502
+ display: flex;
503
+ align-items: center;
504
+ gap: 0.5rem;
505
+ }
506
+
507
+ .bar {
508
+ height: 25px;
509
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
510
+ border-radius: 5px;
511
+ transition: var(--transition);
512
+ }
513
+
514
+ .bar-container span {
515
+ font-weight: bold;
516
+ color: var(--primary-color);
517
+ }
518
+
519
+ /* Financial Stats */
520
+ .financial-stats {
521
+ display: flex;
522
+ flex-direction: column;
523
+ gap: 1rem;
524
+ }
525
+
526
+ .financial-stat {
527
+ display: flex;
528
+ justify-content: space-between;
529
+ padding: 0.75rem;
530
+ background: var(--background);
531
+ border-radius: 5px;
532
+ }
533
+
534
+ .financial-stat .value {
535
+ font-weight: bold;
536
+ color: var(--success-color);
537
+ }
538
+
539
+ /* Report List */
540
+ .report-list {
541
+ display: flex;
542
+ flex-direction: column;
543
+ gap: 1rem;
544
+ }
545
+
546
+ .report-item {
547
+ display: flex;
548
+ justify-content: space-between;
549
+ align-items: center;
550
+ padding: 1rem;
551
+ background: var(--background);
552
+ border-radius: 5px;
553
+ }
554
+
555
+ .report-info h4 {
556
+ color: var(--dark-color);
557
+ margin-bottom: 0.25rem;
558
+ }
559
+
560
+ .report-info p {
561
+ font-size: 0.9rem;
562
+ color: #666;
563
+ }
564
+
565
+ /* Tools Grid */
566
+ .tools-grid {
567
+ display: grid;
568
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
569
+ gap: 1.5rem;
570
+ margin-bottom: 2rem;
571
+ }
572
+
573
+ .tool-card {
574
+ background: white;
575
+ padding: 2rem;
576
+ border-radius: 10px;
577
+ box-shadow: var(--card-shadow);
578
+ text-align: center;
579
+ cursor: pointer;
580
+ transition: var(--transition);
581
+ }
582
+
583
+ .tool-card:hover {
584
+ transform: translateY(-5px);
585
+ box-shadow: 0 5px 20px rgba(0,0,0,0.15);
586
+ }
587
+
588
+ .tool-icon {
589
+ width: 80px;
590
+ height: 80px;
591
+ margin: 0 auto 1rem;
592
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
593
+ border-radius: 50%;
594
+ display: flex;
595
+ align-items: center;
596
+ justify-content: center;
597
+ font-size: 2rem;
598
+ color: white;
599
+ }
600
+
601
+ .tool-card h3 {
602
+ color: var(--dark-color);
603
+ margin-bottom: 0.5rem;
604
+ }
605
+
606
+ .tool-card p {
607
+ color: #666;
608
+ font-size: 0.9rem;
609
+ }
610
+
611
+ /* Lesson Plan List */
612
+ .lesson-plan-list {
613
+ display: flex;
614
+ flex-direction: column;
615
+ gap: 1rem;
616
+ }
617
+
618
+ .lesson-plan-item {
619
+ display: flex;
620
+ justify-content: space-between;
621
+ align-items: center;
622
+ padding: 1rem;
623
+ background: var(--background);
624
+ border-radius: 5px;
625
+ }
626
+
627
+ .lesson-info h4 {
628
+ color: var(--dark-color);
629
+ margin-bottom: 0.25rem;
630
+ }
631
+
632
+ .lesson-info p {
633
+ font-size: 0.9rem;
634
+ color: #666;
635
+ }
636
+
637
+ .lesson-actions {
638
+ display: flex;
639
+ gap: 0.5rem;
640
+ }
641
+
642
+ /* Modal */
643
+ .modal-overlay {
644
+ position: fixed;
645
+ top: 0;
646
+ left: 0;
647
+ right: 0;
648
+ bottom: 0;
649
+ background: rgba(0,0,0,0.5);
650
+ display: none;
651
+ align-items: center;
652
+ justify-content: center;
653
+ z-index: 2000;
654
+ }
655
+
656
+ .modal-overlay.active {
657
+ display: flex;
658
+ }
659
+
660
+ .modal {
661
+ background: white;
662
+ border-radius: 10px;
663
+ width: 90%;
664
+ max-width: 600px;
665
+ max-height: 90vh;
666
+ overflow-y: auto;
667
+ animation: slideUp 0.3s ease;
668
+ }
669
+
670
+ @keyframes slideUp {
671
+ from { transform: translateY(50px); opacity: 0; }
672
+ to { transform: translateY(0); opacity: 1; }
673
+ }
674
+
675
+ .modal-header {
676
+ padding: 1.5rem;
677
+ border-bottom: 1px solid #eee;
678
+ display: flex;
679
+ justify-content: space-between;
680
+ align-items: center;
681
+ }
682
+
683
+ .modal-header h2 {
684
+ color: var(--dark-color);
685
+ }
686
+
687
+ .modal-close {
688
+ background: none;
689
+ border: none;
690
+ font-size: 1.5rem;
691
+ cursor: pointer;
692
+ color: #666;
693
+ }
694
+
695
+ .modal-body {
696
+ padding: 1.5rem;
697
+ }
698
+
699
+ .modal-footer {
700
+ padding: 1.5rem;
701
+ border-top: 1px solid #eee;
702
+ display: flex;
703
+ justify-content: flex-end;
704
+ gap: 1rem;
705
+ }
706
+
707
+ /* Forms */
708
+ .form-grid {
709
+ display: grid;
710
+ grid-template-columns: repeat(2, 1fr);
711
+ gap: 1rem;
712
+ }
713
+
714
+ .form-group {
715
+ display: flex;
716
+ flex-direction: column;
717
+ }
718
+
719
+ .form-group.full-width {
720
+ grid-column: 1 / -1;
721
+ }
722
+
723
+ .form-group label {
724
+ margin-bottom: 0.5rem;
725
+ color: var(--dark-color);
726
+ font-weight: 500;
727
+ }
728
+
729
+ .form-input {
730
+ padding: 0.75rem;
731
+ border: 2px solid #ddd;
732
+ border-radius: 5px;
733
+ font-size: 1rem;
734
+ transition: var(--transition);
735
+ }
736
+
737
+ .form-input:focus {
738
+ outline: none;
739
+ border-color: var(--primary-color);
740
+ }
741
+
742
+ /* Footer */
743
+ .footer {
744
+ background: var(--dark-color);
745
+ color: white;
746
+ text-align: center;
747
+ padding: 1rem 0;
748
+ margin-top: 3rem;
749
+ }
750
+
751
+ .footer a {
752
+ color: var(--primary-color);
753
+ text-decoration: none;
754
+ }
755
+
756
+ .footer a:hover {
757
+ text-decoration: underline;
758
+ }
759
+
760
+ /* Responsive Design */
761
+ @media (max-width: 768px) {
762
+ .header-content {
763
+ flex-direction: column;
764
+ gap: 1rem;
765
+ }
766
+
767
+ .nav-list {
768
+ flex-wrap: wrap;
769
+ justify-content: center;
770
+ gap: 1rem;
771
+ }
772
+
773
+ .stats-grid {
774
+ grid-template-columns: 1fr;
775
+ }
776
+
777
+ .dashboard-grid {
778
+ grid-template-columns: 1fr;
779
+ }
780
+
781
+ .udise-grid {
782
+ grid-template-columns: 1fr;
783
+ }
784
+
785
+ .tools-grid {
786
+ grid-template-columns: 1fr;
787
+ }
788
+
789
+ .form-grid {
790
+ grid-template-columns: 1fr;
791
+ }
792
+
793
+ .search-bar {
794
+ flex-direction: column;
795
+ }
796
+
797
+ .tabs {
798
+ overflow-x: auto;
799
+ white-space: nowrap;
800
+ }
801
+
802
+ .data-table {
803
+ font-size: 0.9rem;
804
+ }
805
+
806
+ .data-table th,
807
+ .data-table td {
808
+ padding: 0.5rem;
809
+ }
810
+
811
+ .modal {
812
+ width: 95%;
813
+ margin: 1rem;
814
+ }
815
+ }
816
+
817
+ @media (max-width: 480px) {
818
+ .section-header {
819
+ flex-direction: column;
820
+ align-items: flex-start;
821
+ gap: 1rem;
822
+ }
823
+
824
+ .quick-actions {
825
+ grid-template-columns: repeat(2, 1fr);
826
+ }
827
+
828
+ .tool-card {
829
+ padding: 1.5rem;
830
+ }
831
+
832
+ .tool-icon {
833
+ width: 60px;
834
+ height: 60px;
835
+ font-size: 1.5rem;
836
+ }
837
+ }
838
+
839
+ /* Utility Classes */
840
+ .green { color: var(--success-color); }
841
+ .blue { color: var(--primary-color); }
842
+ .yellow { color: var(--warning-color); }
843
+ .red { color: var(--danger-color); }
844
+
845
+ .text-center { text-align: center; }
846
+ .mt-1 { margin-top: 1rem; }
847
+ .mb-1 { margin-bottom: 1rem; }
848
+ .p-1 { padding: 1rem; }
849
+
850
+ /* Loading Spinner */
851
+ .spinner {
852
+ border: 3px solid #f3f3f3;
853
+ border-top: 3px solid var(--primary-color);
854
+ border-radius: 50%;
855
+ width: 40px;
856
+ height: 40px;
857
+ animation: spin 1s linear infinite;
858
+ margin: 2rem auto;
859
+ }
860
+
861
+ @keyframes spin {
862
+ 0% { transform: rotate(0deg); }
863
+ 100% { transform: rotate(360deg); }
864
+ }
865
+
866
+ /* Success/Error Messages */
867
+ .message {
868
+ padding: 1rem;
869
+ border-radius: 5px;
870
+ margin-bottom: 1rem;
871
+ display: flex;
872
+ align-items: center;
873
+ gap: 0.5rem;
874
+ }
875
+
876
+ .message.success {
877
+ background: #d4edda;
878
+ color: #155724;
879
+ border: 1px solid #c3e6cb;
880
+ }
881
+
882
+ .message.error {
883
+ background: #f8d7da;
884
+ color: #721c24;
885
+ border: 1px solid #f5c6cb;
886
+ }
887
+
888
+ .message.info {
889
+ background: #d1ecf1;
890
+ color: #0c5460;
891
+ border: 1px solid #bee5eb;
892
+ }
893
+
894
+ /* Print Styles */
895
+ @media print {
896
+ .header,
897
+ .footer,
898
+ .btn-primary,
899
+ .btn-secondary,
900
+ .btn-icon,
901
+ .btn-icon-small {
902
+ display: none;
903
+ }
904
+
905
+ .main {
906
+ padding: 0;
907
+ }
908
+
909
+ .card {
910
+ box-shadow: none;
911
+ border: 1px solid #ddd;
912
+ }
913
+ }
914
+
915
+ /* Dark Mode Support */
916
+ @media (prefers-color-scheme: dark) {
917
+ :root {
918
+ --background: #1a1a1a;
919
+ --dark-color: #f0f0f0;
920
+ --light-color: #333;
921
+ --card-shadow: 0 2px 10px rgba(0,0,0,0.3);
922
+ }
923
+
924
+ body {
925
+ background: var(--background);
926
+ color: var(--dark-color);
927
+ }
928
+
929
+ .card {
930
+ background: #2a2a2a;
931
+ }
932
+
933
+ .form-input {
934
+ background: #333;
935
+ border-color: #555;
936
+ color: var(--dark-color);
937
+ }
938
+
939
+ .data-table {
940
+ background: #2a2a2a;
941
+ }
942
+
943
+ .data-table tr:hover {
944
+ background: #333;
945
+ }
946
+ }
947
+
948
+ /* Accessibility */
949
+ .sr-only {
950
+ position: absolute;
951
+ width: 1px;
952
+ height: 1px;
953
+ padding: 0;
954
+ margin: -1px;
955
+ overflow: hidden;
956
+ clip: rect(0,0,0,0);
957
+ white-space: nowrap;
958
+ border: 0;
959
+ }
960
+
961
+ /* Focus Styles */
962
+ button:focus,
963
+ input:focus,
964
+ select:focus,
965
+ textarea:focus {
966
+ outline: 2px solid var(--primary-color);
967
+ outline-offset: 2px;
968
+ }
969
+
970
+ /* High Contrast Mode */
971
+ @media (prefers-contrast: high) {
972
+ :root {
973
+ --primary-color: #0000ff;
974
+ --secondary-color: #800080;
975
+ --success-color: #008000;
976
+ --warning-color: #ff8c00;
977
+ --danger-color: #ff0000;
978
+ }
979
+
980
+ .btn-primary {
981
+ border: 2px solid var(--dark-color);
982
+ }
983
+
984
+ .card {
985
+ border: 2px solid var(--dark-color);
986
+ }
987
+ }
988
+
989
+ /* Reduced Motion */
990
+ @media (prefers-reduced-motion: reduce) {
991
+ * {
992
+ animation-duration: 0.01ms !important;
993
+ animation-iteration-count: 1 !important;
994
+ transition-duration: 0.01ms !important;
995
+ }
996
+ }
assets/js/script.js ADDED
@@ -0,0 +1,417 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Navigation functionality
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Navigation links
4
+ const navLinks = document.querySelectorAll('.nav-link');
5
+ const sections = document.querySelectorAll('.content-section');
6
+
7
+ navLinks.forEach(link => {
8
+ link.addEventListener('click', function(e) {
9
+ e.preventDefault();
10
+
11
+ // Remove active class from all links and sections
12
+ navLinks.forEach(l => l.classList.remove('active'));
13
+ sections.forEach(s => s.classList.remove('active'));
14
+
15
+ // Add active class to clicked link and corresponding section
16
+ this.classList.add('active');
17
+ const sectionId = this.getAttribute('data-section');
18
+ document.getElementById(sectionId).classList.add('active');
19
+ });
20
+ });
21
+
22
+ // Tab functionality for student section
23
+ const tabBtns = document.querySelectorAll('.tab-btn');
24
+ const tabContents = document.querySelectorAll('.tab-content');
25
+
26
+ tabBtns.forEach(btn => {
27
+ btn.addEventListener('click', function() {
28
+ const tabId = this.getAttribute('data-tab');
29
+
30
+ // Remove active class from all tabs and contents
31
+ tabBtns.forEach(b => b.classList.remove('active'));
32
+ tabContents.forEach(c => c.classList.remove('active'));
33
+
34
+ // Add active class to clicked tab and corresponding content
35
+ this.classList.add('active');
36
+ document.getElementById(tabId).classList.add('active');
37
+ });
38
+ });
39
+
40
+ // Search functionality
41
+ const searchInputs = document.querySelectorAll('.search-input');
42
+ searchInputs.forEach(input => {
43
+ input.addEventListener('input', function(e) {
44
+ const searchTerm = e.target.value.toLowerCase();
45
+ const table = e.target.closest('.content-section').querySelector('.data-table');
46
+ if (table) {
47
+ const rows = table.querySelectorAll('tbody tr');
48
+ rows.forEach(row => {
49
+ const text = row.textContent.toLowerCase();
50
+ row.style.display = text.includes(searchTerm) ? '' : 'none';
51
+ });
52
+ }
53
+ });
54
+ });
55
+
56
+ // Initialize tooltips
57
+ initializeTooltips();
58
+ });
59
+
60
+ // Modal functions
61
+ function showModal(modalId) {
62
+ const modal = document.getElementById(modalId);
63
+ const overlay = document.getElementById('modal-overlay');
64
+ if (modal && overlay) {
65
+ overlay.classList.add('active');
66
+ modal.style.display = 'block';
67
+ document.body.style.overflow = 'hidden';
68
+ }
69
+ }
70
+
71
+ function closeModal() {
72
+ const overlay = document.getElementById('modal-overlay');
73
+ const modals = overlay.querySelectorAll('.modal');
74
+ overlay.classList.remove('active');
75
+ modals.forEach(modal => {
76
+ modal.style.display = 'none';
77
+ });
78
+ document.body.style.overflow = 'auto';
79
+ }
80
+
81
+ // Show specific modals
82
+ function showAddStudentModal() {
83
+ showModal('add-student-modal');
84
+ }
85
+
86
+ function showAddTeacherModal() {
87
+ showModal('add-teacher-modal');
88
+ }
89
+
90
+ function showLessonPlanModal() {
91
+ showModal('lesson-plan-modal');
92
+ }
93
+
94
+ function showAttendanceModal() {
95
+ showMessage('Attendance module coming soon!', 'info');
96
+ }
97
+
98
+ function showTimetableModal() {
99
+ showMessage('Timetable module coming soon!', 'info');
100
+ }
101
+
102
+ function showExamModal() {
103
+ showMessage('Exam scheduler coming soon!', 'info');
104
+ }
105
+
106
+ // Save functions
107
+ function saveStudent() {
108
+ showMessage('Student saved successfully!', 'success');
109
+ closeModal();
110
+ }
111
+
112
+ function saveTeacher() {
113
+ showMessage('Teacher saved successfully!', 'success');
114
+ closeModal();
115
+ }
116
+
117
+ function saveLessonPlan() {
118
+ showMessage('Lesson plan saved successfully!', 'success');
119
+ closeModal();
120
+ }
121
+
122
+ // View and edit functions
123
+ function viewStudentDetails(studentId) {
124
+ showMessage(`Viewing details for student ${studentId}`, 'info');
125
+ }
126
+
127
+ function editStudent(studentId) {
128
+ showMessage(`Editing student ${studentId}`, 'info');
129
+ }
130
+
131
+ // Message display function
132
+ function showMessage(text, type = 'info') {
133
+ // Remove existing messages
134
+ const existingMessages = document.querySelectorAll('.message');
135
+ existingMessages.forEach(msg => msg.remove());
136
+
137
+ // Create new message
138
+ const message = document.createElement('div');
139
+ message.className = `message ${type}`;
140
+ message.innerHTML = `
141
+ <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
142
+ <span>${text}</span>
143
+ `;
144
+
145
+ // Insert at the top of the main content
146
+ const main = document.querySelector('.main');
147
+ const container = main.querySelector('.container');
148
+ container.insertBefore(message, container.firstChild);
149
+
150
+ // Auto remove after 3 seconds
151
+ setTimeout(() => {
152
+ message.remove();
153
+ }, 3000);
154
+ }
155
+
156
+ // Initialize tooltips
157
+ function initializeTooltips() {
158
+ const tooltipElements = document.querySelectorAll('[data-tooltip]');
159
+ tooltipElements.forEach(element => {
160
+ element.addEventListener('mouseenter', function(e) {
161
+ const tooltip = document.createElement('div');
162
+ tooltip.className = 'tooltip';
163
+ tooltip.textContent = this.getAttribute('data-tooltip');
164
+ document.body.appendChild(tooltip);
165
+
166
+ const rect = this.getBoundingClientRect();
167
+ tooltip.style.top = rect.top - tooltip.offsetHeight - 5 + 'px';
168
+ tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
169
+ });
170
+
171
+ element.addEventListener('mouseleave', function() {
172
+ const tooltip = document.querySelector('.tooltip');
173
+ if (tooltip) {
174
+ tooltip.remove();
175
+ }
176
+ });
177
+ });
178
+ }
179
+
180
+ // Close modal when clicking outside
181
+ document.getElementById('modal-overlay').addEventListener('click', function(e) {
182
+ if (e.target === this) {
183
+ closeModal();
184
+ }
185
+ });
186
+
187
+ // Keyboard navigation
188
+ document.addEventListener('keydown', function(e) {
189
+ // ESC key to close modal
190
+ if (e.key === 'Escape') {
191
+ closeModal();
192
+ }
193
+ });
194
+
195
+ // Form validation
196
+ function validateForm(form) {
197
+ const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
198
+ let isValid = true;
199
+
200
+ inputs.forEach(input => {
201
+ if (!input.value.trim()) {
202
+ isValid = false;
203
+ input.style.borderColor = 'var(--danger-color)';
204
+
205
+ // Add error message
206
+ let errorMsg = input.nextElementSibling;
207
+ if (!errorMsg || !errorMsg.classList.contains('error-message')) {
208
+ errorMsg = document.createElement('span');
209
+ errorMsg.className = 'error-message';
210
+ errorMsg.style.color = 'var(--danger-color)';
211
+ errorMsg.style.fontSize = '0.8rem';
212
+ errorMsg.textContent = 'This field is required';
213
+ input.parentNode.insertBefore(errorMsg, input.nextSibling);
214
+ }
215
+ } else {
216
+ input.style.borderColor = '';
217
+ const errorMsg = input.nextElementSibling;
218
+ if (errorMsg && errorMsg.classList.contains('error-message')) {
219
+ errorMsg.remove();
220
+ }
221
+ }
222
+ });
223
+
224
+ return isValid;
225
+ }
226
+
227
+ // Export data functions
228
+ function exportToCSV(tableId, filename) {
229
+ const table = document.getElementById(tableId);
230
+ if (!table) return;
231
+
232
+ let csv = [];
233
+ const rows = table.querySelectorAll('tr');
234
+
235
+ rows.forEach(row => {
236
+ const cols = row.querySelectorAll('th, td');
237
+ const rowData = Array.from(cols).map(col => {
238
+ return '"' + col.textContent.trim() + '"';
239
+ });
240
+ csv.push(rowData.join(','));
241
+ });
242
+
243
+ const csvContent = csv.join('\n');
244
+ const blob = new Blob([csvContent], { type: 'text/csv' });
245
+ const url = window.URL.createObjectURL(blob);
246
+ const a = document.createElement('a');
247
+ a.href = url;
248
+ a.download = filename;
249
+ a.click();
250
+ window.URL.revokeObjectURL(url);
251
+ }
252
+
253
+ // Print function
254
+ function printSection(sectionId) {
255
+ const section = document.getElementById(sectionId);
256
+ if (!section) return;
257
+
258
+ const printWindow = window.open('', '_blank');
259
+ printWindow.document.write(`
260
+ <html>
261
+ <head>
262
+ <title>Print</title>
263
+ <style>
264
+ body { font-family: Arial, sans-serif; margin: 20px; }
265
+ table { width: 100%; border-collapse: collapse; }
266
+ th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
267
+ th { background-color: #f2f2f2; }
268
+ @media print { body { margin: 0; } }
269
+ </style>
270
+ </head>
271
+ <body>
272
+ ${section.innerHTML}
273
+ </body>
274
+ </html>
275
+ `);
276
+ printWindow.document.close();
277
+ printWindow.print();
278
+ }
279
+
280
+ // Data visualization (simple chart)
281
+ function createSimpleChart(containerId, data) {
282
+ const container = document.getElementById(containerId);
283
+ if (!container) return;
284
+
285
+ const maxValue = Math.max(...data.map(d => d.value));
286
+
287
+ data.forEach(item => {
288
+ const barContainer = document.createElement('div');
289
+ barContainer.className = 'chart-bar';
290
+
291
+ const label = document.createElement('div');
292
+ label.className = 'bar-label';
293
+ label.textContent = item.label;
294
+
295
+ const barWrapper = document.createElement('div');
296
+ barWrapper.className = 'bar-container';
297
+
298
+ const bar = document.createElement('div');
299
+ bar.className = 'bar';
300
+ bar.style.width = `${(item.value / maxValue) * 100}%`;
301
+
302
+ const value = document.createElement('span');
303
+ value.textContent = item.value;
304
+
305
+ barWrapper.appendChild(bar);
306
+ barWrapper.appendChild(value);
307
+ barContainer.appendChild(label);
308
+ barContainer.appendChild(barWrapper);
309
+ container.appendChild(barContainer);
310
+ });
311
+ }
312
+
313
+ // Initialize sample data
314
+ function initializeSampleData() {
315
+ // Sample enrollment data
316
+ const enrollmentData = [
317
+ { label: 'Class 1-5', value: 350 },
318
+ { label: 'Class 6-8', value: 300 },
319
+ { label: 'Class 9-10', value: 250 },
320
+ { label: 'Class 11-12', value: 200 }
321
+ ];
322
+
323
+ // This could be used to dynamically create charts
324
+ // createSimpleChart('enrollment-chart', enrollmentData);
325
+ }
326
+
327
+ // Lazy loading for images
328
+ function lazyLoadImages() {
329
+ const images = document.querySelectorAll('img[data-src]');
330
+
331
+ const imageObserver = new IntersectionObserver((entries, observer) => {
332
+ entries.forEach(entry => {
333
+ if (entry.isIntersecting) {
334
+ const img = entry.target;
335
+ img.src = img.dataset.src;
336
+ img.removeAttribute('data-src');
337
+ imageObserver.unobserve(img);
338
+ }
339
+ });
340
+ });
341
+
342
+ images.forEach(img => imageObserver.observe(img));
343
+ }
344
+
345
+ // Performance monitoring
346
+ function trackPerformance() {
347
+ if ('performance' in window) {
348
+ window.addEventListener('load', () => {
349
+ const perfData = performance.getEntriesByType('navigation')[0];
350
+ console.log('Page load time:', perfData.loadEventEnd - perfData.loadEventStart, 'ms');
351
+ });
352
+ }
353
+ }
354
+
355
+ // Initialize everything when DOM is loaded
356
+ document.addEventListener('DOMContentLoaded', function() {
357
+ initializeSampleData();
358
+ lazyLoadImages();
359
+ trackPerformance();
360
+ });
361
+
362
+ // Service Worker registration for PWA capability
363
+ if ('serviceWorker' in navigator) {
364
+ window.addEventListener('load', () => {
365
+ navigator.serviceWorker.register('/sw.js')
366
+ .then(registration => {
367
+ console.log('SW registered: ', registration);
368
+ })
369
+ .catch(registrationError => {
370
+ console.log('SW registration failed: ', registrationError);
371
+ });
372
+ });
373
+ }
374
+
375
+ // Dark mode toggle
376
+ function toggleDarkMode() {
377
+ document.body.classList.toggle('dark-mode');
378
+ localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
379
+ }
380
+
381
+ // Load dark mode preference
382
+ if (localStorage.getItem('darkMode') === 'true') {
383
+ document.body.classList.add('dark-mode');
384
+ }
385
+
386
+ // Auto-save form data
387
+ function autoSaveForm(formId) {
388
+ const form = document.getElementById(formId);
389
+ if (!form) return;
390
+
391
+ const inputs = form.querySelectorAll('input, select, textarea');
392
+
393
+ inputs.forEach(input => {
394
+ // Load saved data
395
+ const savedValue = localStorage.getItem(`${formId}_${input.name}`);
396
+ if (savedValue) {
397
+ input.value = savedValue;
398
+ }
399
+
400
+ // Save on change
401
+ input.addEventListener('input', () => {
402
+ localStorage.setItem(`${formId}_${input.name}`, input.value);
403
+ });
404
+ });
405
+ }
406
+
407
+ // Clear form data
408
+ function clearFormData(formId) {
409
+ const form = document.getElementById(formId);
410
+ if (!form) return;
411
+
412
+ const inputs = form.querySelectorAll('input, select, textarea');
413
+ inputs.forEach(input => {
414
+ localStorage.removeItem(`${formId}_${input.name}`);
415
+ input.value = '';
416
+ });
417
+ }
index.html CHANGED
@@ -1,19 +1,917 @@
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>EduManage Pro - Comprehensive Educational Management System</title>
7
+ <meta name="description" content="Complete educational management system for student data, teacher records, UDISE Plus, and daily educational tools">
8
+ <link rel="stylesheet" href="assets/css/styles.css">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ </head>
11
+ <body>
12
+ <header class="header">
13
+ <div class="container">
14
+ <div class="header-content">
15
+ <div class="logo">
16
+ <i class="fas fa-graduation-cap"></i>
17
+ <span>EduManage Pro</span>
18
+ </div>
19
+ <nav class="nav">
20
+ <ul class="nav-list">
21
+ <li><a href="#" class="nav-link active" data-section="dashboard"><i class="fas fa-home"></i> Dashboard</a></li>
22
+ <li><a href="#" class="nav-link" data-section="students"><i class="fas fa-users"></i> Students</a></li>
23
+ <li><a href="#" class="nav-link" data-section="teachers"><i class="fas fa-chalkboard-teacher"></i> Teachers</a></li>
24
+ <li><a href="#" class="nav-link" data-section="udise"><i class="fas fa-chart-bar"></i> UDISE Plus</a></li>
25
+ <li><a href="#" class="nav-link" data-section="tools"><i class="fas fa-tools"></i> Tools</a></li>
26
+ </ul>
27
+ </nav>
28
+ <div class="header-actions">
29
+ <button class="btn-icon"><i class="fas fa-bell"></i></button>
30
+ <button class="btn-icon"><i class="fas fa-user-circle"></i></button>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </header>
35
+
36
+ <main class="main">
37
+ <div class="container">
38
+ <!-- Dashboard Section -->
39
+ <section id="dashboard" class="content-section active">
40
+ <div class="section-header">
41
+ <h1>Dashboard</h1>
42
+ <p>Overview of all educational data and statistics</p>
43
+ </div>
44
+
45
+ <div class="stats-grid">
46
+ <div class="stat-card">
47
+ <div class="stat-icon blue">
48
+ <i class="fas fa-user-graduate"></i>
49
+ </div>
50
+ <div class="stat-info">
51
+ <h3>1,248</h3>
52
+ <p>Total Students</p>
53
+ </div>
54
+ </div>
55
+ <div class="stat-card">
56
+ <div class="stat-icon green">
57
+ <i class="fas fa-chalkboard-teacher"></i>
58
+ </div>
59
+ <div class="stat-info">
60
+ <h3>86</h3>
61
+ <p>Total Teachers</p>
62
+ </div>
63
+ </div>
64
+ <div class="stat-card">
65
+ <div class="stat-icon purple">
66
+ <i class="fas fa-trophy"></i>
67
+ </div>
68
+ <div class="stat-info">
69
+ <h3>142</h3>
70
+ <p>Achievements</p>
71
+ </div>
72
+ </div>
73
+ <div class="stat-card">
74
+ <div class="stat-icon orange">
75
+ <i class="fas fa-calendar-check"></i>
76
+ </div>
77
+ <div class="stat-info">
78
+ <h3>98%</h3>
79
+ <p>Attendance Rate</p>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="dashboard-grid">
85
+ <div class="card">
86
+ <div class="card-header">
87
+ <h3>Recent Activities</h3>
88
+ </div>
89
+ <div class="card-body">
90
+ <div class="activity-list">
91
+ <div class="activity-item">
92
+ <i class="fas fa-plus-circle green"></i>
93
+ <div class="activity-content">
94
+ <p>New student enrolled: Rahul Sharma</p>
95
+ <span class="time">2 hours ago</span>
96
+ </div>
97
+ </div>
98
+ <div class="activity-item">
99
+ <i class="fas fa-edit blue"></i>
100
+ <div class="activity-content">
101
+ <p>Lesson plan updated for Class 10 Science</p>
102
+ <span class="time">5 hours ago</span>
103
+ </div>
104
+ </div>
105
+ <div class="activity-item">
106
+ <i class="fas fa-trophy yellow"></i>
107
+ <div class="activity-content">
108
+ <p>Sports competition winner: Priya Patel</p>
109
+ <span class="time">1 day ago</span>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="card">
117
+ <div class="card-header">
118
+ <h3>Quick Actions</h3>
119
+ </div>
120
+ <div class="card-body">
121
+ <div class="quick-actions">
122
+ <button class="quick-action-btn" onclick="showAddStudentModal()">
123
+ <i class="fas fa-user-plus"></i>
124
+ <span>Add Student</span>
125
+ </button>
126
+ <button class="quick-action-btn" onclick="showAddTeacherModal()">
127
+ <i class="fas fa-user-tie"></i>
128
+ <span>Add Teacher</span>
129
+ </button>
130
+ <button class="quick-action-btn" onclick="showLessonPlanModal()">
131
+ <i class="fas fa-book"></i>
132
+ <span>Lesson Plan</span>
133
+ </button>
134
+ <button class="quick-action-btn" onclick="showExamModal()">
135
+ <i class="fas fa-file-alt"></i>
136
+ <span>Schedule Exam</span>
137
+ </button>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Students Section -->
145
+ <section id="students" class="content-section">
146
+ <div class="section-header">
147
+ <h1>Student Management</h1>
148
+ <button class="btn-primary" onclick="showAddStudentModal()">
149
+ <i class="fas fa-plus"></i> Add New Student
150
+ </button>
151
+ </div>
152
+
153
+ <div class="tabs">
154
+ <button class="tab-btn active" data-tab="educational">Educational Data</button>
155
+ <button class="tab-btn" data-tab="family">Family Data</button>
156
+ <button class="tab-btn" data-tab="sports">Sports Data</button>
157
+ <button class="tab-btn" data-tab="exams">Exam Data</button>
158
+ <button class="tab-btn" data-tab="achievements">Achievements</button>
159
+ </div>
160
+
161
+ <div class="search-bar">
162
+ <input type="text" placeholder="Search students..." class="search-input">
163
+ <button class="btn-secondary"><i class="fas fa-filter"></i> Filter</button>
164
+ </div>
165
+
166
+ <!-- Educational Data Tab -->
167
+ <div class="tab-content active" id="educational">
168
+ <div class="data-table-container">
169
+ <table class="data-table">
170
+ <thead>
171
+ <tr>
172
+ <th>ID</th>
173
+ <th>Name</th>
174
+ <th>Class</th>
175
+ <th>Roll No</th>
176
+ <th>Section</th>
177
+ <th>Admission No</th>
178
+ <th>Actions</th>
179
+ </tr>
180
+ </thead>
181
+ <tbody>
182
+ <tr>
183
+ <td>STU001</td>
184
+ <td>Amit Kumar</td>
185
+ <td>10</td>
186
+ <td>15</td>
187
+ <td>A</td>
188
+ <td>ADM2024001</td>
189
+ <td>
190
+ <button class="btn-icon-small" onclick="viewStudentDetails('STU001')"><i class="fas fa-eye"></i></button>
191
+ <button class="btn-icon-small" onclick="editStudent('STU001')"><i class="fas fa-edit"></i></button>
192
+ </td>
193
+ </tr>
194
+ <tr>
195
+ <td>STU002</td>
196
+ <td>Priya Singh</td>
197
+ <td>10</td>
198
+ <td>16</td>
199
+ <td>A</td>
200
+ <td>ADM2024002</td>
201
+ <td>
202
+ <button class="btn-icon-small" onclick="viewStudentDetails('STU002')"><i class="fas fa-eye"></i></button>
203
+ <button class="btn-icon-small" onclick="editStudent('STU002')"><i class="fas fa-edit"></i></button>
204
+ </td>
205
+ </tr>
206
+ <tr>
207
+ <td>STU003</td>
208
+ <td>Rahul Sharma</td>
209
+ <td>9</td>
210
+ <td>12</td>
211
+ <td>B</td>
212
+ <td>ADM2024003</td>
213
+ <td>
214
+ <button class="btn-icon-small" onclick="viewStudentDetails('STU003')"><i class="fas fa-eye"></i></button>
215
+ <button class="btn-icon-small" onclick="editStudent('STU003')"><i class="fas fa-edit"></i></button>
216
+ </td>
217
+ </tr>
218
+ </tbody>
219
+ </table>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Family Data Tab -->
224
+ <div class="tab-content" id="family">
225
+ <div class="data-table-container">
226
+ <table class="data-table">
227
+ <thead>
228
+ <tr>
229
+ <th>Student ID</th>
230
+ <th>Father's Name</th>
231
+ <th>Mother's Name</th>
232
+ <th>Guardian</th>
233
+ <th>Contact</th>
234
+ <th>Address</th>
235
+ <th>Actions</th>
236
+ </tr>
237
+ </thead>
238
+ <tbody>
239
+ <tr>
240
+ <td>STU001</td>
241
+ <td>Rajesh Kumar</td>
242
+ <td>Sunita Kumar</td>
243
+ <td>Rajesh Kumar</td>
244
+ <td>9876543210</td>
245
+ <td>123 Main St, City</td>
246
+ <td>
247
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
248
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
249
+ </td>
250
+ </tr>
251
+ </tbody>
252
+ </table>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Sports Data Tab -->
257
+ <div class="tab-content" id="sports">
258
+ <div class="data-table-container">
259
+ <table class="data-table">
260
+ <thead>
261
+ <tr>
262
+ <th>Student ID</th>
263
+ <th>Sports</th>
264
+ <th>Position</th>
265
+ <th>Team</th>
266
+ <th>Achievements</th>
267
+ <th>Coach</th>
268
+ <th>Actions</th>
269
+ </tr>
270
+ </thead>
271
+ <tbody>
272
+ <tr>
273
+ <td>STU001</td>
274
+ <td>Cricket</td>
275
+ <td>Batsman</td>
276
+ <td>School Team</td>
277
+ <td>Best Batsman 2023</td>
278
+ <td>Mr. Sharma</td>
279
+ <td>
280
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
281
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
282
+ </td>
283
+ </tr>
284
+ </tbody>
285
+ </table>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Exam Data Tab -->
290
+ <div class="tab-content" id="exams">
291
+ <div class="data-table-container">
292
+ <table class="data-table">
293
+ <thead>
294
+ <tr>
295
+ <th>Student ID</th>
296
+ <th>Exam Type</th>
297
+ <th>Subject</th>
298
+ <th>Marks</th>
299
+ <th>Grade</th>
300
+ <th>Percentage</th>
301
+ <th>Actions</th>
302
+ </tr>
303
+ </thead>
304
+ <tbody>
305
+ <tr>
306
+ <td>STU001</td>
307
+ <td>Mid Term</td>
308
+ <td>Mathematics</td>
309
+ <td>85</td>
310
+ <td>A</td>
311
+ <td>85%</td>
312
+ <td>
313
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
314
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
315
+ </td>
316
+ </tr>
317
+ </tbody>
318
+ </table>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Achievements Tab -->
323
+ <div class="tab-content" id="achievements">
324
+ <div class="data-table-container">
325
+ <table class="data-table">
326
+ <thead>
327
+ <tr>
328
+ <th>Student ID</th>
329
+ <th>Achievement</th>
330
+ <th>Category</th>
331
+ <th>Date</th>
332
+ <th>Level</th>
333
+ <th>Award</th>
334
+ <th>Actions</th>
335
+ </tr>
336
+ </thead>
337
+ <tbody>
338
+ <tr>
339
+ <td>STU001</td>
340
+ <td>Science Exhibition Winner</td>
341
+ <td>Academic</td>
342
+ <td>2024-01-15</td>
343
+ <td>District</td>
344
+ <td>Gold Medal</td>
345
+ <td>
346
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
347
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
348
+ </td>
349
+ </tr>
350
+ </tbody>
351
+ </table>
352
+ </div>
353
+ </div>
354
+ </section>
355
+
356
+ <!-- Teachers Section -->
357
+ <section id="teachers" class="content-section">
358
+ <div class="section-header">
359
+ <h1>Teacher Management</h1>
360
+ <button class="btn-primary" onclick="showAddTeacherModal()">
361
+ <i class="fas fa-plus"></i> Add New Teacher
362
+ </button>
363
+ </div>
364
+
365
+ <div class="search-bar">
366
+ <input type="text" placeholder="Search teachers..." class="search-input">
367
+ <select class="filter-select">
368
+ <option>All Departments</option>
369
+ <option>Science</option>
370
+ <option>Mathematics</option>
371
+ <option>English</option>
372
+ <option>Social Studies</option>
373
+ </select>
374
+ </div>
375
+
376
+ <div class="data-table-container">
377
+ <table class="data-table">
378
+ <thead>
379
+ <tr>
380
+ <th>ID</th>
381
+ <th>Name</th>
382
+ <th>Department</th>
383
+ <th>Subject</th>
384
+ <th>Experience</th>
385
+ <th>Qualification</th>
386
+ <th>Contact</th>
387
+ <th>Actions</th>
388
+ </tr>
389
+ </thead>
390
+ <tbody>
391
+ <tr>
392
+ <td>TCH001</td>
393
+ <td>Dr. Anjali Sharma</td>
394
+ <td>Science</td>
395
+ <td>Physics</td>
396
+ <td>10 years</td>
397
+ <td>Ph.D. Physics</td>
398
+ <td>9876543210</td>
399
+ <td>
400
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
401
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
402
+ </td>
403
+ </tr>
404
+ <tr>
405
+ <td>TCH002</td>
406
+ <td>Mr. Rajesh Kumar</td>
407
+ <td>Mathematics</td>
408
+ <td>Mathematics</td>
409
+ <td>8 years</td>
410
+ <td>M.Sc. Math</td>
411
+ <td>9876543211</td>
412
+ <td>
413
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
414
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
415
+ </td>
416
+ </tr>
417
+ <tr>
418
+ <td>TCH003</td>
419
+ <td>Mrs. Priya Singh</td>
420
+ <td>English</td>
421
+ <td>English</td>
422
+ <td>12 years</td>
423
+ <td>M.A. English</td>
424
+ <td>9876543212</td>
425
+ <td>
426
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
427
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
428
+ </td>
429
+ </tr>
430
+ </tbody>
431
+ </table>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- UDISE Plus Section -->
436
+ <section id="udise" class="content-section">
437
+ <div class="section-header">
438
+ <h1>UDISE Plus Data Management</h1>
439
+ <button class="btn-primary">
440
+ <i class="fas fa-upload"></i> Upload Data
441
+ </button>
442
+ </div>
443
+
444
+ <div class="udise-grid">
445
+ <div class="card">
446
+ <div class="card-header">
447
+ <h3>School Infrastructure</h3>
448
+ </div>
449
+ <div class="card-body">
450
+ <div class="udise-stats">
451
+ <div class="udise-stat">
452
+ <label>Total Classrooms</label>
453
+ <span class="value">45</span>
454
+ </div>
455
+ <div class="udise-stat">
456
+ <label>Laboratories</label>
457
+ <span class="value">8</span>
458
+ </div>
459
+ <div class="udise-stat">
460
+ <label>Library</label>
461
+ <span class="value">1</span>
462
+ </div>
463
+ <div class="udise-stat">
464
+ <label>Playground</label>
465
+ <span class="value">2</span>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <div class="card">
472
+ <div class="card-header">
473
+ <h3>Facilities</h3>
474
+ </div>
475
+ <div class="card-body">
476
+ <div class="facility-list">
477
+ <div class="facility-item">
478
+ <i class="fas fa-check-circle green"></i>
479
+ <span>Drinking Water</span>
480
+ </div>
481
+ <div class="facility-item">
482
+ <i class="fas fa-check-circle green"></i>
483
+ <span>Electricity</span>
484
+ </div>
485
+ <div class="facility-item">
486
+ <i class="fas fa-check-circle green"></i>
487
+ <span>Internet</span>
488
+ </div>
489
+ <div class="facility-item">
490
+ <i class="fas fa-check-circle green"></i>
491
+ <span>Computers</span>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="card">
498
+ <div class="card-header">
499
+ <h3>Enrollment Statistics</h3>
500
+ </div>
501
+ <div class="card-body">
502
+ <div class="enrollment-chart">
503
+ <div class="chart-bar">
504
+ <div class="bar-label">Class 1-5</div>
505
+ <div class="bar-container">
506
+ <div class="bar" style="width: 70%"></div>
507
+ <span>350</span>
508
+ </div>
509
+ </div>
510
+ <div class="chart-bar">
511
+ <div class="bar-label">Class 6-8</div>
512
+ <div class="bar-container">
513
+ <div class="bar" style="width: 60%"></div>
514
+ <span>300</span>
515
+ </div>
516
+ </div>
517
+ <div class="chart-bar">
518
+ <div class="bar-label">Class 9-10</div>
519
+ <div class="bar-container">
520
+ <div class="bar" style="width: 50%"></div>
521
+ <span>250</span>
522
+ </div>
523
+ </div>
524
+ <div class="chart-bar">
525
+ <div class="bar-label">Class 11-12</div>
526
+ <div class="bar-container">
527
+ <div class="bar" style="width: 40%"></div>
528
+ <span>200</span>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="card">
536
+ <div class="card-header">
537
+ <h3>Financial Data</h3>
538
+ </div>
539
+ <div class="card-body">
540
+ <div class="financial-stats">
541
+ <div class="financial-stat">
542
+ <label>Annual Budget</label>
543
+ <span class="value">₹50,00,000</span>
544
+ </div>
545
+ <div class="financial-stat">
546
+ <label>Expenditure</label>
547
+ <span class="value">₹45,00,000</span>
548
+ </div>
549
+ <div class="financial-stat">
550
+ <label>Balance</label>
551
+ <span class="value">₹5,00,000</span>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+
558
+ <div class="card">
559
+ <div class="card-header">
560
+ <h3>UDISE Reports</h3>
561
+ </div>
562
+ <div class="card-body">
563
+ <div class="report-list">
564
+ <div class="report-item">
565
+ <div class="report-info">
566
+ <h4>Annual Report 2023-24</h4>
567
+ <p>Submitted on: 15th March 2024</p>
568
+ </div>
569
+ <button class="btn-secondary">Download</button>
570
+ </div>
571
+ <div class="report-item">
572
+ <div class="report-info">
573
+ <h4>Mid-Year Report 2023-24</h4>
574
+ <p>Submitted on: 15th October 2023</p>
575
+ </div>
576
+ <button class="btn-secondary">Download</button>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </section>
582
+
583
+ <!-- Educational Tools Section -->
584
+ <section id="tools" class="content-section">
585
+ <div class="section-header">
586
+ <h1>Educational Tools & Resources</h1>
587
+ </div>
588
+
589
+ <div class="tools-grid">
590
+ <div class="tool-card" onclick="showLessonPlanModal()">
591
+ <div class="tool-icon">
592
+ <i class="fas fa-book-open"></i>
593
+ </div>
594
+ <h3>Lesson Plans</h3>
595
+ <p>Create and manage daily lesson plans for all subjects</p>
596
+ </div>
597
+
598
+ <div class="tool-card" onclick="showAttendanceModal()">
599
+ <div class="tool-icon">
600
+ <i class="fas fa-user-check"></i>
601
+ </div>
602
+ <h3>Attendance</h3>
603
+ <p>Track daily attendance for students and teachers</p>
604
+ </div>
605
+
606
+ <div class="tool-card" onclick="showTimetableModal()">
607
+ <div class="tool-icon">
608
+ <i class="fas fa-calendar-alt"></i>
609
+ </div>
610
+ <h3>Timetable</h3>
611
+ <p>Manage class schedules and teacher assignments</p>
612
+ </div>
613
+
614
+ <div class="tool-card" onclick="showExamModal()">
615
+ <div class="tool-icon">
616
+ <i class="fas fa-clipboard-list"></i>
617
+ </div>
618
+ <h3>Exam Scheduler</h3>
619
+ <p>Schedule and manage examinations</p>
620
+ </div>
621
+
622
+ <div class="tool-card">
623
+ <div class="tool-icon">
624
+ <i class="fas fa-chart-line"></i>
625
+ </div>
626
+ <h3>Performance Analytics</h3>
627
+ <p>Analyze student performance and generate reports</p>
628
+ </div>
629
+
630
+ <div class="tool-card">
631
+ <div class="tool-icon">
632
+ <i class="fas fa-bullhorn"></i>
633
+ </div>
634
+ <h3>Announcements</h3>
635
+ <p>Send announcements to students, parents, and staff</p>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="card">
640
+ <div class="card-header">
641
+ <h3>Recent Lesson Plans</h3>
642
+ <button class="btn-primary" onclick="showLessonPlanModal()">
643
+ <i class="fas fa-plus"></i> Create New
644
+ </button>
645
+ </div>
646
+ <div class="card-body">
647
+ <div class="lesson-plan-list">
648
+ <div class="lesson-plan-item">
649
+ <div class="lesson-info">
650
+ <h4>Physics - Chapter 5: Motion</h4>
651
+ <p>Class: 10 | Teacher: Dr. Anjali Sharma | Date: 2024-01-20</p>
652
+ </div>
653
+ <div class="lesson-actions">
654
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
655
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
656
+ <button class="btn-icon-small"><i class="fas fa-download"></i></button>
657
+ </div>
658
+ </div>
659
+ <div class="lesson-plan-item">
660
+ <div class="lesson-info">
661
+ <h4>Mathematics - Chapter 3: Algebra</h4>
662
+ <p>Class: 9 | Teacher: Mr. Rajesh Kumar | Date: 2024-01-20</p>
663
+ </div>
664
+ <div class="lesson-actions">
665
+ <button class="btn-icon-small"><i class="fas fa-eye"></i></button>
666
+ <button class="btn-icon-small"><i class="fas fa-edit"></i></button>
667
+ <button class="btn-icon-small"><i class="fas fa-download"></i></button>
668
+ </div>
669
+ </div>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </section>
674
+ </div>
675
+ </main>
676
+
677
+ <!-- Modals -->
678
+ <div id="modal-overlay" class="modal-overlay">
679
+ <!-- Add Student Modal -->
680
+ <div id="add-student-modal" class="modal">
681
+ <div class="modal-header">
682
+ <h2>Add New Student</h2>
683
+ <button class="modal-close" onclick="closeModal()">&times;</button>
684
+ </div>
685
+ <div class="modal-body">
686
+ <form class="form-grid">
687
+ <div class="form-group">
688
+ <label>Student Name</label>
689
+ <input type="text" class="form-input" placeholder="Enter student name">
690
+ </div>
691
+ <div class="form-group">
692
+ <label>Class</label>
693
+ <select class="form-input">
694
+ <option>Select Class</option>
695
+ <option>1</option>
696
+ <option>2</option>
697
+ <option>3</option>
698
+ <option>4</option>
699
+ <option>5</option>
700
+ <option>6</option>
701
+ <option>7</option>
702
+ <option>8</option>
703
+ <option>9</option>
704
+ <option>10</option>
705
+ <option>11</option>
706
+ <option>12</option>
707
+ </select>
708
+ </div>
709
+ <div class="form-group">
710
+ <label>Roll Number</label>
711
+ <input type="text" class="form-input" placeholder="Enter roll number">
712
+ </div>
713
+ <div class="form-group">
714
+ <label>Section</label>
715
+ <select class="form-input">
716
+ <option>Select Section</option>
717
+ <option>A</option>
718
+ <option>B</option>
719
+ <option>C</option>
720
+ <option>D</option>
721
+ </select>
722
+ </div>
723
+ <div class="form-group">
724
+ <label>Date of Birth</label>
725
+ <input type="date" class="form-input">
726
+ </div>
727
+ <div class="form-group">
728
+ <label>Gender</label>
729
+ <select class="form-input">
730
+ <option>Select Gender</option>
731
+ <option>Male</option>
732
+ <option>Female</option>
733
+ <option>Other</option>
734
+ </select>
735
+ </div>
736
+ <div class="form-group full-width">
737
+ <label>Address</label>
738
+ <textarea class="form-input" rows="3" placeholder="Enter address"></textarea>
739
+ </div>
740
+ <div class="form-group">
741
+ <label>Father's Name</label>
742
+ <input type="text" class="form-input" placeholder="Enter father's name">
743
+ </div>
744
+ <div class="form-group">
745
+ <label>Mother's Name</label>
746
+ <input type="text" class="form-input" placeholder="Enter mother's name">
747
+ </div>
748
+ <div class="form-group">
749
+ <label>Parent Contact</label>
750
+ <input type="tel" class="form-input" placeholder="Enter contact number">
751
+ </div>
752
+ <div class="form-group">
753
+ <label>Email</label>
754
+ <input type="email" class="form-input" placeholder="Enter email address">
755
+ </div>
756
+ </form>
757
+ </div>
758
+ <div class="modal-footer">
759
+ <button class="btn-secondary" onclick="closeModal()">Cancel</button>
760
+ <button class="btn-primary" onclick="saveStudent()">Save Student</button>
761
+ </div>
762
+ </div>
763
+
764
+ <!-- Add Teacher Modal -->
765
+ <div id="add-teacher-modal" class="modal">
766
+ <div class="modal-header">
767
+ <h2>Add New Teacher</h2>
768
+ <button class="modal-close" onclick="closeModal()">&times;</button>
769
+ </div>
770
+ <div class="modal-body">
771
+ <form class="form-grid">
772
+ <div class="form-group">
773
+ <label>Teacher Name</label>
774
+ <input type="text" class="form-input" placeholder="Enter teacher name">
775
+ </div>
776
+ <div class="form-group">
777
+ <label>Department</label>
778
+ <select class="form-input">
779
+ <option>Select Department</option>
780
+ <option>Science</option>
781
+ <option>Mathematics</option>
782
+ <option>English</option>
783
+ <option>Social Studies</option>
784
+ <option>Computer Science</option>
785
+ <option>Physical Education</option>
786
+ </select>
787
+ </div>
788
+ <div class="form-group">
789
+ <label>Subject</label>
790
+ <input type="text" class="form-input" placeholder="Enter subject">
791
+ </div>
792
+ <div class="form-group">
793
+ <label>Experience (years)</label>
794
+ <input type="number" class="form-input" placeholder="Enter experience">
795
+ </div>
796
+ <div class="form-group">
797
+ <label>Qualification</label>
798
+ <input type="text" class="form-input" placeholder="Enter qualification">
799
+ </div>
800
+ <div class="form-group">
801
+ <label>Employee ID</label>
802
+ <input type="text" class="form-input" placeholder="Enter employee ID">
803
+ </div>
804
+ <div class="form-group">
805
+ <label>Contact Number</label>
806
+ <input type="tel" class="form-input" placeholder="Enter contact number">
807
+ </div>
808
+ <div class="form-group">
809
+ <label>Email</label>
810
+ <input type="email" class="form-input" placeholder="Enter email address">
811
+ </div>
812
+ <div class="form-group full-width">
813
+ <label>Address</label>
814
+ <textarea class="form-input" rows="3" placeholder="Enter address"></textarea>
815
+ </div>
816
+ </form>
817
+ </div>
818
+ <div class="modal-footer">
819
+ <button class="btn-secondary" onclick="closeModal()">Cancel</button>
820
+ <button class="btn-primary" onclick="saveTeacher()">Save Teacher</button>
821
+ </div>
822
+ </div>
823
+
824
+ <!-- Lesson Plan Modal -->
825
+ <div id="lesson-plan-modal" class="modal">
826
+ <div class="modal-header">
827
+ <h2>Create Lesson Plan</h2>
828
+ <button class="modal-close" onclick="closeModal()">&times;</button>
829
+ </div>
830
+ <div class="modal-body">
831
+ <form class="form-grid">
832
+ <div class="form-group">
833
+ <label>Subject</label>
834
+ <select class="form-input">
835
+ <option>Select Subject</option>
836
+ <option>Mathematics</option>
837
+ <option>Science</option>
838
+ <option>English</option>
839
+ <option>Social Studies</option>
840
+ <option>Computer Science</option>
841
+ </select>
842
+ </div>
843
+ <div class="form-group">
844
+ <label>Class</label>
845
+ <select class="form-input">
846
+ <option>Select Class</option>
847
+ <option>1</option>
848
+ <option>2</option>
849
+ <option>3</option>
850
+ <option>4</option>
851
+ <option>5</option>
852
+ <option>6</option>
853
+ <option>7</option>
854
+ <option>8</option>
855
+ <option>9</option>
856
+ <option>10</option>
857
+ <option>11</option>
858
+ <option>12</option>
859
+ </select>
860
+ </div>
861
+ <div class="form-group">
862
+ <label>Chapter/Topic</label>
863
+ <input type="text" class="form-input" placeholder="Enter chapter or topic">
864
+ </div>
865
+ <div class="form-group">
866
+ <label>Date</label>
867
+ <input type="date" class="form-input">
868
+ </div>
869
+ <div class="form-group">
870
+ <label>Duration (minutes)</label>
871
+ <input type="number" class="form-input" placeholder="Enter duration">
872
+ </div>
873
+ <div class="form-group">
874
+ <label>Teaching Method</label>
875
+ <select class="form-input">
876
+ <option>Select Method</option>
877
+ <option>Lecture</option>
878
+ <option>Demonstration</option>
879
+ <option>Group Discussion</option>
880
+ <option>Practical</option>
881
+ <option>Multimedia</option>
882
+ </select>
883
+ </div>
884
+ <div class="form-group full-width">
885
+ <label>Learning Objectives</label>
886
+ <textarea class="form-input" rows="3" placeholder="Enter learning objectives"></textarea>
887
+ </div>
888
+ <div class="form-group full-width">
889
+ <label>Teaching Materials</label>
890
+ <textarea class="form-input" rows="3" placeholder="List teaching materials required"></textarea>
891
+ </div>
892
+ <div class="form-group full-width">
893
+ <label>Activities</label>
894
+ <textarea class="form-input" rows="3" placeholder="Describe class activities"></textarea>
895
+ </div>
896
+ <div class="form-group full-width">
897
+ <label>Assessment Method</label>
898
+ <textarea class="form-input" rows="3" placeholder="Describe assessment method"></textarea>
899
+ </div>
900
+ </form>
901
+ </div>
902
+ <div class="modal-footer">
903
+ <button class="btn-secondary" onclick="closeModal()">Cancel</button>
904
+ <button class="btn-primary" onclick="saveLessonPlan()">Save Lesson Plan</button>
905
+ </div>
906
+ </div>
907
+ </div>
908
+
909
+ <footer class="footer">
910
+ <div class="container">
911
+ <p>&copy; 2024 EduManage Pro. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder">anycoder</a></p>
912
+ </div>
913
+ </footer>
914
+
915
+ <script src="assets/js/script.js"></script>
916
+ </body>
917
+ </html>