Hugging Face's logo

Spaces:
Kast-KIIT
/
cms
Running

App Files Community
Kast-KIIT commited on
Commit
3d667ec
·
verified ·
1 Parent(s): c9edcd1

Using Django as backend, design a modern, responsive College Management System web application interface. The application includes multiple user roles (Admin, Staff, Student), each with a personalized dashboard and feature set. The system should have a clean layout with a sidebar for navigation, a top navbar, and card/grid-based content areas. Include dark/light mode toggle, tooltips, charts, and modern UI elements. Below are the detailed screens: 1. Common Screens (All Roles) Login Page: Email + password, "Forgot password", and "Sign up" links. Registration Page: First name, last name, email, password, confirm password. Forgot Password Page: Enter email and submit to receive reset instructions. Profile Page: View/update personal details, profile photo, change password. Contact Page: Form with name, email, message. Landing Page: Public info about the college, with links to login/register. 2. Admin (HOD) Dashboard Sidebar Navigation: Dashboard, Students, Staff, Courses, Subjects, Sessions, Attendance, Feedback, Leave, Notifications, Fees Management, Settings. Dashboard Cards: Total Students Total Staff Attendance Summary (Chart) Pending Leaves Outstanding Fees (Bar Chart or Doughnut) Fees Management Screens: Set tuition/hostel/other fee categories Assign fees to students by course/level Track paid/unpaid amounts per student Generate reports: Paid vs. Unpaid (filters: program, semester) Export fee reports to Excel/PDF Other Features: Approve/Reject Leave Applications View Attendance by Class/Subject Respond to Student/Staff Feedback 3. Staff (Teacher) Dashboard Sidebar: Dashboard, My Students, Attendance, Results, Feedback, Leave, Timetable. Dashboard Cards: Students under care Attendance taken % Subjects assigned Features: Take/update attendance Add/edit student results Apply for leave Send feedback to HOD 4. Student Dashboard Sidebar: Dashboard, Attendance, Results, Feedback, Leave, Timetable, Profile, My Fees. Dashboard Cards: Attendance % GPA / Academic Standing Subjects Enrolled Fees Balance Fees Screen: View assigned fee items and amounts View paid and outstanding balances Upload proof of payment (e.g., receipt image/PDF) Generate/download printable fee invoice Fee payment status: pending, partial, complete 5. Enhancements Dark/Light Theme Toggle Tooltips on all input fields Password Strength Meter in registration Email validation hints (inline) Notification Bell with count on Navbar Search box on top navbar Chart visualizations (using ApexCharts or Chart.js) 📐 Design Guidelines UI Framework: Tailwind CSS look Use rounded corners, clean spacing, subtle animations Color Theme: Blue/Grey for light mode, Dark Navy/Grey for dark mode Font: Inter, Roboto, or Poppins - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1143 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cms
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: indigo
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: cms
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
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,1143 @@
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" class="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>College Management System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ transition: background-color 0.3s, color 0.3s;
15
+ }
16
+ .sidebar {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .card {
20
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
21
+ }
22
+ .card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
25
+ }
26
+ .dark .card:hover {
27
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
28
+ }
29
+ .tooltip {
30
+ position: relative;
31
+ display: inline-block;
32
+ }
33
+ .tooltip .tooltiptext {
34
+ visibility: hidden;
35
+ width: 200px;
36
+ background-color: #555;
37
+ color: #fff;
38
+ text-align: center;
39
+ border-radius: 6px;
40
+ padding: 5px;
41
+ position: absolute;
42
+ z-index: 1;
43
+ bottom: 125%;
44
+ left: 50%;
45
+ margin-left: -100px;
46
+ opacity: 0;
47
+ transition: opacity 0.3s;
48
+ }
49
+ .tooltip:hover .tooltiptext {
50
+ visibility: visible;
51
+ opacity: 1;
52
+ }
53
+ .password-strength-meter {
54
+ height: 5px;
55
+ width: 100%;
56
+ margin-top: 5px;
57
+ border-radius: 5px;
58
+ background-color: #e0e0e0;
59
+ }
60
+ .dark .password-strength-meter {
61
+ background-color: #4a5568;
62
+ }
63
+ .password-strength-meter-fill {
64
+ height: 100%;
65
+ border-radius: 5px;
66
+ transition: width 0.3s ease, background-color 0.3s ease;
67
+ }
68
+ .sidebar-link.active {
69
+ background-color: rgba(59, 130, 246, 0.1);
70
+ border-left: 4px solid #3b82f6;
71
+ }
72
+ .dark .sidebar-link.active {
73
+ background-color: rgba(59, 130, 246, 0.2);
74
+ }
75
+ .sidebar-link:hover:not(.active) {
76
+ background-color: rgba(59, 130, 246, 0.05);
77
+ }
78
+ .dark .sidebar-link:hover:not(.active) {
79
+ background-color: rgba(59, 130, 246, 0.1);
80
+ }
81
+ .notification-badge {
82
+ position: absolute;
83
+ top: -5px;
84
+ right: -5px;
85
+ background-color: #ef4444;
86
+ color: white;
87
+ border-radius: 50%;
88
+ width: 20px;
89
+ height: 20px;
90
+ display: flex;
91
+ align-items: center;
92
+ justify-content: center;
93
+ font-size: 12px;
94
+ }
95
+ .dropdown-menu {
96
+ display: none;
97
+ position: absolute;
98
+ right: 0;
99
+ background-color: white;
100
+ min-width: 200px;
101
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
102
+ z-index: 1;
103
+ border-radius: 0.5rem;
104
+ overflow: hidden;
105
+ }
106
+ .dark .dropdown-menu {
107
+ background-color: #1f2937;
108
+ box-shadow: 0 8px 16px rgba(0,0,0,0.3);
109
+ }
110
+ .dropdown:hover .dropdown-menu {
111
+ display: block;
112
+ }
113
+ .mobile-menu {
114
+ display: none;
115
+ }
116
+ @media (max-width: 1024px) {
117
+ .sidebar {
118
+ transform: translateX(-100%);
119
+ position: fixed;
120
+ z-index: 50;
121
+ height: 100vh;
122
+ top: 0;
123
+ left: 0;
124
+ }
125
+ .sidebar.active {
126
+ transform: translateX(0);
127
+ }
128
+ .mobile-menu {
129
+ display: block;
130
+ }
131
+ }
132
+ </style>
133
+ </head>
134
+ <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
135
+ <!-- Landing Page -->
136
+ <div id="landing-page" class="min-h-screen">
137
+ <!-- Navigation -->
138
+ <nav class="bg-white dark:bg-gray-800 shadow-sm">
139
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
140
+ <div class="flex justify-between h-16">
141
+ <div class="flex items-center">
142
+ <div class="flex-shrink-0 flex items-center">
143
+ <i class="fas fa-graduation-cap text-blue-600 dark:text-blue-400 text-2xl mr-2"></i>
144
+ <span class="text-xl font-bold text-gray-800 dark:text-white">EduManage</span>
145
+ </div>
146
+ </div>
147
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
148
+ <a href="#features" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 text-sm font-medium">Features</a>
149
+ <a href="#about" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 text-sm font-medium">About</a>
150
+ <a href="#contact" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 text-sm font-medium">Contact</a>
151
+ <button onclick="toggleTheme()" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
152
+ <i class="fas fa-moon dark:hidden"></i>
153
+ <i class="fas fa-sun hidden dark:inline"></i>
154
+ </button>
155
+ <a href="#login" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
156
+ Login
157
+ </a>
158
+ <a href="#register" class="ml-2 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:text-blue-100 dark:bg-blue-800 dark:hover:bg-blue-700">
159
+ Register
160
+ </a>
161
+ </div>
162
+ <div class="-mr-2 flex items-center md:hidden">
163
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:hover:bg-gray-700" aria-expanded="false">
164
+ <span class="sr-only">Open main menu</span>
165
+ <i class="fas fa-bars"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </nav>
171
+
172
+ <!-- Hero Section -->
173
+ <div class="relative bg-white dark:bg-gray-900 overflow-hidden">
174
+ <div class="max-w-7xl mx-auto">
175
+ <div class="relative z-10 pb-8 bg-white dark:bg-gray-900 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
176
+ <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
177
+ <div class="sm:text-center lg:text-left">
178
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
179
+ <span class="block">Modern College</span>
180
+ <span class="block text-blue-600 dark:text-blue-400">Management System</span>
181
+ </h1>
182
+ <p class="mt-3 text-base text-gray-500 dark:text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
183
+ Streamline your academic institution's operations with our comprehensive management solution designed for administrators, faculty, and students.
184
+ </p>
185
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
186
+ <div class="rounded-md shadow">
187
+ <a href="#register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
188
+ Get started
189
+ </a>
190
+ </div>
191
+ <div class="mt-3 sm:mt-0 sm:ml-3">
192
+ <a href="#features" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10 dark:text-blue-100 dark:bg-blue-800 dark:hover:bg-blue-700">
193
+ Learn more
194
+ </a>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </main>
199
+ </div>
200
+ </div>
201
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
202
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="Students studying">
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Features Section -->
207
+ <div id="features" class="py-12 bg-gray-50 dark:bg-gray-800">
208
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
209
+ <div class="lg:text-center">
210
+ <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">Features</h2>
211
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
212
+ A better way to manage your institution
213
+ </p>
214
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto">
215
+ Comprehensive tools for administrators, faculty, and students.
216
+ </p>
217
+ </div>
218
+
219
+ <div class="mt-10">
220
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
221
+ <!-- Admin Features -->
222
+ <div class="relative group">
223
+ <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-blue-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
224
+ <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
225
+ <div class="flex items-center">
226
+ <div class="flex-shrink-0 bg-blue-500 dark:bg-blue-600 rounded-md p-3">
227
+ <i class="fas fa-user-shield text-white"></i>
228
+ </div>
229
+ <div class="ml-5">
230
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Admin Dashboard</h3>
231
+ </div>
232
+ </div>
233
+ <div class="mt-5">
234
+ <p class="text-sm text-gray-500 dark:text-gray-300">
235
+ Comprehensive tools for managing students, staff, courses, attendance, fees, and more with powerful reporting and analytics.
236
+ </p>
237
+ <ul class="mt-4 space-y-2">
238
+ <li class="flex items-start">
239
+ <div class="flex-shrink-0">
240
+ <i class="fas fa-check-circle text-green-500"></i>
241
+ </div>
242
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Student & Staff Management</p>
243
+ </li>
244
+ <li class="flex items-start">
245
+ <div class="flex-shrink-0">
246
+ <i class="fas fa-check-circle text-green-500"></i>
247
+ </div>
248
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Fees Collection & Reporting</p>
249
+ </li>
250
+ <li class="flex items-start">
251
+ <div class="flex-shrink-0">
252
+ <i class="fas fa-check-circle text-green-500"></i>
253
+ </div>
254
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Attendance Tracking</p>
255
+ </li>
256
+ <li class="flex items-start">
257
+ <div class="flex-shrink-0">
258
+ <i class="fas fa-check-circle text-green-500"></i>
259
+ </div>
260
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Leave Approval System</p>
261
+ </li>
262
+ </ul>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Staff Features -->
268
+ <div class="relative group">
269
+ <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-purple-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
270
+ <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
271
+ <div class="flex items-center">
272
+ <div class="flex-shrink-0 bg-purple-500 dark:bg-purple-600 rounded-md p-3">
273
+ <i class="fas fa-chalkboard-teacher text-white"></i>
274
+ </div>
275
+ <div class="ml-5">
276
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Staff Portal</h3>
277
+ </div>
278
+ </div>
279
+ <div class="mt-5">
280
+ <p class="text-sm text-gray-500 dark:text-gray-300">
281
+ Tools designed specifically for faculty members to manage their classes, take attendance, submit grades, and communicate with students.
282
+ </p>
283
+ <ul class="mt-4 space-y-2">
284
+ <li class="flex items-start">
285
+ <div class="flex-shrink-0">
286
+ <i class="fas fa-check-circle text-green-500"></i>
287
+ </div>
288
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Class & Student Management</p>
289
+ </li>
290
+ <li class="flex items-start">
291
+ <div class="flex-shrink-0">
292
+ <i class="fas fa-check-circle text-green-500"></i>
293
+ </div>
294
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Attendance Recording</p>
295
+ </li>
296
+ <li class="flex items-start">
297
+ <div class="flex-shrink-0">
298
+ <i class="fas fa-check-circle text-green-500"></i>
299
+ </div>
300
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Grade Submission</p>
301
+ </li>
302
+ <li class="flex items-start">
303
+ <div class="flex-shrink-0">
304
+ <i class="fas fa-check-circle text-green-500"></i>
305
+ </div>
306
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Leave Application</p>
307
+ </li>
308
+ </ul>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Student Features -->
314
+ <div class="relative group">
315
+ <div class="absolute -inset-1 bg-gradient-to-r from-green-600 to-green-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
316
+ <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
317
+ <div class="flex items-center">
318
+ <div class="flex-shrink-0 bg-green-500 dark:bg-green-600 rounded-md p-3">
319
+ <i class="fas fa-user-graduate text-white"></i>
320
+ </div>
321
+ <div class="ml-5">
322
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Student Portal</h3>
323
+ </div>
324
+ </div>
325
+ <div class="mt-5">
326
+ <p class="text-sm text-gray-500 dark:text-gray-300">
327
+ Personalized dashboard for students to view their attendance, grades, timetable, fees, and communicate with faculty.
328
+ </p>
329
+ <ul class="mt-4 space-y-2">
330
+ <li class="flex items-start">
331
+ <div class="flex-shrink-0">
332
+ <i class="fas fa-check-circle text-green-500"></i>
333
+ </div>
334
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Attendance Tracking</p>
335
+ </li>
336
+ <li class="flex items-start">
337
+ <div class="flex-shrink-0">
338
+ <i class="fas fa-check-circle text-green-500"></i>
339
+ </div>
340
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Grade Viewing</p>
341
+ </li>
342
+ <li class="flex items-start">
343
+ <div class="flex-shrink-0">
344
+ <i class="fas fa-check-circle text-green-500"></i>
345
+ </div>
346
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Timetable Access</p>
347
+ </li>
348
+ <li class="flex items-start">
349
+ <div class="flex-shrink-0">
350
+ <i class="fas fa-check-circle text-green-500"></i>
351
+ </div>
352
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Fee Payment & Tracking</p>
353
+ </li>
354
+ </ul>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- General Features -->
360
+ <div class="relative group">
361
+ <div class="absolute -inset-1 bg-gradient-to-r from-yellow-600 to-yellow-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
362
+ <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
363
+ <div class="flex items-center">
364
+ <div class="flex-shrink-0 bg-yellow-500 dark:bg-yellow-600 rounded-md p-3">
365
+ <i class="fas fa-cogs text-white"></i>
366
+ </div>
367
+ <div class="ml-5">
368
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">System Features</h3>
369
+ </div>
370
+ </div>
371
+ <div class="mt-5">
372
+ <p class="text-sm text-gray-500 dark:text-gray-300">
373
+ Powerful features that make the system flexible, secure, and easy to use for all stakeholders.
374
+ </p>
375
+ <ul class="mt-4 space-y-2">
376
+ <li class="flex items-start">
377
+ <div class="flex-shrink-0">
378
+ <i class="fas fa-check-circle text-green-500"></i>
379
+ </div>
380
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Responsive Design</p>
381
+ </li>
382
+ <li class="flex items-start">
383
+ <div class="flex-shrink-0">
384
+ <i class="fas fa-check-circle text-green-500"></i>
385
+ </div>
386
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Dark/Light Mode</p>
387
+ </li>
388
+ <li class="flex items-start">
389
+ <div class="flex-shrink-0">
390
+ <i class="fas fa-check-circle text-green-500"></i>
391
+ </div>
392
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Data Visualization</p>
393
+ </li>
394
+ <li class="flex items-start">
395
+ <div class="flex-shrink-0">
396
+ <i class="fas fa-check-circle text-green-500"></i>
397
+ </div>
398
+ <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Secure Authentication</p>
399
+ </li>
400
+ </ul>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- About Section -->
410
+ <div id="about" class="py-12 bg-white dark:bg-gray-900">
411
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
412
+ <div class="lg:text-center">
413
+ <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">About</h2>
414
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
415
+ Transforming education management
416
+ </p>
417
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto">
418
+ Our mission is to provide institutions with powerful tools to streamline operations and enhance the educational experience.
419
+ </p>
420
+ </div>
421
+
422
+ <div class="mt-10">
423
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
424
+ <div class="flex">
425
+ <div class="flex-shrink-0">
426
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
427
+ <i class="fas fa-rocket"></i>
428
+ </div>
429
+ </div>
430
+ <div class="ml-4">
431
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Our Vision</h3>
432
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
433
+ To revolutionize education management through innovative technology solutions that empower institutions to focus on what matters most - education.
434
+ </p>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="flex">
439
+ <div class="flex-shrink-0">
440
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
441
+ <i class="fas fa-lightbulb"></i>
442
+ </div>
443
+ </div>
444
+ <div class="ml-4">
445
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Our Approach</h3>
446
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
447
+ We combine deep educational expertise with cutting-edge technology to create solutions that are both powerful and intuitive to use.
448
+ </p>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="flex">
453
+ <div class="flex-shrink-0">
454
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
455
+ <i class="fas fa-users"></i>
456
+ </div>
457
+ </div>
458
+ <div class="ml-4">
459
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">For Institutions</h3>
460
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
461
+ Whether you're a small college or a large university, our scalable solutions adapt to your needs and grow with your institution.
462
+ </p>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="flex">
467
+ <div class="flex-shrink-0">
468
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
469
+ <i class="fas fa-shield-alt"></i>
470
+ </div>
471
+ </div>
472
+ <div class="ml-4">
473
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Security & Privacy</h3>
474
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
475
+ We prioritize the security and privacy of your data with industry-leading encryption and compliance with global data protection standards.
476
+ </p>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Contact Section -->
485
+ <div id="contact" class="py-12 bg-gray-50 dark:bg-gray-800">
486
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
487
+ <div class="lg:text-center">
488
+ <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">Contact Us</h2>
489
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
490
+ Get in touch
491
+ </p>
492
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto">
493
+ Have questions or want to learn more? We'd love to hear from you.
494
+ </p>
495
+ </div>
496
+
497
+ <div class="mt-10">
498
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
499
+ <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
500
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Contact Information</h3>
501
+ <div class="space-y-4">
502
+ <div class="flex items-start">
503
+ <div class="flex-shrink-0">
504
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
505
+ </div>
506
+ <div class="ml-3">
507
+ <p class="text-base text-gray-500 dark:text-gray-300">123 Education Street, Academic City, AC 12345</p>
508
+ </div>
509
+ </div>
510
+ <div class="flex items-start">
511
+ <div class="flex-shrink-0">
512
+ <i class="fas fa-phone-alt text-blue-500"></i>
513
+ </div>
514
+ <div class="ml-3">
515
+ <p class="text-base text-gray-500 dark:text-gray-300">+1 (555) 123-4567</p>
516
+ </div>
517
+ </div>
518
+ <div class="flex items-start">
519
+ <div class="flex-shrink-0">
520
+ <i class="fas fa-envelope text-blue-500"></i>
521
+ </div>
522
+ <div class="ml-3">
523
+ <p class="text-base text-gray-500 dark:text-gray-300">info@edumanage.com</p>
524
+ </div>
525
+ </div>
526
+ <div class="flex items-start">
527
+ <div class="flex-shrink-0">
528
+ <i class="fas fa-clock text-blue-500"></i>
529
+ </div>
530
+ <div class="ml-3">
531
+ <p class="text-base text-gray-500 dark:text-gray-300">Monday - Friday: 9:00 AM - 5:00 PM</p>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
538
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Send us a message</h3>
539
+ <form class="space-y-4">
540
+ <div>
541
+ <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
542
+ <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
543
+ </div>
544
+ <div>
545
+ <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
546
+ <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
547
+ </div>
548
+ <div>
549
+ <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
550
+ <input type="text" id="subject" name="subject" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
551
+ </div>
552
+ <div>
553
+ <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
554
+ <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"></textarea>
555
+ </div>
556
+ <div>
557
+ <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
558
+ Send Message
559
+ </button>
560
+ </div>
561
+ </form>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+
568
+ <!-- Footer -->
569
+ <footer class="bg-gray-800 dark:bg-gray-900">
570
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
571
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
572
+ <div>
573
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Product</h3>
574
+ <ul class="mt-4 space-y-4">
575
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Features</a></li>
576
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li>
577
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Documentation</a></li>
578
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Releases</a></li>
579
+ </ul>
580
+ </div>
581
+ <div>
582
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
583
+ <ul class="mt-4 space-y-4">
584
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li>
585
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>
586
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
587
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li>
588
+ </ul>
589
+ </div>
590
+ <div>
591
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3>
592
+ <ul class="mt-4 space-y-4">
593
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li>
594
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li>
595
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a></li>
596
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">GDPR</a></li>
597
+ </ul>
598
+ </div>
599
+ <div>
600
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
601
+ <ul class="mt-4 space-y-4">
602
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Twitter</a></li>
603
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Facebook</a></li>
604
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">LinkedIn</a></li>
605
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">GitHub</a></li>
606
+ </ul>
607
+ </div>
608
+ </div>
609
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
610
+ <div class="flex space-x-6 md:order-2">
611
+ <a href="#" class="text-gray-400 hover:text-gray-300">
612
+ <span class="sr-only">Facebook</span>
613
+ <i class="fab fa-facebook-f"></i>
614
+ </a>
615
+ <a href="#" class="text-gray-400 hover:text-gray-300">
616
+ <span class="sr-only">Twitter</span>
617
+ <i class="fab fa-twitter"></i>
618
+ </a>
619
+ <a href="#" class="text-gray-400 hover:text-gray-300">
620
+ <span class="sr-only">Instagram</span>
621
+ <i class="fab fa-instagram"></i>
622
+ </a>
623
+ <a href="#" class="text-gray-400 hover:text-gray-300">
624
+ <span class="sr-only">LinkedIn</span>
625
+ <i class="fab fa-linkedin-in"></i>
626
+ </a>
627
+ <a href="#" class="text-gray-400 hover:text-gray-300">
628
+ <span class="sr-only">GitHub</span>
629
+ <i class="fab fa-github"></i>
630
+ </a>
631
+ </div>
632
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
633
+ &copy; 2023 EduManage. All rights reserved.
634
+ </p>
635
+ </div>
636
+ </div>
637
+ </footer>
638
+ </div>
639
+
640
+ <!-- Login Page -->
641
+ <div id="login-page" class="hidden min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
642
+ <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">
643
+ <div>
644
+ <i class="fas fa-graduation-cap text-blue-600 dark:text-blue-400 text-4xl mx-auto"></i>
645
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
646
+ Sign in to your account
647
+ </h2>
648
+ <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
649
+ Or <a href="#register" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">register for a new account</a>
650
+ </p>
651
+ </div>
652
+ <form class="mt-8 space-y-6" action="#" method="POST">
653
+ <input type="hidden" name="remember" value="true">
654
+ <div class="rounded-md shadow-sm space-y-4">
655
+ <div>
656
+ <label for="email-address" class="sr-only">Email address</label>
657
+ <div class="tooltip w-full">
658
+ <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
659
+ <span class="tooltiptext">Please enter your registered email address</span>
660
+ </div>
661
+ </div>
662
+ <div>
663
+ <label for="password" class="sr-only">Password</label>
664
+ <div class="tooltip w-full">
665
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password">
666
+ <span class="tooltiptext">Enter your password (8+ characters)</span>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <div class="flex items-center justify-between">
672
+ <div class="flex items-center">
673
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
674
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
675
+ Remember me
676
+ </label>
677
+ </div>
678
+
679
+ <div class="text-sm">
680
+ <a href="#forgot-password" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
681
+ Forgot your password?
682
+ </a>
683
+ </div>
684
+ </div>
685
+
686
+ <div>
687
+ <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
688
+ <span class="absolute left-0 inset-y-0 flex items-center pl-3">
689
+ <i class="fas fa-sign-in-alt"></i>
690
+ </span>
691
+ Sign in
692
+ </button>
693
+ </div>
694
+ </form>
695
+ <div class="mt-6">
696
+ <div class="relative">
697
+ <div class="absolute inset-0 flex items-center">
698
+ <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
699
+ </div>
700
+ <div class="relative flex justify-center text-sm">
701
+ <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
702
+ Or continue with
703
+ </span>
704
+ </div>
705
+ </div>
706
+
707
+ <div class="mt-6 grid grid-cols-3 gap-3">
708
+ <div>
709
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
710
+ <span class="sr-only">Sign in with Google</span>
711
+ <i class="fab fa-google"></i>
712
+ </a>
713
+ </div>
714
+
715
+ <div>
716
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
717
+ <span class="sr-only">Sign in with Microsoft</span>
718
+ <i class="fab fa-microsoft"></i>
719
+ </a>
720
+ </div>
721
+
722
+ <div>
723
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
724
+ <span class="sr-only">Sign in with GitHub</span>
725
+ <i class="fab fa-github"></i>
726
+ </a>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </div>
732
+
733
+ <!-- Registration Page -->
734
+ <div id="register-page" class="hidden min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
735
+ <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">
736
+ <div>
737
+ <i class="fas fa-user-plus text-blue-600 dark:text-blue-400 text-4xl mx-auto"></i>
738
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
739
+ Create a new account
740
+ </h2>
741
+ <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
742
+ Or <a href="#login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">sign in to your existing account</a>
743
+ </p>
744
+ </div>
745
+ <form class="mt-8 space-y-6" action="#" method="POST">
746
+ <div class="rounded-md shadow-sm space-y-4">
747
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
748
+ <div>
749
+ <label for="first-name" class="sr-only">First name</label>
750
+ <div class="tooltip w-full">
751
+ <input id="first-name" name="first-name" type="text" autocomplete="given-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md md:rounded-tr-none focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="First name">
752
+ <span class="tooltiptext">Enter your first name</span>
753
+ </div>
754
+ </div>
755
+ <div>
756
+ <label for="last-name" class="sr-only">Last name</label>
757
+ <div class="tooltip w-full">
758
+ <input id="last-name" name="last-name" type="text" autocomplete="family-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md md:rounded-tl-none focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Last name">
759
+ <span class="tooltiptext">Enter your last name</span>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ <div>
764
+ <label for="email" class="sr-only">Email address</label>
765
+ <div class="tooltip w-full">
766
+ <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
767
+ <span id="email-tooltip" class="tooltiptext">Please enter a valid email address</span>
768
+ </div>
769
+ <p id="email-validation" class="mt-1 text-xs text-gray-500 dark:text-gray-400 hidden">Email must be valid and from an educational institution</p>
770
+ </div>
771
+ <div>
772
+ <label for="password" class="sr-only">Password</label>
773
+ <div class="tooltip w-full">
774
+ <input id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password" onkeyup="checkPasswordStrength(this.value)">
775
+ <span class="tooltiptext">Password must be at least 8 characters</span>
776
+ </div>
777
+ <div class="password-strength-meter mt-1">
778
+ <div id="password-strength-meter-fill" class="password-strength-meter-fill" style="width: 0%; background-color: #ef4444;"></div>
779
+ </div>
780
+ <p id="password-strength-text" class="mt-1 text-xs text-gray-500 dark:text-gray-400">Password strength: Very Weak</p>
781
+ </div>
782
+ <div>
783
+ <label for="confirm-password" class="sr-only">Confirm Password</label>
784
+ <div class="tooltip w-full">
785
+ <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Confirm Password">
786
+ <span class="tooltiptext">Passwords must match</span>
787
+ </div>
788
+ <p id="password-match" class="mt-1 text-xs text-red-500 dark:text-red-400 hidden">Passwords do not match</p>
789
+ </div>
790
+ </div>
791
+
792
+ <div class="flex items-center">
793
+ <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
794
+ <label for="terms" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
795
+ I agree to the <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">Terms of Service</a> and <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">Privacy Policy</a>
796
+ </label>
797
+ </div>
798
+
799
+ <div>
800
+ <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
801
+ <span class="absolute left-0 inset-y-0 flex items-center pl-3">
802
+ <i class="fas fa-user-plus"></i>
803
+ </span>
804
+ Register
805
+ </button>
806
+ </div>
807
+ </form>
808
+ </div>
809
+ </div>
810
+
811
+ <!-- Forgot Password Page -->
812
+ <div id="forgot-password-page" class="hidden min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
813
+ <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">
814
+ <div>
815
+ <i class="fas fa-key text-blue-600 dark:text-blue-400 text-4xl mx-auto"></i>
816
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
817
+ Forgot your password?
818
+ </h2>
819
+ <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
820
+ Enter your email and we'll send you a link to reset your password
821
+ </p>
822
+ </div>
823
+ <form class="mt-8 space-y-6" action="#" method="POST">
824
+ <div class="rounded-md shadow-sm">
825
+ <div>
826
+ <label for="email" class="sr-only">Email address</label>
827
+ <div class="tooltip w-full">
828
+ <input id="forgot-email" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
829
+ <span class="tooltiptext">Enter your registered email address</span>
830
+ </div>
831
+ </div>
832
+ </div>
833
+
834
+ <div>
835
+ <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
836
+ <span class="absolute left-0 inset-y-0 flex items-center pl-3">
837
+ <i class="fas fa-paper-plane"></i>
838
+ </span>
839
+ Send Reset Link
840
+ </button>
841
+ </div>
842
+ <div class="text-center">
843
+ <a href="#login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 text-sm">
844
+ Back to login
845
+ </a>
846
+ </div>
847
+ </form>
848
+ </div>
849
+ </div>
850
+
851
+ <!-- Admin Dashboard -->
852
+ <div id="admin-dashboard" class="hidden min-h-screen bg-gray-50 dark:bg-gray-900">
853
+ <div class="flex h-full">
854
+ <!-- Sidebar -->
855
+ <div class="sidebar bg-white dark:bg-gray-800 w-64 flex-shrink-0 shadow-lg">
856
+ <div class="p-4 flex items-center border-b border-gray-200 dark:border-gray-700">
857
+ <i class="fas fa-graduation-cap text-blue-600 dark:text-blue-400 text-2xl mr-2"></i>
858
+ <span class="text-xl font-bold text-gray-800 dark:text-white">EduManage</span>
859
+ </div>
860
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
861
+ <div class="flex items-center">
862
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin profile">
863
+ <div class="ml-3">
864
+ <p class="text-sm font-medium text-gray-800 dark:text-white">Dr. John Smith</p>
865
+ <p class="text-xs text-gray-500 dark:text-gray-400">Head of Department</p>
866
+ </div>
867
+ </div>
868
+ </div>
869
+ <nav class="p-4 space-y-1">
870
+ <a href="#" class="sidebar-link active flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
871
+ <i class="fas fa-tachometer-alt mr-3 text-blue-600 dark:text-blue-400"></i>
872
+ Dashboard
873
+ </a>
874
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
875
+ <i class="fas fa-users mr-3 text-blue-600 dark:text-blue-400"></i>
876
+ Students
877
+ </a>
878
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
879
+ <i class="fas fa-chalkboard-teacher mr-3 text-blue-600 dark:text-blue-400"></i>
880
+ Staff
881
+ </a>
882
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
883
+ <i class="fas fa-book mr-3 text-blue-600 dark:text-blue-400"></i>
884
+ Courses
885
+ </a>
886
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
887
+ <i class="fas fa-book-open mr-3 text-blue-600 dark:text-blue-400"></i>
888
+ Subjects
889
+ </a>
890
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
891
+ <i class="fas fa-calendar-alt mr-3 text-blue-600 dark:text-blue-400"></i>
892
+ Sessions
893
+ </a>
894
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
895
+ <i class="fas fa-clipboard-check mr-3 text-blue-600 dark:text-blue-400"></i>
896
+ Attendance
897
+ </a>
898
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
899
+ <i class="fas fa-comment-alt mr-3 text-blue-600 dark:text-blue-400"></i>
900
+ Feedback
901
+ </a>
902
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
903
+ <i class="fas fa-file-invoice-dollar mr-3 text-blue-600 dark:text-blue-400"></i>
904
+ Fees Management
905
+ </a>
906
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
907
+ <i class="fas fa-bell mr-3 text-blue-600 dark:text-blue-400"></i>
908
+ Notifications
909
+ </a>
910
+ <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
911
+ <i class="fas fa-cog mr-3 text-blue-600 dark:text-blue-400"></i>
912
+ Settings
913
+ </a>
914
+ </nav>
915
+ </div>
916
+
917
+ <!-- Main Content -->
918
+ <div class="flex-1 flex flex-col overflow-hidden">
919
+ <!-- Top Navigation -->
920
+ <header class="bg-white dark:bg-gray-800 shadow-sm">
921
+ <div class="flex items-center justify-between px-6 py-3">
922
+ <div class="flex items-center">
923
+ <button class="md:hidden mr-4 text-gray-500 dark:text-gray-400 focus:outline-none">
924
+ <i class="fas fa-bars"></i>
925
+ </button>
926
+ <div class="relative w-64">
927
+ <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
928
+ <i class="fas fa-search text-gray-400"></i>
929
+ </span>
930
+ <input class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:placeholder-gray-400 dark:focus:placeholder-gray-300 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search" type="search">
931
+ </div>
932
+ </div>
933
+ <div class="flex items-center space-x-4">
934
+ <button onclick="toggleTheme()" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
935
+ <i class="fas fa-moon dark:hidden"></i>
936
+ <i class="fas fa-sun hidden dark:inline"></i>
937
+ </button>
938
+ <div class="relative">
939
+ <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 relative">
940
+ <i class="fas fa-bell"></i>
941
+ <span class="notification-badge">3</span>
942
+ </button>
943
+ </div>
944
+ <div class="dropdown relative">
945
+ <button class="flex items-center space-x-2 focus:outline-none">
946
+ <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin profile">
947
+ <span class="hidden md:inline-block text-sm font-medium text-gray-700 dark:text-gray-200">Dr. John Smith</span>
948
+ </button>
949
+ <div class="dropdown-menu mt-2 w-48">
950
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
951
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
952
+ <a href="#login" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ </div>
957
+ </header>
958
+
959
+ <!-- Main Content Area -->
960
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50 dark:bg-gray-900">
961
+ <div class="mb-6">
962
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Admin Dashboard</h1>
963
+ <p class="text-gray-600 dark:text-gray-300">Welcome back, Dr. Smith. Here's what's happening with your institution today.</p>
964
+ </div>
965
+
966
+ <!-- Stats Cards -->
967
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
968
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
969
+ <div class="flex items-center">
970
+ <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
971
+ <i class="fas fa-users"></i>
972
+ </div>
973
+ <div class="ml-4">
974
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Students</p>
975
+ <p class="text-2xl font-semibold text-gray-800 dark:text-white">1,245</p>
976
+ </div>
977
+ </div>
978
+ <div class="mt-4">
979
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12.5%</span>
980
+ <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from last month</span>
981
+ </div>
982
+ </div>
983
+
984
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
985
+ <div class="flex items-center">
986
+ <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300">
987
+ <i class="fas fa-chalkboard-teacher"></i>
988
+ </div>
989
+ <div class="ml-4">
990
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Staff</p>
991
+ <p class="text-2xl font-semibold text-gray-800 dark:text-white">87</p>
992
+ </div>
993
+ </div>
994
+ <div class="mt-4">
995
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 5.2%</span>
996
+ <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from last month</span>
997
+ </div>
998
+ </div>
999
+
1000
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
1001
+ <div class="flex items-center">
1002
+ <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300">
1003
+ <i class="fas fa-clipboard-check"></i>
1004
+ </div>
1005
+ <div class="ml-4">
1006
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Today's Attendance</p>
1007
+ <p class="text-2xl font-semibold text-gray-800 dark:text-white">92%</p>
1008
+ </div>
1009
+ </div>
1010
+ <div class="mt-4">
1011
+ <span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-down"></i> 3.1%</span>
1012
+ <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from yesterday</span>
1013
+ </div>
1014
+ </div>
1015
+
1016
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
1017
+ <div class="flex items-center">
1018
+ <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-300">
1019
+ <i class="fas fa-file-invoice-dollar"></i>
1020
+ </div>
1021
+ <div class="ml-4">
1022
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Outstanding Fees</p>
1023
+ <p class="text-2xl font-semibold text-gray-800 dark:text-white">$24,560</p>
1024
+ </div>
1025
+ </div>
1026
+ <div class="mt-4">
1027
+ <span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 8.7%</span>
1028
+ <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from last week</span>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+
1033
+ <!-- Charts Row -->
1034
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
1035
+ <!-- Attendance Chart -->
1036
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
1037
+ <div class="flex justify-between items-center mb-4">
1038
+ <h2 class="text-lg font-medium text-gray-800 dark:text-white">Attendance Summary</h2>
1039
+ <div class="relative">
1040
+ <select class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm">
1041
+ <option>This Week</option>
1042
+ <option>This Month</option>
1043
+ <option>This Semester</option>
1044
+ </select>
1045
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
1046
+ <i class="fas fa-chevron-down text-xs"></i>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+ <div class="h-64">
1051
+ <canvas id="attendanceChart"></canvas>
1052
+ </div>
1053
+ </div>
1054
+
1055
+ <!-- Fees Chart -->
1056
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
1057
+ <div class="flex justify-between items-center mb-4">
1058
+ <h2 class="text-lg font-medium text-gray-800 dark:text-white">Fees Collection</h2>
1059
+ <div class="relative">
1060
+ <select class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm">
1061
+ <option>This Month</option>
1062
+ <option>Last Month</option>
1063
+ <option>This Semester</option>
1064
+ </select>
1065
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
1066
+ <i class="fas fa-chevron-down text-xs"></i>
1067
+ </div>
1068
+ </div>
1069
+ </div>
1070
+ <div class="h-64">
1071
+ <canvas id="feesChart"></canvas>
1072
+ </div>
1073
+ </div>
1074
+ </div>
1075
+
1076
+ <!-- Recent Activity and Pending Leaves -->
1077
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
1078
+ <!-- Recent Activity -->
1079
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow">
1080
+ <div class="p-6 border-b border-gray-200 dark:border-gray-700">
1081
+ <h2 class="text-lg font-medium text-gray-800 dark:text-white">Recent Activity</h2>
1082
+ </div>
1083
+ <div class="divide-y divide-gray-200 dark:divide-gray-700">
1084
+ <div class="p-4 flex items-start">
1085
+ <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-md p-2">
1086
+ <i class="fas fa-user-plus text-blue-600 dark:text-blue-300"></i>
1087
+ </div>
1088
+ <div class="ml-3">
1089
+ <p class="text-sm font-medium text-gray-800 dark:text-white">New student registered</p>
1090
+ <p class="text-sm text-gray-500 dark:text-gray-400">Sarah Johnson registered for Computer Science</p>
1091
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">2 hours ago</p>
1092
+ </div>
1093
+ </div>
1094
+ <div class="p-4 flex items-start">
1095
+ <div class="flex-shrink-0 bg-green-100 dark:bg-green-900 rounded-md p-2">
1096
+ <i class="fas fa-file-invoice-dollar text-green-600 dark:text-green-300"></i>
1097
+ </div>
1098
+ <div class="ml-3">
1099
+ <p class="text-sm font-medium text-gray-800 dark:text-white">Fee payment received</p>
1100
+ <p class="text-sm text-gray-500 dark:text-gray-400">Michael Brown paid $1,200 for semester fees</p>
1101
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">5 hours ago</p>
1102
+ </div>
1103
+ </div>
1104
+ <div class="p-4 flex items-start">
1105
+ <div class="flex-shrink-0 bg-purple-100 dark:bg-purple-900 rounded-md p-2">
1106
+ <i class="fas fa-chalkboard-teacher text-purple-600 dark:text-purple-300"></i>
1107
+ </div>
1108
+ <div class="ml-3">
1109
+ <p class="text-sm font-medium text-gray-800 dark:text-white">New staff member added</p>
1110
+ <p class="text-sm text-gray-500 dark:text-gray-400">Dr. Emily Wilson joined as Professor of Mathematics</p>
1111
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">1 day ago</p>
1112
+ </div>
1113
+ </div>
1114
+ <div class="p-4 flex items-start">
1115
+ <div class="flex-shrink-0 bg-yellow-100 dark:bg-yellow-900 rounded-md p-2">
1116
+ <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-300"></i>
1117
+ </div>
1118
+ <div class="ml-3">
1119
+ <p class="text-sm font-medium text-gray-800 dark:text-white">Low attendance alert</p>
1120
+ <p class="text-sm text-gray-500 dark:text-gray-400">Physics 101 has 65% attendance this week</p>
1121
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">2 days ago</p>
1122
+ </div>
1123
+ </div>
1124
+ </div>
1125
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-center">
1126
+ <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">View all activity</a>
1127
+ </div>
1128
+ </div>
1129
+
1130
+ <!-- Pending Leaves -->
1131
+ <div class="card bg-white dark:bg-gray-800 rounded-lg shadow">
1132
+ <div class="p-6 border-b border-gray-200 dark:border-gray-700">
1133
+ <h2 class="text-lg font-medium text-gray-800 dark:text-white">Pending Leave Requests</h2>
1134
+ </div>
1135
+ <div class="divide-y divide-gray-200 dark:divide-gray-700">
1136
+ <div class="p-4 flex items-start">
1137
+ <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
1138
+ <div class="ml-3 flex-1">
1139
+ <div class="flex items-center justify-between">
1140
+ <p class="text-sm font-medium text-gray-800 dark:text-white">Prof. Jane Smith</p>
1141
+ <span class="px-2 inline-flex text-xs
1142
+ <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=Kast-KIIT/cms" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1143
+ </html>