Hugging Face's logo

Spaces:
Moamel19
/
undefined
Running

App Files Community
Moamel19 commited on
Commit
1d9b079
·
verified ·
1 Parent(s): ff2e88f

Official Request for Developing an Educational Website

Browse files

Subject: Request to design and develop a modern and interactive educational platform

To: The Developer / Development Team


---

Project Overview:

I would like to request the creation of a comprehensive educational website that provides a modern, interactive, and user-friendly experience for students, teachers, and the admin.
The platform should support both Dark Mode and Light Mode to enhance usability and comfort.


---

Main Homepage:

The homepage should include the following five main sections:

1. Login


2. Sign Up


3. Teacher Page


4. Student Page


5. Admin Dashboard



The homepage should feature an attractive and modern design with smooth animations and educational visuals that reflect a professional and academic atmosphere.


---

Teacher Page:

The teacher should have access to all tools needed to manage and interact with students effectively, including:

Uploading exams (files or online tests).

Recording student attendance.

Uploading and managing grades.

Uploading educational materials (books, notes, lessons, PDFs, etc.).

Managing the student list (view, edit, delete, search).

Sending notifications or messages to students.

Viewing statistics and insights about student activity and performance.



---

Student Page:

The student should have an organized and interactive dashboard that includes:

Displaying attendance records and absence percentage.

Viewing available and previous exams.

Viewing grades and results.

Accessing materials uploaded by the teacher (books, notes, lectures).

Receiving notifications and messages from teachers or the admin.

Interactive features such as progress bars, badges, and motivational feedback.



---

Admin Dashboard:

The admin should have full control over the system, including:

Managing all user accounts (students and teachers).

Editing or deleting accounts as needed.

Monitoring overall system activity.

Sending system-wide announcements and notifications.

Managing and customizing the website’s interface, including color themes and layout.

Ensuring overall functionality, security, and organization of the platform.



---

Additional Notes:

The design should be fully responsive for all devices (desktop, tablet, mobile).

The website must feature a modern and dynamic interface with smooth animations and interactive elements.

The overall style should be creative, attractive, and student-friendly, encouraging active engagement and continued use.

Files changed (9) hide show
  1. README.md +9 -5
  2. admin-dashboard.html +201 -0
  3. admin.html +212 -0
  4. index.html +221 -19
  5. investigator-dashboard.html +167 -0
  6. login.html +133 -0
  7. signup.html +145 -0
  8. student.html +189 -0
  9. teacher.html +235 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🦀
