Hugging Face's logo

Spaces:
Maddyr237
/
lms2
Running

App Files Community
Maddyr237 commited on
Commit
ceba678
·
verified ·
1 Parent(s): 537ab0e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1226 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lms2
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: indigo
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: lms2
3
+ emoji: 🐳
4
+ colorFrom: gray
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,1226 @@
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>EduMaster LMS</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for animations and transitions */
11
+ .sidebar-item:hover .sidebar-icon {
12
+ transform: translateX(5px);
13
+ }
14
+
15
+ .course-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+
20
+ .progress-ring__circle {
21
+ transition: stroke-dashoffset 0.5s;
22
+ transform: rotate(-90deg);
23
+ transform-origin: 50% 50%;
24
+ }
25
+
26
+ .chapter-accordion {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ @keyframes fadeIn {
31
+ from { opacity: 0; }
32
+ to { opacity: 1; }
33
+ }
34
+
35
+ .fade-in {
36
+ animation: fadeIn 0.5s ease-in;
37
+ }
38
+
39
+ /* Custom scrollbar */
40
+ ::-webkit-scrollbar {
41
+ width: 8px;
42
+ }
43
+ ::-webkit-scrollbar-track {
44
+ background: #f1f1f1;
45
+ }
46
+ ::-webkit-scrollbar-thumb {
47
+ background: #888;
48
+ border-radius: 4px;
49
+ }
50
+ ::-webkit-scrollbar-thumb:hover {
51
+ background: #555;
52
+ }
53
+
54
+ /* Video player styling */
55
+ .video-container {
56
+ position: relative;
57
+ padding-bottom: 56.25%;
58
+ height: 0;
59
+ overflow: hidden;
60
+ }
61
+ .video-container iframe {
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ width: 100%;
66
+ height: 100%;
67
+ }
68
+
69
+ /* Quiz styling */
70
+ .quiz-option {
71
+ transition: all 0.2s ease;
72
+ }
73
+ .quiz-option:hover {
74
+ transform: translateX(5px);
75
+ }
76
+ .quiz-option.correct {
77
+ background-color: #d1fae5;
78
+ border-color: #10b981;
79
+ }
80
+ .quiz-option.incorrect {
81
+ background-color: #fee2e2;
82
+ border-color: #ef4444;
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="bg-gray-50 font-sans">
87
+ <!-- Header -->
88
+ <header class="bg-indigo-700 text-white shadow-lg">
89
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
90
+ <div class="flex items-center space-x-2 cursor-pointer" onclick="loadPage('dashboard')">
91
+ <i class="fas fa-graduation-cap text-3xl"></i>
92
+ <h1 class="text-2xl font-bold">EduMaster LMS</h1>
93
+ </div>
94
+ <div class="flex items-center space-x-6">
95
+ <div class="relative">
96
+ <input type="text" placeholder="Search courses..." class="py-2 px-4 pr-10 rounded-full bg-indigo-600 text-white placeholder-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400">
97
+ <i class="fas fa-search absolute right-3 top-3 text-indigo-300"></i>
98
+ </div>
99
+ <div class="flex items-center space-x-2 cursor-pointer" onclick="loadPage('profile')">
100
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full border-2 border-indigo-400">
101
+ <span class="font-medium">Sarah K.</span>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </header>
106
+
107
+ <div class="flex">
108
+ <!-- Sidebar -->
109
+ <aside class="w-64 bg-white shadow-md h-screen sticky top-0 overflow-y-auto">
110
+ <nav class="p-4">
111
+ <ul class="space-y-2">
112
+ <li>
113
+ <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('dashboard')">
114
+ <i class="sidebar-icon fas fa-home mr-3 text-gray-500 transition-transform"></i>
115
+ Dashboard
116
+ </a>
117
+ </li>
118
+ <li>
119
+ <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('my-courses')">
120
+ <i class="sidebar-icon fas fa-book mr-3 text-gray-500 transition-transform"></i>
121
+ My Courses
122
+ </a>
123
+ </li>
124
+ <li>
125
+ <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('schedule')">
126
+ <i class="sidebar-icon fas fa-calendar-alt mr-3 text-gray-500 transition-transform"></i>
127
+ Schedule
128
+ </a>
129
+ </li>
130
+ <li>
131
+ <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('progress')">
132
+ <i class="sidebar-icon fas fa-chart-bar mr-3 text-gray-500 transition-transform"></i>
133
+ Progress
134
+ </a>
135
+ </li>
136
+ <li>
137
+ <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('discussions')">
138
+ <i class="sidebar-icon fas fa-comments mr-3 text-gray-500 transition-transform"></i>
139
+ Discussions
140
+ </a>
141
+ </li>
142
+ </ul>
143
+
144
+ <div class="mt-8 pt-4 border-t border-gray-200">
145
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4">COURSES</h3>
146
+ <ul class="space-y-1">
147
+ <li>
148
+ <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('web-development')">
149
+ <i class="sidebar-icon fas fa-laptop-code mr-3 text-gray-500 transition-transform"></i>
150
+ Web Development
151
+ </a>
152
+ </li>
153
+ <li>
154
+ <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('mobile-apps')">
155
+ <i class="sidebar-icon fas fa-mobile-alt mr-3 text-gray-500 transition-transform"></i>
156
+ Mobile Apps
157
+ </a>
158
+ </li>
159
+ <li>
160
+ <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('data-science')">
161
+ <i class="sidebar-icon fas fa-chart-line mr-3 text-gray-500 transition-transform"></i>
162
+ Data Science
163
+ </a>
164
+ </li>
165
+ <li>
166
+ <a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('design')">
167
+ <i class="sidebar-icon fas fa-paint-brush mr-3 text-gray-500 transition-transform"></i>
168
+ Design
169
+ </a>
170
+ </li>
171
+ </ul>
172
+ </div>
173
+ </nav>
174
+ </aside>
175
+
176
+ <!-- Main Content -->
177
+ <main class="flex-1 p-8 overflow-y-auto" style="max-height: calc(100vh - 80px);" id="main-content">
178
+ <!-- Dashboard Content (Default) -->
179
+ <div id="dashboard-content">
180
+ <div class="flex justify-between items-center mb-8">
181
+ <h2 class="text-3xl font-bold text-gray-800">Welcome back, Sarah!</h2>
182
+ <div class="flex space-x-4">
183
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
184
+ <i class="fas fa-plus mr-2"></i> New Course
185
+ </button>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Stats Cards -->
190
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
191
+ <div class="bg-white rounded-xl shadow-md p-6">
192
+ <div class="flex items-center justify-between">
193
+ <div>
194
+ <p class="text-gray-500">Enrolled Courses</p>
195
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">5</h3>
196
+ </div>
197
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
198
+ <i class="fas fa-book text-xl"></i>
199
+ </div>
200
+ </div>
201
+ <div class="mt-4 text-sm text-indigo-600 font-medium">
202
+ <a href="#" class="hover:underline" onclick="loadPage('my-courses')">View all</a>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="bg-white rounded-xl shadow-md p-6">
207
+ <div class="flex items-center justify-between">
208
+ <div>
209
+ <p class="text-gray-500">Completed Lessons</p>
210
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">23</h3>
211
+ </div>
212
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
213
+ <i class="fas fa-check-circle text-xl"></i>
214
+ </div>
215
+ </div>
216
+ <div class="mt-4 text-sm text-green-600 font-medium">
217
+ <a href="#" class="hover:underline" onclick="loadPage('progress')">View progress</a>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="bg-white rounded-xl shadow-md p-6">
222
+ <div class="flex items-center justify-between">
223
+ <div>
224
+ <p class="text-gray-500">Upcoming Events</p>
225
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">3</h3>
226
+ </div>
227
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
228
+ <i class="fas fa-calendar-alt text-xl"></i>
229
+ </div>
230
+ </div>
231
+ <div class="mt-4 text-sm text-blue-600 font-medium">
232
+ <a href="#" class="hover:underline" onclick="loadPage('schedule')">View calendar</a>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="bg-white rounded-xl shadow-md p-6">
237
+ <div class="flex items-center justify-between">
238
+ <div>
239
+ <p class="text-gray-500">Unread Messages</p>
240
+ <h3 class="text-2xl font-bold text-gray-800 mt-1">7</h3>
241
+ </div>
242
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
243
+ <i class="fas fa-comments text-xl"></i>
244
+ </div>
245
+ </div>
246
+ <div class="mt-4 text-sm text-purple-600 font-medium">
247
+ <a href="#" class="hover:underline" onclick="loadPage('discussions')">View messages</a>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Continue Learning -->
253
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
254
+ <div class="flex justify-between items-center mb-6">
255
+ <h3 class="text-xl font-bold text-gray-800">Continue Learning</h3>
256
+ <a href="#" class="text-indigo-600 hover:underline font-medium" onclick="loadPage('my-courses')">View all</a>
257
+ </div>
258
+
259
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
260
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
261
+ <div class="relative">
262
+ <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Web Development" class="w-full h-40 object-cover">
263
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
264
+ <span class="bg-indigo-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
265
+ </div>
266
+ </div>
267
+ <div class="p-4">
268
+ <h4 class="font-bold text-gray-800 mb-1">Web Development</h4>
269
+ <p class="text-sm text-gray-600 mb-3">HTML, CSS, JavaScript fundamentals</p>
270
+ <div class="flex items-center justify-between">
271
+ <div class="w-full bg-gray-200 rounded-full h-2">
272
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 60%"></div>
273
+ </div>
274
+ <span class="ml-3 text-sm font-medium text-gray-700">60%</span>
275
+ </div>
276
+ <button class="mt-4 w-full bg-indigo-50 text-indigo-700 hover:bg-indigo-100 py-2 rounded-lg font-medium" onclick="loadCourse('web-development')">
277
+ Continue
278
+ </button>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
283
+ <div class="relative">
284
+ <img src="https://images.unsplash.com/photo-1512941937669-90a1b58eafe9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mobile Apps" class="w-full h-40 object-cover">
285
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
286
+ <span class="bg-blue-600 text-white text-xs font-medium px-2 py-0.5 rounded">Not Started</span>
287
+ </div>
288
+ </div>
289
+ <div class="p-4">
290
+ <h4 class="font-bold text-gray-800 mb-1">Mobile Apps</h4>
291
+ <p class="text-sm text-gray-600 mb-3">React Native and Flutter</p>
292
+ <div class="flex items-center justify-between">
293
+ <div class="w-full bg-gray-200 rounded-full h-2">
294
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
295
+ </div>
296
+ <span class="ml-3 text-sm font-medium text-gray-700">0%</span>
297
+ </div>
298
+ <button class="mt-4 w-full bg-blue-50 text-blue-700 hover:bg-blue-100 py-2 rounded-lg font-medium" onclick="loadCourse('mobile-apps')">
299
+ Start Learning
300
+ </button>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
305
+ <div class="relative">
306
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Data Science" class="w-full h-40 object-cover">
307
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
308
+ <span class="bg-green-600 text-white text-xs font-medium px-2 py-0.5 rounded">Completed</span>
309
+ </div>
310
+ </div>
311
+ <div class="p-4">
312
+ <h4 class="font-bold text-gray-800 mb-1">Data Science</h4>
313
+ <p class="text-sm text-gray-600 mb-3">Python, Pandas, and Machine Learning</p>
314
+ <div class="flex items-center justify-between">
315
+ <div class="w-full bg-gray-200 rounded-full h-2">
316
+ <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
317
+ </div>
318
+ <span class="ml-3 text-sm font-medium text-gray-700">100%</span>
319
+ </div>
320
+ <button class="mt-4 w-full bg-green-50 text-green-700 hover:bg-green-100 py-2 rounded-lg font-medium" onclick="loadCourse('data-science')">
321
+ View Certificate
322
+ </button>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Upcoming Events -->
329
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
330
+ <div class="flex justify-between items-center mb-6">
331
+ <h3 class="text-xl font-bold text-gray-800">Upcoming Events</h3>
332
+ <a href="#" class="text-indigo-600 hover:underline font-medium" onclick="loadPage('schedule')">View all</a>
333
+ </div>
334
+
335
+ <div class="space-y-4">
336
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
337
+ <div class="bg-indigo-100 text-indigo-800 p-3 rounded-lg mr-4">
338
+ <i class="fas fa-calendar-day text-lg"></i>
339
+ </div>
340
+ <div class="flex-1">
341
+ <h4 class="font-medium text-gray-800">Live Q&A Session</h4>
342
+ <p class="text-sm text-gray-600">Web Development Fundamentals</p>
343
+ <div class="mt-2 flex items-center text-sm text-gray-500">
344
+ <i class="fas fa-clock mr-1.5"></i>
345
+ <span>Tomorrow • 2:00 PM - 3:30 PM</span>
346
+ </div>
347
+ </div>
348
+ <button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium">
349
+ Join
350
+ </button>
351
+ </div>
352
+
353
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
354
+ <div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
355
+ <i class="fas fa-chalkboard-teacher text-lg"></i>
356
+ </div>
357
+ <div class="flex-1">
358
+ <h4 class="font-medium text-gray-800">Workshop: Mobile UI Design</h4>
359
+ <p class="text-sm text-gray-600">Mobile Apps Course</p>
360
+ <div class="mt-2 flex items-center text-sm text-gray-500">
361
+ <i class="fas fa-clock mr-1.5"></i>
362
+ <span>June 25 • 10:00 AM - 12:00 PM</span>
363
+ </div>
364
+ </div>
365
+ <button class="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
366
+ Remind Me
367
+ </button>
368
+ </div>
369
+
370
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
371
+ <div class="bg-purple-100 text-purple-800 p-3 rounded-lg mr-4">
372
+ <i class="fas fa-certificate text-lg"></i>
373
+ </div>
374
+ <div class="flex-1">
375
+ <h4 class="font-medium text-gray-800">Final Exam Deadline</h4>
376
+ <p class="text-sm text-gray-600">Data Science Course</p>
377
+ <div class="mt-2 flex items-center text-sm text-gray-500">
378
+ <i class="fas fa-clock mr-1.5"></i>
379
+ <span>June 30 • 11:59 PM</span>
380
+ </div>
381
+ </div>
382
+ <button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium">
383
+ Start Exam
384
+ </button>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Recent Discussions -->
390
+ <div class="bg-white rounded-xl shadow-md p-6">
391
+ <div class="flex justify-between items-center mb-6">
392
+ <h3 class="text-xl font-bold text-gray-800">Recent Discussions</h3>
393
+ <a href="#" class="text-indigo-600 hover:underline font-medium" onclick="loadPage('discussions')">View all</a>
394
+ </div>
395
+
396
+ <div class="space-y-4">
397
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
398
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-4">
399
+ <div class="flex-1">
400
+ <div class="flex items-center justify-between">
401
+ <h4 class="font-medium text-gray-800">Michael Johnson</h4>
402
+ <span class="text-xs text-gray-500">2 hours ago</span>
403
+ </div>
404
+ <p class="text-sm text-gray-600 mt-1">Has anyone completed the final project for Web Development? I'm stuck on the responsive design part...</p>
405
+ <div class="mt-2 flex items-center text-sm text-gray-500">
406
+ <i class="fas fa-comment mr-1.5"></i>
407
+ <span>5 replies</span>
408
+ <span class="ml-4 flex items-center">
409
+ <i class="fas fa-thumbs-up mr-1.5"></i>
410
+ <span>12 likes</span>
411
+ </span>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
417
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full mr-4">
418
+ <div class="flex-1">
419
+ <div class="flex items-center justify-between">
420
+ <h4 class="font-medium text-gray-800">Emily Chen</h4>
421
+ <span class="text-xs text-gray-500">5 hours ago</span>
422
+ </div>
423
+ <p class="text-sm text-gray-600 mt-1">Just shared some additional resources for the Data Science course in the resources section. Check it out!</p>
424
+ <div class="mt-2 flex items-center text-sm text-gray-500">
425
+ <i class="fas fa-comment mr-1.5"></i>
426
+ <span>3 replies</span>
427
+ <span class="ml-4 flex items-center">
428
+ <i class="fas fa-thumbs-up mr-1.5"></i>
429
+ <span>8 likes</span>
430
+ </span>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
436
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full mr-4">
437
+ <div class="flex-1">
438
+ <div class="flex items-center justify-between">
439
+ <h4 class="font-medium text-gray-800">David Wilson</h4>
440
+ <span class="text-xs text-gray-500">1 day ago</span>
441
+ </div>
442
+ <p class="text-sm text-gray-600 mt-1">Can someone explain the difference between React Native and Flutter? Trying to decide which mobile framework to learn first.</p>
443
+ <div class="mt-2 flex items-center text-sm text-gray-500">
444
+ <i class="fas fa-comment mr-1.5"></i>
445
+ <span>14 replies</span>
446
+ <span class="ml-4 flex items-center">
447
+ <i class="fas fa-thumbs-up mr-1.5"></i>
448
+ <span>22 likes</span>
449
+ </span>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- My Courses Content -->
458
+ <div id="my-courses-content" class="hidden">
459
+ <div class="flex justify-between items-center mb-8">
460
+ <h2 class="text-3xl font-bold text-gray-800">My Courses</h2>
461
+ <div class="flex space-x-4">
462
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
463
+ <i class="fas fa-plus mr-2"></i> New Course
464
+ </button>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Course Filter -->
469
+ <div class="bg-white rounded-xl shadow-md p-4 mb-8">
470
+ <div class="flex flex-wrap items-center justify-between">
471
+ <div class="flex space-x-2 mb-4 md:mb-0">
472
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">All</button>
473
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">In Progress</button>
474
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Completed</button>
475
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Not Started</button>
476
+ </div>
477
+ <div class="relative">
478
+ <select class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500">
479
+ <option>Sort by: Recent</option>
480
+ <option>Sort by: A-Z</option>
481
+ <option>Sort by: Progress</option>
482
+ </select>
483
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
484
+ <i class="fas fa-chevron-down"></i>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Courses Grid -->
491
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
492
+ <!-- Web Development Course -->
493
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
494
+ <div class="relative">
495
+ <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Web Development" class="w-full h-40 object-cover">
496
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
497
+ <span class="bg-indigo-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
498
+ </div>
499
+ </div>
500
+ <div class="p-4">
501
+ <div class="flex justify-between items-start mb-2">
502
+ <h4 class="font-bold text-gray-800">Web Development</h4>
503
+ <div class="flex items-center">
504
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
505
+ <span class="text-sm font-medium">4.8</span>
506
+ </div>
507
+ </div>
508
+ <p class="text-sm text-gray-600 mb-3">HTML, CSS, JavaScript fundamentals</p>
509
+ <div class="flex items-center justify-between mb-3">
510
+ <div class="flex items-center text-sm text-gray-500">
511
+ <i class="fas fa-book-open mr-1.5"></i>
512
+ <span>12 Lessons</span>
513
+ </div>
514
+ <div class="flex items-center text-sm text-gray-500">
515
+ <i class="fas fa-clock mr-1.5"></i>
516
+ <span>8h 30m</span>
517
+ </div>
518
+ </div>
519
+ <div class="flex items-center justify-between">
520
+ <div class="w-full bg-gray-200 rounded-full h-2">
521
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 60%"></div>
522
+ </div>
523
+ <span class="ml-3 text-sm font-medium text-gray-700">60%</span>
524
+ </div>
525
+ <div class="mt-4 grid grid-cols-2 gap-2">
526
+ <button class="bg-indigo-50 text-indigo-700 hover:bg-indigo-100 py-2 rounded-lg font-medium" onclick="loadCourse('web-development')">
527
+ Continue
528
+ </button>
529
+ <button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
530
+ Details
531
+ </button>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Mobile Apps Course -->
537
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
538
+ <div class="relative">
539
+ <img src="https://images.unsplash.com/photo-1512941937669-90a1b58eafe9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mobile Apps" class="w-full h-40 object-cover">
540
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
541
+ <span class="bg-blue-600 text-white text-xs font-medium px-2 py-0.5 rounded">Not Started</span>
542
+ </div>
543
+ </div>
544
+ <div class="p-4">
545
+ <div class="flex justify-between items-start mb-2">
546
+ <h4 class="font-bold text-gray-800">Mobile Apps</h4>
547
+ <div class="flex items-center">
548
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
549
+ <span class="text-sm font-medium">4.6</span>
550
+ </div>
551
+ </div>
552
+ <p class="text-sm text-gray-600 mb-3">React Native and Flutter</p>
553
+ <div class="flex items-center justify-between mb-3">
554
+ <div class="flex items-center text-sm text-gray-500">
555
+ <i class="fas fa-book-open mr-1.5"></i>
556
+ <span>10 Lessons</span>
557
+ </div>
558
+ <div class="flex items-center text-sm text-gray-500">
559
+ <i class="fas fa-clock mr-1.5"></i>
560
+ <span>6h 45m</span>
561
+ </div>
562
+ </div>
563
+ <div class="flex items-center justify-between">
564
+ <div class="w-full bg-gray-200 rounded-full h-2">
565
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
566
+ </div>
567
+ <span class="ml-3 text-sm font-medium text-gray-700">0%</span>
568
+ </div>
569
+ <div class="mt-4 grid grid-cols-2 gap-2">
570
+ <button class="bg-blue-50 text-blue-700 hover:bg-blue-100 py-2 rounded-lg font-medium" onclick="loadCourse('mobile-apps')">
571
+ Start
572
+ </button>
573
+ <button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
574
+ Details
575
+ </button>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Data Science Course -->
581
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
582
+ <div class="relative">
583
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Data Science" class="w-full h-40 object-cover">
584
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
585
+ <span class="bg-green-600 text-white text-xs font-medium px-2 py-0.5 rounded">Completed</span>
586
+ </div>
587
+ </div>
588
+ <div class="p-4">
589
+ <div class="flex justify-between items-start mb-2">
590
+ <h4 class="font-bold text-gray-800">Data Science</h4>
591
+ <div class="flex items-center">
592
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
593
+ <span class="text-sm font-medium">4.9</span>
594
+ </div>
595
+ </div>
596
+ <p class="text-sm text-gray-600 mb-3">Python, Pandas, and Machine Learning</p>
597
+ <div class="flex items-center justify-between mb-3">
598
+ <div class="flex items-center text-sm text-gray-500">
599
+ <i class="fas fa-book-open mr-1.5"></i>
600
+ <span>15 Lessons</span>
601
+ </div>
602
+ <div class="flex items-center text-sm text-gray-500">
603
+ <i class="fas fa-clock mr-1.5"></i>
604
+ <span>12h 20m</span>
605
+ </div>
606
+ </div>
607
+ <div class="flex items-center justify-between">
608
+ <div class="w-full bg-gray-200 rounded-full h-2">
609
+ <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
610
+ </div>
611
+ <span class="ml-3 text-sm font-medium text-gray-700">100%</span>
612
+ </div>
613
+ <div class="mt-4 grid grid-cols-2 gap-2">
614
+ <button class="bg-green-50 text-green-700 hover:bg-green-100 py-2 rounded-lg font-medium" onclick="loadCourse('data-science')">
615
+ Certificate
616
+ </button>
617
+ <button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
618
+ Details
619
+ </button>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <!-- Design Course -->
625
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
626
+ <div class="relative">
627
+ <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Design" class="w-full h-40 object-cover">
628
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
629
+ <span class="bg-purple-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
630
+ </div>
631
+ </div>
632
+ <div class="p-4">
633
+ <div class="flex justify-between items-start mb-2">
634
+ <h4 class="font-bold text-gray-800">UI/UX Design</h4>
635
+ <div class="flex items-center">
636
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
637
+ <span class="text-sm font-medium">4.7</span>
638
+ </div>
639
+ </div>
640
+ <p class="text-sm text-gray-600 mb-3">Figma, Adobe XD, and User Research</p>
641
+ <div class="flex items-center justify-between mb-3">
642
+ <div class="flex items-center text-sm text-gray-500">
643
+ <i class="fas fa-book-open mr-1.5"></i>
644
+ <span>8 Lessons</span>
645
+ </div>
646
+ <div class="flex items-center text-sm text-gray-500">
647
+ <i class="fas fa-clock mr-1.5"></i>
648
+ <span>5h 15m</span>
649
+ </div>
650
+ </div>
651
+ <div class="flex items-center justify-between">
652
+ <div class="w-full bg-gray-200 rounded-full h-2">
653
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 30%"></div>
654
+ </div>
655
+ <span class="ml-3 text-sm font-medium text-gray-700">30%</span>
656
+ </div>
657
+ <div class="mt-4 grid grid-cols-2 gap-2">
658
+ <button class="bg-purple-50 text-purple-700 hover:bg-purple-100 py-2 rounded-lg font-medium" onclick="loadCourse('design')">
659
+ Continue
660
+ </button>
661
+ <button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
662
+ Details
663
+ </button>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
+ <!-- Cybersecurity Course -->
669
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
670
+ <div class="relative">
671
+ <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cybersecurity" class="w-full h-40 object-cover">
672
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
673
+ <span class="bg-red-600 text-white text-xs font-medium px-2 py-0.5 rounded">Not Started</span>
674
+ </div>
675
+ </div>
676
+ <div class="p-4">
677
+ <div class="flex justify-between items-start mb-2">
678
+ <h4 class="font-bold text-gray-800">Cybersecurity</h4>
679
+ <div class="flex items-center">
680
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
681
+ <span class="text-sm font-medium">4.5</span>
682
+ </div>
683
+ </div>
684
+ <p class="text-sm text-gray-600 mb-3">Ethical Hacking and Network Security</p>
685
+ <div class="flex items-center justify-between mb-3">
686
+ <div class="flex items-center text-sm text-gray-500">
687
+ <i class="fas fa-book-open mr-1.5"></i>
688
+ <span>14 Lessons</span>
689
+ </div>
690
+ <div class="flex items-center text-sm text-gray-500">
691
+ <i class="fas fa-clock mr-1.5"></i>
692
+ <span>10h 00m</span>
693
+ </div>
694
+ </div>
695
+ <div class="flex items-center justify-between">
696
+ <div class="w-full bg-gray-200 rounded-full h-2">
697
+ <div class="bg-red-600 h-2 rounded-full" style="width: 0%"></div>
698
+ </div>
699
+ <span class="ml-3 text-sm font-medium text-gray-700">0%</span>
700
+ </div>
701
+ <div class="mt-4 grid grid-cols-2 gap-2">
702
+ <button class="bg-red-50 text-red-700 hover:bg-red-100 py-2 rounded-lg font-medium" onclick="loadCourse('cybersecurity')">
703
+ Start
704
+ </button>
705
+ <button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
706
+ Details
707
+ </button>
708
+ </div>
709
+ </div>
710
+ </div>
711
+
712
+ <!-- Cloud Computing Course -->
713
+ <div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
714
+ <div class="relative">
715
+ <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Cloud Computing" class="w-full h-40 object-cover">
716
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
717
+ <span class="bg-orange-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
718
+ </div>
719
+ </div>
720
+ <div class="p-4">
721
+ <div class="flex justify-between items-start mb-2">
722
+ <h4 class="font-bold text-gray-800">Cloud Computing</h4>
723
+ <div class="flex items-center">
724
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
725
+ <span class="text-sm font-medium">4.4</span>
726
+ </div>
727
+ </div>
728
+ <p class="text-sm text-gray-600 mb-3">AWS, Azure, and Google Cloud</p>
729
+ <div class="flex items-center justify-between mb-3">
730
+ <div class="flex items-center text-sm text-gray-500">
731
+ <i class="fas fa-book-open mr-1.5"></i>
732
+ <span>9 Lessons</span>
733
+ </div>
734
+ <div class="flex items-center text-sm text-gray-500">
735
+ <i class="fas fa-clock mr-1.5"></i>
736
+ <span>7h 30m</span>
737
+ </div>
738
+ </div>
739
+ <div class="flex items-center justify-between">
740
+ <div class="w-full bg-gray-200 rounded-full h-2">
741
+ <div class="bg-orange-600 h-2 rounded-full" style="width: 45%"></div>
742
+ </div>
743
+ <span class="ml-3 text-sm font-medium text-gray-700">45%</span>
744
+ </div>
745
+ <div class="mt-4 grid grid-cols-2 gap-2">
746
+ <button class="bg-orange-50 text-orange-700 hover:bg-orange-100 py-2 rounded-lg font-medium" onclick="loadCourse('cloud-computing')">
747
+ Continue
748
+ </button>
749
+ <button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
750
+ Details
751
+ </button>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </div>
757
+
758
+ <!-- Schedule Content -->
759
+ <div id="schedule-content" class="hidden">
760
+ <div class="flex justify-between items-center mb-8">
761
+ <h2 class="text-3xl font-bold text-gray-800">My Schedule</h2>
762
+ <div class="flex space-x-4">
763
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
764
+ <i class="fas fa-plus mr-2"></i> Add Event
765
+ </button>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- Calendar Navigation -->
770
+ <div class="bg-white rounded-xl shadow-md p-4 mb-6">
771
+ <div class="flex flex-wrap items-center justify-between">
772
+ <div class="flex items-center space-x-4 mb-4 md:mb-0">
773
+ <button class="p-2 rounded-full hover:bg-gray-100">
774
+ <i class="fas fa-chevron-left"></i>
775
+ </button>
776
+ <h3 class="text-xl font-bold text-gray-800">June 2023</h3>
777
+ <button class="p-2 rounded-full hover:bg-gray-100">
778
+ <i class="fas fa-chevron-right"></i>
779
+ </button>
780
+ </div>
781
+ <div class="flex space-x-2">
782
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Month</button>
783
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Week</button>
784
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Day</button>
785
+ </div>
786
+ </div>
787
+ </div>
788
+
789
+ <!-- Calendar Grid -->
790
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
791
+ <div class="grid grid-cols-7 gap-px bg-gray-200">
792
+ <!-- Weekday Headers -->
793
+ <div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Sun</div>
794
+ <div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Mon</div>
795
+ <div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Tue</div>
796
+ <div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Wed</div>
797
+ <div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Thu</div>
798
+ <div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Fri</div>
799
+ <div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Sat</div>
800
+
801
+ <!-- Calendar Days -->
802
+ <!-- Week 1 -->
803
+ <div class="bg-white p-1 h-32">
804
+ <div class="text-right p-1 text-gray-400">28</div>
805
+ </div>
806
+ <div class="bg-white p-1 h-32">
807
+ <div class="text-right p-1 text-gray-400">29</div>
808
+ </div>
809
+ <div class="bg-white p-1 h-32">
810
+ <div class="text-right p-1 text-gray-400">30</div>
811
+ </div>
812
+ <div class="bg-white p-1 h-32">
813
+ <div class="text-right p-1 text-gray-400">31</div>
814
+ </div>
815
+ <div class="bg-white p-1 h-32">
816
+ <div class="text-right p-1">1</div>
817
+ </div>
818
+ <div class="bg-white p-1 h-32">
819
+ <div class="text-right p-1">2</div>
820
+ </div>
821
+ <div class="bg-white p-1 h-32">
822
+ <div class="text-right p-1">3</div>
823
+ </div>
824
+
825
+ <!-- Week 2 -->
826
+ <div class="bg-white p-1 h-32">
827
+ <div class="text-right p-1">4</div>
828
+ </div>
829
+ <div class="bg-white p-1 h-32">
830
+ <div class="text-right p-1">5</div>
831
+ </div>
832
+ <div class="bg-white p-1 h-32">
833
+ <div class="text-right p-1">6</div>
834
+ <div class="mt-1 text-xs p-1 bg-indigo-100 text-indigo-800 rounded truncate">Web Dev Q&A</div>
835
+ </div>
836
+ <div class="bg-white p-1 h-32">
837
+ <div class="text-right p-1">7</div>
838
+ </div>
839
+ <div class="bg-white p-1 h-32">
840
+ <div class="text-right p-1">8</div>
841
+ </div>
842
+ <div class="bg-white p-1 h-32">
843
+ <div class="text-right p-1">9</div>
844
+ </div>
845
+ <div class="bg-white p-1 h-32">
846
+ <div class="text-right p-1">10</div>
847
+ </div>
848
+
849
+ <!-- Week 3 -->
850
+ <div class="bg-white p-1 h-32">
851
+ <div class="text-right p-1">11</div>
852
+ </div>
853
+ <div class="bg-white p-1 h-32">
854
+ <div class="text-right p-1">12</div>
855
+ </div>
856
+ <div class="bg-white p-1 h-32">
857
+ <div class="text-right p-1">13</div>
858
+ </div>
859
+ <div class="bg-white p-1 h-32">
860
+ <div class="text-right p-1">14</div>
861
+ <div class="mt-1 text-xs p-1 bg-blue-100 text-blue-800 rounded truncate">Mobile UI Workshop</div>
862
+ </div>
863
+ <div class="bg-white p-1 h-32">
864
+ <div class="text-right p-1">15</div>
865
+ </div>
866
+ <div class="bg-white p-1 h-32">
867
+ <div class="text-right p-1">16</div>
868
+ </div>
869
+ <div class="bg-white p-1 h-32">
870
+ <div class="text-right p-1">17</div>
871
+ </div>
872
+
873
+ <!-- Week 4 -->
874
+ <div class="bg-white p-1 h-32">
875
+ <div class="text-right p-1">18</div>
876
+ </div>
877
+ <div class="bg-white p-1 h-32">
878
+ <div class="text-right p-1">19</div>
879
+ </div>
880
+ <div class="bg-white p-1 h-32">
881
+ <div class="text-right p-1">20</div>
882
+ </div>
883
+ <div class="bg-white p-1 h-32">
884
+ <div class="text-right p-1">21</div>
885
+ </div>
886
+ <div class="bg-white p-1 h-32">
887
+ <div class="text-right p-1">22</div>
888
+ </div>
889
+ <div class="bg-white p-1 h-32">
890
+ <div class="text-right p-1">23</div>
891
+ </div>
892
+ <div class="bg-white p-1 h-32">
893
+ <div class="text-right p-1">24</div>
894
+ </div>
895
+
896
+ <!-- Week 5 -->
897
+ <div class="bg-white p-1 h-32">
898
+ <div class="text-right p-1">25</div>
899
+ </div>
900
+ <div class="bg-white p-1 h-32">
901
+ <div class="text-right p-1">26</div>
902
+ </div>
903
+ <div class="bg-white p-1 h-32">
904
+ <div class="text-right p-1">27</div>
905
+ </div>
906
+ <div class="bg-white p-1 h-32">
907
+ <div class="text-right p-1">28</div>
908
+ </div>
909
+ <div class="bg-white p-1 h-32">
910
+ <div class="text-right p-1">29</div>
911
+ <div class="mt-1 text-xs p-1 bg-purple-100 text-purple-800 rounded truncate">Data Science Exam</div>
912
+ </div>
913
+ <div class="bg-white p-1 h-32">
914
+ <div class="text-right p-1">30</div>
915
+ </div>
916
+ <div class="bg-white p-1 h-32">
917
+ <div class="text-right p-1 text-gray-400">1</div>
918
+ </div>
919
+ </div>
920
+ </div>
921
+
922
+ <!-- Upcoming Events List -->
923
+ <div class="bg-white rounded-xl shadow-md p-6">
924
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Upcoming Events</h3>
925
+
926
+ <div class="space-y-4">
927
+ <!-- Event 1 -->
928
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
929
+ <div class="bg-indigo-100 text-indigo-800 p-3 rounded-lg mr-4">
930
+ <i class="fas fa-calendar-day text-lg"></i>
931
+ </div>
932
+ <div class="flex-1">
933
+ <div class="flex justify-between items-start">
934
+ <h4 class="font-medium text-gray-800">Live Q&A Session</h4>
935
+ <span class="text-sm text-gray-500">Tomorrow</span>
936
+ </div>
937
+ <p class="text-sm text-gray-600">Web Development Fundamentals</p>
938
+ <div class="mt-2 flex items-center text-sm text-gray-500">
939
+ <i class="fas fa-clock mr-1.5"></i>
940
+ <span>2:00 PM - 3:30 PM</span>
941
+ <span class="mx-2">•</span>
942
+ <i class="fas fa-video mr-1.5"></i>
943
+ <span>Zoom Meeting</span>
944
+ </div>
945
+ </div>
946
+ <button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium">
947
+ Join
948
+ </button>
949
+ </div>
950
+
951
+ <!-- Event 2 -->
952
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
953
+ <div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
954
+ <i class="fas fa-chalkboard-teacher text-lg"></i>
955
+ </div>
956
+ <div class="flex-1">
957
+ <div class="flex justify-between items-start">
958
+ <h4 class="font-medium text-gray-800">Workshop: Mobile UI Design</h4>
959
+ <span class="text-sm text-gray-500">June 14</span>
960
+ </div>
961
+ <p class="text-sm text-gray-600">Mobile Apps Course</p>
962
+ <div class="mt-2 flex items-center text-sm text-gray-500">
963
+ <i class="fas fa-clock mr-1.5"></i>
964
+ <span>10:00 AM - 12:00 PM</span>
965
+ <span class="mx-2">•</span>
966
+ <i class="fas fa-map-marker-alt mr-1.5"></i>
967
+ <span>Room 302</span>
968
+ </div>
969
+ </div>
970
+ <button class="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
971
+ Remind Me
972
+ </button>
973
+ </div>
974
+
975
+ <!-- Event 3 -->
976
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
977
+ <div class="bg-purple-100 text-purple-800 p-3 rounded-lg mr-4">
978
+ <i class="fas fa-certificate text-lg"></i>
979
+ </div>
980
+ <div class="flex-1">
981
+ <div class="flex justify-between items-start">
982
+ <h4 class="font-medium text-gray-800">Final Exam Deadline</h4>
983
+ <span class="text-sm text-gray-500">June 29</span>
984
+ </div>
985
+ <p class="text-sm text-gray-600">Data Science Course</p>
986
+ <div class="mt-2 flex items-center text-sm text-gray-500">
987
+ <i class="fas fa-clock mr-1.5"></i>
988
+ <span>11:59 PM</span>
989
+ <span class="mx-2">•</span>
990
+ <i class="fas fa-laptop mr-1.5"></i>
991
+ <span>Online</span>
992
+ </div>
993
+ </div>
994
+ <button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium">
995
+ Start Exam
996
+ </button>
997
+ </div>
998
+
999
+ <!-- Event 4 -->
1000
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
1001
+ <div class="bg-green-100 text-green-800 p-3 rounded-lg mr-4">
1002
+ <i class="fas fa-users text-lg"></i>
1003
+ </div>
1004
+ <div class="flex-1">
1005
+ <div class="flex justify-between items-start">
1006
+ <h4 class="font-medium text-gray-800">Study Group Meeting</h4>
1007
+ <span class="text-sm text-gray-500">June 18</span>
1008
+ </div>
1009
+ <p class="text-sm text-gray-600">Web Development Study Group</p>
1010
+ <div class="mt-2 flex items-center text-sm text-gray-500">
1011
+ <i class="fas fa-clock mr-1.5"></i>
1012
+ <span>4:00 PM - 5:30 PM</span>
1013
+ <span class="mx-2">•</span>
1014
+ <i class="fas fa-map-marker-alt mr-1.5"></i>
1015
+ <span>Library Study Room</span>
1016
+ </div>
1017
+ </div>
1018
+ <button class="ml-4 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium">
1019
+ RSVP
1020
+ </button>
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+
1026
+ <!-- Progress Content -->
1027
+ <div id="progress-content" class="hidden">
1028
+ <div class="flex justify-between items-center mb-8">
1029
+ <h2 class="text-3xl font-bold text-gray-800">My Progress</h2>
1030
+ <div class="flex space-x-4">
1031
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
1032
+ <i class="fas fa-download mr-2"></i> Export
1033
+ </button>
1034
+ </div>
1035
+ </div>
1036
+
1037
+ <!-- Overall Progress -->
1038
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
1039
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Overall Progress</h3>
1040
+
1041
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
1042
+ <!-- Completion Rate -->
1043
+ <div class="bg-indigo-50 rounded-lg p-4">
1044
+ <div class="flex items-center justify-between mb-2">
1045
+ <h4 class="font-medium text-indigo-800">Completion Rate</h4>
1046
+ <span class="text-2xl font-bold text-indigo-700">42%</span>
1047
+ </div>
1048
+ <div class="w-full bg-white rounded-full h-2">
1049
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 42%"></div>
1050
+ </div>
1051
+ <p class="text-sm text-indigo-600 mt-2">You've completed 23 of 55 lessons</p>
1052
+ </div>
1053
+
1054
+ <!-- Time Spent -->
1055
+ <div class="bg-blue-50 rounded-lg p-4">
1056
+ <div class="flex items-center justify-between mb-2">
1057
+ <h4 class="font-medium text-blue-800">Time Spent</h4>
1058
+ <span class="text-2xl font-bold text-blue-700">18h 45m</span>
1059
+ </div>
1060
+ <div class="w-full bg-white rounded-full h-2">
1061
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
1062
+ </div>
1063
+ <p class="text-sm text-blue-600 mt-2">Average 3h 45m per week</p>
1064
+ </div>
1065
+
1066
+ <!-- Certificates Earned -->
1067
+ <div class="bg-green-50 rounded-lg p-4">
1068
+ <div class="flex items-center justify-between mb-2">
1069
+ <h4 class="font-medium text-green-800">Certificates</h4>
1070
+ <span class="text-2xl font-bold text-green-700">1</span>
1071
+ </div>
1072
+ <div class="w-full bg-white rounded-full h-2">
1073
+ <div class="bg-green-600 h-2 rounded-full" style="width: 20%"></div>
1074
+ </div>
1075
+ <p class="text-sm text-green-600 mt-2">1 of 5 courses completed</p>
1076
+ </div>
1077
+ </div>
1078
+
1079
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1080
+ <!-- Activity Calendar -->
1081
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
1082
+ <h4 class="font-medium text-gray-800 mb-4">Activity Calendar</h4>
1083
+ <div class="grid grid-cols-7 gap-1 text-center text-xs">
1084
+ <div class="text-gray-500">M</div>
1085
+ <div class="text-gray-500">T</div>
1086
+ <div class="text-gray-500">W</div>
1087
+ <div class="text-gray-500">T</div>
1088
+ <div class="text-gray-500">F</div>
1089
+ <div class="text-gray-500">S</div>
1090
+ <div class="text-gray-500">S</div>
1091
+
1092
+ <!-- Week 1 -->
1093
+ <div class="h-4"></div>
1094
+ <div class="h-4 bg-gray-200 rounded-sm"></div>
1095
+ <div class="h-4 bg-gray-300 rounded-sm"></div>
1096
+ <div class="h-4 bg-gray-400 rounded-sm"></div>
1097
+ <div class="h-4 bg-indigo-300 rounded-sm"></div>
1098
+ <div class="h-4 bg-indigo-500 rounded-sm"></div>
1099
+ <div class="h-4"></div>
1100
+
1101
+ <!-- Week 2 -->
1102
+ <div class="h-4"></div>
1103
+ <div class="h-4 bg-indigo-400 rounded-sm"></div>
1104
+ <div class="h-4 bg-indigo-600 rounded-sm"></div>
1105
+ <div class="h-4 bg-gray-200 rounded-sm"></div>
1106
+ <div class="h-4 bg-gray-300 rounded-sm"></div>
1107
+ <div class="h-4 bg-indigo-300 rounded-sm"></div>
1108
+ <div class="h-4"></div>
1109
+
1110
+ <!-- Week 3 -->
1111
+ <div class="h-4"></div>
1112
+ <div class="h-4 bg-indigo-500 rounded-sm"></div>
1113
+ <div class="h-4 bg-gray-200 rounded-sm"></div>
1114
+ <div class="h-4 bg-indigo-300 rounded-sm"></div>
1115
+ <div class="h-4 bg-indigo-700 rounded-sm"></div>
1116
+ <div class="h-4 bg-gray-400 rounded-sm"></div>
1117
+ <div class="h-4"></div>
1118
+
1119
+ <!-- Week 4 -->
1120
+ <div class="h-4"></div>
1121
+ <div class="h-4 bg-gray-300 rounded-sm"></div>
1122
+ <div class="h-4 bg-indigo-400 rounded-sm"></div>
1123
+ <div class="h-4 bg-indigo-600 rounded-sm"></div>
1124
+ <div class="h-4 bg-gray-200 rounded-sm"></div>
1125
+ <div class="h-4 bg-indigo-300 rounded-sm"></div>
1126
+ <div class="h-4"></div>
1127
+
1128
+ <!-- Week 5 -->
1129
+ <div class="h-4"></div>
1130
+ <div class="h-4 bg-indigo-500 rounded-sm"></div>
1131
+ <div class="h-4 bg-gray-400 rounded-sm"></div>
1132
+ <div class="h-4 bg-indigo-700 rounded-sm"></div>
1133
+ <div class="h-4 bg-indigo-300 rounded-sm"></div>
1134
+ <div class="h-4 bg-gray-200 rounded-sm"></div>
1135
+ <div class="h-4"></div>
1136
+ </div>
1137
+ <div class="mt-4 flex items-center justify-between text-xs text-gray-500">
1138
+ <span>Less</span>
1139
+ <div class="flex space-x-1">
1140
+ <div class="w-3 h-3 bg-gray-200 rounded-sm"></div>
1141
+ <div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
1142
+ <div class="w-3 h-3 bg-gray-400 rounded-sm"></div>
1143
+ <div class="w-3 h-3 bg-indigo-300 rounded-sm"></div>
1144
+ <div class="w-3 h-3 bg-indigo-400 rounded-sm"></div>
1145
+ <div class="w-3 h-3 bg-indigo-500 rounded-sm"></div>
1146
+ <div class="w-3 h-3 bg-indigo-600 rounded-sm"></div>
1147
+ <div class="w-3 h-3 bg-indigo-700 rounded-sm"></div>
1148
+ </div>
1149
+ <span>More</span>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <!-- Learning Streak -->
1154
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
1155
+ <h4 class="font-medium text-gray-800 mb-4">Learning Streak</h4>
1156
+ <div class="flex items-center">
1157
+ <div class="text-4xl font-bold text-indigo-600 mr-4">7</div>
1158
+ <div>
1159
+ <p class="text-sm text-gray-600">days in a row</p>
1160
+ <p class="text-xs text-indigo-600 mt-1">Keep it up! 3 more days for a new badge.</p>
1161
+ </div>
1162
+ </div>
1163
+ <div class="mt-4 flex space-x-2">
1164
+ <div class="p-2 bg-yellow-100 text-yellow-800 rounded-full">
1165
+ <i class="fas fa-fire"></i>
1166
+ </div>
1167
+ <div class="p-2 bg-yellow-100 text-yellow-800 rounded-full">
1168
+ <i class="fas fa-trophy"></i>
1169
+ </div>
1170
+ <div class="p-2 bg-gray-100 text-gray-400 rounded-full">
1171
+ <i class="fas fa-medal"></i>
1172
+ </div>
1173
+ <div class="p-2 bg-gray-100 text-gray-400 rounded-full">
1174
+ <i class="fas fa-award"></i>
1175
+ </div>
1176
+ </div>
1177
+ </div>
1178
+ </div>
1179
+ </div>
1180
+
1181
+ <!-- Course Progress -->
1182
+ <div class="bg-white rounded-xl shadow-md p-6">
1183
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Course Progress</h3>
1184
+
1185
+ <div class="overflow-x-auto">
1186
+ <table class="min-w-full divide-y divide-gray-200">
1187
+ <thead class="bg-gray-50">
1188
+ <tr>
1189
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
1190
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
1191
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lessons</th>
1192
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Spent</th>
1193
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
1194
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
1195
+ </tr>
1196
+ </thead>
1197
+ <tbody class="bg-white divide-y divide-gray-200">
1198
+ <!-- Web Development -->
1199
+ <tr>
1200
+ <td class="px-6 py-4 whitespace-nowrap">
1201
+ <div class="flex items-center">
1202
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-lg flex items-center justify-center">
1203
+ <i class="fas fa-laptop-code text-indigo-600"></i>
1204
+ </div>
1205
+ <div class="ml-4">
1206
+ <div class="text-sm font-medium text-gray-900">Web Development</div>
1207
+ <div class="text-sm text-gray-500">HTML, CSS, JavaScript</div>
1208
+ </div>
1209
+ </div>
1210
+ </td>
1211
+ <td class="px-6 py-4 whitespace-nowrap">
1212
+ <div class="flex items-center">
1213
+ <div class="w-20 mr-3">
1214
+ <div class="w-full bg-gray-200 rounded-full h-2">
1215
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 60%"></div>
1216
+ </div>
1217
+ </div>
1218
+ <span class="text-sm font-medium text-gray-700">60%</span>
1219
+ </div>
1220
+ </td>
1221
+ <td class="px-6 py-4 whitespace-nowrap">
1222
+ <span class="text-sm text-gray-700">7/12</span>
1223
+ </td>
1224
+ <td class="px-6 py-4 whitespace-nowrap">
1225
+ <span class="text-sm text-gray-700">5h
1226
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ All pages and course functionality in above web