Hugging Face's logo

Spaces:
s92skc
/
anycoder-87b181e7
Running

App Files Community
s92skc commited on
Commit
3e904ab
·
verified ·
1 Parent(s): fb712ba

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1334 -783
index.html CHANGED
@@ -1,812 +1,1363 @@
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>NCTI Institute Management System</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
- --info-color: #9b59b6;
15
- --dark-color: #2c3e50;
16
- --light-color: #ecf0f1;
17
- --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
- --transition: all 0.3s ease;
19
- }
20
-
21
- * {
22
- margin: 0;
23
- padding: 0;
24
- box-sizing: border-box;
25
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
- }
27
-
28
- body {
29
- background-color: #f5f7fa;
30
- color: var(--dark-color);
31
- line-height: 1.6;
32
- }
33
-
34
- /* Header */
35
- header {
36
- background-color: white;
37
- box-shadow: var(--shadow);
38
- position: sticky;
39
- top: 0;
40
- z-index: 1000;
41
- }
42
-
43
- .header-container {
44
- display: flex;
45
- justify-content: space-between;
46
- align-items: center;
47
- padding: 1rem 2rem;
48
- max-width: 1400px;
49
- margin: 0 auto;
50
- }
51
-
52
- .logo {
53
- display: flex;
54
- align-items: center;
55
- gap: 1rem;
56
- }
57
-
58
- .logo img {
59
- height: 50px;
60
- width: auto;
61
- }
62
-
63
- .logo h1 {
64
- font-size: 1.5rem;
65
- color: var(--primary-color);
66
- }
67
-
68
- .user-info {
69
- display: flex;
70
- align-items: center;
71
- gap: 1rem;
72
- }
73
-
74
- .user-avatar {
75
- width: 40px;
76
- height: 40px;
77
- border-radius: 50%;
78
- background-color: var(--primary-color);
79
- color: white;
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- font-weight: bold;
84
- }
85
-
86
- .header-actions {
87
- display: flex;
88
- gap: 1rem;
89
- }
90
-
91
- .btn {
92
- padding: 0.5rem 1rem;
93
- border: none;
94
- border-radius: 4px;
95
- cursor: pointer;
96
- transition: var(--transition);
97
- font-weight: 500;
98
- }
99
-
100
- .btn-primary {
101
- background-color: var(--primary-color);
102
- color: white;
103
- }
104
-
105
- .btn-secondary {
106
- background-color: var(--secondary-color);
107
- color: white;
108
- }
109
-
110
- .btn-danger {
111
- background-color: var(--danger-color);
112
- color: white;
113
- }
114
-
115
- .btn:hover {
116
- opacity: 0.9;
117
- transform: translateY(-2px);
118
- }
119
-
120
- /* Sidebar */
121
- .sidebar {
122
- position: fixed;
123
- top: 70px;
124
- left: 0;
125
- width: 250px;
126
- height: calc(100vh - 70px);
127
- background-color: white;
128
- box-shadow: var(--shadow);
129
- overflow-y: auto;
130
- transition: var(--transition);
131
- z-index: 999;
132
- }
133
-
134
- .sidebar-header {
135
- padding: 1rem;
136
- border-bottom: 1px solid #eee;
137
- }
138
-
139
- .sidebar-menu {
140
- list-style: none;
141
- }
142
-
143
- .sidebar-menu li {
144
- border-bottom: 1px solid #eee;
145
- }
146
-
147
- .sidebar-menu a {
148
- display: flex;
149
- align-items: center;
150
- padding: 1rem;
151
- color: var(--dark-color);
152
- text-decoration: none;
153
- transition: var(--transition);
154
- }
155
-
156
- .sidebar-menu a:hover, .sidebar-menu a.active {
157
- background-color: var(--primary-color);
158
- color: white;
159
- }
160
-
161
- .sidebar-menu i {
162
- margin-right: 1rem;
163
- width: 20px;
164
- text-align: center;
165
- }
166
-
167
- /* Main Content */
168
- .main-content {
169
- margin-left: 250px;
170
- padding: 2rem;
171
- min-height: calc(100vh - 70px);
172
- }
173
-
174
- .page-header {
175
- display: flex;
176
- justify-content: space-between;
177
- align-items: center;
178
- margin-bottom: 2rem;
179
- }
180
-
181
- .page-title {
182
- font-size: 1.8rem;
183
- color: var(--dark-color);
184
- }
185
-
186
- .breadcrumb {
187
- display: flex;
188
- align-items: center;
189
- gap: 0.5rem;
190
- color: #7f8c8d;
191
- }
192
-
193
- .breadcrumb i {
194
- font-size: 0.8rem;
195
- }
196
-
197
- /* Cards */
198
- .card {
199
- background-color: white;
200
- border-radius: 8px;
201
- box-shadow: var(--shadow);
202
- padding: 1.5rem;
203
- margin-bottom: 1.5rem;
204
- }
205
-
206
- .card-header {
207
- display: flex;
208
- justify-content: space-between;
209
- align-items: center;
210
- margin-bottom: 1rem;
211
- padding-bottom: 1rem;
212
- border-bottom: 1px solid #eee;
213
- }
214
-
215
- .card-title {
216
- font-size: 1.2rem;
217
- color: var(--dark-color);
218
- }
219
-
220
- .card-body {
221
- padding: 1rem 0;
222
- }
223
-
224
- /* Dashboard Stats */
225
- .stats-grid {
226
- display: grid;
227
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
228
- gap: 1.5rem;
229
- margin-bottom: 2rem;
230
- }
231
-
232
- .stat-card {
233
- background-color: white;
234
- border-radius: 8px;
235
- box-shadow: var(--shadow);
236
- padding: 1.5rem;
237
- display: flex;
238
- align-items: center;
239
- gap: 1rem;
240
- }
241
-
242
- .stat-icon {
243
- font-size: 2rem;
244
- opacity: 0.7;
245
- }
246
-
247
- .stat-info h3 {
248
- font-size: 2rem;
249
- margin-bottom: 0.5rem;
250
- }
251
-
252
- .stat-info p {
253
- color: #7f8c8d;
254
- font-size: 0.9rem;
255
- }
256
-
257
- /* Tables */
258
- .table-responsive {
259
- overflow-x: auto;
260
- }
261
-
262
- table {
263
- width: 100%;
264
- border-collapse: collapse;
265
- margin-bottom: 1rem;
266
- }
267
-
268
- th, td {
269
- padding: 1rem;
270
- text-align: left;
271
- border-bottom: 1px solid #eee;
272
- }
273
-
274
- th {
275
- background-color: var(--light-color);
276
- font-weight: 600;
277
- color: var(--dark-color);
278
- }
279
-
280
- tr:hover {
281
- background-color: #f9f9f9;
282
- }
283
-
284
- /* Forms */
285
- .form-group {
286
- margin-bottom: 1.5rem;
287
- }
288
-
289
- .form-group label {
290
- display: block;
291
- margin-bottom: 0.5rem;
292
- font-weight: 500;
293
- }
294
-
295
- .form-control {
296
- width: 100%;
297
- padding: 0.75rem;
298
- border: 1px solid #ddd;
299
- border-radius: 4px;
300
- font-size: 1rem;
301
- transition: var(--transition);
302
- }
303
-
304
- .form-control:focus {
305
- border-color: var(--primary-color);
306
- outline: none;
307
- box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
308
- }
309
-
310
- .select-control {
311
- width: 100%;
312
- padding: 0.75rem;
313
- border: 1px solid #ddd;
314
- border-radius: 4px;
315
- background-color: white;
316
- font-size: 1rem;
317
- }
318
-
319
- /* Modal */
320
- .modal {
321
- display: none;
322
- position: fixed;
323
- top: 0;
324
- left: 0;
325
- width: 100%;
326
- height: 100%;
327
- background-color: rgba(0, 0, 0, 0.5);
328
- z-index: 2000;
329
- overflow-y: auto;
330
- }
331
-
332
- .modal.active {
333
- display: flex;
334
- align-items: center;
335
- justify-content: center;
336
- padding: 1rem;
337
- }
338
-
339
- .modal-content {
340
- background-color: white;
341
- border-radius: 8px;
342
- width: 100%;
343
- max-width: 600px;
344
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
345
- animation: modalFadeIn 0.3s ease;
346
- }
347
-
348
- @keyframes modalFadeIn {
349
- from {
350
- opacity: 0;
351
- transform: translateY(-20px);
352
- }
353
- to {
354
- opacity: 1;
355
- transform: translateY(0);
356
- }
357
- }
358
-
359
- .modal-header {
360
- display: flex;
361
- justify-content: space-between;
362
- align-items: center;
363
- padding: 1.5rem;
364
- border-bottom: 1px solid #eee;
365
- }
366
-
367
- .modal-title {
368
- font-size: 1.3rem;
369
- }
370
-
371
- .modal-close {
372
- background: none;
373
- border: none;
374
- font-size: 1.5rem;
375
- cursor: pointer;
376
- color: #7f8c8d;
377
- }
378
-
379
- .modal-body {
380
- padding: 1.5rem;
381
- }
382
-
383
- .modal-footer {
384
- display: flex;
385
- justify-content: flex-end;
386
- gap: 1rem;
387
- padding: 1.5rem;
388
- border-top: 1px solid #eee;
389
- }
390
-
391
- /* Tabs */
392
- .tabs {
393
- display: flex;
394
- border-bottom: 1px solid #eee;
395
- margin-bottom: 1.5rem;
396
- }
397
-
398
- .tab {
399
- padding: 1rem 1.5rem;
400
- cursor: pointer;
401
- border: none;
402
- background: none;
403
- font-size: 1rem;
404
- color: #7f8c8d;
405
- transition: var(--transition);
406
- }
407
-
408
- .tab.active {
409
- color: var(--primary-color);
410
- border-bottom: 2px solid var(--primary-color);
411
- }
412
-
413
- .tab-content {
414
- display: none;
415
- }
416
-
417
- .tab-content.active {
418
- display: block;
419
- }
420
-
421
- /* Charts */
422
- .chart-container {
423
- height: 300px;
424
- width: 100%;
425
- }
426
-
427
- /* Responsive */
428
- @media (max-width: 768px) {
429
- .sidebar {
430
- transform: translateX(-100%);
431
- }
432
-
433
- .sidebar.active {
434
- transform: translateX(0);
435
- }
436
-
437
- .main-content {
438
- margin-left: 0;
439
- }
440
-
441
- .header-container {
442
- padding: 1rem;
443
- }
444
-
445
- .stats-grid {
446
- grid-template-columns: 1fr;
447
- }
448
- }
449
-
450
- /* Utility Classes */
451
- .text-center {
452
- text-align: center;
453
- }
454
-
455
- .text-right {
456
- text-align: right;
457
- }
458
-
459
- .mt-1 { margin-top: 0.5rem; }
460
- .mt-2 { margin-top: 1rem; }
461
- .mt-3 { margin-top: 1.5rem; }
462
- .mt-4 { margin-top: 2rem; }
463
-
464
- .mb-1 { margin-bottom: 0.5rem; }
465
- .mb-2 { margin-bottom: 1rem; }
466
- .mb-3 { margin-bottom: 1.5rem; }
467
- .mb-4 { margin-bottom: 2rem; }
468
-
469
- .d-flex {
470
- display: flex;
471
- }
472
-
473
- .justify-between {
474
- justify-content: space-between;
475
- }
476
-
477
- .align-center {
478
- align-items: center;
479
- }
480
-
481
- .gap-1 { gap: 0.5rem; }
482
- .gap-2 { gap: 1rem; }
483
- .gap-3 { gap: 1.5rem; }
484
-
485
- /* Built with anycoder */
486
- .built-with {
487
- position: fixed;
488
- bottom: 1rem;
489
- right: 1rem;
490
- background-color: var(--primary-color);
491
- color: white;
492
- padding: 0.5rem 1rem;
493
- border-radius: 4px;
494
- font-size: 0.9rem;
495
- text-decoration: none;
496
- box-shadow: var(--shadow);
497
- z-index: 1000;
498
- }
499
-
500
- .built-with:hover {
501
- opacity: 0.9;
502
- }
503
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
504
  </head>
 
