Hugging Face's logo

Spaces:
galipalli
/
test4ai
Running

App Files Community
galipalli commited on
Commit
f40e583
·
verified ·
1 Parent(s): 15d2d37

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1146 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test4ai
3
- emoji: 📊
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test4ai
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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,1146 @@
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>ExamPro - Online Examination Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom styles that can't be easily done with Tailwind */
11
+ .question-editor {
12
+ min-height: 150px;
13
+ border: 1px solid #e2e8f0;
14
+ padding: 1rem;
15
+ border-radius: 0.375rem;
16
+ }
17
+
18
+ .exam-card:hover {
19
+ transform: translateY(-2px);
20
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
21
+ }
22
+
23
+ .tab-content {
24
+ display: none;
25
+ }
26
+
27
+ .tab-content.active {
28
+ display: block;
29
+ }
30
+
31
+ /* Animation for notifications */
32
+ @keyframes slideIn {
33
+ from { transform: translateX(100%); }
34
+ to { transform: translateX(0); }
35
+ }
36
+
37
+ .notification {
38
+ animation: slideIn 0.3s ease-out;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50 font-sans">
43
+ <!-- Navigation -->
44
+ <nav class="bg-indigo-700 text-white shadow-lg">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16 items-center">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <i class="fas fa-graduation-cap text-2xl mr-2"></i>
50
+ <span class="text-xl font-bold">ExamPro</span>
51
+ </div>
52
+ </div>
53
+ <div class="hidden md:block">
54
+ <div class="ml-10 flex items-center space-x-4">
55
+ <a href="#" id="home-link" class="bg-indigo-800 text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
56
+ <a href="#" id="exams-link" class="text-indigo-200 hover:bg-indigo-600 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Exams</a>
57
+ <a href="#" id="results-link" class="text-indigo-200 hover:bg-indigo-600 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Results</a>
58
+ <a href="#" id="profile-link" class="text-indigo-200 hover:bg-indigo-600 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Profile</a>
59
+ </div>
60
+ </div>
61
+ <div class="flex items-center">
62
+ <button id="login-btn" class="bg-white text-indigo-700 px-4 py-1 rounded-md text-sm font-medium mr-2">Login</button>
63
+ <button id="register-btn" class="bg-indigo-500 text-white px-4 py-1 rounded-md text-sm font-medium">Register</button>
64
+ <div id="user-dropdown" class="hidden ml-3 relative">
65
+ <div>
66
+ <button class="flex items-center text-sm text-white focus:outline-none" id="user-menu-button">
67
+ <span class="mr-2">John Doe</span>
68
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
69
+ </button>
70
+ </div>
71
+ <div id="dropdown-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
72
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
73
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
74
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ <div class="-mr-2 flex md:hidden">
79
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-indigo-200 hover:text-white hover:bg-indigo-600 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
80
+ <span class="sr-only">Open main menu</span>
81
+ <i class="fas fa-bars"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Main Content -->
89
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
90
+ <!-- Login Modal -->
91
+ <div id="login-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
92
+ <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
93
+ <div class="flex justify-between items-center mb-4">
94
+ <h3 class="text-lg font-medium text-gray-900">Login to ExamPro</h3>
95
+ <button id="close-login-modal" class="text-gray-400 hover:text-gray-500">
96
+ <i class="fas fa-times"></i>
97
+ </button>
98
+ </div>
99
+ <form class="space-y-6">
100
+ <div>
101
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
102
+ <div class="mt-1">
103
+ <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
104
+ </div>
105
+ </div>
106
+
107
+ <div>
108
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
109
+ <div class="mt-1">
110
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
111
+ </div>
112
+ </div>
113
+
114
+ <div class="flex items-center justify-between">
115
+ <div class="flex items-center">
116
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
117
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
118
+ </div>
119
+
120
+ <div class="text-sm">
121
+ <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Forgot your password?</a>
122
+ </div>
123
+ </div>
124
+
125
+ <div>
126
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Sign in</button>
127
+ </div>
128
+ </form>
129
+ <div class="mt-4 text-center text-sm">
130
+ <p>Don't have an account? <a href="#" id="switch-to-register" class="text-indigo-600 hover:text-indigo-500">Register here</a></p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Register Modal -->
136
+ <div id="register-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
137
+ <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
138
+ <div class="flex justify-between items-center mb-4">
139
+ <h3 class="text-lg font-medium text-gray-900">Create an Account</h3>
140
+ <button id="close-register-modal" class="text-gray-400 hover:text-gray-500">
141
+ <i class="fas fa-times"></i>
142
+ </button>
143
+ </div>
144
+ <form class="space-y-6">
145
+ <div>
146
+ <label for="full-name" class="block text-sm font-medium text-gray-700">Full Name</label>
147
+ <div class="mt-1">
148
+ <input id="full-name" name="full-name" type="text" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
149
+ </div>
150
+ </div>
151
+
152
+ <div>
153
+ <label for="register-email" class="block text-sm font-medium text-gray-700">Email address</label>
154
+ <div class="mt-1">
155
+ <input id="register-email" name="register-email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
156
+ </div>
157
+ </div>
158
+
159
+ <div>
160
+ <label for="register-password" class="block text-sm font-medium text-gray-700">Password</label>
161
+ <div class="mt-1">
162
+ <input id="register-password" name="register-password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
163
+ </div>
164
+ </div>
165
+
166
+ <div>
167
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirm Password</label>
168
+ <div class="mt-1">
169
+ <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
170
+ </div>
171
+ </div>
172
+
173
+ <div>
174
+ <label class="block text-sm font-medium text-gray-700">Account Type</label>
175
+ <div class="mt-1 flex space-x-4">
176
+ <div class="flex items-center">
177
+ <input id="student-role" name="role" type="radio" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
178
+ <label for="student-role" class="ml-2 block text-sm text-gray-900">Student</label>
179
+ </div>
180
+ <div class="flex items-center">
181
+ <input id="teacher-role" name="role" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
182
+ <label for="teacher-role" class="ml-2 block text-sm text-gray-900">Teacher</label>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div>
188
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Register</button>
189
+ </div>
190
+ </form>
191
+ <div class="mt-4 text-center text-sm">
192
+ <p>Already have an account? <a href="#" id="switch-to-login" class="text-indigo-600 hover:text-indigo-500">Login here</a></p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Notification Area -->
198
+ <div id="notification-area" class="fixed top-4 right-4 z-50 space-y-2"></div>
199
+
200
+ <!-- Dashboard Content -->
201
+ <div id="home-content" class="tab-content active">
202
+ <div class="bg-white shadow rounded-lg p-6 mb-8">
203
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Welcome to ExamPro</h2>
204
+ <p class="text-gray-600 mb-6">Your complete online examination platform for students and teachers. Create, manage, and take exams with ease.</p>
205
+
206
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
207
+ <div class="bg-indigo-50 p-6 rounded-lg">
208
+ <div class="flex items-center mb-4">
209
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
210
+ <i class="fas fa-book text-indigo-600 text-xl"></i>
211
+ </div>
212
+ <h3 class="text-lg font-semibold text-gray-800">For Students</h3>
213
+ </div>
214
+ <p class="text-gray-600">Take exams anytime, anywhere. Get instant results and detailed feedback on your performance.</p>
215
+ </div>
216
+
217
+ <div class="bg-purple-50 p-6 rounded-lg">
218
+ <div class="flex items-center mb-4">
219
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
220
+ <i class="fas fa-chalkboard-teacher text-purple-600 text-xl"></i>
221
+ </div>
222
+ <h3 class="text-lg font-semibold text-gray-800">For Teachers</h3>
223
+ </div>
224
+ <p class="text-gray-600">Create comprehensive exams with various question types. Monitor student progress and performance.</p>
225
+ </div>
226
+
227
+ <div class="bg-green-50 p-6 rounded-lg">
228
+ <div class="flex items-center mb-4">
229
+ <div class="bg-green-100 p-3 rounded-full mr-4">
230
+ <i class="fas fa-chart-line text-green-600 text-xl"></i>
231
+ </div>
232
+ <h3 class="text-lg font-semibold text-gray-800">Analytics</h3>
233
+ </div>
234
+ <p class="text-gray-600">Get detailed analytics on exam performance, question difficulty, and student progress.</p>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="bg-white shadow rounded-lg p-6">
240
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Upcoming Exams</h2>
241
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
242
+ <div class="border border-gray-200 rounded-lg p-4 exam-card transition duration-300">
243
+ <div class="flex justify-between items-start mb-2">
244
+ <h3 class="font-semibold text-lg text-gray-800">Mathematics Midterm</h3>
245
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Upcoming</span>
246
+ </div>
247
+ <p class="text-gray-600 text-sm mb-3">Algebra and Geometry concepts</p>
248
+ <div class="flex items-center text-sm text-gray-500 mb-3">
249
+ <i class="far fa-calendar-alt mr-2"></i>
250
+ <span>Due: May 15, 2023</span>
251
+ </div>
252
+ <div class="flex items-center text-sm text-gray-500">
253
+ <i class="far fa-clock mr-2"></i>
254
+ <span>Duration: 60 minutes</span>
255
+ </div>
256
+ <button class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700 transition duration-300">View Details</button>
257
+ </div>
258
+
259
+ <div class="border border-gray-200 rounded-lg p-4 exam-card transition duration-300">
260
+ <div class="flex justify-between items-start mb-2">
261
+ <h3 class="font-semibold text-lg text-gray-800">History Final</h3>
262
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Upcoming</span>
263
+ </div>
264
+ <p class="text-gray-600 text-sm mb-3">World History from 1900-2000</p>
265
+ <div class="flex items-center text-sm text-gray-500 mb-3">
266
+ <i class="far fa-calendar-alt mr-2"></i>
267
+ <span>Due: June 5, 2023</span>
268
+ </div>
269
+ <div class="flex items-center text-sm text-gray-500">
270
+ <i class="far fa-clock mr-2"></i>
271
+ <span>Duration: 90 minutes</span>
272
+ </div>
273
+ <button class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700 transition duration-300">View Details</button>
274
+ </div>
275
+
276
+ <div class="border border-gray-200 rounded-lg p-4 exam-card transition duration-300">
277
+ <div class="flex justify-between items-start mb-2">
278
+ <h3 class="font-semibold text-lg text-gray-800">Science Quiz</h3>
279
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Available</span>
280
+ </div>
281
+ <p class="text-gray-600 text-sm mb-3">Basic Chemistry and Physics</p>
282
+ <div class="flex items-center text-sm text-gray-500 mb-3">
283
+ <i class="far fa-calendar-alt mr-2"></i>
284
+ <span>Due: May 10, 2023</span>
285
+ </div>
286
+ <div class="flex items-center text-sm text-gray-500">
287
+ <i class="far fa-clock mr-2"></i>
288
+ <span>Duration: 30 minutes</span>
289
+ </div>
290
+ <button class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700 transition duration-300">Start Exam</button>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Exams Content -->
297
+ <div id="exams-content" class="tab-content">
298
+ <div class="bg-white shadow rounded-lg p-6 mb-8">
299
+ <div class="flex justify-between items-center mb-6">
300
+ <h2 class="text-2xl font-bold text-gray-800">Available Exams</h2>
301
+ <div class="flex space-x-2">
302
+ <button id="create-exam-btn" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700 hidden">Create Exam</button>
303
+ <div class="relative">
304
+ <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
305
+ <option>All Subjects</option>
306
+ <option>Mathematics</option>
307
+ <option>Science</option>
308
+ <option>History</option>
309
+ <option>Literature</option>
310
+ </select>
311
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
312
+ <i class="fas fa-chevron-down text-xs"></i>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="overflow-x-auto">
319
+ <table class="min-w-full divide-y divide-gray-200">
320
+ <thead class="bg-gray-50">
321
+ <tr>
322
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exam Title</th>
323
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
324
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th>
325
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
326
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
327
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
328
+ </tr>
329
+ </thead>
330
+ <tbody class="bg-white divide-y divide-gray-200">
331
+ <tr>
332
+ <td class="px-6 py-4 whitespace-nowrap">
333
+ <div class="font-medium text-gray-900">Mathematics Midterm</div>
334
+ <div class="text-sm text-gray-500">Algebra and Geometry</div>
335
+ </td>
336
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mathematics</td>
337
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
338
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">60 min</td>
339
+ <td class="px-6 py-4 whitespace-nowrap">
340
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Upcoming</span>
341
+ </td>
342
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
343
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
344
+ <button class="text-green-600 hover:text-green-900">Start</button>
345
+ </td>
346
+ </tr>
347
+ <tr>
348
+ <td class="px-6 py-4 whitespace-nowrap">
349
+ <div class="font-medium text-gray-900">Science Quiz</div>
350
+ <div class="text-sm text-gray-500">Basic Chemistry</div>
351
+ </td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Science</td>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 10, 2023</td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 min</td>
355
+ <td class="px-6 py-4 whitespace-nowrap">
356
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Available</span>
357
+ </td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
359
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
360
+ <button class="text-green-600 hover:text-green-900">Start</button>
361
+ </td>
362
+ </tr>
363
+ <tr>
364
+ <td class="px-6 py-4 whitespace-nowrap">
365
+ <div class="font-medium text-gray-900">History Final</div>
366
+ <div class="text-sm text-gray-500">World History 1900-2000</div>
367
+ </td>
368
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">History</td>
369
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 5, 2023</td>
370
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90 min</td>
371
+ <td class="px-6 py-4 whitespace-nowrap">
372
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Upcoming</span>
373
+ </td>
374
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
375
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
376
+ <button class="text-green-600 hover:text-green-900">Start</button>
377
+ </td>
378
+ </tr>
379
+ </tbody>
380
+ </table>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Results Content -->
386
+ <div id="results-content" class="tab-content">
387
+ <div class="bg-white shadow rounded-lg p-6">
388
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Exam Results</h2>
389
+
390
+ <div class="mb-6">
391
+ <div class="flex items-center justify-between mb-4">
392
+ <h3 class="text-lg font-semibold text-gray-800">Completed Exams</h3>
393
+ <div class="relative">
394
+ <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
395
+ <option>All Subjects</option>
396
+ <option>Mathematics</option>
397
+ <option>Science</option>
398
+ <option>History</option>
399
+ </select>
400
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
401
+ <i class="fas fa-chevron-down text-xs"></i>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
407
+ <div class="border border-gray-200 rounded-lg p-4">
408
+ <div class="flex justify-between items-start mb-2">
409
+ <h4 class="font-semibold text-gray-800">Science Midterm</h4>
410
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Completed</span>
411
+ </div>
412
+ <p class="text-gray-600 text-sm mb-3">Basic Physics and Chemistry</p>
413
+ <div class="flex justify-between items-center mb-2">
414
+ <span class="text-sm text-gray-500">Score</span>
415
+ <span class="font-semibold">85/100</span>
416
+ </div>
417
+ <div class="flex justify-between items-center mb-2">
418
+ <span class="text-sm text-gray-500">Percentage</span>
419
+ <span class="font-semibold">85%</span>
420
+ </div>
421
+ <div class="flex justify-between items-center mb-4">
422
+ <span class="text-sm text-gray-500">Date Taken</span>
423
+ <span class="text-sm">Apr 20, 2023</span>
424
+ </div>
425
+ <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">View Details</button>
426
+ </div>
427
+
428
+ <div class="border border-gray-200 rounded-lg p-4">
429
+ <div class="flex justify-between items-start mb-2">
430
+ <h4 class="font-semibold text-gray-800">Literature Quiz</h4>
431
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Completed</span>
432
+ </div>
433
+ <p class="text-gray-600 text-sm mb-3">Shakespeare and Modern Poetry</p>
434
+ <div class="flex justify-between items-center mb-2">
435
+ <span class="text-sm text-gray-500">Score</span>
436
+ <span class="font-semibold">92/100</span>
437
+ </div>
438
+ <div class="flex justify-between items-center mb-2">
439
+ <span class="text-sm text-gray-500">Percentage</span>
440
+ <span class="font-semibold">92%</span>
441
+ </div>
442
+ <div class="flex justify-between items-center mb-4">
443
+ <span class="text-sm text-gray-500">Date Taken</span>
444
+ <span class="text-sm">Mar 15, 2023</span>
445
+ </div>
446
+ <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">View Details</button>
447
+ </div>
448
+
449
+ <div class="border border-gray-200 rounded-lg p-4">
450
+ <div class="flex justify-between items-start mb-2">
451
+ <h4 class="font-semibold text-gray-800">Algebra Test</h4>
452
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Completed</span>
453
+ </div>
454
+ <p class="text-gray-600 text-sm mb-3">Linear Equations and Functions</p>
455
+ <div class="flex justify-between items-center mb-2">
456
+ <span class="text-sm text-gray-500">Score</span>
457
+ <span class="font-semibold">78/100</span>
458
+ </div>
459
+ <div class="flex justify-between items-center mb-2">
460
+ <span class="text-sm text-gray-500">Percentage</span>
461
+ <span class="font-semibold">78%</span>
462
+ </div>
463
+ <div class="flex justify-between items-center mb-4">
464
+ <span class="text-sm text-gray-500">Date Taken</span>
465
+ <span class="text-sm">Feb 28, 2023</span>
466
+ </div>
467
+ <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">View Details</button>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <div>
473
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Performance Overview</h3>
474
+ <div class="bg-gray-50 p-4 rounded-lg">
475
+ <div class="h-64 flex items-center justify-center">
476
+ <p class="text-gray-500">Performance chart would be displayed here</p>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Profile Content -->
484
+ <div id="profile-content" class="tab-content">
485
+ <div class="bg-white shadow rounded-lg p-6">
486
+ <div class="flex flex-col md:flex-row">
487
+ <div class="md:w-1/3 mb-6 md:mb-0">
488
+ <div class="flex flex-col items-center">
489
+ <img class="h-32 w-32 rounded-full mb-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
490
+ <h3 class="text-xl font-semibold text-gray-800">John Doe</h3>
491
+ <p class="text-gray-600">Student</p>
492
+ <button class="mt-4 bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">Change Photo</button>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="md:w-2/3 md:pl-8">
497
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Personal Information</h3>
498
+ <form class="space-y-4">
499
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
500
+ <div>
501
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label>
502
+ <input type="text" id="first-name" value="John" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
503
+ </div>
504
+ <div>
505
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
506
+ <input type="text" id="last-name" value="Doe" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
507
+ </div>
508
+ </div>
509
+
510
+ <div>
511
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
512
+ <input type="email" id="email" value="john.doe@example.com" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
513
+ </div>
514
+
515
+ <div>
516
+ <label for="bio" class="block text-sm font-medium text-gray-700">Bio</label>
517
+ <textarea id="bio" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">Computer Science student interested in web development and machine learning.</textarea>
518
+ </div>
519
+
520
+ <div class="pt-4 border-t border-gray-200">
521
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Change Password</h3>
522
+ <div class="space-y-4">
523
+ <div>
524
+ <label for="current-password" class="block text-sm font-medium text-gray-700">Current Password</label>
525
+ <input type="password" id="current-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
526
+ </div>
527
+ <div>
528
+ <label for="new-password" class="block text-sm font-medium text-gray-700">New Password</label>
529
+ <input type="password" id="new-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
530
+ </div>
531
+ <div>
532
+ <label for="confirm-new-password" class="block text-sm font-medium text-gray-700">Confirm New Password</label>
533
+ <input type="password" id="confirm-new-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
534
+ </div>
535
+ </div>
536
+ </div>
537
+
538
+ <div class="flex justify-end pt-4">
539
+ <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Cancel</button>
540
+ <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save Changes</button>
541
+ </div>
542
+ </form>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Exam Creation Content (for teachers) -->
549
+ <div id="exam-creation-content" class="tab-content hidden">
550
+ <div class="bg-white shadow rounded-lg p-6">
551
+ <div class="flex justify-between items-center mb-6">
552
+ <h2 class="text-2xl font-bold text-gray-800">Create New Exam</h2>
553
+ <button id="save-exam-btn" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700">Save Exam</button>
554
+ </div>
555
+
556
+ <div class="space-y-6">
557
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
558
+ <div>
559
+ <label for="exam-title" class="block text-sm font-medium text-gray-700">Exam Title</label>
560
+ <input type="text" id="exam-title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. Midterm Exam">
561
+ </div>
562
+
563
+ <div>
564
+ <label for="exam-subject" class="block text-sm font-medium text-gray-700">Subject</label>
565
+ <select id="exam-subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
566
+ <option>Mathematics</option>
567
+ <option>Science</option>
568
+ <option>History</option>
569
+ <option>Literature</option>
570
+ <option>Computer Science</option>
571
+ </select>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
576
+ <div>
577
+ <label for="exam-date" class="block text-sm font-medium text-gray-700">Exam Date</label>
578
+ <input type="date" id="exam-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
579
+ </div>
580
+
581
+ <div>
582
+ <label for="exam-duration" class="block text-sm font-medium text-gray-700">Duration (minutes)</label>
583
+ <input type="number" id="exam-duration" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="60">
584
+ </div>
585
+
586
+ <div>
587
+ <label for="exam-total-marks" class="block text-sm font-medium text-gray-700">Total Marks</label>
588
+ <input type="number" id="exam-total-marks" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="100">
589
+ </div>
590
+ </div>
591
+
592
+ <div>
593
+ <label for="exam-description" class="block text-sm font-medium text-gray-700">Description</label>
594
+ <textarea id="exam-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Brief description of the exam content"></textarea>
595
+ </div>
596
+
597
+ <div>
598
+ <label class="block text-sm font-medium text-gray-700">Instructions</label>
599
+ <div id="exam-instructions" class="mt-1 space-y-2">
600
+ <div class="flex items-start">
601
+ <input type="text" value="Answer all questions" class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
602
+ <button class="ml-2 text-red-500 hover:text-red-700">
603
+ <i class="fas fa-times"></i>
604
+ </button>
605
+ </div>
606
+ <div class="flex items-start">
607
+ <input type="text" value="No calculators allowed" class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
608
+ <button class="ml-2 text-red-500 hover:text-red-700">
609
+ <i class="fas fa-times"></i>
610
+ </button>
611
+ </div>
612
+ </div>
613
+ <button id="add-instruction-btn" class="mt-2 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500">
614
+ <i class="fas fa-plus mr-1"></i> Add Instruction
615
+ </button>
616
+ </div>
617
+
618
+ <div class="pt-4 border-t border-gray-200">
619
+ <div class="flex justify-between items-center mb-4">
620
+ <h3 class="text-lg font-semibold text-gray-800">Questions</h3>
621
+ <div class="relative">
622
+ <button id="add-question-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center">
623
+ <i class="fas fa-plus mr-2"></i> Add Question
624
+ </button>
625
+ </div>
626
+ </div>
627
+
628
+ <div id="questions-container" class="space-y-6">
629
+ <!-- Question 1 -->
630
+ <div class="border border-gray-200 rounded-lg p-4 question-item">
631
+ <div class="flex justify-between items-start mb-4">
632
+ <h4 class="font-medium text-gray-800">Question 1</h4>
633
+ <div class="flex space-x-2">
634
+ <select class="question-type border border-gray-300 rounded-md pl-2 pr-8 py-1 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
635
+ <option value="mcq">Multiple Choice</option>
636
+ <option value="true-false">True/False</option>
637
+ <option value="short-answer">Short Answer</option>
638
+ <option value="essay">Essay</option>
639
+ <option value="matching">Matching</option>
640
+ </select>
641
+ <button class="text-red-500 hover:text-red-700 delete-question">
642
+ <i class="fas fa-trash"></i>
643
+ </button>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="mb-4">
648
+ <label class="block text-sm font-medium text-gray-700 mb-1">Question Text</label>
649
+ <div class="question-editor bg-white">What is the capital of France?</div>
650
+ </div>
651
+
652
+ <div class="question-options space-y-2">
653
+ <div class="flex items-center">
654
+ <input type="radio" name="q1-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
655
+ <input type="text" value="Paris" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
656
+ <button class="ml-2 text-red-500 hover:text-red-700">
657
+ <i class="fas fa-times"></i>
658
+ </button>
659
+ </div>
660
+ <div class="flex items-center">
661
+ <input type="radio" name="q1-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
662
+ <input type="text" value="London" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
663
+ <button class="ml-2 text-red-500 hover:text-red-700">
664
+ <i class="fas fa-times"></i>
665
+ </button>
666
+ </div>
667
+ <div class="flex items-center">
668
+ <input type="radio" name="q1-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
669
+ <input type="text" value="Berlin" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
670
+ <button class="ml-2 text-red-500 hover:text-red-700">
671
+ <i class="fas fa-times"></i>
672
+ </button>
673
+ </div>
674
+ </div>
675
+ <button class="mt-2 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500 add-option-btn">
676
+ <i class="fas fa-plus mr-1"></i> Add Option
677
+ </button>
678
+
679
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
680
+ <div>
681
+ <label for="q1-marks" class="block text-sm font-medium text-gray-700">Marks</label>
682
+ <input type="number" id="q1-marks" value="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
683
+ </div>
684
+ <div>
685
+ <label for="q1-difficulty" class="block text-sm font-medium text-gray-700">Difficulty</label>
686
+ <select id="q1-difficulty" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
687
+ <option>Easy</option>
688
+ <option selected>Medium</option>
689
+ <option>Hard</option>
690
+ </select>
691
+ </div>
692
+ </div>
693
+ </div>
694
+
695
+ <!-- Question 2 -->
696
+ <div class="border border-gray-200 rounded-lg p-4 question-item">
697
+ <div class="flex justify-between items-start mb-4">
698
+ <h4 class="font-medium text-gray-800">Question 2</h4>
699
+ <div class="flex space-x-2">
700
+ <select class="question-type border border-gray-300 rounded-md pl-2 pr-8 py-1 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
701
+ <option value="mcq">Multiple Choice</option>
702
+ <option value="true-false" selected>True/False</option>
703
+ <option value="short-answer">Short Answer</option>
704
+ <option value="essay">Essay</option>
705
+ <option value="matching">Matching</option>
706
+ </select>
707
+ <button class="text-red-500 hover:text-red-700 delete-question">
708
+ <i class="fas fa-trash"></i>
709
+ </button>
710
+ </div>
711
+ </div>
712
+
713
+ <div class="mb-4">
714
+ <label class="block text-sm font-medium text-gray-700 mb-1">Question Text</label>
715
+ <div class="question-editor bg-white">The Earth is flat.</div>
716
+ </div>
717
+
718
+ <div class="question-options space-y-2">
719
+ <div class="flex items-center">
720
+ <input type="radio" name="q2-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
721
+ <span class="ml-2">True</span>
722
+ </div>
723
+ <div class="flex items-center">
724
+ <input type="radio" name="q2-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
725
+ <span class="ml-2">False</span>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
730
+ <div>
731
+ <label for="q2-marks" class="block text-sm font-medium text-gray-700">Marks</label>
732
+ <input type="number" id="q2-marks" value="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
733
+ </div>
734
+ <div>
735
+ <label for="q2-difficulty" class="block text-sm font-medium text-gray-700">Difficulty</label>
736
+ <select id="q2-difficulty" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
737
+ <option>Easy</option>
738
+ <option selected>Medium</option>
739
+ <option>Hard</option>
740
+ </select>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </div>
749
+
750
+ <!-- Exam Taking Interface -->
751
+ <div id="exam-taking-content" class="tab-content hidden">
752
+ <div class="bg-white shadow rounded-lg p-6">
753
+ <div class="flex justify-between items-center mb-6">
754
+ <div>
755
+ <h2 class="text-2xl font-bold text-gray-800">Science Quiz</h2>
756
+ <p class="text-gray-600">Basic Chemistry and Physics</p>
757
+ </div>
758
+ <div class="flex items-center">
759
+ <div class="bg-gray-100 px-4 py-2 rounded-md mr-4">
760
+ <span class="font-medium">Time Left: </span>
761
+ <span id="exam-timer" class="font-bold">59:45</span>
762
+ </div>
763
+ <button id="submit-exam-btn" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700">Submit Exam</button>
764
+ </div>
765
+ </div>
766
+
767
+ <div class="border-t border-gray-200 pt-4">
768
+ <div class="mb-6">
769
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Instructions</h3>
770
+ <ul class="list-disc pl-5 space-y-1 text-gray-700">
771
+ <li>Answer all questions</li>
772
+ <li>No calculators allowed</li>
773
+ <li>You have 60 minutes to complete the exam</li>
774
+ </ul>
775
+ </div>
776
+
777
+ <div id="exam-questions" class="space-y-8">
778
+ <!-- Question 1 -->
779
+ <div class="border-b border-gray-200 pb-6 question-container">
780
+ <div class="flex justify-between items-start mb-4">
781
+ <div class="flex items-center">
782
+ <span class="font-medium text-gray-800 mr-2">Question 1</span>
783
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">1 point</span>
784
+ </div>
785
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flag-question" data-question="1">
786
+ <i class="far fa-flag mr-1"></i> Flag
787
+ </button>
788
+ </div>
789
+
790
+ <div class="mb-4">
791
+ <p class="text-gray-800">What is the capital of France?</p>
792
+ </div>
793
+
794
+ <div class="space-y-2">
795
+ <div class="flex items-center">
796
+ <input type="radio" id="q1-option1" name="q1" value="Paris" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
797
+ <label for="q1-option1" class="ml-3 block text-gray-700">Paris</label>
798
+ </div>
799
+ <div class="flex items-center">
800
+ <input type="radio" id="q1-option2" name="q1" value="London" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
801
+ <label for="q1-option2" class="ml-3 block text-gray-700">London</label>
802
+ </div>
803
+ <div class="flex items-center">
804
+ <input type="radio" id="q1-option3" name="q1" value="Berlin" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
805
+ <label for="q1-option3" class="ml-3 block text-gray-700">Berlin</label>
806
+ </div>
807
+ <div class="flex items-center">
808
+ <input type="radio" id="q1-option4" name="q1" value="Madrid" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
809
+ <label for="q1-option4" class="ml-3 block text-gray-700">Madrid</label>
810
+ </div>
811
+ </div>
812
+ </div>
813
+
814
+ <!-- Question 2 -->
815
+ <div class="border-b border-gray-200 pb-6 question-container">
816
+ <div class="flex justify-between items-start mb-4">
817
+ <div class="flex items-center">
818
+ <span class="font-medium text-gray-800 mr-2">Question 2</span>
819
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">1 point</span>
820
+ </div>
821
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flag-question" data-question="2">
822
+ <i class="far fa-flag mr-1"></i> Flag
823
+ </button>
824
+ </div>
825
+
826
+ <div class="mb-4">
827
+ <p class="text-gray-800">The Earth is flat.</p>
828
+ </div>
829
+
830
+ <div class="space-y-2">
831
+ <div class="flex items-center">
832
+ <input type="radio" id="q2-true" name="q2" value="true" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
833
+ <label for="q2-true" class="ml-3 block text-gray-700">True</label>
834
+ </div>
835
+ <div class="flex items-center">
836
+ <input type="radio" id="q2-false" name="q2" value="false" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
837
+ <label for="q2-false" class="ml-3 block text-gray-700">False</label>
838
+ </div>
839
+ </div>
840
+ </div>
841
+
842
+ <!-- Question 3 -->
843
+ <div class="border-b border-gray-200 pb-6 question-container">
844
+ <div class="flex justify-between items-start mb-4">
845
+ <div class="flex items-center">
846
+ <span class="font-medium text-gray-800 mr-2">Question 3</span>
847
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">2 points</span>
848
+ </div>
849
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flag-question" data-question="3">
850
+ <i class="far fa-flag mr-1"></i> Flag
851
+ </button>
852
+ </div>
853
+
854
+ <div class="mb-4">
855
+ <p class="text-gray-800">Explain the difference between an element and a compound.</p>
856
+ </div>
857
+
858
+ <div>
859
+ <textarea rows="4" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Your answer..."></textarea>
860
+ </div>
861
+ </div>
862
+ </div>
863
+ </div>
864
+
865
+ <div class="mt-8 flex justify-between items-center">
866
+ <button id="prev-question-btn" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50" disabled>
867
+ Previous Question
868
+ </button>
869
+ <div class="flex space-x-2">
870
+ <button class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm font-medium hover:bg-gray-200 question-nav-btn" data-question="1">1</button>
871
+ <button class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm font-medium hover:bg-gray-200 question-nav-btn" data-question="2">2</button>
872
+ <button class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm font-medium hover:bg-gray-200 question-nav-btn" data-question="3">3</button>
873
+ </div>
874
+ <button id="next-question-btn" class="bg-indigo-600 text-white py-2 px-4 rounded-md shadow-sm text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
875
+ Next Question
876
+ </button>
877
+ </div>
878
+ </div>
879
+ </div>
880
+ </main>
881
+
882
+ <!-- Footer -->
883
+ <footer class="bg-gray-800 text-white py-8">
884
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
885
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
886
+ <div>
887
+ <h3 class="text-lg font-semibold mb-4">ExamPro</h3>
888
+ <p class="text-gray-400">The complete online examination platform for students and teachers.</p>
889
+ </div>
890
+ <div>
891
+ <h3 class="text-lg font-semibold mb-4">For Students</h3>
892
+ <ul class="space-y-2">
893
+ <li><a href="#" class="text-gray-400 hover:text-white">Take Exams</a></li>
894
+ <li><a href="#" class="text-gray-400 hover:text-white">View Results</a></li>
895
+ <li><a href="#" class="text-gray-400 hover:text-white">Study Resources</a></li>
896
+ </ul>
897
+ </div>
898
+ <div>
899
+ <h3 class="text-lg font-semibold mb-4">For Teachers</h3>
900
+ <ul class="space-y-2">
901
+ <li><a href="#" class="text-gray-400 hover:text-white">Create Exams</a></li>
902
+ <li><a href="#" class="text-gray-400 hover:text-white">Manage Classes</a></li>
903
+ <li><a href="#" class="text-gray-400 hover:text-white">Analytics</a></li>
904
+ </ul>
905
+ </div>
906
+ <div>
907
+ <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
908
+ <ul class="space-y-2">
909
+ <li class="text-gray-400"><i class="fas fa-envelope mr-2"></i> support@exampro.com</li>
910
+ <li class="text-gray-400"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</li>
911
+ <li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Education St, Learning City</li>
912
+ </ul>
913
+ </div>
914
+ </div>
915
+ <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
916
+ <p class="text-gray-400">© 2023 ExamPro. All rights reserved.</p>
917
+ <div class="flex space-x-6 mt-4 md:mt-0">
918
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
919
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
920
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
921
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
922
+ </div>
923
+ </div>
924
+ </div>
925
+ </footer>
926
+
927
+ <script>
928
+ // DOM Elements
929
+ const loginBtn = document.getElementById('login-btn');
930
+ const registerBtn = document.getElementById('register-btn');
931
+ const loginModal = document.getElementById('login-modal');
932
+ const registerModal = document.getElementById('register-modal');
933
+ const closeLoginModal = document.getElementById('close-login-modal');
934
+ const closeRegisterModal = document.getElementById('close-register-modal');
935
+ const switchToRegister = document.getElementById('switch-to-register');
936
+ const switchToLogin = document.getElementById('switch-to-login');
937
+ const notificationArea = document.getElementById('notification-area');
938
+ const createExamBtn = document.getElementById('create-exam-btn');
939
+ const examCreationContent = document.getElementById('exam-creation-content');
940
+ const saveExamBtn = document.getElementById('save-exam-btn');
941
+ const addInstructionBtn = document.getElementById('add-instruction-btn');
942
+ const examInstructions = document.getElementById('exam-instructions');
943
+ const addQuestionBtn = document.getElementById('add-question-btn');
944
+ const questionsContainer = document.getElementById('questions-container');
945
+ const submitExamBtn = document.getElementById('submit-exam-btn');
946
+ const examTakingContent = document.getElementById('exam-taking-content');
947
+ const prevQuestionBtn = document.getElementById('prev-question-btn');
948
+ const nextQuestionBtn = document.getElementById('next-question-btn');
949
+ const questionNavBtns = document.querySelectorAll('.question-nav-btn');
950
+ const flagQuestions = document.querySelectorAll('.flag-question');
951
+ const examTimer = document.getElementById('exam-timer');
952
+
953
+ // Tab navigation
954
+ const tabLinks = {
955
+ 'home-link': 'home-content',
956
+ 'exams-link': 'exams-content',
957
+ 'results-link': 'results-content',
958
+ 'profile-link': 'profile-content'
959
+ };
960
+
961
+ // Current user state
962
+ let currentUser = null;
963
+ let isTeacher = false;
964
+
965
+ // Initialize the app
966
+ document.addEventListener('DOMContentLoaded', () => {
967
+ // Set up tab navigation
968
+ Object.keys(tabLinks).forEach(linkId => {
969
+ document.getElementById(linkId).addEventListener('click', (e) => {
970
+ e.preventDefault();
971
+ // Hide all tab contents
972
+ document.querySelectorAll('.tab-content').forEach(tab => {
973
+ tab.classList.remove('active');
974
+ });
975
+ // Show selected tab content
976
+ document.getElementById(tabLinks[linkId]).classList.add('active');
977
+
978
+ // Update active tab styling
979
+ document.querySelectorAll('nav a').forEach(navLink => {
980
+ navLink.classList.remove('bg-indigo-800', 'text-white');
981
+ navLink.classList.add('text-indigo-200', 'hover:bg-indigo-600', 'hover:text-white');
982
+ });
983
+ e.target.classList.add('bg-indigo-800', 'text-white');
984
+ e.target.classList.remove('text-indigo-200', 'hover:bg-indigo-600', 'hover:text-white');
985
+ });
986
+ });
987
+
988
+ // Set up modal interactions
989
+ loginBtn.addEventListener('click', () => loginModal.classList.remove('hidden'));
990
+ registerBtn.addEventListener('click', () => registerModal.classList.remove('hidden'));
991
+ closeLoginModal.addEventListener('click', () => loginModal.classList.add('hidden'));
992
+ closeRegisterModal.addEventListener('click', () => registerModal.classList.add('hidden'));
993
+ switchToRegister.addEventListener('click', (e) => {
994
+ e.preventDefault();
995
+ loginModal.classList.add('hidden');
996
+ registerModal.classList.remove('hidden');
997
+ });
998
+ switchToLogin.addEventListener('click', (e) => {
999
+ e.preventDefault();
1000
+ registerModal.classList.add('hidden');
1001
+ loginModal.classList.remove('hidden');
1002
+ });
1003
+
1004
+ // Handle login form submission
1005
+ const loginForm = loginModal.querySelector('form');
1006
+ loginForm.addEventListener('submit', (e) => {
1007
+ e.preventDefault();
1008
+ const email = document.getElementById('email').value;
1009
+ const password = document.getElementById('password').value;
1010
+
1011
+ // Simulate login
1012
+ currentUser = {
1013
+ name: 'John Doe',
1014
+ email: email,
1015
+ role: isTeacher ? 'teacher' : 'student'
1016
+ };
1017
+
1018
+ loginModal.classList.add('hidden');
1019
+ showNotification('Login successful!', 'success');
1020
+
1021
+ // Update UI for logged in user
1022
+ loginBtn.classList.add('hidden');
1023
+ registerBtn.classList.add('hidden');
1024
+ document.getElementById('user-dropdown').classList.remove('hidden');
1025
+
1026
+ // If teacher, show create exam button
1027
+ if (isTeacher) {
1028
+ createExamBtn.classList.remove('hidden');
1029
+ }
1030
+ });
1031
+
1032
+ // Handle register form submission
1033
+ const registerForm = registerModal.querySelector('form');
1034
+ registerForm.addEventListener('submit', (e) => {
1035
+ e.preventDefault();
1036
+ const fullName = document.getElementById('full-name').value;
1037
+ const email = document.getElementById('register-email').value;
1038
+ const password = document.getElementById('register-password').value;
1039
+ const confirmPassword = document.getElementById('confirm-password').value;
1040
+ isTeacher = document.getElementById('teacher-role').checked;
1041
+
1042
+ if (password !== confirmPassword) {
1043
+ showNotification('Passwords do not match!', 'error');
1044
+ return;
1045
+ }
1046
+
1047
+ // Simulate registration
1048
+ currentUser = {
1049
+ name: fullName,
1050
+ email: email,
1051
+ role: isTeacher ? 'teacher' : 'student'
1052
+ };
1053
+
1054
+ registerModal.classList.add('hidden');
1055
+ showNotification('Registration successful! Please login.', 'success');
1056
+
1057
+ // Auto-fill login form
1058
+ document.getElementById('email').value = email;
1059
+ });
1060
+
1061
+ // Teacher-specific functionality
1062
+ createExamBtn.addEventListener('click', () => {
1063
+ // Hide all tab contents
1064
+ document.querySelectorAll('.tab-content').forEach(tab => {
1065
+ tab.classList.remove('active');
1066
+ });
1067
+ // Show exam creation content
1068
+ examCreationContent.classList.remove('hidden');
1069
+ examCreationContent.classList.add('active');
1070
+ });
1071
+
1072
+ saveExamBtn.addEventListener('click', () => {
1073
+ showNotification('Exam saved successfully!', 'success');
1074
+ // Return to exams tab
1075
+ document.getElementById('exams-link').click();
1076
+ });
1077
+
1078
+ addInstructionBtn.addEventListener('click', (e) => {
1079
+ e.preventDefault();
1080
+ const newInstruction = document.createElement('div');
1081
+ newInstruction.className = 'flex items-start';
1082
+ newInstruction.innerHTML = `
1083
+ <input type="text" class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="New instruction">
1084
+ <button class="ml-2 text-red-500 hover:text-red-700">
1085
+ <i class="fas fa-times"></i>
1086
+ </button>
1087
+ `;
1088
+ examInstructions.appendChild(newInstruction);
1089
+
1090
+ // Add event listener to remove button
1091
+ newInstruction.querySelector('button').addEventListener('click', () => {
1092
+ newInstruction.remove();
1093
+ });
1094
+ });
1095
+
1096
+ addQuestionBtn.addEventListener('click', () => {
1097
+ const questionCount = document.querySelectorAll('.question-item').length + 1;
1098
+ const newQuestion = document.createElement('div');
1099
+ newQuestion.className = 'border border-gray-200 rounded-lg p-4 question-item';
1100
+ newQuestion.innerHTML = `
1101
+ <div class="flex justify-between items-start mb-4">
1102
+ <h4 class="font-medium text-gray-800">Question ${questionCount}</h4>
1103
+ <div class="flex space-x-2">
1104
+ <select class="question-type border border-gray-300 rounded-md pl-2 pr-8 py-1 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
1105
+ <option value="mcq">Multiple Choice</option>
1106
+ <option value="true-false">True/False</option>
1107
+ <option value="short-answer">Short Answer</option>
1108
+ <option value="essay">Essay</option>
1109
+ <option value="matching">Matching</option>
1110
+ </select>
1111
+ <button class="text-red-500 hover:text-red-700 delete-question">
1112
+ <i class="fas fa-trash"></i>
1113
+ </button>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ <div class="mb-4">
1118
+ <label class="block text-sm font-medium text-gray-700 mb-1">Question Text</label>
1119
+ <div class="question-editor bg-white" contenteditable="true">Enter your question here...</div>
1120
+ </div>
1121
+
1122
+ <div class="question-options space-y-2">
1123
+ <div class="flex items-center">
1124
+ <input type="radio" name="q${questionCount}-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
1125
+ <input type="text" value="Option 1" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
1126
+ <button class="ml-2 text-red-500 hover:text-red-700">
1127
+ <i class="fas fa-times"></i>
1128
+ </button>
1129
+ </div>
1130
+ <div class="flex items-center">
1131
+ <input type="radio" name="q${questionCount}-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
1132
+ <input type="text" value="Option 2" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
1133
+ <button class="ml-2 text-red-500 hover:text-red-700">
1134
+ <i class="fas fa-times"></i>
1135
+ </button>
1136
+ </div>
1137
+ </div>
1138
+ <button class="mt-2 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500 add-option-btn">
1139
+ <i class="fas fa-plus mr-1"></i> Add Option
1140
+ </button>
1141
+
1142
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
1143
+ <div>
1144
+
1145
+ <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=galipalli/test4ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1146
+ </html>