Hugging Face's logo

Spaces:
saeedkamel
/
saeed-kamel
Running

App Files Community
saeedkamel commited on
Commit
a074b87
·
verified ·
1 Parent(s): 4400607

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1651 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Saeed Kamel
3
- emoji: 🦀
4
- colorFrom: indigo
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: saeed-kamel
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1651 @@
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>LearnHub - E-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
+ :root {
10
+ --primary: #4a6bff;
11
+ --secondary: #f8f9fa;
12
+ --accent: #ff6b6b;
13
+ --dark: #343a40;
14
+ --light: #ffffff;
15
+ --success: #28a745;
16
+ --text: #2c3e50;
17
+ --text-light: #7f8c8d;
18
+ --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
27
+
28
+ body {
29
+ background-color: var(--secondary);
30
+ color: var(--text);
31
+ line-height: 1.6;
32
+ }
33
+
34
+ .container {
35
+ max-width: 1200px;
36
+ margin: 0 auto;
37
+ padding: 0 20px;
38
+ }
39
+
40
+ /* Header */
41
+ header {
42
+ background-color: var(--light);
43
+ box-shadow: var(--shadow);
44
+ position: sticky;
45
+ top: 0;
46
+ z-index: 100;
47
+ }
48
+
49
+ .navbar {
50
+ display: flex;
51
+ justify-content: space-between;
52
+ align-items: center;
53
+ padding: 20px 0;
54
+ }
55
+
56
+ .logo {
57
+ font-size: 24px;
58
+ font-weight: 700;
59
+ color: var(--primary);
60
+ text-decoration: none;
61
+ display: flex;
62
+ align-items: center;
63
+ }
64
+
65
+ .logo i {
66
+ margin-right: 10px;
67
+ font-size: 28px;
68
+ }
69
+
70
+ .nav-links {
71
+ display: flex;
72
+ gap: 30px;
73
+ }
74
+
75
+ .nav-links a {
76
+ text-decoration: none;
77
+ color: var(--text);
78
+ font-weight: 500;
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .nav-links a:hover {
83
+ color: var(--primary);
84
+ }
85
+
86
+ .auth-buttons {
87
+ display: flex;
88
+ gap: 15px;
89
+ }
90
+
91
+ .btn {
92
+ padding: 10px 20px;
93
+ border-radius: 5px;
94
+ font-weight: 600;
95
+ cursor: pointer;
96
+ transition: all 0.3s ease;
97
+ border: none;
98
+ }
99
+
100
+ .btn-primary {
101
+ background-color: var(--primary);
102
+ color: var(--light);
103
+ }
104
+
105
+ .btn-outline {
106
+ background-color: transparent;
107
+ border: 2px solid var(--primary);
108
+ color: var(--primary);
109
+ }
110
+
111
+ .btn-primary:hover {
112
+ background-color: #3a56d4;
113
+ }
114
+
115
+ .btn-outline:hover {
116
+ background-color: var(--primary);
117
+ color: var(--light);
118
+ }
119
+
120
+ .hamburger {
121
+ display: none;
122
+ cursor: pointer;
123
+ font-size: 24px;
124
+ }
125
+
126
+ /* Hero Section */
127
+ .hero {
128
+ padding: 80px 0;
129
+ background: linear-gradient(135deg, #f5f7fa 0%, #e8edf5 100%);
130
+ }
131
+
132
+ .hero-content {
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: space-between;
136
+ gap: 50px;
137
+ }
138
+
139
+ .hero-text {
140
+ flex: 1;
141
+ }
142
+
143
+ .hero-text h1 {
144
+ font-size: 48px;
145
+ margin-bottom: 20px;
146
+ color: var(--dark);
147
+ }
148
+
149
+ .hero-text p {
150
+ font-size: 18px;
151
+ color: var(--text-light);
152
+ margin-bottom: 30px;
153
+ }
154
+
155
+ .hero-image {
156
+ flex: 1;
157
+ text-align: center;
158
+ }
159
+
160
+ .hero-image img {
161
+ max-width: 100%;
162
+ border-radius: 10px;
163
+ box-shadow: var(--shadow);
164
+ }
165
+
166
+ /* Features */
167
+ .features {
168
+ padding: 80px 0;
169
+ }
170
+
171
+ .section-title {
172
+ text-align: center;
173
+ margin-bottom: 50px;
174
+ }
175
+
176
+ .section-title h2 {
177
+ font-size: 36px;
178
+ color: var(--dark);
179
+ margin-bottom: 15px;
180
+ }
181
+
182
+ .section-title p {
183
+ color: var(--text-light);
184
+ max-width: 700px;
185
+ margin: 0 auto;
186
+ }
187
+
188
+ .features-grid {
189
+ display: grid;
190
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
191
+ gap: 30px;
192
+ }
193
+
194
+ .feature-card {
195
+ background-color: var(--light);
196
+ border-radius: 10px;
197
+ padding: 30px;
198
+ box-shadow: var(--shadow);
199
+ transition: transform 0.3s ease;
200
+ }
201
+
202
+ .feature-card:hover {
203
+ transform: translateY(-10px);
204
+ }
205
+
206
+ .feature-icon {
207
+ font-size: 40px;
208
+ color: var(--primary);
209
+ margin-bottom: 20px;
210
+ }
211
+
212
+ .feature-card h3 {
213
+ font-size: 22px;
214
+ margin-bottom: 15px;
215
+ }
216
+
217
+ /* Courses */
218
+ .courses {
219
+ padding: 80px 0;
220
+ background-color: var(--light);
221
+ }
222
+
223
+ .courses-grid {
224
+ display: grid;
225
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
226
+ gap: 30px;
227
+ }
228
+
229
+ .course-card {
230
+ background-color: var(--light);
231
+ border-radius: 10px;
232
+ overflow: hidden;
233
+ box-shadow: var(--shadow);
234
+ transition: transform 0.3s ease;
235
+ }
236
+
237
+ .course-card:hover {
238
+ transform: translateY(-10px);
239
+ }
240
+
241
+ .course-image {
242
+ height: 200px;
243
+ width: 100%;
244
+ object-fit: cover;
245
+ }
246
+
247
+ .course-details {
248
+ padding: 20px;
249
+ }
250
+
251
+ .course-category {
252
+ display: inline-block;
253
+ background-color: var(--primary);
254
+ color: var(--light);
255
+ padding: 5px 10px;
256
+ border-radius: 20px;
257
+ font-size: 12px;
258
+ margin-bottom: 10px;
259
+ }
260
+
261
+ .course-title {
262
+ font-size: 20px;
263
+ margin-bottom: 10px;
264
+ }
265
+
266
+ .course-instructor {
267
+ color: var(--text-light);
268
+ margin-bottom: 15px;
269
+ font-size: 14px;
270
+ }
271
+
272
+ .course-price {
273
+ font-weight: 700;
274
+ color: var(--primary);
275
+ font-size: 18px;
276
+ margin-bottom: 15px;
277
+ }
278
+
279
+ .course-meta {
280
+ display: flex;
281
+ justify-content: space-between;
282
+ font-size: 14px;
283
+ color: var(--text-light);
284
+ }
285
+
286
+ /* Testimonials */
287
+ .testimonials {
288
+ padding: 80px 0;
289
+ background: linear-gradient(135deg, #f5f7fa 0%, #e8edf5 100%);
290
+ }
291
+
292
+ .testimonials-slider {
293
+ max-width: 800px;
294
+ margin: 0 auto;
295
+ position: relative;
296
+ }
297
+
298
+ .testimonial {
299
+ background-color: var(--light);
300
+ padding: 30px;
301
+ border-radius: 10px;
302
+ box-shadow: var(--shadow);
303
+ text-align: center;
304
+ display: none;
305
+ }
306
+
307
+ .testimonial.active {
308
+ display: block;
309
+ animation: fadeIn 0.5s ease;
310
+ }
311
+
312
+ @keyframes fadeIn {
313
+ from { opacity: 0; }
314
+ to { opacity: 1; }
315
+ }
316
+
317
+ .testimonial-text {
318
+ font-size: 18px;
319
+ font-style: italic;
320
+ margin-bottom: 20px;
321
+ }
322
+
323
+ .testimonial-author {
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ }
328
+
329
+ .author-avatar {
330
+ width: 50px;
331
+ height: 50px;
332
+ border-radius: 50%;
333
+ margin-right: 15px;
334
+ object-fit: cover;
335
+ }
336
+
337
+ .author-info h4 {
338
+ margin-bottom: 5px;
339
+ }
340
+
341
+ .author-info p {
342
+ color: var(--text-light);
343
+ font-size: 14px;
344
+ }
345
+
346
+ .slider-controls {
347
+ display: flex;
348
+ justify-content: center;
349
+ margin-top: 30px;
350
+ gap: 10px;
351
+ }
352
+
353
+ .slider-dot {
354
+ width: 12px;
355
+ height: 12px;
356
+ border-radius: 50%;
357
+ background-color: var(--text-light);
358
+ cursor: pointer;
359
+ transition: all 0.3s ease;
360
+ }
361
+
362
+ .slider-dot.active {
363
+ background-color: var(--primary);
364
+ }
365
+
366
+ /* Pricing */
367
+ .pricing {
368
+ padding: 80px 0;
369
+ }
370
+
371
+ .pricing-cards {
372
+ display: grid;
373
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
374
+ gap: 30px;
375
+ max-width: 1000px;
376
+ margin: 0 auto;
377
+ }
378
+
379
+ .pricing-card {
380
+ background-color: var(--light);
381
+ border-radius: 10px;
382
+ padding: 40px 30px;
383
+ box-shadow: var(--shadow);
384
+ text-align: center;
385
+ transition: transform 0.3s ease;
386
+ position: relative;
387
+ overflow: hidden;
388
+ }
389
+
390
+ .pricing-card:hover {
391
+ transform: translateY(-10px);
392
+ }
393
+
394
+ .pricing-card.popular {
395
+ border: 2px solid var(--primary);
396
+ }
397
+
398
+ .popular-tag {
399
+ position: absolute;
400
+ top: 0;
401
+ right: 20px;
402
+ background-color: var(--primary);
403
+ color: var(--light);
404
+ padding: 5px 15px;
405
+ border-bottom-left-radius: 5px;
406
+ border-bottom-right-radius: 5px;
407
+ font-size: 14px;
408
+ font-weight: 500;
409
+ }
410
+
411
+ .pricing-title {
412
+ font-size: 22px;
413
+ margin-bottom: 20px;
414
+ }
415
+
416
+ .pricing-price {
417
+ font-size: 40px;
418
+ font-weight: 700;
419
+ color: var(--primary);
420
+ margin-bottom: 20px;
421
+ }
422
+
423
+ .pricing-price span {
424
+ font-size: 16px;
425
+ font-weight: 400;
426
+ }
427
+
428
+ .pricing-features {
429
+ margin-bottom: 30px;
430
+ text-align: left;
431
+ }
432
+
433
+ .pricing-feature {
434
+ display: flex;
435
+ align-items: center;
436
+ margin-bottom: 10px;
437
+ }
438
+
439
+ .pricing-feature i {
440
+ color: var(--success);
441
+ margin-right: 10px;
442
+ }
443
+
444
+ /* Dashboard Layout */
445
+ .dashboard {
446
+ display: flex;
447
+ min-height: calc(100vh - 80px);
448
+ }
449
+
450
+ .sidebar {
451
+ width: 250px;
452
+ background-color: var(--dark);
453
+ color: var(--light);
454
+ padding: 30px 0;
455
+ }
456
+
457
+ .sidebar-brand {
458
+ padding: 0 20px 20px;
459
+ font-size: 20px;
460
+ font-weight: 600;
461
+ display: flex;
462
+ align-items: center;
463
+ }
464
+
465
+ .sidebar-brand i {
466
+ margin-right: 10px;
467
+ }
468
+
469
+ .sidebar-menu {
470
+ margin-top: 20px;
471
+ }
472
+
473
+ .menu-item {
474
+ padding: 15px 20px;
475
+ cursor: pointer;
476
+ transition: all 0.3s ease;
477
+ display: flex;
478
+ align-items: center;
479
+ }
480
+
481
+ .menu-item:hover {
482
+ background-color: rgba(255, 255, 255, 0.1);
483
+ }
484
+
485
+ .menu-item.active {
486
+ background-color: var(--primary);
487
+ }
488
+
489
+ .menu-item i {
490
+ margin-right: 10px;
491
+ font-size: 18px;
492
+ }
493
+
494
+ .main-content {
495
+ flex: 1;
496
+ padding: 30px;
497
+ background-color: var(--secondary);
498
+ }
499
+
500
+ .dashboard-header {
501
+ display: flex;
502
+ justify-content: space-between;
503
+ align-items: center;
504
+ margin-bottom: 30px;
505
+ }
506
+
507
+ .dashboard-title {
508
+ font-size: 24px;
509
+ font-weight: 600;
510
+ }
511
+
512
+ .user-profile {
513
+ display: flex;
514
+ align-items: center;
515
+ gap: 15px;
516
+ }
517
+
518
+ .user-avatar {
519
+ width: 40px;
520
+ height: 40px;
521
+ border-radius: 50%;
522
+ object-fit: cover;
523
+ }
524
+
525
+ /* Stats Cards */
526
+ .stats-grid {
527
+ display: grid;
528
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
529
+ gap: 20px;
530
+ margin-bottom: 30px;
531
+ }
532
+
533
+ .stat-card {
534
+ background-color: var(--light);
535
+ border-radius: 10px;
536
+ padding: 20px;
537
+ box-shadow: var(--shadow);
538
+ display: flex;
539
+ align-items: center;
540
+ justify-content: space-between;
541
+ }
542
+
543
+ .stat-info h3 {
544
+ font-size: 14px;
545
+ color: var(--text-light);
546
+ margin-bottom: 10px;
547
+ }
548
+
549
+ .stat-info p {
550
+ font-size: 24px;
551
+ font-weight: 700;
552
+ }
553
+
554
+ .stat-icon {
555
+ width: 60px;
556
+ height: 60px;
557
+ border-radius: 50%;
558
+ display: flex;
559
+ align-items: center;
560
+ justify-content: center;
561
+ font-size: 24px;
562
+ }
563
+
564
+ .stat-icon.primary {
565
+ background-color: rgba(74, 107, 255, 0.1);
566
+ color: var(--primary);
567
+ }
568
+
569
+ .stat-icon.success {
570
+ background-color: rgba(40, 167, 69, 0.1);
571
+ color: var(--success);
572
+ }
573
+
574
+ .stat-icon.accent {
575
+ background-color: rgba(255, 107, 107, 0.1);
576
+ color: var(--accent);
577
+ }
578
+
579
+ .stat-icon.dark {
580
+ background-color: rgba(52, 58, 64, 0.1);
581
+ color: var(--dark);
582
+ }
583
+
584
+ /* Courses Table */
585
+ .courses-table {
586
+ background-color: var(--light);
587
+ border-radius: 10px;
588
+ box-shadow: var(--shadow);
589
+ overflow: hidden;
590
+ }
591
+
592
+ table {
593
+ width: 100%;
594
+ border-collapse: collapse;
595
+ }
596
+
597
+ th, td {
598
+ padding: 15px;
599
+ text-align: left;
600
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
601
+ }
602
+
603
+ th {
604
+ background-color: var(--primary);
605
+ color: var(--light);
606
+ font-weight: 500;
607
+ }
608
+
609
+ tr:hover {
610
+ background-color: rgba(0, 0, 0, 0.02);
611
+ }
612
+
613
+ .status {
614
+ padding: 5px 10px;
615
+ border-radius: 20px;
616
+ font-size: 12px;
617
+ font-weight: 500;
618
+ }
619
+
620
+ .status.active {
621
+ background-color: rgba(40, 167, 69, 0.1);
622
+ color: var(--success);
623
+ }
624
+
625
+ .status.pending {
626
+ background-color: rgba(255, 193, 7, 0.1);
627
+ color: #ffc107;
628
+ }
629
+
630
+ .status.cancelled {
631
+ background-color: rgba(220, 53, 69, 0.1);
632
+ color: #dc3545;
633
+ }
634
+
635
+ .action-btn {
636
+ padding: 5px 10px;
637
+ border-radius: 5px;
638
+ font-size: 12px;
639
+ cursor: pointer;
640
+ border: none;
641
+ margin-right: 5px;
642
+ }
643
+
644
+ .action-btn.view {
645
+ background-color: rgba(74, 107, 255, 0.1);
646
+ color: var(--primary);
647
+ }
648
+
649
+ .action-btn.edit {
650
+ background-color: rgba(255, 193, 7, 0.1);
651
+ color: #ffc107;
652
+ }
653
+
654
+ .action-btn.delete {
655
+ background-color: rgba(220, 53, 69, 0.1);
656
+ color: #dc3545;
657
+ }
658
+
659
+ /* Modal */
660
+ .modal {
661
+ display: none;
662
+ position: fixed;
663
+ top: 0;
664
+ left: 0;
665
+ width: 100%;
666
+ height: 100%;
667
+ background-color: rgba(0, 0, 0, 0.5);
668
+ z-index: 1000;
669
+ align-items: center;
670
+ justify-content: center;
671
+ }
672
+
673
+ .modal.active {
674
+ display: flex;
675
+ }
676
+
677
+ .modal-content {
678
+ background-color: var(--light);
679
+ border-radius: 10px;
680
+ width: 500px;
681
+ max-width: 90%;
682
+ max-height: 90vh;
683
+ overflow-y: auto;
684
+ box-shadow: var(--shadow);
685
+ animation: modalFadeIn 0.3s ease;
686
+ }
687
+
688
+ @keyframes modalFadeIn {
689
+ from {
690
+ opacity: 0;
691
+ transform: translateY(-50px);
692
+ }
693
+ to {
694
+ opacity: 1;
695
+ transform: translateY(0);
696
+ }
697
+ }
698
+
699
+ .modal-header {
700
+ padding: 20px;
701
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
702
+ display: flex;
703
+ justify-content: space-between;
704
+ align-items: center;
705
+ }
706
+
707
+ .modal-title {
708
+ font-size: 20px;
709
+ font-weight: 600;
710
+ }
711
+
712
+ .close-modal {
713
+ font-size: 24px;
714
+ cursor: pointer;
715
+ color: var(--text-light);
716
+ }
717
+
718
+ .modal-body {
719
+ padding: 20px;
720
+ }
721
+
722
+ .form-group {
723
+ margin-bottom: 20px;
724
+ }
725
+
726
+ .form-group label {
727
+ display: block;
728
+ margin-bottom: 8px;
729
+ font-weight: 500;
730
+ }
731
+
732
+ .form-control {
733
+ width: 100%;
734
+ padding: 12px;
735
+ border: 1px solid rgba(0, 0, 0, 0.1);
736
+ border-radius: 5px;
737
+ font-size: 16px;
738
+ transition: all 0.3s ease;
739
+ }
740
+
741
+ .form-control:focus {
742
+ border-color: var(--primary);
743
+ outline: none;
744
+ box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.2);
745
+ }
746
+
747
+ .modal-footer {
748
+ padding: 20px;
749
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
750
+ display: flex;
751
+ justify-content: flex-end;
752
+ gap: 10px;
753
+ }
754
+
755
+ /* Payment Form */
756
+ .payment-card {
757
+ background-color: var(--light);
758
+ border-radius: 10px;
759
+ padding: 20px;
760
+ box-shadow: var(--shadow);
761
+ margin-bottom: 20px;
762
+ }
763
+
764
+ .payment-header {
765
+ display: flex;
766
+ justify-content: space-between;
767
+ align-items: center;
768
+ margin-bottom: 20px;
769
+ }
770
+
771
+ .payment-methods {
772
+ display: flex;
773
+ gap: 15px;
774
+ margin-bottom: 20px;
775
+ }
776
+
777
+ .payment-method {
778
+ flex: 1;
779
+ padding: 15px;
780
+ border: 1px solid rgba(0, 0, 0, 0.1);
781
+ border-radius: 5px;
782
+ display: flex;
783
+ align-items: center;
784
+ justify-content: center;
785
+ cursor: pointer;
786
+ transition: all 0.3s ease;
787
+ }
788
+
789
+ .payment-method.active {
790
+ border-color: var(--primary);
791
+ background-color: rgba(74, 107, 255, 0.05);
792
+ }
793
+
794
+ .payment-method i {
795
+ font-size: 24px;
796
+ margin-right: 10px;
797
+ }
798
+
799
+ /* Footer */
800
+ footer {
801
+ background-color: var(--dark);
802
+ color: var(--light);
803
+ padding: 60px 0 20px;
804
+ }
805
+
806
+ .footer-content {
807
+ display: grid;
808
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
809
+ gap: 30px;
810
+ margin-bottom: 40px;
811
+ }
812
+
813
+ .footer-logo {
814
+ font-size: 24px;
815
+ font-weight: 700;
816
+ color: var(--light);
817
+ text-decoration: none;
818
+ display: flex;
819
+ align-items: center;
820
+ margin-bottom: 20px;
821
+ }
822
+
823
+ .footer-logo i {
824
+ margin-right: 10px;
825
+ }
826
+
827
+ .footer-about p {
828
+ margin-bottom: 20px;
829
+ color: rgba(255, 255, 255, 0.7);
830
+ }
831
+
832
+ .social-links {
833
+ display: flex;
834
+ gap: 15px;
835
+ }
836
+
837
+ .social-link {
838
+ width: 40px;
839
+ height: 40px;
840
+ border-radius: 50%;
841
+ background-color: rgba(255, 255, 255, 0.1);
842
+ display: flex;
843
+ align-items: center;
844
+ justify-content: center;
845
+ color: var(--light);
846
+ text-decoration: none;
847
+ transition: all 0.3s ease;
848
+ }
849
+
850
+ .social-link:hover {
851
+ background-color: var(--primary);
852
+ }
853
+
854
+ .footer-links h3 {
855
+ font-size: 18px;
856
+ margin-bottom: 20px;
857
+ position: relative;
858
+ padding-bottom: 10px;
859
+ }
860
+
861
+ .footer-links h3::after {
862
+ content: '';
863
+ position: absolute;
864
+ bottom: 0;
865
+ left: 0;
866
+ width: 40px;
867
+ height: 2px;
868
+ background-color: var(--primary);
869
+ }
870
+
871
+ .footer-links ul {
872
+ list-style: none;
873
+ }
874
+
875
+ .footer-links li {
876
+ margin-bottom: 10px;
877
+ }
878
+
879
+ .footer-links a {
880
+ color: rgba(255, 255, 255, 0.7);
881
+ text-decoration: none;
882
+ transition: all 0.3s ease;
883
+ }
884
+
885
+ .footer-links a:hover {
886
+ color: var(--light);
887
+ padding-left: 5px;
888
+ }
889
+
890
+ .footer-newsletter p {
891
+ color: rgba(255, 255, 255, 0.7);
892
+ margin-bottom: 20px;
893
+ }
894
+
895
+ .newsletter-form {
896
+ display: flex;
897
+ }
898
+
899
+ .newsletter-input {
900
+ flex: 1;
901
+ padding: 12px;
902
+ border: none;
903
+ border-radius: 5px 0 0 5px;
904
+ background-color: rgba(255, 255, 255, 0.1);
905
+ color: var(--light);
906
+ }
907
+
908
+ .newsletter-input::placeholder {
909
+ color: rgba(255, 255, 255, 0.5);
910
+ }
911
+
912
+ .newsletter-btn {
913
+ background-color: var(--primary);
914
+ color: var(--light);
915
+ border: none;
916
+ padding: 0 20px;
917
+ border-radius: 0 5px 5px 0;
918
+ cursor: pointer;
919
+ transition: all 0.3s ease;
920
+ }
921
+
922
+ .newsletter-btn:hover {
923
+ background-color: #3a56d4;
924
+ }
925
+
926
+ .footer-bottom {
927
+ text-align: center;
928
+ padding-top: 20px;
929
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
930
+ color: rgba(255, 255, 255, 0.5);
931
+ font-size: 14px;
932
+ }
933
+
934
+ /* Responsive */
935
+ @media (max-width: 992px) {
936
+ .hero-content {
937
+ flex-direction: column;
938
+ text-align: center;
939
+ }
940
+
941
+ .nav-links {
942
+ display: none;
943
+ }
944
+
945
+ .hamburger {
946
+ display: block;
947
+ }
948
+
949
+ .dashboard {
950
+ flex-direction: column;
951
+ }
952
+
953
+ .sidebar {
954
+ width: 100%;
955
+ padding: 15px 0;
956
+ }
957
+
958
+ .sidebar-menu {
959
+ display: flex;
960
+ overflow-x: auto;
961
+ padding: 0 15px;
962
+ }
963
+
964
+ .menu-item {
965
+ padding: 10px 15px;
966
+ white-space: nowrap;
967
+ }
968
+
969
+ .menu-item i {
970
+ font-size: 16px;
971
+ margin-right: 5px;
972
+ }
973
+ }
974
+
975
+ @media (max-width: 768px) {
976
+ .hero-text h1 {
977
+ font-size: 36px;
978
+ }
979
+
980
+ .section-title h2 {
981
+ font-size: 28px;
982
+ }
983
+
984
+ .auth-buttons {
985
+ display: none;
986
+ }
987
+
988
+ .pricing-cards {
989
+ grid-template-columns: 1fr;
990
+ }
991
+
992
+ .stats-grid {
993
+ grid-template-columns: 1fr;
994
+ }
995
+ }
996
+ </style>
997
+ </head>
998
+ <body>
999
+ <!-- Public Landing Page -->
1000
+ <div id="landing-page">
1001
+ <header>
1002
+ <div class="container">
1003
+ <nav class="navbar">
1004
+ <a href="#" class="logo">
1005
+ <i class="fas fa-graduation-cap"></i>
1006
+ LearnHub
1007
+ </a>
1008
+
1009
+ <div class="nav-links">
1010
+ <a href="#features">Features</a>
1011
+ <a href="#courses">Courses</a>
1012
+ <a href="#pricing">Pricing</a>
1013
+ <a href="#testimonials">Testimonials</a>
1014
+ <a href="#" id="open-login-modal">Login</a>
1015
+ </div>
1016
+
1017
+ <div class="auth-buttons">
1018
+ <button class="btn btn-outline" id="open-login-modal">Login</button>
1019
+ <button class="btn btn-primary" id="open-register-modal">Sign Up</button>
1020
+ </div>
1021
+
1022
+ <div class="hamburger">
1023
+ <i class="fas fa-bars"></i>
1024
+ </div>
1025
+ </nav>
1026
+ </div>
1027
+ </header>
1028
+
1029
+ <section class="hero">
1030
+ <div class="container">
1031
+ <div class="hero-content">
1032
+ <div class="hero-text">
1033
+ <h1>Learn Without Limits</h1>
1034
+ <p>Access world-class learning for anyone, anywhere with our comprehensive curriculum and industry-leading instructors.</p>
1035
+ <div class="hero-buttons">
1036
+ <button class="btn btn-primary" id="landing-signup">Start Learning Today</button>
1037
+ <button class="btn btn-outline">Explore Courses</button>
1038
+ </div>
1039
+ </div>
1040
+ <div class="hero-image">
1041
+ <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Students learning">
1042
+ </div>
1043
+ </div>
1044
+ </div>
1045
+ </section>
1046
+
1047
+ <section class="features" id="features">
1048
+ <div class="container">
1049
+ <div class="section-title">
1050
+ <h2>Why Choose LearnHub?</h2>
1051
+ <p>Our platform is designed to help you achieve your learning goals with the best educational resources and support.</p>
1052
+ </div>
1053
+ <div class="features-grid">
1054
+ <div class="feature-card">
1055
+ <div class="feature-icon">
1056
+ <i class="fas fa-chalkboard-teacher"></i>
1057
+ </div>
1058
+ <h3>Expert Instructors</h3>
1059
+ <p>Learn from industry professionals with real-world experience and proven teaching methods.</p>
1060
+ </div>
1061
+ <div class="feature-card">
1062
+ <div class="feature-icon">
1063
+ <i class="fas fa-laptop"></i>
1064
+ </div>
1065
+ <h3>Flexible Learning</h3>
1066
+ <p>Access courses anytime, anywhere with our responsive platform that works on all devices.</p>
1067
+ </div>
1068
+ <div class="feature-card">
1069
+ <div class="feature-icon">
1070
+ <i class="fas fa-certificate"></i>
1071
+ </div>
1072
+ <h3>Certification</h3>
1073
+ <p>Earn recognized certificates upon completion to boost your resume and career prospects.</p>
1074
+ </div>
1075
+ </div>
1076
+ </div>
1077
+ </section>
1078
+
1079
+ <section class="courses" id="courses">
1080
+ <div class="container">
1081
+ <div class="section-title">
1082
+ <h2>Popular Courses</h2>
1083
+ <p>Browse our top-rated courses in various categories to start your learning journey.</p>
1084
+ </div>
1085
+ <div class="courses-grid">
1086
+ <div class="course-card">
1087
+ <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Web Development" class="course-image">
1088
+ <div class="course-details">
1089
+ <span class="course-category">Programming</span>
1090
+ <h3 class="course-title">Complete Web Development Bootcamp</h3>
1091
+ <p class="course-instructor">By John Smith</p>
1092
+ <p class="course-price">$99.99</p>
1093
+ <div class="course-meta">
1094
+ <span><i class="fas fa-users"></i> 1250 Students</span>
1095
+ <span><i class="fas fa-star"></i> 4.8 (320)</span>
1096
+ </div>
1097
+ </div>
1098
+ </div>
1099
+ <div class="course-card">
1100
+ <img src="https://images.unsplash.com/photo-1575089976121-8ed7b2a54265?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Data Science" class="course-image">
1101
+ <div class="course-details">
1102
+ <span class="course-category">Data Science</span>
1103
+ <h3 class="course-title">Data Science & Machine Learning</h3>
1104
+ <p class="course-instructor">By Sarah Johnson</p>
1105
+ <p class="course-price">$149.99</p>
1106
+ <div class="course-meta">
1107
+ <span><i class="fas fa-users"></i> 890 Students</span>
1108
+ <span><i class="fas fa-star"></i> 4.9 (210)</span>
1109
+ </div>
1110
+ </div>
1111
+ </div>
1112
+ <div class="course-card">
1113
+ <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Digital Marketing" class="course-image">
1114
+ <div class="course-details">
1115
+ <span class="course-category">Marketing</span>
1116
+ <h3 class="course-title">Digital Marketing Masterclass</h3>
1117
+ <p class="course-instructor">By Mike Williams</p>
1118
+ <p class="course-price">$79.99</p>
1119
+ <div class="course-meta">
1120
+ <span><i class="fas fa-users"></i> 1500 Students</span>
1121
+ <span><i class="fas fa-star"></i> 4.7 (450)</span>
1122
+ </div>
1123
+ </div>
1124
+ </div>
1125
+ </div>
1126
+ </div>
1127
+ </section>
1128
+
1129
+ <section class="testimonials" id="testimonials">
1130
+ <div class="container">
1131
+ <div class="section-title">
1132
+ <h2>What Our Students Say</h2>
1133
+ <p>Hear from our successful students who transformed their careers with LearnHub courses.</p>
1134
+ </div>
1135
+ <div class="testimonials-slider">
1136
+ <div class="testimonial active">
1137
+ <p class="testimonial-text">"LearnHub completely changed my career trajectory. The web development course gave me the skills I needed to land my dream job at a tech startup. The instructor was knowledgeable and the curriculum was comprehensive."</p>
1138
+ <div class="testimonial-author">
1139
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Emily Parker" class="author-avatar">
1140
+ <div class="author-info">
1141
+ <h4>Emily Parker</h4>
1142
+ <p>Web Developer at TechCorp</p>
1143
+ </div>
1144
+ </div>
1145
+ </div>
1146
+ <div class="testimonial">
1147
+ <p class="testimonial-text">"As someone with no prior experience in data science, I was amazed at how quickly I was able to grasp complex concepts. The hands-on projects were the highlight of the course and gave me practical experience."</p>
1148
+ <div class="testimonial-author">
1149
+ <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="David Chen" class="author-avatar">
1150
+ <div class="author-info">
1151
+ <h4>David Chen</h4>
1152
+ <p>Data Analyst at DataSystems</p>
1153
+ </div>
1154
+ </div>
1155
+ </div>
1156
+ <div class="testimonial">
1157
+ <p class="testimonial-text">"The flexibility of LearnHub allowed me to balance my full-time job with upskilling. The digital marketing course helped me transition into a higher-paying role with more responsibility in just 6 months."</p>
1158
+ <div class="testimonial-author">
1159
+ <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Lisa Rodriguez" class="author-avatar">
1160
+ <div class="author-info">
1161
+ <h4>Lisa Rodriguez</h4>
1162
+ <p>Marketing Manager at BrandHouse</p>
1163
+ </div>
1164
+ </div>
1165
+ </div>
1166
+ <div class="slider-controls">
1167
+ <div class="slider-dot active" data-index="0"></div>
1168
+ <div class="slider-dot" data-index="1"></div>
1169
+ <div class="slider-dot" data-index="2"></div>
1170
+ </div>
1171
+ </div>
1172
+ </div>
1173
+ </section>
1174
+
1175
+ <section class="pricing" id="pricing">
1176
+ <div class="container">
1177
+ <div class="section-title">
1178
+ <h2>Simple, Transparent Pricing</h2>
1179
+ <p>Choose the plan that fits your learning needs and budget. No hidden fees, no surprises.</p>
1180
+ </div>
1181
+ <div class="pricing-cards">
1182
+ <div class="pricing-card">
1183
+ <h3 class="pricing-title">Free</h3>
1184
+ <p class="pricing-price">$0 <span>/ month</span></p>
1185
+ <div class="pricing-features">
1186
+ <div class="pricing-feature">
1187
+ <i class="fas fa-check"></i>
1188
+ <span>Access to free courses</span>
1189
+ </div>
1190
+ <div class="pricing-feature">
1191
+ <i class="fas fa-check"></i>
1192
+ <span>Community support</span>
1193
+ </div>
1194
+ <div class="pricing-feature">
1195
+ <i class="fas fa-check"></i>
1196
+ <span>Basic course materials</span>
1197
+ </div>
1198
+ <div class="pricing-feature">
1199
+ <i class="fas fa-times"></i>
1200
+ <span style="opacity: 0.5;">Certificate of completion</span>
1201
+ </div>
1202
+ <div class="pricing-feature">
1203
+ <i class="fas fa-times"></i>
1204
+ <span style="opacity: 0.5;">Premium content</span>
1205
+ </div>
1206
+ </div>
1207
+ <button class="btn btn-outline" style="width: 100%;">Get Started</button>
1208
+ </div>
1209
+ <div class="pricing-card popular">
1210
+ <div class="popular-tag">Most Popular</div>
1211
+ <h3 class="pricing-title">Pro</h3>
1212
+ <p class="pricing-price">$19.99 <span>/ month</span></p>
1213
+ <div class="pricing-features">
1214
+ <div class="pricing-feature">
1215
+ <i class="fas fa-check"></i>
1216
+ <span>All free course features</span>
1217
+ </div>
1218
+ <div class="pricing-feature">
1219
+ <i class="fas fa-check"></i>
1220
+ <span>Access to all premium courses</span>
1221
+ </div>
1222
+ <div class="pricing-feature">
1223
+ <i class="fas fa-check"></i>
1224
+ <span>Downloadable certificates</span>
1225
+ </div>
1226
+ <div class="pricing-feature">
1227
+ <i class="fas fa-check"></i>
1228
+ <span>Priority support</span>
1229
+ </div>
1230
+ <div class="pricing-feature">
1231
+ <i class="fas fa-check"></i>
1232
+ <span>Download resources</span>
1233
+ </div>
1234
+ </div>
1235
+ <button class="btn btn-primary" style="width: 100%;">Start Free Trial</button>
1236
+ </div>
1237
+ <div class="pricing-card">
1238
+ <h3 class="pricing-title">Enterprise</h3>
1239
+ <p class="pricing-price">$49.99 <span>/ month</span></p>
1240
+ <div class="pricing-features">
1241
+ <div class="pricing-feature">
1242
+ <i class="fas fa-check"></i>
1243
+ <span>All Pro features</span>
1244
+ </div>
1245
+ <div class="pricing-feature">
1246
+ <i class="fas fa-check"></i>
1247
+ <span>Unlimited course access</span>
1248
+ </div>
1249
+ <div class="pricing-feature">
1250
+ <i class="fas fa-check"></i>
1251
+ <span>One-on-one mentorship</span>
1252
+ </div>
1253
+ <div class="pricing-feature">
1254
+ <i class="fas fa-check"></i>
1255
+ <span>Career coaching</span>
1256
+ </div>
1257
+ <div class="pricing-feature">
1258
+ <i class="fas fa-check"></i>
1259
+ <span>Job placement assistance</span>
1260
+ </div>
1261
+ </div>
1262
+ <button class="btn btn-outline" style="width: 100%;">Contact Sales</button>
1263
+ </div>
1264
+ </div>
1265
+ </div>
1266
+ </section>
1267
+
1268
+ <footer>
1269
+ <div class="container">
1270
+ <div class="footer-content">
1271
+ <div class="footer-about">
1272
+ <a href="#" class="footer-logo">
1273
+ <i class="fas fa-graduation-cap"></i>
1274
+ LearnHub
1275
+ </a>
1276
+ <p>Empowering individuals and organizations through accessible, high-quality education since 2018. Our mission is to make learning available to everyone, everywhere.</p>
1277
+ <div class="social-links">
1278
+ <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
1279
+ <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
1280
+ <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
1281
+ <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
1282
+ <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
1283
+ </div>
1284
+ </div>
1285
+ <div class="footer-links">
1286
+ <h3>Quick Links</h3>
1287
+ <ul>
1288
+ <li><a href="#">Home</a></li>
1289
+ <li><a href="#features">Features</a></li>
1290
+ <li><a href="#courses">Courses</a></li>
1291
+ <li><a href="#pricing">Pricing</a></li>
1292
+ <li><a href="#testimonials">Testimonials</a></li>
1293
+ </ul>
1294
+ </div>
1295
+ <div class="footer-links">
1296
+ <h3>Categories</h3>
1297
+ <ul>
1298
+ <li><a href="#">Programming</a></li>
1299
+ <li><a href="#">Data Science</a></li>
1300
+ <li><a href="#">Design</a></li>
1301
+ <li><a href="#">Marketing</a></li>
1302
+ <li><a href="#">Business</a></li>
1303
+ </ul>
1304
+ </div>
1305
+ <div class="footer-newsletter">
1306
+ <h3>Newsletter</h3>
1307
+ <p>Subscribe to our newsletter to get the latest courses and updates delivered to your inbox.</p>
1308
+ <form class="newsletter-form">
1309
+ <input type="email" placeholder="Your Email" class="newsletter-input" required>
1310
+ <button type="submit" class="newsletter-btn"><i class="fas fa-paper-plane"></i></button>
1311
+ </form>
1312
+ </div>
1313
+ </div>
1314
+ <div class="footer-bottom">
1315
+ <p>&copy; 2023 LearnHub. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
1316
+ </div>
1317
+ </div>
1318
+ </footer>
1319
+ </div>
1320
+
1321
+ <!-- Student Dashboard (Hidden by default) -->
1322
+ <div id="student-dashboard" style="display: none;">
1323
+ <div class="dashboard">
1324
+ <div class="sidebar">
1325
+ <div class="sidebar-brand">
1326
+ <i class="fas fa-graduation-cap"></i>
1327
+ LearnHub
1328
+ </div>
1329
+ <div class="sidebar-menu">
1330
+ <div class="menu-item active">
1331
+ <i class="fas fa-home"></i>
1332
+ <span>Dashboard</span>
1333
+ </div>
1334
+ <div class="menu-item">
1335
+ <i class="fas fa-book-open"></i>
1336
+ <span>My Courses</span>
1337
+ </div>
1338
+ <div class="menu-item">
1339
+ <i class="fas fa-chart-bar"></i>
1340
+ <span>Progress</span>
1341
+ </div>
1342
+ <div class="menu-item">
1343
+ <i class="fas fa-graduation-cap"></i>
1344
+ <span>Certificates</span>
1345
+ </div>
1346
+ <div class="menu-item">
1347
+ <i class="fas fa-credit-card"></i>
1348
+ <span>Payments</span>
1349
+ </div>
1350
+ <div class="menu-item">
1351
+ <i class="fas fa-user"></i>
1352
+ <span>Profile</span>
1353
+ </div>
1354
+ <div class="menu-item">
1355
+ <i class="fas fa-cog"></i>
1356
+ <span>Settings</span>
1357
+ </div>
1358
+ </div>
1359
+ </div>
1360
+ <div class="main-content">
1361
+ <div class="dashboard-header">
1362
+ <h2 class="dashboard-title">Student Dashboard</h2>
1363
+ <div class="user-profile">
1364
+ <span>John Doe</span>
1365
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="user-avatar">
1366
+ </div>
1367
+ </div>
1368
+
1369
+ <div class="stats-grid">
1370
+ <div class="stat-card">
1371
+ <div class="stat-info">
1372
+ <h3>Enrolled Courses</h3>
1373
+ <p>5</p>
1374
+ </div>
1375
+ <div class="stat-icon primary">
1376
+ <i class="fas fa-book"></i>
1377
+ </div>
1378
+ </div>
1379
+ <div class="stat-card">
1380
+ <div class="stat-info">
1381
+ <h3>Completed</h3>
1382
+ <p>2</p>
1383
+ </div>
1384
+ <div class="stat-icon success">
1385
+ <i class="fas fa-check-circle"></i>
1386
+ </div>
1387
+ </div>
1388
+ <div class="stat-card">
1389
+ <div class="stat-info">
1390
+ <h3>Hours Learned</h3>
1391
+ <p>47</p>
1392
+ </div>
1393
+ <div class="stat-icon accent">
1394
+ <i class="fas fa-clock"></i>
1395
+ </div>
1396
+ </div>
1397
+ <div class="stat-card">
1398
+ <div class="stat-info">
1399
+ <h3>Certificates</h3>
1400
+ <p>2</p>
1401
+ </div>
1402
+ <div class="stat-icon dark">
1403
+ <i class="fas fa-certificate"></i>
1404
+ </div>
1405
+ </div>
1406
+ </div>
1407
+
1408
+ <div class="courses-table">
1409
+ <table>
1410
+ <thead>
1411
+ <tr>
1412
+ <th>Course Name</th>
1413
+ <th>Instructor</th>
1414
+ <th>Progress</th>
1415
+ <th>Status</th>
1416
+ <th>Actions</th>
1417
+ </tr>
1418
+ </thead>
1419
+ <tbody>
1420
+ <tr>
1421
+ <td>Complete Web Development Bootcamp</td>
1422
+ <td>John Smith</td>
1423
+ <td>
1424
+ <div style="width: 100%; background-color: #e9ecef; border-radius: 5px;">
1425
+ <div style="width: 85%; height: 10px; background-color: var(--primary); border-radius: 5px;"></div>
1426
+ </div>
1427
+ </td>
1428
+ <td><span class="status active">Active</span></td>
1429
+ <td>
1430
+ <button class="action-btn view">View</button>
1431
+ <button class="action-btn edit">Resume</button>
1432
+ </td>
1433
+ </tr>
1434
+ <tr>
1435
+ <td>Data Science & Machine Learning</td>
1436
+ <td>Sarah Johnson</td>
1437
+ <td>
1438
+ <div style="width: 100%; background-color: #e9ecef; border-radius: 5px;">
1439
+ <div style="width: 45%; height: 10px; background-color: var(--primary); border-radius: 5px;"></div>
1440
+ </div>
1441
+ </td>
1442
+ <td><span class="status active">Active</span></td>
1443
+ <td>
1444
+ <button class="action-btn view">View</button>
1445
+ <button class="action-btn edit">Resume</button>
1446
+ </td>
1447
+ </tr>
1448
+ <tr>
1449
+ <td>Digital Marketing Masterclass</td>
1450
+ <td>Mike Williams</td>
1451
+ <td>
1452
+ <div style="width: 100%; background-color: #e9ecef; border-radius: 5px;">
1453
+ <div style="width: 100%; height: 10px; background-color: var(--primary); border-radius: 5px;"></div>
1454
+ </div>
1455
+ </td>
1456
+ <td><span class="status active">Completed</span></td>
1457
+ <td>
1458
+ <button class="action-btn view">View</button>
1459
+ <button class="action-btn edit">Certificate</button>
1460
+ </td>
1461
+ </tr>
1462
+ <tr>
1463
+ <td>Mobile App Development with Flutter</td>
1464
+ <td>Emma Wilson</td>
1465
+ <td>
1466
+ <div style="width: 100%; background-color: #e9ecef; border-radius: 5px;">
1467
+ <div style="width: 30%; height: 10px; background-color: var(--primary); border-radius: 5px;"></div>
1468
+ </div>
1469
+ </td>
1470
+ <td><span class="status active">Active</span></td>
1471
+ <td>
1472
+ <button class="action-btn view">View</button>
1473
+ <button class="action-btn edit">Resume</button>
1474
+ </td>
1475
+ </tr>
1476
+ <tr>
1477
+ <td>UI/UX Design Fundamentals</td>
1478
+ <td>David Brown</td>
1479
+ <td>
1480
+ <div style="width: 100%; background-color: #e9ecef; border-radius: 5px;">
1481
+ <div style="width: 100%; height: 10px; background-color: var(--primary); border-radius: 5px;"></div>
1482
+ </div>
1483
+ </td>
1484
+ <td><span class="status active">Completed</span></td>
1485
+ <td>
1486
+ <button class="action-btn view">View</button>
1487
+ <button class="action-btn edit">Certificate</button>
1488
+ </td>
1489
+ </tr>
1490
+ </tbody>
1491
+ </table>
1492
+ </div>
1493
+ </div>
1494
+ </div>
1495
+ </div>
1496
+
1497
+ <!-- Teacher Dashboard (Hidden by default) -->
1498
+ <div id="teacher-dashboard" style="display: none;">
1499
+ <div class="dashboard">
1500
+ <div class="sidebar">
1501
+ <div class="sidebar-brand">
1502
+ <i class="fas fa-graduation-cap"></i>
1503
+ LearnHub
1504
+ </div>
1505
+ <div class="sidebar-menu">
1506
+ <div class="menu-item active">
1507
+ <i class="fas fa-home"></i>
1508
+ <span>Dashboard</span>
1509
+ </div>
1510
+ <div class="menu-item">
1511
+ <i class="fas fa-book-open"></i>
1512
+ <span>My Courses</span>
1513
+ </div>
1514
+ <div class="menu-item">
1515
+ <i class="fas fa-chalkboard-teacher"></i>
1516
+ <span>Teaching</span>
1517
+ </div>
1518
+ <div class="menu-item">
1519
+ <i class="fas fa-users"></i>
1520
+ <span>Students</span>
1521
+ </div>
1522
+ <div class="menu-item">
1523
+ <i class="fas fa-money-bill-wave"></i>
1524
+ <span>Earnings</span>
1525
+ </div>
1526
+ <div class="menu-item">
1527
+ <i class="fas fa-user"></i>
1528
+ <span>Profile</span>
1529
+ </div>
1530
+ <div class="menu-item">
1531
+ <i class="fas fa-cog"></i>
1532
+ <span>Settings</span>
1533
+ </div>
1534
+ </div>
1535
+ </div>
1536
+ <div class="main-content">
1537
+ <div class="dashboard-header">
1538
+ <h2 class="dashboard-title">Teacher Dashboard</h2>
1539
+ <div class="user-profile">
1540
+ <span>Sarah Johnson</span>
1541
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="user-avatar">
1542
+ </div>
1543
+ </div>
1544
+
1545
+ <div class="stats-grid">
1546
+ <div class="stat-card">
1547
+ <div class="stat-info">
1548
+ <h3>Published Courses</h3>
1549
+ <p>3</p>
1550
+ </div>
1551
+ <div class="stat-icon primary">
1552
+ <i class="fas fa-book"></i>
1553
+ </div>
1554
+ </div>
1555
+ <div class="stat-card">
1556
+ <div class="stat-info">
1557
+ <h3>Total Students</h3>
1558
+ <p>1,284</p>
1559
+ </div>
1560
+ <div class="stat-icon success">
1561
+ <i class="fas fa-users"></i>
1562
+ </div>
1563
+ </div>
1564
+ <div class="stat-card">
1565
+ <div class="stat-info">
1566
+ <h3>Total Earnings</h3>
1567
+ <p>$24,560</p>
1568
+ </div>
1569
+ <div class="stat-icon accent">
1570
+ <i class="fas fa-dollar-sign"></i>
1571
+ </div>
1572
+ </div>
1573
+ <div class="stat-card">
1574
+ <div class="stat-info">
1575
+ <h3>Pending Payout</h3>
1576
+ <p>$1,230</p>
1577
+ </div>
1578
+ <div class="stat-icon dark">
1579
+ <i class="fas fa-credit-card"></i>
1580
+ </div>
1581
+ </div>
1582
+ </div>
1583
+
1584
+ <div class="courses-table">
1585
+ <div class="dashboard-header" style="margin-bottom: 15px;">
1586
+ <h2 class="dashboard-title">Your Courses</h2>
1587
+ <button class="btn btn-primary" id="create-course-btn">Create Course</button>
1588
+ </div>
1589
+ <table>
1590
+ <thead>
1591
+ <tr>
1592
+ <th>Course Name</th>
1593
+ <th>Category</th>
1594
+ <th>Students</th>
1595
+ <th>Rating</th>
1596
+ <th>Earnings</th>
1597
+ <th>Actions</th>
1598
+ </tr>
1599
+ </thead>
1600
+ <tbody>
1601
+ <tr>
1602
+ <td>Data Science & Machine Learning</td>
1603
+ <td>Programming</td>
1604
+ <td>890</td>
1605
+ <td><i class="fas fa-star"></i> 4.9 (210)</td>
1606
+ <td>$14,230</td>
1607
+ <td>
1608
+ <button class="action-btn view">View</button>
1609
+ <button class="action-btn edit">Edit</button>
1610
+ </td>
1611
+ </tr>
1612
+ <tr>
1613
+ <td>Python for Beginners</td>
1614
+ <td>Programming</td>
1615
+ <td>1,450</td>
1616
+ <td><i class="fas fa-star"></i> 4.8 (320)</td>
1617
+ <td>$8,560</td>
1618
+ <td>
1619
+ <button class="action-btn view">View</button>
1620
+ <button class="action-btn edit">Edit</button>
1621
+ </td>
1622
+ </tr>
1623
+ <tr>
1624
+ <td>Advanced Data Analysis</td>
1625
+ <td>Data Science</td>
1626
+ <td>720</td>
1627
+ <td><i class="fas fa-star"></i> 4.7 (150)</td>
1628
+ <td>$5,890</td>
1629
+ <td>
1630
+ <button class="action-btn view">View</button>
1631
+ <button class="action-btn edit">Edit</button>
1632
+ </td>
1633
+ </tr>
1634
+ </tbody>
1635
+ </table>
1636
+ </div>
1637
+ </div>
1638
+ </div>
1639
+ </div>
1640
+
1641
+ <!-- Payment Module (Hidden by default) -->
1642
+ <div id="payment-module" style="display: none;">
1643
+ <div class="container" style="padding-top: 50px; padding-bottom: 50px;">
1644
+ <h2 style="text-align: center; margin-bottom: 40px;">Complete Your Purchase</h2>
1645
+
1646
+ <div class="payment-card">
1647
+ <div class="payment-header">
1648
+ <h3>Checkout</h3>
1649
+ <div style="display: flex; align-items: center;">
1650
+ <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Course
1651
+ </html>