Hugging Face's logo

Spaces:
parthib07
/
LearningApplication
Running

App Files Community
parthib07 commited on
Commit
88c4fa8
·
verified ·
1 Parent(s): 70e50a4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1413 -19
index.html CHANGED
@@ -1,19 +1,1413 @@
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>EduLoom - Modern AI-Ready Learning Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.1/cdn.min.js" defer></script>
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
10
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
13
+
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ min-height: 100vh;
18
+ }
19
+
20
+ .glass-effect {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(10px);
23
+ border: 1px solid rgba(255, 255, 255, 0.2);
24
+ }
25
+
26
+ .gradient-text {
27
+ background: linear-gradient(45deg, #667eea, #764ba2);
28
+ -webkit-background-clip: text;
29
+ -webkit-text-fill-color: transparent;
30
+ background-clip: text;
31
+ }
32
+
33
+ .hover-scale {
34
+ transition: transform 0.3s ease;
35
+ }
36
+
37
+ .hover-scale:hover {
38
+ transform: translateY(-5px) scale(1.02);
39
+ }
40
+
41
+ .pulse-animation {
42
+ animation: pulse 2s infinite;
43
+ }
44
+
45
+ @keyframes pulse {
46
+ 0% { opacity: 1; }
47
+ 50% { opacity: 0.7; }
48
+ 100% { opacity: 1; }
49
+ }
50
+
51
+ .slide-in {
52
+ animation: slideIn 0.5s ease-out;
53
+ }
54
+
55
+ @keyframes slideIn {
56
+ from { transform: translateY(20px); opacity: 0; }
57
+ to { transform: translateY(0); opacity: 1; }
58
+ }
59
+
60
+ .typing-effect {
61
+ border-right: 2px solid #667eea;
62
+ animation: blink 1s infinite;
63
+ }
64
+
65
+ @keyframes blink {
66
+ 0%, 50% { border-color: #667eea; }
67
+ 51%, 100% { border-color: transparent; }
68
+ }
69
+
70
+ .course-card {
71
+ background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
72
+ border: 1px solid rgba(255,255,255,0.2);
73
+ transition: all 0.3s ease;
74
+ }
75
+
76
+ .course-card:hover {
77
+ transform: translateY(-8px);
78
+ box-shadow: 0 20px 40px rgba(0,0,0,0.3);
79
+ }
80
+
81
+ .progress-ring {
82
+ transform: rotate(-90deg);
83
+ }
84
+
85
+ .progress-ring__circle {
86
+ transition: stroke-dashoffset 0.35s;
87
+ stroke: #667eea;
88
+ stroke-width: 4;
89
+ fill: transparent;
90
+ stroke-dasharray: 251.2;
91
+ stroke-dashoffset: 251.2;
92
+ }
93
+
94
+ .floating-nav {
95
+ position: fixed;
96
+ top: 50%;
97
+ right: 2rem;
98
+ transform: translateY(-50%);
99
+ z-index: 1000;
100
+ }
101
+
102
+ .nav-dot {
103
+ width: 12px;
104
+ height: 12px;
105
+ border-radius: 50%;
106
+ background: rgba(255,255,255,0.5);
107
+ margin: 10px 0;
108
+ cursor: pointer;
109
+ transition: all 0.3s ease;
110
+ }
111
+
112
+ .nav-dot.active {
113
+ background: #667eea;
114
+ transform: scale(1.5);
115
+ }
116
+
117
+ .video-container {
118
+ position: relative;
119
+ overflow: hidden;
120
+ border-radius: 20px;
121
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
122
+ }
123
+
124
+ .quiz-option {
125
+ transition: all 0.3s ease;
126
+ cursor: pointer;
127
+ }
128
+
129
+ .quiz-option:hover {
130
+ background: rgba(102, 126, 234, 0.2);
131
+ transform: translateX(5px);
132
+ }
133
+
134
+ .quiz-option.selected {
135
+ background: rgba(102, 126, 234, 0.3);
136
+ border-color: #667eea;
137
+ }
138
+
139
+ .quiz-option.correct {
140
+ background: rgba(34, 197, 94, 0.3);
141
+ border-color: #22c55e;
142
+ }
143
+
144
+ .quiz-option.incorrect {
145
+ background: rgba(239, 68, 68, 0.3);
146
+ border-color: #ef4444;
147
+ }
148
+
149
+ .modal-backdrop {
150
+ background: rgba(0, 0, 0, 0.8);
151
+ backdrop-filter: blur(5px);
152
+ }
153
+
154
+ .modal-content {
155
+ transform: scale(0.9);
156
+ transition: transform 0.3s ease;
157
+ }
158
+
159
+ .modal-content.show {
160
+ transform: scale(1);
161
+ }
162
+
163
+ .notification {
164
+ position: fixed;
165
+ top: 20px;
166
+ right: 20px;
167
+ z-index: 1001;
168
+ animation: slideInRight 0.5s ease;
169
+ }
170
+
171
+ @keyframes slideInRight {
172
+ from { transform: translateX(100%); opacity: 0; }
173
+ to { transform: translateX(0); opacity: 1; }
174
+ }
175
+
176
+ .search-bar {
177
+ background: rgba(255,255,255,0.1);
178
+ border: 1px solid rgba(255,255,255,0.2);
179
+ transition: all 0.3s ease;
180
+ }
181
+
182
+ .search-bar:focus {
183
+ background: rgba(255,255,255,0.2);
184
+ border-color: #667eea;
185
+ box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
186
+ }
187
+
188
+ .category-pill {
189
+ background: rgba(255,255,255,0.1);
190
+ border: 1px solid rgba(255,255,255,0.2);
191
+ transition: all 0.3s ease;
192
+ }
193
+
194
+ .category-pill:hover,
195
+ .category-pill.active {
196
+ background: rgba(102, 126, 234, 0.3);
197
+ border-color: #667eea;
198
+ transform: translateY(-2px);
199
+ }
200
+
201
+ .instructor-avatar {
202
+ width: 60px;
203
+ height: 60px;
204
+ border-radius: 50%;
205
+ border: 3px solid #667eea;
206
+ background: linear-gradient(135deg, #667eea, #764ba2);
207
+ display: flex;
208
+ align-items: center;
209
+ justify-content: center;
210
+ color: white;
211
+ font-weight: bold;
212
+ font-size: 1.2rem;
213
+ }
214
+
215
+ .rating-stars {
216
+ color: #fbbf24;
217
+ }
218
+
219
+ .progress-bar {
220
+ background: rgba(255,255,255,0.1);
221
+ border-radius: 10px;
222
+ overflow: hidden;
223
+ }
224
+
225
+ .progress-fill {
226
+ height: 100%;
227
+ background: linear-gradient(90deg, #667eea, #764ba2);
228
+ transition: width 0.5s ease;
229
+ }
230
+
231
+ .ai-chat {
232
+ position: fixed;
233
+ bottom: 20px;
234
+ right: 20px;
235
+ width: 350px;
236
+ height: 500px;
237
+ background: rgba(255,255,255,0.1);
238
+ backdrop-filter: blur(20px);
239
+ border: 1px solid rgba(255,255,255,0.2);
240
+ border-radius: 20px;
241
+ overflow: hidden;
242
+ transition: all 0.3s ease;
243
+ }
244
+
245
+ .ai-chat.minimized {
246
+ height: 60px;
247
+ width: 200px;
248
+ }
249
+
250
+ .chat-messages {
251
+ height: calc(100% - 120px);
252
+ overflow-y: auto;
253
+ padding: 10px;
254
+ }
255
+
256
+ .chat-message {
257
+ margin: 10px 0;
258
+ padding: 10px 15px;
259
+ border-radius: 15px;
260
+ max-width: 80%;
261
+ word-wrap: break-word;
262
+ }
263
+
264
+ .chat-message.user {
265
+ background: rgba(102, 126, 234, 0.3);
266
+ margin-left: auto;
267
+ }
268
+
269
+ .chat-message.ai {
270
+ background: rgba(255,255,255,0.1);
271
+ margin-right: auto;
272
+ }
273
+
274
+ .payment-modal {
275
+ background: rgba(255,255,255,0.05);
276
+ backdrop-filter: blur(20px);
277
+ border: 1px solid rgba(255,255,255,0.1);
278
+ }
279
+
280
+ .stripe-card {
281
+ background: linear-gradient(135deg, #667eea, #764ba2);
282
+ color: white;
283
+ padding: 20px;
284
+ border-radius: 15px;
285
+ margin: 10px 0;
286
+ }
287
+ </style>
288
+ </head>
289
+ <body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
290
+ <div x-data="eduLoomApp()" x-init="init()" class="min-h-screen">
291
+ <!-- Navigation -->
292
+ <nav class="glass-effect fixed top-0 w-full z-50 px-6 py-4">
293
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
294
+ <div class="flex items-center space-x-4">
295
+ <h1 class="text-2xl font-bold text-white">
296
+ <i class="fas fa-graduation-cap mr-2"></i>EduLoom
297
+ </h1>
298
+ </div>
299
+
300
+ <div class="hidden md:flex items-center space-x-6">
301
+ <button @click="currentPage = 'home'"
302
+ :class="{'text-white': currentPage === 'home', 'text-gray-300': currentPage !== 'home'}"
303
+ class="hover:text-white transition">Home</button>
304
+ <button @click="currentPage = 'courses'"
305
+ :class="{'text-white': currentPage === 'courses', 'text-gray-300': currentPage !== 'courses'}"
306
+ class="hover:text-white transition">Courses</button>
307
+ <button @click="currentPage = 'dashboard'"
308
+ x-show="user"
309
+ :class="{'text-white': currentPage === 'dashboard', 'text-gray-300': currentPage !== 'dashboard'}"
310
+ class="hover:text-white transition">Dashboard</button>
311
+ <button @click="currentPage = 'instructor'"
312
+ x-show="user?.role === 'instructor'"
313
+ :class="{'text-white': currentPage === 'instructor', 'text-gray-300': currentPage !== 'instructor'}"
314
+ class="hover:text-white transition">Teach</button>
315
+ </div>
316
+
317
+ <div class="flex items-center space-x-4">
318
+ <div class="relative">
319
+ <input type="text"
320
+ x-model="searchQuery"
321
+ @input="searchCourses()"
322
+ placeholder="Search courses..."
323
+ class="search-bar rounded-full px-4 py-2 text-white placeholder-gray-300 w-48 md:w-64">
324
+ <i class="fas fa-search absolute right-3 top-3 text-gray-300"></i>
325
+ </div>
326
+
327
+ <div x-show="!user" class="flex space-x-2">
328
+ <button @click="openModal('login')"
329
+ class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-full transition">
330
+ Login
331
+ </button>
332
+ <button @click="openModal('register')"
333
+ class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-4 py-2 rounded-full transition">
334
+ Sign Up
335
+ </button>
336
+ </div>
337
+
338
+ <div x-show="user" class="flex items-center space-x-4">
339
+ <button @click="toggleNotifications()" class="relative">
340
+ <i class="fas fa-bell text-white text-xl"></i>
341
+ <span x-show="notifications.length > 0"
342
+ class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
343
+ <span x-text="notifications.length"></span>
344
+ </span>
345
+ </button>
346
+
347
+ <div class="relative">
348
+ <button @click="profileDropdown = !profileDropdown"
349
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white">
350
+ <span x-text="user?.name?.charAt(0)?.toUpperCase() || 'U'"></span>
351
+ </button>
352
+
353
+ <div x-show="profileDropdown"
354
+ @click.away="profileDropdown = false"
355
+ class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2">
356
+ <button @click="currentPage = 'profile'; profileDropdown = false"
357
+ class="block w-full text-left px-4 py-2 hover:bg-gray-100">Profile</button>
358
+ <button @click="logout()"
359
+ class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-red-600">Logout</button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </nav>
366
+
367
+ <!-- Floating Navigation -->
368
+ <div class="floating-nav hidden lg:block">
369
+ <div class="nav-dot" :class="{'active': currentPage === 'home'}" @click="currentPage = 'home'"></div>
370
+ <div class="nav-dot" :class="{'active': currentPage === 'courses'}" @click="currentPage = 'courses'"></div>
371
+ <div class="nav-dot" :class="{'active': currentPage === 'dashboard'}" @click="currentPage = 'dashboard'" x-show="user"></div>
372
+ <div class="nav-dot" :class="{'active': currentPage === 'instructor'}" @click="currentPage = 'instructor'" x-show="user?.role === 'instructor'"></div>
373
+ </div>
374
+
375
+ <!-- Main Content -->
376
+ <main class="pt-20">
377
+ <!-- Home Page -->
378
+ <div x-show="currentPage === 'home'" class="px-6 py-12">
379
+ <div class="max-w-7xl mx-auto">
380
+ <!-- Hero Section -->
381
+ <div class="text-center mb-16">
382
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">
383
+ Learn Without <span class="gradient-text">Limits</span>
384
+ </h1>
385
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
386
+ Join millions of learners worldwide. Master new skills with AI-powered courses designed for your success.
387
+ </p>
388
+ <div class="flex justify-center space-x-4">
389
+ <button @click="currentPage = 'courses'"
390
+ class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-8 py-4 rounded-full text-lg font-semibold transition transform hover:scale-105">
391
+ Explore Courses
392
+ </button>
393
+ <button @click="openModal('register')"
394
+ class="bg-white/20 hover:bg-white/30 text-white px-8 py-4 rounded-full text-lg font-semibold transition">
395
+ Start Free Trial
396
+ </button>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Stats -->
401
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-16">
402
+ <div class="glass-effect rounded-2xl p-6 text-center hover-scale">
403
+ <div class="text-3xl font-bold text-white mb-2">50K+</div>
404
+ <div class="text-gray-300">Students</div>
405
+ </div>
406
+ <div class="glass-effect rounded-2xl p-6 text-center hover-scale">
407
+ <div class="text-3xl font-bold text-white mb-2">1.2K+</div>
408
+ <div class="text-gray-300">Courses</div>
409
+ </div>
410
+ <div class="glass-effect rounded-2xl p-6 text-center hover-scale">
411
+ <div class="text-3xl font-bold text-white mb-2">200+</div>
412
+ <div class="text-gray-300">Instructors</div>
413
+ </div>
414
+ <div class="glass-effect rounded-2xl p-6 text-center hover-scale">
415
+ <div class="text-3xl font-bold text-white mb-2">95%</div>
416
+ <div class="text-gray-300">Success Rate</div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Featured Courses -->
421
+ <div class="mb-16">
422
+ <h2 class="text-3xl font-bold text-white mb-8">Featured Courses</h2>
423
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
424
+ <template x-for="course in featuredCourses" :key="course.id">
425
+ <div class="course-card rounded-2xl p-6 hover-scale cursor-pointer" @click="viewCourse(course)">
426
+ <div class="relative mb-4">
427
+ <img :src="course.thumbnail" :alt="course.title" class="w-full h-48 rounded-xl object-cover">
428
+ <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm">
429
+ <span x-text="course.price === 0 ? 'FREE' : '$' + course.price"></span>
430
+ </div>
431
+ </div>
432
+ <h3 class="text-xl font-bold text-white mb-2" x-text="course.title"></h3>
433
+ <p class="text-gray-300 text-sm mb-3" x-text="course.description.substring(0, 80) + '...'"></p>
434
+ <div class="flex items-center justify-between">
435
+ <div class="flex items-center">
436
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white text-sm mr-2">
437
+ <span x-text="course.instructor.charAt(0)"></span>
438
+ </div>
439
+ <span class="text-gray-300 text-sm" x-text="course.instructor"></span>
440
+ </div>
441
+ <div class="flex items-center">
442
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
443
+ <span class="text-white" x-text="course.rating"></span>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </template>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Categories -->
452
+ <div class="mb-16">
453
+ <h2 class="text-3xl font-bold text-white mb-8">Browse by Category</h2>
454
+ <div class="flex flex-wrap gap-4">
455
+ <template x-for="category in categories" :key="category">
456
+ <button @click="filterByCategory(category)"
457
+ class="category-pill px-6 py-3 rounded-full text-white transition">
458
+ <span x-text="category"></span>
459
+ </button>
460
+ </template>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Courses Page -->
467
+ <div x-show="currentPage === 'courses'" class="px-6 py-12">
468
+ <div class="max-w-7xl mx-auto">
469
+ <h1 class="text-4xl font-bold text-white mb-8">Explore Courses</h1>
470
+
471
+ <!-- Filters -->
472
+ <div class="glass-effect rounded-2xl p-6 mb-8">
473
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
474
+ <select x-model="filters.level" class="search-bar rounded-lg px-4 py-2 text-white">
475
+ <option value="">All Levels</option>
476
+ <option value="beginner">Beginner</option>
477
+ <option value="intermediate">Intermediate</option>
478
+ <option value="advanced">Advanced</option>
479
+ </select>
480
+
481
+ <select x-model="filters.price" class="search-bar rounded-lg px-4 py-2 text-white">
482
+ <option value="">Any Price</option>
483
+ <option value="free">Free</option>
484
+ <option value="paid">Paid</option>
485
+ </select>
486
+
487
+ <select x-model="filters.rating" class="search-bar rounded-lg px-4 py-2 text-white">
488
+ <option value="">Any Rating</option>
489
+ <option value="4">4+ Stars</option>
490
+ <option value="4.5">4.5+ Stars</option>
491
+ </select>
492
+
493
+ <button @click="resetFilters()"
494
+ class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition">
495
+ Reset Filters
496
+ </button>
497
+ </div>
498
+ </div>
499
+
500
+ <!-- Course Grid -->
501
+ <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
502
+ <template x-for="course in filteredCourses" :key="course.id">
503
+ <div class="course-card rounded-2xl p-4 hover-scale cursor-pointer" @click="viewCourse(course)">
504
+ <img :src="course.thumbnail" :alt="course.title" class="w-full h-40 rounded-xl object-cover mb-4">
505
+ <h3 class="text-lg font-bold text-white mb-2" x-text="course.title"></h3>
506
+ <p class="text-gray-300 text-sm mb-2" x-text="course.instructor"></p>
507
+ <div class="flex items-center justify-between">
508
+ <div class="flex items-center">
509
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
510
+ <span class="text-white text-sm" x-text="course.rating"></span>
511
+ </div>
512
+ <span class="text-white font-bold" x-text="course.price === 0 ? 'FREE' : '$' + course.price"></span>
513
+ </div>
514
+ </div>
515
+ </template>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Course Detail Page -->
521
+ <div x-show="currentPage === 'course-detail'" class="px-6 py-12">
522
+ <div class="max-w-6xl mx-auto">
523
+ <button @click="currentPage = 'courses'" class="text-white mb-6 flex items-center">
524
+ <i class="fas fa-arrow-left mr-2"></i> Back to Courses
525
+ </button>
526
+
527
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
528
+ <!-- Main Content -->
529
+ <div class="lg:col-span-2">
530
+ <!-- Video Player -->
531
+ <div class="video-container mb-6">
532
+ <video :src="selectedCourse?.videoUrl" controls class="w-full h-96">
533
+ Your browser does not support the video tag.
534
+ </video>
535
+ </div>
536
+
537
+ <!-- Course Info -->
538
+ <div class="glass-effect rounded-2xl p-6 mb-6">
539
+ <h1 class="text-3xl font-bold text-white mb-4" x-text="selectedCourse?.title"></h1>
540
+ <p class="text-gray-300 mb-4" x-text="selectedCourse?.description"></p>
541
+
542
+ <div class="flex items-center space-x-4 mb-4">
543
+ <div class="flex items-center">
544
+ <div class="instructor-avatar mr-3">
545
+ <span x-text="selectedCourse?.instructor?.charAt(0)"></span>
546
+ </div>
547
+ <div>
548
+ <div class="text-white font-semibold" x-text="selectedCourse?.instructor"></div>
549
+ <div class="text-gray-400 text-sm">Instructor</div>
550
+ </div>
551
+ </div>
552
+ <div class="flex items-center">
553
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
554
+ <span class="text-white" x-text="selectedCourse?.rating"></span>
555
+ <span class="text-gray-400 ml-1">(1,234 reviews)</span>
556
+ </div>
557
+ <div class="text-white">
558
+ <span x-text="selectedCourse?.students + ' students'"></span>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="flex items-center space-x-4">
563
+ <button @click="enrollCourse(selectedCourse)"
564
+ x-show="!isEnrolled(selectedCourse?.id)"
565
+ class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-8 py-3 rounded-full font-semibold transition">
566
+ Enroll Now
567
+ </button>
568
+ <button @click="toggleWishlist(selectedCourse)"
569
+ class="bg-white/20 hover:bg-white/30 text-white px-4 py-3 rounded-full transition">
570
+ <i :class="isInWishlist(selectedCourse?.id) ? 'fas fa-heart text-red-500' : 'far fa-heart'"></i>
571
+ </button>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Course Content -->
576
+ <div class="glass-effect rounded-2xl p-6">
577
+ <h2 class="text-2xl font-bold text-white mb-4">Course Content</h2>
578
+ <div class="space-y-4">
579
+ <template x-for="section in selectedCourse?.sections" :key="section.id">
580
+ <div>
581
+ <h3 class="text-lg font-semibold text-white mb-2" x-text="section.title"></h3>
582
+ <div class="space-y-2">
583
+ <template x-for="lecture in section.lectures" :key="lecture.id">
584
+ <div class="flex items-center justify-between p-3 bg-white/10 rounded-lg">
585
+ <div class="flex items-center">
586
+ <i :class="lecture.completed ? 'fas fa-check-circle text-green-400' : 'far fa-circle text-gray-400'"
587
+ class="mr-3"></i>
588
+ <span class="text-white" x-text="lecture.title"></span>
589
+ </div>
590
+ <span class="text-gray-400 text-sm" x-text="lecture.duration"></span>
591
+ </div>
592
+ </template>
593
+ </div>
594
+ </div>
595
+ </template>
596
+ </div>
597
+ </div>
598
+ </div>
599
+
600
+ <!-- Sidebar -->
601
+ <div class="space-y-6">
602
+ <!-- Course Stats -->
603
+ <div class="glass-effect rounded-2xl p-6">
604
+ <h3 class="text-xl font-bold text-white mb-4">Course Stats</h3>
605
+ <div class="space-y-4">
606
+ <div>
607
+ <div class="flex justify-between text-white mb-1">
608
+ <span>Progress</span>
609
+ <span x-text="getCourseProgress(selectedCourse?.id) + '%'"></span>
610
+ </div>
611
+ <div class="progress-bar h-2">
612
+ <div class="progress-fill" :style="`width: ${getCourseProgress(selectedCourse?.id)}%`"></div>
613
+ </div>
614
+ </div>
615
+ <div class="text-gray-300">
616
+ <i class="fas fa-clock mr-2"></i>
617
+ <span x-text="selectedCourse?.totalHours + ' hours'"></span>
618
+ </div>
619
+ <div class="text-gray-300">
620
+ <i class="fas fa-certificate mr-2"></i>
621
+ <span>Certificate of Completion</span>
622
+ </div>
623
+ </div>
624
+ </div>
625
+
626
+ <!-- Discussion -->
627
+ <div class="glass-effect rounded-2xl p-6">
628
+ <h3 class="text-xl font-bold text-white mb-4">Recent Discussions</h3>
629
+ <div class="space-y-4">
630
+ <template x-for="comment in selectedCourse?.comments" :key="comment.id">
631
+ <div class="border-b border-white/10 pb-3">
632
+ <div class="flex items-center mb-2">
633
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white text-sm mr-2">
634
+ <span x-text="comment.user.charAt(0)"></span>
635
+ </div>
636
+ <span class="text-white text-sm" x-text="comment.user"></span>
637
+ </div>
638
+ <p class="text-gray-300 text-sm" x-text="comment.text"></p>
639
+ </div>
640
+ </template>
641
+ </div>
642
+ <div class="mt-4">
643
+ <textarea x-model="newComment"
644
+ placeholder="Ask a question..."
645
+ class="search-bar rounded-lg px-3 py-2 text-white w-full mb-2"></textarea>
646
+ <button @click="postComment()"
647
+ class="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-4 py-2 rounded-lg w-full">
648
+ Post Comment
649
+ </button>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+
657
+ <!-- Dashboard -->
658
+ <div x-show="currentPage === 'dashboard'" class="px-6 py-12">
659
+ <div class="max-w-7xl mx-auto">
660
+ <h1 class="text-4xl font-bold text-white mb-8">My Dashboard</h1>
661
+
662
+ <!-- Stats Cards -->
663
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
664
+ <div class="glass-effect rounded-2xl p-6 text-center">
665
+ <div class="text-3xl font-bold text-white mb-2" x-text="enrolledCourses.length"></div>
666
+ <div class="text-gray-300">Enrolled Courses</div>
667
+ </div>
668
+ <div class="glass-effect rounded-2xl p-6 text-center">
669
+ <div class="text-3xl font-bold text-white mb-2" x-text="completedCourses.length"></div>
670
+ <div class="text-gray-300">Completed</div>
671
+ </div>
672
+ <div class="glass-effect rounded-2xl p-6 text-center">
673
+ <div class="text-3xl font-bold text-white mb-2" x-text="certificatesEarned"></div>
674
+ <div class="text-gray-300">Certificates</div>
675
+ </div>
676
+ <div class="glass-effect rounded-2xl p-6 text-center">
677
+ <div class="text-3xl font-bold text-white mb-2" x-text="totalHours"></div>
678
+ <div class="text-gray-300">Hours Learned</div>
679
+ </div>
680
+ </div>
681
+
682
+ <!-- My Courses -->
683
+ <div class="glass-effect rounded-2xl p-6 mb-8">
684
+ <h2 class="text-2xl font-bold text-white mb-4">My Courses</h2>
685
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
686
+ <template x-for="course in enrolledCourses" :key="course.id">
687
+ <div class="course-card rounded-xl p-4">
688
+ <img :src="course.thumbnail" :alt="course.title" class="w-full h-32 rounded-lg object-cover mb-3">
689
+ <h3 class="text-white font-semibold mb-2" x-text="course.title"></h3>
690
+ <div class="mb-3">
691
+ <div class="flex justify-between text-sm text-gray-300 mb-1">
692
+ <span>Progress</span>
693
+ <span x-text="getCourseProgress(course.id) + '%'"></span>
694
+ </div>
695
+ <div class="progress-bar h-2">
696
+ <div class="progress-fill" :style="`width: ${getCourseProgress(course.id)}%`"></div>
697
+ </div>
698
+ </div>
699
+ <button @click="currentPage = 'course-detail'; selectedCourse = course"
700
+ class="w-full bg-gradient-to-r from-purple-500 to-blue-500 text-white py-2 rounded-lg">
701
+ Continue Learning
702
+ </button>
703
+ </div>
704
+ </template>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- Achievements -->
709
+ <div class="glass-effect rounded-2xl p-6">
710
+ <h2 class="text-2xl font-bold text-white mb-4">Achievements</h2>
711
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
712
+ <template x-for="badge in achievements" :key="badge.id">
713
+ <div class="text-center">
714
+ <div class="w-16 h-16 mx-auto mb-2 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
715
+ <i :class="badge.icon" class="text-white text-2xl"></i>
716
+ </div>
717
+ <div class="text-white text-sm" x-text="badge.name"></div>
718
+ </div>
719
+ </template>
720
+ </div>
721
+ </div>
722
+ </div>
723
+ </div>
724
+
725
+ <!-- Instructor Dashboard -->
726
+ <div x-show="currentPage === 'instructor'" class="px-6 py-12">
727
+ <div class="max-w-7xl mx-auto">
728
+ <h1 class="text-4xl font-bold text-white mb-8">Instructor Dashboard</h1>
729
+
730
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
731
+ <!-- Stats -->
732
+ <div class="lg:col-span-2">
733
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
734
+ <div class="glass-effect rounded-2xl p-6 text-center">
735
+ <div class="text-3xl font-bold text-white mb-2" x-text="publishedCourses.length"></div>
736
+ <div class="text-gray-300">Published Courses</div>
737
+ </div>
738
+ <div class="glass-effect rounded-2xl p-6 text-center">
739
+ <div class="text-3xl font-bold text-white mb-2" x-text="totalStudents"></div>
740
+ <div class="text-gray-300">Total Students</div>
741
+ </div>
742
+ <div class="glass-effect rounded-2xl p-6 text-center">
743
+ <div class="text-3xl font-bold text-white mb-2">$<span x-text="totalRevenue"></span></div>
744
+ <div class="text-gray-300">Total Revenue</div>
745
+ </div>
746
+ </div>
747
+
748
+ <!-- Create Course -->
749
+ <div class="glass-effect rounded-2xl p-6">
750
+ <h2 class="text-2xl font-bold text-white mb-4">Create New Course</h2>
751
+ <form @submit.prevent="createCourse()" class="space-y-4">
752
+ <div>
753
+ <label class="text-white mb-2 block">Course Title</label>
754
+ <input type="text" x-model="newCourse.title"
755
+ class="search-bar rounded-lg px-4 py-2 text-white w-full">
756
+ </div>
757
+ <div>
758
+ <label class="text-white mb-2 block">Description</label>
759
+ <textarea x-model="newCourse.description"
760
+ class="search-bar rounded-lg px-4 py-2 text-white w-full h-24"></textarea>
761
+ </div>
762
+ <div class="grid grid-cols-2 gap-4">
763
+ <div>
764
+ <label class="text-white mb-2 block">Category</label>
765
+ <select x-model="newCourse.category" class="search-bar rounded-lg px-4 py-2 text-white w-full">
766
+ <option value="">Select Category</option>
767
+ <template x-for="category in categories" :key="category">
768
+ <option :value="category" x-text="category"></option>
769
+ </template>
770
+ </select>
771
+ </div>
772
+ <div>
773
+ <label class="text-white mb-2 block">Price ($)</label>
774
+ <input type="number" x-model="newCourse.price"
775
+ class="search-bar rounded-lg px-4 py-2 text-white w-full">
776
+ </div>
777
+ </div>
778
+ <button type="submit"
779
+ class="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-6 py-2 rounded-lg">
780
+ Create Course
781
+ </button>
782
+ </form>
783
+ </div>
784
+ </div>
785
+
786
+ <!-- My Courses -->
787
+ <div>
788
+ <div class="glass-effect rounded-2xl p-6">
789
+ <h2 class="text-xl font-bold text-white mb-4">My Courses</h2>
790
+ <div class="space-y-4">
791
+ <template x-for="course in publishedCourses" :key="course.id">
792
+ <div class="flex items-center space-x-3">
793
+ <img :src="course.thumbnail" class="w-12 h-12 rounded-lg object-cover">
794
+ <div>
795
+ <div class="text-white font-semibold" x-text="course.title"></div>
796
+ <div class="text-gray-400 text-sm" x-text="course.students + ' students'"></div>
797
+ </div>
798
+ </div>
799
+ </template>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+
807
+ <!-- Profile Page -->
808
+ <div x-show="currentPage === 'profile'" class="px-6 py-12">
809
+ <div class="max-w-4xl mx-auto">
810
+ <h1 class="text-4xl font-bold text-white mb-8">Profile Settings</h1>
811
+
812
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
813
+ <div class="lg:col-span-2">
814
+ <div class="glass-effect rounded-2xl p-6">
815
+ <h2 class="text-2xl font-bold text-white mb-4">Personal Information</h2>
816
+ <form @submit.prevent="updateProfile()" class="space-y-4">
817
+ <div class="grid grid-cols-2 gap-4">
818
+ <div>
819
+ <label class="text-white mb-2 block">First Name</label>
820
+ <input type="text" x-model="userProfile.firstName"
821
+ class="search-bar rounded-lg px-4 py-2 text-white w-full">
822
+ </div>
823
+ <div>
824
+ <label class="text-white mb-2 block">Last Name</label>
825
+ <input type="text" x-model="userProfile.lastName"
826
+ class="search-bar rounded-lg px-4 py-2 text-white w-full">
827
+ </div>
828
+ </div>
829
+ <div>
830
+ <label class="text-white mb-2 block">Email</label>
831
+ <input type="email" x-model="userProfile.email"
832
+ class="search-bar rounded-lg px-4 py-2 text-white w-full">
833
+ </div>
834
+ <div>
835
+ <label class="text-white mb-2 block">Bio</label>
836
+ <textarea x-model="userProfile.bio"
837
+ class="search-bar rounded-lg px-4 py-2 text-white w-full h-24"></textarea>
838
+ </div>
839
+ <button type="submit"
840
+ class="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-6 py-2 rounded-lg">
841
+ Save Changes
842
+ </button>
843
+ </form>
844
+ </div>
845
+ </div>
846
+
847
+ <div>
848
+ <div class="glass-effect rounded-2xl p-6 text-center">
849
+ <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center">
850
+ <span class="text-white text-3xl font-bold" x-text="user?.name?.charAt(0)"></span>
851
+ </div>
852
+ <h3 class="text-xl font-bold text-white" x-text="user?.name"></h3>
853
+ <p class="text-gray-300" x-text="user?.email"></p>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </main>
860
+
861
+ <!-- Modals -->
862
+ <div x-show="showModal"
863
+ x-transition:enter="transition ease-out duration-300"
864
+ x-transition:enter-start="opacity-0"
865
+ x-transition:enter-end="opacity-100"
866
+ x-transition:leave="transition ease-in duration-200"
867
+ x-transition:leave-start="opacity-100"
868
+ x-transition:leave-end="opacity-0"
869
+ class="fixed inset-0 modal-backdrop flex items-center justify-center z-50">
870
+ <div class="modal-content bg-white rounded-2xl p-8 max-w-md w-full mx-4"
871
+ :class="{'show': showModal}">
872
+ <button @click="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
873
+ <i class="fas fa-times text-xl"></i>
874
+ </button>
875
+
876
+ <!-- Login Modal -->
877
+ <div x-show="modalType === 'login'">
878
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Welcome Back</h2>
879
+ <form @submit.prevent="login()" class="space-y-4">
880
+ <div>
881
+ <label class="block text-gray-700 mb-2">Email</label>
882
+ <input type="email" x-model="loginForm.email"
883
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
884
+ </div>
885
+ <div>
886
+ <label class="block text-gray-700 mb-2">Password</label>
887
+ <input type="password" x-model="loginForm.password"
888
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
889
+ </div>
890
+ <button type="submit"
891
+ class="w-full bg-gradient-to-r from-purple-500 to-blue-500 text-white py-3 rounded-lg font-semibold">
892
+ Sign In
893
+ </button>
894
+ </form>
895
+ <div class="text-center mt-4">
896
+ <button @click="modalType = 'register'" class="text-purple-600 hover:underline">
897
+ Don't have an account? Sign up
898
+ </button>
899
+ </div>
900
+ </div>
901
+
902
+ <!-- Register Modal -->
903
+ <div x-show="modalType === 'register'">
904
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Join EduLoom</h2>
905
+ <form @submit.prevent="register()" class="space-y-4">
906
+ <div>
907
+ <label class="block text-gray-700 mb-2">Full Name</label>
908
+ <input type="text" x-model="registerForm.name"
909
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
910
+ </div>
911
+ <div>
912
+ <label class="block text-gray-700 mb-2">Email</label>
913
+ <input type="email" x-model="registerForm.email"
914
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
915
+ </div>
916
+ <div>
917
+ <label class="block text-gray-700 mb-2">Password</label>
918
+ <input type="password" x-model="registerForm.password"
919
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
920
+ </div>
921
+ <div>
922
+ <label class="block text-gray-700 mb-2">I want to</label>
923
+ <select x-model="registerForm.role"
924
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500">
925
+ <option value="student">Learn</option>
926
+ <option value="instructor">Teach</option>
927
+ </select>
928
+ </div>
929
+ <button type="submit"
930
+ class="w-full bg-gradient-to-r from-purple-500 to-blue-500 text-white py-3 rounded-lg font-semibold">
931
+ Create Account
932
+ </button>
933
+ </form>
934
+ <div class="text-center mt-4">
935
+ <button @click="modalType = 'login'" class="text-purple-600 hover:underline">
936
+ Already have an account? Sign in
937
+ </button>
938
+ </div>
939
+ </div>
940
+
941
+ <!-- Payment Modal -->
942
+ <div x-show="modalType === 'payment'">
943
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Complete Your Purchase</h2>
944
+ <div class="payment-modal rounded-2xl p-6">
945
+ <div class="text-center mb-4">
946
+ <h3 class="text-xl font-bold text-white" x-text="selectedCourse?.title"></h3>
947
+ <p class="text-3xl font-bold text-white mt-2">$<span x-text="selectedCourse?.price"></span></p>
948
+ </div>
949
+
950
+ <form @submit.prevent="processPayment()" class="space-y-4">
951
+ <div class="stripe-card">
952
+ <div class="mb-4">
953
+ <label class="text-white mb-2 block">Card Number</label>
954
+ <input type="text" placeholder="1234 5678 9012 3456"
955
+ class="w-full px-4 py-2 bg-white/20 border border-white/30 rounded-lg text-white placeholder-white/70">
956
+ </div>
957
+ <div class="grid grid-cols-2 gap-4">
958
+ <div>
959
+ <label class="text-white mb-2 block">Expiry</label>
960
+ <input type="text" placeholder="MM/YY"
961
+ class="w-full px-4 py-2 bg-white/20 border border-white/30 rounded-lg text-white placeholder-white/70">
962
+ </div>
963
+ <div>
964
+ <label class="text-white mb-2 block">CVC</label>
965
+ <input type="text" placeholder="123"
966
+ class="w-full px-4 py-2 bg-white/20 border border-white/30 rounded-lg text-white placeholder-white/70">
967
+ </div>
968
+ </div>
969
+ </div>
970
+
971
+ <button type="submit"
972
+ class="w-full bg-white text-purple-600 py-3 rounded-lg font-semibold">
973
+ Complete Purchase
974
+ </button>
975
+ </form>
976
+ </div>
977
+ </div>
978
+
979
+ <!-- Quiz Modal -->
980
+ <div x-show="modalType === 'quiz'" class="max-w-2xl">
981
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Quiz Time!</h2>
982
+ <div class="space-y-6">
983
+ <div class="text-center">
984
+ <h3 class="text-xl font-bold text-gray-800 mb-2" x-text="currentQuiz?.title"></h3>
985
+ <p class="text-gray-600">Question <span x-text="currentQuestionIndex + 1"></span> of <span x-text="currentQuiz?.questions?.length"></span></p>
986
+ </div>
987
+
988
+ <div class="bg-gray-50 rounded-lg p-6">
989
+ <h4 class="text-lg font-semibold text-gray-800 mb-4" x-text="currentQuestion?.question"></h4>
990
+ <div class="space-y-3">
991
+ <template x-for="(option, index) in currentQuestion?.options" :key="index">
992
+ <div @click="selectAnswer(index)"
993
+ class="quiz-option p-4 border-2 border-gray-200 rounded-lg"
994
+ :class="{
995
+ 'selected': selectedAnswer === index,
996
+ 'correct': showAnswer && index === currentQuestion?.correctAnswer,
997
+ 'incorrect': showAnswer && selectedAnswer === index && index !== currentQuestion?.correctAnswer
998
+ }">
999
+ <span x-text="option"></span>
1000
+ </div>
1001
+ </template>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <div class="flex justify-between">
1006
+ <button @click="previousQuestion()"
1007
+ :disabled="currentQuestionIndex === 0"
1008
+ class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg disabled:opacity-50">
1009
+ Previous
1010
+ </button>
1011
+ <button @click="nextQuestion()"
1012
+ x-show="!showAnswer"
1013
+ :disabled="selectedAnswer === null"
1014
+ class="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-6 py-2 rounded-lg disabled:opacity-50">
1015
+ Next
1016
+ </button>
1017
+ <button @click="submitQuiz()"
1018
+ x-show="showAnswer && currentQuestionIndex === currentQuiz?.questions?.length - 1"
1019
+ class="bg-green-500 text-white px-6 py-2 rounded-lg">
1020
+ Finish Quiz
1021
+ </button>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+
1028
+ <!-- Notifications -->
1029
+ <div class="notification" x-show="showNotification">
1030
+ <div class="glass-effect rounded-lg p-4 text-white">
1031
+ <div class="flex items-center">
1032
+ <i :class="notificationType === 'success' ? 'fas fa-check-circle text-green-400' : 'fas fa-exclamation-circle text-red-400'"
1033
+ class="mr-2"></i>
1034
+ <span x-text="notificationMessage"></span>
1035
+ </div>
1036
+ </div>
1037
+ </div>
1038
+
1039
+ <!-- AI Chat Assistant -->
1040
+ <div class="ai-chat" :class="{'minimized': !chatOpen}">
1041
+ <div class="bg-white/10 p-4 flex justify-between items-center">
1042
+ <h3 class="text-white font-semibold">AI Assistant</h3>
1043
+ <button @click="chatOpen = !chatOpen" class="text-white">
1044
+ <i :class="chatOpen ? 'fas fa-minus' : 'fas fa-plus'"></i>
1045
+ </button>
1046
+ </div>
1047
+
1048
+ <div x-show="chatOpen" class="chat-messages">
1049
+ <template x-for="message in chatMessages" :key="message.id">
1050
+ <div :class="{'chat-message user': message.type === 'user', 'chat-message ai': message.type === 'ai'}"
1051
+ x-text="message.text">
1052
+ </div>
1053
+ </template>
1054
+ </div>
1055
+
1056
+ <div x-show="chatOpen" class="p-4">
1057
+ <input type="text"
1058
+ x-model="chatInput"
1059
+ @keyup.enter="sendChatMessage()"
1060
+ placeholder="Ask me anything..."
1061
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300">
1062
+ </div>
1063
+ </div>
1064
+
1065
+ <!-- Loading Spinner -->
1066
+ <div x-show="loading"
1067
+ class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
1068
+ <div class="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
1069
+ </div>
1070
+ </div>
1071
+
1072
+ <script>
1073
+ function eduLoomApp() {
1074
+ return {
1075
+ currentPage: 'home',
1076
+ user: null,
1077
+ userProfile: {
1078
+ firstName: '',
1079
+ lastName: '',
1080
+ email: '',
1081
+ bio: ''
1082
+ },
1083
+ showModal: false,
1084
+ modalType: 'login',
1085
+ loading: false,
1086
+ searchQuery: '',
1087
+ filters: {
1088
+ level: '',
1089
+ price: '',
1090
+ rating: ''
1091
+ },
1092
+ courses: [],
1093
+ featuredCourses: [],
1094
+ enrolledCourses: [],
1095
+ completedCourses: [],
1096
+ certificatesEarned: 0,
1097
+ totalHours: 0,
1098
+ totalStudents: 0,
1099
+ totalRevenue: 0,
1100
+ publishedCourses: [],
1101
+ achievements: [],
1102
+ notifications: [],
1103
+ showNotification: false,
1104
+ notificationMessage: '',
1105
+ notificationType: 'success',
1106
+ profileDropdown: false,
1107
+ selectedCourse: null,
1108
+ newComment: '',
1109
+ newCourse: {
1110
+ title: '',
1111
+ description: '',
1112
+ category: '',
1113
+ price: 0
1114
+ },
1115
+ loginForm: {
1116
+ email: '',
1117
+ password: ''
1118
+ },
1119
+ registerForm: {
1120
+ name: '',
1121
+ email: '',
1122
+ password: '',
1123
+ role: 'student'
1124
+ },
1125
+ chatOpen: false,
1126
+ chatInput: '',
1127
+ chatMessages: [],
1128
+ currentQuiz: null,
1129
+ currentQuestionIndex: 0,
1130
+ currentQuestion: null,
1131
+ selectedAnswer: null,
1132
+ showAnswer: false,
1133
+ wishlist: [],
1134
+ categories: [
1135
+ 'Web Development',
1136
+ 'Data Science',
1137
+ 'AI & Machine Learning',
1138
+ 'Mobile Development',
1139
+ 'Cloud Computing',
1140
+ 'Cybersecurity',
1141
+ 'Digital Marketing',
1142
+ 'Business'
1143
+ ],
1144
+
1145
+ init() {
1146
+ // Initialize mock data
1147
+ this.loadMockData();
1148
+
1149
+ // Check for user in localStorage
1150
+ const savedUser = localStorage.getItem('eduLoomUser');
1151
+ if (savedUser) {
1152
+ this.user = JSON.parse(savedUser);
1153
+ }
1154
+
1155
+ // Initialize achievements
1156
+ this.achievements = [
1157
+ { id: 1, name: 'First Course', icon: 'fas fa-graduation-cap' },
1158
+ { id: 2, name: 'Quiz Master', icon: 'fas fa-trophy' },
1159
+ { id: 3, name: '100 Hours', icon: 'fas fa-clock' },
1160
+ { id: 4, name: 'Top Student', icon: 'fas fa-medal' }
1161
+ ];
1162
+ },
1163
+
1164
+ loadMockData() {
1165
+ this.courses = [
1166
+ {
1167
+ id: 1,
1168
+ title: 'Complete Web Development Bootcamp',
1169
+ description: 'Learn HTML, CSS, JavaScript, React, Node.js and more',
1170
+ thumbnail: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97',
1171
+ instructor: 'John Doe',
1172
+ rating: 4.8,
1173
+ students: 1234,
1174
+ price: 89,
1175
+ category: 'Web Development',
1176
+ level: 'beginner',
1177
+ totalHours: 40,
1178
+ videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
1179
+ sections: [
1180
+ {
1181
+ id: 1,
1182
+ title: 'Introduction',
1183
+ lectures: [
1184
+ { id: 1, title: 'Course Overview', duration: '5:30', completed: true },
1185
+ { id: 2, title: 'Setting Up Environment', duration: '10:15', completed: false }
1186
+ ]
1187
+ }
1188
+ ],
1189
+ comments: [
1190
+ { id: 1, user: 'Alice', text: 'Great course! Really helped me understand React.' },
1191
+ { id: 2, user: 'Bob', text: 'The instructor explains concepts very clearly.' }
1192
+ ]
1193
+ },
1194
+ {
1195
+ id: 2,
1196
+ title: 'Machine Learning A-Z',
1197
+ description: 'Master machine learning algorithms and techniques',
1198
+ thumbnail: 'https://images.unsplash.com/photo-1555949963-aa79dcee981c',
1199
+ instructor: 'Jane Smith',
1200
+ rating: 4.9,
1201
+ students: 892,
1202
+ price: 129,
1203
+ category: 'AI & Machine Learning',
1204
+ level: 'advanced',
1205
+ totalHours: 60
1206
+ },
1207
+ {
1208
+ id: 3,
1209
+ title: 'iOS Development with Swift',
1210
+ description: 'Build iOS apps from scratch using Swift',
1211
+ thumbnail: 'https://images.unsplash.com/photo-1555774698-0b77e916bb71',
1212
+ instructor: 'Mike Johnson',
1213
+ rating: 4.7,
1214
+ students: 567,
1215
+ price: 0,
1216
+ category: 'Mobile Development',
1217
+ level: 'intermediate',
1218
+ totalHours: 35
1219
+ }
1220
+ ];
1221
+
1222
+ this.featuredCourses = this.courses.slice(0, 3);
1223
+ this.enrolledCourses = this.courses.slice(0, 2);
1224
+ this.publishedCourses = this.courses.slice(0, 1);
1225
+ this.totalStudents = 1234;
1226
+ this.totalRevenue = 8940;
1227
+ this.certificatesEarned = 3;
1228
+ this.totalHours = 75;
1229
+ },
1230
+
1231
+ openModal(type) {
1232
+ this.modalType = type;
1233
+ this.showModal = true;
1234
+ },
1235
+
1236
+ closeModal() {
1237
+ this.showModal = false;
1238
+ this.modalType = '';
1239
+ },
1240
+
1241
+ login() {
1242
+ // Mock login
1243
+ this.user = {
1244
+ id: 1,
1245
+ name: this.loginForm.email.split('@')[0],
1246
+ email: this.loginForm.email,
1247
+ role: 'student'
1248
+ };
1249
+ localStorage.setItem('eduLoomUser', JSON.stringify(this.user));
1250
+ this.closeModal();
1251
+ this.showNotification = true;
1252
+ this.notificationMessage = 'Successfully logged in!';
1253
+ this.notificationType = 'success';
1254
+ setTimeout(() => this.showNotification = false, 3000);
1255
+ },
1256
+
1257
+ register() {
1258
+ // Mock registration
1259
+ this.user = {
1260
+ id: Date.now(),
1261
+ name: this.registerForm.name,
1262
+ email: this.registerForm.email,
1263
+ role: this.registerForm.role
1264
+ };
1265
+ localStorage.setItem('eduLoomUser', JSON.stringify(this.user));
1266
+ this.closeModal();
1267
+ this.showNotification = true;
1268
+ this.notificationMessage = 'Account created successfully!';
1269
+ this.notificationType = 'success';
1270
+ setTimeout(() => this.showNotification = false, 3000);
1271
+ },
1272
+
1273
+ logout() {
1274
+ this.user = null;
1275
+ localStorage.removeItem('eduLoomUser');
1276
+ this.currentPage = 'home';
1277
+ this.profileDropdown = false;
1278
+ },
1279
+
1280
+ searchCourses() {
1281
+ // Implement search functionality
1282
+ if (this.searchQuery.length > 0) {
1283
+ this.filteredCourses = this.courses.filter(course =>
1284
+ course.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
1285
+ course.description.toLowerCase().includes(this.searchQuery.toLowerCase())
1286
+ );
1287
+ } else {
1288
+ this.filteredCourses = this.courses;
1289
+ }
1290
+ },
1291
+
1292
+ filterByCategory(category) {
1293
+ this.filteredCourses = this.courses.filter(course => course.category === category);
1294
+ },
1295
+
1296
+ resetFilters() {
1297
+ this.filters = {
1298
+ level: '',
1299
+ price: '',
1300
+ rating: ''
1301
+ };
1302
+ this.filteredCourses = this.courses;
1303
+ },
1304
+
1305
+ viewCourse(course) {
1306
+ this.selectedCourse = course;
1307
+ this.currentPage = 'course-detail';
1308
+ },
1309
+
1310
+ enrollCourse(course) {
1311
+ this.enrolledCourses.push(course);
1312
+ this.showNotification = true;
1313
+ this.notificationMessage = `Successfully enrolled in ${course.title}!`;
1314
+ this.notificationType = 'success';
1315
+ setTimeout(() => this.showNotification = false, 3000);
1316
+ },
1317
+
1318
+ isEnrolled(courseId) {
1319
+ return this.enrolledCourses.some(course => course.id === courseId);
1320
+ },
1321
+
1322
+ getCourseProgress(courseId) {
1323
+ // Mock progress calculation
1324
+ return Math.floor(Math.random() * 100);
1325
+ },
1326
+
1327
+ toggleWishlist(course) {
1328
+ const index = this.wishlist.findIndex(c => c.id === course.id);
1329
+ if (index > -1) {
1330
+ this.wishlist.splice(index, 1);
1331
+ } else {
1332
+ this.wishlist.push(course);
1333
+ }
1334
+ },
1335
+
1336
+ isInWishlist(courseId) {
1337
+ return this.wishlist.some(course => course.id === courseId);
1338
+ },
1339
+
1340
+ createCourse() {
1341
+ const course = {
1342
+ id: Date.now(),
1343
+ title: this.newCourse.title,
1344
+ description: this.newCourse.description,
1345
+ category: this.newCourse.category,
1346
+ price: this.newCourse.price,
1347
+ instructor: this.user.name,
1348
+ thumbnail: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3',
1349
+ rating: 0,
1350
+ students: 0
1351
+ };
1352
+ this.publishedCourses.push(course);
1353
+ this.newCourse = { title: '', description: '', category: '', price: 0 };
1354
+ this.showNotification = true;
1355
+ this.notificationMessage = 'Course created successfully!';
1356
+ setTimeout(() => this.showNotification = false, 3000);
1357
+ },
1358
+
1359
+ updateProfile() {
1360
+ this.user.name = `${this.userProfile.firstName} ${this.userProfile.lastName}`;
1361
+ this.showNotification = true;
1362
+ this.notificationMessage = 'Profile updated successfully!';
1363
+ setTimeout(() => this.showNotification = false, 3000);
1364
+ },
1365
+
1366
+ processPayment() {
1367
+ // Mock payment processing
1368
+ this.closeModal();
1369
+ this.enrollCourse(this.selectedCourse);
1370
+ },
1371
+
1372
+ sendChatMessage() {
1373
+ if (this.chatInput.trim()) {
1374
+ this.chatMessages.push({
1375
+ id: Date.now(),
1376
+ type: 'user',
1377
+ text: this.chatInput
1378
+ });
1379
+
1380
+ // Mock AI response
1381
+ setTimeout(() => {
1382
+ this.chatMessages.push({
1383
+ id: Date.now() + 1,
1384
+ type: 'ai',
1385
+ text: `I understand you're asking about "${this.chatInput}". How can I help you with this topic?`
1386
+ });
1387
+ }, 1000);
1388
+
1389
+ this.chatInput = '';
1390
+ }
1391
+ },
1392
+
1393
+ toggleNotifications() {
1394
+ // Toggle notifications panel
1395
+ console.log('Notifications toggled');
1396
+ },
1397
+
1398
+ postComment() {
1399
+ if (this.newComment.trim() && this.selectedCourse) {
1400
+ const comment = {
1401
+ id: Date.now(),
1402
+ user: this.user.name,
1403
+ text: this.newComment
1404
+ };
1405
+ this.selectedCourse.comments.push(comment);
1406
+ this.newComment = '';
1407
+ }
1408
+ }
1409
+ }
1410
+ }
1411
+ </script>
1412
+ </body>
1413
+ </html>