Hugging Face's logo

Spaces:
LRMMM
/
mangmet
Running

App Files Community
LRMMM commited on
Commit
9f3b32f
·
verified ·
1 Parent(s): 35ed113

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +826 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mangmet
3
- emoji: 🔥
4
- colorFrom: purple
5
  colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mangmet
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: red
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,826 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EduManage Pro | School Management System</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
+ :root {
11
+ --primary: #4f46e5;
12
+ --secondary: #10b981;
13
+ --dark: #1e293b;
14
+ --light: #f8fafc;
15
+ }
16
+
17
+ .sidebar {
18
+ transition: all 0.3s ease;
19
+ }
20
+
21
+ .sidebar-mini {
22
+ width: 80px;
23
+ }
24
+
25
+ .sidebar-mini .nav-text {
26
+ display: none;
27
+ }
28
+
29
+ .sidebar-mini .logo-text {
30
+ display: none;
31
+ }
32
+
33
+ .sidebar-mini .user-info {
34
+ display: none;
35
+ }
36
+
37
+ .sidebar-mini:hover {
38
+ width: 250px;
39
+ }
40
+
41
+ .sidebar-mini:hover .nav-text {
42
+ display: inline;
43
+ }
44
+
45
+ .sidebar-mini:hover .logo-text {
46
+ display: inline;
47
+ }
48
+
49
+ .sidebar-mini:hover .user-info {
50
+ display: block;
51
+ }
52
+
53
+ .active-nav {
54
+ background-color: rgba(79, 70, 229, 0.1);
55
+ border-left: 4px solid var(--primary);
56
+ color: var(--primary) !important;
57
+ }
58
+
59
+ .active-nav i {
60
+ color: var(--primary) !important;
61
+ }
62
+
63
+ .chart-container {
64
+ position: relative;
65
+ height: 300px;
66
+ }
67
+
68
+ @media (max-width: 768px) {
69
+ .sidebar {
70
+ position: fixed;
71
+ z-index: 1000;
72
+ transform: translateX(-100%);
73
+ }
74
+
75
+ .sidebar.active {
76
+ transform: translateX(0);
77
+ }
78
+
79
+ .main-content {
80
+ margin-left: 0 !important;
81
+ }
82
+ }
83
+
84
+ /* Custom scrollbar */
85
+ ::-webkit-scrollbar {
86
+ width: 8px;
87
+ height: 8px;
88
+ }
89
+
90
+ ::-webkit-scrollbar-track {
91
+ background: #f1f1f1;
92
+ }
93
+
94
+ ::-webkit-scrollbar-thumb {
95
+ background: #c7d2fe;
96
+ border-radius: 10px;
97
+ }
98
+
99
+ ::-webkit-scrollbar-thumb:hover {
100
+ background: #a5b4fc;
101
+ }
102
+
103
+ /* Animation for notifications */
104
+ @keyframes slideIn {
105
+ from {
106
+ transform: translateX(100%);
107
+ opacity: 0;
108
+ }
109
+ to {
110
+ transform: translateX(0);
111
+ opacity: 1;
112
+ }
113
+ }
114
+
115
+ .notification {
116
+ animation: slideIn 0.3s ease-out;
117
+ }
118
+ </style>
119
+ </head>
120
+ <body class="bg-gray-50">
121
+ <!-- Notification Area -->
122
+ <div class="fixed top-4 right-4 z-50 space-y-2" id="notification-area"></div>
123
+
124
+ <!-- Sidebar Toggle Button for Mobile -->
125
+ <button class="md:hidden fixed top-4 left-4 z-40 bg-white p-2 rounded-md shadow-md text-indigo-600" id="sidebar-toggle">
126
+ <i class="fas fa-bars text-xl"></i>
127
+ </button>
128
+
129
+ <!-- Sidebar -->
130
+ <div class="sidebar bg-white text-gray-700 fixed top-0 left-0 h-screen w-64 shadow-md overflow-y-auto" id="sidebar">
131
+ <!-- Logo -->
132
+ <div class="flex items-center justify-between p-4 border-b">
133
+ <div class="flex items-center space-x-2">
134
+ <i class="fas fa-graduation-cap text-indigo-600 text-2xl"></i>
135
+ <span class="logo-text text-xl font-bold text-indigo-600">EduManage Pro</span>
136
+ </div>
137
+ <button class="text-gray-500 hover:text-gray-700 hidden md:block" id="sidebar-collapse">
138
+ <i class="fas fa-chevron-left"></i>
139
+ </button>
140
+ </div>
141
+
142
+ <!-- User Profile -->
143
+ <div class="p-4 border-b user-info">
144
+ <div class="flex items-center space-x-3">
145
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full object-cover">
146
+ <div>
147
+ <p class="font-medium">Sarah Johnson</p>
148
+ <p class="text-xs text-gray-500">Administrator</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Navigation -->
154
+ <nav class="p-2">
155
+ <div class="mb-2 px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">Dashboard</div>
156
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100 active-nav">
157
+ <i class="fas fa-tachometer-alt text-gray-500"></i>
158
+ <span class="nav-text">Overview</span>
159
+ </a>
160
+
161
+ <div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Management</div>
162
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
163
+ <i class="fas fa-users text-gray-500"></i>
164
+ <span class="nav-text">User Management</span>
165
+ </a>
166
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
167
+ <i class="fas fa-user-graduate text-gray-500"></i>
168
+ <span class="nav-text">Student Management</span>
169
+ </a>
170
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
171
+ <i class="fas fa-chalkboard-teacher text-gray-500"></i>
172
+ <span class="nav-text">Teacher Management</span>
173
+ </a>
174
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
175
+ <i class="fas fa-book text-gray-500"></i>
176
+ <span class="nav-text">Course Management</span>
177
+ </a>
178
+
179
+ <div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Academic</div>
180
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
181
+ <i class="fas fa-calendar-alt text-gray-500"></i>
182
+ <span class="nav-text">Attendance</span>
183
+ </a>
184
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
185
+ <i class="fas fa-clipboard-check text-gray-500"></i>
186
+ <span class="nav-text">Grading</span>
187
+ </a>
188
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
189
+ <i class="fas fa-file-alt text-gray-500"></i>
190
+ <span class="nav-text">Examinations</span>
191
+ </a>
192
+
193
+ <div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Financial</div>
194
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
195
+ <i class="fas fa-money-bill-wave text-gray-500"></i>
196
+ <span class="nav-text">Fee Management</span>
197
+ </a>
198
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
199
+ <i class="fas fa-chart-line text-gray-500"></i>
200
+ <span class="nav-text">Financial Reports</span>
201
+ </a>
202
+
203
+ <div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Library</div>
204
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
205
+ <i class="fas fa-book-open text-gray-500"></i>
206
+ <span class="nav-text">Library Management</span>
207
+ </a>
208
+
209
+ <div class="mb-2 px-2 mt-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Communication</div>
210
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
211
+ <i class="fas fa-comments text-gray-500"></i>
212
+ <span class="nav-text">Messages</span>
213
+ </a>
214
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-md hover:bg-gray-100">
215
+ <i class="fas fa-bullhorn text-gray-500"></i>
216
+ <span class="nav-text">Announcements</span>
217
+ </a>
218
+ </nav>
219
+ </div>
220
+
221
+ <!-- Main Content -->
222
+ <div class="main-content md:ml-64 transition-all duration-300">
223
+ <!-- Top Navigation -->
224
+ <header class="bg-white shadow-sm">
225
+ <div class="flex justify-between items-center p-4">
226
+ <div class="flex items-center space-x-4">
227
+ <h1 class="text-xl font-semibold text-gray-800">Dashboard Overview</h1>
228
+ </div>
229
+ <div class="flex items-center space-x-4">
230
+ <div class="relative">
231
+ <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
232
+ <i class="fas fa-bell text-xl"></i>
233
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
234
+ </button>
235
+ </div>
236
+ <div class="relative">
237
+ <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
238
+ <i class="fas fa-envelope text-xl"></i>
239
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-blue-500"></span>
240
+ </button>
241
+ </div>
242
+ <div class="relative">
243
+ <button class="flex items-center space-x-2" id="user-menu-button">
244
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full object-cover">
245
+ <span class="hidden md:inline text-sm font-medium">Sarah Johnson</span>
246
+ <i class="fas fa-chevron-down text-xs hidden md:inline"></i>
247
+ </button>
248
+ <!-- Dropdown menu -->
249
+ <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10" id="user-menu">
250
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
251
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
252
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </header>
258
+
259
+ <!-- Dashboard Content -->
260
+ <main class="p-4 md:p-6">
261
+ <!-- Stats Cards -->
262
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
263
+ <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-indigo-500">
264
+ <div class="flex items-center justify-between">
265
+ <div>
266
+ <p class="text-sm font-medium text-gray-500">Total Students</p>
267
+ <p class="text-2xl font-semibold text-gray-800">1,248</p>
268
+ </div>
269
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
270
+ <i class="fas fa-user-graduate text-xl"></i>
271
+ </div>
272
+ </div>
273
+ <p class="text-xs text-green-600 mt-2"><i class="fas fa-arrow-up mr-1"></i>12% from last month</p>
274
+ </div>
275
+
276
+ <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-green-500">
277
+ <div class="flex items-center justify-between">
278
+ <div>
279
+ <p class="text-sm font-medium text-gray-500">Total Teachers</p>
280
+ <p class="text-2xl font-semibold text-gray-800">64</p>
281
+ </div>
282
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
283
+ <i class="fas fa-chalkboard-teacher text-xl"></i>
284
+ </div>
285
+ </div>
286
+ <p class="text-xs text-green-600 mt-2"><i class="fas fa-arrow-up mr-1"></i>5% from last month</p>
287
+ </div>
288
+
289
+ <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
290
+ <div class="flex items-center justify-between">
291
+ <div>
292
+ <p class="text-sm font-medium text-gray-500">Courses Offered</p>
293
+ <p class="text-2xl font-semibold text-gray-800">28</p>
294
+ </div>
295
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
296
+ <i class="fas fa-book text-xl"></i>
297
+ </div>
298
+ </div>
299
+ <p class="text-xs text-gray-600 mt-2">No change from last month</p>
300
+ </div>
301
+
302
+ <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-purple-500">
303
+ <div class="flex items-center justify-between">
304
+ <div>
305
+ <p class="text-sm font-medium text-gray-500">Attendance Today</p>
306
+ <p class="text-2xl font-semibold text-gray-800">94%</p>
307
+ </div>
308
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
309
+ <i class="fas fa-calendar-check text-xl"></i>
310
+ </div>
311
+ </div>
312
+ <p class="text-xs text-red-600 mt-2"><i class="fas fa-arrow-down mr-1"></i>2% from yesterday</p>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Charts Row -->
317
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
318
+ <!-- Student Enrollment Chart -->
319
+ <div class="bg-white p-6 rounded-lg shadow-sm">
320
+ <div class="flex justify-between items-center mb-4">
321
+ <h2 class="text-lg font-semibold text-gray-800">Student Enrollment</h2>
322
+ <div class="flex space-x-2">
323
+ <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md">Monthly</button>
324
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md">Yearly</button>
325
+ </div>
326
+ </div>
327
+ <div class="chart-container">
328
+ <canvas id="enrollmentChart"></canvas>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Attendance Chart -->
333
+ <div class="bg-white p-6 rounded-lg shadow-sm">
334
+ <div class="flex justify-between items-center mb-4">
335
+ <h2 class="text-lg font-semibold text-gray-800">Attendance Rate</h2>
336
+ <div class="flex space-x-2">
337
+ <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md">Weekly</button>
338
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md">Monthly</button>
339
+ </div>
340
+ </div>
341
+ <div class="chart-container">
342
+ <canvas id="attendanceChart"></canvas>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Performance Chart -->
347
+ <div class="bg-white p-6 rounded-lg shadow-sm">
348
+ <div class="flex justify-between items-center mb-4">
349
+ <h2 class="text-lg font-semibold text-gray-800">Class Performance</h2>
350
+ <div class="flex space-x-2">
351
+ <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md">Term 1</button>
352
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-md">Term 2</button>
353
+ </div>
354
+ </div>
355
+ <div class="chart-container">
356
+ <canvas id="performanceChart"></canvas>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Tables Row -->
362
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
363
+ <!-- Recent Students -->
364
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
365
+ <div class="p-6 border-b">
366
+ <div class="flex justify-between items-center">
367
+ <h2 class="text-lg font-semibold text-gray-800">Recent Students</h2>
368
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a>
369
+ </div>
370
+ </div>
371
+ <div class="overflow-x-auto">
372
+ <table class="min-w-full divide-y divide-gray-200">
373
+ <thead class="bg-gray-50">
374
+ <tr>
375
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
376
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th>
377
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Admission Date</th>
378
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
379
+ </tr>
380
+ </thead>
381
+ <tbody class="bg-white divide-y divide-gray-200">
382
+ <tr>
383
+ <td class="px-6 py-4 whitespace-nowrap">
384
+ <div class="flex items-center">
385
+ <div class="flex-shrink-0 h-10 w-10">
386
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
387
+ </div>
388
+ <div class="ml-4">
389
+ <div class="text-sm font-medium text-gray-900">Michael Johnson</div>
390
+ <div class="text-sm text-gray-500">[email protected]</div>
391
+ </div>
392
+ </div>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap">
395
+ <div class="text-sm text-gray-900">Grade 10 - A</div>
396
+ </td>
397
+ <td class="px-6 py-4 whitespace-nowrap">
398
+ <div class="text-sm text-gray-900">15 Jan 2023</div>
399
+ </td>
400
+ <td class="px-6 py-4 whitespace-nowrap">
401
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
402
+ </td>
403
+ </tr>
404
+ <tr>
405
+ <td class="px-6 py-4 whitespace-nowrap">
406
+ <div class="flex items-center">
407
+ <div class="flex-shrink-0 h-10 w-10">
408
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/28.jpg" alt="">
409
+ </div>
410
+ <div class="ml-4">
411
+ <div class="text-sm font-medium text-gray-900">Sarah Williams</div>
412
+ <div class="text-sm text-gray-500">[email protected]</div>
413
+ </div>
414
+ </div>
415
+ </td>
416
+ <td class="px-6 py-4 whitespace-nowrap">
417
+ <div class="text-sm text-gray-900">Grade 11 - B</div>
418
+ </td>
419
+ <td class="px-6 py-4 whitespace-nowrap">
420
+ <div class="text-sm text-gray-900">10 Jan 2023</div>
421
+ </td>
422
+ <td class="px-6 py-4 whitespace-nowrap">
423
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
424
+ </td>
425
+ </tr>
426
+ <tr>
427
+ <td class="px-6 py-4 whitespace-nowrap">
428
+ <div class="flex items-center">
429
+ <div class="flex-shrink-0 h-10 w-10">
430
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="">
431
+ </div>
432
+ <div class="ml-4">
433
+ <div class="text-sm font-medium text-gray-900">Robert Brown</div>
434
+ <div class="text-sm text-gray-500">[email protected]</div>
435
+ </div>
436
+ </div>
437
+ </td>
438
+ <td class="px-6 py-4 whitespace-nowrap">
439
+ <div class="text-sm text-gray-900">Grade 9 - C</div>
440
+ </td>
441
+ <td class="px-6 py-4 whitespace-nowrap">
442
+ <div class="text-sm text-gray-900">5 Jan 2023</div>
443
+ </td>
444
+ <td class="px-6 py-4 whitespace-nowrap">
445
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
446
+ </td>
447
+ </tr>
448
+ </tbody>
449
+ </table>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Upcoming Events -->
454
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
455
+ <div class="p-6 border-b">
456
+ <div class="flex justify-between items-center">
457
+ <h2 class="text-lg font-semibold text-gray-800">Upcoming Events</h2>
458
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a>
459
+ </div>
460
+ </div>
461
+ <div class="divide-y divide-gray-200">
462
+ <div class="p-4 hover:bg-gray-50">
463
+ <div class="flex items-start">
464
+ <div class="flex-shrink-0 p-2 bg-indigo-100 text-indigo-600 rounded-md">
465
+ <i class="fas fa-calendar-day text-lg"></i>
466
+ </div>
467
+ <div class="ml-4">
468
+ <h3 class="text-sm font-medium text-gray-900">Parent-Teacher Meeting</h3>
469
+ <p class="text-sm text-gray-500">15 Jan 2023, 10:00 AM - 12:00 PM</p>
470
+ <p class="mt-1 text-sm text-gray-600">All parents are requested to attend the meeting with their respective class teachers.</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ <div class="p-4 hover:bg-gray-50">
475
+ <div class="flex items-start">
476
+ <div class="flex-shrink-0 p-2 bg-green-100 text-green-600 rounded-md">
477
+ <i class="fas fa-running text-lg"></i>
478
+ </div>
479
+ <div class="ml-4">
480
+ <h3 class="text-sm font-medium text-gray-900">Annual Sports Day</h3>
481
+ <p class="text-sm text-gray-500">20 Jan 2023, 8:00 AM - 4:00 PM</p>
482
+ <p class="mt-1 text-sm text-gray-600">Annual sports competition between different houses.</p>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ <div class="p-4 hover:bg-gray-50">
487
+ <div class="flex items-start">
488
+ <div class="flex-shrink-0 p-2 bg-purple-100 text-purple-600 rounded-md">
489
+ <i class="fas fa-microscope text-lg"></i>
490
+ </div>
491
+ <div class="ml-4">
492
+ <h3 class="text-sm font-medium text-gray-900">Science Fair</h3>
493
+ <p class="text-sm text-gray-500">25 Jan 2023, 9:00 AM - 2:00 PM</p>
494
+ <p class="mt-1 text-sm text-gray-600">Students will showcase their science projects in the school auditorium.</p>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Quick Actions -->
503
+ <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
504
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h2>
505
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
506
+ <a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center">
507
+ <div class="mx-auto p-3 bg-indigo-100 text-indigo-600 rounded-full w-12 h-12 flex items-center justify-center mb-2">
508
+ <i class="fas fa-user-plus text-xl"></i>
509
+ </div>
510
+ <p class="text-sm font-medium text-gray-700">Add New Student</p>
511
+ </a>
512
+ <a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center">
513
+ <div class="mx-auto p-3 bg-green-100 text-green-600 rounded-full w-12 h-12 flex items-center justify-center mb-2">
514
+ <i class="fas fa-clipboard-check text-xl"></i>
515
+ </div>
516
+ <p class="text-sm font-medium text-gray-700">Take Attendance</p>
517
+ </a>
518
+ <a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center">
519
+ <div class="mx-auto p-3 bg-blue-100 text-blue-600 rounded-full w-12 h-12 flex items-center justify-center mb-2">
520
+ <i class="fas fa-money-bill-wave text-xl"></i>
521
+ </div>
522
+ <p class="text-sm font-medium text-gray-700">Collect Fees</p>
523
+ </a>
524
+ <a href="#" class="p-4 border rounded-lg hover:bg-gray-50 text-center">
525
+ <div class="mx-auto p-3 bg-purple-100 text-purple-600 rounded-full w-12 h-12 flex items-center justify-center mb-2">
526
+ <i class="fas fa-bullhorn text-xl"></i>
527
+ </div>
528
+ <p class="text-sm font-medium text-gray-700">Send Announcement</p>
529
+ </a>
530
+ </div>
531
+ </div>
532
+ </main>
533
+ </div>
534
+
535
+ <!-- Modal for Student Registration -->
536
+ <div class="fixed inset-0 z-50 hidden overflow-y-auto" id="student-registration-modal">
537
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
538
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
539
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
540
+ </div>
541
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
542
+ <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-2xl sm:w-full">
543
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
544
+ <div class="sm:flex sm:items-start">
545
+ <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">
546
+ <i class="fas fa-user-plus text-indigo-600"></i>
547
+ </div>
548
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
549
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Register New Student</h3>
550
+ <div class="mt-2">
551
+ <form class="space-y-4">
552
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
553
+ <div>
554
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label>
555
+ <input type="text" id="first-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
556
+ </div>
557
+ <div>
558
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
559
+ <input type="text" id="last-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
560
+ </div>
561
+ </div>
562
+ <div>
563
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
564
+ <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
565
+ </div>
566
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
567
+ <div>
568
+ <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
569
+ <input type="date" id="dob" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
570
+ </div>
571
+ <div>
572
+ <label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>
573
+ <select id="gender" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
574
+ <option value="male">Male</option>
575
+ <option value="female">Female</option>
576
+ <option value="other">Other</option>
577
+ </select>
578
+ </div>
579
+ </div>
580
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
581
+ <div>
582
+ <label for="class" class="block text-sm font-medium text-gray-700">Class</label>
583
+ <select id="class" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
584
+ <option value="">Select Class</option>
585
+ <option value="grade9">Grade 9</option>
586
+ <option value="grade10">Grade 10</option>
587
+ <option value="grade11">Grade 11</option>
588
+ <option value="grade12">Grade 12</option>
589
+ </select>
590
+ </div>
591
+ <div>
592
+ <label for="section" class="block text-sm font-medium text-gray-700">Section</label>
593
+ <select id="section" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
594
+ <option value="">Select Section</option>
595
+ <option value="A">A</option>
596
+ <option value="B">B</option>
597
+ <option value="C">C</option>
598
+ <option value="D">D</option>
599
+ </select>
600
+ </div>
601
+ </div>
602
+ <div>
603
+ <label for="address" class="block text-sm font-medium text-gray-700">Address</label>
604
+ <textarea id="address" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
605
+ </div>
606
+ <div>
607
+ <label for="parent-name" class="block text-sm font-medium text-gray-700">Parent/Guardian Name</label>
608
+ <input type="text" id="parent-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
609
+ </div>
610
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
611
+ <div>
612
+ <label for="parent-phone" class="block text-sm font-medium text-gray-700">Parent Phone</label>
613
+ <input type="tel" id="parent-phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
614
+ </div>
615
+ <div>
616
+ <label for="parent-email" class="block text-sm font-medium text-gray-700">Parent Email</label>
617
+ <input type="email" id="parent-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
618
+ </div>
619
+ </div>
620
+ </form>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
626
+ <button type="button" 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">
627
+ Register Student
628
+ </button>
629
+ <button type="button" 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" id="cancel-registration">
630
+ Cancel
631
+ </button>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
638
+ <script>
639
+ // Sidebar toggle functionality
640
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
641
+ document.getElementById('sidebar').classList.toggle('active');
642
+ });
643
+
644
+ // Sidebar collapse functionality
645
+ document.getElementById('sidebar-collapse').addEventListener('click', function() {
646
+ document.getElementById('sidebar').classList.toggle('sidebar-mini');
647
+ });
648
+
649
+ // User menu toggle
650
+ document.getElementById('user-menu-button').addEventListener('click', function() {
651
+ document.getElementById('user-menu').classList.toggle('hidden');
652
+ });
653
+
654
+ // Close user menu when clicking outside
655
+ document.addEventListener('click', function(event) {
656
+ const userMenu = document.getElementById('user-menu');
657
+ const userMenuButton = document.getElementById('user-menu-button');
658
+ if (!userMenu.contains(event.target) && !userMenuButton.contains(event.target)) {
659
+ userMenu.classList.add('hidden');
660
+ }
661
+ });
662
+
663
+ // Student registration modal
664
+ const registrationModal = document.getElementById('student-registration-modal');
665
+ const cancelRegistration = document.getElementById('cancel-registration');
666
+
667
+ document.querySelectorAll('[href="#"], [data-modal="student-registration"]').forEach(button => {
668
+ button.addEventListener('click', function(e) {
669
+ e.preventDefault();
670
+ registrationModal.classList.remove('hidden');
671
+ });
672
+ });
673
+
674
+ cancelRegistration.addEventListener('click', function() {
675
+ registrationModal.classList.add('hidden');
676
+ });
677
+
678
+ // Close modal when clicking outside
679
+ registrationModal.addEventListener('click', function(e) {
680
+ if (e.target === registrationModal) {
681
+ registrationModal.classList.add('hidden');
682
+ }
683
+ });
684
+
685
+ // Sample notification
686
+ function showNotification(type, message) {
687
+ const notificationArea = document.getElementById('notification-area');
688
+ const notification = document.createElement('div');
689
+ notification.className = `notification bg-white p-4 rounded-md shadow-md flex items-start max-w-xs ${type === 'success' ? 'border-l-4 border-green-500' : 'border-l-4 border-red-500'}`;
690
+
691
+ notification.innerHTML = `
692
+ <div class="flex-shrink-0 ${type === 'success' ? 'text-green-500' : 'text-red-500'}">
693
+ <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
694
+ </div>
695
+ <div class="ml-3">
696
+ <p class="text-sm font-medium ${type === 'success' ? 'text-green-800' : 'text-red-800'}">${message}</p>
697
+ </div>
698
+ <button class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8">
699
+ <i class="fas fa-times"></i>
700
+ </button>
701
+ `;
702
+
703
+ notification.querySelector('button').addEventListener('click', () => {
704
+ notification.remove();
705
+ });
706
+
707
+ notificationArea.appendChild(notification);
708
+
709
+ setTimeout(() => {
710
+ notification.remove();
711
+ }, 5000);
712
+ }
713
+
714
+ // Sample notifications for demo
715
+ setTimeout(() => {
716
+ showNotification('success', 'New student registration completed successfully!');
717
+ }, 1500);
718
+
719
+ setTimeout(() => {
720
+ showNotification('error', 'Failed to update attendance record. Please try again.');
721
+ }, 4000);
722
+
723
+ // Charts
724
+ const enrollmentCtx = document.getElementById('enrollmentChart').getContext('2d');
725
+ const enrollmentChart = new Chart(enrollmentCtx, {
726
+ type: 'line',
727
+ data: {
728
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
729
+ datasets: [{
730
+ label: 'New Students',
731
+ data: [12, 19, 15, 8, 5, 3, 7, 14, 25, 18, 10, 6],
732
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
733
+ borderColor: 'rgba(79, 70, 229, 1)',
734
+ borderWidth: 2,
735
+ tension: 0.3,
736
+ fill: true
737
+ }]
738
+ },
739
+ options: {
740
+ responsive: true,
741
+ maintainAspectRatio: false,
742
+ plugins: {
743
+ legend: {
744
+ display: false
745
+ }
746
+ },
747
+ scales: {
748
+ y: {
749
+ beginAtZero: true
750
+ }
751
+ }
752
+ }
753
+ });
754
+
755
+ const attendanceCtx = document.getElementById('attendanceChart').getContext('2d');
756
+ const attendanceChart = new Chart(attendanceCtx, {
757
+ type: 'bar',
758
+ data: {
759
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
760
+ datasets: [{
761
+ label: 'Attendance Rate',
762
+ data: [92, 94, 96, 95, 93, 90],
763
+ backgroundColor: 'rgba(16, 185, 129, 0.6)',
764
+ borderColor: 'rgba(16, 185, 129, 1)',
765
+ borderWidth: 1
766
+ }]
767
+ },
768
+ options: {
769
+ responsive: true,
770
+ maintainAspectRatio: false,
771
+ plugins: {
772
+ legend: {
773
+ display: false
774
+ }
775
+ },
776
+ scales: {
777
+ y: {
778
+ beginAtZero: false,
779
+ min: 85,
780
+ max: 100
781
+ }
782
+ }
783
+ }
784
+ });
785
+
786
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
787
+ const performanceChart = new Chart(performanceCtx, {
788
+ type: 'radar',
789
+ data: {
790
+ labels: ['Math', 'Science', 'English', 'History', 'Arts', 'PE'],
791
+ datasets: [
792
+ {
793
+ label: 'Grade 10-A',
794
+ data: [85, 78, 92, 88, 76, 95],
795
+ backgroundColor: 'rgba(99, 102, 241, 0.2)',
796
+ borderColor: 'rgba(99, 102, 241, 1)',
797
+ borderWidth: 2,
798
+ pointBackgroundColor: 'rgba(99, 102, 241, 1)'
799
+ },
800
+ {
801
+ label: 'Grade 10-B',
802
+ data: [78, 85, 88, 82, 80, 90],
803
+ backgroundColor: 'rgba(236, 72, 153, 0.2)',
804
+ borderColor: 'rgba(236, 72, 153, 1)',
805
+ borderWidth: 2,
806
+ pointBackgroundColor: 'rgba(236, 72, 153, 1)'
807
+ }
808
+ ]
809
+ },
810
+ options: {
811
+ responsive: true,
812
+ maintainAspectRatio: false,
813
+ scales: {
814
+ r: {
815
+ angleLines: {
816
+ display: true
817
+ },
818
+ suggestedMin: 50,
819
+ suggestedMax: 100
820
+ }
821
+ }
822
+ }
823
+ });
824
+ </script>
825
+ <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=LRMMM/mangmet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
826
+ </html>