Hugging Face's logo

Spaces:
tokey4
/
anycoder-1f8d9771
Running

App Files Community
tokey4 commited on
Commit
1587e29
·
verified ·
1 Parent(s): bcfe0be

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1182 -19
index.html CHANGED
@@ -1,19 +1,1182 @@
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>EduLearn - Your Learning Platform</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary: #6366f1;
17
+ --primary-dark: #4f46e5;
18
+ --primary-light: #818cf8;
19
+ --secondary: #0ea5e9;
20
+ --accent: #f59e0b;
21
+ --background: #0f172a;
22
+ --surface: #1e293b;
23
+ --surface-light: #334155;
24
+ --text: #f1f5f9;
25
+ --text-muted: #94a3b8;
26
+ --success: #10b981;
27
+ --gradient: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
28
+ }
29
+
30
+ body {
31
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
32
+ background: var(--background);
33
+ color: var(--text);
34
+ min-height: 100vh;
35
+ line-height: 1.6;
36
+ }
37
+
38
+ /* Header Styles */
39
+ header {
40
+ background: rgba(15, 23, 42, 0.95);
41
+ backdrop-filter: blur(20px);
42
+ border-bottom: 1px solid var(--surface-light);
43
+ position: fixed;
44
+ width: 100%;
45
+ top: 0;
46
+ z-index: 1000;
47
+ padding: 1rem 2rem;
48
+ }
49
+
50
+ .header-container {
51
+ max-width: 1400px;
52
+ margin: 0 auto;
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ }
57
+
58
+ .logo {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 0.75rem;
62
+ font-size: 1.75rem;
63
+ font-weight: 700;
64
+ background: var(--gradient);
65
+ -webkit-background-clip: text;
66
+ -webkit-text-fill-color: transparent;
67
+ background-clip: text;
68
+ }
69
+
70
+ .logo i {
71
+ background: var(--gradient);
72
+ -webkit-background-clip: text;
73
+ -webkit-text-fill-color: transparent;
74
+ background-clip: text;
75
+ }
76
+
77
+ nav {
78
+ display: flex;
79
+ align-items: center;
80
+ gap: 2rem;
81
+ }
82
+
83
+ nav a {
84
+ color: var(--text-muted);
85
+ text-decoration: none;
86
+ font-weight: 500;
87
+ transition: color 0.3s ease;
88
+ position: relative;
89
+ }
90
+
91
+ nav a:hover {
92
+ color: var(--text);
93
+ }
94
+
95
+ nav a::after {
96
+ content: '';
97
+ position: absolute;
98
+ bottom: -5px;
99
+ left: 0;
100
+ width: 0;
101
+ height: 2px;
102
+ background: var(--gradient);
103
+ transition: width 0.3s ease;
104
+ }
105
+
106
+ nav a:hover::after {
107
+ width: 100%;
108
+ }
109
+
110
+ .built-with {
111
+ color: var(--text-muted);
112
+ font-size: 0.875rem;
113
+ text-decoration: none;
114
+ padding: 0.5rem 1rem;
115
+ border: 1px solid var(--surface-light);
116
+ border-radius: 2rem;
117
+ transition: all 0.3s ease;
118
+ }
119
+
120
+ .built-with:hover {
121
+ border-color: var(--primary);
122
+ color: var(--primary-light);
123
+ }
124
+
125
+ .mobile-menu-btn {
126
+ display: none;
127
+ background: none;
128
+ border: none;
129
+ color: var(--text);
130
+ font-size: 1.5rem;
131
+ cursor: pointer;
132
+ }
133
+
134
+ /* Main Content */
135
+ main {
136
+ margin-top: 80px;
137
+ min-height: calc(100vh - 80px);
138
+ }
139
+
140
+ /* Hero Section */
141
+ .hero {
142
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
143
+ padding: 4rem 2rem;
144
+ text-align: center;
145
+ border-bottom: 1px solid var(--surface-light);
146
+ }
147
+
148
+ .hero h1 {
149
+ font-size: clamp(2rem, 5vw, 3.5rem);
150
+ margin-bottom: 1rem;
151
+ background: var(--gradient);
152
+ -webkit-background-clip: text;
153
+ -webkit-text-fill-color: transparent;
154
+ background-clip: text;
155
+ }
156
+
157
+ .hero p {
158
+ color: var(--text-muted);
159
+ font-size: 1.25rem;
160
+ max-width: 600px;
161
+ margin: 0 auto 2rem;
162
+ }
163
+
164
+ .search-box {
165
+ max-width: 500px;
166
+ margin: 0 auto;
167
+ position: relative;
168
+ }
169
+
170
+ .search-box input {
171
+ width: 100%;
172
+ padding: 1rem 1.5rem 1rem 3rem;
173
+ border: 2px solid var(--surface-light);
174
+ border-radius: 3rem;
175
+ background: var(--surface);
176
+ color: var(--text);
177
+ font-size: 1rem;
178
+ transition: all 0.3s ease;
179
+ }
180
+
181
+ .search-box input:focus {
182
+ outline: none;
183
+ border-color: var(--primary);
184
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
185
+ }
186
+
187
+ .search-box i {
188
+ position: absolute;
189
+ left: 1.25rem;
190
+ top: 50%;
191
+ transform: translateY(-50%);
192
+ color: var(--text-muted);
193
+ }
194
+
195
+ /* Subjects Grid */
196
+ .subjects-section {
197
+ padding: 3rem 2rem;
198
+ max-width: 1400px;
199
+ margin: 0 auto;
200
+ }
201
+
202
+ .section-title {
203
+ font-size: 1.75rem;
204
+ margin-bottom: 2rem;
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 0.75rem;
208
+ }
209
+
210
+ .section-title i {
211
+ color: var(--primary);
212
+ }
213
+
214
+ .subjects-grid {
215
+ display: grid;
216
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
217
+ gap: 1.5rem;
218
+ }
219
+
220
+ .subject-card {
221
+ background: var(--surface);
222
+ border-radius: 1rem;
223
+ padding: 1.5rem;
224
+ cursor: pointer;
225
+ transition: all 0.3s ease;
226
+ border: 1px solid var(--surface-light);
227
+ position: relative;
228
+ overflow: hidden;
229
+ }
230
+
231
+ .subject-card::before {
232
+ content: '';
233
+ position: absolute;
234
+ top: 0;
235
+ left: 0;
236
+ width: 100%;
237
+ height: 4px;
238
+ background: var(--gradient);
239
+ transform: scaleX(0);
240
+ transition: transform 0.3s ease;
241
+ }
242
+
243
+ .subject-card:hover {
244
+ transform: translateY(-5px);
245
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
246
+ border-color: var(--primary);
247
+ }
248
+
249
+ .subject-card:hover::before {
250
+ transform: scaleX(1);
251
+ }
252
+
253
+ .subject-icon {
254
+ width: 60px;
255
+ height: 60px;
256
+ border-radius: 1rem;
257
+ display: flex;
258
+ align-items: center;
259
+ justify-content: center;
260
+ font-size: 1.5rem;
261
+ margin-bottom: 1rem;
262
+ }
263
+
264
+ .subject-card h3 {
265
+ font-size: 1.25rem;
266
+ margin-bottom: 0.5rem;
267
+ }
268
+
269
+ .subject-card p {
270
+ color: var(--text-muted);
271
+ font-size: 0.875rem;
272
+ margin-bottom: 1rem;
273
+ }
274
+
275
+ .subject-meta {
276
+ display: flex;
277
+ justify-content: space-between;
278
+ align-items: center;
279
+ color: var(--text-muted);
280
+ font-size: 0.875rem;
281
+ }
282
+
283
+ .subject-meta span {
284
+ display: flex;
285
+ align-items: center;
286
+ gap: 0.5rem;
287
+ }
288
+
289
+ /* Subject Colors */
290
+ .subject-card[data-subject="business"] .subject-icon {
291
+ background: linear-gradient(135deg, #f59e0b, #d97706);
292
+ }
293
+ .subject-card[data-subject="digital"] .subject-icon {
294
+ background: linear-gradient(135deg, #10b981, #059669);
295
+ }
296
+ .subject-card[data-subject="java"] .subject-icon {
297
+ background: linear-gradient(135deg, #ef4444, #dc2626);
298
+ }
299
+ .subject-card[data-subject="dsa"] .subject-icon {
300
+ background: linear-gradient(135deg, #8b5cf6, #7c3aed);
301
+ }
302
+ .subject-card[data-subject="peripheral"] .subject-icon {
303
+ background: linear-gradient(135deg, #06b6d4, #0891b2);
304
+ }
305
+ .subject-card[data-subject="web"] .subject-icon {
306
+ background: linear-gradient(135deg, #ec4899, #db2777);
307
+ }
308
+ .subject-card[data-subject="env"] .subject-icon {
309
+ background: linear-gradient(135deg, #22c55e, #16a34a);
310
+ }
311
+
312
+ /* Subject Detail View */
313
+ .subject-detail {
314
+ display: none;
315
+ padding: 2rem;
316
+ max-width: 1200px;
317
+ margin: 0 auto;
318
+ }
319
+
320
+ .subject-detail.active {
321
+ display: block;
322
+ }
323
+
324
+ .back-btn {
325
+ display: inline-flex;
326
+ align-items: center;
327
+ gap: 0.5rem;
328
+ color: var(--text-muted);
329
+ text-decoration: none;
330
+ margin-bottom: 2rem;
331
+ padding: 0.75rem 1.5rem;
332
+ background: var(--surface);
333
+ border-radius: 0.5rem;
334
+ transition: all 0.3s ease;
335
+ border: none;
336
+ cursor: pointer;
337
+ font-size: 1rem;
338
+ }
339
+
340
+ .back-btn:hover {
341
+ background: var(--surface-light);
342
+ color: var(--text);
343
+ }
344
+
345
+ .subject-header {
346
+ display: flex;
347
+ align-items: center;
348
+ gap: 1.5rem;
349
+ margin-bottom: 2rem;
350
+ padding: 2rem;
351
+ background: var(--surface);
352
+ border-radius: 1rem;
353
+ border: 1px solid var(--surface-light);
354
+ }
355
+
356
+ .subject-header .subject-icon {
357
+ width: 80px;
358
+ height: 80px;
359
+ font-size: 2rem;
360
+ }
361
+
362
+ .subject-header h2 {
363
+ font-size: 2rem;
364
+ }
365
+
366
+ .subject-header p {
367
+ color: var(--text-muted);
368
+ }
369
+
370
+ /* Chapters */
371
+ .chapters-list {
372
+ display: flex;
373
+ flex-direction: column;
374
+ gap: 1rem;
375
+ }
376
+
377
+ .chapter {
378
+ background: var(--surface);
379
+ border-radius: 1rem;
380
+ border: 1px solid var(--surface-light);
381
+ overflow: hidden;
382
+ transition: all 0.3s ease;
383
+ }
384
+
385
+ .chapter:hover {
386
+ border-color: var(--primary);
387
+ }
388
+
389
+ .chapter-header {
390
+ padding: 1.25rem 1.5rem;
391
+ display: flex;
392
+ justify-content: space-between;
393
+ align-items: center;
394
+ cursor: pointer;
395
+ transition: background 0.3s ease;
396
+ }
397
+
398
+ .chapter-header:hover {
399
+ background: var(--surface-light);
400
+ }
401
+
402
+ .chapter-title {
403
+ display: flex;
404
+ align-items: center;
405
+ gap: 1rem;
406
+ }
407
+
408
+ .chapter-number {
409
+ width: 40px;
410
+ height: 40px;
411
+ background: var(--gradient);
412
+ border-radius: 0.5rem;
413
+ display: flex;
414
+ align-items: center;
415
+ justify-content: center;
416
+ font-weight: 700;
417
+ }
418
+
419
+ .chapter-header h4 {
420
+ font-size: 1.1rem;
421
+ }
422
+
423
+ .chapter-header span {
424
+ color: var(--text-muted);
425
+ font-size: 0.875rem;
426
+ }
427
+
428
+ .chapter-toggle {
429
+ color: var(--text-muted);
430
+ transition: transform 0.3s ease;
431
+ }
432
+
433
+ .chapter.expanded .chapter-toggle {
434
+ transform: rotate(180deg);
435
+ }
436
+
437
+ .chapter-content {
438
+ max-height: 0;
439
+ overflow: hidden;
440
+ transition: max-height 0.5s ease;
441
+ }
442
+
443
+ .chapter.expanded .chapter-content {
444
+ max-height: 2000px;
445
+ }
446
+
447
+ .topics-list {
448
+ padding: 0 1.5rem 1.5rem;
449
+ display: flex;
450
+ flex-direction: column;
451
+ gap: 0.75rem;
452
+ }
453
+
454
+ .topic {
455
+ padding: 1rem 1.25rem;
456
+ background: var(--background);
457
+ border-radius: 0.75rem;
458
+ display: flex;
459
+ align-items: center;
460
+ justify-content: space-between;
461
+ cursor: pointer;
462
+ transition: all 0.3s ease;
463
+ border: 1px solid transparent;
464
+ }
465
+
466
+ .topic:hover {
467
+ background: var(--surface-light);
468
+ border-color: var(--primary);
469
+ }
470
+
471
+ .topic-info {
472
+ display: flex;
473
+ align-items: center;
474
+ gap: 1rem;
475
+ }
476
+
477
+ .topic-icon {
478
+ width: 40px;
479
+ height: 40px;
480
+ background: rgba(99, 102, 241, 0.2);
481
+ border-radius: 0.5rem;
482
+ display: flex;
483
+ align-items: center;
484
+ justify-content: center;
485
+ color: var(--primary-light);
486
+ }
487
+
488
+ .topic-title h5 {
489
+ font-size: 1rem;
490
+ margin-bottom: 0.25rem;
491
+ }
492
+
493
+ .topic-title span {
494
+ color: var(--text-muted);
495
+ font-size: 0.875rem;
496
+ }
497
+
498
+ .topic-action {
499
+ display: flex;
500
+ align-items: center;
501
+ gap: 0.5rem;
502
+ color: var(--primary-light);
503
+ font-size: 0.875rem;
504
+ }
505
+
506
+ /* Video Player Section */
507
+ .video-section {
508
+ display: none;
509
+ padding: 2rem;
510
+ max-width: 1200px;
511
+ margin: 0 auto;
512
+ }
513
+
514
+ .video-section.active {
515
+ display: block;
516
+ }
517
+
518
+ .video-container {
519
+ background: var(--surface);
520
+ border-radius: 1rem;
521
+ overflow: hidden;
522
+ border: 1px solid var(--surface-light);
523
+ }
524
+
525
+ .video-wrapper {
526
+ position: relative;
527
+ padding-top: 56.25%;
528
+ background: #000;
529
+ }
530
+
531
+ .video-wrapper iframe {
532
+ position: absolute;
533
+ top: 0;
534
+ left: 0;
535
+ width: 100%;
536
+ height: 100%;
537
+ border: none;
538
+ }
539
+
540
+ .video-placeholder {
541
+ position: absolute;
542
+ top: 0;
543
+ left: 0;
544
+ width: 100%;
545
+ height: 100%;
546
+ display: flex;
547
+ flex-direction: column;
548
+ align-items: center;
549
+ justify-content: center;
550
+ background: linear-gradient(135deg, var(--surface) 0%, var(--background) 100%);
551
+ }
552
+
553
+ .video-placeholder i {
554
+ font-size: 5rem;
555
+ color: var(--primary);
556
+ margin-bottom: 1rem;
557
+ }
558
+
559
+ .video-placeholder p {
560
+ color: var(--text-muted);
561
+ font-size: 1.25rem;
562
+ }
563
+
564
+ /* Custom Video Controls */
565
+ .video-controls {
566
+ padding: 1.5rem;
567
+ background: var(--surface);
568
+ }
569
+
570
+ .progress-bar {
571
+ width: 100%;
572
+ height: 6px;
573
+ background: var(--surface-light);
574
+ border-radius: 3px;
575
+ margin-bottom: 1rem;
576
+ cursor: pointer;
577
+ overflow: hidden;
578
+ }
579
+
580
+ .progress-fill {
581
+ height: 100%;
582
+ width: 35%;
583
+ background: var(--gradient);
584
+ border-radius: 3px;
585
+ transition: width 0.1s ease;
586
+ }
587
+
588
+ .controls-row {
589
+ display: flex;
590
+ justify-content: space-between;
591
+ align-items: center;
592
+ }
593
+
594
+ .control-group {
595
+ display: flex;
596
+ align-items: center;
597
+ gap: 1rem;
598
+ }
599
+
600
+ .control-btn {
601
+ width: 45px;
602
+ height: 45px;
603
+ border: none;
604
+ background: var(--surface-light);
605
+ color: var(--text);
606
+ border-radius: 50%;
607
+ cursor: pointer;
608
+ transition: all 0.3s ease;
609
+ display: flex;
610
+ align-items: center;
611
+ justify-content: center;
612
+ font-size: 1rem;
613
+ }
614
+
615
+ .control-btn:hover {
616
+ background: var(--primary);
617
+ transform: scale(1.1);
618
+ }
619
+
620
+ .control-btn.play-btn {
621
+ width: 55px;
622
+ height: 55px;
623
+ background: var(--gradient);
624
+ font-size: 1.25rem;
625
+ }
626
+
627
+ .volume-control {
628
+ display: flex;
629
+ align-items: center;
630
+ gap: 0.75rem;
631
+ }
632
+
633
+ .volume-slider {
634
+ width: 100px;
635
+ height: 6px;
636
+ background: var(--surface-light);
637
+ border-radius: 3px;
638
+ appearance: none;
639
+ cursor: pointer;
640
+ }
641
+
642
+ .volume-slider::-webkit-slider-thumb {
643
+ appearance: none;
644
+ width: 16px;
645
+ height: 16px;
646
+ background: var(--primary);
647
+ border-radius: 50%;
648
+ cursor: pointer;
649
+ }
650
+
651
+ .time-display {
652
+ color: var(--text-muted);
653
+ font-size: 0.875rem;
654
+ font-family: monospace;
655
+ }
656
+
657
+ .video-info {
658
+ padding: 1.5rem;
659
+ border-top: 1px solid var(--surface-light);
660
+ }
661
+
662
+ .video-info h3 {
663
+ font-size: 1.5rem;
664
+ margin-bottom: 0.5rem;
665
+ }
666
+
667
+ .video-info p {
668
+ color: var(--text-muted);
669
+ margin-bottom: 1rem;
670
+ }
671
+
672
+ .video-tags {
673
+ display: flex;
674
+ gap: 0.5rem;
675
+ flex-wrap: wrap;
676
+ }
677
+
678
+ .video-tag {
679
+ padding: 0.5rem 1rem;
680
+ background: rgba(99, 102, 241, 0.2);
681
+ color: var(--primary-light);
682
+ border-radius: 2rem;
683
+ font-size: 0.875rem;
684
+ }
685
+
686
+ /* Footer */
687
+ footer {
688
+ background: var(--surface);
689
+ border-top: 1px solid var(--surface-light);
690
+ padding: 3rem 2rem;
691
+ margin-top: 4rem;
692
+ }
693
+
694
+ .footer-content {
695
+ max-width: 1400px;
696
+ margin: 0 auto;
697
+ display: grid;
698
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
699
+ gap: 2rem;
700
+ }
701
+
702
+ .footer-section h4 {
703
+ font-size: 1.25rem;
704
+ margin-bottom: 1rem;
705
+ color: var(--text);
706
+ }
707
+
708
+ .footer-section p,
709
+ .footer-section a {
710
+ color: var(--text-muted);
711
+ text-decoration: none;
712
+ display: block;
713
+ margin-bottom: 0.5rem;
714
+ transition: color 0.3s ease;
715
+ }
716
+
717
+ .footer-section a:hover {
718
+ color: var(--primary-light);
719
+ }
720
+
721
+ .footer-bottom {
722
+ max-width: 1400px;
723
+ margin: 2rem auto 0;
724
+ padding-top: 2rem;
725
+ border-top: 1px solid var(--surface-light);
726
+ text-align: center;
727
+ color: var(--text-muted);
728
+ }
729
+
730
+ /* Responsive */
731
+ @media (max-width: 768px) {
732
+ .mobile-menu-btn {
733
+ display: block;
734
+ }
735
+
736
+ nav {
737
+ display: none;
738
+ position: absolute;
739
+ top: 100%;
740
+ left: 0;
741
+ right: 0;
742
+ background: var(--surface);
743
+ flex-direction: column;
744
+ padding: 1rem;
745
+ border-bottom: 1px solid var(--surface-light);
746
+ }
747
+
748
+ nav.active {
749
+ display: flex;
750
+ }
751
+
752
+ .hero {
753
+ padding: 2rem 1rem;
754
+ }
755
+
756
+ .subjects-section {
757
+ padding: 2rem 1rem;
758
+ }
759
+
760
+ .subject-header {
761
+ flex-direction: column;
762
+ text-align: center;
763
+ }
764
+
765
+ .controls-row {
766
+ flex-wrap: wrap;
767
+ gap: 1rem;
768
+ }
769
+
770
+ .volume-slider {
771
+ width: 60px;
772
+ }
773
+
774
+ .control-group {
775
+ gap: 0.5rem;
776
+ }
777
+ }
778
+
779
+ /* Animations */
780
+ @keyframes fadeIn {
781
+ from {
782
+ opacity: 0;
783
+ transform: translateY(20px);
784
+ }
785
+ to {
786
+ opacity: 1;
787
+ transform: translateY(0);
788
+ }
789
+ }
790
+
791
+ .subject-card {
792
+ animation: fadeIn 0.5s ease forwards;
793
+ }
794
+
795
+ .subject-card:nth-child(1) { animation-delay: 0.1s; }
796
+ .subject-card:nth-child(2) { animation-delay: 0.2s; }
797
+ .subject-card:nth-child(3) { animation-delay: 0.3s; }
798
+ .subject-card:nth-child(4) { animation-delay: 0.4s; }
799
+ .subject-card:nth-child(5) { animation-delay: 0.5s; }
800
+ .subject-card:nth-child(6) { animation-delay: 0.6s; }
801
+ .subject-card:nth-child(7) { animation-delay: 0.7s; }
802
+
803
+ /* Scrollbar */
804
+ ::-webkit-scrollbar {
805
+ width: 8px;
806
+ }
807
+
808
+ ::-webkit-scrollbar-track {
809
+ background: var(--background);
810
+ }
811
+
812
+ ::-webkit-scrollbar-thumb {
813
+ background: var(--surface-light);
814
+ border-radius: 4px;
815
+ }
816
+
817
+ ::-webkit-scrollbar-thumb:hover {
818
+ background: var(--primary);
819
+ }
820
+ </style>
821
+ </head>
822
+ <body>
823
+ <header>
824
+ <div class="header-container">
825
+ <div class="logo">
826
+ <i class="fas fa-graduation-cap"></i>
827
+ EduLearn
828
+ </div>
829
+ <nav id="nav">
830
+ <a href="#" onclick="showHome()">Home</a>
831
+ <a href="#">Courses</a>
832
+ <a href="#">About</a>
833
+ <a href="#">Contact</a>
834
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
835
+ </nav>
836
+ <button class="mobile-menu-btn" onclick="toggleMenu()">
837
+ <i class="fas fa-bars"></i>
838
+ </button>
839
+ </div>
840
+ </header>
841
+
842
+ <main>
843
+ <!-- Home View -->
844
+ <section id="homeView">
845
+ <div class="hero">
846
+ <h1>Master Your Skills with EduLearn</h1>
847
+ <p>Explore our comprehensive courses designed to help you excel in your academic journey and beyond.</p>
848
+ <div class="search-box">
849
+ <i class="fas fa-search"></i>
850
+ <input type="text" placeholder="Search for subjects, topics, or lessons...">
851
+ </div>
852
+ </div>
853
+
854
+ <div class="subjects-section">
855
+ <h2 class="section-title"><i class="fas fa-book-open"></i> Available Subjects</h2>
856
+ <div class="subjects-grid" id="subjectsGrid">
857
+ <!-- Subject cards will be dynamically inserted -->
858
+ </div>
859
+ </div>
860
+ </section>
861
+
862
+ <!-- Subject Detail View -->
863
+ <section class="subject-detail" id="subjectDetail">
864
+ <button class="back-btn" onclick="showHome()">
865
+ <i class="fas fa-arrow-left"></i> Back to Subjects
866
+ </button>
867
+ <div class="subject-header" id="subjectHeader">
868
+ <!-- Dynamic content -->
869
+ </div>
870
+ <h3 class="section-title"><i class="fas fa-list"></i> Chapters</h3>
871
+ <div class="chapters-list" id="chaptersList">
872
+ <!-- Dynamic content -->
873
+ </div>
874
+ </section>
875
+
876
+ <!-- Video Player View -->
877
+ <section class="video-section" id="videoSection">
878
+ <button class="back-btn" onclick="backToSubject()">
879
+ <i class="fas fa-arrow-left"></i> Back to Chapters
880
+ </button>
881
+ <div class="video-container">
882
+ <div class="video-wrapper">
883
+ <div class="video-placeholder" id="videoPlaceholder">
884
+ <i class="fas fa-play-circle"></i>
885
+ <p>Click play to start learning</p>
886
+ </div>
887
+ </div>
888
+ <div class="video-controls">
889
+ <div class="progress-bar" id="progressBar">
890
+ <div class="progress-fill" id="progressFill"></div>
891
+ </div>
892
+ <div class="controls-row">
893
+ <div class="control-group">
894
+ <button class="control-btn" onclick="skipBack()">
895
+ <i class="fas fa-backward"></i>
896
+ </button>
897
+ <button class="control-btn play-btn" onclick="togglePlay()">
898
+ <i class="fas fa-play" id="playIcon"></i>
899
+ </button>
900
+ <button class="control-btn" onclick="skipForward()">
901
+ <i class="fas fa-forward"></i>
902
+ </button>
903
+ <span class="time-display">05:23 / 15:47</span>
904
+ </div>
905
+ <div class="control-group">
906
+ <div class="volume-control">
907
+ <button class="control-btn" onclick="toggleMute()">
908
+ <i class="fas fa-volume-up" id="volumeIcon"></i>
909
+ </button>
910
+ <input type="range" class="volume-slider" min="0" max="100" value="75">
911
+ </div>
912
+ <button class="control-btn" onclick="toggleFullscreen()">
913
+ <i class="fas fa-expand"></i>
914
+ </button>
915
+ <button class="control-btn">
916
+ <i class="fas fa-cog"></i>
917
+ </button>
918
+ </div>
919
+ </div>
920
+ </div>
921
+ <div class="video-info" id="videoInfo">
922
+ <!-- Dynamic content -->
923
+ </div>
924
+ </div>
925
+ </section>
926
+ </main>
927
+
928
+ <footer>
929
+ <div class="footer-content">
930
+ <div class="footer-section">
931
+ <h4>EduLearn</h4>
932
+ <p>Empowering students with quality education and comprehensive learning resources.</p>
933
+ </div>
934
+ <div class="footer-section">
935
+ <h4>Quick Links</h4>
936
+ <a href="#">Home</a>
937
+ <a href="#">Courses</a>
938
+ <a href="#">About Us</a>
939
+ <a href="#">Contact</a>
940
+ </div>
941
+ <div class="footer-section">
942
+ <h4>Subjects</h4>
943
+ <a href="#">Business Communication</a>
944
+ <a href="#">Java Programming</a>
945
+ <a href="#">Data Structures</a>
946
+ <a href="#">Web Development</a>
947
+ </div>
948
+ <div class="footer-section">
949
+ <h4>Connect With Us</h4>
950
+ <p><i class="fas fa-envelope"></i> support@edulearn.com</p>
951
+ <p><i class="fas fa-phone"></i> +1 234 567 890</p>
952
+ </div>
953
+ </div>
954
+ <div class="footer-bottom">
955
+ <p>&copy; 2024 EduLearn. All rights reserved. | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-light);">Built with anycoder</a></p>
956
+ </div>
957
+ </footer>
958
+
959
+ <script>
960
+ // Sample Data
961
+ const subjects = [
962
+ {
963
+ id: 'business',
964
+ name: 'Business Communication',
965
+ description: 'Master the art of professional communication in business settings.',
966
+ icon: 'fa-briefcase',
967
+ chapters: 8,
968
+ duration: '24 hours',
969
+ chaptersData: [
970
+ {
971
+ id: 1,
972
+ title: 'Introduction to Business Communication',
973
+ topics: [
974
+ { title: 'What is Business Communication?', duration: '12:30' },
975
+ { title: 'Importance of Effective Communication', duration: '15:45' },
976
+ { title: 'Types of Business Communication', duration: '18:20' },
977
+ { title: 'Communication Barriers', duration: '14:10' }
978
+ ]
979
+ },
980
+ {
981
+ id: 2,
982
+ title: 'Written Communication',
983
+ topics: [
984
+ { title: 'Business Letter Writing', duration: '20:15' },
985
+ { title: 'Email Etiquette', duration: '16:30' },
986
+ { title: 'Report Writing', duration: '25:00' },
987
+ { title: 'Proposal Writing', duration: '22:45' }
988
+ ]
989
+ },
990
+ {
991
+ id: 3,
992
+ title: 'Oral Communication',
993
+ topics: [
994
+ { title: 'Presentation Skills', duration: '18:00' },
995
+ { title: 'Meeting Management', duration: '15:30' },
996
+ { title: 'Negotiation Techniques', duration: '20:00' }
997
+ ]
998
+ }
999
+ ]
1000
+ },
1001
+ {
1002
+ id: 'digital',
1003
+ name: 'Digital Electronics-II',
1004
+ description: 'Advanced concepts in digital circuits and systems design.',
1005
+ icon: 'fa-microchip',
1006
+ chapters: 10,
1007
+ duration: '32 hours',
1008
+ chaptersData: [
1009
+ {
1010
+ id: 1,
1011
+ title: 'Sequential Logic Circuits',
1012
+ topics: [
1013
+ { title: 'Flip-Flops Types and Applications', duration: '22:30' },
1014
+ { title: 'Registers and Counters', duration: '25:15' },
1015
+ { title: 'Shift Registers', duration: '18:45' }
1016
+ ]
1017
+ },
1018
+ {
1019
+ id: 2,
1020
+ title: 'Memory Devices',
1021
+ topics: [
1022
+ { title: 'RAM and ROM Architecture', duration: '28:00' },
1023
+ { title: 'Flash Memory', duration: '20:30' },
1024
+ { title: 'Memory Interfacing', duration: '24:15' }
1025
+ ]
1026
+ },
1027
+ {
1028
+ id: 3,
1029
+ title: 'Programmable Logic Devices',
1030
+ topics: [
1031
+ { title: 'Introduction to PLDs', duration: '15:00' },
1032
+ { title: 'FPGA Architecture', duration: '30:00' },
1033
+ { title: 'VHDL Basics', duration: '35:00' }
1034
+ ]
1035
+ }
1036
+ ]
1037
+ },
1038
+ {
1039
+ id: 'java',
1040
+ name: 'Java Programming',
1041
+ description: 'Learn object-oriented programming with Java from basics to advanced.',
1042
+ icon: 'fa-code',
1043
+ chapters: 12,
1044
+ duration: '40 hours',
1045
+ chaptersData: [
1046
+ {
1047
+ id: 1,
1048
+ title: 'Java Fundamentals',
1049
+ topics: [
1050
+ { title: 'Introduction to Java', duration: '15:00' },
1051
+ { title: 'Variables and Data Types', duration: '20:30' },
1052
+ { title: 'Operators in Java', duration: '18:15' },
1053
+ { title: 'Control Statements', duration: '25:00' }
1054
+ ]
1055
+ },
1056
+ {
1057
+ id: 2,
1058
+ title: 'Object-Oriented Programming',
1059
+ topics: [
1060
+ { title: 'Classes and Objects', duration: '28:00' },
1061
+ { title: 'Inheritance', duration: '32:15' },
1062
+ { title: 'Polymorphism', duration: '26:30' },
1063
+ { title: 'Abstraction and Encapsulation', duration: '24:00' }
1064
+ ]
1065
+ },
1066
+ {
1067
+ id: 3,
1068
+ title: 'Exception Handling',
1069
+ topics: [
1070
+ { title: 'Try-Catch Blocks', duration: '18:00' },
1071
+ { title: 'Custom Exceptions', duration: '15:30' },
1072
+ { title: 'Best Practices', duration: '12:45' }
1073
+ ]
1074
+ },
1075
+ {
1076
+ id: 4,
1077
+ title: 'Collections Framework',
1078
+ topics: [
1079
+ { title: 'List Interface', duration: '22:00' },
1080
+ { title: 'Set and Map', duration: '25:30' },
1081
+ { title: 'Iterators', duration: '16:00' }
1082
+ ]
1083
+ }
1084
+ ]
1085
+ },
1086
+ {
1087
+ id: 'dsa',
1088
+ name: 'Data Structure & Algorithm',
1089
+ description: 'Master fundamental data structures and algorithmic problem solving.',
1090
+ icon: 'fa-project-diagram',
1091
+ chapters: 15,
1092
+ duration: '48 hours',
1093
+ chaptersData: [
1094
+ {
1095
+ id: 1,
1096
+ title: 'Arrays and Strings',
1097
+ topics: [
1098
+ { title: 'Array Operations', duration: '20:00' },
1099
+ { title: 'String Manipulation', duration: '22:30' },
1100
+ { title: 'Two Pointer Technique', duration: '25:15' }
1101
+ ]
1102
+ },
1103
+ {
1104
+ id: 2,
1105
+ title: 'Linked Lists',
1106
+ topics: [
1107
+ { title: 'Singly Linked List', duration: '28:00' },
1108
+ { title: 'Doubly Linked List', duration: '24:30' },
1109
+ { title: 'Circular Linked List', duration: '20:00' }
1110
+ ]
1111
+ },
1112
+ {
1113
+ id: 3,
1114
+ title: 'Stacks and Queues',
1115
+ topics: [
1116
+ { title: 'Stack Implementation', duration: '18:00' },
1117
+ { title: 'Queue Variations', duration: '22:00' },
1118
+ { title: 'Applications', duration: '25:30' }
1119
+ ]
1120
+ },
1121
+ {
1122
+ id: 4,
1123
+ title: 'Trees and Graphs',
1124
+ topics: [
1125
+ { title: 'Binary Trees', duration: '30:00' },
1126
+ { title: 'BST Operations', duration: '28:00' },
1127
+ { title: 'Graph Traversals', duration: '35:00' }
1128
+ ]
1129
+ }
1130
+ ]
1131
+ },
1132
+ {
1133
+ id: 'peripheral',
1134
+ name: 'Computer Peripherals & Interfacing',
1135
+ description: 'Understanding hardware components and their interfacing techniques.',
1136
+ icon: 'fa-keyboard',
1137
+ chapters: 9,
1138
+ duration: '28 hours',
1139
+ chaptersData: [
1140
+ {
1141
+ id: 1,
1142
+ title: 'Input Devices',
1143
+ topics: [
1144
+ { title: 'Keyboard Interfacing', duration: '20:00' },
1145
+ { title: 'Mouse and Touchpad', duration: '18:30' },
1146
+ { title: 'Scanner Technology', duration: '22:15' }
1147
+ ]
1148
+ },
1149
+ {
1150
+ id: 2,
1151
+ title: 'Output Devices',
1152
+ topics: [
1153
+ { title: 'Display Technologies', duration: '25:00' },
1154
+ { title: 'Printer Types', duration: '20:30' },
1155
+ { title: 'Audio Systems', duration: '18:00' }
1156
+ ]
1157
+ },
1158
+ {
1159
+ id: 3,
1160
+ title: 'Storage Devices',
1161
+ topics: [
1162
+ { title: 'HDD Architecture', duration: '28:00' },
1163
+ { title: 'SSD Technology', duration: '24:00' },
1164
+ { title: 'Optical Storage', duration: '16:30' }
1165
+ ]
1166
+ }
1167
+ ]
1168
+ },
1169
+ {
1170
+ id: 'web',
1171
+ name: 'Web Design & Development - I',
1172
+ description: 'Create stunning websites with HTML, CSS, and JavaScript.',
1173
+ icon: 'fa-globe',
1174
+ chapters: 11,
1175
+ duration: '36 hours',
1176
+ chaptersData: [
1177
+ {
1178
+ id: 1,
1179
+ title: 'HTML Fundamentals',
1180
+ topics: [
1181
+ { title: 'HTML Structure', duration: '15:00' },
1182
+ { title: 'Semantic Elements', duration: '18:30' },