505
  <body>
506
- <header>
507
- <div class="header-container">
508
- <div class="logo">
509
- <img src="https://via.placeholder.com/50" alt="NCTI Logo">
510
- <h1>NCTI Institute</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
511
  </div>
512
- <div class="header-actions">
513
- <button class="btn btn-primary" id="toggleSidebar">
514
- <i class="fas fa-bars"></i>
515
- </button>
516
- <div class="user-info">
517
- <div class="user-avatar">A</div>
518
- <div>
519
- <p style="font-size: 0.9rem; margin-bottom: 0.2rem;">Admin</p>
520
- <small style="color: #7f8c8d;">Super Admin</small>
521
- </div>
522
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
523
  </div>
 
524
  </div>
525
- </header>
526
 
527
- <div class="sidebar" id="sidebar">
528
- <div class="sidebar-header">
529
- <h3>Menu</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
530
  </div>
531
- <ul class="sidebar-menu">
532
- <li><a href="#" class="active"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
533
- <li><a href="#"><i class="fas fa-users"></i> Students</a></li>
534
- <li><a href="#"><i class="fas fa-book"></i> Courses</a></li>
535
- <li><a href="#"><i class="fas fa-calendar-alt"></i> Batches</a></li>
536
- <li><a href="#"><i class="fas fa-check-square"></i> Attendance</a></li>
537
- <li><a href="#"><i class="fas fa-money-bill-wave"></i> Fees</a></li>
538
- <li><a href="#"><i class="fas fa-clipboard-list"></i> Exams</a></li>
539
- <li><a href="#"><i class="fas fa-certificate"></i> Certificates</a></li>
540
- <li><a href="#"><i class="fas fa-id-card"></i> ID Cards</a></li>
541
- <li><a href="#"><i class="fas fa-building"></i> Branches</a></li>
542
- <li><a href="#"><i class="fas fa-cogs"></i> Settings</a></li>
543
- <li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
544
- </ul>
545
  </div>
546
 
547
- <div class="main-content">
548
- <div class="page-header">
549
- <h1 class="page-title">Dashboard</h1>
550
- <div class="breadcrumb">
551
- <i class="fas fa-home"></i>
552
- <span>Home</span>
553
- <i class="fas fa-chevron-right"></i>
554
- <span>Dashboard</span>
555
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
556
  </div>
 
 
557
 
558
- <div class="stats-grid">
559
- <div class="stat-card">
560
- <div class="stat-icon" style="color: var(--primary-color);">
561
- <i class="fas fa-users"></i>
562
- </div>
563
- <div class="stat-info">
564
- <h3>1,250</h3>
565
- <p>Total Students</p>
566
- </div>
567
- </div>
568
- <div class="stat-card">
569
- <div class="stat-icon" style="color: var(--secondary-color);">
570
- <i class="fas fa-book"></i>
571
- </div>
572
- <div class="stat-info">
573
- <h3>12</h3>
574
- <p>Active Courses</p>
575
- </div>
576
- </div>
577
- <div class="stat-card">
578
- <div class="stat-icon" style="color: var(--info-color);">
579
- <i class="fas fa-calendar-alt"></i>
580
- </div>
581
- <div class="stat-info">
582
- <h3>25</h3>
583
- <p>Running Batches</p>
584
- </div>
585
- </div>
586
- <div class="stat-card">
587
- <div class="stat-icon" style="color: var(--warning-color);">
588
- <i class="fas fa-money-bill-wave"></i>
589
- </div>
590
- <div class="stat-info">
591
- <h3>₹5,25,000</h3>
592
- <p>Total Fees Collected</p>
593
- </div>
594
- </div>
595
  </div>
 
596
 
597
- <div class="card">
598
- <div class="card-header">
599
- <h3 class="card-title">Recent Activity</h3>
600
- <button class="btn btn-primary" id="viewAllActivity">View All</button>
601
- </div>
602
- <div class="card-body">
603
- <div class="table-responsive">
604
- <table>
605
- <thead>
606
- <tr>
607
- <th>Date</th>
608
- <th>User</th>
609
- <th>Action</th>
610
- <th>Details</th>
611
- </tr>
612
- </thead>
613
- <tbody>
614
- <tr>
615
- <td>2023-06-15 10:30 AM</td>
616
- <td>Admin</td>
617
- <td>Student Added</td>
618
- <td>Rajesh Kumar enrolled in Web Development</td>
619
- </tr>
620
- <tr>
621
- <td>2023-06-14 03:15 PM</td>
622
- <td>Staff (Priya)</td>
623
- <td>Fee Received</td>
624
- <td>₹12,000 from Ananya Sharma</td>
625
- </tr>
626
- <tr>
627
- <td>2023-06-14 11:00 AM</td>
628
- <td>Admin</td>
629
- <td>Certificate Generated</td>
630
- <td>For batch WD-2023-05</td>
631
- </tr>
632
- <tr>
633
- <td>2023-06-13 04:45 PM</td>
634
- <td>Staff (Amit)</td>
635
- <td>Attendance Marked</td>
636
- <td>Batch WD-2023-05 - 25 present</td>
637
- </tr>
638
- </tbody>
639
- </table>
640
- </div>
641
- </div>
642
  </div>
 
 
