Hugging Face's logo

Spaces:
Maddyr237
/
lms
Running

App Files Community
Maddyr237 commited on
Commit
5a6b79f
·
verified ·
1 Parent(s): 840f125

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +497 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lms
3
- emoji: 🦀
4
- colorFrom: red
5
- colorTo: red
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: lms
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
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,497 @@
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
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50 font-sans">
41
+ <!-- Header -->
42
+ <header class="bg-indigo-700 text-white shadow-lg">
43
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
44
+ <div class="flex items-center space-x-2">
45
+ <i class="fas fa-graduation-cap text-3xl"></i>
46
+ <h1 class="text-2xl font-bold">EduMaster LMS</h1>
47
+ </div>
48
+ <div class="flex items-center space-x-6">
49
+ <div class="relative">
50
+ <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">
51
+ <i class="fas fa-search absolute right-3 top-3 text-indigo-300"></i>
52
+ </div>
53
+ <div class="flex items-center space-x-2 cursor-pointer">
54
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full border-2 border-indigo-400">
55
+ <span class="font-medium">Sarah K.</span>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </header>
60
+
61
+ <div class="flex">
62
+ <!-- Sidebar -->
63
+ <aside class="w-64 bg-white shadow-md h-screen sticky top-0">
64
+ <nav class="p-4">
65
+ <ul class="space-y-2">
66
+ <li>
67
+ <a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg bg-indigo-50 text-indigo-700 font-medium">
68
+ <i class="sidebar-icon fas fa-home mr-3 text-indigo-600 transition-transform"></i>
69
+ Dashboard
70
+ </a>
71
+ </li>
72
+ <li>
73
+ <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">
74
+ <i class="sidebar-icon fas fa-book mr-3 text-gray-500 transition-transform"></i>
75
+ My Courses
76
+ </a>
77
+ </li>
78
+ <li>
79
+ <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">
80
+ <i class="sidebar-icon fas fa-calendar-alt mr-3 text-gray-500 transition-transform"></i>
81
+ Schedule
82
+ </a>
83
+ </li>
84
+ <li>
85
+ <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">
86
+ <i class="sidebar-icon fas fa-chart-bar mr-3 text-gray-500 transition-transform"></i>
87
+ Progress
88
+ </a>
89
+ </li>
90
+ <li>
91
+ <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">
92
+ <i class="sidebar-icon fas fa-comments mr-3 text-gray-500 transition-transform"></i>
93
+ Discussions
94
+ </a>
95
+ </li>
96
+ </ul>
97
+
98
+ <div class="mt-8 pt-4 border-t border-gray-200">
99
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4">COURSES</h3>
100
+ <ul class="space-y-1">
101
+ <li>
102
+ <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">
103
+ <i class="sidebar-icon fas fa-laptop-code mr-3 text-gray-500 transition-transform"></i>
104
+ Web Development
105
+ </a>
106
+ </li>
107
+ <li>
108
+ <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">
109
+ <i class="sidebar-icon fas fa-mobile-alt mr-3 text-gray-500 transition-transform"></i>
110
+ Mobile Apps
111
+ </a>
112
+ </li>
113
+ <li>
114
+ <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">
115
+ <i class="sidebar-icon fas fa-chart-line mr-3 text-gray-500 transition-transform"></i>
116
+ Data Science
117
+ </a>
118
+ </li>
119
+ <li>
120
+ <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">
121
+ <i class="sidebar-icon fas fa-paint-brush mr-3 text-gray-500 transition-transform"></i>
122
+ Design
123
+ </a>
124
+ </li>
125
+ </ul>
126
+ </div>
127
+ </nav>
128
+ </aside>
129
+
130
+ <!-- Main Content -->
131
+ <main class="flex-1 p-8">
132
+ <div class="flex justify-between items-center mb-8">
133
+ <h2 class="text-3xl font-bold text-gray-800">Web Development Fundamentals</h2>
134
+ <div class="flex space-x-4">
135
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
136
+ <i class="fas fa-share-alt mr-2"></i> Share
137
+ </button>
138
+ <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-lg flex items-center">
139
+ <i class="fas fa-download mr-2"></i> Resources
140
+ </button>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Course Progress -->
145
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
146
+ <div class="flex items-center justify-between">
147
+ <div>
148
+ <h3 class="text-lg font-semibold text-gray-800">Your Progress</h3>
149
+ <p class="text-gray-600">Complete lessons to unlock your certificate</p>
150
+ </div>
151
+ <div class="relative w-20 h-20">
152
+ <svg class="w-full h-full" viewBox="0 0 100 100">
153
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
154
+ <circle class="text-indigo-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="100.48" />
155
+ </svg>
156
+ <div class="absolute inset-0 flex items-center justify-center">
157
+ <span class="text-xl font-bold text-indigo-600">60%</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ <div class="mt-4 w-full bg-gray-200 rounded-full h-2.5">
162
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Course Content -->
167
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
168
+ <!-- Chapters List -->
169
+ <div class="lg:col-span-1">
170
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
171
+ <div class="bg-indigo-700 text-white px-6 py-4">
172
+ <h3 class="text-lg font-semibold">Course Content</h3>
173
+ <p class="text-indigo-200 text-sm">5 Chapters • 23 Lessons</p>
174
+ </div>
175
+ <div class="p-4">
176
+ <!-- Chapter 1 -->
177
+ <div class="mb-4">
178
+ <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(1)">
179
+ <div class="flex items-center">
180
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">1</span>
181
+ <h4 class="font-medium text-gray-800">HTML Basics</h4>
182
+ </div>
183
+ <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-1"></i>
184
+ </div>
185
+ <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-1">
186
+ <ul class="space-y-2">
187
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
188
+ <i class="fas fa-play-circle text-indigo-500 mr-3"></i>
189
+ <span class="text-gray-700">Introduction to HTML</span>
190
+ <span class="ml-auto text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Completed</span>
191
+ </li>
192
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
193
+ <i class="fas fa-play-circle text-indigo-500 mr-3"></i>
194
+ <span class="text-gray-700">HTML Document Structure</span>
195
+ <span class="ml-auto text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Completed</span>
196
+ </li>
197
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
198
+ <i class="fas fa-play-circle text-indigo-500 mr-3"></i>
199
+ <span class="text-gray-700">HTML Elements and Tags</span>
200
+ <span class="ml-auto text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full">In Progress</span>
201
+ </li>
202
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
203
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
204
+ <span class="text-gray-500">HTML Attributes</span>
205
+ </li>
206
+ </ul>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Chapter 2 -->
211
+ <div class="mb-4">
212
+ <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(2)">
213
+ <div class="flex items-center">
214
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">2</span>
215
+ <h4 class="font-medium text-gray-800">CSS Fundamentals</h4>
216
+ </div>
217
+ <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-2"></i>
218
+ </div>
219
+ <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-2">
220
+ <ul class="space-y-2">
221
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
222
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
223
+ <span class="text-gray-500">Introduction to CSS</span>
224
+ </li>
225
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
226
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
227
+ <span class="text-gray-500">CSS Selectors</span>
228
+ </li>
229
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
230
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
231
+ <span class="text-gray-500">Box Model</span>
232
+ </li>
233
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
234
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
235
+ <span class="text-gray-500">Flexbox Layout</span>
236
+ </li>
237
+ </ul>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Chapter 3 -->
242
+ <div class="mb-4">
243
+ <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(3)">
244
+ <div class="flex items-center">
245
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">3</span>
246
+ <h4 class="font-medium text-gray-800">JavaScript Essentials</h4>
247
+ </div>
248
+ <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-3"></i>
249
+ </div>
250
+ <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-3">
251
+ <ul class="space-y-2">
252
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
253
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
254
+ <span class="text-gray-500">JavaScript Basics</span>
255
+ </li>
256
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
257
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
258
+ <span class="text-gray-500">DOM Manipulation</span>
259
+ </li>
260
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
261
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
262
+ <span class="text-gray-500">Events</span>
263
+ </li>
264
+ </ul>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Chapter 4 -->
269
+ <div class="mb-4">
270
+ <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(4)">
271
+ <div class="flex items-center">
272
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">4</span>
273
+ <h4 class="font-medium text-gray-800">Responsive Design</h4>
274
+ </div>
275
+ <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-4"></i>
276
+ </div>
277
+ <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-4">
278
+ <ul class="space-y-2">
279
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
280
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
281
+ <span class="text-gray-500">Media Queries</span>
282
+ </li>
283
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
284
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
285
+ <span class="text-gray-500">Responsive Images</span>
286
+ </li>
287
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
288
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
289
+ <span class="text-gray-500">Mobile-First Approach</span>
290
+ </li>
291
+ </ul>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Chapter 5 -->
296
+ <div class="mb-4">
297
+ <div class="chapter-accordion flex justify-between items-center bg-gray-50 px-4 py-3 rounded-lg cursor-pointer" onclick="toggleChapter(5)">
298
+ <div class="flex items-center">
299
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-3 px-2.5 py-0.5 rounded-full">5</span>
300
+ <h4 class="font-medium text-gray-800">Final Project</h4>
301
+ </div>
302
+ <i class="fas fa-chevron-down text-gray-500 text-sm transition-transform transform" id="chapter-icon-5"></i>
303
+ </div>
304
+ <div class="chapter-content mt-2 pl-11 hidden" id="chapter-content-5">
305
+ <ul class="space-y-2">
306
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
307
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
308
+ <span class="text-gray-500">Project Planning</span>
309
+ </li>
310
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
311
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
312
+ <span class="text-gray-500">Implementation</span>
313
+ </li>
314
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
315
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
316
+ <span class="text-gray-500">Testing & Debugging</span>
317
+ </li>
318
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-50 cursor-pointer">
319
+ <i class="fas fa-play-circle text-gray-400 mr-3"></i>
320
+ <span class="text-gray-500">Deployment</span>
321
+ </li>
322
+ </ul>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Lesson Content -->
330
+ <div class="lg:col-span-2">
331
+ <div class="bg-white rounded-xl shadow-md overflow-hidden fade-in">
332
+ <div class="p-6 border-b border-gray-200">
333
+ <div class="flex justify-between items-center mb-4">
334
+ <div>
335
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Lesson 3</span>
336
+ <h3 class="text-2xl font-bold text-gray-800 mt-2">HTML Elements and Tags</h3>
337
+ </div>
338
+ <div class="flex space-x-2">
339
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
340
+ <i class="fas fa-bookmark"></i>
341
+ </button>
342
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
343
+ <i class="fas fa-ellipsis-v"></i>
344
+ </button>
345
+ </div>
346
+ </div>
347
+ <div class="flex items-center text-sm text-gray-500 space-x-4">
348
+ <span><i class="fas fa-clock mr-1"></i> 25 min</span>
349
+ <span><i class="fas fa-chart-line mr-1"></i> Intermediate</span>
350
+ <span><i class="fas fa-calendar-alt mr-1"></i> Last updated: June 15, 2023</span>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="p-6">
355
+ <div class="prose max-w-none">
356
+ <h4 class="text-lg font-semibold mb-3">Understanding HTML Elements</h4>
357
+ <p class="mb-4 text-gray-700">HTML elements are the building blocks of any webpage. They consist of tags that define the structure and content of your document.</p>
358
+
359
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
360
+ <pre class="text-sm text-gray-800"><code>&lt;!DOCTYPE html&gt;
361
+ &lt;html&gt;
362
+ &lt;head&gt;
363
+ &lt;title&gt;My Page&lt;/title&gt;
364
+ &lt;/head&gt;
365
+ &lt;body&gt;
366
+ &lt;h1&gt;This is a Heading&lt;/h1&gt;
367
+ &lt;p&gt;This is a paragraph.&lt;/p&gt;
368
+ &lt;/body&gt;
369
+ &lt;/html&gt;</code></pre>
370
+ </div>
371
+
372
+ <h4 class="text-lg font-semibold mb-3">Common HTML Elements</h4>
373
+ <ul class="list-disc pl-5 mb-6 space-y-2 text-gray-700">
374
+ <li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>: Heading elements</li>
375
+ <li><code>&lt;p&gt;</code>: Paragraph element</li>
376
+ <li><code>&lt;a&gt;</code>: Anchor element for links</li>
377
+ <li><code>&lt;img&gt;</code>: Image element</li>
378
+ <li><code>&lt;div&gt;</code>: Division or section element</li>
379
+ <li><code>&lt;span&gt;</code>: Inline container element</li>
380
+ </ul>
381
+
382
+ <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-6">
383
+ <div class="flex">
384
+ <div class="flex-shrink-0">
385
+ <i class="fas fa-lightbulb text-indigo-600"></i>
386
+ </div>
387
+ <div class="ml-3">
388
+ <h5 class="text-sm font-medium text-indigo-800">Pro Tip</h5>
389
+ <p class="text-sm text-indigo-700">Always close your HTML tags properly to avoid rendering issues. Some tags like <code>&lt;img&gt;</code> are self-closing.</p>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <h4 class="text-lg font-semibold mb-3">Nesting Elements</h4>
395
+ <p class="mb-4 text-gray-700">HTML elements can be nested inside other elements to create more complex structures.</p>
396
+
397
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
398
+ <pre class="text-sm text-gray-800"><code>&lt;div class="container"&gt;
399
+ &lt;h1&gt;Welcome&lt;/h1&gt;
400
+ &lt;p&gt;This is a &lt;span class="highlight"&gt;highlighted&lt;/span&gt; text.&lt;/p&gt;
401
+ &lt;a href="#"&gt;&lt;img src="image.jpg" alt="Example"&gt;&lt;/a&gt;
402
+ &lt;/div&gt;</code></pre>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="mt-8 pt-6 border-t border-gray-200">
407
+ <div class="flex justify-between">
408
+ <button class="flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
409
+ <i class="fas fa-arrow-left mr-2"></i> Previous Lesson
410
+ </button>
411
+ <button class="flex items-center px-4 py-2 bg-indigo-600 rounded-lg text-white hover:bg-indigo-700">
412
+ Next Lesson <i class="fas fa-arrow-right ml-2"></i>
413
+ </button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Resources Section -->
420
+ <div class="mt-6 bg-white rounded-xl shadow-md overflow-hidden fade-in">
421
+ <div class="p-6 border-b border-gray-200">
422
+ <h3 class="text-lg font-semibold text-gray-800">Lesson Resources</h3>
423
+ <p class="text-sm text-gray-600 mt-1">Download these files to follow along with the lesson</p>
424
+ </div>
425
+ <div class="p-6">
426
+ <div class="space-y-3">
427
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
428
+ <div class="p-2 rounded-lg bg-indigo-100 text-indigo-600 mr-3">
429
+ <i class="fas fa-file-code"></i>
430
+ </div>
431
+ <div class="flex-1">
432
+ <h4 class="font-medium text-gray-800">starter-code.zip</h4>
433
+ <p class="text-xs text-gray-500">HTML • 12 KB</p>
434
+ </div>
435
+ <button class="p-2 text-gray-500 hover:text-indigo-600">
436
+ <i class="fas fa-download"></i>
437
+ </button>
438
+ </div>
439
+
440
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
441
+ <div class="p-2 rounded-lg bg-blue-100 text-blue-600 mr-3">
442
+ <i class="fas fa-file-pdf"></i>
443
+ </div>
444
+ <div class="flex-1">
445
+ <h4 class="font-medium text-gray-800">html-cheatsheet.pdf</h4>
446
+ <p class="text-xs text-gray-500">PDF • 1.2 MB</p>
447
+ </div>
448
+ <button class="p-2 text-gray-500 hover:text-blue-600">
449
+ <i class="fas fa-download"></i>
450
+ </button>
451
+ </div>
452
+
453
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
454
+ <div class="p-2 rounded-lg bg-green-100 text-green-600 mr-3">
455
+ <i class="fas fa-link"></i>
456
+ </div>
457
+ <div class="flex-1">
458
+ <h4 class="font-medium text-gray-800">Additional References</h4>
459
+ <p class="text-xs text-gray-500">External Links</p>
460
+ </div>
461
+ <button class="p-2 text-gray-500 hover:text-green-600">
462
+ <i class="fas fa-external-link-alt"></i>
463
+ </button>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </main>
471
+ </div>
472
+
473
+ <script>
474
+ // Toggle chapter content
475
+ function toggleChapter(chapterNumber) {
476
+ const content = document.getElementById(`chapter-content-${chapterNumber}`);
477
+ const icon = document.getElementById(`chapter-icon-${chapterNumber}`);
478
+
479
+ content.classList.toggle('hidden');
480
+ icon.classList.toggle('rotate-180');
481
+ }
482
+
483
+ // Initialize the first chapter as open
484
+ document.addEventListener('DOMContentLoaded', function() {
485
+ toggleChapter(1);
486
+
487
+ // Add fade-in effect to elements
488
+ const elements = document.querySelectorAll('.fade-in');
489
+ elements.forEach((el, index) => {
490
+ setTimeout(() => {
491
+ el.style.opacity = '1';
492
+ }, index * 100);
493
+ });
494
+ });
495
+ </script>
496
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Maddyr237/lms" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
497
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Creat lms system with course - chapter - lesson