Hugging Face's logo

Spaces:
IssamKLAI
/
pythonexplorer
Running

App Files Community
IssamKLAI commited on
Commit
0b1083a
·
verified ·
1 Parent(s): a98407a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +976 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pythonexplorer
3
- emoji: 🐢
4
  colorFrom: yellow
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: pythonexplorer
3
+ emoji: 🐳
4
  colorFrom: yellow
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,976 @@
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>Python Explorer - Learn to Code!</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
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+
16
+ @keyframes shake {
17
+ 0% { transform: rotate(0deg); }
18
+ 25% { transform: rotate(5deg); }
19
+ 50% { transform: rotate(0deg); }
20
+ 75% { transform: rotate(-5deg); }
21
+ 100% { transform: rotate(0deg); }
22
+ }
23
+
24
+ .floating {
25
+ animation: float 3s ease-in-out infinite;
26
+ }
27
+
28
+ .shake {
29
+ animation: shake 0.5s ease-in-out infinite;
30
+ }
31
+
32
+ .code-block {
33
+ font-family: 'Courier New', monospace;
34
+ background-color: #2d3748;
35
+ color: #f7fafc;
36
+ border-radius: 0.5rem;
37
+ padding: 1rem;
38
+ position: relative;
39
+ }
40
+
41
+ .code-block::before {
42
+ content: '';
43
+ position: absolute;
44
+ top: 0;
45
+ right: 0;
46
+ width: 0;
47
+ height: 0;
48
+ border-style: solid;
49
+ border-width: 0 30px 30px 0;
50
+ border-color: transparent #4a5568 transparent transparent;
51
+ }
52
+
53
+ .typewriter {
54
+ overflow: hidden;
55
+ border-right: .15em solid orange;
56
+ white-space: nowrap;
57
+ margin: 0 auto;
58
+ letter-spacing: .15em;
59
+ animation:
60
+ typing 3.5s steps(40, end),
61
+ blink-caret .75s step-end infinite;
62
+ }
63
+
64
+ @keyframes typing {
65
+ from { width: 0 }
66
+ to { width: 100% }
67
+ }
68
+
69
+ @keyframes blink-caret {
70
+ from, to { border-color: transparent }
71
+ 50% { border-color: orange; }
72
+ }
73
+
74
+ .lesson-card {
75
+ transition: all 0.3s ease;
76
+ transform-style: preserve-3d;
77
+ }
78
+
79
+ .lesson-card:hover {
80
+ transform: translateY(-5px) rotateY(5deg);
81
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
82
+ }
83
+
84
+ .progress-bar {
85
+ height: 10px;
86
+ background-color: #e2e8f0;
87
+ border-radius: 5px;
88
+ overflow: hidden;
89
+ }
90
+
91
+ .progress-fill {
92
+ height: 100%;
93
+ background-color: #48bb78;
94
+ transition: width 0.5s ease;
95
+ }
96
+
97
+ .terminal {
98
+ background-color: #1a202c;
99
+ color: #f7fafc;
100
+ border-radius: 0.5rem;
101
+ padding: 1rem;
102
+ font-family: 'Courier New', monospace;
103
+ height: 200px;
104
+ overflow-y: auto;
105
+ }
106
+
107
+ .terminal-line {
108
+ margin-bottom: 0.5rem;
109
+ }
110
+
111
+ .terminal-prompt {
112
+ color: #48bb78;
113
+ }
114
+
115
+ .terminal-output {
116
+ color: #f7fafc;
117
+ }
118
+
119
+ .terminal-error {
120
+ color: #f56565;
121
+ }
122
+ </style>
123
+ </head>
124
+ <body class="bg-blue-50 min-h-screen">
125
+ <!-- Header with Navigation -->
126
+ <header class="bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg">
127
+ <div class="container mx-auto px-4 py-6">
128
+ <div class="flex justify-between items-center">
129
+ <div class="flex items-center space-x-2">
130
+ <i class="fas fa-code text-3xl text-yellow-300 floating"></i>
131
+ <h1 class="text-2xl font-bold">Python Explorer</h1>
132
+ </div>
133
+ <nav>
134
+ <ul class="flex space-x-6">
135
+ <li><a href="#lessons" class="hover:text-yellow-300 transition">Lessons</a></li>
136
+ <li><a href="#playground" class="hover:text-yellow-300 transition">Playground</a></li>
137
+ <li><a href="#challenges" class="hover:text-yellow-300 transition">Challenges</a></li>
138
+ <li><a href="#progress" class="hover:text-yellow-300 transition">My Progress</a></li>
139
+ </ul>
140
+ </nav>
141
+ </div>
142
+ </div>
143
+ </header>
144
+
145
+ <!-- Hero Section -->
146
+ <section class="py-16 px-4">
147
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
148
+ <div class="md:w-1/2 mb-8 md:mb-0">
149
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Hello, Future Coder!</h2>
150
+ <p class="text-xl text-gray-600 mb-6">Learn Python in a fun way with our interactive lessons, games, and challenges designed just for you!</p>
151
+ <div class="flex space-x-4">
152
+ <button id="startLearningBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition">
153
+ Start Learning <i class="fas fa-arrow-right ml-2"></i>
154
+ </button>
155
+ <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition">
156
+ Watch Intro <i class="fas fa-play ml-2"></i>
157
+ </button>
158
+ </div>
159
+ </div>
160
+ <div class="md:w-1/2 flex justify-center">
161
+ <div class="relative">
162
+ <img src="https://cdn-icons-png.flaticon.com/512/2721/2721287.png" alt="Coding Kid" class="w-64 h-64 floating">
163
+ <div class="absolute -bottom-6 -right-6 bg-yellow-300 text-gray-800 p-4 rounded-full shadow-lg shake">
164
+ <i class="fas fa-lightbulb text-3xl"></i>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Lessons Section -->
172
+ <section id="lessons" class="py-12 bg-white px-4">
173
+ <div class="container mx-auto">
174
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Fun Python Lessons</h2>
175
+
176
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
177
+ <!-- Lesson 1 -->
178
+ <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
179
+ <div class="bg-blue-500 p-4 text-white">
180
+ <h3 class="text-xl font-bold">Lesson 1: Meet Python!</h3>
181
+ <div class="flex items-center mt-2">
182
+ <span class="text-sm">Beginner</span>
183
+ <span class="mx-2">•</span>
184
+ <span class="text-sm">10 min</span>
185
+ </div>
186
+ </div>
187
+ <div class="p-6">
188
+ <p class="text-gray-600 mb-4">Discover what Python is and why it's awesome for beginners!</p>
189
+ <div class="flex justify-between items-center">
190
+ <span class="text-yellow-500">
191
+ <i class="fas fa-star"></i>
192
+ <i class="fas fa-star"></i>
193
+ <i class="fas fa-star"></i>
194
+ <i class="fas fa-star"></i>
195
+ <i class="far fa-star"></i>
196
+ </span>
197
+ <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full text-sm transition">
198
+ Start Lesson
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Lesson 2 -->
205
+ <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
206
+ <div class="bg-purple-500 p-4 text-white">
207
+ <h3 class="text-xl font-bold">Lesson 2: Turtle Drawing</h3>
208
+ <div class="flex items-center mt-2">
209
+ <span class="text-sm">Beginner</span>
210
+ <span class="mx-2">•</span>
211
+ <span class="text-sm">15 min</span>
212
+ </div>
213
+ </div>
214
+ <div class="p-6">
215
+ <p class="text-gray-600 mb-4">Draw colorful shapes with Python's turtle graphics!</p>
216
+ <div class="flex justify-between items-center">
217
+ <span class="text-yellow-500">
218
+ <i class="fas fa-star"></i>
219
+ <i class="fas fa-star"></i>
220
+ <i class="fas fa-star"></i>
221
+ <i class="far fa-star"></i>
222
+ <i class="far fa-star"></i>
223
+ </span>
224
+ <button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-full text-sm transition">
225
+ Start Lesson
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Lesson 3 -->
232
+ <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
233
+ <div class="bg-green-500 p-4 text-white">
234
+ <h3 class="text-xl font-bold">Lesson 3: Variables & Math</h3>
235
+ <div class="flex items-center mt-2">
236
+ <span class="text-sm">Beginner</span>
237
+ <span class="mx-2">•</span>
238
+ <span class="text-sm">20 min</span>
239
+ </div>
240
+ </div>
241
+ <div class="p-6">
242
+ <p class="text-gray-600 mb-4">Learn how to store information and do calculations!</p>
243
+ <div class="flex justify-between items-center">
244
+ <span class="text-yellow-500">
245
+ <i class="fas fa-star"></i>
246
+ <i class="fas fa-star"></i>
247
+ <i class="fas fa-star"></i>
248
+ <i class="fas fa-star"></i>
249
+ <i class="far fa-star"></i>
250
+ </span>
251
+ <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full text-sm transition">
252
+ Start Lesson
253
+ </button>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Lesson 4 -->
259
+ <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
260
+ <div class="bg-yellow-500 p-4 text-white">
261
+ <h3 class="text-xl font-bold">Lesson 4: If Statements</h3>
262
+ <div class="flex items-center mt-2">
263
+ <span class="text-sm">Intermediate</span>
264
+ <span class="mx-2">•</span>
265
+ <span class="text-sm">25 min</span>
266
+ </div>
267
+ </div>
268
+ <div class="p-6">
269
+ <p class="text-gray-600 mb-4">Make decisions in your code with if statements!</p>
270
+ <div class="flex justify-between items-center">
271
+ <span class="text-yellow-500">
272
+ <i class="fas fa-star"></i>
273
+ <i class="fas fa-star"></i>
274
+ <i class="fas fa-star"></i>
275
+ <i class="fas fa-star"></i>
276
+ <i class="far fa-star"></i>
277
+ </span>
278
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-full text-sm transition">
279
+ Start Lesson
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Lesson 5 -->
286
+ <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
287
+ <div class="bg-red-500 p-4 text-white">
288
+ <h3 class="text-xl font-bold">Lesson 5: Loops</h3>
289
+ <div class="flex items-center mt-2">
290
+ <span class="text-sm">Intermediate</span>
291
+ <span class="mx-2">•</span>
292
+ <span class="text-sm">30 min</span>
293
+ </div>
294
+ </div>
295
+ <div class="p-6">
296
+ <p class="text-gray-600 mb-4">Repeat actions with for and while loops!</p>
297
+ <div class="flex justify-between items-center">
298
+ <span class="text-yellow-500">
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ <i class="far fa-star"></i>
304
+ </span>
305
+ <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full text-sm transition">
306
+ Start Lesson
307
+ </button>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Lesson 6 -->
313
+ <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
314
+ <div class="bg-indigo-500 p-4 text-white">
315
+ <h3 class="text-xl font-bold">Lesson 6: Functions</h3>
316
+ <div class="flex items-center mt-2">
317
+ <span class="text-sm">Intermediate</span>
318
+ <span class="mx-2">•</span>
319
+ <span class="text-sm">35 min</span>
320
+ </div>
321
+ </div>
322
+ <div class="p-6">
323
+ <p class="text-gray-600 mb-4">Create reusable code with functions!</p>
324
+ <div class="flex justify-between items-center">
325
+ <span class="text-yellow-500">
326
+ <i class="fas fa-star"></i>
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="far fa-star"></i>
331
+ </span>
332
+ <button class="bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded-full text-sm transition">
333
+ Start Lesson
334
+ </button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="text-center mt-12">
341
+ <button class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition">
342
+ View All Lessons <i class="fas fa-chevron-down ml-2"></i>
343
+ </button>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- Interactive Playground -->
349
+ <section id="playground" class="py-16 bg-gray-100 px-4">
350
+ <div class="container mx-auto">
351
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Python Playground</h2>
352
+
353
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
354
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
355
+ <!-- Code Editor -->
356
+ <div class="p-6">
357
+ <div class="flex justify-between items-center mb-4">
358
+ <h3 class="text-xl font-bold text-gray-800">Try Python Code</h3>
359
+ <div class="flex space-x-2">
360
+ <button id="runCodeBtn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full text-sm transition">
361
+ <i class="fas fa-play mr-2"></i> Run Code
362
+ </button>
363
+ <button id="resetCodeBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 px-4 rounded-full text-sm transition">
364
+ <i class="fas fa-redo mr-2"></i> Reset
365
+ </button>
366
+ </div>
367
+ </div>
368
+
369
+ <div class="mb-4">
370
+ <select id="codeExampleSelect" class="w-full p-2 border border-gray-300 rounded-md">
371
+ <option value="">Select an example...</option>
372
+ <option value="hello">Hello World</option>
373
+ <option value="turtle">Turtle Drawing</option>
374
+ <option value="math">Simple Calculator</option>
375
+ <option value="loop">Number Guessing Game</option>
376
+ </select>
377
+ </div>
378
+
379
+ <div class="code-block mb-4">
380
+ <textarea id="pythonCode" class="w-full bg-gray-800 text-white p-4 rounded-md font-mono h-64 resize-none focus:outline-none"># Welcome to Python Explorer!
381
+ # Type your code here and click "Run Code"
382
+
383
+ print("Hello, Python Explorer!")
384
+ </textarea>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Output Terminal -->
389
+ <div class="bg-gray-900 p-6">
390
+ <h3 class="text-xl font-bold text-white mb-4">Output</h3>
391
+ <div class="terminal">
392
+ <div id="terminalOutput">
393
+ <div class="terminal-line">
394
+ <span class="terminal-prompt">>>></span>
395
+ <span class="terminal-output">Welcome to Python Explorer! Ready to code?</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="mt-6">
401
+ <h4 class="text-lg font-bold text-white mb-2">Did you know?</h4>
402
+ <div id="funFact" class="bg-gray-800 text-green-300 p-3 rounded-md">
403
+ Python was named after the Monty Python comedy group, not the snake!
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </section>
411
+
412
+ <!-- Challenges Section -->
413
+ <section id="challenges" class="py-16 bg-white px-4">
414
+ <div class="container mx-auto">
415
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Coding Challenges</h2>
416
+
417
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
418
+ <!-- Challenge 1 -->
419
+ <div class="bg-blue-50 rounded-xl p-6 shadow-md border-l-4 border-blue-500">
420
+ <div class="flex items-start mb-4">
421
+ <div class="bg-blue-500 text-white p-3 rounded-full mr-4">
422
+ <i class="fas fa-puzzle-piece text-xl"></i>
423
+ </div>
424
+ <div>
425
+ <h3 class="text-xl font-bold text-gray-800">Easy: Greeting Machine</h3>
426
+ <p class="text-gray-600">Create a program that asks for your name and says hello!</p>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="mb-4">
431
+ <h4 class="font-bold text-gray-700 mb-2">Example:</h4>
432
+ <div class="code-block p-4 mb-4">
433
+ What's your name? Alex<br>
434
+ Hello, Alex! Nice to meet you!
435
+ </div>
436
+ </div>
437
+
438
+ <div class="flex justify-between items-center">
439
+ <span class="text-blue-500 font-bold">10 XP</span>
440
+ <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full text-sm transition">
441
+ Try Challenge
442
+ </button>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Challenge 2 -->
447
+ <div class="bg-purple-50 rounded-xl p-6 shadow-md border-l-4 border-purple-500">
448
+ <div class="flex items-start mb-4">
449
+ <div class="bg-purple-500 text-white p-3 rounded-full mr-4">
450
+ <i class="fas fa-calculator text-xl"></i>
451
+ </div>
452
+ <div>
453
+ <h3 class="text-xl font-bold text-gray-800">Medium: Number Wizard</h3>
454
+ <p class="text-gray-600">Create a program that can add, subtract, multiply and divide two numbers.</p>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="mb-4">
459
+ <h4 class="font-bold text-gray-700 mb-2">Example:</h4>
460
+ <div class="code-block p-4 mb-4">
461
+ Enter first number: 5<br>
462
+ Enter second number: 3<br>
463
+ 5 + 3 = 8<br>
464
+ 5 - 3 = 2<br>
465
+ 5 * 3 = 15<br>
466
+ 5 / 3 = 1.666...
467
+ </div>
468
+ </div>
469
+
470
+ <div class="flex justify-between items-center">
471
+ <span class="text-purple-500 font-bold">25 XP</span>
472
+ <button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-full text-sm transition">
473
+ Try Challenge
474
+ </button>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Challenge 3 -->
479
+ <div class="bg-green-50 rounded-xl p-6 shadow-md border-l-4 border-green-500">
480
+ <div class="flex items-start mb-4">
481
+ <div class="bg-green-500 text-white p-3 rounded-full mr-4">
482
+ <i class="fas fa-gamepad text-xl"></i>
483
+ </div>
484
+ <div>
485
+ <h3 class="text-xl font-bold text-gray-800">Hard: Guessing Game</h3>
486
+ <p class="text-gray-600">Create a number guessing game where the computer picks a random number.</p>
487
+ </div>
488
+ </div>
489
+
490
+ <div class="mb-4">
491
+ <h4 class="font-bold text-gray-700 mb-2">Example:</h4>
492
+ <div class="code-block p-4 mb-4">
493
+ I'm thinking of a number between 1-10<br>
494
+ Your guess: 5<br>
495
+ Too low!<br>
496
+ Your guess: 8<br>
497
+ Too high!<br>
498
+ Your guess: 7<br>
499
+ You got it in 3 guesses!
500
+ </div>
501
+ </div>
502
+
503
+ <div class="flex justify-between items-center">
504
+ <span class="text-green-500 font-bold">50 XP</span>
505
+ <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full text-sm transition">
506
+ Try Challenge
507
+ </button>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Challenge 4 -->
512
+ <div class="bg-yellow-50 rounded-xl p-6 shadow-md border-l-4 border-yellow-500">
513
+ <div class="flex items-start mb-4">
514
+ <div class="bg-yellow-500 text-white p-3 rounded-full mr-4">
515
+ <i class="fas fa-draw-polygon text-xl"></i>
516
+ </div>
517
+ <div>
518
+ <h3 class="text-xl font-bold text-gray-800">Expert: Turtle Artist</h3>
519
+ <p class="text-gray-600">Use Python's turtle module to draw a colorful shape.</p>
520
+ </div>
521
+ </div>
522
+
523
+ <div class="mb-4">
524
+ <h4 class="font-bold text-gray-700 mb-2">Example:</h4>
525
+ <div class="code-block p-4 mb-4">
526
+ import turtle<br>
527
+ t = turtle.Turtle()<br>
528
+ for i in range(6):<br>
529
+ &nbsp;&nbsp;t.color("red")<br>
530
+ &nbsp;&nbsp;t.forward(100)<br>
531
+ &nbsp;&nbsp;t.left(60)
532
+ </div>
533
+ </div>
534
+
535
+ <div class="flex justify-between items-center">
536
+ <span class="text-yellow-500 font-bold">75 XP</span>
537
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-full text-sm transition">
538
+ Try Challenge
539
+ </button>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="text-center mt-12">
545
+ <button class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition">
546
+ More Challenges <i class="fas fa-chevron-down ml-2"></i>
547
+ </button>
548
+ </div>
549
+ </div>
550
+ </section>
551
+
552
+ <!-- Progress Tracking -->
553
+ <section id="progress" class="py-16 bg-gray-100 px-4">
554
+ <div class="container mx-auto">
555
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">My Learning Progress</h2>
556
+
557
+ <div class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
558
+ <div class="flex flex-col md:flex-row items-center mb-8">
559
+ <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center text-white text-4xl font-bold mb-4 md:mb-0 md:mr-8">
560
+ 11%
561
+ </div>
562
+ <div class="text-center md:text-left">
563
+ <h3 class="text-2xl font-bold text-gray-800">Keep going, Explorer!</h3>
564
+ <p class="text-gray-600">You've completed 2 of 18 lessons. Complete more to unlock badges!</p>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="mb-8">
569
+ <h4 class="font-bold text-gray-700 mb-2">Your Progress</h4>
570
+ <div class="progress-bar mb-2">
571
+ <div class="progress-fill" style="width: 11%"></div>
572
+ </div>
573
+ <div class="flex justify-between text-sm text-gray-600">
574
+ <span>0 XP</span>
575
+ <span>1000 XP</span>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
580
+ <div class="bg-blue-50 p-4 rounded-lg text-center">
581
+ <div class="text-blue-500 text-2xl mb-2">
582
+ <i class="fas fa-book"></i>
583
+ </div>
584
+ <div class="font-bold text-gray-800">2</div>
585
+ <div class="text-sm text-gray-600">Lessons</div>
586
+ </div>
587
+
588
+ <div class="bg-green-50 p-4 rounded-lg text-center">
589
+ <div class="text-green-500 text-2xl mb-2">
590
+ <i class="fas fa-check-circle"></i>
591
+ </div>
592
+ <div class="font-bold text-gray-800">1</div>
593
+ <div class="text-sm text-gray-600">Challenges</div>
594
+ </div>
595
+
596
+ <div class="bg-yellow-50 p-4 rounded-lg text-center">
597
+ <div class="text-yellow-500 text-2xl mb-2">
598
+ <i class="fas fa-trophy"></i>
599
+ </div>
600
+ <div class="font-bold text-gray-800">0</div>
601
+ <div class="text-sm text-gray-600">Badges</div>
602
+ </div>
603
+
604
+ <div class="bg-purple-50 p-4 rounded-lg text-center">
605
+ <div class="text-purple-500 text-2xl mb-2">
606
+ <i class="fas fa-star"></i>
607
+ </div>
608
+ <div class="font-bold text-gray-800">35</div>
609
+ <div class="text-sm text-gray-600">XP</div>
610
+ </div>
611
+ </div>
612
+
613
+ <div>
614
+ <h4 class="font-bold text-gray-700 mb-4">Your Badges</h4>
615
+ <div class="flex flex-wrap justify-center gap-4">
616
+ <div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
617
+ <i class="fas fa-lock text-2xl"></i>
618
+ </div>
619
+ <div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
620
+ <i class="fas fa-lock text-2xl"></i>
621
+ </div>
622
+ <div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
623
+ <i class="fas fa-lock text-2xl"></i>
624
+ </div>
625
+ <div class="relative">
626
+ <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center text-yellow-500">
627
+ <i class="fas fa-star text-2xl"></i>
628
+ </div>
629
+ <div class="absolute -top-2 -right-2 bg-green-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">
630
+ 1
631
+ </div>
632
+ </div>
633
+ <div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
634
+ <i class="fas fa-lock text-2xl"></i>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </section>
641
+
642
+ <!-- Sign Up Section -->
643
+ <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4">
644
+ <div class="container mx-auto max-w-4xl text-center">
645
+ <h2 class="text-3xl font-bold mb-6">Ready to start your coding adventure?</h2>
646
+ <p class="text-xl mb-8">Join Python Explorer today and learn to code in a fun, interactive way!</p>
647
+
648
+ <div class="bg-white rounded-lg shadow-xl p-8 max-w-2xl mx-auto">
649
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Create Your Free Account</h3>
650
+
651
+ <form id="signupForm" class="space-y-4">
652
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
653
+ <div>
654
+ <label for="firstName" class="block text-gray-700 text-sm font-bold mb-2 text-left">First Name</label>
655
+ <input type="text" id="firstName" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your first name">
656
+ </div>
657
+ <div>
658
+ <label for="lastName" class="block text-gray-700 text-sm font-bold mb-2 text-left">Last Name</label>
659
+ <input type="text" id="lastName" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your last name">
660
+ </div>
661
+ </div>
662
+
663
+ <div>
664
+ <label for="email" class="block text-gray-700 text-sm font-bold mb-2 text-left">Email</label>
665
+ <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="your@email.com">
666
+ </div>
667
+
668
+ <div>
669
+ <label for="password" class="block text-gray-700 text-sm font-bold mb-2 text-left">Password</label>
670
+ <input type="password" id="password" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Create a password">
671
+ </div>
672
+
673
+ <div class="flex items-center">
674
+ <input type="checkbox" id="terms" class="mr-2">
675
+ <label for="terms" class="text-gray-700 text-sm">I agree to the <a href="#" class="text-blue-500 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a></label>
676
+ </div>
677
+
678
+ <button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition">
679
+ Start Learning Now <i class="fas fa-rocket ml-2"></i>
680
+ </button>
681
+ </form>
682
+
683
+ <p class="text-gray-600 mt-4 text-sm">Already have an account? <a href="#" class="text-blue-500 hover:underline">Log in</a></p>
684
+ </div>
685
+ </div>
686
+ </section>
687
+
688
+ <!-- Footer -->
689
+ <footer class="bg-gray-900 text-white py-12 px-4">
690
+ <div class="container mx-auto">
691
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
692
+ <div>
693
+ <h3 class="text-xl font-bold mb-4 flex items-center">
694
+ <i class="fas fa-code text-yellow-300 mr-2"></i> Python Explorer
695
+ </h3>
696
+ <p class="text-gray-400">Making coding fun and accessible for kids everywhere.</p>
697
+ <div class="flex space-x-4 mt-4">
698
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
699
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
700
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
701
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
702
+ </div>
703
+ </div>
704
+
705
+ <div>
706
+ <h4 class="text-lg font-bold mb-4">Learn</h4>
707
+ <ul class="space-y-2">
708
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Lessons</a></li>
709
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Challenges</a></li>
710
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Projects</a></li>
711
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
712
+ </ul>
713
+ </div>
714
+
715
+ <div>
716
+ <h4 class="text-lg font-bold mb-4">About</h4>
717
+ <ul class="space-y-2">
718
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Our Story</a></li>
719
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Team</a></li>
720
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
721
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
722
+ </ul>
723
+ </div>
724
+
725
+ <div>
726
+ <h4 class="text-lg font-bold mb-4">Support</h4>
727
+ <ul class="space-y-2">
728
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
729
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
730
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
731
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
732
+ </ul>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
737
+ <p>© 2023 Python Explorer. All rights reserved.</p>
738
+ </div>
739
+ </div>
740
+ </footer>
741
+
742
+ <!-- Back to Top Button -->
743
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
744
+ <i class="fas fa-arrow-up"></i>
745
+ </button>
746
+
747
+ <!-- Confetti Celebration -->
748
+ <canvas id="confetti" class="fixed top-0 left-0 w-full h-full pointer-events-none z-50" style="display: none;"></canvas>
749
+
750
+ <script>
751
+ // Simple terminal simulation
752
+ document.getElementById('runCodeBtn').addEventListener('click', function() {
753
+ const code = document.getElementById('pythonCode').value;
754
+ const outputDiv = document.getElementById('terminalOutput');
755
+
756
+ // Clear previous output
757
+ outputDiv.innerHTML = '';
758
+
759
+ // Simple code interpretation (for demo purposes)
760
+ if (code.includes('print(')) {
761
+ const messages = code.match(/print\(["'](.+?)["']\)/g);
762
+ if (messages) {
763
+ messages.forEach(msg => {
764
+ const text = msg.match(/print\(["'](.+?)["']\)/)[1];
765
+ const line = document.createElement('div');
766
+ line.className = 'terminal-line';
767
+ line.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">${text}</span>`;
768
+ outputDiv.appendChild(line);
769
+ });
770
+ } else {
771
+ const line = document.createElement('div');
772
+ line.className = 'terminal-line';
773
+ line.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Hello, Python Explorer!</span>`;
774
+ outputDiv.appendChild(line);
775
+ }
776
+ } else if (code.includes('import turtle')) {
777
+ const line1 = document.createElement('div');
778
+ line1.className = 'terminal-line';
779
+ line1.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Opening turtle graphics window...</span>`;
780
+ outputDiv.appendChild(line1);
781
+
782
+ const line2 = document.createElement('div');
783
+ line2.className = 'terminal-line';
784
+ line2.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Drawing complete! Check the popup window.</span>`;
785
+ outputDiv.appendChild(line2);
786
+
787
+ // Show confetti for turtle example
788
+ showConfetti();
789
+ } else if (code.includes('input(')) {
790
+ const line1 = document.createElement('div');
791
+ line1.className = 'terminal-line';
792
+ line1.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Please enter your input in the popup window.</span>`;
793
+ outputDiv.appendChild(line1);
794
+ } else {
795
+ const line = document.createElement('div');
796
+ line.className = 'terminal-line';
797
+ line.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Code executed successfully!</span>`;
798
+ outputDiv.appendChild(line);
799
+ }
800
+
801
+ // Scroll to bottom of terminal
802
+ outputDiv.scrollTop = outputDiv.scrollHeight;
803
+
804
+ // Show a random fun fact
805
+ showRandomFunFact();
806
+ });
807
+
808
+ // Reset code button
809
+ document.getElementById('resetCodeBtn').addEventListener('click', function() {
810
+ document.getElementById('pythonCode').value = '# Welcome to Python Explorer!\n# Type your code here and click "Run Code"\n\nprint("Hello, Python Explorer!")';
811
+ document.getElementById('terminalOutput').innerHTML = '<div class="terminal-line"><span class="terminal-prompt">>>></span> <span class="terminal-output">Welcome to Python Explorer! Ready to code?</span></div>';
812
+ });
813
+
814
+ // Code examples dropdown
815
+ document.getElementById('codeExampleSelect').addEventListener('change', function() {
816
+ const example = this.value;
817
+ let code = '';
818
+
819
+ switch(example) {
820
+ case 'hello':
821
+ code = '# Simple Hello World\nprint("Hello, World!")\n\n# Ask for user input\nname = input("What\\'s your name? ")\nprint(f"Hello, {name}!")';
822
+ break;
823
+ case 'turtle':
824
+ code = '# Turtle Graphics Example\nimport turtle\n\n# Create a turtle\nt = turtle.Turtle()\nt.shape("turtle")\nt.color("green")\n\n# Draw a square\nfor i in range(4):\n t.forward(100)\n t.right(90)\n\n# Hide turtle when done\nt.hideturtle()';
825
+ break;
826
+ case 'math':
827
+ code = '# Simple Calculator\nnum1 = float(input("Enter first number: "))\nnum2 = float(input("Enter second number: "))\n\nprint(f"{num1} + {num2} = {num1 + num2}")\nprint(f"{num1} - {num2} = {num1 - num2}")\nprint(f"{num1} * {num2} = {num1 * num2}")\nprint(f"{num1} / {num2} = {num1 / num2}")';
828
+ break;
829
+ case 'loop':
830
+ code = '# Number Guessing Game\nimport random\n\nsecret = random.randint(1, 10)\nguesses = 0\n\nprint("I\\'m thinking of a number between 1-10")\n\nwhile True:\n guess = int(input("Your guess: "))\n guesses += 1\n \n if guess < secret:\n print("Too low!")\n elif guess > secret:\n print("Too high!")\n else:\n print(f"You got it in {guesses} guesses!")\n break';
831
+ break;
832
+ default:
833
+ code = '# Welcome to Python Explorer!\n# Type your code here and click "Run Code"\n\nprint("Hello, Python Explorer!")';
834
+ }
835
+
836
+ document.getElementById('pythonCode').value = code;
837
+ });
838
+
839
+ // Fun facts array
840
+ const funFacts = [
841
+ "Python was named after the Monty Python comedy group, not the snake!",
842
+ "Python is one of the most popular programming languages in the world.",
843
+ "NASA uses Python for scientific computing and data analysis.",
844
+ "Python code is often used in artificial intelligence and machine learning.",
845
+ "You can create games, websites, and even robots with Python!",
846
+ "Python is used by companies like Google, Netflix, and Instagram.",
847
+ "Python is great for beginners because its code is easy to read.",
848
+ "The creator of Python, Guido van Rossum, started working on it in 1989.",
849
+ "Python has a philosophy called 'The Zen of Python' with 19 guiding principles.",
850
+ "Python has a huge community of developers who create helpful libraries."
851
+ ];
852
+
853
+ // Show random fun fact
854
+ function showRandomFunFact() {
855
+ const factDiv = document.getElementById('funFact');
856
+ const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
857
+ factDiv.textContent = randomFact;
858
+
859
+ // Add animation
860
+ factDiv.style.animation = 'none';
861
+ setTimeout(() => {
862
+ factDiv.style.animation = 'typing 2s steps(40, end)';
863
+ }, 10);
864
+ }
865
+
866
+ // Back to top button
867
+ window.addEventListener('scroll', function() {
868
+ const backToTopBtn = document.getElementById('backToTop');
869
+ if (window.pageYOffset > 300) {
870
+ backToTopBtn.style.opacity = '1';
871
+ backToTopBtn.style.visibility = 'visible';
872
+ } else {
873
+ backToTopBtn.style.opacity = '0';
874
+ backToTopBtn.style.visibility = 'hidden';
875
+ }
876
+ });
877
+
878
+ document.getElementById('backToTop').addEventListener('click', function() {
879
+ window.scrollTo({
880
+ top: 0,
881
+ behavior: 'smooth'
882
+ });
883
+ });
884
+
885
+ // Start learning button scroll
886
+ document.getElementById('startLearningBtn').addEventListener('click', function() {
887
+ document.getElementById('lessons').scrollIntoView({
888
+ behavior: 'smooth'
889
+ });
890
+ });
891
+
892
+ // Form submission
893
+ document.getElementById('signupForm').addEventListener('submit', function(e) {
894
+ e.preventDefault();
895
+ alert('Thanks for signing up! Ready to start your Python adventure?');
896
+ showConfetti();
897
+ });
898
+
899
+ // Confetti effect
900
+ function showConfetti() {
901
+ const canvas = document.getElementById('confetti');
902
+ canvas.style.display = 'block';
903
+
904
+ // Confetti configuration
905
+ const confettiSettings = {
906
+ target: 'confetti',
907
+ max: 150,
908
+ size: 1.5,
909
+ animate: true,
910
+ props: ['circle', 'square', 'triangle', 'line'],
911
+ colors: [[255, 0, 0], [0, 255, 0], [0, 0, 255], [255, 255, 0], [255, 0, 255], [0, 255, 255]],
912
+ clock: 50,
913
+ rotate: true,
914
+ start_from_edge: true,
915
+ respawn: false
916
+ };
917
+
918
+ // Simple confetti implementation
919
+ const ctx = canvas.getContext('2d');
920
+ canvas.width = window.innerWidth;
921
+ canvas.height = window.innerHeight;
922
+
923
+ const particles = [];
924
+ const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
925
+
926
+ for (let i = 0; i < 150; i++) {
927
+ particles.push({
928
+ x: Math.random() * canvas.width,
929
+ y: Math.random() * canvas.height - canvas.height,
930
+ size: Math.random() * 10 + 5,
931
+ color: colors[Math.floor(Math.random() * colors.length)],
932
+ speed: Math.random() * 3 + 2,
933
+ angle: Math.random() * 360,
934
+ rotation: Math.random() * 5
935
+ });
936
+ }
937
+
938
+ function draw() {
939
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
940
+
941
+ for (let i = 0; i < particles.length; i++) {
942
+ const p = particles[i];
943
+
944
+ ctx.save();
945
+ ctx.translate(p.x, p.y);
946
+ ctx.rotate(p.angle * Math.PI / 180);
947
+
948
+ ctx.fillStyle = p.color;
949
+ ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
950
+
951
+ ctx.restore();
952
+
953
+ p.y += p.speed;
954
+ p.angle += p.rotation;
955
+
956
+ if (p.y > canvas.height) {
957
+ p.y = Math.random() * canvas.height - canvas.height;
958
+ p.x = Math.random() * canvas.width;
959
+ }
960
+ }
961
+
962
+ requestAnimationFrame(draw);
963
+ }
964
+
965
+ draw();
966
+
967
+ setTimeout(() => {
968
+ canvas.style.display = 'none';
969
+ }, 3000);
970
+ }
971
+
972
+ // Show a fun fact on page load
973
+ document.addEventListener('DOMContentLoaded', showRandomFunFact);
974
+ </script>
975
+ <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=IssamKLAI/pythonexplorer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
976
+ </html>
prompts.txt ADDED
File without changes