643
 
644
- <div class="card">
645
- <div class="card-header">
646
- <h3 class="card-title">Quick Actions</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
647
  </div>
648
- <div class="card-body">
649
- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
650
- <button class="btn btn-primary" style="height: 100px;">
651
- <i class="fas fa-user-plus" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
652
- Add Student
653
- </button>
654
- <button class="btn btn-secondary" style="height: 100px;">
655
- <i class="fas fa-money-bill-wave" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
656
- Record Fee
657
- </button>
658
- <button class="btn btn-info" style="height: 100px; background-color: var(--info-color);">
659
- <i class="fas fa-check-square" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
660
- Mark Attendance
661
- </button>
662
- <button class="btn" style="height: 100px; background-color: #34495e; color: white;">
663
- <i class="fas fa-certificate" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
664
- Generate Certificates
665
- </button>
666
- </div>
667
  </div>
 
668
  </div>
 
669
  </div>
670
 
671
- <!-- Modal for adding student -->
672
- <div class="modal" id="addStudentModal">
673
- <div class="modal-content">
674
- <div class="modal-header">
675
- <h2 class="modal-title">Add New Student</h2>
676
- <button class="modal-close" id="closeStudentModal">&times;</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
677
  </div>
678
- <div class="modal-body">
679
- <form id="studentForm">
680
- <div class="form-group">
681
- <label for="studentName">Full Name</label>
682
- <input type="text" id="studentName" class="form-control" required>
683
- </div>
684
- <div class="form-group">
685
- <label for="fatherName">Father's Name</label>
686
- <input type="text" id="fatherName" class="form-control" required>
687
- </div>
688
- <div class="form-group">
689
- <label for="dob">Date of Birth</label>
690
- <input type="date" id="dob" class="form-control" required>
691
- </div>
692
- <div class="form-group">
693
- <label for="mobile">Mobile Number</label>
694
- <input type="tel" id="mobile" class="form-control" required>
695
- </div>
696
- <div class="form-group">
697
- <label for="course">Course</label>
698
- <select id="course" class="select-control" required>
699
- <option value="">Select Course</option>
700
- <option value="web-dev">Web Development</option>
701
- <option value="graphic-design">Graphic Design</option>
702
- <option value="digital-marketing">Digital Marketing</option>
703
- </select>
704
- </div>
705
- <div class="form-group">
706
- <label for="batch">Batch</label>
707
- <select id="batch" class="select-control" required>
708
- <option value="">Select Batch</option>
709
- <option value="morning">Morning (9AM-12PM)</option>
710
- <option value="evening">Evening (4PM-7PM)</option>
711
- </select>
712
- </div>
713
- </form>
714
  </div>
715
- <div class="modal-footer">
716
- <button type="button" class="btn btn-secondary" id="cancelStudent">Cancel</button>
717
- <button type="button" class="btn btn-primary" id="saveStudent">Save Student</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
718
  </div>
 
719
  </div>
 
720
  </div>
721
 
