Hugging Face's logo

Spaces:
wasikherro
/
edu
Running

App Files Community
wasikherro commited on
Commit
8d4a4ce
·
verified ·
1 Parent(s): 2183dfe

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +885 -421
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,11 +3,11 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>STEM Quest - Gamified Learning</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 CSS for animations and effects */
11
  @keyframes pulse {
12
  0% { transform: scale(1); }
13
  50% { transform: scale(1.05); }
@@ -28,12 +28,6 @@
28
  animation: shake 0.5s;
29
  }
30
 
31
- .progress-ring {
32
- transition: stroke-dashoffset 0.5s;
33
- transform: rotate(-90deg);
34
- transform-origin: 50% 50%;
35
- }
36
-
37
  .subject-card:hover {
38
  transform: translateY(-5px);
39
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
@@ -78,6 +72,20 @@
78
  .chemistry-border { border-color: #10b981; }
79
  .biology-border { border-color: #84cc16; }
80
  .science-border { border-color: #f59e0b; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  </style>
82
  </head>
83
  <body class="bg-gray-50 min-h-screen">
@@ -94,10 +102,10 @@
94
  </div>
95
  </div>
96
  <div class="hidden md:flex items-center space-x-3">
97
- <a href="#" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-transparent hover:text-indigo-600 transition duration-300">Home</a>
98
- <a href="#" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-transparent hover:text-indigo-600 transition duration-300">Courses</a>
99
- <a href="#" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-transparent hover:text-indigo-600 transition duration-300">Leaderboard</a>
100
- <a href="#" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-transparent hover:text-indigo-600 transition duration-300">Profile</a>
101
  </div>
102
  <div class="md:hidden flex items-center">
103
  <button class="outline-none mobile-menu-button">
@@ -109,9 +117,9 @@
109
  <div class="hidden mobile-menu">
110
  <ul class="">
111
  <li class="active"><a href="#" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Home</a></li>
112
- <li><a href="#" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Courses</a></li>
113
- <li><a href="#" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Leaderboard</a></li>
114
- <li><a href="#" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Profile</a></li>
115
  </ul>
116
  </div>
117
  </nav>
@@ -121,7 +129,7 @@
121
  <div class="container mx-auto px-6 text-center">
122
  <h1 class="text-4xl md:text-5xl font-bold mb-6">Master STEM with Fun!</h1>
123
  <p class="text-xl mb-8">Learn Math, Physics, Chemistry, Biology and Science through interactive lessons and gamified challenges.</p>
124
- <button class="bg-white text-indigo-600 font-bold rounded-full py-3 px-8 shadow-lg hover:bg-gray-100 transition duration-300">
125
  Start Learning Now
126
  </button>
127
  </div>
@@ -136,25 +144,25 @@
136
  <i class="fas fa-user-graduate text-indigo-600 text-2xl"></i>
137
  </div>
138
  <div>
139
- <h3 class="font-bold text-lg">Welcome back, Explorer!</h3>
140
  <p class="text-gray-600">Keep your streak going!</p>
141
  </div>
142
  </div>
143
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full md:w-auto">
144
  <div class="bg-indigo-50 rounded-lg p-3 text-center">
145
- <div class="text-indigo-600 font-bold text-xl">5</div>
146
  <div class="text-gray-600 text-sm">Day Streak</div>
147
  </div>
148
  <div class="bg-green-50 rounded-lg p-3 text-center">
149
- <div class="text-green-600 font-bold text-xl">1,250</div>
150
  <div class="text-gray-600 text-sm">XP Points</div>
151
  </div>
152
  <div class="bg-yellow-50 rounded-lg p-3 text-center">
153
- <div class="text-yellow-600 font-bold text-xl">8</div>
154
  <div class="text-gray-600 text-sm">Badges</div>
155
  </div>
156
  <div class="bg-purple-50 rounded-lg p-3 text-center">
157
- <div class="text-purple-600 font-bold text-xl">15</div>
158
  <div class="text-gray-600 text-sm">Lessons</div>
159
  </div>
160
  </div>
@@ -163,174 +171,24 @@
163
  <!-- Progress Bar -->
164
  <div class="mt-6">
165
  <div class="flex justify-between mb-1">
166
- <span class="text-sm font-medium">Level 5 Progress</span>
167
- <span class="text-sm font-medium">65%</span>
168
  </div>
169
  <div class="w-full bg-gray-200 rounded-full h-2.5">
170
- <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 65%"></div>
171
  </div>
172
  </div>
173
  </div>
174
  </div>
175
 
176
  <!-- Subjects Grid -->
177
- <div class="container mx-auto px-6 py-8">
178
  <h2 class="text-2xl font-bold mb-6">Choose Your Subject</h2>
179
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
180
- <!-- Math Card -->
181
- <div class="subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105">
182
- <div class="math-bg h-2"></div>
183
- <div class="p-6">
184
- <div class="flex items-center mb-4">
185
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
186
- <i class="fas fa-square-root-alt math-text text-xl"></i>
187
- </div>
188
- <h3 class="font-bold text-lg math-text">Mathematics</h3>
189
- </div>
190
- <p class="text-gray-600 mb-4">Master algebra, geometry, calculus and more through interactive problems.</p>
191
- <div class="flex justify-between items-center">
192
- <div class="flex">
193
- <i class="fas fa-star text-yellow-400 mr-1"></i>
194
- <i class="fas fa-star text-yellow-400 mr-1"></i>
195
- <i class="fas fa-star text-yellow-400 mr-1"></i>
196
- <i class="fas fa-star text-yellow-400 mr-1"></i>
197
- <i class="fas fa-star-half-alt text-yellow-400"></i>
198
- </div>
199
- <button class="math-bg text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300">
200
- Start
201
- </button>
202
- </div>
203
- </div>
204
- </div>
205
-
206
- <!-- Physics Card -->
207
- <div class="subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105">
208
- <div class="physics-bg h-2"></div>
209
- <div class="p-6">
210
- <div class="flex items-center mb-4">
211
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
212
- <i class="fas fa-atom physics-text text-xl"></i>
213
- </div>
214
- <h3 class="font-bold text-lg physics-text">Physics</h3>
215
- </div>
216
- <p class="text-gray-600 mb-4">Explore mechanics, electricity, waves and the fundamental laws of nature.</p>
217
- <div class="flex justify-between items-center">
218
- <div class="flex">
219
- <i class="fas fa-star text-yellow-400 mr-1"></i>
220
- <i class="fas fa-star text-yellow-400 mr-1"></i>
221
- <i class="fas fa-star text-yellow-400 mr-1"></i>
222
- <i class="fas fa-star text-yellow-400 mr-1"></i>
223
- <i class="far fa-star text-yellow-400"></i>
224
- </div>
225
- <button class="physics-bg text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
226
- Start
227
- </button>
228
- </div>
229
- </div>
230
- </div>
231
-
232
- <!-- Chemistry Card -->
233
- <div class="subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105">
234
- <div class="chemistry-bg h-2"></div>
235
- <div class="p-6">
236
- <div class="flex items-center mb-4">
237
- <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
238
- <i class="fas fa-flask chemistry-text text-xl"></i>
239
- </div>
240
- <h3 class="font-bold text-lg chemistry-text">Chemistry</h3>
241
- </div>
242
- <p class="text-gray-600 mb-4">Discover atoms, reactions, organic chemistry and the periodic table.</p>
243
- <div class="flex justify-between items-center">
244
- <div class="flex">
245
- <i class="fas fa-star text-yellow-400 mr-1"></i>
246
- <i class="fas fa-star text-yellow-400 mr-1"></i>
247
- <i class="fas fa-star text-yellow-400 mr-1"></i>
248
- <i class="fas fa-star-half-alt text-yellow-400 mr-1"></i>
249
- <i class="far fa-star text-yellow-400"></i>
250
- </div>
251
- <button class="chemistry-bg text-white px-4 py-2 rounded-lg hover:bg-green-700 transition duration-300">
252
- Start
253
- </button>
254
- </div>
255
- </div>
256
- </div>
257
-
258
- <!-- Biology Card -->
259
- <div class="subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105">
260
- <div class="biology-bg h-2"></div>
261
- <div class="p-6">
262
- <div class="flex items-center mb-4">
263
- <div class="w-12 h-12 rounded-full bg-lime-100 flex items-center justify-center mr-4">
264
- <i class="fas fa-dna biology-text text-xl"></i>
265
- </div>
266
- <h3 class="font-bold text-lg biology-text">Biology</h3>
267
- </div>
268
- <p class="text-gray-600 mb-4">Learn about cells, genetics, human anatomy and ecosystems.</p>
269
- <div class="flex justify-between items-center">
270
- <div class="flex">
271
- <i class="fas fa-star text-yellow-400 mr-1"></i>
272
- <i class="fas fa-star text-yellow-400 mr-1"></i>
273
- <i class="fas fa-star text-yellow-400 mr-1"></i>
274
- <i class="fas fa-star text-yellow-400 mr-1"></i>
275
- <i class="far fa-star text-yellow-400"></i>
276
- </div>
277
- <button class="biology-bg text-white px-4 py-2 rounded-lg hover:bg-lime-700 transition duration-300">
278
- Start
279
- </button>
280
- </div>
281
- </div>
282
- </div>
283
-
284
- <!-- Science Card -->
285
- <div class="subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105">
286
- <div class="science-bg h-2"></div>
287
- <div class="p-6">
288
- <div class="flex items-center mb-4">
289
- <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mr-4">
290
- <i class="fas fa-globe-americas science-text text-xl"></i>
291
- </div>
292
- <h3 class="font-bold text-lg science-text">Science</h3>
293
- </div>
294
- <p class="text-gray-600 mb-4">Explore earth science, astronomy, weather and basic experiments.</p>
295
- <div class="flex justify-between items-center">
296
- <div class="flex">
297
- <i class="fas fa-star text-yellow-400 mr-1"></i>
298
- <i class="fas fa-star text-yellow-400 mr-1"></i>
299
- <i class="fas fa-star text-yellow-400 mr-1"></i>
300
- <i class="far fa-star text-yellow-400 mr-1"></i>
301
- <i class="far fa-star text-yellow-400"></i>
302
- </div>
303
- <button class="science-bg text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition duration-300">
304
- Start
305
- </button>
306
- </div>
307
- </div>
308
- </div>
309
-
310
- <!-- Practice Card -->
311
- <div class="subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105">
312
- <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2"></div>
313
- <div class="p-6">
314
- <div class="flex items-center mb-4">
315
- <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
316
- <i class="fas fa-brain text-purple-600 text-xl"></i>
317
- </div>
318
- <h3 class="font-bold text-lg text-purple-600">Practice Mode</h3>
319
- </div>
320
- <p class="text-gray-600 mb-4">Reinforce your learning with random quizzes from all subjects.</p>
321
- <div class="flex justify-between items-center">
322
- <div class="flex">
323
- <i class="fas fa-star text-yellow-400 mr-1"></i>
324
- <i class="fas fa-star text-yellow-400 mr-1"></i>
325
- <i class="fas fa-star text-yellow-400 mr-1"></i>
326
- <i class="fas fa-star text-yellow-400 mr-1"></i>
327
- <i class="fas fa-star text-yellow-400"></i>
328
- </div>
329
- <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-lg hover:opacity-90 transition duration-300">
330
- Practice
331
- </button>
332
- </div>
333
- </div>
334
  </div>
335
  </div>
336
  </div>
@@ -350,21 +208,22 @@
350
  </div>
351
  </div>
352
  <div class="bg-white bg-opacity-20 rounded-lg p-4 w-full md:w-auto">
353
- <h3 class="font-bold mb-2">Solve this equation:</h3>
354
- <p class="text-xl mb-4">2x + 5 = 15</p>
355
  <div class="flex">
356
- <input type="text" class="rounded-l-lg px-4 py-2 w-full text-gray-900" placeholder="Your answer">
357
- <button class="bg-yellow-400 text-indigo-800 font-bold px-4 py-2 rounded-r-lg hover:bg-yellow-300 transition duration-300">
358
  Submit
359
  </button>
360
  </div>
 
361
  </div>
362
  </div>
363
  </div>
364
  </div>
365
 
366
  <!-- Leaderboard -->
367
- <div class="container mx-auto px-6 py-8">
368
  <h2 class="text-2xl font-bold mb-6">Top Learners This Week</h2>
369
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
370
  <div class="overflow-x-auto">
@@ -378,95 +237,12 @@
378
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Streak</th>
379
  </tr>
380
  </thead>
381
- <tbody class="bg-white divide-y divide-gray-200">
382
- <tr class="hover:bg-gray-50">
383
- <td class="px-6 py-4 whitespace-nowrap">
384
- <div class="flex items-center">
385
- <div class="w-8 h-8 rounded-full bg-yellow-400 flex items-center justify-center text-white font-bold">1</div>
386
- </div>
387
- </td>
388
- <td class="px-6 py-4 whitespace-nowrap">
389
- <div class="flex items-center">
390
- <div class="flex-shrink-0 h-10 w-10">
391
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
392
- </div>
393
- <div class="ml-4">
394
- <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
395
- <div class="text-sm text-gray-500">Math Master</div>
396
- </div>
397
- </div>
398
- </td>
399
- <td class="px-6 py-4 whitespace-nowrap">
400
- <div class="text-sm text-gray-900">3,450</div>
401
- </td>
402
- <td class="px-6 py-4 whitespace-nowrap">
403
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">15</span>
404
- </td>
405
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
406
- <div class="flex items-center">
407
- <i class="fas fa-fire text-red-500 mr-1"></i>
408
- <span>21 days</span>
409
- </div>
410
- </td>
411
- </tr>
412
- <tr class="hover:bg-gray-50">
413
- <td class="px-6 py-4 whitespace-nowrap">
414
- <div class="flex items-center">
415
- <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white font-bold">2</div>
416
- </div>
417
- </td>
418
- <td class="px-6 py-4 whitespace-nowrap">
419
- <div class="flex items-center">
420
- <div class="flex-shrink-0 h-10 w-10">
421
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
422
- </div>
423
- <div class="ml-4">
424
- <div class="text-sm font-medium text-gray-900">Michael Chen</div>
425
- <div class="text-sm text-gray-500">Physics Pro</div>
426
- </div>
427
- </div>
428
- </td>
429
- <td class="px-6 py-4 whitespace-nowrap">
430
- <div class="text-sm text-gray-900">3,120</div>
431
- </td>
432
- <td class="px-6 py-4 whitespace-nowrap">
433
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">14</span>
434
- </td>
435
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
436
- <div class="flex items-center">
437
- <i class="fas fa-fire text-red-500 mr-1"></i>
438
- <span>18 days</span>
439
- </div>
440
- </td>
441
- </tr>
442
- <tr class="hover:bg-gray-50">
443
- <td class="px-6 py-4 whitespace-nowrap">
444
- <div class="flex items-center">
445
- <div class="w-8 h-8 rounded-full bg-amber-600 flex items-center justify-center text-white font-bold">3</div>
446
- </div>
447
- </td>
448
- <td class="px-6 py-4 whitespace-nowrap">
449
- <div class="flex items-center">
450
- <div class="flex-shrink-0 h-10 w-10">
451
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
452
- </div>
453
- <div class="ml-4">
454
- <div class="text-sm font-medium text-gray-900">Emma Rodriguez</div>
455
- <div class="text-sm text-gray-500">Chemistry Champ</div>
456
- </div>
457
- </div>
458
- </td>
459
- <td class="px-6 py-4 whitespace-nowrap">
460
- <div class="text-sm text-gray-900">2,980</div>
461
- </td>
462
- <td class="px-6 py-4 whitespace-nowrap">
463
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">13</span>
464
- </td>
465
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
466
- <div class="flex items-center">
467
- <i class="fas fa-fire text-red-500 mr-1"></i>
468
- <span>15 days</span>
469
- </div>
470
  </td>
471
  </tr>
472
  </tbody>
@@ -486,7 +262,7 @@
486
  <h3 class="text-xl font-bold">Algebra Basics</h3>
487
  </div>
488
  <div class="flex items-center">
489
- <div class="flex mr-4">
490
  <i class="fas fa-heart text-red-500 mx-1"></i>
491
  <i class="fas fa-heart text-red-500 mx-1"></i>
492
  <i class="fas fa-heart text-red-500 mx-1"></i>
@@ -507,16 +283,16 @@
507
  </div>
508
 
509
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3 ml-11">
510
- <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300">
511
  <span class="font-bold mr-2">A)</span> x = 5
512
  </button>
513
- <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300">
514
  <span class="font-bold mr-2">B)</span> x = 7
515
  </button>
516
- <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300">
517
  <span class="font-bold mr-2">C)</span> x = 9
518
  </button>
519
- <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300">
520
  <span class="font-bold mr-2">D)</span> x = 11
