Hugging Face's logo

Spaces:
s92skc
/
anycoder-87b181e7
Running

App Files Community
s92skc commited on
Commit
82a5f40
·
verified ·
1 Parent(s): 5395594

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +812 -19
index.html CHANGED
@@ -1,19 +1,812 @@
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>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>