722
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a>
723
-
724
- <script>
725
- // Sidebar toggle
726
- document.getElementById('toggleSidebar').addEventListener('click', function() {
727
- document.getElementById('sidebar').classList.toggle('active');
728
- });
729
-
730
- // Modal functionality
731
- const addStudentModal = document.getElementById('addStudentModal');
732
- const closeStudentModal = document.getElementById('closeStudentModal');
733
- const cancelStudent = document.getElementById('cancelStudent');
734
- const saveStudent = document.getElementById('saveStudent');
735
-
736
- // Open modal when "Add Student" button is clicked
737
- document.querySelector('.btn-primary[style*="Add Student"]').addEventListener('click', function() {
738
- addStudentModal.classList.add('active');
739
- });
740
-
741
- // Close modal functions
742
- closeStudentModal.addEventListener('click', function() {
743
- addStudentModal.classList.remove('active');
744
- });
745
-
746
- cancelStudent.addEventListener('click', function() {
747
- addStudentModal.classList.remove('active');
748
- });
749
-
750
- // Save student (simulated)
751
- saveStudent.addEventListener('click', function() {
752
- const studentName = document.getElementById('studentName').value;
753
- const fatherName = document.getElementById('fatherName').value;
754
- const dob = document.getElementById('dob').value;
755
- const mobile = document.getElementById('mobile').value;
756
- const course = document.getElementById('course').value;
757
- const batch = document.getElementById('batch').value;
758
-
759
- if (!studentName || !fatherName || !dob || !mobile || !course || !batch) {
760
- alert('Please fill all fields');
761
- return;
762
- }
763
-
764
- // In a real app, this would send data to the server
765
- console.log('Student saved:', {
766
- studentName,
767
- fatherName,
768
- dob,
769
- mobile,
770
- course,
771
- batch
772
- });
773
-
774
- alert('Student added successfully!');
775
- addStudentModal.classList.remove('active');
776
- document.getElementById('studentForm').reset();
777
- });
778
-
779
- // Close modal when clicking outside
780
- addStudentModal.addEventListener('click', function(e) {
781
- if (e.target === addStudentModal) {
782
- addStudentModal.classList.remove('active');
783
- }
784
- });
785
-
786
- // Tab functionality (example)
787
- document.querySelectorAll('.tab').forEach(tab => {
788
- tab.addEventListener('click', function() {
789
- // Remove active class from all tabs and content
790
- document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
791
- document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
792
-
793
- // Add active class to clicked tab
794
- this.classList.add('active');
795
-
796
- // Show corresponding content
797
- const tabId = this.getAttribute('data-tab');
798
- document.getElementById(tabId).classList.add('active');
799
- });
800
- });
801
-
802
- // Initialize first tab as active
803
- if (document.querySelector('.tab')) {
804
- document.querySelector('.tab').classList.add('active');
805
- const firstTabId = document.querySelector('.tab').getAttribute('data-tab');
806
- if (firstTabId) {
807
- document.getElementById(firstTabId).classList.add('active');
808
- }
809
- }
810
- </script>
811
- </body>
812
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>NCTI Institute Management System</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
10
+ <style>
11
+ :root {
12
+ --primary-color: #3498db;
13
+ --secondary-color: #2ecc71;
14
+ --danger-color: #e74c3c;
15
+ --warning-color: #f39c12;
16
+ --info-color: #9b59b6;
17
+ --dark-color: #2c3e50;
18
+ --light-color: #ecf0f1;
19
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
20
+ --transition: all 0.3s ease;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ }
29
+
30
+ body {
31
+ background-color: #f5f7fa;
32
+ color: var(--dark-color);
33
+ line-height: 1.6;
34
+ }
35
+
36
+ /* Header */
37
+ header {
38
+ background-color: white;
39
+ box-shadow: var(--shadow);
40
+ position: sticky;
41
+ top: 0;
42
+ z-index: 1000;
43
+ }
44
+
45
+ .header-container {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ padding: 1rem 2rem;
50
+ max-width: 1400px;
51
+ margin: 0 auto;
52
+ }
53
+
54
+ .logo {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 1rem;
58
+ }
59
+
60
+ .logo img {
61
+ height: 50px;
62
+ width: auto;
63
+ }
64
+
65
+ .logo h1 {
66
+ font-size: 1.5rem;
67
+ color: var(--primary-color);
68
+ }
69
+
70
+ .user-info {
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 1rem;
74
+ }
75
+
76
+ .user-avatar {
77
+ width: 40px;
78
+ height: 40px;
79
+ border-radius: 50%;
80
+ background-color: var(--primary-color);
81
+ color: white;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ font-weight: bold;
86
+ }
87
+
88
+ .header-actions {
89
+ display: flex;
90
+ gap: 1rem;
91
+ align-items: center;
92
+ }
93
+
94
+ .btn {
95
+ padding: 0.5rem 1rem;
96
+ border: none;
97
+ border-radius: 4px;
98
+ cursor: pointer;
99
+ transition: var(--transition);
100
+ font-weight: 500;
101
+ }
102
+
103
+ .btn-primary {
104
+ background-color: var(--primary-color);
105
+ color: white;
106
+ }
107
+
108
+ .btn-secondary {
109
+ background-color: var(--secondary-color);
110
+ color: white;
111
+ }
112
+
113
+ .btn-danger {
114
+ background-color: var(--danger-color);
115
+ color: white;
116
+ }
117
+
118
+ .btn-info {
119
+ background-color: var(--info-color);
120
+ color: white;
121
+ }
122
+
123
+ .btn-success {
124
+ background-color: #27ae60;
125
+ color: white;
126
+ }
127
+
128
+ .btn:hover {
129
+ opacity: 0.9;
130
+ transform: translateY(-2px);
131
+ }
132
+
133
+ /* Sidebar */
134
+ .sidebar {
135
+ position: fixed;
136
+ top: 70px;
137
+ left: 0;
138
+ width: 250px;
139
+ height: calc(100vh - 70px);
140
+ background-color: white;
141
+ box-shadow: var(--shadow);
142
+ overflow-y: auto;
143
+ transition: var(--transition);
144
+ z-index: 999;
145
+ }
146
+
147
+ .sidebar-header {
148
+ padding: 1rem;
149
+ border-bottom: 1px solid #eee;
150
+ }
151
+
152
+ .sidebar-menu {
153
+ list-style: none;
154
+ }
155
+
156
+ .sidebar-menu li {
157
+ border-bottom: 1px solid #eee;
158
+ }
159
+
160
+ .sidebar-menu a {
161
+ display: flex;
162
+ align-items: center;
163
+ padding: 1rem;
164
+ color: var(--dark-color);
165
+ text-decoration: none;
166
+ transition: var(--transition);
167
+ }
168
+
169
+ .sidebar-menu a:hover,
170
+ .sidebar-menu a.active {
171
+ background-color: var(--primary-color);
172
+ color: white;
173
+ }
174
+
175
+ .sidebar-menu i {
176
+ margin-right: 1rem;
177
+ width: 20px;
178
+ text-align: center;
179
+ }
180
+
181
+ /* Main Content */
182
+ .main-content {
183
+ margin-left: 250px;
184
+ padding: 2rem;
185
+ min-height: calc(100vh - 70px);
186
+ }
187
+
188
+ .page-header {
189
+ display: flex;
190
+ justify-content: space-between;
191
+ align-items: center;
192
+ margin-bottom: 2rem;
193
+ flex-wrap: wrap;
194
+ gap: 1rem;
195
+ }
196
+
197
+ .page-title {
198
+ font-size: 1.8rem;
199
+ color: var(--dark-color);
200
+ }
201
+
202
+ .breadcrumb {
203
+ display: flex;
204
+ align-items: center;
205
+ gap: 0.5rem;
206
+ color: #7f8c8d;
207
+ }
208
+
209
+ .breadcrumb i {
210
+ font-size: 0.8rem;
211
+ }
212
+
213
+ /* Cards */
214
+ .card {
215
+ background-color: white;
216
+ border-radius: 8px;
217
+ box-shadow: var(--shadow);
218
+ padding: 1.5rem;
219
+ margin-bottom: 1.5rem;
220
+ }
221
+
222
+ .card-header {
223
+ display: flex;
224
+ justify-content: space-between;
225
+ align-items: center;
226
+ margin-bottom: 1rem;
227
+ padding-bottom: 1rem;
228
+ border-bottom: 1px solid #eee;
229
+ flex-wrap: wrap;
230
+ gap: 1rem;
231
+ }
232
+
233
+ .card-title {
234
+ font-size: 1.2rem;
235
+ color: var(--dark-color);
236
+ }
237
+
238
+ .card-body {
239
+ padding: 1rem 0;
240
+ }
241
+
242
+ /* Dashboard Stats */
243
+ .stats-grid {
244
+ display: grid;
245
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
246
+ gap: 1.5rem;
247
+ margin-bottom: 2rem;
248
+ }
249
+
250
+ .stat-card {
251
+ background-color: white;
252
+ border-radius: 8px;
253
+ box-shadow: var(--shadow);
254
+ padding: 1.5rem;
255
+ display: flex;
256
+ align-items: center;
257
+ gap: 1rem;
258
+ }
259
+
260
+ .stat-icon {
261
+ font-size: 2rem;
262
+ opacity: 0.7;
263
+ }
264
+
265
+ .stat-info h3 {
266
+ font-size: 2rem;
267
+ margin-bottom: 0.5rem;
268
+ }
269
+
270
+ .stat-info p {
271
+ color: #7f8c8d;
272
+ font-size: 0.9rem;
273
+ }
274
+
275
+ /* Tables */
276
+ .table-responsive {
277
+ overflow-x: auto;
278
+ }
279
+
280
+ table {
281
+ width: 100%;
282
+ border-collapse: collapse;
283
+ margin-bottom: 1rem;
284
+ }
285
+
286
+ th,
287
+ td {
288
+ padding: 1rem;
289
+ text-align: left;
290
+ border-bottom: 1px solid #eee;
291
+ }
292
+
293
+ th {
294
+ background-color: var(--light-color);
295
+ font-weight: 600;
296
+ color: var(--dark-color);
297
+ }
298
+
299
+ tr:hover {
300
+ background-color: #f9f9f9;
301
+ }
302
+
303
+ /* Forms */
304
+ .form-group {
305
+ margin-bottom: 1.5rem;
306
+ }
307
+
308
+ .form-group label {
309
+ display: block;
310
+ margin-bottom: 0.5rem;
311
+ font-weight: 500;
312
+ }
313
+
314
+ .form-control {
315
+ width: 100%;
316
+ padding: 0.75rem;
317
+ border: 1px solid #ddd;
318
+ border-radius: 4px;
319
+ font-size: 1rem;
320
+ transition: var(--transition);
321
+ }
322
+
323
+ .form-control:focus {
324
+ border-color: var(--primary-color);
325
+ outline: none;
326
+ box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
327
+ }
328
+
329
+ .select-control {
330
+ width: 100%;
331
+ padding: 0.75rem;
332
+ border: 1px solid #ddd;
333
+ border-radius: 4px;
334
+ background-color: white;
335
+ font-size: 1rem;
336
+ }
337
+
338
+ /* Modal */
339
+ .modal {
340
+ display: none;
341
+ position: fixed;
342
+ top: 0;
343
+ left: 0;
344
+ width: 100%;
345
+ height: 100%;
346
+ background-color: rgba(0, 0, 0, 0.5);
347
+ z-index: 2000;
348
+ overflow-y: auto;
349
+ }
350
+
351
+ .modal.active {
352
+ display: flex;
353
+ align-items: center;
354
+ justify-content: center;
355
+ padding: 1rem;
356
+ }
357
+
358
+ .modal-content {
359
+ background-color: white;
360
+ border-radius: 8px;
361
+ width: 100%;
362
+ max-width: 800px;
363
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
364
+ animation: modalFadeIn 0.3s ease;
365
+ }
366
+
367
+ @keyframes modalFadeIn {
368
+ from {
369
+ opacity: 0;
370
+ transform: translateY(-20px);
371
+ }
372
+
373
+ to {
374
+ opacity: 1;
375
+ transform: translateY(0);
376
+ }
377
+ }
378
+
379
+ .modal-header {
380
+ display: flex;
381
+ justify-content: space-between;
382
+ align-items: center;
383
+ padding: 1.5rem;
384
+ border-bottom: 1px solid #eee;
385
+ }
386
+
387
+ .modal-title {
388
+ font-size: 1.3rem;
389
+ }
390
+
391
+ .modal-close {
392
+ background: none;
393
+ border: none;
394
+ font-size: 1.5rem;
395
+ cursor: pointer;
396
+ color: #7f8c8d;
397
+ }
398
+
399
+ .modal-body {
400
+ padding: 1.5rem;
401
+ max-height: 70vh;
402
+ overflow-y: auto;
403
+ }
404
+
405
+ .modal-footer {
406
+ display: flex;
407
+ justify-content: flex-end;
408
+ gap: 1rem;
409
+ padding: 1.5rem;
410
+ border-top: 1px solid #eee;
411
+ }
412
+
413
+ /* Tabs */
414
+ .tabs {
415
+ display: flex;
416
+ border-bottom: 1px solid #eee;
417
+ margin-bottom: 1.5rem;
418
+ overflow-x: auto;
419
+ }
420
+
421
+ .tab {
422
+ padding: 1rem 1.5rem;
423
+ cursor: pointer;
424
+ border: none;
425
+ background: none;
426
+ font-size: 1rem;
427
+ color: #7f8c8d;
428
+ transition: var(--transition);
429
+ white-space: nowrap;
430
+ }
431
+
432
+ .tab.active {
433
+ color: var(--primary-color);
434
+ border-bottom: 2px solid var(--primary-color);
435
+ }
436
+
437
+ .tab-content {
438
+ display: none;
439
+ }
440
+
441
+ .tab-content.active {
442
+ display: block;
443
+ }
444
+
445
+ /* ID Card */
446
+ .id-card {
447
+ width: 300px;
448
+ height: 200px;
449
+ background-color: white;
450
+ border-radius: 8px;
451
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
452
+ padding: 1rem;
453
+ margin: 0 auto;
454
+ position: relative;
455
+ overflow: hidden;
456
+ }
457
+
458
+ .id-card-header {
459
+ display: flex;
460
+ justify-content: space-between;
461
+ align-items: center;
462
+ margin-bottom: 1rem;
463
+ }
464
+
465
+ .id-card-logo {
466
+ width: 50px;
467
+ height: 50px;
468
+ }
469
+
470
+ .id-card-title {
471
+ font-size: 0.9rem;
472
+ font-weight: bold;
473
+ text-align: center;
474
+ }
475
+
476
+ .id-card-photo {
477
+ width: 80px;
478
+ height: 100px;
479
+ border: 2px solid #ddd;
480
+ margin: 0 auto 1rem;
481
+ display: block;
482
+ }
483
+
484
+ .id-card-details {
485
+ font-size: 0.8rem;
486
+ }
487
+
488
+ .id-card-details p {
489
+ margin-bottom: 0.3rem;
490
+ }
491
+
492
+ .id-card-qr {
493
+ position: absolute;
494
+ bottom: 1rem;
495
+ right: 1rem;
496
+ width: 50px;
497
+ height: 50px;
498
+ }
499
+
500
+ /* Certificate */
501
+ .certificate {
502
+ width: 800px;
503
+ height: 600px;
504
+ background-color: white;
505
+ border: 10px solid #f5f5f5;
506
+ padding: 2rem;
507
+ margin: 0 auto;
508
+ position: relative;
509
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
510
+ }
511
+
512
+ .certificate-border {
513
+ position: absolute;
514
+ top: 0;
515
+ left: 0;
516
+ right: 0;
517
+ bottom: 0;
518
+ border: 2px solid #ddd;
519
+ pointer-events: none;
520
+ }
521
+
522
+ .certificate-header {
523
+ text-align: center;
524
+ margin-bottom: 2rem;
525
+ }
526
+
527
+ .certificate-title {
528
+ font-size: 2rem;
529
+ font-weight: bold;
530
+ color: var(--primary-color);
531
+ margin-bottom: 0.5rem;
532
+ }
533
+
534
+ .certificate-subtitle {
535
+ font-size: 1.2rem;
536
+ color: #7f8c8d;
537
+ }
538
+
539
+ .certificate-content {
540
+ text-align: center;
541
+ margin-bottom: 3rem;
542
+ }
543
+
544
+ .certificate-name {
545
+ font-size: 1.8rem;
546
+ font-weight: bold;
547
+ margin-bottom: 1rem;
548
+ }
549
+
550
+ .certificate-details {
551
+ font-size: 1rem;
552
+ margin-bottom: 1rem;
553
+ }
554
+
555
+ .certificate-signature {
556
+ display: flex;
557
+ justify-content: space-between;
558
+ align-items: center;
559
+ margin-top: 3rem;
560
+ }
561
+
562
+ .signature {
563
+ text-align: center;
564
+ width: 200px;
565
+ }
566
+
567
+ .signature-line {
568
+ height: 2px;
569
+ background-color: #7f8c8d;
570
+ margin-bottom: 0.5rem;
571
+ }
572
+
573
+ .certificate-qr {
574
+ position: absolute;
575
+ bottom: 2rem;
576
+ right: 2rem;
577
+ width: 80px;
578
+ height: 80px;
579
+ }
580
+
581
+ /* Responsive */
582
+ @media (max-width: 768px) {
583
+ .sidebar {
584
+ transform: translateX(-100%);
585
+ }
586
+
587
+ .sidebar.active {
588
+ transform: translateX(0);
589
+ }
590
+
591
+ .main-content {
592
+ margin-left: 0;
593
+ }
594
+
595
+ .header-container {
596
+ padding: 1rem;
597
+ }
598
+
599
+ .stats-grid {
600
+ grid-template-columns: 1fr;
601
+ }
602
+
603
+ .certificate {
604
+ width: 100%;
605
+ height: auto;
606
+ }
607
+ }
608
+
609
+ /* Utility Classes */
610
+ .text-center {
611
+ text-align: center;
612
+ }
613
+
614
+ .text-right {
615
+ text-align: right;
616
+ }
617
+
618
+ .mt-1 {
619
+ margin-top: 0.5rem;
620
+ }
621
+
622
+ .mt-2 {
623
+ margin-top: 1rem;
624
+ }
625
+
626
+ .mt-3 {
627
+ margin-top: 1.5rem;
628
+ }
629
+
630
+ .mt-4 {
631
+ margin-top: 2rem;
632
+ }
633
+
634
+ .mb-1 {
635
+ margin-bottom: 0.5rem;
636
+ }
637
+
638
+ .mb-2 {
639
+ margin-bottom: 1rem;
640
+ }
641
+
642
+ .mb-3 {
643
+ margin-bottom: 1.5rem;
644
+ }
645
+
646
+ .mb-4 {
647
+ margin-bottom: 2rem;
648
+ }
649
+
650
+ .d-flex {
651
+ display: flex;
652
+ }
653
+
654
+ .justify-between {
655
+ justify-content: space-between;
656
+ }
657
+
658
+ .align-center {
659
+ align-items: center;
660
+ }
661
+
662
+ .gap-1 {
663
+ gap: 0.5rem;
664
+ }
665
+
666
+ .gap-2 {
667
+ gap: 1rem;
668
+ }
669
+
670
+ .gap-3 {
671
+ gap: 1.5rem;
672
+ }
673
+
674
+ .grid-2 {
675
+ display: grid;
676
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
677
+ gap: 1.5rem;
678
+ }
679
+
680
+ .grid-3 {
681
+ display: grid;
682
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
683
+ gap: 1.5rem;
684
+ }
685
+
686
+ /* Built with anycoder */
687
+ .built-with {
688
+ position: fixed;
689
+ bottom: 1rem;
690
+ right: 1rem;
691
+ background-color: var(--primary-color);
692
+ color: white;
693
+ padding: 0.5rem 1rem;
694
+ border-radius: 4px;
695
+ font-size: 0.9rem;
696
+ text-decoration: none;
697
+ box-shadow: var(--shadow);
698
+ z-index: 1000;
699
+ }
700
+
701
+ .built-with:hover {
702
+ opacity: 0.9;
703
+ }
704
+
705
+ /* Search and Filter */
706
+ .search-filter {
707
+ display: flex;
708
+ gap: 1rem;
709
+ margin-bottom: 1.5rem;
710
+ flex-wrap: wrap;
711
+ }
712
+
713
+ .search-input {
714
+ flex: 1;
715
+ min-width: 200px;
716
+ }
717
+
718
+ /* File Upload */
719
+ .file-upload {
720
+ border: 2px dashed #ddd;
721
+ border-radius: 4px;
722
+ padding: 2rem;
723
+ text-align: center;
724
+ cursor: pointer;
725
+ transition: var(--transition);
726
+ }
727
+
728
+ .file-upload:hover {
729
+ border-color: var(--primary-color);
730
+ }
731
+
732
+ .file-upload input {
733
+ display: none;
734
+ }
735
+
736
+ .file-upload-label {
737
+ cursor: pointer;
738
+ }
739
+
740
+ .file-preview {
741
+ margin-top: 1rem;
742
+ display: flex;
743
+ flex-wrap: wrap;
744
+ gap: 1rem;
745
+ }
746
+
747
+ .file-preview-item {
748
+ position: relative;
749
+ width: 100px;
750
+ height: 100px;
751
+ }
752
+
753
+ .file-preview-item img {
754
+ width: 100%;
755
+ height: 100%;
756
+ object-fit: cover;
757
+ border-radius: 4px;
758
+ }
759
+
760
+ .file-preview-remove {
761
+ position: absolute;
762
+ top: 0;
763
+ right: 0;
764
+ background-color: var(--danger-color);
765
+ color: white;
766
+ border: none;
767
+ border-radius: 50%;
768
+ width: 20px;
769
+ height: 20px;
770
+ cursor: pointer;
771
+ }
772
+
773
+ /* QR Code */
774
+ .qr-code {
775
+ display: flex;
776
+ justify-content: center;
777
+ margin: 1rem 0;
778
+ }
779
+
780
+ .qr-code img {
781
+ width: 100px;
782
+ height: 100px;
783
+ }
784
+ </style>
785
  </head>