4
- colorFrom: indigo
5
- colorTo: purple
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: undefined
3
+ colorFrom: red
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
admin-dashboard.html ADDED
@@ -0,0 +1,201 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Admin Dashboard - ForensicFlow</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#1e40af',
17
+ secondary: '#dc2626'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .glass-effect {
25
+ background: rgba(255, 255, 255, 0.1);
26
+ backdrop-filter: blur(10px);
27
+ border: 1px solid rgba(255, 255, 255, 0.2);
28
+ }
29
+ .stat-card {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .stat-card:hover {
33
+ transform: translateY(-5px);
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen">
38
+ <!-- Navigation -->
39
+ <nav class="bg-black/30 backdrop-blur-md border-b border-gray-700">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between items-center py-4">
42
+ <div class="flex items-center space-x-4">
43
+ <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
44
+ <i data-feather="settings" class="text-white"></i>
45
+ </div>
46
+ <div>
47
+ <h1 class="text-white font-bold text-xl">Admin Dashboard</h1>
48
+ <p class="text-gray-400 text-sm">Full System Control</p>
49
+ </div>
50
+ </div>
51
+ <div class="flex items-center space-x-4">
52
+ <span class="text-white">Admin User</span>
53
+ <button class="text-gray-400 hover:text-white">
54
+ <i data-feather="log-out" class="w-5 h-5"></i>
55
+ </button>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </nav>
60
+
61
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
62
+ <!-- Stats Overview -->
63
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
64
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
65
+ <div class="flex justify-between items-start">
66
+ <div>
67
+ <p class="text-gray-400 text-sm">Pending Reviews</p>
68
+ <p class="text-3xl font-bold">12</p>
69
+ </div>
70
+ <i data-feather="clock" class="w-8 h-8 text-yellow-400"></i>
71
+ </div>
72
+ </div>
73
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
74
+ <div class="flex justify-between items-start">
75
+ <div>
76
+ <p class="text-gray-400 text-sm">Active Cases</p>
77
+ <p class="text-3xl font-bold">47</p>
78
+ </div>
79
+ <i data-feather="file-text" class="w-8 h-8 text-primary"></i>
80
+ </div>
81
+ </div>
82
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
83
+ <div class="flex justify-between items-start">
84
+ <div>
85
+ <p class="text-gray-400 text-sm">Approved Reports</p>
86
+ <p class="text-3xl font-bold">156</p>
87
+ </div>
88
+ <i data-feather="check-circle" class="w-8 h-8 text-green-400"></i>
89
+ </div>
90
+ </div>
91
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
92
+ <div class="flex justify-between items-start">
93
+ <div>
94
+ <p class="text-gray-400 text-sm">System Users</p>
95
+ <p class="text-3xl font-bold">23</p>
96
+ </div>
97
+ <i data-feather="users" class="w-8 h-8 text-purple-400"></i>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Main Content Tabs -->
103
+ <div class="glass-effect rounded-xl p-6">
104
+ <div class="flex space-x-4 border-b border-gray-700 pb-4 mb-6">
105
+ <button class="tab-btn bg-primary text-white px-4 py-2 rounded-lg" data-tab="pending">Pending Reviews</button>
106
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="cases">All Cases</button>
107
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="users">User Management</button>
108
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="security">Security</button>
109
+ </div>
110
+
111
+ <!-- Pending Reviews Tab -->
112
+ <div id="pending-tab" class="tab-content">
113
+ <div class="space-y-4">
114
+ <!-- Sample Case Item -->
115
+ <div class="glass-effect rounded-lg p-4 flex justify-between items-center">
116
+ <div>
117
+ <h4 class="text-white font-semibold">Case #2024-001: Theft Investigation</h4>
118
+ <p class="text-gray-400 text-sm">Submitted by: Investigator Ahmed</p>
119
+ <p class="text-gray-400 text-sm">Date: 2024-01-15</p>
120
+ </div>
121
+ <div class="flex space-x-2">
122
+ <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2">
123
+ <i data-feather="eye" class="w-4 h-4"></i>
124
+ <span>Review</span>
125
+ </button>
126
+ <button class="bg-secondary hover:bg-red-700 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2">
127
+ <i data-feather="edit" class="w-4 h-4"></i>
128
+ <span>Edit</span>
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- All Cases Tab -->
136
+ <div id="cases-tab" class="tab-content hidden">
137
+ <div class="overflow-x-auto">
138
+ <table class="w-full text-white">
139
+ <thead>
140
+ <tr class="border-b border-gray-700">
141
+ <th class="text-left py-3 px-4">Case ID</th>
142
+ <th class="text-left py-3 px-4">Title</th>
143
+ <th class="text-left py-3 px-4">Investigator</th>
144
+ <th class="text-left py-3 px-4">Status</th>
145
+ <th class="text-left py-3 px-4">Actions</th>
146
+ </tr>
147
+ </thead>
148
+ <tbody>
149
+ <tr class="border-b border-gray-800">
150
+ <td class="py-3 px-4">2024-001</td>
151
+ <td class="py-3 px-4">Commercial Theft</td>
152
+ <td class="py-3 px-4">Ahmed Hassan</td>
153
+ <td class="py-3 px-4"><span class="bg-yellow-500 text-white px-2 py-1 rounded text-xs">Under Review</span></td>
154
+ <td class="py-3 px-4">
155
+ <div class="flex space-x-2">
156
+ <button class="text-blue-400 hover:text-blue-300">
157
+ <i data-feather="edit" class="w-4 h-4"></i>
158
+ </button>
159
+ <button class="text-red-400 hover:text-red-300">
160
+ <i data-feather="trash-2" class="w-4 h-4"></i>
161
+ </button>
162
+ </div>
163
+ </td>
164
+ </tr>
165
+ </tbody>
166
+ </table>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <script>
173
+ // Tab functionality
174
+ document.querySelectorAll('.tab-btn').forEach(button => {
175
+ button.addEventListener('click', () => {
176
+ // Remove active class from all buttons
177
+ document.querySelectorAll('.tab-btn').forEach(btn => {
178
+ btn.classList.remove('bg-primary', 'text-white');
179
+ btn.classList.add('text-gray-300');
180
+ });
181
+
182
+ // Add active class to clicked button
183
+ button.classList.add('bg-primary', 'text-white');
184
+ button.classList.remove('text-gray-300');
185
+
186
+ // Hide all tab contents
187
+ document.querySelectorAll('.tab-content').forEach(content => {
188
+ content.classList.add('hidden');
189
+ });
190
+
191
+ // Show selected tab content
192
+ const tabId = button.getAttribute('data-tab');
193
+ document.getElementById(tabId + '-tab').classList.remove('hidden');
194
+ });
195
+ });
196
+
197
+ // Initialize feather icons
198
+ feather.replace();
199
+ </script>
200
+ </body>
201
+ </html>
admin.html ADDED
@@ -0,0 +1,212 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Admin Center - EduSphere</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3b82f6',
18
+ secondary: '#8b5cf6',
19
+ accent: '#06b6d4'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-effect {
27
+ background: rgba(255, 255, 255, 0.1);
28
+ backdrop-filter: blur(10px);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ }
31
+ .dark .glass-effect {
32
+ background: rgba(0, 0, 0, 0.2);
33
+ backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.1);
35
+ }
36
+ .stat-card {
37
+ transition: all 0.3s ease;
38
+ }
39
+ .stat-card:hover {
40
+ transform: translateY(-5px);
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen transition-colors duration-300">
45
+ <!-- Theme Toggle -->
46
+ <div class="fixed top-4 right-4 z-50">
47
+ <button id="themeToggle" class="glass-effect rounded-full p-3 text-gray-600 dark:text-gray-300 hover:scale-110 transition-transform duration-300">
48
+ <i data-feather="moon" class="w-5 h-5"></i>
49
+ </button>
50
+ </div>
51
+
52
+ <!-- Navigation -->
53
+ <nav class="glass-effect border-b border-gray-200 dark:border-gray-700">
54
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
55
+ <div class="flex justify-between items-center py-4">
56
+ <div class="flex items-center space-x-4">
57
+ <a href="index.html" class="flex items-center space-x-3">
58
+ <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
59
+ <i data-feather="settings" class="text-white"></i>
60
+ </div>
61
+ <div>
62
+ <h1 class="text-white font-bold text-xl">Admin Center</h1>
63
+ <p class="text-gray-400 text-sm">Full system control and monitoring</p>
64
+ </div>
65
+ </a>
66
+ <div class="flex items-center space-x-4">
67
+ <span class="text-white">System Administrator</span>
68
+ <button class="text-gray-400 hover:text-white">
69
+ <i data-feather="log-out" class="w-5 h-5"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
77
+ <!-- System Overview -->
78
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
79
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
80
+ <div class="flex justify-between items-start">
81
+ <div>
82
+ <p class="text-gray-400 text-sm">Total Users</p>
83
+ <p class="text-3xl font-bold">1,247</p>
84
+ </div>
85
+ <i data-feather="users" class="w-8 h-8 text-primary"></i>
86
+ </div>
87
+ </div>
88
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
89
+ <div class="flex justify-between items-start">
90
+ <div>
91
+ <p class="text-gray-400 text-sm">Active Courses</p>
92
+ <p class="text-3xl font-bold">86</p>
93
+ </div>
94
+ <i data-feather="book-open" class="w-8 h-8 text-secondary"></i>
95
+ </div>
96
+ </div>
97
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
98
+ <div class="flex justify-between items-start">
99
+ <div>
100
+ <p class="text-gray-400 text-sm">System Health</p>
101
+ <p class="text-3xl font-bold">98%</p>
102
+ </div>
103
+ <i data-feather="database" class="w-8 h-8 text-accent"></i>
104
+ </div>
105
+ </div>
106
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
107
+ <div class="flex justify-between items-start">
108
+ <div>
109
+ <p class="text-gray-400 text-sm">Storage Used</p>
110
+ <p class="text-3xl font-bold">64%</p>
111
+ </div>
112
+ <i data-feather="hard-drive" class="w-8 h-8 text-green-400"></i>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Admin Tools -->
118
+ <div class="glass-effect rounded-xl p-6">
119
+ <div class="flex space-x-4 border-b border-gray-700 pb-4 mb-6">
120
+ <button class="tab-btn bg-primary text-white px-4 py-2 rounded-lg" data-tab="users">User Management</button>
121
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="courses">Course Management</button>
122
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="system">System Settings</button>
123
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="analytics">Analytics</button>
124
+ </div>
125
+
126
+ <!-- User Management Tab -->
127
+ <div id="users-tab" class="tab-content">
128
+ <div class="flex justify-between items-center mb-6">
129
+ <h3 class="text-2xl font-bold text-white">User Management</h3>
130
+ <button class="bg-green-500 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2">
131
+ <i data-feather="user-plus" class="w-4 h-4"></i>
132
+ <span>Add User</span>
133
+ </button>
134
+ </div>
135
+ <div class="overflow-x-auto">
136
+ <table class="w-full text-white">
137
+ <thead>
138
+ <tr class="border-b border-gray-700">
139
+ <th class="text-left py-3 px-4">User ID</th>
140
+ <th class="text-left py-3 px-4">Name</th>
141
+ <th class="text-left py-3 px-4">Role</th>
142
+ <th class="text-left py-3 px-4">Status</th>
143
+ <th class="text-left py-3 px-4">Actions</th>
144
+ </tr>
145
+ </thead>
146
+ <tbody>
147
+ <tr class="border-b border-gray-800">
148
+ <td class="py-3 px-4">U2024001</td>
149
+ <td class="py-3 px-4">Admin User</td>
150
+ <td class="py-3 px-4">Admin</td>
151
+ <td class="py-3 px-4"><span class="bg-green-500 text-white px-2 py-1 rounded text-xs">Active</span></td>
152
+ <td class="py-3 px-4">
153
+ <div class="flex space-x-2">
154
+ <button class="text-blue-400 hover:text-blue-300">
155
+ <i data-feather="edit" class="w-4 h-4"></i>
156
+ </button>
157
+ <button class="text-red-400 hover:text-red-300">
158
+ <i data-feather="trash-2" class="w-4 h-4"></i>
159
+ </button>
160
+ </div>
161
+ </td>
162
+ </tr>
163
+ </tbody>
164
+ </table>
165
+ </div>
166
+ </div>
167
+
168
+ <script>
169
+ // Theme Toggle
170
+ const themeToggle = document.getElementById('themeToggle');
171
+ const themeIcon = themeToggle.querySelector('i');
172
+
173
+ themeToggle.addEventListener('click', () => {
174
+ if (document.documentElement.classList.contains('dark')) {
175
+ document.documentElement.classList.remove('dark');
176
+ themeIcon.setAttribute('data-feather', 'moon');
177
+ } else {
178
+ document.documentElement.classList.add('dark');
179
+ themeIcon.setAttribute('data-feather', 'sun');
180
+ }
181
+ feather.replace();
182
+ });
183
+
184
+ // Tab functionality
185
+ document.querySelectorAll('.tab-btn').forEach(button => {
186
+ button.addEventListener('click', () => {
187
+ // Remove active class from all buttons
188
+ document.querySelectorAll('.tab-btn').forEach(btn => {
189
+ btn.classList.remove('bg-primary', 'text-white');
190
+ btn.classList.add('text-gray-300');
191
+ });
192
+
193
+ // Add active class to clicked button
194
+ button.classList.add('bg-primary', 'text-white');
195
+ button.classList.remove('text-gray-300');
196
+
197
+ // Hide all tab contents
198
+ document.querySelectorAll('.tab-content').forEach(content => {
199
+ content.classList.add('hidden');
200
+ });
201
+
202
+ // Show selected tab content
203
+ const tabId = button.getAttribute('data-tab');
204
+ document.getElementById(tabId + '-tab').classList.remove('hidden');
205
+ });
206
+ });
207
+
208
+ // Initialize feather icons
209
+ feather.replace();
210
+ </script>
211
+ </body>
212
+ </html>
index.html CHANGED
@@ -1,19 +1,221 @@
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>EduSphere: Learning Universe Portal 🌟</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3b82f6',
18
+ secondary: '#8b5cf6',
19
+ accent: '#06b6d4'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-effect {
27
+ background: rgba(255, 255, 255, 0.1);
28
+ backdrop-filter: blur(10px);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ }
31
+ .dark .glass-effect {
32
+ background: rgba(0, 0, 0, 0.2);
33
+ backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.1);
35
+ }
36
+ .floating-card {
37
+ animation: float 6s ease-in-out infinite;
38
+ }
39
+ @keyframes float {
40
+ 0%, 100% { transform: translateY(0px); }
41
+ 50% { transform: translateY(-20px); }
42
+ }
43
+ .gradient-text {
44
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
45
+ -webkit-background-clip: text;
46
+ -webkit-text-fill-color: transparent;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen transition-colors duration-300">
51
+ <!-- Theme Toggle -->
52
+ <div class="fixed top-4 right-4 z-50">
53
+ <button id="themeToggle" class="glass-effect rounded-full p-3 text-gray-600 dark:text-gray-300 hover:scale-110 transition-transform duration-300">
54
+ <i data-feather="moon" class="w-5 h-5"></i>
55
+ </div>
56
+
57
+ <!-- Navigation -->
58
+ <nav class="glass-effect border-b border-gray-200 dark:border-gray-700">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
+ <div class="flex justify-between items-center py-4">
61
+ <div class="flex items-center space-x-3">
62
+ <div class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center">
63
+ <i data-feather="book-open" class="text-white"></i>
64
+ </div>
65
+ <div>
66
+ <h1 class="text-2xl font-bold gradient-text">EduSphere</h1>
67
+ <p class="text-sm text-gray-600 dark:text-gray-400">Learning Universe Portal 🌟</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </nav>
73
+
74
+ <!-- Hero Section -->
75
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
76
+ <div class="text-center mb-16">
77
+ <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6">
78
+ Welcome to <span class="gradient-text">EduSphere</span>
79
+ </h1>
80
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
81
+ Your gateway to interactive learning, collaboration, and academic excellence.
82
+ Join our educational universe today!
83
+ </p>
84
+ </div>
85
+
86
+ <!-- Main Access Cards -->
87
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
88
+ <!-- Login Card -->
89
+ <div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
90
+ <div class="w-20 h-20 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center mb-6 mx-auto">
91
+ <i data-feather="log-in" class="w-10 h-10 text-white"></i>
92
+ </div>
93
+ <h3 class="text-2xl font-bold text-center mb-4">Login</h3>
94
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
95
+ Access your personalized learning dashboard
96
+ </p>
97
+ <a href="login.html" class="w-full bg-primary hover:bg-blue-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
98
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
99
+ <span>Enter Portal</span>
100
+ </a>
101
+ </div>
102
+
103
+ <!-- Sign Up Card -->
104
+ <div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
105
+ <div class="w-20 h-20 bg-gradient-to-r from-secondary to-accent rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 2s;">
106
+ <i data-feather="user-plus" class="w-10 h-10 text-white"></i>
107
+ </div>
108
+ <h3 class="text-2xl font-bold text-center mb-4">Sign Up</h3>
109
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
110
+ Join our educational community today
111
+ </p>
112
+ <a href="signup.html" class="w-full bg-secondary hover:bg-purple-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
113
+ <i data-feather="users" class="w-4 h-4"></i>
114
+ <span>Create Account</span>
115
+ </a>
116
+ </div>
117
+
118
+ <!-- Teacher Page Card -->
119
+ <div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
120
+ <div class="w-20 h-20 bg-gradient-to-r from-accent to-green-500 rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 4s;">
121
+ <i data-feather="award" class="w-10 h-10 text-white"></i>
122
+ </div>
123
+ <h3 class="text-2xl font-bold text-center mb-4">Teacher Portal</h3>
124
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
125
+ Manage classes, upload materials, and track progress
126
+ </p>
127
+ <a href="teacher.html" class="w-full bg-accent hover:bg-cyan-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
128
+ <i data-feather="book" class="w-4 h-4"></i>
129
+ <span>Educator Access</span>
130
+ </a>
131
+ </div>
132
+
133
+ <!-- Student Page Card -->
134
+ <div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
135
+ <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 1s;">
136
+ <i data-feather="graduation-cap" class="w-10 h-10 text-white"></i>
137
+ </div>
138
+ <h3 class="text-2xl font-bold text-center mb-4">Student Hub</h3>
139
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
140
+ Access courses, track progress, and submit assignments
141
+ </p>
142
+ <a href="student.html" class="w-full bg-green-500 hover:bg-green-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
143
+ <i data-feather="trending-up" class="w-4 h-4"></i>
144
+ <span>Learn & Grow</span>
145
+ </a>
146
+ </div>
147
+
148
+ <!-- Admin Dashboard Card -->
149
+ <div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
150
+ <div class="w-20 h-20 bg-gradient-to-r from-yellow-500 to-red-500 rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 3s;">
151
+ <i data-feather="settings" class="w-10 h-10 text-white"></i>
152
+ </div>
153
+ <h3 class="text-2xl font-bold text-center mb-4">Admin Center</h3>
154
+ <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
155
+ System management, user control, and analytics
156
+ </p>
157
+ <a href="admin.html" class="w-full bg-yellow-500 hover:bg-yellow-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
158
+ <i data-feather="shield" class="w-4 h-4"></i>
159
+ <span>System Control</span>
160
+ </a>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Features Overview -->
165
+ <div class="mt-20 glass-effect rounded-2xl p-8 max-w-4xl mx-auto">
166
+ <h2 class="text-3xl font-bold text-gray-900 dark:text-white text-center mb-8">Why Choose EduSphere?</h2>
167
+ <div class="grid md:grid-cols-2 gap-8">
168
+ <div class="flex items-start space-x-4">
169
+ <i data-feather="zap" class="w-6 h-6 text-primary mt-1"></i>
170
+ <div>
171
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Interactive Learning</h3>
172
+ <p class="text-gray-600 dark:text-gray-300">Engage with dynamic content and real-time collaboration tools</p>
173
+ </div>
174
+ </div>
175
+ <div class="flex items-start space-x-4">
176
+ <i data-feather="users" class="w-6 h-6 text-primary mt-1"></i>
177
+ <div>
178
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Community Driven</h3>
179
+ <p class="text-gray-600 dark:text-gray-300">Connect with peers and educators in a supportive environment</p>
180
+ </div>
181
+ </div>
182
+ <div class="flex items-start space-x-4">
183
+ <i data-feather="bar-chart-2" class="w-6 h-6 text-primary mt-1"></i>
184
+ <div>
185
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Progress Tracking</h3>
186
+ <p class="text-gray-600 dark:text-gray-300">Monitor your academic journey with detailed analytics</p>
187
+ </div>
188
+ </div>
189
+ <div class="flex items-start space-x-4">
190
+ <i data-feather="smartphone" class="w-6 h-6 text-primary mt-1"></i>
191
+ <div>
192
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Mobile Friendly</h3>
193
+ <p class="text-gray-600 dark:text-gray-300">Learn anytime, anywhere with our responsive design</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <script>
202
+ // Theme Toggle
203
+ const themeToggle = document.getElementById('themeToggle');
204
+ const themeIcon = themeToggle.querySelector('i');
205
+
206
+ themeToggle.addEventListener('click', () => {
207
+ if (document.documentElement.classList.contains('dark')) {
208
+ document.documentElement.classList.remove('dark');
209
+ themeIcon.setAttribute('data-feather', 'moon');
210
+ } else {
211
+ document.documentElement.classList.add('dark');
212
+ themeIcon.setAttribute('data-feather', 'sun');
213
+ }
214
+ feather.replace();
215
+ });
216
+
217
+ // Initialize feather icons
218
+ feather.replace();
219
+ </script>
220
+ </body>
221
+ </html>
investigator-dashboard.html ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Investigator Dashboard - ForensicFlow</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#1e40af',
17
+ secondary: '#dc2626'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .glass-effect {
25
+ background: rgba(255, 255, 255, 0.1);
26
+ backdrop-filter: blur(10px);
27
+ border: 1px solid rgba(255, 255, 255, 0.2);
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen">
32
+ <!-- Navigation -->
33
+ <nav class="bg-black/30 backdrop-blur-md border-b border-gray-700">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between items-center py-4">
36
+ <div class="flex items-center space-x-4">
37
+ <div class="w-10 h-10 bg-secondary rounded-lg flex items-center justify-center">
38
+ <i data-feather="search" class="text-white"></i>
39
+ </div>
40
+ <div>
41
+ <h1 class="text-white font-bold text-xl">Investigator Dashboard</h1>
42
+ <p class="text-gray-400 text-sm">Case Management & Evidence Submission</p>
43
+ </div>
44
+ </div>
45
+ <div class="flex items-center space-x-4">
46
+ <span class="text-white">Investigator: Ahmed Hassan</span>
47
+ <button class="text-gray-400 hover:text-white">
48
+ <i data-feather="log-out" class="w-5 h-5"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
56
+ <!-- Quick Actions -->
57
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
58
+ <button onclick="openNewCaseModal()" class="glass-effect rounded-xl p-6 text-white hover:bg-white/20 transition duration-300">
59
+ <div class="flex items-center space-x-3">
60
+ <i data-feather="plus" class="w-6 h-6 text-green-400"></i>
61
+ <div>
62
+ <h3 class="font-semibold">New Case</h3>
63
+ <p class="text-sm text-gray-400">Start new investigation</p>
64
+ </div>
65
+ </button>
66
+ <button class="glass-effect rounded-xl p-6 text-white hover:bg-white/20 transition duration-300">
67
+ <div class="flex items-center space-x-3">
68
+ <i data-feather="upload" class="w-6 h-6 text-blue-400"></i>
69
+ <div>
70
+ <h3 class="font-semibold">Upload Evidence</h3>
71
+ <p class="text-sm text-gray-400">Add files & documents</p>
72
+ </div>
73
+ </button>
74
+ <button class="glass-effect rounded-xl p-6 text-white hover:bg-white/20 transition duration-300">
75
+ <div class="flex items-center space-x-3">
76
+ <i data-feather="eye" class="w-6 h-6 text-purple-400"></i>
77
+ <div>
78
+ <h3 class="font-semibold">Case Status</h3>
79
+ <p class="text-sm text-gray-400">Track investigations</p>
80
+ </div>
81
+ </button>
82
+ </div>
83
+
84
+ <!-- My Cases Section -->
85
+ <div class="glass-effect rounded-xl p-6">
86
+ <h2 class="text-2xl font-bold text-white mb-6">My Active Cases</h2>
87
+ <div class="space-y-4">
88
+ <!-- Sample Case -->
89
+ <div class="glass-effect rounded-lg p-4 flex justify-between items-center">
90
+ <div>
91
+ <h4 class="text-white font-semibold">Case #2024-001: Commercial Theft</h4>
92
+ <div class="flex space-x-4 text-sm text-gray-400">
93
+ <span>Status: <span class="text-yellow-400">Under Review</span></span>
94
+ <span>Submitted: 2024-01-15</span>
95
+ </div>
96
+ <div class="flex space-x-2">
97
+ <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
98
+ View Details
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- New Case Modal -->
106
+ <div id="newCaseModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
107
+ <div class="glass-effect rounded-2xl p-8 max-w-2xl w-full mx-4">
108
+ <div class="flex justify-between items-center mb-6">
109
+ <h3 class="text-2xl font-bold text-white">Create New Case</h3>
110
+ <button onclick="closeNewCaseModal()" class="text-gray-400 hover:text-white">
111
+ <i data-feather="x" class="w-6 h-6"></i>
112
+ </button>
113
+ </div>
114
+ <form class="space-y-4">
115
+ <div class="grid md:grid-cols-2 gap-4">
116
+ <div>
117
+ <label class="block text-sm font-medium text-gray-300 mb-2">Case Title</label>
118
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
119
+ </div>
120
+ <div>
121
+ <label class="block text-sm font-medium text-gray-300 mb-2">Crime Date</label>
122
+ <input type="date" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
123
+ </div>
124
+ <div>
125
+ <label class="block text-sm font-medium text-gray-300 mb-2">Location</label>
126
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
127
+ </div>
128
+ <div>
129
+ <label class="block text-sm font-medium text-gray-300 mb-2">Suspect Name</label>
130
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
131
+ </div>
132
+ </div>
133
+ <div>
134
+ <label class="block text-sm font-medium text-gray-300 mb-2">Case Description</label>
135
+ <textarea rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary"></textarea>
136
+ </div>
137
+ <div>
138
+ <label class="block text-sm font-medium text-gray-300 mb-2">Evidence Files</label>
139
+ <input type="file" multiple class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
140
+ </div>
141
+ <div class="flex space-x-4">
142
+ <button type="submit" class="bg-primary hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition">
143
+ Submit Case
144
+ </button>
145
+ <button type="button" onclick="closeNewCaseModal()" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg transition">
146
+ Cancel
147
+ </button>
148
+ </div>
149
+ </form>
150
+ </div>
151
+ </div>
152
+
153
+ <script>
154
+ // Modal functions
155
+ function openNewCaseModal() {
156
+ document.getElementById('newCaseModal').classList.remove('hidden');
157
+ }
158
+
159
+ function closeNewCaseModal() {
160
+ document.getElementById('newCaseModal').classList.add('hidden');
161
+ }
162
+
163
+ // Initialize feather icons
164
+ feather.replace();
165
+ </script>
166
+ </body>
167
+ </html>
login.html ADDED
@@ -0,0 +1,133 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Login - EduSphere</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3b82f6',
18
+ secondary: '#8b5cf6',
19
+ accent: '#06b6d4'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-effect {
27
+ background: rgba(255, 255, 255, 0.1);
28
+ backdrop-filter: blur(10px);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ }
31
+ .dark .glass-effect {
32
+ background: rgba(0, 0, 0, 0.2);
33
+ backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.1);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen transition-colors duration-300">
39
+ <!-- Theme Toggle -->
40
+ <div class="fixed top-4 right-4 z-50">
41
+ <button id="themeToggle" class="glass-effect rounded-full p-3 text-gray-600 dark:text-gray-300 hover:scale-110 transition-transform duration-300">
42
+ <i data-feather="moon" class="w-5 h-5"></i>
43
+ </button>
44
+ </div>
45
+
46
+ <!-- Navigation -->
47
+ <nav class="glass-effect border-b border-gray-200 dark:border-gray-700">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
49
+ <div class="flex justify-between items-center py-4">
50
+ <div class="flex items-center space-x-3">
51
+ <a href="index.html" class="flex items-center space-x-3">
52
+ <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
53
+ <i data-feather="book-open" class="text-white"></i>
54
+ </div>
55
+ <span class="text-xl font-bold gradient-text">EduSphere</span>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Login Form -->
63
+ <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 py-16">
64
+ <div class="glass-effect rounded-2xl p-8">
65
+ <div class="text-center mb-8">
66
+ <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Welcome Back</h2>
67
+ <p class="text-gray-600 dark:text-gray-300">Sign in to your EduSphere account</p>
68
+ </div>
69
+ <form class="space-y-6">
70
+ <div>
71
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
72
+ <input type="email" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
73
+ </div>
74
+ <div>
75
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
76
+ <input type="password" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
77
+ </div>
78
+ <div>
79
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
80
+ <select class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
81
+ <option value="student">Student</option>
82
+ <option value="teacher">Teacher</option>
83
+ <option value="admin">Admin</option>
84
+ </select>
85
+ </div>
86
+ <button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white py-3 rounded-lg transition duration-300">
87
+ Sign In
88
+ </button>
89
+ </form>
90
+ <div class="text-center mt-6">
91
+ <p class="text-gray-600 dark:text-gray-300">
92
+ Don't have an account?
93
+ <a href="signup.html" class="text-secondary hover:text-purple-700 font-medium">
94
+ Create Account
95
+ </a>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <script>
101
+ // Theme Toggle
102
+ const themeToggle = document.getElementById('themeToggle');
103
+ const themeIcon = themeToggle.querySelector('i');
104
+
105
+ themeToggle.addEventListener('click', () => {
106
+ if (document.documentElement.classList.contains('dark')) {
107
+ document.documentElement.classList.remove('dark');
108
+ themeIcon.setAttribute('data-feather', 'moon');
109
+ } else {
110
+ document.documentElement.classList.add('dark');
111
+ themeIcon.setAttribute('data-feather', 'sun');
112
+ }
113
+ feather.replace();
114
+ });
115
+
116
+ // Form submission
117
+ document.querySelector('form').addEventListener('submit', function(e) {
118
+ e.preventDefault();
119
+ const role = document.querySelector('select').value;
120
+ if (role === 'teacher') {
121
+ window.location.href = 'teacher.html';
122
+ } else if (role === 'admin') {
123
+ window.location.href = 'admin.html';
124
+ } else {
125
+ window.location.href = 'student.html';
126
+ }
127
+ });
128
+
129
+ // Initialize feather icons
130
+ feather.replace();
131
+ </script>
132
+ </body>
133
+ </html>
signup.html ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Sign Up - EduSphere</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3b82f6',
18
+ secondary: '#8b5cf6',
19
+ accent: '#06b6d4'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-effect {
27
+ background: rgba(255, 255, 255, 0.1);
28
+ backdrop-filter: blur(10px);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ }
31
+ .dark .glass-effect {
32
+ background: rgba(0, 0, 0, 0.2);
33
+ backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.1);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen transition-colors duration-300">
39
+ <!-- Theme Toggle -->
40
+ <div class="fixed top-4 right-4 z-50">
41
+ <button id="themeToggle" class="glass-effect rounded-full p-3 text-gray-600 dark:text-gray-300 hover:scale-110 transition-transform duration-300">
42
+ <i data-feather="moon" class="w-5 h-5"></i>
43
+ </button>
44
+ </div>
45
+
46
+ <!-- Navigation -->
47
+ <nav class="glass-effect border-b border-gray-200 dark:border-gray-700">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
49
+ <div class="flex justify-between items-center py-4">
50
+ <div class="flex items-center space-x-3">
51
+ <a href="index.html" class="flex items-center space-x-3">
52
+ <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
53
+ <i data-feather="book-open" class="text-white"></i>
54
+ </div>
55
+ <span class="text-xl font-bold gradient-text">EduSphere</span>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Sign Up Form -->
63
+ <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
64
+ <div class="glass-effect rounded-2xl p-8">
65
+ <div class="text-center mb-8">
66
+ <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Join EduSphere</h2>
67
+ <p class="text-gray-600 dark:text-gray-300">Create your account and start learning today</p>
68
+ </div>
69
+ <form class="space-y-6">
70
+ <div class="grid md:grid-cols-2 gap-6">
71
+ <div>
72
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
73
+ <input type="text" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
74
+ </div>
75
+ <div>
76
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
77
+ <input type="email" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
78
+ </div>
79
+ <div>
80
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
81
+ <input type="password" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
82
+ </div>
83
+ <div>
84
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
85
+ <input type="password" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
86
+ </div>
87
+ <div class="md:col-span-2">
88
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
89
+ <select class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
90
+ <option value="student">Student</option>
91
+ <option value="teacher">Teacher</option>
92
+ </select>
93
+ </div>
94
+ <div class="md:col-span-2">
95
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Institution/Organization</label>
96
+ <input type="text" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
97
+ </div>
98
+ <div class="md:col-span-2">
99
+ <button type="submit" class="w-full bg-secondary hover:bg-purple-700 text-white py-3 rounded-lg transition duration-300">
100
+ Create Account
101
+ </button>
102
+ </div>
103
+ </form>
104
+ <div class="text-center mt-6">
105
+ <p class="text-gray-600 dark:text-gray-300">
106
+ Already have an account?
107
+ <a href="login.html" class="text-primary hover:text-blue-700 font-medium">
108
+ Sign In
109
+ </a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <script>
115
+ // Theme Toggle
116
+ const themeToggle = document.getElementById('themeToggle');
117
+ const themeIcon = themeToggle.querySelector('i');
118
+
119
+ themeToggle.addEventListener('click', () => {
120
+ if (document.documentElement.classList.contains('dark')) {
121
+ document.documentElement.classList.remove('dark');
122
+ themeIcon.setAttribute('data-feather', 'moon');
123
+ } else {
124
+ document.documentElement.classList.add('dark');
125
+ themeIcon.setAttribute('data-feather', 'sun');
126
+ }
127
+ feather.replace();
128
+ });
129
+
130
+ // Form submission
131
+ document.querySelector('form').addEventListener('submit', function(e) {
132
+ e.preventDefault();
133
+ const role = document.querySelector('select').value;
134
+ if (role === 'teacher') {
135
+ window.location.href = 'teacher.html';
136
+ } else {
137
+ window.location.href = 'student.html';
138
+ }
139
+ });
140
+
141
+ // Initialize feather icons
142
+ feather.replace();
143
+ </script>
144
+ </body>
145
+ </html>
student.html ADDED
@@ -0,0 +1,189 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Student Hub - EduSphere</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3b82f6',
18
+ secondary: '#8b5cf6',
19
+ accent: '#06b6d4'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-effect {
27
+ background: rgba(255, 255, 255, 0.1);
28
+ backdrop-filter: blur(10px);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ }
31
+ .dark .glass-effect {
32
+ background: rgba(0, 0, 0, 0.2);
33
+ backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.1);
35
+ }
36
+ .progress-ring {
37
+ transition: stroke-dashoffset 0.35s;
38
+ transform: rotate(-90deg);
39
+ transform-origin: 50% 50%;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen transition-colors duration-300">
44
+ <!-- Theme Toggle -->
45
+ <div class="fixed top-4 right-4 z-50">
46
+ <button id="themeToggle" class="glass-effect rounded-full p-3 text-gray-600 dark:text-gray-300 hover:scale-110 transition-transform duration-300">
47
+ <i data-feather="moon" class="w-5 h-5"></i>
48
+ </button>
49
+ </div>
50
+
51
+ <!-- Navigation -->
52
+ <nav class="glass-effect border-b border-gray-200 dark:border-gray-700">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
54
+ <div class="flex justify-between items-center py-4">
55
+ <div class="flex items-center space-x-4">
56
+ <a href="index.html" class="flex items-center space-x-3">
57
+ <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
58
+ <i data-feather="graduation-cap" class="text-white"></i>
59
+ </div>
60
+ <div>
61
+ <h1 class="text-white font-bold text-xl">Student Hub</h1>
62
+ <p class="text-gray-400 text-sm">Track your progress and access learning materials</p>
63
+ </div>
64
+ </a>
65
+ <div class="flex items-center space-x-4">
66
+ <span class="text-white">Ahmed Hassan</span>
67
+ <button class="text-gray-400 hover:text-white">
68
+ <i data-feather="log-out" class="w-5 h-5"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
76
+ <!-- Student Overview -->
77
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
78
+ <div class="glass-effect rounded-xl p-6 text-white">
79
+ <div class="text-center">
80
+ <div class="relative w-20 h-20 mx-auto mb-4">
81
+ <svg class="w-20 h-20">
82
+ <circle class="text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="36" cx="40" cy="40"></circle>
83
+ <circle class="progress-ring text-green-400" stroke-width="8" stroke-dasharray="226.1946710584651" stroke-dashoffset="0" stroke="currentColor" fill="transparent" r="36" cx="40" cy="40" stroke-linecap="round"></circle>
84
+ </svg>
85
+ <div class="absolute inset-0 flex items-center justify-center">
86
+ <span class="text-white font-bold">87%</span>
87
+ </div>
88
+ </div>
89
+ <p class="text-gray-300">Overall Progress</p>
90
+ </div>
91
+ </div>
92
+ <div class="glass-effect rounded-xl p-6 text-white">
93
+ <div class="text-center">
94
+ <div class="text-3xl font-bold mb-2">94%</p>
95
+ <p class="text-gray-300">Attendance Rate</p>
96
+ </div>
97
+ </div>
98
+ <div class="glass-effect rounded-xl p-6 text-white">
99
+ <div class="text-center">
100
+ <i data-feather="award" class="w-8 h-8 text-yellow-400 mx-auto mb-2"></i>
101
+ <p class="text-3xl font-bold">A</p>
102
+ <p class="text-gray-300">Current Grade</p>
103
+ </div>
104
+ </div>
105
+ <div class="glass-effect rounded-xl p-6 text-white">
106
+ <div class="text-center">
107
+ <i data-feather="file-text" class="w-8 h-8 text-blue-400 mx-auto mb-2"></i>
108
+ <p class="text-3xl font-bold">12</p>
109
+ <p class="text-gray-300">Completed Courses</p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Student Dashboard -->
115
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
116
+ <!-- Attendance Section -->
117
+ <div class="glass-effect rounded-xl p-6">
118
+ <h3 class="text-xl font-bold text-white mb-4">Attendance Overview</h3>
119
+ <div class="space-y-4">
120
+ <div class="flex justify-between items-center">
121
+ <span class="text-gray-300">Mathematics</span>
122
+ <span class="text-green-400">96%</span>
123
+ </div>
124
+ <div class="flex justify-between items-center">
125
+ <span class="text-gray-300">Science</span>
126
+ <span class="text-green-400">92%</span>
127
+ </div>
128
+ <div class="flex justify-between items-center">
129
+ <span class="text-gray-300">English</span>
130
+ <span class="text-yellow-400">88%</span>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Grades Section -->
136
+ <div class="glass-effect rounded-xl p-6">
137
+ <h3 class="text-xl font-bold text-white mb-4">Current Grades</h4>
138
+ <div class="space-y-3">
139
+ <div>
140
+ <div class="flex justify-between mb-1">
141
+ <span class="text-gray-300">History</span>
142
+ <span class="text-green-400">A</span>
143
+ </div>
144
+ <div>
145
+ <span class="text-gray-300">Physics</span>
146
+ <span class="text-green-400">A-</span>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Materials Section -->
153
+ <div class="glass-effect rounded-xl p-6">
154
+ <h3 class="text-xl font-bold text-white mb-4">Learning Materials</h4>
155
+ <div class="space-y-3">
156
+ <div class="flex items-center space-x-3">
157
+ <i data-feather="download" class="w-4 h-4 text-gray-400"></i>
158
+ <div>
159
+ <h4 class="text-white font-semibold">Mathematics Notes</h4>
160
+ <p class="text-gray-400 text-sm">Prof. Johnson • Updated today</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <script>
170
+ // Theme Toggle
171
+ const themeToggle = document.getElementById('themeToggle');
172
+ const themeIcon = themeToggle.querySelector('i');
173
+
174
+ themeToggle.addEventListener('click', () => {
175
+ if (document.documentElement.classList.contains('dark')) {
176
+ document.documentElement.classList.remove('dark');
177
+ themeIcon.setAttribute('data-feather', 'moon');
178
+ } else {
179
+ document.documentElement.classList.add('dark');
180
+ themeIcon.setAttribute('data-feather', 'sun');
181
+ }
182
+ feather.replace();
183
+ });
184
+
185
+ // Initialize feather icons
186
+ feather.replace();
187
+ </script>
188
+ </body>
189
+ </html>
teacher.html ADDED
@@ -0,0 +1,235 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Teacher Portal - EduSphere</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3b82f6',
18
+ secondary: '#8b5cf6',
19
+ accent: '#06b6d4'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-effect {
27
+ background: rgba(255, 255, 255, 0.1);
28
+ backdrop-filter: blur(10px);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ }
31
+ .dark .glass-effect {
32
+ background: rgba(0, 0, 0, 0.2);
33
+ backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.1);
35
+ }
36
+ .stat-card {
37
+ transition: all 0.3s ease;
38
+ }
39
+ .stat-card:hover {
40
+ transform: translateY(-5px);
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen transition-colors duration-300">
45
+ <!-- Theme Toggle -->
46
+ <div class="fixed top-4 right-4 z-50">
47
+ <button id="themeToggle" class="glass-effect rounded-full p-3 text-gray-600 dark:text-gray-300 hover:scale-110 transition-transform duration-300">
48
+ <i data-feather="moon" class="w-5 h-5"></i>
49
+ </button>
50
+ </div>
51
+
52
+ <!-- Navigation -->
53
+ <nav class="glass-effect border-b border-gray-200 dark:border-gray-700">
54
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
55
+ <div class="flex justify-between items-center py-4">
56
+ <div class="flex items-center space-x-4">
57
+ <a href="index.html" class="flex items-center space-x-3">
58
+ <div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
59
+ <i data-feather="award" class="text-white"></i>
60
+ </div>
61
+ <div>
62
+ <h1 class="text-white font-bold text-xl">Teacher Portal</h1>
63
+ <p class="text-gray-400 text-sm">Manage classes, materials, and student progress</p>
64
+ </div>
65
+ </a>
66
+ <div class="flex items-center space-x-4">
67
+ <span class="text-white">Prof. Sarah Johnson</span>
68
+ <button class="text-gray-400 hover:text-white">
69
+ <i data-feather="log-out" class="w-5 h-5"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
77
+ <!-- Teacher Stats -->
78
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
79
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
80
+ <div class="flex justify-between items-start">
81
+ <div>
82
+ <p class="text-gray-400 text-sm">Active Students</p>
83
+ <p class="text-3xl font-bold">42</p>
84
+ </div>
85
+ <i data-feather="users" class="w-8 h-8 text-primary"></i>
86
+ </div>
87
+ </div>
88
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
89
+ <div class="flex justify-between items-start">
90
+ <div>
91
+ <p class="text-gray-400 text-sm">Pending Exams</p>
92
+ <p class="text-3xl font-bold">8</p>
93
+ </div>
94
+ <i data-feather="file-text" class="w-8 h-8 text-secondary"></i>
95
+ </div>
96
+ </div>
97
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
98
+ <div class="flex justify-between items-start">
99
+ <div>
100
+ <p class="text-gray-400 text-sm">Materials Uploaded</p>
101
+ <p class="text-3xl font-bold">23</p>
102
+ </div>
103
+ <i data-feather="book" class="w-8 h-8 text-accent"></i>
104
+ </div>
105
+ </div>
106
+ <div class="stat-card glass-effect rounded-xl p-6 text-white">
107
+ <div class="flex justify-between items-start">
108
+ <div>
109
+ <p class="text-gray-400 text-sm">Avg. Attendance</p>
110
+ <p class="text-3xl font-bold">94%</p>
111
+ </div>
112
+ <i data-feather="bar-chart-2" class="w-8 h-8 text-green-400"></i>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Main Teacher Tools -->
118
+ <div class="glass-effect rounded-xl p-6">
119
+ <div class="flex space-x-4 border-b border-gray-700 pb-4 mb-6">
120
+ <button class="tab-btn bg-primary text-white px-4 py-2 rounded-lg" data-tab="students">Student Management</button>
121
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="materials">Teaching Materials</button>
122
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="exams">Exams & Assessments</button>
123
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="attendance">Attendance</button>
124
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="grades">Grade Management</button>
125
+ <button class="tab-btn text-gray-300 hover:text-white px-4 py-2 rounded-lg transition" data-tab="analytics">Analytics</button>
126
+ </div>
127
+
128
+ <!-- Student Management Tab -->
129
+ <div id="students-tab" class="tab-content">
130
+ <div class="flex justify-between items-center mb-6">
131
+ <h3 class="text-2xl font-bold text-white">Student Management</h3>
132
+ <div class="flex space-x-4">
133
+ <button class="bg-green-500 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2">
134
+ <i data-feather="user-plus" class="w-4 h-4"></i>
135
+ <span>Add Student</span>
136
+ </button>
137
+ </div>
138
+ <div class="overflow-x-auto">
139
+ <table class="w-full text-white">
140
+ <thead>
141
+ <tr class="border-b border-gray-700">
142
+ <th class="text-left py-3 px-4">Student ID</th>
143
+ <th class="text-left py-3 px-4">Name</th>
144
+ <th class="text-left py-3 px-4">Email</th>
145
+ <th class="text-left py-3 px-4">Actions</th>
146
+ </tr>
147
+ </thead>
148
+ <tbody>
149
+ <tr class="border-b border-gray-800">
150
+ <td class="py-3 px-4">S2024001</td>
151
+ <td class="py-3 px-4">Ahmed Hassan</td>
152
+ <td class="py-3 px-4">ahmed.hassan@edusphere.edu</td>
153
+ <td class="py-3 px-4">
154
+ <div class="flex space-x-2">
155
+ <button class="text-blue-400 hover:text-blue-300">
156
+ <i data-feather="edit" class="w-4 h-4"></i>
157
+ </button>
158
+ <button class="text-red-400 hover:text-red-300">
159
+ <i data-feather="trash-2" class="w-4 h-4"></i>
160
+ </button>
161
+ </div>
162
+ </td>
163
+ </tr>
164
+ </tbody>
165
+ </table>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Teaching Materials Tab -->
170
+ <div id="materials-tab" class="tab-content hidden">
171
+ <div class="flex justify-between items-center mb-6">
172
+ <h3 class="text-2xl font-bold text-white">Teaching Materials</h3>
173
+ <div class="flex space-x-4">
174
+ <button class="bg-secondary hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2">
175
+ <i data-feather="upload" class="w-4 h-4"></i>
176
+ <span>Upload Material</span>
177
+ </button>
178
+ </div>
179
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
180
+ <div class="glass-effect rounded-lg p-4">
181
+ <div class="flex items-center space-x-3">
182
+ <i data-feather="file-text" class="w-6 h-6 text-gray-400"></i>
183
+ <div>
184
+ <h4 class="text-white font-semibold">Mathematics Notes</h4>
185
+ <p class="text-gray-400 text-sm">PDF • 2.4 MB</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <script>
192
+ // Theme Toggle
193
+ const themeToggle = document.getElementById('themeToggle');
194
+ const themeIcon = themeToggle.querySelector('i');
195
+
196
+ themeToggle.addEventListener('click', () => {
197
+ if (document.documentElement.classList.contains('dark')) {
198
+ document.documentElement.classList.remove('dark');
199
+ themeIcon.setAttribute('data-feather', 'moon');
200
+ } else {
201
+ document.documentElement.classList.add('dark');
202
+ themeIcon.setAttribute('data-feather', 'sun');
203
+ }
204
+ feather.replace();
205
+ });
206
+
207
+ // Tab functionality
208
+ document.querySelectorAll('.tab-btn').forEach(button => {
209
+ button.addEventListener('click', () => {
210
+ // Remove active class from all buttons
211
+ document.querySelectorAll('.tab-btn').forEach(btn => {
212
+ btn.classList.remove('bg-primary', 'text-white');
213
+ btn.classList.add('text-gray-300');
214
+ });
215
+
216
+ // Add active class to clicked button
217
+ button.classList.add('bg-primary', 'text-white');
218
+ button.classList.remove('text-gray-300');
219
+
220
+ // Hide all tab contents
221
+ document.querySelectorAll('.tab-content').forEach(content => {
222
+ content.classList.add('hidden');
223
+ });
224
+
225
+ // Show selected tab content
226
+ const tabId = button.getAttribute('data-tab');
227
+ document.getElementById(tabId + '-tab').classList.remove('hidden');
228
+ });
229
+ });
230
+
231
+ // Initialize feather icons
232
+ feather.replace();
233
+ </script>
234
+ </body>
235
+ </html>