Hugging Face's logo

Spaces:
DeepSiteOptional
/
turboned-developent
Running

App Files Community
DeepSiteOptional commited on
Commit
2ddb858
·
verified ·
1 Parent(s): d93de72

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1528 -19
  3. prompts.txt +7 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Turboned Developent
3
- emoji: 🚀
4
- colorFrom: red
5
- colorTo: pink
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: turboned-developent
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,1528 @@
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>TurbONED - Creative Coding Platform</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
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ background-color: #f0f4f8;
15
+ margin: 0;
16
+ padding: 0;
17
+ overflow-x: hidden;
18
+ }
19
+
20
+ .gradient-bg {
21
+ background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 50%, #f9d423 100%);
22
+ }
23
+
24
+ .block {
25
+ background-color: rgba(255, 255, 255, 0.9);
26
+ border-radius: 8px;
27
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28
+ padding: 10px;
29
+ margin: 5px;
30
+ cursor: move;
31
+ user-select: none;
32
+ transition: all 0.2s;
33
+ position: relative;
34
+ }
35
+
36
+ .block:hover {
37
+ transform: translateY(-2px);
38
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
39
+ }
40
+
41
+ .block.active {
42
+ animation: pulse 1s infinite alternate;
43
+ box-shadow: 0 0 10px rgba(255, 165, 0, 0.7);
44
+ }
45
+
46
+ @keyframes pulse {
47
+ from {
48
+ box-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
49
+ }
50
+ to {
51
+ box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
52
+ }
53
+ }
54
+
55
+ .workspace {
56
+ background-color: white;
57
+ border-radius: 10px;
58
+ min-height: 400px;
59
+ position: relative;
60
+ overflow: hidden;
61
+ }
62
+
63
+ .sprite {
64
+ width: 60px;
65
+ height: 60px;
66
+ border-radius: 8px;
67
+ background-color: #fff;
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ cursor: pointer;
72
+ transition: all 0.2s;
73
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
74
+ }
75
+
76
+ .sprite:hover {
77
+ transform: scale(1.05);
78
+ }
79
+
80
+ .tab-content {
81
+ display: none;
82
+ }
83
+
84
+ .tab-content.active {
85
+ display: block;
86
+ }
87
+
88
+ #stage {
89
+ background-color: #f0f0f0;
90
+ border-radius: 8px;
91
+ overflow: hidden;
92
+ position: relative;
93
+ }
94
+
95
+ .draggable {
96
+ position: absolute;
97
+ cursor: move;
98
+ }
99
+
100
+ .modal {
101
+ display: none;
102
+ position: fixed;
103
+ top: 0;
104
+ left: 0;
105
+ width: 100%;
106
+ height: 100%;
107
+ background-color: rgba(0, 0, 0, 0.5);
108
+ z-index: 1000;
109
+ justify-content: center;
110
+ align-items: center;
111
+ }
112
+
113
+ .modal-content {
114
+ background-color: white;
115
+ padding: 20px;
116
+ border-radius: 10px;
117
+ max-width: 500px;
118
+ width: 90%;
119
+ max-height: 90vh;
120
+ overflow-y: auto;
121
+ }
122
+
123
+ .costume-thumbnail {
124
+ width: 80px;
125
+ height: 80px;
126
+ border-radius: 8px;
127
+ background-color: #f0f0f0;
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ margin: 5px;
132
+ cursor: pointer;
133
+ transition: all 0.2s;
134
+ }
135
+
136
+ .costume-thumbnail:hover {
137
+ transform: scale(1.05);
138
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
139
+ }
140
+
141
+ .sound-item {
142
+ padding: 10px;
143
+ border-radius: 8px;
144
+ background-color: #f0f0f0;
145
+ margin: 5px 0;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: space-between;
149
+ }
150
+
151
+ .dragging {
152
+ opacity: 0.5;
153
+ }
154
+
155
+ .dropzone {
156
+ min-height: 100px;
157
+ border: 2px dashed #ccc;
158
+ border-radius: 8px;
159
+ padding: 10px;
160
+ margin: 10px 0;
161
+ text-align: center;
162
+ }
163
+
164
+ .dropzone.highlight {
165
+ border-color: #6e45e2;
166
+ background-color: rgba(110, 69, 226, 0.1);
167
+ }
168
+
169
+ .block-container {
170
+ position: relative;
171
+ margin: 10px 0;
172
+ }
173
+
174
+ .block-connector {
175
+ width: 100%;
176
+ height: 15px;
177
+ background-color: rgba(110, 69, 226, 0.2);
178
+ border-radius: 0 0 8px 8px;
179
+ margin-top: -5px;
180
+ cursor: pointer;
181
+ }
182
+
183
+ .block-connector:hover {
184
+ background-color: rgba(110, 69, 226, 0.4);
185
+ }
186
+
187
+ .block-connector-top {
188
+ width: 100%;
189
+ height: 15px;
190
+ background-color: rgba(110, 69, 226, 0.2);
191
+ border-radius: 8px 8px 0 0;
192
+ margin-bottom: -5px;
193
+ cursor: pointer;
194
+ }
195
+
196
+ .block-connector-top:hover {
197
+ background-color: rgba(110, 69, 226, 0.4);
198
+ }
199
+
200
+ .connected-block {
201
+ margin-top: -10px;
202
+ }
203
+
204
+ .flag-btn {
205
+ position: absolute;
206
+ top: 10px;
207
+ left: 10px;
208
+ z-index: 10;
209
+ background-color: #f9d423;
210
+ color: white;
211
+ width: 40px;
212
+ height: 40px;
213
+ border-radius: 50%;
214
+ display: flex;
215
+ align-items: center;
216
+ justify-content: center;
217
+ cursor: pointer;
218
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
219
+ }
220
+
221
+ .flag-btn:hover {
222
+ transform: scale(1.1);
223
+ }
224
+
225
+ .block-slot {
226
+ background-color: rgba(110, 69, 226, 0.1);
227
+ border-radius: 4px;
228
+ padding: 5px;
229
+ margin: 5px 0;
230
+ min-height: 20px;
231
+ }
232
+
233
+ .block-slot.highlight {
234
+ background-color: rgba(110, 69, 226, 0.3);
235
+ border: 1px dashed #6e45e2;
236
+ }
237
+
238
+ .creator-credit {
239
+ position: fixed;
240
+ bottom: 10px;
241
+ right: 10px;
242
+ background-color: rgba(255, 255, 255, 0.8);
243
+ padding: 5px 10px;
244
+ border-radius: 15px;
245
+ font-size: 12px;
246
+ z-index: 100;
247
+ }
248
+
249
+ .block-options {
250
+ position: absolute;
251
+ top: 100%;
252
+ left: 0;
253
+ background-color: white;
254
+ border-radius: 8px;
255
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
256
+ z-index: 100;
257
+ padding: 10px;
258
+ min-width: 200px;
259
+ display: none;
260
+ }
261
+
262
+ .block-option {
263
+ padding: 8px;
264
+ border-radius: 4px;
265
+ cursor: pointer;
266
+ margin-bottom: 5px;
267
+ }
268
+
269
+ .block-option:hover {
270
+ background-color: #f0f4f8;
271
+ }
272
+
273
+ .block-with-options {
274
+ position: relative;
275
+ }
276
+
277
+ .block-options-container {
278
+ display: none;
279
+ position: absolute;
280
+ top: 0;
281
+ left: 100%;
282
+ background-color: white;
283
+ border-radius: 8px;
284
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
285
+ z-index: 100;
286
+ padding: 10px;
287
+ min-width: 200px;
288
+ }
289
+
290
+ .block-options-container.show {
291
+ display: block;
292
+ }
293
+
294
+ /* New styles for enhanced block selection */
295
+ .block-selection-overlay {
296
+ position: fixed;
297
+ top: 0;
298
+ left: 0;
299
+ width: 100%;
300
+ height: 100%;
301
+ background-color: rgba(0, 0, 0, 0.7);
302
+ z-index: 2000;
303
+ display: flex;
304
+ justify-content: center;
305
+ align-items: center;
306
+ display: none;
307
+ }
308
+
309
+ .block-selection-container {
310
+ background-color: white;
311
+ border-radius: 12px;
312
+ width: 80%;
313
+ max-width: 800px;
314
+ max-height: 80vh;
315
+ overflow-y: auto;
316
+ padding: 20px;
317
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
318
+ }
319
+
320
+ .block-selection-header {
321
+ display: flex;
322
+ justify-content: space-between;
323
+ align-items: center;
324
+ margin-bottom: 20px;
325
+ padding-bottom: 10px;
326
+ border-bottom: 1px solid #eee;
327
+ }
328
+
329
+ .block-selection-title {
330
+ font-size: 1.5rem;
331
+ font-weight: bold;
332
+ color: #6e45e2;
333
+ }
334
+
335
+ .block-selection-close {
336
+ background: none;
337
+ border: none;
338
+ font-size: 1.5rem;
339
+ cursor: pointer;
340
+ color: #666;
341
+ }
342
+
343
+ .block-selection-grid {
344
+ display: grid;
345
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
346
+ gap: 15px;
347
+ }
348
+
349
+ .block-selection-item {
350
+ background-color: #f8f9fa;
351
+ border-radius: 8px;
352
+ padding: 15px;
353
+ cursor: pointer;
354
+ transition: all 0.2s;
355
+ border: 2px solid transparent;
356
+ }
357
+
358
+ .block-selection-item:hover {
359
+ transform: translateY(-3px);
360
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
361
+ border-color: #6e45e2;
362
+ }
363
+
364
+ .block-selection-item.active {
365
+ border-color: #6e45e2;
366
+ background-color: #e9e0ff;
367
+ }
368
+
369
+ .block-selection-icon {
370
+ font-size: 1.5rem;
371
+ margin-bottom: 10px;
372
+ color: #6e45e2;
373
+ }
374
+
375
+ .block-selection-name {
376
+ font-weight: 500;
377
+ margin-bottom: 5px;
378
+ }
379
+
380
+ .block-selection-description {
381
+ font-size: 0.8rem;
382
+ color: #666;
383
+ }
384
+
385
+ .block-selection-footer {
386
+ display: flex;
387
+ justify-content: space-between;
388
+ margin-top: 20px;
389
+ padding-top: 15px;
390
+ border-top: 1px solid #eee;
391
+ }
392
+
393
+ .block-selection-btn {
394
+ padding: 8px 20px;
395
+ border-radius: 6px;
396
+ font-weight: 500;
397
+ cursor: pointer;
398
+ transition: all 0.2s;
399
+ }
400
+
401
+ .block-selection-back {
402
+ background-color: #f0f0f0;
403
+ color: #333;
404
+ }
405
+
406
+ .block-selection-back:hover {
407
+ background-color: #e0e0e0;
408
+ }
409
+
410
+ .block-selection-confirm {
411
+ background-color: #6e45e2;
412
+ color: white;
413
+ }
414
+
415
+ .block-selection-confirm:hover {
416
+ background-color: #5a35d1;
417
+ }
418
+
419
+ /* Category tabs */
420
+ .block-category-tabs {
421
+ display: flex;
422
+ margin-bottom: 15px;
423
+ border-bottom: 1px solid #eee;
424
+ }
425
+
426
+ .block-category-tab {
427
+ padding: 8px 15px;
428
+ margin-right: 5px;
429
+ cursor: pointer;
430
+ border-bottom: 3px solid transparent;
431
+ font-weight: 500;
432
+ color: #666;
433
+ }
434
+
435
+ .block-category-tab.active {
436
+ color: #6e45e2;
437
+ border-bottom-color: #6e45e2;
438
+ }
439
+ </style>
440
+ </head>
441
+ <body class="min-h-screen">
442
+ <!-- Main Layout -->
443
+ <div class="flex flex-col min-h-screen">
444
+ <!-- Header -->
445
+ <header class="gradient-bg text-white shadow-lg">
446
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
447
+ <div class="flex items-center">
448
+ <i class="fas fa-code text-3xl mr-3"></i>
449
+ <h1 class="text-2xl font-bold">TurbONED</h1>
450
+ </div>
451
+ <div class="flex items-center space-x-4">
452
+ <button id="loginBtn" class="bg-white text-purple-600 px-4 py-1 rounded-lg hover:bg-gray-100 transition">Login</button>
453
+ <button id="registerBtn" class="bg-white text-blue-600 px-4 py-1 rounded-lg hover:bg-gray-100 transition">Register</button>
454
+ <div id="userMenu" class="hidden">
455
+ <div class="relative">
456
+ <button class="flex items-center space-x-2 bg-white bg-opacity-20 px-4 py-1 rounded-lg hover:bg-opacity-30 transition">
457
+ <span id="usernameDisplay">User</span>
458
+ <i class="fas fa-chevron-down"></i>
459
+ </button>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </header>
465
+
466
+ <!-- Main Content -->
467
+ <main class="flex-grow container mx-auto px-4 py-6">
468
+ <div class="flex flex-col lg:flex-row gap-6">
469
+ <!-- Left Sidebar - Blocks -->
470
+ <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-4">
471
+ <div class="flex mb-4 border-b pb-2">
472
+ <button onclick="changeTab('blocks')" class="tab-btn active px-4 py-2 font-medium text-purple-600 border-b-2 border-purple-600">Blocks</button>
473
+ <button onclick="changeTab('costumes')" class="tab-btn px-4 py-2 font-medium text-blue-600">Costumes</button>
474
+ <button onclick="changeTab('sounds')" class="tab-btn px-4 py-2 font-medium text-yellow-600">Sounds</button>
475
+ </div>
476
+
477
+ <div id="blocks" class="tab-content active">
478
+ <h3 class="font-bold text-lg mb-3 text-purple-700">Events</h3>
479
+ <div class="block block-with-options" draggable="true" data-type="events" data-block="whenFlag" onclick="showBlockSelection('whenFlag')">
480
+ <div class="flex items-center">
481
+ <div class="w-6 h-6 rounded-full bg-green-500 mr-2"></div>
482
+ <span>when flag clicked</span>
483
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
484
+ </div>
485
+ <div class="block-connector"></div>
486
+ </div>
487
+ <div class="block block-with-options" draggable="true" data-type="events" data-block="whenKey" onclick="showBlockSelection('whenKey')">
488
+ <div class="flex items-center">
489
+ <div class="w-6 h-6 rounded-full bg-green-500 mr-2"></div>
490
+ <span>when key pressed</span>
491
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
492
+ </div>
493
+ <div class="block-connector"></div>
494
+ </div>
495
+
496
+ <h3 class="font-bold text-lg mt-4 mb-3 text-purple-700">Motion</h3>
497
+ <div class="block block-with-options" draggable="true" data-type="motion" data-block="move" onclick="showBlockSelection('move')">
498
+ <div class="flex items-center">
499
+ <div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div>
500
+ <span>move steps</span>
501
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
502
+ </div>
503
+ </div>
504
+ <div class="block block-with-options" draggable="true" data-type="motion" data-block="turn" onclick="showBlockSelection('turn')">
505
+ <div class="flex items-center">
506
+ <div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div>
507
+ <span>turn degrees</span>
508
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
509
+ </div>
510
+ </div>
511
+ <div class="block block-with-options" draggable="true" data-type="motion" data-block="goTo" onclick="showBlockSelection('goTo')">
512
+ <div class="flex items-center">
513
+ <div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div>
514
+ <span>go to position</span>
515
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
516
+ </div>
517
+ </div>
518
+
519
+ <h3 class="font-bold text-lg mt-4 mb-3 text-blue-600">Looks</h3>
520
+ <div class="block block-with-options" draggable="true" data-type="looks" data-block="say" onclick="showBlockSelection('say')">
521
+ <div class="flex items-center">
522
+ <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div>
523
+ <span>say message</span>
524
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
525
+ </div>
526
+ </div>
527
+ <div class="block" draggable="true" data-type="looks" data-block="changeCostume">
528
+ <div class="flex items-center">
529
+ <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div>
530
+ <span>next costume</span>
531
+ </div>
532
+ </div>
533
+ <div class="block block-with-options" draggable="true" data-type="looks" data-block="changeSize" onclick="showBlockSelection('changeSize')">
534
+ <div class="flex items-center">
535
+ <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div>
536
+ <span>change size by</span>
537
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
538
+ </div>
539
+ </div>
540
+
541
+ <h3 class="font-bold text-lg mt-4 mb-3 text-yellow-600">Sound</h3>
542
+ <div class="block block-with-options" draggable="true" data-type="sound" data-block="playSound" onclick="showBlockSelection('playSound')">
543
+ <div class="flex items-center">
544
+ <div class="w-6 h-6 rounded-full bg-yellow-500 mr-2"></div>
545
+ <span>play sound</span>
546
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
547
+ </div>
548
+ </div>
549
+ <div class="block" draggable="true" data-type="sound" data-block="stopSound">
550
+ <div class="flex items-center">
551
+ <div class="w-6 h-6 rounded-full bg-yellow-500 mr-2"></div>
552
+ <span>stop all sounds</span>
553
+ </div>
554
+ </div>
555
+
556
+ <h3 class="font-bold text-lg mt-4 mb-3 text-red-600">Control</h3>
557
+ <div class="block block-with-options" draggable="true" data-type="control" data-block="wait" onclick="showBlockSelection('wait')">
558
+ <div class="flex items-center">
559
+ <div class="w-6 h-6 rounded-full bg-red-500 mr-2"></div>
560
+ <span>wait seconds</span>
561
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
562
+ </div>
563
+ </div>
564
+ <div class="block block-with-options" draggable="true" data-type="control" data-block="repeat" onclick="showBlockSelection('repeat')">
565
+ <div class="flex items-center">
566
+ <div class="w-6 h-6 rounded-full bg-red-500 mr-2"></div>
567
+ <span>repeat times</span>
568
+ <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
569
+ </div>
570
+ <div class="block-slot"></div>
571
+ <div class="block-connector"></div>
572
+ </div>
573
+
574
+ <h3 class="font-bold text-lg mt-4 mb-3 text-indigo-600">Conditionals</h3>
575
+ <div class="block" draggable="true" data-type="control" data-block="if">
576
+ <div class="flex items-center">
577
+ <div class="w-6 h-6 rounded-full bg-indigo-500 mr-2"></div>
578
+ <span>if &lt;condition&gt; then</span>
579
+ </div>
580
+ <div class="block-slot"></div>
581
+ <div class="block-connector"></div>
582
+ </div>
583
+ </div>
584
+
585
+ <div id="costumes" class="tab-content">
586
+ <div class="flex flex-wrap justify-center">
587
+ <div class="costume-thumbnail m-2">
588
+ <i class="fas fa-plus text-2xl text-gray-500"></i>
589
+ </div>
590
+ <div class="costume-thumbnail m-2">
591
+ <i class="fas fa-tshirt text-3xl text-purple-500"></i>
592
+ </div>
593
+ <div class="costume-thumbnail m-2">
594
+ <i class="fas fa-hat-wizard text-3xl text-blue-500"></i>
595
+ </div>
596
+ <div class="costume-thumbnail m-2">
597
+ <i class="fas fa-mask text-3xl text-yellow-500"></i>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <div id="sounds" class="tab-content">
603
+ <button class="w-full bg-gray-200 hover:bg-gray-300 py-2 rounded-lg mb-4">
604
+ <i class="fas fa-plus mr-2"></i> Add Sound
605
+ </button>
606
+ <div class="sound-item">
607
+ <div>
608
+ <i class="fas fa-music mr-2 text-purple-500"></i>
609
+ <span>Pop Sound</span>
610
+ </div>
611
+ <button class="bg-purple-100 text-purple-700 px-3 py-1 rounded-lg hover:bg-purple-200">
612
+ <i class="fas fa-play"></i>
613
+ </button>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Center - Workspace and Stage -->
619
+ <div class="w-full lg:w-2/4 flex flex-col gap-4">
620
+ <div class="workspace p-4" id="workspace">
621
+ <div class="flag-btn" onclick="runScripts()">
622
+ <i class="fas fa-flag"></i>
623
+ </div>
624
+ <p class="text-gray-500 text-center py-10">Drag blocks here to build your script</p>
625
+ </div>
626
+
627
+ <div id="stage" class="w-full h-64 relative">
628
+ <div id="currentSprite" class="draggable" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">
629
+ <i class="fas fa-cat text-4xl text-purple-600"></i>
630
+ </div>
631
+ <button class="absolute bottom-2 right-2 bg-white bg-opacity-80 px-3 py-1 rounded-lg hover:bg-opacity-100">
632
+ <i class="fas fa-image mr-1"></i> Background
633
+ </button>
634
+ </div>
635
+
636
+ <div class="flex justify-center space-x-4">
637
+ <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600" onclick="runScripts()">
638
+ <i class="fas fa-play mr-2"></i> Run
639
+ </button>
640
+ <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600" onclick="stopScripts()">
641
+ <i class="fas fa-stop mr-2"></i> Stop
642
+ </button>
643
+ </div>
644
+ </div>
645
+
646
+ <!-- Right Sidebar - Sprites -->
647
+ <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-4">
648
+ <div class="flex justify-between items-center mb-4">
649
+ <h2 class="font-bold text-lg">Sprites</h2>
650
+ <button class="bg-purple-100 text-purple-700 p-2 rounded-lg hover:bg-purple-200">
651
+ <i class="fas fa-plus"></i>
652
+ </button>
653
+ </div>
654
+
655
+ <div class="grid grid-cols-3 gap-3">
656
+ <div class="sprite bg-purple-100">
657
+ <i class="fas fa-cat text-2xl text-purple-600"></i>
658
+ </div>
659
+ <div class="sprite bg-blue-100">
660
+ <i class="fas fa-dog text-2xl text-blue-600"></i>
661
+ </div>
662
+ <div class="sprite bg-yellow-100">
663
+ <i class="fas fa-user text-2xl text-yellow-600"></i>
664
+ </div>
665
+ </div>
666
+
667
+ <div class="mt-6">
668
+ <div class="flex mb-4 border-b pb-2">
669
+ <button onclick="changeRightTab('properties')" class="tab-btn active px-4 py-2 font-medium text-purple-600 border-b-2 border-purple-600">Properties</button>
670
+ <button onclick="changeRightTab('multiplayer')" class="tab-btn px-4 py-2 font-medium text-blue-600">Multiplayer</button>
671
+ <button onclick="changeRightTab('developers')" class="tab-btn px-4 py-2 font-medium text-yellow-600">Developers</button>
672
+ </div>
673
+
674
+ <div id="properties" class="tab-content active">
675
+ <div class="mb-4">
676
+ <label class="block text-gray-700 mb-1">Sprite Name</label>
677
+ <input type="text" value="Sprite1" class="w-full px-3 py-2 border rounded-lg">
678
+ </div>
679
+ <div class="mb-4">
680
+ <label class="block text-gray-700 mb-1">Position</label>
681
+ <div class="flex space-x-2">
682
+ <input type="number" value="0" class="w-1/2 px-3 py-2 border rounded-lg" placeholder="X">
683
+ <input type="number" value="0" class="w-1/2 px-3 py-2 border rounded-lg" placeholder="Y">
684
+ </div>
685
+ </div>
686
+ <div class="mb-4">
687
+ <label class="block text-gray-700 mb-1">Size</label>
688
+ <input type="range" min="10" max="200" value="100" class="w-full">
689
+ </div>
690
+ <div class="mb-4">
691
+ <label class="block text-gray-700 mb-1">Direction</label>
692
+ <input type="range" min="0" max="360" value="90" class="w-full">
693
+ </div>
694
+ </div>
695
+
696
+ <div id="multiplayer" class="tab-content">
697
+ <div class="text-center py-4">
698
+ <i class="fas fa-users text-4xl text-blue-500 mb-3"></i>
699
+ <h3 class="font-bold text-lg mb-2">Multiplayer VEO1</h3>
700
+ <p class="text-gray-600 mb-4">Connect with friends to code together in real-time</p>
701
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 w-full">
702
+ <i class="fas fa-plug mr-2"></i> Connect
703
+ </button>
704
+ </div>
705
+ </div>
706
+
707
+ <div id="developers" class="tab-content">
708
+ <div class="text-center py-4">
709
+ <i class="fas fa-code text-4xl text-yellow-500 mb-3"></i>
710
+ <h3 class="font-bold text-lg mb-2">TurbONED Developers</h3>
711
+ <div class="bg-yellow-100 p-3 rounded-lg mt-3">
712
+ <div class="font-semibold">Diamond5diamond</div>
713
+ <div class="text-sm text-gray-600">Lead Developer</div>
714
+ </div>
715
+ <p class="text-gray-600 mt-4">TurbONED is developed by a passionate team of coders who love creative programming.</p>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ </main>
722
+
723
+ <!-- Footer -->
724
+ <footer class="gradient-bg text-white py-4">
725
+ <div class="container mx-auto px-4 text-center">
726
+ <p>&copy; 2023 TurbONED - A creative coding platform</p>
727
+ <div class="flex justify-center space-x-4 mt-2">
728
+ <a href="#" class="hover:text-gray-200"><i class="fab fa-twitter"></i></a>
729
+ <a href="#" class="hover:text-gray-200"><i class="fab fa-github"></i></a>
730
+ <a href="#" class="hover:text-gray-200"><i class="fab fa-discord"></i></a>
731
+ </div>
732
+ </div>
733
+ </footer>
734
+ </div>
735
+
736
+ <!-- Block Selection Overlay -->
737
+ <div class="block-selection-overlay" id="blockSelectionOverlay">
738
+ <div class="block-selection-container">
739
+ <div class="block-selection-header">
740
+ <div class="block-selection-title" id="blockSelectionTitle">Select Block Options</div>
741
+ <button class="block-selection-close" onclick="hideBlockSelection()">&times;</button>
742
+ </div>
743
+
744
+ <div class="block-category-tabs" id="blockCategoryTabs">
745
+ <div class="block-category-tab active" data-category="all">All</div>
746
+ <div class="block-category-tab" data-category="motion">Motion</div>
747
+ <div class="block-category-tab" data-category="looks">Looks</div>
748
+ <div class="block-category-tab" data-category="sound">Sound</div>
749
+ <div class="block-category-tab" data-category="control">Control</div>
750
+ </div>
751
+
752
+ <div class="block-selection-grid" id="blockSelectionGrid">
753
+ <!-- Blocks will be inserted here dynamically -->
754
+ </div>
755
+
756
+ <div class="block-selection-footer">
757
+ <button class="block-selection-btn block-selection-back" onclick="goBackInSelection()">
758
+ <i class="fas fa-arrow-left mr-2"></i> Back
759
+ </button>
760
+ <button class="block-selection-btn block-selection-confirm" onclick="confirmBlockSelection()">
761
+ Confirm Selection
762
+ </button>
763
+ </div>
764
+ </div>
765
+ </div>
766
+
767
+ <div class="creator-credit">
768
+ Created by Google Veo Generation
769
+ </div>
770
+
771
+ <script>
772
+ // Global variables
773
+ let currentUser = null;
774
+ let isRunning = false;
775
+ let activeScripts = [];
776
+ let draggedBlock = null;
777
+ let activeBlock = null;
778
+ let blockInstances = new Set();
779
+ let currentBlockType = null;
780
+ let selectedBlockOption = null;
781
+ let selectionHistory = [];
782
+
783
+ // Block options data
784
+ const blockOptions = {
785
+ whenFlag: [
786
+ { name: "All Blocks", value: "all", description: "Execute all connected blocks", icon: "fa-code" },
787
+ { name: "Motion Blocks", value: "motion", description: "Execute only motion blocks", icon: "fa-arrows-alt" },
788
+ { name: "Looks Blocks", value: "looks", description: "Execute only looks blocks", icon: "fa-eye" },
789
+ { name: "Sound Blocks", value: "sound", description: "Execute only sound blocks", icon: "fa-music" },
790
+ { name: "Control Blocks", value: "control", description: "Execute only control blocks", icon: "fa-cogs" }
791
+ ],
792
+ whenKey: [
793
+ { name: "Space", value: "space", description: "Trigger when space key is pressed", icon: "fa-keyboard" },
794
+ { name: "Up Arrow", value: "up", description: "Trigger when up arrow is pressed", icon: "fa-arrow-up" },
795
+ { name: "Down Arrow", value: "down", description: "Trigger when down arrow is pressed", icon: "fa-arrow-down" },
796
+ { name: "Left Arrow", value: "left", description: "Trigger when left arrow is pressed", icon: "fa-arrow-left" },
797
+ { name: "Right Arrow", value: "right", description: "Trigger when right arrow is pressed", icon: "fa-arrow-right" }
798
+ ],
799
+ move: [
800
+ { name: "10 Steps", value: "10", description: "Move forward 10 steps", icon: "fa-arrow-right" },
801
+ { name: "20 Steps", value: "20", description: "Move forward 20 steps", icon: "fa-arrow-right" },
802
+ { name: "50 Steps", value: "50", description: "Move forward 50 steps", icon: "fa-arrow-right" },
803
+ { name: "100 Steps", value: "100", description: "Move forward 100 steps", icon: "fa-arrow-right" },
804
+ { name: "10 Steps Back", value: "-10", description: "Move backward 10 steps", icon: "fa-arrow-left" },
805
+ { name: "20 Steps Back", value: "-20", description: "Move backward 20 steps", icon: "fa-arrow-left" },
806
+ { name: "50 Steps Back", value: "-50", description: "Move backward 50 steps", icon: "fa-arrow-left" }
807
+ ],
808
+ turn: [
809
+ { name: "15 Degrees Right", value: "15", description: "Turn 15 degrees to the right", icon: "fa-redo" },
810
+ { name: "30 Degrees Right", value: "30", description: "Turn 30 degrees to the right", icon: "fa-redo" },
811
+ { name: "45 Degrees Right", value: "45", description: "Turn 45 degrees to the right", icon: "fa-redo" },
812
+ { name: "90 Degrees Right", value: "90", description: "Turn 90 degrees to the right", icon: "fa-redo" },
813
+ { name: "15 Degrees Left", value: "-15", description: "Turn 15 degrees to the left", icon: "fa-undo" },
814
+ { name: "30 Degrees Left", value: "-30", description: "Turn 30 degrees to the left", icon: "fa-undo" }
815
+ ],
816
+ goTo: [
817
+ { name: "Random Position", value: "random", description: "Go to a random position on stage", icon: "fa-random" },
818
+ { name: "Mouse Pointer", value: "mouse", description: "Go to current mouse position", icon: "fa-mouse-pointer" },
819
+ { name: "Center", value: "center", description: "Go to center of stage", icon: "fa-crosshairs" }
820
+ ],
821
+ say: [
822
+ { name: "Hello!", value: "Hello!", description: "Say 'Hello!' for 2 seconds", icon: "fa-comment" },
823
+ { name: "Hi there!", value: "Hi there!", description: "Say 'Hi there!' for 2 seconds", icon: "fa-comment" },
824
+ { name: "Welcome!", value: "Welcome!", description: "Say 'Welcome!' for 2 seconds", icon: "fa-comment" }
825
+ ],
826
+ changeSize: [
827
+ { name: "Increase by 10", value: "10", description: "Increase size by 10%", icon: "fa-search-plus" },
828
+ { name: "Increase by 20", value: "20", description: "Increase size by 20%", icon: "fa-search-plus" },
829
+ { name: "Increase by 50", value: "50", description: "Increase size by 50%", icon: "fa-search-plus" },
830
+ { name: "Decrease by 10", value: "-10", description: "Decrease size by 10%", icon: "fa-search-minus" }
831
+ ],
832
+ playSound: [
833
+ { name: "Pop Sound", value: "pop", description: "Play the pop sound effect", icon: "fa-volume-up" },
834
+ { name: "Drum Sound", value: "drum", description: "Play the drum sound effect", icon: "fa-drum" },
835
+ { name: "Bell Sound", value: "bell", description: "Play the bell sound effect", icon: "fa-bell" }
836
+ ],
837
+ wait: [
838
+ { name: "1 Second", value: "1", description: "Wait for 1 second", icon: "fa-clock" },
839
+ { name: "2 Seconds", value: "2", description: "Wait for 2 seconds", icon: "fa-clock" },
840
+ { name: "5 Seconds", value: "5", description: "Wait for 5 seconds", icon: "fa-clock" }
841
+ ],
842
+ repeat: [
843
+ { name: "5 Times", value: "5", description: "Repeat 5 times", icon: "fa-sync" },
844
+ { name: "10 Times", value: "10", description: "Repeat 10 times", icon: "fa-sync" },
845
+ { name: "20 Times", value: "20", description: "Repeat 20 times", icon: "fa-sync" }
846
+ ]
847
+ };
848
+
849
+ // Initialize the app
850
+ document.addEventListener('DOMContentLoaded', function() {
851
+ // Setup block options
852
+ setupBlockOptions();
853
+
854
+ // Make all initial blocks draggable
855
+ const blocks = document.querySelectorAll('[draggable="true"]');
856
+ blocks.forEach(block => {
857
+ setupBlockDrag(block);
858
+ });
859
+
860
+ // Setup workspace drop zone
861
+ const workspace = document.getElementById('workspace');
862
+ workspace.addEventListener('dragover', function(e) {
863
+ e.preventDefault();
864
+ this.classList.add('bg-gray-100');
865
+ });
866
+
867
+ workspace.addEventListener('dragleave', function() {
868
+ this.classList.remove('bg-gray-100');
869
+ });
870
+
871
+ workspace.addEventListener('drop', function(e) {
872
+ e.preventDefault();
873
+ this.classList.remove('bg-gray-100');
874
+
875
+ if (draggedBlock) {
876
+ // Generate unique ID for the block
877
+ const blockId = 'block-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
878
+
879
+ const newBlock = draggedBlock.cloneNode(true);
880
+ newBlock.id = blockId;
881
+ newBlock.style.position = 'absolute';
882
+ newBlock.style.left = (e.clientX - this.getBoundingClientRect().left - 50) + 'px';
883
+ newBlock.style.top = (e.clientY - this.getBoundingClientRect().top - 20) + 'px';
884
+ newBlock.style.margin = '0';
885
+
886
+ // Check if this block already exists in workspace
887
+ if (!blockInstances.has(blockId)) {
888
+ this.appendChild(newBlock);
889
+ blockInstances.add(blockId);
890
+ setupBlockDrag(newBlock);
891
+ setupBlockConnectors(newBlock);
892
+ setupBlockClick(newBlock);
893
+
894
+ // Remove "Drag blocks here" message if it exists
895
+ const message = this.querySelector('p.text-center');
896
+ if (message) {
897
+ message.remove();
898
+ }
899
+ }
900
+ }
901
+ });
902
+
903
+ // Make sprites draggable on stage
904
+ const sprite = document.getElementById('currentSprite');
905
+ makeDraggable(sprite);
906
+
907
+ // Setup click events for blocks in workspace
908
+ document.querySelectorAll('#workspace .block').forEach(block => {
909
+ setupBlockClick(block);
910
+ });
911
+
912
+ // Setup category tabs
913
+ document.querySelectorAll('.block-category-tab').forEach(tab => {
914
+ tab.addEventListener('click', function() {
915
+ document.querySelectorAll('.block-category-tab').forEach(t => {
916
+ t.classList.remove('active');
917
+ });
918
+ this.classList.add('active');
919
+
920
+ const category = this.getAttribute('data-category');
921
+ filterBlocksByCategory(category);
922
+ });
923
+ });
924
+ });
925
+
926
+ // Show block selection overlay
927
+ function showBlockSelection(blockType) {
928
+ currentBlockType = blockType;
929
+ selectionHistory = [];
930
+
931
+ const overlay = document.getElementById('blockSelectionOverlay');
932
+ const title = document.getElementById('blockSelectionTitle');
933
+ const grid = document.getElementById('blockSelectionGrid');
934
+
935
+ // Set title based on block type
936
+ switch(blockType) {
937
+ case 'whenFlag':
938
+ title.textContent = "When Flag Clicked - Select Blocks to Execute";
939
+ break;
940
+ case 'whenKey':
941
+ title.textContent = "When Key Pressed - Select Key";
942
+ break;
943
+ case 'move':
944
+ title.textContent = "Move Steps - Select Distance";
945
+ break;
946
+ case 'turn':
947
+ title.textContent = "Turn Degrees - Select Angle";
948
+ break;
949
+ case 'goTo':
950
+ title.textContent = "Go To - Select Position";
951
+ break;
952
+ case 'say':
953
+ title.textContent = "Say Message - Select Text";
954
+ break;
955
+ case 'changeSize':
956
+ title.textContent = "Change Size - Select Amount";
957
+ break;
958
+ case 'playSound':
959
+ title.textContent = "Play Sound - Select Sound";
960
+ break;
961
+ case 'wait':
962
+ title.textContent = "Wait - Select Duration";
963
+ break;
964
+ case 'repeat':
965
+ title.textContent = "Repeat - Select Times";
966
+ break;
967
+ default:
968
+ title.textContent = "Select Options";
969
+ }
970
+
971
+ // Clear the grid
972
+ grid.innerHTML = '';
973
+
974
+ // Add blocks to the grid
975
+ if (blockOptions[blockType]) {
976
+ blockOptions[blockType].forEach(option => {
977
+ const blockItem = document.createElement('div');
978
+ blockItem.className = 'block-selection-item';
979
+ blockItem.setAttribute('data-value', option.value);
980
+ blockItem.innerHTML = `
981
+ <div class="block-selection-icon">
982
+ <i class="fas ${option.icon}"></i>
983
+ </div>
984
+ <div class="block-selection-name">${option.name}</div>
985
+ <div class="block-selection-description">${option.description}</div>
986
+ `;
987
+
988
+ blockItem.addEventListener('click', function() {
989
+ document.querySelectorAll('.block-selection-item').forEach(item => {
990
+ item.classList.remove('active');
991
+ });
992
+ this.classList.add('active');
993
+ selectedBlockOption = this.getAttribute('data-value');
994
+ });
995
+
996
+ grid.appendChild(blockItem);
997
+ });
998
+ }
999
+
1000
+ // Show the overlay
1001
+ overlay.style.display = 'flex';
1002
+ }
1003
+
1004
+ // Hide block selection overlay
1005
+ function hideBlockSelection() {
1006
+ document.getElementById('blockSelectionOverlay').style.display = 'none';
1007
+ currentBlockType = null;
1008
+ selectedBlockOption = null;
1009
+ }
1010
+
1011
+ // Confirm block selection
1012
+ function confirmBlockSelection() {
1013
+ if (selectedBlockOption && activeBlock) {
1014
+ const blockText = activeBlock.querySelector('span');
1015
+
1016
+ switch(currentBlockType) {
1017
+ case 'whenFlag':
1018
+ if (selectedBlockOption === 'all') {
1019
+ blockText.textContent = 'when flag clicked (all blocks)';
1020
+ } else {
1021
+ blockText.textContent = `when flag clicked (${selectedBlockOption} blocks)`;
1022
+ }
1023
+ break;
1024
+ case 'whenKey':
1025
+ blockText.textContent = `when ${selectedBlockOption} pressed`;
1026
+ break;
1027
+ case 'move':
1028
+ if (selectedBlockOption.startsWith('-')) {
1029
+ blockText.textContent = `move ${selectedBlockOption.substring(1)} steps back`;
1030
+ } else {
1031
+ blockText.textContent = `move ${selectedBlockOption} steps`;
1032
+ }
1033
+ break;
1034
+ case 'turn':
1035
+ if (selectedBlockOption.startsWith('-')) {
1036
+ blockText.textContent = `turn ${selectedBlockOption.substring(1)} degrees left`;
1037
+ } else {
1038
+ blockText.textContent = `turn ${selectedBlockOption} degrees right`;
1039
+ }
1040
+ break;
1041
+ case 'goTo':
1042
+ blockText.textContent = `go to ${selectedBlockOption}`;
1043
+ break;
1044
+ case 'say':
1045
+ blockText.textContent = `say ${selectedBlockOption} for 2 seconds`;
1046
+ break;
1047
+ case 'changeSize':
1048
+ blockText.textContent = `change size by ${selectedBlockOption}`;
1049
+ break;
1050
+ case 'playSound':
1051
+ blockText.textContent = `play sound ${selectedBlockOption}`;
1052
+ break;
1053
+ case 'wait':
1054
+ blockText.textContent = `wait ${selectedBlockOption} second${selectedBlockOption !== '1' ? 's' : ''}`;
1055
+ break;
1056
+ case 'repeat':
1057
+ blockText.textContent = `repeat ${selectedBlockOption} times`;
1058
+ break;
1059
+ }
1060
+ }
1061
+
1062
+ hideBlockSelection();
1063
+ }
1064
+
1065
+ // Go back in selection
1066
+ function goBackInSelection() {
1067
+ // In this simple implementation, just hide the selection
1068
+ hideBlockSelection();
1069
+ }
1070
+
1071
+ // Filter blocks by category
1072
+ function filterBlocksByCategory(category) {
1073
+ if (category === 'all') {
1074
+ document.querySelectorAll('.block-selection-item').forEach(item => {
1075
+ item.style.display = 'block';
1076
+ });
1077
+ return;
1078
+ }
1079
+
1080
+ document.querySelectorAll('.block-selection-item').forEach(item => {
1081
+ // In a real implementation, you would filter based on actual categories
1082
+ // For now, we'll just show all items
1083
+ item.style.display = 'block';
1084
+ });
1085
+ }
1086
+
1087
+ // Setup block options functionality
1088
+ function setupBlockOptions() {
1089
+ document.querySelectorAll('.block-with-options').forEach(block => {
1090
+ const optionsBtn = block.querySelector('.fa-chevron-down');
1091
+ const blockType = block.getAttribute('data-block');
1092
+
1093
+ optionsBtn.addEventListener('click', function(e) {
1094
+ e.stopPropagation();
1095
+ activeBlock = block;
1096
+ showBlockSelection(blockType);
1097
+ });
1098
+ });
1099
+ }
1100
+
1101
+ // Setup block drag functionality
1102
+ function setupBlockDrag(block) {
1103
+ block.addEventListener('dragstart', function(e) {
1104
+ draggedBlock = this;
1105
+ this.classList.add('dragging');
1106
+ e.dataTransfer.setData('text/plain', this.outerHTML);
1107
+ });
1108
+
1109
+ block.addEventListener('dragend', function() {
1110
+ this.classList.remove('dragging');
1111
+ draggedBlock = null;
1112
+ });
1113
+ }
1114
+
1115
+ // Setup block click functionality
1116
+ function setupBlockClick(block) {
1117
+ block.addEventListener('click', function(e) {
1118
+ // Don't activate if we're clicking on options
1119
+ if (e.target.closest('.block-options') || e.target.classList.contains('fa-chevron-down')) {
1120
+ return;
1121
+ }
1122
+
1123
+ // Deactivate previous active block
1124
+ if (activeBlock) {
1125
+ activeBlock.classList.remove('active');
1126
+ }
1127
+
1128
+ // Activate this block
1129
+ this.classList.add('active');
1130
+ activeBlock = this;
1131
+
1132
+ // Execute the block's action
1133
+ const blockType = this.getAttribute('data-block');
1134
+ executeBlock(blockType, this);
1135
+ });
1136
+ }
1137
+
1138
+ // Setup block connectors
1139
+ function setupBlockConnectors(block) {
1140
+ // Setup bottom connector
1141
+ const connector = block.querySelector('.block-connector');
1142
+ if (connector) {
1143
+ connector.addEventListener('dragover', function(e) {
1144
+ e.preventDefault();
1145
+ this.style.backgroundColor = 'rgba(110, 69, 226, 0.4)';
1146
+ });
1147
+
1148
+ connector.addEventListener('dragleave', function() {
1149
+ this.style.backgroundColor = 'rgba(110, 69, 226, 0.2)';
1150
+ });
1151
+
1152
+ connector.addEventListener('drop', function(e) {
1153
+ e.preventDefault();
1154
+ this.style.backgroundColor = 'rgba(110, 69, 226, 0.2)';
1155
+
1156
+ if (draggedBlock) {
1157
+ // Generate unique ID for the block
1158
+ const blockId = 'block-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
1159
+
1160
+ const newBlock = draggedBlock.cloneNode(true);
1161
+ newBlock.id = blockId;
1162
+ newBlock.classList.add('connected-block');
1163
+ newBlock.style.position = 'relative';
1164
+ newBlock.style.left = '0';
1165
+ newBlock.style.top = '0';
1166
+ newBlock.style.margin = '0';
1167
+
1168
+ // Check if this block already exists in workspace
1169
+ if (!blockInstances.has(blockId)) {
1170
+ // Insert after the current block
1171
+ block.parentNode.insertBefore(newBlock, block.nextSibling);
1172
+ blockInstances.add(blockId);
1173
+
1174
+ // Setup drag for the new block
1175
+ setupBlockDrag(newBlock);
1176
+
1177
+ // Setup connectors for the new block
1178
+ setupBlockConnectors(newBlock);
1179
+
1180
+ // Setup click for the new block
1181
+ setupBlockClick(newBlock);
1182
+ }
1183
+ }
1184
+ });
1185
+ }
1186
+
1187
+ // Setup block slots (for if, repeat, etc.)
1188
+ const slots = block.querySelectorAll('.block-slot');
1189
+ slots.forEach(slot => {
1190
+ slot.addEventListener('dragover', function(e) {
1191
+ e.preventDefault();
1192
+ this.classList.add('highlight');
1193
+ });
1194
+
1195
+ slot.addEventListener('dragleave', function() {
1196
+ this.classList.remove('highlight');
1197
+ });
1198
+
1199
+ slot.addEventListener('drop', function(e) {
1200
+ e.preventDefault();
1201
+ this.classList.remove('highlight');
1202
+
1203
+ if (draggedBlock) {
1204
+ // Generate unique ID for the block
1205
+ const blockId = 'block-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
1206
+
1207
+ const newBlock = draggedBlock.cloneNode(true);
1208
+ newBlock.id = blockId;
1209
+ newBlock.style.position = 'relative';
1210
+ newBlock.style.left = '0';
1211
+ newBlock.style.top = '0';
1212
+ newBlock.style.margin = '5px 0';
1213
+
1214
+ // Check if this block already exists in workspace
1215
+ if (!blockInstances.has(blockId)) {
1216
+ // Clear the slot and add the new block
1217
+ this.innerHTML = '';
1218
+ this.appendChild(newBlock);
1219
+ blockInstances.add(blockId);
1220
+
1221
+ // Setup drag for the new block
1222
+ setupBlockDrag(newBlock);
1223
+
1224
+ // Setup connectors for the new block
1225
+ setupBlockConnectors(newBlock);
1226
+
1227
+ // Setup click for the new block
1228
+ setupBlockClick(newBlock);
1229
+ }
1230
+ }
1231
+ });
1232
+ });
1233
+ }
1234
+
1235
+ // Make elements draggable
1236
+ function makeDraggable(element) {
1237
+ let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
1238
+
1239
+ element.onmousedown = dragMouseDown;
1240
+
1241
+ function dragMouseDown(e) {
1242
+ e = e || window.event;
1243
+ e.preventDefault();
1244
+
1245
+ // Get the mouse cursor position at startup
1246
+ pos3 = e.clientX;
1247
+ pos4 = e.clientY;
1248
+
1249
+ document.onmouseup = closeDragElement;
1250
+ document.onmousemove = elementDrag;
1251
+ }
1252
+
1253
+ function elementDrag(e) {
1254
+ e = e || window.event;
1255
+ e.preventDefault();
1256
+
1257
+ // Calculate the new cursor position
1258
+ pos1 = pos3 - e.clientX;
1259
+ pos2 = pos4 - e.clientY;
1260
+ pos3 = e.clientX;
1261
+ pos4 = e.clientY;
1262
+
1263
+ // Set the element's new position
1264
+ element.style.top = (element.offsetTop - pos2) + "px";
1265
+ element.style.left = (element.offsetLeft - pos1) + "px";
1266
+ }
1267
+
1268
+ function closeDragElement() {
1269
+ // Stop moving when mouse button is released
1270
+ document.onmouseup = null;
1271
+ document.onmousemove = null;
1272
+ }
1273
+ }
1274
+
1275
+ // Tab functionality
1276
+ function changeTab(tabName) {
1277
+ document.querySelectorAll('.tab-btn').forEach(btn => {
1278
+ btn.classList.remove('active');
1279
+ btn.classList.remove('border-b-2');
1280
+ btn.classList.remove('border-purple-600');
1281
+ });
1282
+
1283
+ document.querySelectorAll('.tab-content').forEach(content => {
1284
+ content.classList.remove('active');
1285
+ });
1286
+
1287
+ event.target.classList.add('active');
1288
+ event.target.classList.add('border-b-2');
1289
+ event.target.classList.add('border-purple-600');
1290
+ document.getElementById(tabName).classList.add('active');
1291
+ }
1292
+
1293
+ function changeRightTab(tabName) {
1294
+ document.querySelectorAll('#properties, #multiplayer, #developers').forEach(tab => {
1295
+ tab.classList.remove('active');
1296
+ });
1297
+
1298
+ document.querySelectorAll('.tab-btn').forEach(btn => {
1299
+ btn.classList.remove('active');
1300
+ btn.classList.remove('border-b-2');
1301
+ btn.classList.remove('border-purple-600');
1302
+ });
1303
+
1304
+ event.target.classList.add('active');
1305
+ event.target.classList.add('border-b-2');
1306
+ event.target.classList.add('border-purple-600');
1307
+ document.getElementById(tabName).classList.add('active');
1308
+ }
1309
+
1310
+ // Script execution functions
1311
+ function runScripts() {
1312
+ if (isRunning) {
1313
+ stopScripts();
1314
+ }
1315
+
1316
+ isRunning = true;
1317
+ activeScripts = [];
1318
+
1319
+ // Find all "when flag clicked" blocks in workspace
1320
+ const flagBlocks = document.querySelectorAll('#workspace [data-block="whenFlag"]');
1321
+
1322
+ flagBlocks.forEach(block => {
1323
+ const script = [];
1324
+ let currentBlock = block;
1325
+
1326
+ // Collect all connected blocks below the flag block
1327
+ while (currentBlock) {
1328
+ script.push(currentBlock);
1329
+
1330
+ // Check if there's a block connected below
1331
+ const nextBlock = currentBlock.nextElementSibling;
1332
+ if (nextBlock && nextBlock.classList.contains('connected-block')) {
1333
+ currentBlock = nextBlock;
1334
+ } else {
1335
+ currentBlock = null;
1336
+ }
1337
+ }
1338
+
1339
+ if (script.length > 0) {
1340
+ activeScripts.push(script);
1341
+ }
1342
+ });
1343
+
1344
+ // Execute all collected scripts
1345
+ activeScripts.forEach(script => {
1346
+ executeScript(script);
1347
+ });
1348
+ }
1349
+
1350
+ function stopScripts() {
1351
+ isRunning = false;
1352
+ activeScripts = [];
1353
+
1354
+ // Reset sprite position to center
1355
+ const sprite = document.getElementById('currentSprite');
1356
+ sprite.style.left = '50%';
1357
+ sprite.style.top = '50%';
1358
+ sprite.style.transform = 'translate(-50%, -50%)';
1359
+
1360
+ // Remove active state from all blocks
1361
+ document.querySelectorAll('.block.active').forEach(block => {
1362
+ block.classList.remove('active');
1363
+ });
1364
+ activeBlock = null;
1365
+ }
1366
+
1367
+ function executeScript(script) {
1368
+ if (!isRunning) return;
1369
+
1370
+ let delay = 0;
1371
+
1372
+ script.forEach((block, index) => {
1373
+ const blockType = block.getAttribute('data-block');
1374
+
1375
+ setTimeout(() => {
1376
+ if (!isRunning) return;
1377
+
1378
+ // Highlight the current executing block
1379
+ block.classList.add('active');
1380
+ setTimeout(() => {
1381
+ block.classList.remove('active');
1382
+ }, 500);
1383
+
1384
+ // Execute the block's action
1385
+ executeBlock(blockType, block);
1386
+
1387
+ }, delay);
1388
+
1389
+ // Add delay between blocks (1 second by default)
1390
+ delay += 1000;
1391
+ });
1392
+ }
1393
+
1394
+ function executeBlock(blockType, blockElement) {
1395
+ const sprite = document.getElementById('currentSprite');
1396
+ let value = '';
1397
+
1398
+ // Get the selected value from the block if it has options
1399
+ if (blockElement) {
1400
+ const blockText = blockElement.querySelector('span').textContent;
1401
+
1402
+ switch(blockType) {
1403
+ case 'whenFlag':
1404
+ value = blockText.match(/when flag clicked \((.*)\)/)?.[1] || 'all';
1405
+ // In a full implementation, this would filter which blocks to execute
1406
+ break;
1407
+ case 'whenKey':
1408
+ value = blockText.match(/when (.*) pressed/)[1];
1409
+ break;
1410
+ case 'move':
1411
+ const moveMatch = blockText.match(/move (.*) steps( back)?/);
1412
+ value = moveMatch[2] ? '-' + moveMatch[1] : moveMatch[1];
1413
+ break;
1414
+ case 'turn':
1415
+ const turnMatch = blockText.match(/turn (.*) degrees( left)?/);
1416
+ value = turnMatch[2] ? '-' + turnMatch[1] : turnMatch[1];
1417
+ break;
1418
+ case 'goTo':
1419
+ value = blockText.match(/go to (.*)/)[1];
1420
+ break;
1421
+ case 'say':
1422
+ value = blockText.match(/say (.*) for/)[1];
1423
+ break;
1424
+ case 'changeSize':
1425
+ value = blockText.match(/change size by (.*)/)[1];
1426
+ break;
1427
+ case 'playSound':
1428
+ value = blockText.match(/play sound (.*)/)[1];
1429
+ break;
1430
+ case 'wait':
1431
+ value = blockText.match(/wait (.*) second/)[1];
1432
+ break;
1433
+ case 'repeat':
1434
+ value = blockText.match(/repeat (.*) times/)[1];
1435
+ break;
1436
+ }
1437
+ }
1438
+
1439
+ switch(blockType) {
1440
+ case 'whenFlag':
1441
+ // This is just a trigger, no action needed
1442
+ break;
1443
+
1444
+ case 'afterThis':
1445
+ // This is just a connector, no action needed
1446
+ break;
1447
+
1448
+ case 'move':
1449
+ const currentLeft = parseInt(sprite.style.left || '50%');
1450
+ sprite.style.left = (currentLeft + parseInt(value)) + 'px';
1451
+ break;
1452
+
1453
+ case 'turn':
1454
+ const currentRotation = parseInt(sprite.style.transform.replace(/[^0-9\-]/g, '') || '0');
1455
+ sprite.style.transform = `translate(-50%, -50%) rotate(${currentRotation + parseInt(value)}deg)`;
1456
+ break;
1457
+
1458
+ case 'goTo':
1459
+ const stage = document.getElementById('stage');
1460
+ const stageRect = stage.getBoundingClientRect();
1461
+
1462
+ if (value === 'random') {
1463
+ const randomX = Math.floor(Math.random() * (stageRect.width - 50));
1464
+ const randomY = Math.floor(Math.random() * (stageRect.height - 50));
1465
+ sprite.style.left = randomX + 'px';
1466
+ sprite.style.top = randomY + 'px';
1467
+ } else if (value === 'center') {
1468
+ sprite.style.left = '50%';
1469
+ sprite.style.top = '50%';
1470
+ sprite.style.transform = 'translate(-50%, -50%)';
1471
+ }
1472
+ break;
1473
+
1474
+ case 'say':
1475
+ // In a real implementation, this would show a speech bubble
1476
+ alert(value);
1477
+ break;
1478
+
1479
+ case 'changeCostume':
1480
+ // Cycle through costumes
1481
+ const currentIcon = sprite.querySelector('i');
1482
+ if (currentIcon) {
1483
+ if (currentIcon.classList.contains('fa-cat')) {
1484
+ currentIcon.className = 'fas fa-dog text-4xl text-blue-600';
1485
+ } else if (currentIcon.classList.contains('fa-dog')) {
1486
+ currentIcon.className = 'fas fa-user text-4xl text-yellow-600';
1487
+ } else {
1488
+ currentIcon.className = 'fas fa-cat text-4xl text-purple-600';
1489
+ }
1490
+ }
1491
+ break;
1492
+
1493
+ case 'changeSize':
1494
+ const currentSize = parseInt(sprite.style.fontSize || '40');
1495
+ sprite.style.fontSize = (currentSize + parseInt(value)) + 'px';
1496
+ break;
1497
+
1498
+ case 'playSound':
1499
+ // In a real implementation, this would play the actual sound
1500
+ console.log('Playing sound:', value);
1501
+ alert(`Playing ${value} sound`);
1502
+ break;
1503
+
1504
+ case 'stopSound':
1505
+ // In a real implementation, this would stop all sounds
1506
+ console.log('Stopping all sounds');
1507
+ break;
1508
+
1509
+ case 'wait':
1510
+ // The delay is already handled by the script execution
1511
+ break;
1512
+
1513
+ case 'repeat':
1514
+ // In a full implementation, this would repeat the nested blocks
1515
+ break;
1516
+
1517
+ case 'whenKey':
1518
+ // This is just a trigger, no action needed
1519
+ break;
1520
+
1521
+ case 'if':
1522
+ // In a full implementation, this would check condition and execute nested blocks
1523
+ break;
1524
+ }
1525
+ }
1526
+ </script>
1527
+ <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=DeepSiteOptional/turboned-developent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1528
+ </html>
prompts.txt ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ сделай копию scratch которая называется TurbONED чтобы был фиолетово-голубо-желтый интерфейс градиенский чтобы можно было перетаскивать блоки в workspace чтобы можно было добавлять спрайты на + и систему входа и выхода и регистрации с помощью обнаруживанием клавиатуры и еще была дополнительная вкладка multiplayer VEO1 была вкладка разработчики и там был ник Diamond5diamond и еще были костюмы которые работают и можно было добавить свой и еще звуки в которых можно было добавить mp3 и еще систему фонов
2
+ сделай новые блоки чтобы можно было сделать после этого и когда флажок нажат
3
+ сделай чтобы блок наполнался другим и блоки в воркспайс можно перемищать и напиши created by google Veo generation и еще сделай так чтобы можно вставлять в разные блоки другие
4
+ сделай так чтобы когда нажимал на блок в workspace то он активировал этот блок и он работал и светился желто-красным и персонаж двигался и убери баг с дублированием и сделай систему чтобы когда ты тыкал на блок с которым можно сделать что то дополнительное то там можно будет выбрать блок внутри
5
+ сделай у степов чтобы было еще назад и еще убери дублирование блоков и еще сделай у когда фложок нажат там тоже можно было выбрать прямо все блоки
6
+ сделай еще чтобы интерфейс выбора перекрывал все блоки
7
+ сделай так чтобы когда ты впервые зашел в кладку multiplayer то тебе нужно зарегестрироватся и сделай так чтобы можно было добавить все блоки на сайте в любых блогах где можно что-то выбрать и называлась вкладка multiple