786
+
787
  <body>
788
+ <header>
789
+ <div class="header-container">
790
+ <div class="logo">
791
+ <img src="https://via.placeholder.com/50" alt="NCTI Logo">
792
+ <h1>NCTI Institute</h1>
793
+ </div>
794
+ <div class="header-actions">
795
+ <button class="btn btn-primary" id="toggleSidebar">
796
+ <i class="fas fa-bars"></i>
797
+ </button>
798
+ <div class="user-info">
799
+ <div class="user-avatar">A</div>
800
+ <div>
801
+ <p style="font-size: 0.9rem; margin-bottom: 0.2rem;">Admin</p>
802
+ <small style="color: #7f8c8d;">Super Admin</small>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ </header>
808
+
809
+ <div class="sidebar" id="sidebar">
810
+ <div class="sidebar-header">
811
+ <h3>Menu</h3>
812
+ </div>
813
+ <ul class="sidebar-menu">
814
+ <li><a href="#" class="active" data-page="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
815
+ <li><a href="#" data-page="students"><i class="fas fa-users"></i> Students</a></li>
816
+ <li><a href="#" data-page="courses"><i class="fas fa-book"></i> Courses</a></li>
817
+ <li><a href="#" data-page="fees"><i class="fas fa-money-bill-wave"></i> Fees</a></li>
818
+ <li><a href="#" data-page="attendance"><i class="fas fa-check-square"></i> Attendance</a></li>
819
+ <li><a href="#" data-page="exams"><i class="fas fa-clipboard-list"></i> Exams</a></li>
820
+ <li><a href="#" data-page="certificates"><i class="fas fa-certificate"></i> Certificates</a></li>
821
+ <li><a href="#" data-page="marksheets"><i class="fas fa-file-alt"></i> Marksheets</a></li>
822
+ <li><a href="#" data-page="branches"><i class="fas fa-building"></i> Branches</a></li>
823
+ <li><a href="#" data-page="staff"><i class="fas fa-user-tie"></i> Staff</a></li>
824
+ <li><a href="#" data-page="reports"><i class="fas fa-chart-bar"></i> Reports</a></li>
825
+ <li><a href="#" data-page="settings"><i class="fas fa-cogs"></i> Settings</a></li>
826
+ <li><a href="#" data-page="backup"><i class="fas fa-database"></i> Backup</a></li>
827
+ <li><a href="#" data-page="notifications"><i class="fas fa-bell"></i> Notifications</a></li>
828
+ <li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
829
+ </ul>
830
+ </div>
831
+
832
+ <div class="main-content" id="mainContent">
833
+ <!-- Dashboard Page -->
834
+ <div class="page" id="dashboardPage">
835
+ <div class="page-header">
836
+ <h1 class="page-title">Dashboard</h1>
837
+ <div class="breadcrumb">
838
+ <i class="fas fa-home"></i>
839
+ <span>Home</span>
840
+ <i class="fas fa-chevron-right"></i>
841
+ <span>Dashboard</span>
842
+ </div>
843
+ </div>
844
+
845
+ <div class="stats-grid">
846
+ <div class="stat-card">
847
+ <div class="stat-icon" style="color: var(--primary-color);">
848
+ <i class="fas fa-users"></i>
849
+ </div>
850
+ <div class="stat-info">
851
+ <h3 id="totalStudents">1,250</h3>
852
+ <p>Total Students</p>
853
+ </div>
854
+ </div>
855
+ <div class="stat-card">
856
+ <div class="stat-icon" style="color: var(--secondary-color);">
857
+ <i class="fas fa-book"></i>
858
+ </div>
859
+ <div class="stat-info">
860
+ <h3 id="activeCourses">12</h3>
861
+ <p>Active Courses</p>
862
+ </div>
863
+ </div>
864
+ <div class="stat-card">
865
+ <div class="stat-icon" style="color: var(--info-color);">
866
+ <i class="fas fa-calendar-alt"></i>
867
+ </div>
868
+ <div class="stat-info">
869
+ <h3 id="runningBatches">25</h3>
870
+ <p>Running Batches</p>
871
+ </div>
872
+ </div>
873
+ <div class="stat-card">
874
+ <div class="stat-icon" style="color: var(--warning-color);">
875
+ <i class="fas fa-money-bill-wave"></i>
876
+ </div>
877
+ <div class="stat-info">
878
+ <h3 id="totalFees">₹5,25,000</h3>
879
+ <p>Total Fees Collected</p>
880
+ </div>
881
+ </div>
882
+ <div class="stat-card">
883
+ <div class="stat-icon" style="color: #3498db;">
884
+ <i class="fas fa-user-plus"></i>
885
+ </div>
886
+ <div class="stat-info">
887
+ <h3 id="todayJoining">5</h3>
888
+ <p>Today's New Joining</p>
889
+ </div>
890
+ </div>
891
+ <div class="stat-card">
892
+ <div class="stat-icon" style="color: #2ecc71;">
893
+ <i class="fas fa-check-circle"></i>
894
+ </div>
895
+ <div class="stat-info">
896
+ <h3 id="todayAttendance">125</h3>
897
+ <p>Today's Attendance</p>
898
+ </div>
899
+ </div>
900
+ </div>
901
+
902
+ <div class="grid-2">
903
+ <div class="card">
904
+ <div class="card-header">
905
+ <h3 class="card-title">Recent Activity</h3>
906
+ <button class="btn btn-primary" id="viewAllActivity">View All</button>
907
+ </div>
908
+ <div class="card-body">
909
+ <div class="table-responsive">
910
+ <table>
911
+ <thead>
912
+ <tr>
913
+ <th>Date</th>
914
+ <th>User</th>
915
+ <th>Action</th>
916
+ <th>Details</th>
917
+ </tr>
918
+ </thead>
919
+ <tbody id="recentActivity">
920
+ <tr>
921
+ <td>2023-06-15 10:30 AM</td>
922
+ <td>Admin</td>
923
+ <td>Student Added</td>
924
+ <td>Rajesh Kumar enrolled in Web Development</td>
925
+ </tr>
926
+ <tr>
927
+ <td>2023-06-14 03:15 PM</td>
928
+ <td>Staff (Priya)</td>
929
+ <td>Fee Received</td>
930
+ <td>₹12,000 from Ananya Sharma</td>
931
+ </tr>
932
+ <tr>
933
+ <td>2023-06-14 11:00 AM</td>
934
+ <td>Admin</td>
935
+ <td>Certificate Generated</td>
936
+ <td>For batch WD-2023-05</td>
937
+ </tr>
938
+ <tr>
939
+ <td>2023-06-13 04:45 PM</td>
940
+ <td>Staff (Amit)</td>
941
+ <td>Attendance Marked</td>
942
+ <td>Batch WD-2023-05 - 25 present</td>
943
+ </tr>
944
+ </tbody>
945
+ </table>
946
  </div>
