Hugging Face's logo

Spaces:
cpilotin
/
student-information-system
Running

App Files Community
cpilotin commited on
Commit
182e0e2
·
verified ·
1 Parent(s): 554ad39

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +434 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Student Information System
3
- emoji: 🌍
4
  colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: student-information-system
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,434 @@
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>Class Student Database</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .fade-in {
11
+ animation: fadeIn 0.3s ease-in-out;
12
+ }
13
+
14
+ @keyframes fadeIn {
15
+ from { opacity: 0; transform: translateY(10px); }
16
+ to { opacity: 1; transform: translateY(0); }
17
+ }
18
+
19
+ .sidebar {
20
+ transition: all 0.3s ease;
21
+ }
22
+
23
+ @media (max-width: 768px) {
24
+ .sidebar {
25
+ transform: translateX(-100%);
26
+ position: absolute;
27
+ z-index: 10;
28
+ height: 100vh;
29
+ }
30
+
31
+ .sidebar.open {
32
+ transform: translateX(0);
33
+ }
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-100 font-sans">
38
+ <div class="flex h-screen overflow-hidden">
39
+ <!-- Sidebar -->
40
+ <div id="sidebar" class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
41
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700">
42
+ <div class="flex items-center space-x-3">
43
+ <i class="fas fa-graduation-cap text-2xl"></i>
44
+ <h1 class="text-xl font-bold">Class DB</h1>
45
+ </div>
46
+ <button id="closeSidebar" class="md:hidden">
47
+ <i class="fas fa-times"></i>
48
+ </button>
49
+ </div>
50
+ <nav class="p-4">
51
+ <ul class="space-y-2">
52
+ <li>
53
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-700">
54
+ <i class="fas fa-home"></i>
55
+ <span>Dashboard</span>
56
+ </a>
57
+ </li>
58
+ <li>
59
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 transition">
60
+ <i class="fas fa-users"></i>
61
+ <span>Students</span>
62
+ </a>
63
+ </li>
64
+ <li>
65
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 transition">
66
+ <i class="fas fa-book"></i>
67
+ <span>Subjects</span>
68
+ </a>
69
+ </li>
70
+ <li>
71
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 transition">
72
+ <i class="fas fa-chart-bar"></i>
73
+ <span>Reports</span>
74
+ </a>
75
+ </li>
76
+ <li>
77
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 transition">
78
+ <i class="fas fa-cog"></i>
79
+ <span>Settings</span>
80
+ </a>
81
+ </li>
82
+ </ul>
83
+ </nav>
84
+ </div>
85
+
86
+ <!-- Main Content -->
87
+ <div class="flex-1 flex flex-col overflow-hidden">
88
+ <!-- Top Navigation -->
89
+ <header class="bg-white shadow-sm">
90
+ <div class="flex items-center justify-between p-4">
91
+ <div class="flex items-center space-x-4">
92
+ <button id="toggleSidebar" class="md:hidden">
93
+ <i class="fas fa-bars text-gray-600 text-xl"></i>
94
+ </button>
95
+ <h2 class="text-xl font-semibold text-gray-800">Student Database</h2>
96
+ </div>
97
+ <div class="flex items-center space-x-4">
98
+ <div class="relative">
99
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
100
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
101
+ </div>
102
+ <div class="relative">
103
+ <button class="flex items-center space-x-2 focus:outline-none">
104
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white font-semibold">JD</div>
105
+ <span class="hidden md:inline">John Doe</span>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </header>
111
+
112
+ <!-- Main Content Area -->
113
+ <main class="flex-1 overflow-y-auto p-6">
114
+ <div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
115
+ <h3 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">Student Records</h3>
116
+ <div class="flex space-x-3">
117
+ <button id="addStudentBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition">
118
+ <i class="fas fa-plus"></i>
119
+ <span>Add Student</span>
120
+ </button>
121
+ <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center space-x-2 transition">
122
+ <i class="fas fa-download"></i>
123
+ <span>Export</span>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Stats Cards -->
129
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
130
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-blue-500">
131
+ <div class="flex items-center justify-between">
132
+ <div>
133
+ <p class="text-gray-500 text-sm">Total Students</p>
134
+ <h4 class="text-2xl font-bold">124</h4>
135
+ </div>
136
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
137
+ <i class="fas fa-users"></i>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-green-500">
142
+ <div class="flex items-center justify-between">
143
+ <div>
144
+ <p class="text-gray-500 text-sm">Present Today</p>
145
+ <h4 class="text-2xl font-bold">118</h4>
146
+ </div>
147
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
148
+ <i class="fas fa-check-circle"></i>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-yellow-500">
153
+ <div class="flex items-center justify-between">
154
+ <div>
155
+ <p class="text-gray-500 text-sm">Absent Today</p>
156
+ <h4 class="text-2xl font-bold">6</h4>
157
+ </div>
158
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
159
+ <i class="fas fa-exclamation-circle"></i>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-purple-500">
164
+ <div class="flex items-center justify-between">
165
+ <div>
166
+ <p class="text-gray-500 text-sm">Average Grade</p>
167
+ <h4 class="text-2xl font-bold">85.6%</h4>
168
+ </div>
169
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
170
+ <i class="fas fa-chart-line"></i>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Student Table -->
177
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
178
+ <div class="overflow-x-auto">
179
+ <table class="min-w-full divide-y divide-gray-200">
180
+ <thead class="bg-gray-50">
181
+ <tr>
182
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
183
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
184
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Grade</th>
185
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subjects</th>
186
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
187
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
188
+ </tr>
189
+ </thead>
190
+ <tbody class="bg-white divide-y divide-gray-200" id="studentTableBody">
191
+ <!-- Student data will be inserted here by JavaScript -->
192
+ </tbody>
193
+ </table>
194
+ </div>
195
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
196
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
197
+ <div>
198
+ <p class="text-sm text-gray-700">
199
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">124</span> results
200
+ </p>
201
+ </div>
202
+ <div>
203
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
204
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
205
+ <span class="sr-only">Previous</span>
206
+ <i class="fas fa-chevron-left"></i>
207
+ </a>
208
+ <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
209
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
210
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
211
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
212
+ <span class="sr-only">Next</span>
213
+ <i class="fas fa-chevron-right"></i>
214
+ </a>
215
+ </nav>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </main>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Add Student Modal -->
225
+ <div id="addStudentModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
226
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
227
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
228
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
229
+ </div>
230
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
231
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full fade-in">
232
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
233
+ <div class="sm:flex sm:items-start">
234
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
235
+ <i class="fas fa-user-plus text-indigo-600"></i>
236
+ </div>
237
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
238
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add New Student</h3>
239
+ <div class="mt-4">
240
+ <form id="studentForm">
241
+ <div class="grid grid-cols-1 gap-y-4 gap-x-6 sm:grid-cols-6">
242
+ <div class="sm:col-span-3">
243
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
244
+ <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
245
+ </div>
246
+ <div class="sm:col-span-3">
247
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
248
+ <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
249
+ </div>
250
+ <div class="sm:col-span-4">
251
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
252
+ <input type="email" name="email" id="email" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
253
+ </div>
254
+ <div class="sm:col-span-2">
255
+ <label for="grade" class="block text-sm font-medium text-gray-700">Grade</label>
256
+ <select id="grade" name="grade" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
257
+ <option>9th</option>
258
+ <option>10th</option>
259
+ <option>11th</option>
260
+ <option>12th</option>
261
+ </select>
262
+ </div>
263
+ <div class="sm:col-span-3">
264
+ <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
265
+ <input type="date" name="dob" id="dob" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
266
+ </div>
267
+ <div class="sm:col-span-3">
268
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
269
+ <input type="tel" name="phone" id="phone" autocomplete="tel" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
270
+ </div>
271
+ <div class="sm:col-span-6">
272
+ <label for="address" class="block text-sm font-medium text-gray-700">Address</label>
273
+ <input type="text" name="address" id="address" autocomplete="street-address" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border">
274
+ </div>
275
+ </div>
276
+ </form>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
282
+ <button type="button" id="saveStudentBtn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
283
+ Save
284
+ </button>
285
+ <button type="button" id="cancelStudentBtn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
286
+ Cancel
287
+ </button>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Success Notification -->
294
+ <div id="successNotification" class="fixed bottom-4 right-4 hidden">
295
+ <div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-3 fade-in">
296
+ <i class="fas fa-check-circle"></i>
297
+ <span>Student added successfully!</span>
298
+ </div>
299
+ </div>
300
+
301
+ <script>
302
+ // Sample student data
303
+ const students = [
304
+ { id: 1001, name: "Alex Johnson", grade: "11th", subjects: "Math, Science, History", status: "Present", avatar: "AJ" },
305
+ { id: 1002, name: "Maria Garcia", grade: "10th", subjects: "English, Art, Biology", status: "Absent", avatar: "MG" },
306
+ { id: 1003, name: "James Wilson", grade: "12th", subjects: "Physics, Chemistry, PE", status: "Present", avatar: "JW" },
307
+ { id: 1004, name: "Sarah Lee", grade: "9th", subjects: "Geography, Music, Math", status: "Present", avatar: "SL" },
308
+ { id: 1005, name: "David Kim", grade: "11th", subjects: "Computer Science, Economics", status: "Present", avatar: "DK" },
309
+ { id: 1006, name: "Emma Davis", grade: "10th", subjects: "Literature, History, Art", status: "Absent", avatar: "ED" },
310
+ { id: 1007, name: "Michael Brown", grade: "12th", subjects: "Calculus, Physics, Music", status: "Present", avatar: "MB" },
311
+ { id: 1008, name: "Olivia Martinez", grade: "9th", subjects: "Biology, Spanish, Math", status: "Present", avatar: "OM" },
312
+ { id: 1009, name: "Daniel Taylor", grade: "11th", subjects: "Chemistry, History, PE", status: "Present", avatar: "DT" },
313
+ { id: 1010, name: "Sophia Anderson", grade: "10th", subjects: "English, Art, Biology", status: "Absent", avatar: "SA" }
314
+ ];
315
+
316
+ // DOM Elements
317
+ const studentTableBody = document.getElementById('studentTableBody');
318
+ const addStudentBtn = document.getElementById('addStudentBtn');
319
+ const addStudentModal = document.getElementById('addStudentModal');
320
+ const cancelStudentBtn = document.getElementById('cancelStudentBtn');
321
+ const saveStudentBtn = document.getElementById('saveStudentBtn');
322
+ const studentForm = document.getElementById('studentForm');
323
+ const successNotification = document.getElementById('successNotification');
324
+ const toggleSidebar = document.getElementById('toggleSidebar');
325
+ const closeSidebar = document.getElementById('closeSidebar');
326
+ const sidebar = document.getElementById('sidebar');
327
+
328
+ // Populate student table
329
+ function populateStudentTable() {
330
+ studentTableBody.innerHTML = '';
331
+ students.forEach(student => {
332
+ const statusClass = student.status === 'Present' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
333
+
334
+ const row = document.createElement('tr');
335
+ row.className = 'hover:bg-gray-50';
336
+ row.innerHTML = `
337
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${student.id}</td>
338
+ <td class="px-6 py-4 whitespace-nowrap">
339
+ <div class="flex items-center">
340
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-semibold">
341
+ ${student.avatar}
342
+ </div>
343
+ <div class="ml-4">
344
+ <div class="text-sm font-medium text-gray-900">${student.name}</div>
345
+ <div class="text-sm text-gray-500">${student.grade}</div>
346
+ </div>
347
+ </div>
348
+ </td>
349
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
350
+ <div class="flex items-center">
351
+ <div class="h-2 w-20 bg-gray-200 rounded-full">
352
+ <div class="h-2 bg-indigo-600 rounded-full" style="width: 75%"></div>
353
+ </div>
354
+ <span class="ml-2 text-sm font-medium">85%</span>
355
+ </div>
356
+ </td>
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${student.subjects}</td>
358
+ <td class="px-6 py-4 whitespace-nowrap">
359
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
360
+ ${student.status}
361
+ </span>
362
+ </td>
363
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
364
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
365
+ <i class="fas fa-edit"></i>
366
+ </button>
367
+ <button class="text-red-600 hover:text-red-900">
368
+ <i class="fas fa-trash-alt"></i>
369
+ </button>
370
+ </td>
371
+ `;
372
+ studentTableBody.appendChild(row);
373
+ });
374
+ }
375
+
376
+ // Event Listeners
377
+ addStudentBtn.addEventListener('click', () => {
378
+ addStudentModal.classList.remove('hidden');
379
+ });
380
+
381
+ cancelStudentBtn.addEventListener('click', () => {
382
+ addStudentModal.classList.add('hidden');
383
+ studentForm.reset();
384
+ });
385
+
386
+ saveStudentBtn.addEventListener('click', () => {
387
+ // In a real app, you would save the data to a database here
388
+ addStudentModal.classList.add('hidden');
389
+
390
+ // Show success notification
391
+ successNotification.classList.remove('hidden');
392
+ setTimeout(() => {
393
+ successNotification.classList.add('hidden');
394
+ }, 3000);
395
+
396
+ studentForm.reset();
397
+
398
+ // For demo purposes, we'll just add a random student
399
+ const newId = Math.floor(Math.random() * 9000) + 1000;
400
+ const firstNames = ["Emma", "Liam", "Olivia", "Noah", "Ava", "William", "Sophia", "James", "Isabella", "Benjamin"];
401
+ const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez"];
402
+ const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
403
+ const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
404
+ const grade = ["9th", "10th", "11th", "12th"][Math.floor(Math.random() * 4)];
405
+ const status = Math.random() > 0.2 ? "Present" : "Absent";
406
+
407
+ students.unshift({
408
+ id: newId,
409
+ name: `${firstName} ${lastName}`,
410
+ grade: grade,
411
+ subjects: "Math, Science, English",
412
+ status: status,
413
+ avatar: `${firstName.charAt(0)}${lastName.charAt(0)}`
414
+ });
415
+
416
+ populateStudentTable();
417
+ });
418
+
419
+ // Mobile sidebar toggle
420
+ toggleSidebar.addEventListener('click', () => {
421
+ sidebar.classList.add('open');
422
+ });
423
+
424
+ closeSidebar.addEventListener('click', () => {
425
+ sidebar.classList.remove('open');
426
+ });
427
+
428
+ // Initialize the page
429
+ document.addEventListener('DOMContentLoaded', () => {
430
+ populateStudentTable();
431
+ });
432
+ </script>
433
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cpilotin/student-information-system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
434
+ </html>