521
  </button>
522
  </div>
@@ -556,53 +332,13 @@
556
  </div>
557
 
558
  <!-- Badges Collection -->
559
- <div class="container mx-auto px-6 py-8">
560
  <h2 class="text-2xl font-bold mb-6">Your Badges</h2>
561
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
562
- <!-- Earned Badges -->
563
- <div class="bg-white rounded-xl shadow-md p-4 text-center">
564
- <div class="w-16 h-16 mx-auto mb-3 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-500 text-2xl">
565
- <i class="fas fa-medal"></i>
566
- </div>
567
- <h3 class="font-bold text-sm mb-1">Fast Learner</h3>
568
- <p class="text-xs text-gray-500">Complete 5 lessons in one day</p>
569
- </div>
570
- <div class="bg-white rounded-xl shadow-md p-4 text-center">
571
- <div class="w-16 h-16 mx-auto mb-3 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500 text-2xl">
572
- <i class="fas fa-fire"></i>
573
- </div>
574
- <h3 class="font-bold text-sm mb-1">7-Day Streak</h3>
575
- <p class="text-xs text-gray-500">Learn for 7 consecutive days</p>
576
- </div>
577
- <div class="bg-white rounded-xl shadow-md p-4 text-center">
578
- <div class="w-16 h-16 mx-auto mb-3 bg-green-100 rounded-full flex items-center justify-center text-green-500 text-2xl">
579
- <i class="fas fa-brain"></i>
580
- </div>
581
- <h3 class="font-bold text-sm mb-1">Quick Thinker</h3>
582
- <p class="text-xs text-gray-500">Answer 3 questions in a row correctly</p>
583
- </div>
584
-
585
- <!-- Locked Badges -->
586
- <div class="bg-gray-100 rounded-xl shadow-md p-4 text-center opacity-70">
587
- <div class="w-16 h-16 mx-auto mb-3 bg-gray-200 rounded-full flex items-center justify-center text-gray-400 text-2xl">
588
- <i class="fas fa-lock"></i>
589
- </div>
590
- <h3 class="font-bold text-sm mb-1 text-gray-400">Math Master</h3>
591
- <p class="text-xs text-gray-400">Complete 10 math lessons</p>
592
- </div>
593
- <div class="bg-gray-100 rounded-xl shadow-md p-4 text-center opacity-70">
594
- <div class="w-16 h-16 mx-auto mb-3 bg-gray-200 rounded-full flex items-center justify-center text-gray-400 text-2xl">
595
- <i class="fas fa-lock"></i>
596
- </div>
597
- <h3 class="font-bold text-sm mb-1 text-gray-400">Perfect Score</h3>
598
- <p class="text-xs text-gray-400">Complete a lesson with no mistakes</p>
599
- </div>
600
- <div class="bg-gray-100 rounded-xl shadow-md p-4 text-center opacity-70">
601
- <div class="w-16 h-16 mx-auto mb-3 bg-gray-200 rounded-full flex items-center justify-center text-gray-400 text-2xl">
602
- <i class="fas fa-lock"></i>
603
- </div>
604
- <h3 class="font-bold text-sm mb-1 text-gray-400">Night Owl</h3>
605
- <p class="text-xs text-gray-400">Complete a lesson after 10 PM</p>
606
  </div>