947
+ </div>
948
+ </div>
949
+
950
+ <div class="card">
951
+ <div class="card-header">
952
+ <h3 class="card-title">Quick Actions</h3>
953
+ </div>
954
+ <div class="card-body">
955
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
956
+ <button class="btn btn-primary quick-action" data-action="add-student" style="height: 100px;">
957
+ <i class="fas fa-user-plus" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
958
+ Add Student
959
+ </button>
960
+ <button class="btn btn-secondary quick-action" data-action="record-fee" style="height: 100px;">
961
+ <i class="fas fa-money-bill-wave" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
962
+ Record Fee
963
+ </button>
964
+ <button class="btn btn-info quick-action" data-action="mark-attendance" style="height: 100px;">
965
+ <i class="fas fa-check-square" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
966
+ Mark Attendance
967
+ </button>
968
+ <button class="btn" style="height: 100px; background-color: #34495e; color: white;" data-action="generate-certificates">
969
+ <i class="fas fa-certificate" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
970
+ Generate Certificates
971
+ </button>
972
  </div>
973
+ </div>
974
  </div>
975
+ </div>
976
 
977
+ <div class="card">
978
+ <div class="card-header">
979
+ <h3 class="card-title">Upcoming Certificate Expiry</h3>
980
+ </div>
981
+ <div class="card-body">
982
+ <div class="table-responsive">
983
+ <table>
984
+ <thead>
985
+ <tr>
986
+ <th>Student Name</th>
987
+ <th>Course</th>
988
+ <th>Certificate Date</th>
989
+ <th>Days Remaining</th>
990
+ </tr>
991
+ </thead>
992
+ <tbody id="certificateExpiry">
993
+ <tr>
994
+ <td>Rahul Sharma</td>
995
+ <td>Web Development</td>
996
+ <td>2023-07-15</td>
997
+ <td>30 days</td>
998
+ </tr>
999
+ <tr>
1000
+ <td>Priya Singh</td>
1001
+ <td>Graphic Design</td>
1002
+ <td>2023-07-20</td>
1003
+ <td>25 days</td>
1004
+ </tr>
1005
+ </tbody>
1006
+ </table>
1007
+ </div>
1008
  </div>
