Hugging Face's logo

Spaces:
DEVINESKEW
/
cs
Running

App Files Community
DEVINESKEW commited on
Commit
4460f4d
·
verified ·
1 Parent(s): 7a51b4a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +982 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cs
3
- emoji: 🦀
4
- colorFrom: green
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: cs
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,982 @@
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>CS Mastery | Learn Computer Science</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .code-editor {
14
+ font-family: 'Courier New', monospace;
15
+ background-color: #1e293b;
16
+ color: #f8fafc;
17
+ }
18
+ .terminal {
19
+ background-color: #0f172a;
20
+ color: #94a3b8;
21
+ font-family: 'Courier New', monospace;
22
+ }
23
+ .skill-level::after {
24
+ content: '';
25
+ position: absolute;
26
+ bottom: -5px;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 3px;
30
+ background: linear-gradient(90deg, #4f46e5, #a855f7);
31
+ transform: scaleX(0);
32
+ transition: transform 0.3s ease;
33
+ }
34
+ .skill-level:hover::after {
35
+ transform: scaleX(1);
36
+ }
37
+ .active-level::after {
38
+ transform: scaleX(1);
39
+ }
40
+ .progress-ring__circle {
41
+ transition: stroke-dashoffset 0.35s;
42
+ transform: rotate(-90deg);
43
+ transform-origin: 50% 50%;
44
+ }
45
+ .flip-card {
46
+ perspective: 1000px;
47
+ }
48
+ .flip-card-inner {
49
+ transition: transform 0.6s;
50
+ transform-style: preserve-3d;
51
+ }
52
+ .flip-card:hover .flip-card-inner {
53
+ transform: rotateY(180deg);
54
+ }
55
+ .flip-card-front, .flip-card-back {
56
+ backface-visibility: hidden;
57
+ }
58
+ .flip-card-back {
59
+ transform: rotateY(180deg);
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-50 min-h-screen">
64
+ <!-- Header -->
65
+ <header class="gradient-bg text-white shadow-lg">
66
+ <div class="container mx-auto px-4 py-6">
67
+ <div class="flex justify-between items-center">
68
+ <div class="flex items-center space-x-2">
69
+ <i class="fas fa-laptop-code text-3xl"></i>
70
+ <h1 class="text-2xl font-bold">CS Mastery</h1>
71
+ </div>
72
+ <nav class="hidden md:flex space-x-6">
73
+ <a href="#" class="hover:text-gray-200 transition">Home</a>
74
+ <a href="#courses" class="hover:text-gray-200 transition">Courses</a>
75
+ <a href="#practice" class="hover:text-gray-200 transition">Practice</a>
76
+ <a href="#resources" class="hover:text-gray-200 transition">Resources</a>
77
+ <a href="#community" class="hover:text-gray-200 transition">Community</a>
78
+ </nav>
79
+ <button class="md:hidden text-2xl" id="mobile-menu-button">
80
+ <i class="fas fa-bars"></i>
81
+ </button>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Mobile Menu -->
86
+ <div class="md:hidden hidden bg-indigo-800" id="mobile-menu">
87
+ <div class="container mx-auto px-4 py-4 flex flex-col space-y-3">
88
+ <a href="#" class="hover:text-gray-200 transition">Home</a>
89
+ <a href="#courses" class="hover:text-gray-200 transition">Courses</a>
90
+ <a href="#practice" class="hover:text-gray-200 transition">Practice</a>
91
+ <a href="#resources" class="hover:text-gray-200 transition">Resources</a>
92
+ <a href="#community" class="hover:text-gray-200 transition">Community</a>
93
+ </div>
94
+ </div>
95
+ </header>
96
+
97
+ <!-- Hero Section -->
98
+ <section class="gradient-bg text-white py-20">
99
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
100
+ <div class="md:w-1/2 mb-10 md:mb-0">
101
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Master Computer Science From Zero to Hero</h1>
102
+ <p class="text-xl mb-8">Interactive learning platform for beginners to advanced students. Learn programming, algorithms, data structures, and more with hands-on exercises.</p>
103
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
104
+ <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Start Learning</button>
105
+ <button class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition">Explore Courses</button>
106
+ </div>
107
+ </div>
108
+ <div class="md:w-1/2 flex justify-center">
109
+ <div class="code-editor rounded-lg shadow-2xl w-full max-w-lg">
110
+ <div class="bg-gray-800 px-4 py-2 rounded-t-lg flex items-center">
111
+ <div class="flex space-x-2">
112
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
113
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
114
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
115
+ </div>
116
+ <div class="ml-4 text-sm text-gray-400">script.js</div>
117
+ </div>
118
+ <div class="p-4 overflow-auto" style="max-height: 300px;">
119
+ <pre class="text-sm"><code class="language-javascript">// Binary Search Implementation
120
+ function binarySearch(arr, target) {
121
+ let left = 0;
122
+ let right = arr.length - 1;
123
+
124
+ while (left <= right) {
125
+ const mid = Math.floor((left + right) / 2);
126
+
127
+ if (arr[mid] === target) {
128
+ return mid; // Found the target
129
+ } else if (arr[mid] < target) {
130
+ left = mid + 1; // Search right half
131
+ } else {
132
+ right = mid - 1; // Search left half
133
+ }
134
+ }
135
+
136
+ return -1; // Target not found
137
+ }
138
+
139
+ // Example usage
140
+ const numbers = [1, 3, 5, 7, 9, 11, 13];
141
+ console.log(binarySearch(numbers, 9)); // Output: 4</code></pre>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Skill Level Selector -->
149
+ <section class="py-12 bg-white">
150
+ <div class="container mx-auto px-4">
151
+ <h2 class="text-3xl font-bold text-center mb-12">Choose Your Learning Path</h2>
152
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
153
+ <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-indigo-100 text-indigo-700 relative transition hover:bg-indigo-200" data-level="beginner">
154
+ <i class="fas fa-seedling mr-2"></i> Beginner
155
+ </button>
156
+ <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-blue-100 text-blue-700 relative transition hover:bg-blue-200" data-level="intermediate">
157
+ <i class="fas fa-rocket mr-2"></i> Intermediate
158
+ </button>
159
+ <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-purple-100 text-purple-700 relative transition hover:bg-purple-200" data-level="advanced">
160
+ <i class="fas fa-brain mr-2"></i> Advanced
161
+ </button>
162
+ <button class="skill-level px-6 py-3 rounded-lg font-semibold bg-pink-100 text-pink-700 relative transition hover:bg-pink-200" data-level="expert">
163
+ <i class="fas fa-trophy mr-2"></i> Expert
164
+ </button>
165
+ </div>
166
+
167
+ <!-- Content based on level -->
168
+ <div id="content-display" class="grid md:grid-cols-3 gap-8">
169
+ <!-- Content will be dynamically loaded here -->
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- Interactive Code Playground -->
175
+ <section id="practice" class="py-16 bg-gray-100">
176
+ <div class="container mx-auto px-4">
177
+ <h2 class="text-3xl font-bold text-center mb-12">Interactive Code Playground</h2>
178
+ <div class="grid md:grid-cols-2 gap-8">
179
+ <div>
180
+ <div class="code-editor rounded-lg shadow-lg mb-4">
181
+ <div class="bg-gray-800 px-4 py-2 rounded-t-lg flex items-center justify-between">
182
+ <div class="flex items-center">
183
+ <div class="flex space-x-2 mr-4">
184
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
185
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
186
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
187
+ </div>
188
+ <div class="text-sm text-gray-400">playground.js</div>
189
+ </div>
190
+ <select id="language-select" class="bg-gray-700 text-gray-200 text-sm px-2 py-1 rounded">
191
+ <option value="javascript">JavaScript</option>
192
+ <option value="python">Python</option>
193
+ <option value="java">Java</option>
194
+ <option value="csharp">C#</option>
195
+ <option value="cpp">C++</option>
196
+ </select>
197
+ </div>
198
+ <textarea id="code-input" class="w-full p-4 text-sm h-64 focus:outline-none" spellcheck="false">// Write your code here
199
+ // Example: Calculate factorial
200
+ function factorial(n) {
201
+ if (n === 0 || n === 1) {
202
+ return 1;
203
+ }
204
+ return n * factorial(n - 1);
205
+ }
206
+
207
+ console.log(factorial(5)); // Should output 120</textarea>
208
+ </div>
209
+ <div class="flex justify-between">
210
+ <button id="run-code" class="bg-green-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-green-700 transition">
211
+ <i class="fas fa-play mr-2"></i> Run Code
212
+ </button>
213
+ <button id="reset-code" class="bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-gray-700 transition">
214
+ <i class="fas fa-redo mr-2"></i> Reset
215
+ </button>
216
+ </div>
217
+ </div>
218
+ <div>
219
+ <div class="terminal rounded-lg shadow-lg h-80 overflow-hidden">
220
+ <div class="bg-gray-900 px-4 py-2 rounded-t-lg flex items-center">
221
+ <div class="flex space-x-2 mr-4">
222
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
223
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
224
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
225
+ </div>
226
+ <div class="text-sm text-gray-400">Terminal Output</div>
227
+ </div>
228
+ <div id="code-output" class="p-4 overflow-auto h-full">
229
+ <div class="text-green-400">$ Output will appear here after running your code</div>
230
+ </div>
231
+ </div>
232
+ <div class="mt-4">
233
+ <h3 class="font-semibold mb-2">Challenge:</h3>
234
+ <p class="text-sm text-gray-700">Modify the factorial function to handle negative numbers by returning an error message.</p>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Courses Section -->
242
+ <section id="courses" class="py-16 bg-white">
243
+ <div class="container mx-auto px-4">
244
+ <h2 class="text-3xl font-bold text-center mb-12">Featured Courses</h2>
245
+ <div class="grid md:grid-cols-3 gap-8">
246
+ <!-- Course 1 -->
247
+ <div class="flip-card bg-white rounded-xl shadow-lg overflow-hidden h-full">
248
+ <div class="flip-card-inner h-full">
249
+ <div class="flip-card-front h-full">
250
+ <div class="h-48 bg-indigo-600 flex items-center justify-center">
251
+ <i class="fas fa-code text-white text-6xl"></i>
252
+ </div>
253
+ <div class="p-6">
254
+ <h3 class="text-xl font-bold mb-2">Programming Fundamentals</h3>
255
+ <p class="text-gray-600 mb-4">Learn the basics of programming with JavaScript, Python, or Java.</p>
256
+ <div class="flex items-center text-sm text-gray-500">
257
+ <i class="fas fa-clock mr-2"></i>
258
+ <span>8 weeks</span>
259
+ <i class="fas fa-star ml-4 mr-2 text-yellow-500"></i>
260
+ <span>4.9</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div class="flip-card-back bg-indigo-700 text-white p-6 h-full flex flex-col justify-center">
265
+ <h3 class="text-xl font-bold mb-4">What You'll Learn</h3>
266
+ <ul class="list-disc pl-5 space-y-2 text-sm">
267
+ <li>Variables, data types, and operators</li>
268
+ <li>Control structures (loops, conditionals)</li>
269
+ <li>Functions and modular programming</li>
270
+ <li>Basic data structures (arrays, objects)</li>
271
+ <li>Debugging techniques</li>
272
+ </ul>
273
+ <button class="mt-6 bg-white text-indigo-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition self-start">Enroll Now</button>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Course 2 -->
279
+ <div class="flip-card bg-white rounded-xl shadow-lg overflow-hidden h-full">
280
+ <div class="flip-card-inner h-full">
281
+ <div class="flip-card-front h-full">
282
+ <div class="h-48 bg-blue-600 flex items-center justify-center">
283
+ <i class="fas fa-project-diagram text-white text-6xl"></i>
284
+ </div>
285
+ <div class="p-6">
286
+ <h3 class="text-xl font-bold mb-2">Data Structures & Algorithms</h3>
287
+ <p class="text-gray-600 mb-4">Master essential CS concepts for technical interviews.</p>
288
+ <div class="flex items-center text-sm text-gray-500">
289
+ <i class="fas fa-clock mr-2"></i>
290
+ <span>12 weeks</span>
291
+ <i class="fas fa-star ml-4 mr-2 text-yellow-500"></i>
292
+ <span>4.8</span>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ <div class="flip-card-back bg-blue-700 text-white p-6 h-full flex flex-col justify-center">
297
+ <h3 class="text-xl font-bold mb-4">What You'll Learn</h3>
298
+ <ul class="list-disc pl-5 space-y-2 text-sm">
299
+ <li>Arrays, Linked Lists, Stacks, Queues</li>
300
+ <li>Trees, Graphs, Hash Tables</li>
301
+ <li>Sorting and searching algorithms</li>
302
+ <li>Recursion and dynamic programming</li>
303
+ <li>Time and space complexity analysis</li>
304
+ </ul>
305
+ <button class="mt-6 bg-white text-blue-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition self-start">Enroll Now</button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Course 3 -->
311
+ <div class="flip-card bg-white rounded-xl shadow-lg overflow-hidden h-full">
312
+ <div class="flip-card-inner h-full">
313
+ <div class="flip-card-front h-full">
314
+ <div class="h-48 bg-purple-600 flex items-center justify-center">
315
+ <i class="fas fa-server text-white text-6xl"></i>
316
+ </div>
317
+ <div class="p-6">
318
+ <h3 class="text-xl font-bold mb-2">Advanced Systems Design</h3>
319
+ <p class="text-gray-600 mb-4">Design scalable distributed systems for senior engineers.</p>
320
+ <div class="flex items-center text-sm text-gray-500">
321
+ <i class="fas fa-clock mr-2"></i>
322
+ <span>10 weeks</span>
323
+ <i class="fas fa-star ml-4 mr-2 text-yellow-500"></i>
324
+ <span>4.9</span>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ <div class="flip-card-back bg-purple-700 text-white p-6 h-full flex flex-col justify-center">
329
+ <h3 class="text-xl font-bold mb-4">What You'll Learn</h3>
330
+ <ul class="list-disc pl-5 space-y-2 text-sm">
331
+ <li>System architecture patterns</li>
332
+ <li>Database scaling and replication</li>
333
+ <li>Caching strategies</li>
334
+ <li>Load balancing and CDNs</li>
335
+ <li>Microservices architecture</li>
336
+ </ul>
337
+ <button class="mt-6 bg-white text-purple-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition self-start">Enroll Now</button>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </section>
344
+
345
+ <!-- Progress Tracker -->
346
+ <section class="py-16 bg-gray-100">
347
+ <div class="container mx-auto px-4">
348
+ <h2 class="text-3xl font-bold text-center mb-12">Track Your Learning Progress</h2>
349
+ <div class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
350
+ <div class="grid md:grid-cols-4 gap-8">
351
+ <div class="text-center">
352
+ <div class="relative w-24 h-24 mx-auto mb-4">
353
+ <svg class="w-full h-full" viewBox="0 0 36 36">
354
+ <path
355
+ d="M18 2.0845
356
+ a 15.9155 15.9155 0 0 1 0 31.831
357
+ a 15.9155 15.9155 0 0 1 0 -31.831"
358
+ fill="none"
359
+ stroke="#e6e6e6"
360
+ stroke-width="3"
361
+ />
362
+ <path
363
+ class="progress-ring__circle"
364
+ d="M18 2.0845
365
+ a 15.9155 15.9155 0 0 1 0 31.831
366
+ a 15.9155 15.9155 0 0 1 0 -31.831"
367
+ fill="none"
368
+ stroke="#4f46e5"
369
+ stroke-width="3"
370
+ stroke-dasharray="100, 100"
371
+ id="course-progress"
372
+ />
373
+ </svg>
374
+ <div class="absolute inset-0 flex items-center justify-center">
375
+ <span class="text-lg font-bold" id="progress-percent">0%</span>
376
+ </div>
377
+ </div>
378
+ <h3 class="font-semibold">Courses Completed</h3>
379
+ </div>
380
+
381
+ <div class="text-center">
382
+ <div class="relative w-24 h-24 mx-auto mb-4">
383
+ <svg class="w-full h-full" viewBox="0 0 36 36">
384
+ <path
385
+ d="M18 2.0845
386
+ a 15.9155 15.9155 0 0 1 0 31.831
387
+ a 15.9155 15.9155 0 0 1 0 -31.831"
388
+ fill="none"
389
+ stroke="#e6e6e6"
390
+ stroke-width="3"
391
+ />
392
+ <path
393
+ class="progress-ring__circle"
394
+ d="M18 2.0845
395
+ a 15.9155 15.9155 0 0 1 0 31.831
396
+ a 15.9155 15.9155 0 0 1 0 -31.831"
397
+ fill="none"
398
+ stroke="#10b981"
399
+ stroke-width="3"
400
+ stroke-dasharray="100, 100"
401
+ id="challenge-progress"
402
+ />
403
+ </svg>
404
+ <div class="absolute inset-0 flex items-center justify-center">
405
+ <span class="text-lg font-bold" id="challenge-percent">0%</span>
406
+ </div>
407
+ </div>
408
+ <h3 class="font-semibold">Challenges Solved</h3>
409
+ </div>
410
+
411
+ <div class="text-center">
412
+ <div class="relative w-24 h-24 mx-auto mb-4">
413
+ <svg class="w-full h-full" viewBox="0 0 36 36">
414
+ <path
415
+ d="M18 2.0845
416
+ a 15.9155 15.9155 0 0 1 0 31.831
417
+ a 15.9155 15.9155 0 0 1 0 -31.831"
418
+ fill="none"
419
+ stroke="#e6e6e6"
420
+ stroke-width="3"
421
+ />
422
+ <path
423
+ class="progress-ring__circle"
424
+ d="M18 2.0845
425
+ a 15.9155 15.9155 0 0 1 0 31.831
426
+ a 15.9155 15.9155 0 0 1 0 -31.831"
427
+ fill="none"
428
+ stroke="#f59e0b"
429
+ stroke-width="3"
430
+ stroke-dasharray="100, 100"
431
+ id="concept-progress"
432
+ />
433
+ </svg>
434
+ <div class="absolute inset-0 flex items-center justify-center">
435
+ <span class="text-lg font-bold" id="concept-percent">0%</span>
436
+ </div>
437
+ </div>
438
+ <h3 class="font-semibold">Concepts Mastered</h3>
439
+ </div>
440
+
441
+ <div class="text-center">
442
+ <div class="relative w-24 h-24 mx-auto mb-4">
443
+ <svg class="w-full h-full" viewBox="0 0 36 36">
444
+ <path
445
+ d="M18 2.0845
446
+ a 15.9155 15.9155 0 0 1 0 31.831
447
+ a 15.9155 15.9155 0 0 1 0 -31.831"
448
+ fill="none"
449
+ stroke="#e6e6e6"
450
+ stroke-width="3"
451
+ />
452
+ <path
453
+ class="progress-ring__circle"
454
+ d="M18 2.0845
455
+ a 15.9155 15.9155 0 0 1 0 31.831
456
+ a 15.9155 15.9155 0 0 1 0 -31.831"
457
+ fill="none"
458
+ stroke="#ef4444"
459
+ stroke-width="3"
460
+ stroke-dasharray="100, 100"
461
+ id="streak-progress"
462
+ />
463
+ </svg>
464
+ <div class="absolute inset-0 flex items-center justify-center">
465
+ <span class="text-lg font-bold" id="streak-count">0</span>
466
+ </div>
467
+ </div>
468
+ <h3 class="font-semibold">Day Streak</h3>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="mt-8">
473
+ <h3 class="font-semibold mb-4">Recent Activity</h3>
474
+ <div class="space-y-4">
475
+ <div class="flex items-start">
476
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
477
+ <i class="fas fa-check-circle text-indigo-600"></i>
478
+ </div>
479
+ <div>
480
+ <p class="text-sm font-medium">Completed "Recursion Basics" lesson</p>
481
+ <p class="text-xs text-gray-500">2 hours ago</p>
482
+ </div>
483
+ </div>
484
+ <div class="flex items-start">
485
+ <div class="bg-green-100 p-2 rounded-full mr-3">
486
+ <i class="fas fa-code text-green-600"></i>
487
+ </div>
488
+ <div>
489
+ <p class="text-sm font-medium">Solved "Binary Tree Traversal" challenge</p>
490
+ <p class="text-xs text-gray-500">Yesterday</p>
491
+ </div>
492
+ </div>
493
+ <div class="flex items-start">
494
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
495
+ <i class="fas fa-book text-yellow-600"></i>
496
+ </div>
497
+ <div>
498
+ <p class="text-sm font-medium">Started "System Design Fundamentals" course</p>
499
+ <p class="text-xs text-gray-500">3 days ago</p>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </section>
507
+
508
+ <!-- Resources Section -->
509
+ <section id="resources" class="py-16 bg-white">
510
+ <div class="container mx-auto px-4">
511
+ <h2 class="text-3xl font-bold text-center mb-12">Learning Resources</h2>
512
+ <div class="grid md:grid-cols-3 gap-8">
513
+ <!-- Cheat Sheets -->
514
+ <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
515
+ <div class="bg-indigo-600 p-4">
516
+ <i class="fas fa-file-alt text-white text-3xl"></i>
517
+ </div>
518
+ <div class="p-6">
519
+ <h3 class="text-xl font-bold mb-3">Cheat Sheets</h3>
520
+ <p class="text-gray-600 mb-4">Quick reference guides for common programming concepts and syntax.</p>
521
+ <div class="flex flex-wrap gap-2">
522
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">JavaScript</span>
523
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Python</span>
524
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">SQL</span>
525
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Git</span>
526
+ </div>
527
+ <button class="mt-4 text-indigo-600 font-semibold hover:text-indigo-800 transition flex items-center">
528
+ Explore Cheat Sheets <i class="fas fa-arrow-right ml-2"></i>
529
+ </button>
530
+ </div>
531
+ </div>
532
+
533
+ <!-- Video Tutorials -->
534
+ <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
535
+ <div class="bg-blue-600 p-4">
536
+ <i class="fas fa-video text-white text-3xl"></i>
537
+ </div>
538
+ <div class="p-6">
539
+ <h3 class="text-xl font-bold mb-3">Video Tutorials</h3>
540
+ <p class="text-gray-600 mb-4">Comprehensive video courses with hands-on coding exercises.</p>
541
+ <div class="flex flex-wrap gap-2">
542
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Algorithms</span>
543
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Web Dev</span>
544
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Mobile</span>
545
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Data Science</span>
546
+ </div>
547
+ <button class="mt-4 text-blue-600 font-semibold hover:text-blue-800 transition flex items-center">
548
+ Browse Videos <i class="fas fa-arrow-right ml-2"></i>
549
+ </button>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- Interview Prep -->
554
+ <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
555
+ <div class="bg-purple-600 p-4">
556
+ <i class="fas fa-clipboard-list text-white text-3xl"></i>
557
+ </div>
558
+ <div class="p-6">
559
+ <h3 class="text-xl font-bold mb-3">Interview Prep</h3>
560
+ <p class="text-gray-600 mb-4">Practice questions and mock interviews for technical interviews.</p>
561
+ <div class="flex flex-wrap gap-2">
562
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">FAANG</span>
563
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Startups</span>
564
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Big Tech</span>
565
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Finance</span>
566
+ </div>
567
+ <button class="mt-4 text-purple-600 font-semibold hover:text-purple-800 transition flex items-center">
568
+ Prepare for Interviews <i class="fas fa-arrow-right ml-2"></i>
569
+ </button>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </section>
575
+
576
+ <!-- Community Section -->
577
+ <section id="community" class="py-16 bg-gray-100">
578
+ <div class="container mx-auto px-4">
579
+ <h2 class="text-3xl font-bold text-center mb-12">Join Our Community</h2>
580
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
581
+ <div class="md:flex">
582
+ <div class="md:w-1/2 bg-indigo-700 text-white p-8">
583
+ <h3 class="text-2xl font-bold mb-4">Connect with Fellow Learners</h3>
584
+ <p class="mb-6">Ask questions, share projects, and get feedback from a community of passionate computer science students and professionals.</p>
585
+ <div class="space-y-4">
586
+ <div class="flex items-center">
587
+ <i class="fas fa-users text-2xl mr-4"></i>
588
+ <div>
589
+ <h4 class="font-bold">100,000+ Members</h4>
590
+ <p class="text-sm text-indigo-200">Active community of learners</p>
591
+ </div>
592
+ </div>
593
+ <div class="flex items-center">
594
+ <i class="fas fa-comments text-2xl mr-4"></i>
595
+ <div>
596
+ <h4 class="font-bold">24/7 Discussions</h4>
597
+ <p class="text-sm text-indigo-200">Get help anytime</p>
598
+ </div>
599
+ </div>
600
+ <div class="flex items-center">
601
+ <i class="fas fa-calendar-check text-2xl mr-4"></i>
602
+ <div>
603
+ <h4 class="font-bold">Weekly Events</h4>
604
+ <p class="text-sm text-indigo-200">Study groups, hackathons, and more</p>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ <div class="md:w-1/2 p-8">
610
+ <h3 class="text-xl font-bold mb-6">Sign Up for Community Access</h3>
611
+ <form>
612
+ <div class="mb-4">
613
+ <label for="name" class="block text-sm font-medium mb-1">Name</label>
614
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
615
+ </div>
616
+ <div class="mb-4">
617
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
618
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
619
+ </div>
620
+ <div class="mb-4">
621
+ <label for="skill-level" class="block text-sm font-medium mb-1">Skill Level</label>
622
+ <select id="skill-level" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
623
+ <option value="beginner">Beginner</option>
624
+ <option value="intermediate">Intermediate</option>
625
+ <option value="advanced">Advanced</option>
626
+ <option value="expert">Expert</option>
627
+ </select>
628
+ </div>
629
+ <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">
630
+ Join Community
631
+ </button>
632
+ </form>
633
+ <div class="mt-4 text-center text-sm text-gray-600">
634
+ Already a member? <a href="#" class="text-indigo-600 hover:underline">Sign in</a>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </section>
641
+
642
+ <!-- Footer -->
643
+ <footer class="bg-gray-900 text-white py-12">
644
+ <div class="container mx-auto px-4">
645
+ <div class="grid md:grid-cols-4 gap-8">
646
+ <div>
647
+ <div class="flex items-center space-x-2 mb-4">
648
+ <i class="fas fa-laptop-code text-2xl"></i>
649
+ <h3 class="text-xl font-bold">CS Mastery</h3>
650
+ </div>
651
+ <p class="text-gray-400">The complete computer science learning platform for students of all levels.</p>
652
+ <div class="flex space-x-4 mt-6">
653
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
654
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a>
655
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a>
656
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
657
+ </div>
658
+ </div>
659
+ <div>
660
+ <h4 class="font-bold mb-4">Learn</h4>
661
+ <ul class="space-y-2">
662
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Courses</a></li>
663
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
664
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Challenges</a></li>
665
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmaps</a></li>
666
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Interview Prep</a></li>
667
+ </ul>
668
+ </div>
669
+ <div>
670
+ <h4 class="font-bold mb-4">Resources</h4>
671
+ <ul class="space-y-2">
672
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cheat Sheets</a></li>
673
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
674
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Glossary</a></li>
675
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Projects</a></li>
676
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Open Source</a></li>
677
+ </ul>
678
+ </div>
679
+ <div>
680
+ <h4 class="font-bold mb-4">Company</h4>
681
+ <ul class="space-y-2">
682
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
683
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
684
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li>
685
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li>
686
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
687
+ </ul>
688
+ </div>
689
+ </div>
690
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
691
+ <p>&copy; 2023 CS Mastery. All rights reserved.</p>
692
+ </div>
693
+ </div>
694
+ </footer>
695
+
696
+ <script>
697
+ // Mobile menu toggle
698
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
699
+ const menu = document.getElementById('mobile-menu');
700
+ menu.classList.toggle('hidden');
701
+ });
702
+
703
+ // Skill level selector
704
+ const skillLevels = document.querySelectorAll('.skill-level');
705
+ const contentDisplay = document.getElementById('content-display');
706
+
707
+ // Sample content for different skill levels
708
+ const levelContent = {
709
+ beginner: [
710
+ {
711
+ title: 'Programming Basics',
712
+ icon: 'fa-code',
713
+ description: 'Learn fundamental programming concepts with simple, interactive exercises.',
714
+ color: 'indigo'
715
+ },
716
+ {
717
+ title: 'Web Development',
718
+ icon: 'fa-globe',
719
+ description: 'Build your first website with HTML, CSS, and JavaScript.',
720
+ color: 'blue'
721
+ },
722
+ {
723
+ title: 'Problem Solving',
724
+ icon: 'fa-puzzle-piece',
725
+ description: 'Develop computational thinking skills with beginner-friendly challenges.',
726
+ color: 'green'
727
+ }
728
+ ],
729
+ intermediate: [
730
+ {
731
+ title: 'Data Structures',
732
+ icon: 'fa-layer-group',
733
+ description: 'Master arrays, linked lists, stacks, queues, and hash tables.',
734
+ color: 'purple'
735
+ },
736
+ {
737
+ title: 'Algorithms',
738
+ icon: 'fa-robot',
739
+ description: 'Learn sorting, searching, and basic algorithm design techniques.',
740
+ color: 'pink'
741
+ },
742
+ {
743
+ title: 'Object-Oriented Programming',
744
+ icon: 'fa-cubes',
745
+ description: 'Understand classes, objects, inheritance, and polymorphism.',
746
+ color: 'indigo'
747
+ }
748
+ ],
749
+ advanced: [
750
+ {
751
+ title: 'Advanced Algorithms',
752
+ icon: 'fa-brain',
753
+ description: 'Study graph algorithms, dynamic programming, and divide & conquer.',
754
+ color: 'red'
755
+ },
756
+ {
757
+ title: 'System Design',
758
+ icon: 'fa-server',
759
+ description: 'Learn to design scalable distributed systems and architectures.',
760
+ color: 'yellow'
761
+ },
762
+ {
763
+ title: 'Database Systems',
764
+ icon: 'fa-database',
765
+ description: 'Deep dive into SQL, NoSQL, indexing, and query optimization.',
766
+ color: 'blue'
767
+ }
768
+ ],
769
+ expert: [
770
+ {
771
+ title: 'Competitive Programming',
772
+ icon: 'fa-trophy',
773
+ description: 'Prepare for coding competitions with advanced problem-solving techniques.',
774
+ color: 'green'
775
+ },
776
+ {
777
+ title: 'Machine Learning',
778
+ icon: 'fa-microchip',
779
+ description: 'Implement ML algorithms and neural networks from scratch.',
780
+ color: 'purple'
781
+ },
782
+ {
783
+ title: 'Blockchain Development',
784
+ icon: 'fa-link',
785
+ description: 'Build decentralized applications and smart contracts.',
786
+ color: 'indigo'
787
+ }
788
+ ]
789
+ };
790
+
791
+ // Set default level to beginner
792
+ let currentLevel = 'beginner';
793
+ skillLevels[0].classList.add('active-level');
794
+ updateContentDisplay(currentLevel);
795
+
796
+ skillLevels.forEach(level => {
797
+ level.addEventListener('click', function() {
798
+ // Remove active class from all buttons
799
+ skillLevels.forEach(btn => btn.classList.remove('active-level'));
800
+
801
+ // Add active class to clicked button
802
+ this.classList.add('active-level');
803
+
804
+ // Update content display
805
+ currentLevel = this.dataset.level;
806
+ updateContentDisplay(currentLevel);
807
+ });
808
+ });
809
+
810
+ function updateContentDisplay(level) {
811
+ const content = levelContent[level];
812
+ let html = '';
813
+
814
+ content.forEach(item => {
815
+ html += `
816
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1">
817
+ <div class="h-48 bg-${item.color}-600 flex items-center justify-center">
818
+ <i class="fas ${item.icon} text-white text-6xl"></i>
819
+ </div>
820
+ <div class="p-6">
821
+ <h3 class="text-xl font-bold mb-3">${item.title}</h3>
822
+ <p class="text-gray-600 mb-4">${item.description}</p>
823
+ <button class="text-${item.color}-600 font-semibold hover:text-${item.color}-800 transition flex items-center">
824
+ Explore <i class="fas fa-arrow-right ml-2"></i>
825
+ </button>
826
+ </div>
827
+ </div>
828
+ `;
829
+ });
830
+
831
+ contentDisplay.innerHTML = html;
832
+ }
833
+
834
+ // Code playground functionality
835
+ const runButton = document.getElementById('run-code');
836
+ const resetButton = document.getElementById('reset-code');
837
+ const codeInput = document.getElementById('code-input');
838
+ const codeOutput = document.getElementById('code-output');
839
+ const languageSelect = document.getElementById('language-select');
840
+
841
+ runButton.addEventListener('click', function() {
842
+ const code = codeInput.value;
843
+
844
+ // Clear previous output
845
+ codeOutput.innerHTML = '<div class="text-green-400">$ Running your code...</div>';
846
+
847
+ // Simulate code execution (in a real app, this would be handled by a backend or WebAssembly)
848
+ setTimeout(() => {
849
+ try {
850
+ // This is a simplified execution for demo purposes
851
+ // In a real app, you'd want to use a safer approach like a sandboxed iframe or WebWorker
852
+ const originalConsoleLog = console.log;
853
+ let output = '';
854
+
855
+ console.log = function(message) {
856
+ output += message + '\n';
857
+ };
858
+
859
+ // Evaluate the code
860
+ eval(code);
861
+
862
+ console.log = originalConsoleLog;
863
+
864
+ if (output === '') {
865
+ output = 'Program executed successfully with no output.';
866
+ }
867
+
868
+ codeOutput.innerHTML = `<pre class="text-green-400">$ ${output}</pre>`;
869
+ } catch (error) {
870
+ codeOutput.innerHTML = `<pre class="text-red-400">$ Error: ${error.message}</pre>`;
871
+ }
872
+ }, 500);
873
+ });
874
+
875
+ resetButton.addEventListener('click', function() {
876
+ // Reset to default code based on selected language
877
+ const language = languageSelect.value;
878
+ let defaultCode = '';
879
+
880
+ switch(language) {
881
+ case 'python':
882
+ defaultCode = `# Python factorial example
883
+ def factorial(n):
884
+ if n == 0 or n == 1:
885
+ return 1
886
+ return n * factorial(n - 1)
887
+
888
+ print(factorial(5)) # Should output 120`;
889
+ break;
890
+ case 'java':
891
+ defaultCode = `// Java factorial example
892
+ public class Main {
893
+ public static int factorial(int n) {
894
+ if (n == 0 || n == 1) {
895
+ return 1;
896
+ }
897
+ return n * factorial(n - 1);
898
+ }
899
+
900
+ public static void main(String[] args) {
901
+ System.out.println(factorial(5)); // Should output 120
902
+ }
903
+ }`;
904
+ break;
905
+ case 'csharp':
906
+ defaultCode = `// C# factorial example
907
+ using System;
908
+
909
+ class Program {
910
+ static int Factorial(int n) {
911
+ if (n == 0 || n == 1) {
912
+ return 1;
913
+ }
914
+ return n * Factorial(n - 1);
915
+ }
916
+
917
+ static void Main() {
918
+ Console.WriteLine(Factorial(5)); // Should output 120
919
+ }
920
+ }`;
921
+ break;
922
+ case 'cpp':
923
+ defaultCode = `// C++ factorial example
924
+ #include <iostream>
925
+ using namespace std;
926
+
927
+ int factorial(int n) {
928
+ if (n == 0 || n == 1) {
929
+ return 1;
930
+ }
931
+ return n * factorial(n - 1);
932
+ }
933
+
934
+ int main() {
935
+ cout << factorial(5) << endl; // Should output 120
936
+ return 0;
937
+ }`;
938
+ break;
939
+ default: // JavaScript
940
+ defaultCode = `// JavaScript factorial example
941
+ function factorial(n) {
942
+ if (n === 0 || n === 1) {
943
+ return 1;
944
+ }
945
+ return n * factorial(n - 1);
946
+ }
947
+
948
+ console.log(factorial(5)); // Should output 120`;
949
+ }
950
+
951
+ codeInput.value = defaultCode;
952
+ codeOutput.innerHTML = '<div class="text-green-400">$ Output will appear here after running your code</div>';
953
+ });
954
+
955
+ languageSelect.addEventListener('change', function() {
956
+ resetButton.click();
957
+ });
958
+
959
+ // Initialize with JavaScript code
960
+ resetButton.click();
961
+
962
+ // Progress tracker animation
963
+ function animateProgress(elementId, percent, displayElement) {
964
+ const circle = document.getElementById(elementId);
965
+ const radius = circle.r.baseVal.value;
966
+ const circumference = 2 * Math.PI * radius;
967
+ const offset = circumference - (percent / 100) * circumference;
968
+
969
+ circle.style.strokeDashoffset = offset;
970
+ displayElement.textContent = `${percent}%`;
971
+ }
972
+
973
+ // Simulate progress (in a real app, this would come from user data)
974
+ setTimeout(() => {
975
+ animateProgress('course-progress', 35, document.getElementById('progress-percent'));
976
+ animateProgress('challenge-progress', 62, document.getElementById('challenge-percent'));
977
+ animateProgress('concept-progress', 48, document.getElementById('concept-percent'));
978
+ document.getElementById('streak-count').textContent = '7';
979
+ }, 500);
980
+ </script>
981
+ <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=DEVINESKEW/cs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
982
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ BUILD A USEABLE COMP SCIENCE APP FOR THE BEGINNER TO THE MASTERS COLLEGIATE LEVEL