607
  </div>
608
  </div>
@@ -619,65 +355,11 @@
619
  </button>
620
  </div>
621
 
622
- <div class="space-y-4">
623
- <!-- Question 1 -->
624
- <div class="border-b border-gray-200 pb-4">
625
- <div class="flex items-start">
626
- <div class="flex-shrink-0 mr-4">
627
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
628
- </div>
629
- <div class="flex-1 min-w-0">
630
- <p class="text-sm font-medium text-gray-900">
631
- <a href="#" class="hover:underline">How do I solve quadratic equations?</a>
632
- </p>
633
- <p class="text-sm text-gray-500 truncate">I'm having trouble understanding the quadratic formula. Can someone explain it step by step?</p>
634
- <div class="mt-2 flex items-center text-xs text-gray-500">
635
- <span class="mr-3">Posted by John D. 2 hours ago</span>
636
- <span class="mr-3"><i class="fas fa-comment mr-1"></i> 5 answers</span>
637
- <span><i class="fas fa-heart mr-1 text-red-500"></i> 8</span>
638
- </div>
639
- </div>
640
- </div>
641
- </div>
642
-
643
- <!-- Question 2 -->
644
- <div class="border-b border-gray-200 pb-4">
645
- <div class="flex items-start">
646
- <div class="flex-shrink-0 mr-4">
647
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/33.jpg" alt="">
648
- </div>
649
- <div class="flex-1 min-w-0">
650
- <p class="text-sm font-medium text-gray-900">
651
- <a href="#" class="hover:underline">Best resources for learning organic chemistry?</a>
652
- </p>
653
- <p class="text-sm text-gray-500 truncate">I'm struggling with reaction mechanisms. Any recommended study materials or techniques?</p>
654
- <div class="mt-2 flex items-center text-xs text-gray-500">
655
- <span class="mr-3">Posted by Maria S. 5 hours ago</span>
656
- <span class="mr-3"><i class="fas fa-comment mr-1"></i> 3 answers</span>
657
- <span><i class="fas fa-heart mr-1 text-red-500"></i> 4</span>
658
- </div>
659
- </div>
660
- </div>
661
- </div>
662
-
663
- <!-- Question 3 -->
664
- <div class="pb-2">
665
- <div class="flex items-start">
666
- <div class="flex-shrink-0 mr-4">
667
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/44.jpg" alt="">
668
- </div>
669
- <div class="flex-1 min-w-0">
670
- <p class="text-sm font-medium text-gray-900">
671
- <a href="#" class="hover:underline">Physics problem - calculating velocity</a>
672
- </p>
673
- <p class="text-sm text-gray-500 truncate">If a car accelerates from 0 to 60 km/h in 5 seconds, what is its average acceleration?</p>
674
- <div class="mt-2 flex items-center text-xs text-gray-500">
675
- <span class="mr-3">Posted by Alex K. 1 day ago</span>
676
- <span class="mr-3"><i class="fas fa-comment mr-1"></i> 7 answers</span>
677
- <span><i class="fas fa-heart mr-1 text-red-500"></i> 12</span>
678
- </div>
679
- </div>
680
- </div>
681
  </div>
682
  </div>
683
 
@@ -759,49 +441,831 @@
759
  </div>
760
  </footer>
761
 
762
- <!-- Mobile menu script -->
763
  <script>