1009
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
1010
  </div>
1011
 
1012
+ <!-- Students Page -->
1013
+ <div class="page" id="studentsPage" style="display: none;">
1014
+ <div class="page-header">
1015
+ <h1 class="page-title">Student Management</h1>
1016
+ <div class="breadcrumb">
1017
+ <i class="fas fa-home"></i>
1018
+ <span>Home</span>
1019
+ <i class="fas fa-chevron-right"></i>
1020
+ <span>Students</span>
1021
+ </div>
1022
+ </div>
1023
+
1024
+ <div class="card">
1025
+ <div class="card-header">
1026
+ <h3 class="card-title">Student List</h3>
1027
+ <div>
1028
+ <button class="btn btn-primary" id="addNewStudent">Add New Student</button>
1029
+ <button class="btn btn-secondary" id="importStudents">Import Students</button>
1030
+ </div>
1031
+ </div>
1032
+ <div class="card-body">
1033
+ <div class="search-filter">
1034
+ <input type="text" class="form-control search-input" id="studentSearch" placeholder="Search students...">
1035
+ <select class="form-control" id="studentCourseFilter">
1036
+ <option value="">All Courses</option>
1037
+ <option value="web-dev">Web Development</option>
1038
+ <option value="graphic-design">Graphic Design</option>
1039
+ <option value="digital-marketing">Digital Marketing</option>
1040
+ </select>
1041
+ <select class="form-control" id="studentBranchFilter">
1042
+ <option value="">All Branches</option>
1043
+ <option value="main">Main Branch</option>
1044
+ <option value="north">North Branch</option>
1045
+ </select>
1046
+ </div>
1047
+
1048
+ <div class="table-responsive">
1049
+ <table>
1050
+ <thead>
1051
+ <tr>
1052
+ <th>ID</th>
1053
+ <th>Photo</th>
1054
+ <th>Name</th>
1055
+ <th>Course</th>
1056
+ <th>Branch</th>
1057
+ <th>Mobile</th>
1058
+ <th>Joining Date</th>
1059
+ <th>Actions</th>
1060
+ </tr>
1061
+ </thead>
1062
+ <tbody id="studentList">
1063
+ <tr>
1064
+ <td>NCTI-2023-001</td>
1065
+ <td><img src="https://via.placeholder.com/40" alt="Student" class="student-photo"></td>
1066
+ <td>Rajesh Kumar</td>
1067
+ <td>Web Development</td>
1068
+ <td>Main Branch</td>
1069
+ <td>9876543210</td>
1070
+ <td>2023-01-15</td>
1071
+ <td>
1072
+ <button class="btn btn-sm btn-info" data-action="view-student" data-id="1"><i class="fas fa-eye"></i></button>
1073
+ <button class="btn btn-sm btn-secondary" data-action="edit-student" data-id="1"><i class="fas fa-edit"></i></button>
1074
+ <button class="btn btn-sm btn-danger" data-action="delete-student" data-id="1"><i class="fas fa-trash"></i></button>
1075
+ </td>
1076
+ </tr>
1077
+ <tr>
1078
+ <td>NCTI-2023-002</td>
1079
+ <td><img src="https://via.placeholder.com/40" alt="Student" class="student-photo"></td>
1080
+ <td>Ananya Sharma</td>
1081
+ <td>Graphic Design</td>
1082
+ <td>North Branch</td>
1083
+ <td>9876543211</td>
1084
+ <td>2023-02-20</td>
1085
+ <td>
1086
+ <button class="btn btn-sm btn-info" data-action="view-student" data-id="2"><i class="fas fa-eye"></i></button>
1087
+ <button class="btn btn-sm btn-secondary" data-action="edit-student" data-id="2"><i class="fas fa-edit"></i></button>
1088
+ <button class="btn btn-sm btn-danger" data-action="delete-student" data-id="2"><i class="fas fa-trash"></i></button>
1089
+ </td>
1090
+ </tr>
1091
+ </tbody>
1092
+ </table>
1093
+ </div>
1094
  </div>
1095
+ </div>
1096
+ </div>
1097
 
1098
+ <!-- Courses Page -->
1099
+ <div class="page" id="coursesPage" style="display: none;">
1100
+ <div class="page-header">
1101
+ <h1 class="page-title">Course Management</h1>
1102
+ <div class="breadcrumb">
1103
+ <i class="fas fa-home"></i>
1104
+ <span>Home</span>
1105
+ <i class="fas fa-chevron-right"></i>
1106
+ <span>Courses</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1107
  </div>
1108
+ </div>
1109
 
1110
+ <div class="card">
1111
+ <div class="card-header">
1112
+ <h3 class="card-title">Course List</h3>
1113
+ <button class="btn btn-primary" id="addNewCourse">Add New Course</button>
1114
+ </div>
1115
+ <div class="card-body">
1116
+ <div class="table-responsive">
1117
+ <table>
1118
+ <thead>
1119
+ <tr>
1120
+ <th>ID</th>
1121
+ <th>Course Name</th>
1122
+ <th>Duration</th>
1123
+ <th>Fees</th>
1124
+ <th>Students</th>
1125
+ <th>Actions</th>
1126
+ </tr>
1127
+ </thead>
1128
+ <tbody id="courseList">
1129
+ <tr>
1130
+ <td>COURSE-001</td>
1131
+ <td>Web Development</td>
1132
+ <td>6 Months</td>
1133
+ <td>₹25,000</td>
1134
+ <td>125</td>
1135
+ <td>
1136
+ <button class="btn btn-sm btn-secondary" data-action="edit-course" data-id="1"><i class="fas fa-edit"></i></button>
1137
+ <button class="btn btn-sm btn-danger" data-action="delete-course" data-id="1"><i class="fas fa-trash"></i></button>
1138
+ </td>
1139
+ </tr>
1140
+ <tr>
1141
+ <td>COURSE-002</td>
1142
+ <td>Graphic Design</td>
1143
+ <td>4 Months</td>
1144
+ <td>₹20,000</td>
1145
+ <td>85</td>
1146
+ <td>
1147
+ <button class="btn btn-sm btn-secondary" data-action="edit-course" data-id="2"><i class="fas fa-edit"></i></button>
1148
+ <button class="btn btn-sm btn-danger" data-action="delete-course" data-id="2"><i class="fas fa-trash"></i></button>
1149
+ </td>
1150
+ </tr>
1151
+ </tbody>
1152
+ </table>
1153
+ </div>
 
1154
  </div>
