Hugging Face's logo

Spaces:
PrinceShadow003
/
codegalaxy
Running

App Files Community
PrinceShadow003 commited on
Commit
44d96ab
·
verified ·
1 Parent(s): 8d7289d

make this as working model - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1269 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Codegalaxy
3
- emoji: 📊
4
- colorFrom: gray
5
- colorTo: blue
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: codegalaxy
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,1269 @@
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>CodeGalaxy Kids - Learn to Code!</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/blockly@10.0.0/blockly.min.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/blockly@10.0.0/msg/en.js"></script>
9
+ <link href="https://cdn.jsdelivr.net/npm/blockly@10.0.0/media/blockly.css" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ :root {
13
+ --primary: #6c5ce7;
14
+ --secondary: #a29bfe;
15
+ --accent: #ff7675;
16
+ --success: #00b894;
17
+ --warning: #fdcb6e;
18
+ --dark: #2d3436;
19
+ --light: #dfe6e9;
20
+ --space-bg: #0f1b33;
21
+ --robot-bg: #e8f4f8;
22
+ --animal-bg: #e8f5e9;
23
+ --galaxy-gradient: linear-gradient(135deg, #1a237e 0%, #4a148c 100%);
24
+ --robot-gradient: linear-gradient(135deg, #00838f 0%, #006064 100%);
25
+ --animal-gradient: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Nunito', sans-serif;
36
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
37
+ color: var(--dark);
38
+ min-height: 100vh;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ .app-container {
43
+ display: flex;
44
+ flex-direction: column;
45
+ min-height: 100vh;
46
+ }
47
+
48
+ /* Header Styles */
49
+ .header {
50
+ background: var(--galaxy-gradient);
51
+ padding: 1rem 2rem;
52
+ display: flex;
53
+ justify-content: space-between;
54
+ align-items: center;
55
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
56
+ position: relative;
57
+ z-index: 100;
58
+ }
59
+
60
+ .logo {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 12px;
64
+ }
65
+
66
+ .logo h1 {
67
+ font-family: 'Fredoka', sans-serif;
68
+ font-size: 2.2rem;
69
+ color: white;
70
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
71
+ }
72
+
73
+ .logo-icon {
74
+ width: 50px;
75
+ height: 50px;
76
+ background: white;
77
+ border-radius: 50%;
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ font-size: 24px;
82
+ color: var(--primary);
83
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
84
+ }
85
+
86
+ .user-actions {
87
+ display: flex;
88
+ align-items: center;
89
+ gap: 20px;
90
+ }
91
+
92
+ .avatar {
93
+ width: 45px;
94
+ height: 45px;
95
+ border-radius: 50%;
96
+ background: var(--accent);
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ color: white;
101
+ font-weight: bold;
102
+ font-size: 18px;
103
+ cursor: pointer;
104
+ border: 3px solid var(--warning);
105
+ }
106
+
107
+ .points-badge {
108
+ background: white;
109
+ padding: 8px 15px;
110
+ border-radius: 25px;
111
+ display: flex;
112
+ align-items: center;
113
+ gap: 8px;
114
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
115
+ }
116
+
117
+ .points-badge span {
118
+ color: var(--primary);
119
+ font-weight: bold;
120
+ font-size: 1.1rem;
121
+ }
122
+
123
+ /* Main Content */
124
+ .main-content {
125
+ display: flex;
126
+ flex: 1;
127
+ }
128
+
129
+ /* Sidebar */
130
+ .sidebar {
131
+ width: 250px;
132
+ background: white;
133
+ padding: 1.5rem 1rem;
134
+ box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
135
+ display: flex;
136
+ flex-direction: column;
137
+ gap: 10px;
138
+ z-index: 50;
139
+ }
140
+
141
+ .nav-item {
142
+ padding: 14px 16px;
143
+ border-radius: 12px;
144
+ display: flex;
145
+ align-items: center;
146
+ gap: 12px;
147
+ cursor: pointer;
148
+ transition: all 0.3s ease;
149
+ font-weight: 600;
150
+ color: var(--dark);
151
+ }
152
+
153
+ .nav-item:hover, .nav-item.active {
154
+ background: var(--secondary);
155
+ color: white;
156
+ }
157
+
158
+ .nav-item i {
159
+ font-size: 1.2rem;
160
+ }
161
+
162
+ .divider {
163
+ height: 1px;
164
+ background: var(--light);
165
+ margin: 15px 0;
166
+ }
167
+
168
+ /* Content Area */
169
+ .content-area {
170
+ flex: 1;
171
+ padding: 2rem;
172
+ overflow-y: auto;
173
+ background: rgba(255, 255, 255, 0.8);
174
+ }
175
+
176
+ .section-title {
177
+ font-family: 'Fredoka', sans-serif;
178
+ font-size: 2rem;
179
+ margin-bottom: 1.5rem;
180
+ color: var(--primary);
181
+ display: flex;
182
+ align-items: center;
183
+ gap: 15px;
184
+ }
185
+
186
+ /* Dashboard */
187
+ .welcome-banner {
188
+ background: var(--galaxy-gradient);
189
+ border-radius: 20px;
190
+ padding: 2rem;
191
+ color: white;
192
+ margin-bottom: 2rem;
193
+ position: relative;
194
+ overflow: hidden;
195
+ }
196
+
197
+ .banner-robot {
198
+ position: absolute;
199
+ right: 30px;
200
+ bottom: -10px;
201
+ width: 150px;
202
+ height: 150px;
203
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="10" fill="white"/><rect x="30" y="40" width="40" height="40" rx="5" fill="white"/><rect x="20" y="45" width="10" height="20" rx="3" fill="white"/><rect x="70" y="45" width="10" height="20" rx="3" fill="white"/></svg>') no-repeat;
204
+ }
205
+
206
+ .learning-paths {
207
+ display: grid;
208
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
209
+ gap: 1.5rem;
210
+ margin-bottom: 2rem;
211
+ }
212
+
213
+ .path-card {
214
+ background: white;
215
+ border-radius: 16px;
216
+ overflow: hidden;
217
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
218
+ transition: transform 0.3s ease;
219
+ cursor: pointer;
220
+ }
221
+
222
+ .path-card:hover {
223
+ transform: translateY(-5px);
224
+ }
225
+
226
+ .path-header {
227
+ padding: 1.5rem;
228
+ color: white;
229
+ display: flex;
230
+ align-items: center;
231
+ gap: 15px;
232
+ }
233
+
234
+ .space-theme {
235
+ background: var(--galaxy-gradient);
236
+ }
237
+
238
+ .robot-theme {
239
+ background: var(--robot-gradient);
240
+ }
241
+
242
+ .animal-theme {
243
+ background: var(--animal-gradient);
244
+ }
245
+
246
+ .path-content {
247
+ padding: 1.5rem;
248
+ }
249
+
250
+ .path-title {
251
+ font-size: 1.4rem;
252
+ margin-bottom: 10px;
253
+ }
254
+
255
+ .progress-bar {
256
+ height: 10px;
257
+ background: var(--light);
258
+ border-radius: 5px;
259
+ margin: 15px 0;
260
+ overflow: hidden;
261
+ }
262
+
263
+ .progress-fill {
264
+ height: 100%;
265
+ background: var(--success);
266
+ border-radius: 5px;
267
+ }
268
+
269
+ .badges-container {
270
+ margin-top: 2rem;
271
+ }
272
+
273
+ .badges-grid {
274
+ display: grid;
275
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
276
+ gap: 1rem;
277
+ }
278
+
279
+ .badge {
280
+ width: 80px;
281
+ height: 80px;
282
+ border-radius: 50%;
283
+ background: linear-gradient(135deg, var(--warning) 0%, var(--accent) 100%);
284
+ display: flex;
285
+ align-items: center;
286
+ justify-content: center;
287
+ color: white;
288
+ font-size: 1.8rem;
289
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
290
+ position: relative;
291
+ }
292
+
293
+ .badge.locked {
294
+ background: var(--light);
295
+ color: #b0b0b0;
296
+ }
297
+
298
+ .badge-title {
299
+ position: absolute;
300
+ bottom: -25px;
301
+ font-size: 0.7rem;
302
+ text-align: center;
303
+ width: 100%;
304
+ color: var(--dark);
305
+ }
306
+
307
+ /* Blockly Workspace */
308
+ .workspace-container {
309
+ display: flex;
310
+ height: 70vh;
311
+ gap: 20px;
312
+ margin-top: 1.5rem;
313
+ }
314
+
315
+ .blockly-area {
316
+ flex: 3;
317
+ background: white;
318
+ border-radius: 16px;
319
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
320
+ overflow: hidden;
321
+ }
322
+
323
+ .code-area {
324
+ flex: 2;
325
+ display: flex;
326
+ flex-direction: column;
327
+ gap: 20px;
328
+ }
329
+
330
+ .code-panel {
331
+ background: #1e1e1e;
332
+ color: #dcdcdc;
333
+ border-radius: 16px;
334
+ padding: 1.5rem;
335
+ flex: 1;
336
+ font-family: monospace;
337
+ overflow: auto;
338
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
339
+ }
340
+
341
+ .code-header {
342
+ display: flex;
343
+ justify-content: space-between;
344
+ margin-bottom: 1rem;
345
+ }
346
+
347
+ .language-selector {
348
+ background: #3c3c3c;
349
+ color: white;
350
+ border: none;
351
+ padding: 5px 10px;
352
+ border-radius: 5px;
353
+ }
354
+
355
+ .stage-container {
356
+ background: white;
357
+ border-radius: 16px;
358
+ padding: 1.5rem;
359
+ flex: 1;
360
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
361
+ overflow: hidden;
362
+ position: relative;
363
+ background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
364
+ }
365
+
366
+ #stage {
367
+ width: 100%;
368
+ height: 100%;
369
+ position: relative;
370
+ overflow: hidden;
371
+ border-radius: 8px;
372
+ background: #f0f8ff;
373
+ }
374
+
375
+ .sprite {
376
+ position: absolute;
377
+ width: 60px;
378
+ height: 60px;
379
+ cursor: pointer;
380
+ transition: transform 0.3s ease;
381
+ }
382
+
383
+ .sprite img {
384
+ width: 100%;
385
+ height: 100%;
386
+ object-fit: contain;
387
+ }
388
+
389
+ .stage-controls {
390
+ position: absolute;
391
+ bottom: 15px;
392
+ left: 15px;
393
+ display: flex;
394
+ gap: 10px;
395
+ }
396
+
397
+ .stage-btn {
398
+ width: 40px;
399
+ height: 40px;
400
+ border-radius: 50%;
401
+ background: var(--primary);
402
+ color: white;
403
+ display: flex;
404
+ align-items: center;
405
+ justify-content: center;
406
+ cursor: pointer;
407
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
408
+ }
409
+
410
+ .toolbar {
411
+ display: flex;
412
+ gap: 10px;
413
+ margin-bottom: 1.5rem;
414
+ }
415
+
416
+ .btn {
417
+ padding: 10px 20px;
418
+ border-radius: 50px;
419
+ border: none;
420
+ font-weight: bold;
421
+ cursor: pointer;
422
+ display: flex;
423
+ align-items: center;
424
+ gap: 8px;
425
+ transition: all 0.2s ease;
426
+ }
427
+
428
+ .btn-primary {
429
+ background: var(--primary);
430
+ color: white;
431
+ }
432
+
433
+ .btn-secondary {
434
+ background: var(--secondary);
435
+ color: white;
436
+ }
437
+
438
+ .btn-warning {
439
+ background: var(--warning);
440
+ color: var(--dark);
441
+ }
442
+
443
+ .btn:hover {
444
+ transform: translateY(-2px);
445
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
446
+ }
447
+
448
+ /* Project Gallery */
449
+ .projects-grid {
450
+ display: grid;
451
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
452
+ gap: 1.5rem;
453
+ }
454
+
455
+ .project-card {
456
+ background: white;
457
+ border-radius: 16px;
458
+ overflow: hidden;
459
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
460
+ transition: transform 0.3s ease;
461
+ cursor: pointer;
462
+ }
463
+
464
+ .project-card:hover {
465
+ transform: translateY(-5px);
466
+ }
467
+
468
+ .project-image {
469
+ height: 150px;
470
+ background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
471
+ display: flex;
472
+ align-items: center;
473
+ justify-content: center;
474
+ color: white;
475
+ font-size: 3rem;
476
+ }
477
+
478
+ .project-info {
479
+ padding: 1.2rem;
480
+ }
481
+
482
+ /* Age Groups */
483
+ .age-groups {
484
+ display: flex;
485
+ gap: 15px;
486
+ margin: 2rem 0;
487
+ flex-wrap: wrap;
488
+ }
489
+
490
+ .age-card {
491
+ background: white;
492
+ border-radius: 16px;
493
+ padding: 1.5rem;
494
+ flex: 1;
495
+ min-width: 250px;
496
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
497
+ }
498
+
499
+ .age-header {
500
+ display: flex;
501
+ align-items: center;
502
+ gap: 10px;
503
+ margin-bottom: 15px;
504
+ }
505
+
506
+ .age-icon {
507
+ width: 50px;
508
+ height: 50px;
509
+ border-radius: 50%;
510
+ background: var(--secondary);
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: center;
514
+ color: white;
515
+ font-size: 1.5rem;
516
+ }
517
+
518
+ .concepts-list {
519
+ padding-left: 20px;
520
+ }
521
+
522
+ .concepts-list li {
523
+ margin-bottom: 8px;
524
+ }
525
+
526
+ /* Footer */
527
+ .footer {
528
+ background: var(--dark);
529
+ color: white;
530
+ padding: 1.5rem 2rem;
531
+ display: flex;
532
+ justify-content: space-between;
533
+ align-items: center;
534
+ }
535
+
536
+ .footer-links {
537
+ display: flex;
538
+ gap: 20px;
539
+ }
540
+
541
+ .footer-link {
542
+ color: var(--light);
543
+ text-decoration: none;
544
+ }
545
+
546
+ /* Animations */
547
+ @keyframes float {
548
+ 0% { transform: translateY(0px); }
549
+ 50% { transform: translateY(-10px); }
550
+ 100% { transform: translateY(0px); }
551
+ }
552
+
553
+ .floating {
554
+ animation: float 3s ease-in-out infinite;
555
+ }
556
+
557
+ /* Responsive */
558
+ @media (max-width: 900px) {
559
+ .workspace-container {
560
+ flex-direction: column;
561
+ height: auto;
562
+ }
563
+
564
+ .main-content {
565
+ flex-direction: column;
566
+ }
567
+
568
+ .sidebar {
569
+ width: 100%;
570
+ flex-direction: row;
571
+ overflow-x: auto;
572
+ padding: 1rem;
573
+ }
574
+
575
+ .divider {
576
+ display: none;
577
+ }
578
+
579
+ .age-groups {
580
+ flex-direction: column;
581
+ }
582
+ }
583
+ </style>
584
+ </head>
585
+ <body>
586
+ <div class="app-container">
587
+ <!-- Header -->
588
+ <header class="header">
589
+ <div class="logo">
590
+ <div class="logo-icon">🚀</div>
591
+ <h1>CodeGalaxy Kids</h1>
592
+ </div>
593
+ <div class="user-actions">
594
+ <div class="points-badge">
595
+ <span>⭐ 1,250</span>
596
+ </div>
597
+ <div class="avatar">MK</div>
598
+ </div>
599
+ </header>
600
+
601
+ <!-- Main Content -->
602
+ <div class="main-content">
603
+ <!-- Sidebar Navigation -->
604
+ <nav class="sidebar">
605
+ <div class="nav-item active">
606
+ <i class="fas fa-home"></i> Dashboard
607
+ </div>
608
+ <div class="nav-item">
609
+ <i class="fas fa-road"></i> Learning Path
610
+ </div>
611
+ <div class="nav-item">
612
+ <i class="fas fa-puzzle-piece"></i> Block Coding
613
+ </div>
614
+ <div class="nav-item">
615
+ <i class="fas fa-gamepad"></i> Projects
616
+ </div>
617
+ <div class="nav-item">
618
+ <i class="fas fa-trophy"></i> Rewards
619
+ </div>
620
+
621
+ <div class="divider"></div>
622
+
623
+ <div class="nav-item">
624
+ <i class="fas fa-users"></i> Parent Zone
625
+ </div>
626
+ <div class="nav-item">
627
+ <i class="fas fa-cog"></i> Settings
628
+ </div>
629
+ </nav>
630
+
631
+ <!-- Content Area -->
632
+ <main class="content-area">
633
+ <h2 class="section-title"><i class="fas fa-rocket"></i> Welcome to CodeGalaxy, Maya!</h2>
634
+
635
+ <!-- Dashboard Banner -->
636
+ <div class="welcome-banner">
637
+ <h3><i class="fas fa-robot"></i> Continue Your Adventure!</h3>
638
+ <p>Complete your current mission to earn 50 stars and unlock new coding powers!</p>
639
+ <div class="banner-robot floating"></div>
640
+ </div>
641
+
642
+ <!-- Learning Paths -->
643
+ <h3 class="section-title"><i class="fas fa-star"></i> Learning Paths</h3>
644
+ <div class="learning-paths">
645
+ <!-- Space Explorer -->
646
+ <div class="path-card">
647
+ <div class="path-header space-theme">
648
+ <i class="fas fa-rocket"></i>
649
+ <h3>Space Explorer</h3>
650
+ </div>
651
+ <div class="path-content">
652
+ <h4 class="path-title">Mission: Navigate Asteroid Field</h4>
653
+ <p>Use loops to navigate through space obstacles!</p>
654
+ <div class="progress-bar">
655
+ <div class="progress-fill" style="width: 65%"></div>
656
+ </div>
657
+ <p>65% Complete • 3/5 Missions</p>
658
+ </div>
659
+ </div>
660
+
661
+ <!-- Robot Village -->
662
+ <div class="path-card">
663
+ <div class="path-header robot-theme">
664
+ <i class="fas fa-robot"></i>
665
+ <h3>Robot Village</h3>
666
+ </div>
667
+ <div class="path-content">
668
+ <h4 class="path-title">Mission: Help Robots Dance</h4>
669
+ <p>Create sequences to choreograph robot dances!</p>
670
+ <div class="progress-bar">
671
+ <div class="progress-fill" style="width: 30%"></div>
672
+ </div>
673
+ <p>30% Complete • 1/5 Missions</p>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- Animal Adventures -->
678
+ <div class="path-card">
679
+ <div class="path-header animal-theme">
680
+ <i class="fas fa-paw"></i>
681
+ <h3>Animal Adventures</h3>
682
+ </div>
683
+ <div class="path-content">
684
+ <h4 class="path-title">Mission: Feed the Animals</h4>
685
+ <p>Use conditionals to feed animals the right food!</p>
686
+ <div class="progress-bar">
687
+ <div class="progress-fill" style="width: 10%"></div>
688
+ </div>
689
+ <p>10% Complete • 0/5 Missions</p>
690
+ </div>
691
+ </div>
692
+ </div>
693
+
694
+ <!-- Age Groups -->
695
+ <h3 class="section-title"><i class="fas fa-child"></i> Learning Path by Age</h3>
696
+ <div class="age-groups">
697
+ <div class="age-card">
698
+ <div class="age-header">
699
+ <div class="age-icon">5-7</div>
700
+ <h3>Beginner</h3>
701
+ </div>
702
+ <ul class="concepts-list">
703
+ <li>Shapes and colors</li>
704
+ <li>Basic movement</li>
705
+ <li>Simple sequences</li>
706
+ <li>Pattern recognition</li>
707
+ </ul>
708
+ </div>
709
+
710
+ <div class="age-card">
711
+ <div class="age-header">
712
+ <div class="age-icon">8-10</div>
713
+ <h3>Intermediate</h3>
714
+ </div>
715
+ <ul class="concepts-list">
716
+ <li>Loops and repetition</li>
717
+ <li>Conditional logic</li>
718
+ <li>Variables</li>
719
+ <li>Problem solving</li>
720
+ </ul>
721
+ </div>
722
+
723
+ <div class="age-card">
724
+ <div class="age-header">
725
+ <div class="age-icon">11-13</div>
726
+ <h3>Advanced</h3>
727
+ </div>
728
+ <ul class="concepts-list">
729
+ <li>Functions and events</li>
730
+ <li>Debugging techniques</li>
731
+ <li>Game mechanics</li>
732
+ <li>Real-world problems</li>
733
+ </ul>
734
+ </div>
735
+
736
+ <div class="age-card">
737
+ <div class="age-header">
738
+ <div class="age-icon">13+</div>
739
+ <h3>Expert</h3>
740
+ </div>
741
+ <ul class="concepts-list">
742
+ <li>Text-based coding</li>
743
+ <li>Python and JavaScript</li>
744
+ <li>Web development</li>
745
+ <li>AI concepts</li>
746
+ </ul>
747
+ </div>
748
+ </div>
749
+
750
+ <!-- Blockly Workspace -->
751
+ <h3 class="section-title"><i class="fas fa-puzzle-piece"></i> Block Coding Playground</h3>
752
+ <div class="toolbar">
753
+ <button class="btn btn-primary" id="runCode">
754
+ <i class="fas fa-play"></i> Run Code
755
+ </button>
756
+ <button class="btn btn-secondary" id="saveProject">
757
+ <i class="fas fa-save"></i> Save Project
758
+ </button>
759
+ <button class="btn btn-warning" id="getHelp">
760
+ <i class="fas fa-question-circle"></i> Get Help
761
+ </button>
762
+ <button class="btn" id="resetStage" style="background: #ff7675; color: white;">
763
+ <i class="fas fa-redo"></i> Reset
764
+ </button>
765
+ </div>
766
+ <div class="workspace-container">
767
+ <div class="blockly-area" id="blocklyDiv"></div>
768
+ <div class="code-area">
769
+ <div class="code-panel">
770
+ <div class="code-header">
771
+ <h4>Generated Code</h4>
772
+ <select class="language-selector" id="languageSelector">
773
+ <option>JavaScript</option>
774
+ <option>Python</option>
775
+ </select>
776
+ </div>
777
+ <pre id="generatedCode"># Welcome to CodeGalaxy!
778
+
779
+ # Your generated code will appear here
780
+ # Drag blocks to the workspace to start coding!
781
+
782
+ def main():
783
+ # Example: Move the robot forward
784
+ robot.move_forward(3)
785
+
786
+ # Example: Turn right
787
+ robot.turn_right()
788
+
789
+ # Example: Loop to collect stars
790
+ for i in range(5):
791
+ collect_star()
792
+
793
+ if __name__ == "__main__":
794
+ main()</pre>
795
+ </div>
796
+ <div class="stage-container">
797
+ <h4>Stage Preview</h4>
798
+ <div id="stage">
799
+ <div class="sprite" id="robotSprite" style="top: 100px; left: 100px;">
800
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='10' fill='%236c5ce7'/%3E%3Crect x='30' y='40' width='40' height='40' rx='5' fill='%236c5ce7'/%3E%3Crect x='20' y='45' width='10' height='20' rx='3' fill='%236c5ce7'/%3E%3Crect x='70' y='45' width='10' height='20' rx='3' fill='%236c5ce7'/%3E%3C/svg%3E" alt="Robot">
801
+ </div>
802
+ <div class="sprite" id="star1" style="top: 50px; left: 200px;">
803
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 61,35 88,35 65,55 71,80 50,65 29,80 35,55 12,35 39,35' fill='%23fdcb6e'/%3E%3C/svg%3E" alt="Star">
804
+ </div>
805
+ <div class="sprite" id="star2" style="top: 180px; left: 300px;">
806
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 61,35 88,35 65,55 71,80 50,65 29,80 35,55 12,35 39,35' fill='%23fdcb6e'/%3E%3C/svg%3E" alt="Star">
807
+ </div>
808
+ <div class="sprite" id="rocket" style="top: 250px; left: 50px;">
809
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,10 L70,40 L60,40 L65,90 L35,90 L40,40 L30,40 Z' fill='%23ff7675'/%3E%3Ccircle cx='50' cy='30' r='10' fill='%23a29bfe'/%3E%3C/svg%3E" alt="Rocket">
810
+ </div>
811
+ </div>
812
+ <div class="stage-controls">
813
+ <div class="stage-btn" id="greenFlag">
814
+ <i class="fas fa-flag" style="color: #00b894;"></i>
815
+ </div>
816
+ <div class="stage-btn" id="stopBtn">
817
+ <i class="fas fa-stop"></i>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </div>
823
+
824
+ <!-- Badges Section -->
825
+ <h3 class="section-title"><i class="fas fa-trophy"></i> Your Achievements</h3>
826
+ <div class="badges-container">
827
+ <div class="badges-grid">
828
+ <div class="badge">
829
+ <i class="fas fa-star"></i>
830
+ <div class="badge-title">Starter</div>
831
+ </div>
832
+ <div class="badge">
833
+ <i class="fas fa-redo"></i>
834
+ <div class="badge-title">Loops Master</div>
835
+ </div>
836
+ <div class="badge">
837
+ <i class="fas fa-brain"></i>
838
+ <div class="badge-title">Logic Wizard</div>
839
+ </div>
840
+ <div class="badge locked">
841
+ <i class="fas fa-lock"></i>
842
+ <div class="badge-title">Variables Pro</div>
843
+ </div>
844
+ <div class="badge locked">
845
+ <i class="fas fa-lock"></i>
846
+ <div class="badge-title">Game Designer</div>
847
+ </div>
848
+ <div class="badge locked">
849
+ <i class="fas fa-lock"></i>
850
+ <div class="badge-title">Python Expert</div>
851
+ </div>
852
+ </div>
853
+ </div>
854
+ </main>
855
+ </div>
856
+
857
+ <!-- Footer -->
858
+ <footer class="footer">
859
+ <div class="copyright">
860
+ © 2023 CodeGalaxy Kids. All rights reserved.
861
+ </div>
862
+ <div class="footer-links">
863
+ <a href="#" class="footer-link">Privacy Policy</a>
864
+ <a href="#" class="footer-link">Terms of Service</a>
865
+ <a href="#" class="footer-link">Help Center</a>
866
+ </div>
867
+ </footer>
868
+ </div>
869
+
870
+ <script>
871
+ // Initialize Blockly
872
+ document.addEventListener('DOMContentLoaded', function() {
873
+ // Custom Blockly blocks
874
+ Blockly.Blocks['motion_move'] = {
875
+ init: function() {
876
+ this.appendDummyInput()
877
+ .appendField("move")
878
+ .appendField(new Blockly.FieldDropdown([
879
+ ["forward", "FORWARD"],
880
+ ["backward", "BACKWARD"]
881
+ ]), "DIRECTION")
882
+ .appendField(new Blockly.FieldNumber(10, 1), "STEPS")
883
+ .appendField("steps");
884
+ this.setPreviousStatement(true);
885
+ this.setNextStatement(true);
886
+ this.setColour(160);
887
+ this.setTooltip("Move the robot");
888
+ }
889
+ };
890
+
891
+ Blockly.Blocks['motion_turn'] = {
892
+ init: function() {
893
+ this.appendDummyInput()
894
+ .appendField("turn")
895
+ .appendField(new Blockly.FieldDropdown([
896
+ ["left", "LEFT"],
897
+ ["right", "RIGHT"]
898
+ ]), "DIRECTION")
899
+ .appendField(new Blockly.FieldNumber(15, 1), "DEGREES")
900
+ .appendField("degrees");
901
+ this.setPreviousStatement(true);
902
+ this.setNextStatement(true);
903
+ this.setColour(160);
904
+ this.setTooltip("Turn the robot");
905
+ }
906
+ };
907
+
908
+ Blockly.Blocks['event_whenflagclicked'] = {
909
+ init: function() {
910
+ this.appendDummyInput()
911
+ .appendField("when green flag clicked");
912
+ this.setNextStatement(true);
913
+ this.setColour(120);
914
+ this.setTooltip("Trigger when the green flag is clicked");
915
+ }
916
+ };
917
+
918
+ Blockly.Blocks['controls_repeat'] = {
919
+ init: function() {
920
+ this.appendDummyInput()
921
+ .appendField("repeat")
922
+ .appendField(new Blockly.FieldNumber(5, 1), "TIMES")
923
+ .appendField("times");
924
+ this.appendStatementInput("DO")
925
+ .setCheck(null);
926
+ this.setPreviousStatement(true);
927
+ this.setNextStatement(true);
928
+ this.setColour(65);
929
+ this.setTooltip("Repeat the enclosed blocks");
930
+ }
931
+ };
932
+
933
+ Blockly.Blocks['controls_wait'] = {
934
+ init: function() {
935
+ this.appendDummyInput()
936
+ .appendField("wait")
937
+ .appendField(new Blockly.FieldNumber(1, 0.1, 10, 0.1), "SECONDS")
938
+ .appendField("seconds");
939
+ this.setPreviousStatement(true);
940
+ this.setNextStatement(true);
941
+ this.setColour(65);
942
+ this.setTooltip("Wait for some seconds");
943
+ }
944
+ };
945
+
946
+ Blockly.Blocks['looks_say'] = {
947
+ init: function() {
948
+ this.appendDummyInput()
949
+ .appendField("say")
950
+ .appendField(new Blockly.FieldTextInput("Hello!"), "MESSAGE")
951
+ .appendField("for")
952
+ .appendField(new Blockly.FieldNumber(2, 0.1), "SECONDS")
953
+ .appendField("seconds");
954
+ this.setPreviousStatement(true);
955
+ this.setNextStatement(true);
956
+ this.setColour(210);
957
+ this.setTooltip("Show a message bubble");
958
+ }
959
+ };
960
+
961
+ // Blockly workspace
962
+ const workspace = Blockly.inject('blocklyDiv', {
963
+ toolbox: document.getElementById('toolbox'),
964
+ grid: {
965
+ spacing: 20,
966
+ length: 3,
967
+ colour: '#ccc',
968
+ snap: true
969
+ },
970
+ zoom: {
971
+ controls: true,
972
+ wheel: true,
973
+ startScale: 1.0,
974
+ maxScale: 3,
975
+ minScale: 0.3,
976
+ scaleSpeed: 1.2
977
+ },
978
+ move: {
979
+ scrollbars: true,
980
+ drag: true,
981
+ wheel: true
982
+ }
983
+ });
984
+
985
+ // Initial blocks
986
+ const initialXml = `
987
+ <xml xmlns="https://developers.google.com/blockly/xml">
988
+ <block type="event_whenflagclicked" id="start_block" x="20" y="20">
989
+ <next>
990
+ <block type="looks_say">
991
+ <field name="MESSAGE">Let's code!</field>
992
+ <field name="SECONDS">1</field>
993
+ <next>
994
+ <block type="motion_move">
995
+ <field name="DIRECTION">FORWARD</field>
996
+ <field name="STEPS">50</field>
997
+ <next>
998
+ <block type="motion_turn">
999
+ <field name="DIRECTION">RIGHT</field>
1000
+ <field name="DEGREES">90</field>
1001
+ <next>
1002
+ <block type="controls_repeat">
1003
+ <field name="TIMES">4</field>
1004
+ <statement name="DO">
1005
+ <block type="motion_move">
1006
+ <field name="DIRECTION">FORWARD</field>
1007
+ <field name="STEPS">30</field>
1008
+ <next>
1009
+ <block type="motion_turn">
1010
+ <field name="DIRECTION">RIGHT</field>
1011
+ <field name="DEGREES">90</field>
1012
+ </block>
1013
+ </next>
1014
+ </block>
1015
+ </statement>
1016
+ </block>
1017
+ </next>
1018
+ </block>
1019
+ </next>
1020
+ </block>
1021
+ </next>
1022
+ </block>
1023
+ </next>
1024
+ </block>
1025
+ </xml>
1026
+ `;
1027
+
1028
+ // Load initial blocks
1029
+ Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), workspace);
1030
+
1031
+ // Update code preview
1032
+ function updateCodePreview() {
1033
+ const codeElement = document.getElementById('generatedCode');
1034
+ const language = document.getElementById('languageSelector').value;
1035
+
1036
+ // In a real implementation, this would use Blockly generators
1037
+ if (language === 'JavaScript') {
1038
+ codeElement.textContent = `// JavaScript code\n\nfunction main() {\n // Say message\n say("Let's code!", 1);\n \n // Move forward\n move("forward", 50);\n \n // Turn right\n turn("right", 90);\n \n // Loop to draw a square\n for (let i = 0; i < 4; i++) {\n move("forward", 30);\n turn("right", 90);\n }\n}\n\n// Start the program\nmain();`;
1039
+ } else {
1040
+ codeElement.textContent = `# Python code\n\ndef main():\n # Say message\n say("Let's code!", 1)\n \n # Move forward\n move("forward", 50)\n \n # Turn right\n turn("right", 90)\n \n # Loop to draw a square\n for i in range(4):\n move("forward", 30)\n turn("right", 90)\n \nif __name__ == "__main__":\n main()`;
1041
+ }
1042
+ }
1043
+
1044
+ // Sprite movement functions
1045
+ function moveSprite(direction, steps) {
1046
+ const robot = document.getElementById('robotSprite');
1047
+ const currentLeft = parseInt(robot.style.left) || 100;
1048
+ const currentTop = parseInt(robot.style.top) || 100;
1049
+
1050
+ if (direction === 'FORWARD') {
1051
+ robot.style.top = (currentTop - steps) + 'px';
1052
+ } else {
1053
+ robot.style.top = (currentTop + steps) + 'px';
1054
+ }
1055
+
1056
+ // Check for star collection
1057
+ checkStarCollection();
1058
+ }
1059
+
1060
+ function turnSprite(direction, degrees) {
1061
+ const robot = document.getElementById('robotSprite');
1062
+ const currentRotation = parseInt(robot.dataset.rotation) || 0;
1063
+ let newRotation;
1064
+
1065
+ if (direction === 'RIGHT') {
1066
+ newRotation = currentRotation + degrees;
1067
+ } else {
1068
+ newRotation = currentRotation - degrees;
1069
+ }
1070
+
1071
+ robot.dataset.rotation = newRotation;
1072
+ robot.style.transform = `rotate(${newRotation}deg)`;
1073
+ }
1074
+
1075
+ function sayMessage(message, seconds) {
1076
+ const output = document.getElementById('output');
1077
+ output.innerHTML = `<div class="speech-bubble">${message}</div>`;
1078
+
1079
+ setTimeout(() => {
1080
+ output.innerHTML = '';
1081
+ }, seconds * 1000);
1082
+ }
1083
+
1084
+ function checkStarCollection() {
1085
+ const robot = document.getElementById('robotSprite');
1086
+ const stars = document.querySelectorAll('.sprite:not(#robotSprite)');
1087
+ const robotRect = robot.getBoundingClientRect();
1088
+
1089
+ stars.forEach(star => {
1090
+ const starRect = star.getBoundingClientRect();
1091
+
1092
+ // Check for collision
1093
+ if (!star.classList.contains('collected') &&
1094
+ robotRect.left < starRect.right &&
1095
+ robotRect.right > starRect.left &&
1096
+ robotRect.top < starRect.bottom &&
1097
+ robotRect.bottom > starRect.top) {
1098
+
1099
+ // Collect the star
1100
+ star.classList.add('collected');
1101
+ star.style.opacity = '0.3';
1102
+
1103
+ // Update points
1104
+ const pointsBadge = document.querySelector('.points-badge span');
1105
+ const currentPoints = parseInt(pointsBadge.textContent.replace('⭐ ', '')) || 0;
1106
+ pointsBadge.textContent = `⭐ ${currentPoints + 50}`;
1107
+
1108
+ // Show message
1109
+ const output = document.getElementById('output');
1110
+ output.innerHTML = `<div class="speech-bubble">⭐ Collected a star! +50 points</div>`;
1111
+
1112
+ setTimeout(() => {
1113
+ output.innerHTML = '';
1114
+ }, 2000);
1115
+ }
1116
+ });
1117
+ }
1118
+
1119
+ // Execute the block program
1120
+ function executeProgram() {
1121
+ // Reset collected stars
1122
+ document.querySelectorAll('.sprite').forEach(sprite => {
1123
+ if (sprite !== document.getElementById('robotSprite')) {
1124
+ sprite.classList.remove('collected');
1125
+ sprite.style.opacity = '1';
1126
+ }
1127
+ });
1128
+
1129
+ // Reset robot position
1130
+ const robot = document.getElementById('robotSprite');
1131
+ robot.style.top = '100px';
1132
+ robot.style.left = '100px';
1133
+ robot.style.transform = 'rotate(0deg)';
1134
+ robot.dataset.rotation = '0';
1135
+
1136
+ // Execute blocks in sequence
1137
+ const blocks = {
1138
+ 'looks_say': (block) => {
1139
+ const message = block.getFieldValue('MESSAGE');
1140
+ const seconds = parseFloat(block.getFieldValue('SECONDS'));
1141
+ sayMessage(message, seconds);
1142
+ return new Promise(resolve => setTimeout(resolve, seconds * 1000));
1143
+ },
1144
+ 'motion_move': (block) => {
1145
+ const direction = block.getFieldValue('DIRECTION');
1146
+ const steps = parseInt(block.getFieldValue('STEPS'));
1147
+ moveSprite(direction, steps);
1148
+ return new Promise(resolve => setTimeout(resolve, 800));
1149
+ },
1150
+ 'motion_turn': (block) => {
1151
+ const direction = block.getFieldValue('DIRECTION');
1152
+ const degrees = parseInt(block.getFieldValue('DEGREES'));
1153
+ turnSprite(direction, degrees);
1154
+ return new Promise(resolve => setTimeout(resolve, 800));
1155
+ },
1156
+ 'controls_repeat': async (block) => {
1157
+ const times = parseInt(block.getFieldValue('TIMES'));
1158
+ const doBlock = block.getInputTargetBlock('DO');
1159
+
1160
+ for (let i = 0; i < times; i++) {
1161
+ let currentBlock = doBlock;
1162
+ while (currentBlock) {
1163
+ await executeBlock(currentBlock);
1164
+ currentBlock = currentBlock.nextConnection && currentBlock.nextConnection.targetBlock();
1165
+ }
1166
+ }
1167
+ return Promise.resolve();
1168
+ },
1169
+ 'controls_wait': (block) => {
1170
+ const seconds = parseFloat(block.getFieldValue('SECONDS'));
1171
+ return new Promise(resolve => setTimeout(resolve, seconds * 1000));
1172
+ }
1173
+ };
1174
+
1175
+ // Start from the green flag block
1176
+ const startBlock = workspace.getBlockById('start_block');
1177
+ let currentBlock = startBlock.nextConnection && startBlock.nextConnection.targetBlock();
1178
+
1179
+ async function executeBlock(block) {
1180
+ const blockType = block.type;
1181
+ if (blocks[blockType]) {
1182
+ await blocks[blockType](block);
1183
+ }
1184
+ return Promise.resolve();
1185
+ }
1186
+
1187
+ async function runBlocks() {
1188
+ while (currentBlock) {
1189
+ await executeBlock(currentBlock);
1190
+ currentBlock = currentBlock.nextConnection && currentBlock.nextConnection.targetBlock();
1191
+ }
1192
+ }
1193
+
1194
+ runBlocks();
1195
+ }
1196
+
1197
+ // Event listeners
1198
+ document.getElementById('runCode').addEventListener('click', executeProgram);
1199
+ document.getElementById('greenFlag').addEventListener('click', executeProgram);
1200
+
1201
+ document.getElementById('stopBtn').addEventListener('click', function() {
1202
+ // In a real implementation, this would stop all execution
1203
+ document.getElementById('output').innerHTML = '<p>⏹️ Program stopped</p>';
1204
+ });
1205
+
1206
+ document.getElementById('resetStage').addEventListener('click', function() {
1207
+ const robot = document.getElementById('robotSprite');
1208
+ robot.style.top = '100px';
1209
+ robot.style.left = '100px';
1210
+ robot.style.transform = 'rotate(0deg)';
1211
+ robot.dataset.rotation = '0';
1212
+
1213
+ document.querySelectorAll('.sprite').forEach(sprite => {
1214
+ if (sprite !== robot) {
1215
+ sprite.classList.remove('collected');
1216
+ sprite.style.opacity = '1';
1217
+ }
1218
+ });
1219
+
1220
+ document.getElementById('output').innerHTML = '<p>🔄 Stage has been reset</p>';
1221
+ });
1222
+
1223
+ document.getElementById('getHelp').addEventListener('click', function() {
1224
+ const output = document.getElementById('output');
1225
+ output.innerHTML = '<p>🤖 Robo Helper: Try using a loop to repeat actions!</p>';
1226
+ output.innerHTML += '<p>🔁 Drag a "repeat" block to make the robot move multiple times</p>';
1227
+ output.innerHTML += '<p>💡 Remember: Each step in the loop will be repeated</p>';
1228
+ });
1229
+
1230
+ document.getElementById('languageSelector').addEventListener('change', updateCodePreview);
1231
+
1232
+ // Navigation functionality
1233
+ document.querySelectorAll('.nav-item').forEach(item => {
1234
+ item.addEventListener('click', function() {
1235
+ document.querySelectorAll('.nav-item').forEach(nav => {
1236
+ nav.classList.remove('active');
1237
+ });
1238
+ this.classList.add('active');
1239
+ });
1240
+ });
1241
+
1242
+ // Initialize code preview
1243
+ updateCodePreview();
1244
+ });
1245
+ </script>
1246
+
1247
+ <!-- Blockly Toolbox -->
1248
+ <xml id="toolbox" style="display: none">
1249
+ <category name="Motion" colour="#4A6CD4">
1250
+ <block type="motion_move"></block>
1251
+ <block type="motion_turn"></block>
1252
+ </category>
1253
+ <category name="Events" colour="#FFAB19">
1254
+ <block type="event_whenflagclicked"></block>
1255
+ </category>
1256
+ <category name="Control" colour="#5CB711">
1257
+ <block type="controls_repeat"></block>
1258
+ <block type="controls_wait"></block>
1259
+ </category>
1260
+ <category name="Looks" colour="#FF6680">
1261
+ <block type="looks_say"></block>
1262
+ </category>
1263
+ <category name="Operators" colour="#0FBD8C">
1264
+ <block type="math_number"></block>
1265
+ <block type="math_arithmetic"></block>
1266
+ </category>
1267
+ </xml>
1268
+ <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=PrinceShadow003/codegalaxy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1269
+ </html>