764
- const btn = document.querySelector('.mobile-menu-button');
765
- const menu = document.querySelector('.mobile-menu');
766
-
767
- btn.addEventListener('click', () => {
768
- menu.classList.toggle('hidden');
769
- });
770
-
771
- // Quiz interaction
772
- const quizOptions = document.querySelectorAll('.quiz-option');
773
- const explanation = document.getElementById('explanation');
774
-
775
- quizOptions.forEach(option => {
776
- option.addEventListener('click', () => {
777
- // Remove any existing selection
778
- quizOptions.forEach(opt => {
779
- opt.classList.remove('border-indigo-600', 'bg-indigo-50');
780
- opt.classList.add('border-gray-200');
781
- });
782
-
783
- // Select this option
784
- option.classList.remove('border-gray-200');
785
- option.classList.add('border-indigo-600', 'bg-indigo-50');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
786
 
787
- // Show explanation
788
- explanation.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
789
 
790
- // Add shake animation to wrong options if needed
791
- if(option.textContent.includes('A)') || option.textContent.includes('C)') || option.textContent.includes('D)')) {
792
- option.classList.add('shake-animation');
793
- setTimeout(() => {
794
- option.classList.remove('shake-animation');
795
- }, 500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
796
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
797
  });
 
 
 
 
 
 
 
 
 
 
798
  });
799
-
800
- // Add pulse animation to daily challenge
801
- const dailyChallengeBtn = document.querySelector('.bg-gradient-to-r.from-indigo-500.to-blue-600 button');
802
- setInterval(() => {
803
- dailyChallengeBtn.classList.toggle('pulse-animation');
804
- }, 3000);
805
  </script>
806
  <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=wasikherro/edu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
807
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>STEM Quest - Full Stack Learning 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 animations */
11
  @keyframes pulse {
12
  0% { transform: scale(1); }
13
  50% { transform: scale(1.05); }
 
28
  animation: shake 0.5s;
29
  }
30
 
 
 
 
 
 
 
31
  .subject-card:hover {
32
  transform: translateY(-5px);
33
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 
72
  .chemistry-border { border-color: #10b981; }
73
  .biology-border { border-color: #84cc16; }
74
  .science-border { border-color: #f59e0b; }
75
+
76
+ /* Loading spinner */
77
+ .spinner {
78
+ width: 40px;
79
+ height: 40px;
80
+ border: 4px solid rgba(0, 0, 0, 0.1);
81
+ border-left-color: #6366f1;
82
+ border-radius: 50%;
83
+ animation: spin 1s linear infinite;
84
+ }
85
+
86
+ @keyframes spin {
87
+ to { transform: rotate(360deg); }
88
+ }
89
  </style>
90
  </head>
91
  <body class="bg-gray-50 min-h-screen">
 
102
  </div>
103
  </div>
104
  <div class="hidden md:flex items-center space-x-3">
105
+ <a href="#" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-indigo-600 text-indigo-600 transition duration-300">Home</a>
106
+ <a href="#courses" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-transparent hover:text-indigo-600 transition duration-300">Courses</a>
107
+ <a href="#leaderboard" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-transparent hover:text-indigo-600 transition duration-300">Leaderboard</a>
108
+ <a href="#profile" class="py-2 px-2 font-medium text-gray-500 border-b-4 border-transparent hover:text-indigo-600 transition duration-300">Profile</a>
109
  </div>
110
  <div class="md:hidden flex items-center">
111
  <button class="outline-none mobile-menu-button">
 
117
  <div class="hidden mobile-menu">
118
  <ul class="">
119
  <li class="active"><a href="#" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Home</a></li>
120
+ <li><a href="#courses" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Courses</a></li>
121
+ <li><a href="#leaderboard" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Leaderboard</a></li>
122
+ <li><a href="#profile" class="block text-sm px-2 py-4 hover:bg-indigo-500 transition duration-300">Profile</a></li>
123
  </ul>
124
  </div>
125
  </nav>
 
129
  <div class="container mx-auto px-6 text-center">
130
  <h1 class="text-4xl md:text-5xl font-bold mb-6">Master STEM with Fun!</h1>
131
  <p class="text-xl mb-8">Learn Math, Physics, Chemistry, Biology and Science through interactive lessons and gamified challenges.</p>
132
+ <button id="startLearningBtn" class="bg-white text-indigo-600 font-bold rounded-full py-3 px-8 shadow-lg hover:bg-gray-100 transition duration-300">
133
  Start Learning Now
134
  </button>
135
  </div>
 
144
  <i class="fas fa-user-graduate text-indigo-600 text-2xl"></i>
145
  </div>
146
  <div>
147
+ <h3 class="font-bold text-lg">Welcome back, <span id="usernameDisplay">Explorer</span>!</h3>
148
  <p class="text-gray-600">Keep your streak going!</p>
149
  </div>
150
  </div>
151
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full md:w-auto">
152
  <div class="bg-indigo-50 rounded-lg p-3 text-center">
153
+ <div class="text-indigo-600 font-bold text-xl" id="streakCount">5</div>
154
  <div class="text-gray-600 text-sm">Day Streak</div>
155
  </div>
156
  <div class="bg-green-50 rounded-lg p-3 text-center">
157
+ <div class="text-green-600 font-bold text-xl" id="xpCount">1,250</div>
158
  <div class="text-gray-600 text-sm">XP Points</div>
159
  </div>
160
  <div class="bg-yellow-50 rounded-lg p-3 text-center">
161
+ <div class="text-yellow-600 font-bold text-xl" id="badgeCount">8</div>
162
  <div class="text-gray-600 text-sm">Badges</div>
163
  </div>
164
  <div class="bg-purple-50 rounded-lg p-3 text-center">
165
+ <div class="text-purple-600 font-bold text-xl" id="lessonCount">15</div>
166
  <div class="text-gray-600 text-sm">Lessons</div>
167
  </div>
168
  </div>
 
171
  <!-- Progress Bar -->
172
  <div class="mt-6">
173
  <div class="flex justify-between mb-1">
174
+ <span class="text-sm font-medium">Level <span id="currentLevel">5</span> Progress</span>
175
+ <span class="text-sm font-medium"><span id="progressPercent">65</span>%</span>
176
  </div>
177
  <div class="w-full bg-gray-200 rounded-full h-2.5">
178
+ <div class="bg-indigo-600 h-2.5 rounded-full" id="levelProgressBar" style="width: 65%"></div>
179
  </div>
180
  </div>
181
  </div>
182
  </div>
183
 
184
  <!-- Subjects Grid -->
185
+ <div class="container mx-auto px-6 py-8" id="courses">
186
  <h2 class="text-2xl font-bold mb-6">Choose Your Subject</h2>
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="subjectsContainer">
188
+ <!-- Subjects will be loaded here dynamically -->
189
+ <div class="text-center py-8">
190
+ <div class="spinner mx-auto"></div>
191
+ <p class="mt-4 text-gray-600">Loading subjects...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  </div>
193
  </div>
194
  </div>
 
208
  </div>
209
  </div>
210
  <div class="bg-white bg-opacity-20 rounded-lg p-4 w-full md:w-auto">
211
+ <h3 class="font-bold mb-2" id="challengeQuestion">Solve this equation:</h3>
212
+ <p class="text-xl mb-4" id="challengeText">2x + 5 = 15</p>
213
  <div class="flex">
214
+ <input type="text" id="challengeAnswer" class="rounded-l-lg px-4 py-2 w-full text-gray-900" placeholder="Your answer">
215
+ <button id="submitChallengeBtn" class="bg-yellow-400 text-indigo-800 font-bold px-4 py-2 rounded-r-lg hover:bg-yellow-300 transition duration-300">
216
  Submit
217
  </button>
218
  </div>
219
+ <p class="text-sm mt-2 hidden" id="challengeFeedback"></p>
220
  </div>
221
  </div>
222
  </div>
223
  </div>
224
 
225
  <!-- Leaderboard -->
226
+ <div class="container mx-auto px-6 py-8" id="leaderboard">
227
  <h2 class="text-2xl font-bold mb-6">Top Learners This Week</h2>
228
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
229
  <div class="overflow-x-auto">
 
237
  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Streak</th>
238
  </tr>
239
  </thead>
240
+ <tbody class="bg-white divide-y divide-gray-200" id="leaderboardBody">
241
+ <!-- Leaderboard data will be loaded here -->
242
+ <tr>
243
+ <td colspan="5" class="px-6 py-4 text-center">
244
+ <div class="spinner mx-auto"></div>
245
+ <p class="mt-2 text-gray-600">Loading leaderboard...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  </td>
247
  </tr>
248
  </tbody>
 
262
  <h3 class="text-xl font-bold">Algebra Basics</h3>
263
  </div>
264
  <div class="flex items-center">
265
+ <div class="flex mr-4" id="quizLives">
266
  <i class="fas fa-heart text-red-500 mx-1"></i>
267
  <i class="fas fa-heart text-red-500 mx-1"></i>
268
  <i class="fas fa-heart text-red-500 mx-1"></i>
 
283
  </div>
284
 
285
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3 ml-11">
286
+ <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300" data-correct="false">
287
  <span class="font-bold mr-2">A)</span> x = 5
288
  </button>
289
+ <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300" data-correct="true">
290
  <span class="font-bold mr-2">B)</span> x = 7
291
  </button>
292
+ <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300" data-correct="false">
293
  <span class="font-bold mr-2">C)</span> x = 9
294
  </button>
295
+ <button class="quiz-option border-2 border-gray-200 rounded-lg px-4 py-3 text-left hover:border-indigo-400 transition duration-300" data-correct="false">
296
  <span class="font-bold mr-2">D)</span> x = 11
297
  </button>
298
  </div>
 
332
  </div>
333
 
334
  <!-- Badges Collection -->
335
+ <div class="container mx-auto px-6 py-8" id="profile">
336
  <h2 class="text-2xl font-bold mb-6">Your Badges</h2>
337
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4" id="badgesContainer">
338
+ <!-- Badges will be loaded here dynamically -->
339
+ <div class="text-center py-8 col-span-6">
340
+ <div class="spinner mx-auto"></div>
341
+ <p class="mt-4 text-gray-600">Loading badges...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
342
  </div>
343
  </div>
344
  </div>
 
355
  </button>
356
  </div>
357
 
358
+ <div class="space-y-4" id="discussionsContainer">
359
+ <!-- Discussions will be loaded here dynamically -->
360
+ <div class="text-center py-8">
361
+ <div class="spinner mx-auto"></div>
362
+ <p class="mt-4 text-gray-600">Loading discussions...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
363
  </div>
364
  </div>
365
 
 
441
  </div>
442
  </footer>
443
 
444
+ <!-- Mock Database and API Simulation -->
445
  <script>
446
+ // =============================================
447
+ // MOCK DATABASE - Simulating backend data
448
+ // =============================================
449
+ const mockDatabase = {
450
+ // Current user data
451
+ currentUser: {
452
+ id: 101,
453
+ username: "STEMExplorer",
454
+ avatar: "https://randomuser.me/api/portraits/women/44.jpg",
455
+ streak: 5,
456
+ xp: 1250,
457
+ level: 5,
458
+ levelProgress: 65,
459
+ badges: [1, 2, 3, 4, 5, 6, 7, 8], // IDs of earned badges
460
+ completedLessons: 15
461
+ },
462
+
463
+ // Subjects data
464
+ subjects: [
465
+ {
466
+ id: 1,
467
+ name: "Mathematics",
468
+ icon: "square-root-alt",
469
+ description: "Master algebra, geometry, calculus and more through interactive problems.",
470
+ rating: 4.5,
471
+ colorClass: "math",
472
+ lessons: 24,
473
+ completed: 6
474
+ },
475
+ {
476
+ id: 2,
477
+ name: "Physics",
478
+ icon: "atom",
479
+ description: "Explore mechanics, electricity, waves and the fundamental laws of nature.",
480
+ rating: 4,
481
+ colorClass: "physics",
482
+ lessons: 18,
483
+ completed: 4
484
+ },
485
+ {
486
+ id: 3,
487
+ name: "Chemistry",
488
+ icon: "flask",
489
+ description: "Discover atoms, reactions, organic chemistry and the periodic table.",
490
+ rating: 3.5,
491
+ colorClass: "chemistry",
492
+ lessons: 15,
493
+ completed: 3
494
+ },
495
+ {
496
+ id: 4,
497
+ name: "Biology",
498
+ icon: "dna",
499
+ description: "Learn about cells, genetics, human anatomy and ecosystems.",
500
+ rating: 4,
501
+ colorClass: "biology",
502
+ lessons: 12,
503
+ completed: 2
504
+ },
505
+ {
506
+ id: 5,
507
+ name: "Science",
508
+ icon: "globe-americas",
509
+ description: "Explore earth science, astronomy, weather and basic experiments.",
510
+ rating: 3,
511
+ colorClass: "science",
512
+ lessons: 10,
513
+ completed: 0
514
+ }
515
+ ],
516
+
517
+ // Badges data
518
+ badges: [
519
+ {
520
+ id: 1,
521
+ name: "Fast Learner",
522
+ description: "Complete 5 lessons in one day",
523
+ icon: "medal",
524
+ color: "yellow",
525
+ earned: true
526
+ },
527
+ {
528
+ id: 2,
529
+ name: "7-Day Streak",
530
+ description: "Learn for 7 consecutive days",
531
+ icon: "fire",
532
+ color: "indigo",
533
+ earned: true
534
+ },
535
+ {
536
+ id: 3,
537
+ name: "Quick Thinker",
538
+ description: "Answer 3 questions in a row correctly",
539
+ icon: "brain",
540
+ color: "green",
541
+ earned: true
542
+ },
543
+ {
544
+ id: 4,
545
+ name: "Early Bird",
546
+ description: "Complete a lesson before 7 AM",
547
+ icon: "sun",
548
+ color: "amber",
549
+ earned: true
550
+ },
551
+ {
552
+ id: 5,
553
+ name: "Weekend Warrior",
554
+ description: "Complete lessons on both weekend days",
555
+ icon: "calendar-week",
556
+ color: "purple",
557
+ earned: true
558
+ },
559
+ {
560
+ id: 6,
561
+ name: "Subject Starter",
562
+ description: "Begin learning in 3 different subjects",
563
+ icon: "book-open",
564
+ color: "blue",
565
+ earned: true
566
+ },
567
+ {
568
+ id: 7,
569
+ name: "Community Helper",
570
+ description: "Answer 5 questions in the forum",
571
+ icon: "hands-helping",
572
+ color: "teal",
573
+ earned: true
574
+ },
575
+ {
576
+ id: 8,
577
+ name: "Challenge Champion",
578
+ description: "Complete 5 daily challenges",
579
+ icon: "trophy",
580
+ color: "red",
581
+ earned: true
582
+ },
583
+ {
584
+ id: 9,
585
+ name: "Math Master",
586
+ description: "Complete 10 math lessons",
587
+ icon: "calculator",
588
+ color: "indigo",
589
+ earned: false
590
+ },
591
+ {
592
+ id: 10,
593
+ name: "Perfect Score",
594
+ description: "Complete a lesson with no mistakes",
595
+ icon: "star",
596
+ color: "yellow",
597
+ earned: false
598
+ },
599
+ {
600
+ id: 11,
601
+ name: "Night Owl",
602
+ description: "Complete a lesson after 10 PM",
603
+ icon: "moon",
604
+ color: "gray",
605
+ earned: false
606
+ },
607
+ {
608
+ id: 12,
609
+ name: "Subject Expert",
610
+ description: "Complete all lessons in one subject",
611
+ icon: "award",
612
+ color: "purple",
613
+ earned: false
614
+ }
615
+ ],
616
+
617
+ // Leaderboard data
618
+ leaderboard: [
619
+ {
620
+ id: 201,
621
+ name: "Sarah Johnson",
622
+ title: "Math Master",
623
+ avatar: "https://randomuser.me/api/portraits/women/12.jpg",
624
+ xp: 3450,
625
+ level: 15,
626
+ streak: 21
627
+ },
628
+ {
629
+ id: 202,
630
+ name: "Michael Chen",
631
+ title: "Physics Pro",
632
+ avatar: "https://randomuser.me/api/portraits/men/32.jpg",
633
+ xp: 3120,
634
+ level: 14,
635
+ streak: 18
636
+ },
637
+ {
638
+ id: 203,
639
+ name: "Emma Rodriguez",
640
+ title: "Chemistry Champ",
641
+ avatar: "https://randomuser.me/api/portraits/women/45.jpg",
642
+ xp: 2980,
643
+ level: 13,
644
+ streak: 15
645
+ },
646
+ {
647
+ id: 204,
648
+ name: "David Kim",
649
+ title: "Biology Buff",
650
+ avatar: "https://randomuser.me/api/portraits/men/22.jpg",
651
+ xp: 2850,
652
+ level: 13,
653
+ streak: 12
654
+ },
655
+ {
656
+ id: 205,
657
+ name: "Lisa Wong",
658
+ title: "Science Star",
659
+ avatar: "https://randomuser.me/api/portraits/women/33.jpg",
660
+ xp: 2760,
661
+ level: 12,
662
+ streak: 10
663
+ }
664
+ ],
665
+
666
+ // Discussions data
667
+ discussions: [
668
+ {
669
+ id: 301,
670
+ userId: 201,
671
+ userName: "Sarah Johnson",
672
+ userAvatar: "https://randomuser.me/api/portraits/women/12.jpg",
673
+ title: "How do I solve quadratic equations?",
674
+ content: "I'm having trouble understanding the quadratic formula. Can someone explain it step by step?",
675
+ time: "2 hours ago",
676
+ replies: 5,
677
+ likes: 8,
678
+ subject: "math"
679
+ },
680
+ {
681
+ id: 302,
682
+ userId: 203,
683
+ userName: "Emma Rodriguez",
684
+ userAvatar: "https://randomuser.me/api/portraits/women/45.jpg",
685
+ title: "Best resources for learning organic chemistry?",
686
+ content: "I'm struggling with reaction mechanisms. Any recommended study materials or techniques?",
687
+ time: "5 hours ago",
688
+ replies: 3,
689
+ likes: 4,
690
+ subject: "chemistry"
691
+ },
692
+ {
693
+ id: 303,
694
+ userId: 202,
695
+ userName: "Michael Chen",
696
+ userAvatar: "https://randomuser.me/api/portraits/men/32.jpg",
697
+ title: "Physics problem - calculating velocity",
698
+ content: "If a car accelerates from 0 to 60 km/h in 5 seconds, what is its average acceleration?",
699
+ time: "1 day ago",
700
+ replies: 7,
701
+ likes: 12,
702
+ subject: "physics"
703
+ }
704
+ ],
705
+
706
+ // Daily challenge
707
+ dailyChallenge: {
708
+ id: 401,
709
+ question: "Solve this equation:",
710
+ challenge: "2x + 5 = 15",
711
+ answer: "5",
712
+ xpReward: 50
713
+ }
714
+ };
715
+
716
+ // =============================================
717
+ // API SIMULATION - Mock backend endpoints
718
+ // =============================================
719
+ const mockAPI = {
720
+ // Simulate API delay
721
+ delay: () => new Promise(resolve => setTimeout(resolve, 800)),
722
+
723
+ // Get current user data
724
+ getCurrentUser: async () => {
725
+ await mockAPI.delay();
726
+ return mockDatabase.currentUser;
727
+ },
728
+
729
+ // Get all subjects
730
+ getSubjects: async () => {
731
+ await mockAPI.delay();
732
+ return mockDatabase.subjects;
733
+ },
734
+
735
+ // Get leaderboard data
736
+ getLeaderboard: async () => {
737
+ await mockAPI.delay();
738
+ return mockDatabase.leaderboard;
739
+ },
740
+
741
+ // Get user badges
742
+ getBadges: async (userId) => {
743
+ await mockAPI.delay();
744
+ return mockDatabase.badges;
745
+ },
746
+
747
+ // Get community discussions
748
+ getDiscussions: async () => {
749
+ await mockAPI.delay();
750
+ return mockDatabase.discussions;
751
+ },
752
+
753
+ // Get daily challenge
754
+ getDailyChallenge: async () => {
755
+ await mockAPI.delay();
756
+ return mockDatabase.dailyChallenge;
757
+ },
758
+
759
+ // Submit daily challenge answer
760
+ submitChallengeAnswer: async (userId, challengeId, answer) => {
761
+ await mockAPI.delay();
762
+ const challenge = mockDatabase.dailyChallenge;
763
+ const isCorrect = answer === challenge.answer;
764
 
765
+ if (isCorrect) {
766
+ // Update user stats
767
+ mockDatabase.currentUser.xp += challenge.xpReward;
768
+ mockDatabase.currentUser.streak += 1;
769
+
770
+ // Check if level up
771
+ if (mockDatabase.currentUser.xp >= mockDatabase.currentUser.level * 500) {
772
+ mockDatabase.currentUser.level += 1;
773
+ mockDatabase.currentUser.xp = 0;
774
+ mockDatabase.currentUser.levelProgress = 0;
775
+ } else {
776
+ mockDatabase.currentUser.levelProgress = Math.floor((mockDatabase.currentUser.xp / (mockDatabase.currentUser.level * 500)) * 100);
777
+ }
778
+ }
779
 
780
+ return {
781
+ success: isCorrect,
782
+ correctAnswer: challenge.answer,
783
+ xpEarned: isCorrect ? challenge.xpReward : 0,
784
+ streak: mockDatabase.currentUser.streak,
785
+ userXp: mockDatabase.currentUser.xp,
786
+ userLevel: mockDatabase.currentUser.level,
787
+ userLevelProgress: mockDatabase.currentUser.levelProgress
788
+ };
789
+ },
790
+
791
+ // Start a subject lesson
792
+ startSubjectLesson: async (userId, subjectId) => {
793
+ await mockAPI.delay();
794
+ return {
795
+ success: true,
796
+ lessonId: Math.floor(Math.random() * 1000) + 1000,
797
+ subjectId: subjectId
798
+ };
799
+ }
800
+ };
801
+
802
+ // =============================================
803
+ // FRONTEND APPLICATION - UI and interaction
804
+ // =============================================
805
+ document.addEventListener('DOMContentLoaded', async function() {
806
+ // Mobile menu toggle
807
+ const btn = document.querySelector('.mobile-menu-button');
808
+ const menu = document.querySelector('.mobile-menu');
809
+
810
+ btn.addEventListener('click', () => {
811
+ menu.classList.toggle('hidden');
812
+ });
813
+
814
+ // Quiz interaction
815
+ const quizOptions = document.querySelectorAll('.quiz-option');
816
+ const explanation = document.getElementById('explanation');
817
+ const quizLives = document.getElementById('quizLives');
818
+
819
+ quizOptions.forEach(option => {
820
+ option.addEventListener('click', () => {
821
+ // Remove any existing selection
822
+ quizOptions.forEach(opt => {
823
+ opt.classList.remove('border-indigo-600', 'bg-indigo-50');
824
+ opt.classList.add('border-gray-200');
825
+ });
826
+
827
+ // Select this option
828
+ option.classList.remove('border-gray-200');
829
+ option.classList.add('border-indigo-600', 'bg-indigo-50');
830
+
831
+ // Show explanation
832
+ explanation.classList.remove('hidden');
833
+
834
+ // Add shake animation to wrong options if needed
835
+ if(option.dataset.correct === "false") {
836
+ option.classList.add('shake-animation');
837
+
838
+ // Remove a life
839
+ if (quizLives.children.length > 0) {
840
+ quizLives.removeChild(quizLives.lastElementChild);
841
+ }
842
+
843
+ setTimeout(() => {
844
+ option.classList.remove('shake-animation');
845
+ }, 500);
846
+ }
847
+ });
848
+ });
849
+
850
+ // Add pulse animation to daily challenge
851
+ const dailyChallengeBtn = document.getElementById('submitChallengeBtn');
852
+ setInterval(() => {
853
+ dailyChallengeBtn.classList.toggle('pulse-animation');
854
+ }, 3000);
855
+
856
+ // =============================================
857
+ // DATA LOADING - Fetch and display data from mock API
858
+ // =============================================
859
+
860
+ // Load current user data
861
+ async function loadUserData() {
862
+ try {
863
+ const user = await mockAPI.getCurrentUser();
864
+
865
+ // Update UI with user data
866
+ document.getElementById('usernameDisplay').textContent = user.username;
867
+ document.getElementById('streakCount').textContent = user.streak;
868
+ document.getElementById('xpCount').textContent = user.xp.toLocaleString();
869
+ document.getElementById('badgeCount').textContent = user.badges.length;
870
+ document.getElementById('lessonCount').textContent = user.completedLessons;
871
+ document.getElementById('currentLevel').textContent = user.level;
872
+ document.getElementById('progressPercent').textContent = user.levelProgress;
873
+ document.getElementById('levelProgressBar').style.width = `${user.levelProgress}%`;
874
+
875
+ } catch (error) {
876
+ console.error("Error loading user data:", error);
877
  }
878
+ }
879
+
880
+ // Load subjects
881
+ async function loadSubjects() {
882
+ try {
883
+ const subjects = await mockAPI.getSubjects();
884
+ const container = document.getElementById('subjectsContainer');
885
+
886
+ // Clear loading state
887
+ container.innerHTML = '';
888
+
889
+ // Add each subject card
890
+ subjects.forEach(subject => {
891
+ const stars = Math.floor(subject.rating);
892
+ const hasHalfStar = subject.rating % 1 >= 0.5;
893
+
894
+ let starsHTML = '';
895
+ for (let i = 0; i < stars; i++) {
896
+ starsHTML += '<i class="fas fa-star text-yellow-400 mr-1"></i>';
897
+ }
898
+
899
+ if (hasHalfStar) {
900
+ starsHTML += '<i class="fas fa-star-half-alt text-yellow-400 mr-1"></i>';
901
+ }
902
+
903
+ for (let i = stars + (hasHalfStar ? 1 : 0); i < 5; i++) {
904
+ starsHTML += '<i class="far fa-star text-yellow-400 mr-1"></i>';
905
+ }
906
+
907
+ const card = document.createElement('div');
908
+ card.className = `subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105`;
909
+ card.innerHTML = `
910
+ <div class="${subject.colorClass}-bg h-2"></div>
911
+ <div class="p-6">
912
+ <div class="flex items-center mb-4">
913
+ <div class="w-12 h-12 rounded-full bg-${subject.colorClass}-100 flex items-center justify-center mr-4">
914
+ <i class="fas fa-${subject.icon} ${subject.colorClass}-text text-xl"></i>
915
+ </div>
916
+ <h3 class="font-bold text-lg ${subject.colorClass}-text">${subject.name}</h3>
917
+ </div>
918
+ <p class="text-gray-600 mb-4">${subject.description}</p>
919
+ <div class="flex justify-between items-center">
920
+ <div class="flex">
921
+ ${starsHTML}
922
+ </div>
923
+ <button class="${subject.colorClass}-bg text-white px-4 py-2 rounded-lg hover:bg-${subject.colorClass}-700 transition duration-300 start-subject-btn" data-subject-id="${subject.id}">
924
+ Start
925
+ </button>
926
+ </div>
927
+ <div class="mt-3 text-sm text-gray-500">
928
+ <div class="flex justify-between mb-1">
929
+ <span>Progress</span>
930
+ <span>${subject.completed}/${subject.lessons} lessons</span>
931
+ </div>
932
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
933
+ <div class="${subject.colorClass}-bg h-1.5 rounded-full" style="width: ${(subject.completed / subject.lessons) * 100}%"></div>
934
+ </div>
935
+ </div>
936
+ </div>
937
+ `;
938
+
939
+ container.appendChild(card);
940
+ });
941
+
942
+ // Add practice card
943
+ const practiceCard = document.createElement('div');
944
+ practiceCard.className = 'subject-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 transform hover:scale-105';
945
+ practiceCard.innerHTML = `
946
+ <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2"></div>
947
+ <div class="p-6">
948
+ <div class="flex items-center mb-4">
949
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
950
+ <i class="fas fa-brain text-purple-600 text-xl"></i>
951
+ </div>
952
+ <h3 class="font-bold text-lg text-purple-600">Practice Mode</h3>
953
+ </div>
954
+ <p class="text-gray-600 mb-4">Reinforce your learning with random quizzes from all subjects.</p>
955
+ <div class="flex justify-between items-center">
956
+ <div class="flex">
957
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
958
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
959
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
960
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
961
+ <i class="fas fa-star text-yellow-400"></i>
962
+ </div>
963
+ <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-lg hover:opacity-90 transition duration-300">
964
+ Practice
965
+ </button>
966
+ </div>
967
+ </div>
968
+ `;
969
+ container.appendChild(practiceCard);
970
+
971
+ // Add event listeners to subject buttons
972
+ document.querySelectorAll('.start-subject-btn').forEach(btn => {
973
+ btn.addEventListener('click', async function() {
974
+ const subjectId = this.dataset.subjectId;
975
+ const subject = subjects.find(s => s.id == subjectId);
976
+
977
+ // Show loading state
978
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Starting...';
979
+
980
+ try {
981
+ const response = await mockAPI.startSubjectLesson(mockDatabase.currentUser.id, subjectId);
982
+
983
+ if (response.success) {
984
+ // In a real app, we would redirect to the lesson page
985
+ alert(`Starting ${subject.name} lesson!`);
986
+ }
987
+ } catch (error) {
988
+ console.error("Error starting lesson:", error);
989
+ alert("Failed to start lesson. Please try again.");
990
+ } finally {
991
+ // Reset button text
992
+ this.textContent = 'Start';
993
+ }
994
+ });
995
+ });
996
+
997
+ } catch (error) {
998
+ console.error("Error loading subjects:", error);
999
+ document.getElementById('subjectsContainer').innerHTML = `
1000
+ <div class="text-center py-8 col-span-3">
1001
+ <i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-3"></i>
1002
+ <p class="text-gray-600">Failed to load subjects. Please try again later.</p>
1003
+ <button class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300" onclick="loadSubjects()">
1004
+ Retry
1005
+ </button>
1006
+ </div>
1007
+ `;
1008
+ }
1009
+ }
1010
+
1011
+ // Load leaderboard
1012
+ async function loadLeaderboard() {
1013
+ try {
1014
+ const leaderboard = await mockAPI.getLeaderboard();
1015
+ const container = document.getElementById('leaderboardBody');
1016
+
1017
+ // Clear loading state
1018
+ container.innerHTML = '';
1019
+
1020
+ // Add each leaderboard entry
1021
+ leaderboard.forEach((user, index) => {
1022
+ const row = document.createElement('tr');
1023
+ row.className = 'hover:bg-gray-50';
1024
+
1025
+ // Determine rank color
1026
+ let rankClass = 'bg-gray-300';
1027
+ let rankTextColor = 'text-white';
1028
+ if (index === 0) {
1029
+ rankClass = 'bg-yellow-400';
1030
+ rankTextColor = 'text-white';
1031
+ } else if (index === 1) {
1032
+ rankClass = 'bg-gray-300';
1033
+ rankTextColor = 'text-white';
1034
+ } else if (index === 2) {
1035
+ rankClass = 'bg-amber-600';
1036
+ rankTextColor = 'text-white';
1037
+ }
1038
+
1039
+ row.innerHTML = `
1040
+ <td class="px-6 py-4 whitespace-nowrap">
1041
+ <div class="flex items-center">
1042
+ <div class="w-8 h-8 rounded-full ${rankClass} flex items-center justify-center ${rankTextColor} font-bold">${index + 1}</div>
1043
+ </div>
1044
+ </td>
1045
+ <td class="px-6 py-4 whitespace-nowrap">
1046
+ <div class="flex items-center">
1047
+ <div class="flex-shrink-0 h-10 w-10">
1048
+ <img class="h-10 w-10 rounded-full" src="${user.avatar}" alt="">
1049
+ </div>
1050
+ <div class="ml-4">
1051
+ <div class="text-sm font-medium text-gray-900">${user.name}</div>
1052
+ <div class="text-sm text-gray-500">${user.title}</div>
1053
+ </div>
1054
+ </div>
1055
+ </td>
1056
+ <td class="px-6 py-4 whitespace-nowrap">
1057
+ <div class="text-sm text-gray-900">${user.xp.toLocaleString()}</div>
1058
+ </td>
1059
+ <td class="px-6 py-4 whitespace-nowrap">
1060
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">${user.level}</span>
1061
+ </td>
1062
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1063
+ <div class="flex items-center">
1064
+ <i class="fas fa-fire text-red-500 mr-1"></i>
1065
+ <span>${user.streak} days</span>
1066
+ </div>
1067
+ </td>
1068
+ `;
1069
+
1070
+ container.appendChild(row);
1071
+ });
1072
+
1073
+ } catch (error) {
1074
+ console.error("Error loading leaderboard:", error);
1075
+ document.getElementById('leaderboardBody').innerHTML = `
1076
+ <tr>
1077
+ <td colspan="5" class="px-6 py-4 text-center">
1078
+ <i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-3"></i>
1079
+ <p class="mt-2 text-gray-600">Failed to load leaderboard. Please try again later.</p>
1080
+ <button class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300" onclick="loadLeaderboard()">
1081
+ Retry
1082
+ </button>
1083
+ </td>
1084
+ </tr>
1085
+ `;
1086
+ }
1087
+ }
1088
+
1089
+ // Load badges
1090
+ async function loadBadges() {
1091
+ try {
1092
+ const badges = await mockAPI.getBadges(mockDatabase.currentUser.id);
1093
+ const container = document.getElementById('badgesContainer');
1094
+
1095
+ // Clear loading state
1096
+ container.innerHTML = '';
1097
+
1098
+ // Add each badge
1099
+ badges.forEach(badge => {
1100
+ const badgeCard = document.createElement('div');
1101
+ badgeCard.className = `bg-white rounded-xl shadow-md p-4 text-center ${badge.earned ? '' : 'opacity-70'}`;
1102
+
1103
+ badgeCard.innerHTML = `
1104
+ <div class="w-16 h-16 mx-auto mb-3 ${badge.earned ? `bg-${badge.color}-100` : 'bg-gray-200'} rounded-full flex items-center justify-center ${badge.earned ? `text-${badge.color}-500` : 'text-gray-400'} text-2xl">
1105
+ <i class="fas fa-${badge.icon}"></i>
1106
+ </div>
1107
+ <h3 class="font-bold text-sm mb-1 ${badge.earned ? '' : 'text-gray-400'}">${badge.name}</h3>
1108
+ <p class="text-xs ${badge.earned ? 'text-gray-500' : 'text-gray-400'}">${badge.description}</p>
1109
+ `;
1110
+
1111
+ container.appendChild(badgeCard);
1112
+ });
1113
+
1114
+ } catch (error) {
1115
+ console.error("Error loading badges:", error);
1116
+ document.getElementById('badgesContainer').innerHTML = `
1117
+ <div class="text-center py-8 col-span-6">
1118
+ <i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-3"></i>
1119
+ <p class="mt-4 text-gray-600">Failed to load badges. Please try again later.</p>
1120
+ <button class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300" onclick="loadBadges()">
1121
+ Retry
1122
+ </button>
1123
+ </div>
1124
+ `;
1125
+ }
1126
+ }
1127
+
1128
+ // Load discussions
1129
+ async function loadDiscussions() {
1130
+ try {
1131
+ const discussions = await mockAPI.getDiscussions();
1132
+ const container = document.getElementById('discussionsContainer');
1133
+
1134
+ // Clear loading state
1135
+ container.innerHTML = '';
1136
+
1137
+ // Add each discussion
1138
+ discussions.forEach((discussion, index) => {
1139
+ const discussionItem = document.createElement('div');
1140
+ discussionItem.className = `border-b border-gray-200 pb-4 ${index === discussions.length - 1 ? 'border-b-0' : ''}`;
1141
+
1142
+ discussionItem.innerHTML = `
1143
+ <div class="flex items-start">
1144
+ <div class="flex-shrink-0 mr-4">
1145
+ <img class="h-10 w-10 rounded-full" src="${discussion.userAvatar}" alt="">
1146
+ </div>
1147
+ <div class="flex-1 min-w-0">
1148
+ <p class="text-sm font-medium text-gray-900">
1149
+ <a href="#" class="hover:underline">${discussion.title}</a>
1150
+ </p>
1151
+ <p class="text-sm text-gray-500 truncate">${discussion.content}</p>
1152
+ <div class="mt-2 flex items-center text-xs text-gray-500">
1153
+ <span class="mr-3">Posted by ${discussion.userName} ${discussion.time}</span>
1154
+ <span class="mr-3"><i class="fas fa-comment mr-1"></i> ${discussion.replies} answers</span>
1155
+ <span><i class="fas fa-heart mr-1 text-red-500"></i> ${discussion.likes}</span>
1156
+ </div>
1157
+ </div>
1158
+ </div>
1159
+ `;
1160
+
1161
+ container.appendChild(discussionItem);
1162
+ });
1163
+
1164
+ } catch (error) {
1165
+ console.error("Error loading discussions:", error);
1166
+ document.getElementById('discussionsContainer').innerHTML = `
1167
+ <div class="text-center py-8">
1168
+ <i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-3"></i>
1169
+ <p class="mt-4 text-gray-600">Failed to load discussions. Please try again later.</p>
1170
+ <button class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300" onclick="loadDiscussions()">
1171
+ Retry
1172
+ </button>
1173
+ </div>
1174
+ `;
1175
+ }
1176
+ }
1177
+
1178
+ // Load daily challenge
1179
+ async function loadDailyChallenge() {
1180
+ try {
1181
+ const challenge = await mockAPI.getDailyChallenge();
1182
+
1183
+ document.getElementById('challengeQuestion').textContent = challenge.question;
1184
+ document.getElementById('challengeText').textContent = challenge.challenge;
1185
+
1186
+ // Handle challenge submission
1187
+ document.getElementById('submitChallengeBtn').addEventListener('click', async function() {
1188
+ const answer = document.getElementById('challengeAnswer').value.trim();
1189
+ const feedback = document.getElementById('challengeFeedback');
1190
+
1191
+ if (!answer) {
1192
+ feedback.textContent = "Please enter an answer";
1193
+ feedback.className = "text-sm mt-2 text-red-500";
1194
+ feedback.classList.remove('hidden');
1195
+ return;
1196
+ }
1197
+
1198
+ // Show loading state
1199
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Checking...';
1200
+
1201
+ try {
1202
+ const response = await mockAPI.submitChallengeAnswer(
1203
+ mockDatabase.currentUser.id,
1204
+ challenge.id,
1205
+ answer
1206
+ );
1207
+
1208
+ if (response.success) {
1209
+ feedback.textContent = `Correct! +${challenge.xpReward} XP earned. Your streak is now ${response.streak} days.`;
1210
+ feedback.className = "text-sm mt-2 text-green-500";
1211
+
1212
+ // Update user stats in UI
1213
+ document.getElementById('streakCount').textContent = response.streak;
1214
+ document.getElementById('xpCount').textContent = response.userXp.toLocaleString();
1215
+ document.getElementById('currentLevel').textContent = response.userLevel;
1216
+ document.getElementById('progressPercent').textContent = response.userLevelProgress;
1217
+ document.getElementById('levelProgressBar').style.width = `${response.userLevelProgress}%`;
1218
+
1219
+ // Disable the input and button
1220
+ document.getElementById('challengeAnswer').disabled = true;
1221
+ this.disabled = true;
1222
+ this.classList.remove('pulse-animation');
1223
+ this.classList.add('bg-green-500');
1224
+ this.innerHTML = '<i class="fas fa-check mr-1"></i> Completed';
1225
+ } else {
1226
+ feedback.textContent = `Incorrect. The correct answer is ${response.correctAnswer}. Try again tomorrow!`;
1227
+ feedback.className = "text-sm mt-2 text-red-500";
1228
+ }
1229
+
1230
+ feedback.classList.remove('hidden');
1231
+
1232
+ } catch (error) {
1233
+ console.error("Error submitting challenge:", error);
1234
+ feedback.textContent = "An error occurred. Please try again.";
1235
+ feedback.className = "text-sm mt-2 text-red-500";
1236
+ feedback.classList.remove('hidden');
1237
+ } finally {
1238
+ if (!this.disabled) {
1239
+ this.textContent = 'Submit';
1240
+ }
1241
+ }
1242
+ });
1243
+
1244
+ } catch (error) {
1245
+ console.error("Error loading daily challenge:", error);
1246
+ document.getElementById('challengeQuestion').textContent = "Daily Challenge";
1247
+ document.getElementById('challengeText').textContent = "Failed to load today's challenge. Please check back later.";
1248
+ document.getElementById('challengeAnswer').disabled = true;
1249
+ document.getElementById('submitChallengeBtn').disabled = true;
1250
+ }
1251
+ }
1252
+
1253
+ // Start learning button
1254
+ document.getElementById('startLearningBtn').addEventListener('click', function() {
1255
+ // Scroll to subjects section
1256
+ document.getElementById('courses').scrollIntoView({ behavior: 'smooth' });
1257
  });
1258
+
1259
+ // Load all data when page loads
1260
+ await Promise.all([
1261
+ loadUserData(),
1262
+ loadSubjects(),
1263
+ loadLeaderboard(),
1264
+ loadBadges(),
1265
+ loadDiscussions(),
1266
+ loadDailyChallenge()
1267
+ ]);
1268
  });
 
 
 
 
 
 
1269
  </script>
1270
  <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=wasikherro/edu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1271
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ backend database and linking with frontend