1155
+ </div>
1156
+ </div>
1157
 
1158
+ <!-- Fees Page -->
1159
+ <div class="page" id="feesPage" style="display: none;">
1160
+ <div class="page-header">
1161
+ <h1 class="page-title">Fees Management</h1>
1162
+ <div class="breadcrumb">
1163
+ <i class="fas fa-home"></i>
1164
+ <span>Home</span>
1165
+ <i class="fas fa-chevron-right"></i>
1166
+ <span>Fees</span>
1167
+ </div>
1168
+ </div>
1169
+
1170
+ <div class="card">
1171
+ <div class="card-header">
1172
+ <h3 class="card-title">Fee Payments</h3>
1173
+ <button class="btn btn-primary" id="recordNewFee">Record New Payment</button>
1174
+ </div>
1175
+ <div class="card-body">
1176
+ <div class="search-filter">
1177
+ <input type="text" class="form-control search-input" id="feeSearch" placeholder="Search by student name or ID...">
1178
+ <select class="form-control" id="feeCourseFilter">
1179
+ <option value="">All Courses</option>
1180
+ <option value="web-dev">Web Development</option>
1181
+ <option value="graphic-design">Graphic Design</option>
1182
+ </select>
1183
+ <input type="date" class="form-control" id="feeDateFilter">
1184
+ </div>
1185
+
1186
+ <div class="table-responsive">
1187
+ <table>
1188
+ <thead>
1189
+ <tr>
1190
+ <th>Date</th>
1191
+ <th>Student</th>
1192
+ <th>Course</th>
1193
+ <th>Amount</th>
1194
+ <th>Payment Mode</th>
1195
+ <th>Receipt</th>
1196
+ <th>Actions</th>
1197
+ </tr>
1198
+ </thead>
1199
+ <tbody id="feeList">
1200
+ <tr>
1201
+ <td>2023-06-15</td>
1202
+ <td>Rajesh Kumar (NCTI-2023-001)</td>
1203
+ <td>Web Development</td>
1204
+ <td>₹12,000</td>
1205
+ <td>Cash</td>
1206
+ <td><button class="btn btn-sm btn-info" data-action="view-receipt" data-id="1"><i class="fas fa-file-pdf"></i></button></td>
1207
+ <td>
1208
+ <button class="btn btn-sm btn-secondary" data-action="edit-fee" data-id="1"><i class="fas fa-edit"></i></button>
1209
+ <button class="btn btn-sm btn-danger" data-action="delete-fee" data-id="1"><i class="fas fa-trash"></i></button>
1210
+ </td>
1211
+ </tr>
1212
+ </tbody>
1213
+ </table>
1214
+ </div>
1215
+ </div>
1216
+ </div>
1217
+
1218
+ <div class="card">
1219
+ <div class="card-header">
1220
+ <h3 class="card-title">Fee Reports</h3>
1221
+ </div>
1222
+ <div class="card-body">
1223
+ <div class="grid-2">
1224
+ <div>
1225
+ <h4>Date-wise Report</h4>
1226
+ <canvas id="feeDateChart" style="height: 200px;"></canvas>
1227
  </div>
1228
+ <div>
1229
+ <h4>Course-wise Report</h4>
1230
+ <canvas id="feeCourseChart" style="height: 200px;"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1231
  </div>
1232
+ </div>
1233
  </div>
1234
+ </div>
1235
  </div>
1236
 
1237
+ <!-- Attendance Page -->
1238
+ <div class="page" id="attendancePage" style="display: none;">
1239
+ <div class="page-header">
1240
+ <h1 class="page-title">Attendance Management</h1>
1241
+ <div class="breadcrumb">
1242
+ <i class="fas fa-home"></i>
1243
+ <span>Home</span>
1244
+ <i class="fas fa-chevron-right"></i>
1245
+ <span>Attendance</span>
1246
+ </div>
1247
+ </div>
1248
+
1249
+ <div class="card">
1250
+ <div class="card-header">
1251
+ <h3 class="card-title">Mark Attendance</h3>
1252
+ </div>
1253
+ <div class="card-body">
1254
+ <form id="attendanceForm">
1255
+ <div class="grid-3">
1256
+ <div class="form-group">
1257
+ <label for="attendanceDate">Date</label>
1258
+ <input type="date" id="attendanceDate" class="form-control" value="<?php echo date('Y-m-d'); ?>">
1259
+ </div>
1260
+ <div class="form-group">
1261
+ <label for="attendanceCourse">Course</label>
1262
+ <select id="attendanceCourse" class="form-control">
1263
+ <option value="">Select Course</option>
1264
+ <option value="web-dev">Web Development</option>
1265
+ <option value="graphic-design">Graphic Design</option>
1266
+ </select>
1267
+ </div>
1268
+ <div class="form-group">
1269
+ <label for="attendanceBatch">Batch</label>
1270
+ <select id="attendanceBatch" class="form-control">
1271
+ <option value="">Select Batch</option>
1272
+ <option value="morning">Morning</option>
1273
+ <option value="evening">Evening</option>
1274
+ </select>
1275
+ </div>
1276
  </div>
1277
+
1278
+ <div class="form-group">
1279
+ <button type="button" class="btn btn-primary" id="loadStudentsForAttendance">Load Students</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1280
  </div>
1281
+ </form>
1282
+
1283
+ <div id="attendanceStudentsContainer" style="display: none;">
1284
+ <form id="attendanceStudentsForm">
1285
+ <div class="table-responsive">
1286
+ <table>
1287
+ <thead>
1288
+ <tr>
1289
+ <th>Student ID</th>
1290
+ <th>Name</th>
1291
+ <th>Status</th>
1292
+ </tr>
1293
+ </thead>
1294
+ <tbody id="attendanceStudentsList">
1295
+ <!-- Students will be loaded here -->
1296
+ </tbody>
1297
+ </table>
1298
+ </div>
1299
+ <button type="button" class="btn btn-success mt-2" id="saveAttendance">Save Attendance</button>
1300
+ </form>
1301
+ </div>
1302
+ </div>
1303
+ </div>
1304
+
1305
+ <div class="card">
1306
+ <div class="card-header">
1307
+ <h3 class="card-title">Attendance Reports</h3>
1308
+ </div>
1309
+ <div class="card-body">
1310
+ <div class="search-filter">
1311
+ <input type="date" class="form-control" id="attendanceReportDate">
1312
+ <select class="form-control" id="attendanceReportCourse">
1313
+ <option value="">All Courses</option>
1314
+ <option value="web-dev">Web Development</option>
1315
+ <option value="graphic-design">Graphic Design</option>
1316
+ </select>
1317
+ <button class="btn btn-primary" id="generateAttendanceReport">Generate Report</button>
1318
+ <button class="btn btn-secondary" id="exportAttendanceReport">Export to Excel</button>
1319
+ </div>
1320
+
1321
+ <div id="attendanceReportContainer" style="display: none;">
1322
+ <div class="table-responsive">
1323
+ <table>
1324
+ <thead>
1325
+ <tr>
1326
+ <th>Date</th>
1327
+ <th>Student</th>
1328
+ <th>Course</th>
1329
+ <th>Status</th>
1330
+ </tr>
1331
+ </thead>
1332
+ <tbody id="attendanceReportList">
1333
+ <!-- Report will be generated here -->
1334
+ </tbody>
1335
+ </table>
1336
  </div>
1337
+ </div>
1338
  </div>
1339
+ </div>
1340
  </div>
1341
 
1342
+ <!-- Exams Page -->
1343
+ <div class="page" id="examsPage" style="display: none;">
1344
+ <div class="page-header">
1345
+ <h1 class="page-title">Exam & Result Management</h1>
1346
+ <div class="breadcrumb">
1347
+ <i class="fas fa-home"></i>
1348
+ <span>Home</span>
1349
+ <i class="fas fa-chevron-right"></i>
1350
+ <span>Exams</span>
1351
+ </div>
1352
+ </div>
1353
+
1354
+ <div class="tabs">
1355
+ <button class="tab active" data-tab="exams">Exams</button>
1356
+ <button class="tab" data-tab="results">Results</button>
1357
+ </div>
1358
+
1359
+ <div class="tab-content active" id="exams">
1360
+ <div class="card">
1361
+ <div class="card-header">
1362
+ <h3 class="card-title">Exam List</h3>
1363
+ <button class="btn btn-primary