Hugging Face's logo

Spaces:
HI7RAI
/
anycoder-71db9dcc
Running

App Files Community
HI7RAI commited on
Commit
dbe0094
·
verified ·
1 Parent(s): 8d84458

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1083 -19
index.html CHANGED
@@ -1,19 +1,1083 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Live ScriptForge IDE</title>
7
+
8
+ <!-- Icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <!-- Modern Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Fira+Code:wght@300;400;500;600&display=swap" rel="stylesheet">
13
+
14
+ <!-- CodeMirror -->
15
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
16
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">
17
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/hint/show-hint.min.css">
18
+
19
+ <style>
20
+ :root {
21
+ --bg: #08090d;
22
+ --panel: #0d0f14;
23
+ --panel-alt: #12151c;
24
+ --accent: #22d3ee;
25
+ --accent-secondary: #f472b6;
26
+ --accent-tertiary: #a78bfa;
27
+ --text: #e2e8f0;
28
+ --text-muted: #64748b;
29
+ --border: rgba(34, 211, 238, 0.15);
30
+ --border-strong: rgba(34, 211, 238, 0.3);
31
+ --success: #34d399;
32
+ --warning: #fbbf24;
33
+ --error: #f87171;
34
+ --glass: rgba(13, 15, 20, 0.9);
35
+ }
36
+
37
+ * {
38
+ margin: 0;
39
+ padding: 0;
40
+ box-sizing: border-box;
41
+ }
42
+
43
+ body {
44
+ font-family: 'Space Grotesk', sans-serif;
45
+ background: var(--bg);
46
+ color: var(--text);
47
+ height: 100vh;
48
+ display: flex;
49
+ flex-direction: column;
50
+ overflow: hidden;
51
+ }
52
+
53
+ /* Background Pattern */
54
+ body::before {
55
+ content: '';
56
+ position: fixed;
57
+ top: 0;
58
+ left: 0;
59
+ right: 0;
60
+ bottom: 0;
61
+ background:
62
+ radial-gradient(ellipse at 20% 20%, rgba(34, 211, 238, 0.08) 0%, transparent 50%),
63
+ radial-gradient(ellipse at 80% 80%, rgba(167, 139, 250, 0.06) 0%, transparent 50%),
64
+ radial-gradient(ellipse at 50% 50%, rgba(244, 114, 182, 0.04) 0%, transparent 60%);
65
+ pointer-events: none;
66
+ z-index: 0;
67
+ }
68
+
69
+ /* --- Header --- */
70
+ header {
71
+ background: linear-gradient(180deg, rgba(13, 15, 20, 0.98), rgba(13, 15, 20, 0.95));
72
+ padding: 12px 20px;
73
+ display: flex;
74
+ justify-content: space-between;
75
+ align-items: center;
76
+ border-bottom: 1px solid var(--border);
77
+ backdrop-filter: blur(20px);
78
+ z-index: 100;
79
+ position: relative;
80
+ }
81
+
82
+ .brand {
83
+ display: flex;
84
+ align-items: center;
85
+ gap: 12px;
86
+ }
87
+
88
+ .brand-icon {
89
+ width: 36px;
90
+ height: 36px;
91
+ background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
92
+ border-radius: 8px;
93
+ display: flex;
94
+ align-items: center;
95
+ justify-content: center;
96
+ font-size: 1rem;
97
+ color: #000;
98
+ box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3);
99
+ animation: iconFloat 3s ease-in-out infinite;
100
+ }
101
+
102
+ @keyframes iconFloat {
103
+ 0%, 100% { transform: translateY(0); }
104
+ 50% { transform: translateY(-3px); }
105
+ }
106
+
107
+ .brand h1 {
108
+ font-size: 1.1rem;
109
+ font-weight: 700;
110
+ letter-spacing: -0.5px;
111
+ }
112
+
113
+ .brand h1 span {
114
+ background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
115
+ -webkit-background-clip: text;
116
+ -webkit-text-fill-color: transparent;
117
+ background-clip: text;
118
+ }
119
+
120
+ .header-center {
121
+ display: flex;
122
+ gap: 8px;
123
+ align-items: center;
124
+ }
125
+
126
+ .url-input-wrapper {
127
+ position: relative;
128
+ display: flex;
129
+ align-items: center;
130
+ }
131
+
132
+ input[type="text"],
133
+ input[type="number"] {
134
+ background: rgba(0, 0, 0, 0.4);
135
+ border: 1px solid var(--border);
136
+ color: var(--text);
137
+ padding: 10px 14px;
138
+ border-radius: 8px;
139
+ font-family: 'Fira Code', monospace;
140
+ font-size: 0.85rem;
141
+ outline: none;
142
+ transition: all 0.25s ease;
143
+ }
144
+
145
+ input[type="text"]:focus,
146
+ input[type="number"]:focus {
147
+ border-color: var(--accent);
148
+ box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15), inset 0 0 20px rgba(34, 211, 238, 0.05);
149
+ }
150
+
151
+ input::placeholder {
152
+ color: var(--text-muted);
153
+ }
154
+
155
+ /* Buttons */
156
+ button {
157
+ background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(34, 211, 238, 0.05));
158
+ color: var(--accent);
159
+ border: 1px solid var(--border-strong);
160
+ padding: 10px 18px;
161
+ border-radius: 8px;
162
+ font-weight: 600;
163
+ cursor: pointer;
164
+ transition: all 0.25s ease;
165
+ font-size: 0.8rem;
166
+ font-family: 'Space Grotesk', sans-serif;
167
+ display: inline-flex;
168
+ align-items: center;
169
+ gap: 8px;
170
+ text-transform: uppercase;
171
+ letter-spacing: 0.5px;
172
+ }
173
+
174
+ button:hover {
175
+ background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
176
+ color: #000;
177
+ transform: translateY(-2px);
178
+ box-shadow: 0 8px 25px rgba(34, 211, 238, 0.25);
179
+ border-color: transparent;
180
+ }
181
+
182
+ button:active {
183
+ transform: translateY(0);
184
+ }
185
+
186
+ button.primary {
187
+ background: linear-gradient(135deg, var(--accent), #06b6d4);
188
+ color: #000;
189
+ border: none;
190
+ font-weight: 700;
191
+ }
192
+
193
+ button.primary:hover {
194
+ box-shadow: 0 8px 30px rgba(34, 211, 238, 0.4);
195
+ }
196
+
197
+ button.danger {
198
+ background: rgba(248, 113, 113, 0.1);
199
+ color: var(--error);
200
+ border-color: rgba(248, 113, 113, 0.3);
201
+ }
202
+
203
+ button.danger:hover {
204
+ background: var(--error);
205
+ color: #000;
206
+ border-color: transparent;
207
+ }
208
+
209
+ button.small {
210
+ padding: 6px 12px;
211
+ font-size: 0.7rem;
212
+ }
213
+
214
+ button.icon-only {
215
+ padding: 10px;
216
+ min-width: 40px;
217
+ justify-content: center;
218
+ }
219
+
220
+ .header-right {
221
+ display: flex;
222
+ align-items: center;
223
+ gap: 12px;
224
+ }
225
+
226
+ .status-badge {
227
+ display: flex;
228
+ align-items: center;
229
+ gap: 6px;
230
+ font-size: 0.75rem;
231
+ color: var(--text-muted);
232
+ padding: 6px 12px;
233
+ background: rgba(0, 0, 0, 0.3);
234
+ border-radius: 20px;
235
+ border: 1px solid var(--border);
236
+ }
237
+
238
+ .status-dot {
239
+ width: 8px;
240
+ height: 8px;
241
+ border-radius: 50%;
242
+ background: var(--success);
243
+ animation: statusPulse 2s ease-in-out infinite;
244
+ }
245
+
246
+ .status-dot.editing {
247
+ background: var(--warning);
248
+ }
249
+
250
+ @keyframes statusPulse {
251
+ 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
252
+ 50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
253
+ }
254
+
255
+ /* --- Main Layout --- */
256
+ main {
257
+ display: flex;
258
+ flex: 1;
259
+ height: calc(100vh - 60px);
260
+ position: relative;
261
+ z-index: 1;
262
+ }
263
+
264
+ /* Resizer */
265
+ .resizer {
266
+ width: 5px;
267
+ background: var(--border);
268
+ cursor: col-resize;
269
+ transition: background 0.2s;
270
+ position: relative;
271
+ z-index: 10;
272
+ display: flex;
273
+ align-items: center;
274
+ justify-content: center;
275
+ }
276
+
277
+ .resizer:hover,
278
+ .resizer.dragging {
279
+ background: var(--accent);
280
+ }
281
+
282
+ .resizer::after {
283
+ content: '';
284
+ width: 2px;
285
+ height: 30px;
286
+ background: var(--text-muted);
287
+ border-radius: 2px;
288
+ opacity: 0.5;
289
+ }
290
+
291
+ /* Editor Side */
292
+ .editor-container {
293
+ width: 50%;
294
+ display: flex;
295
+ flex-direction: column;
296
+ background: var(--panel);
297
+ min-width: 300px;
298
+ }
299
+
300
+ .panel-header {
301
+ padding: 12px 16px;
302
+ background: var(--panel-alt);
303
+ border-bottom: 1px solid var(--border);
304
+ display: flex;
305
+ justify-content: space-between;
306
+ align-items: center;
307
+ }
308
+
309
+ .panel-title {
310
+ display: flex;
311
+ align-items: center;
312
+ gap: 8px;
313
+ font-size: 0.75rem;
314
+ text-transform: uppercase;
315
+ letter-spacing: 1.5px;
316
+ color: var(--text-muted);
317
+ font-weight: 600;
318
+ }
319
+
320
+ .panel-title i {
321
+ color: var(--accent);
322
+ }
323
+
324
+ .panel-actions {
325
+ display: flex;
326
+ gap: 6px;
327
+ }
328
+
329
+ /* Injection Panel */
330
+ .injection-panel {
331
+ padding: 12px 16px;
332
+ background: linear-gradient(90deg, rgba(34, 211, 238, 0.05), rgba(167, 139, 250, 0.05));
333
+ border-bottom: 1px solid var(--border);
334
+ display: flex;
335
+ gap: 12px;
336
+ align-items: center;
337
+ flex-wrap: wrap;
338
+ }
339
+
340
+ .injection-panel .label {
341
+ font-size: 0.75rem;
342
+ color: var(--text-muted);
343
+ font-family: 'Fira Code', monospace;
344
+ text-transform: uppercase;
345
+ letter-spacing: 1px;
346
+ }
347
+
348
+ .injection-group {
349
+ display: flex;
350
+ align-items: center;
351
+ gap: 6px;
352
+ }
353
+
354
+ .injection-panel input[type="number"] {
355
+ width: 70px;
356
+ padding: 8px 10px;
357
+ text-align: center;
358
+ }
359
+
360
+ /* CodeMirror Customization */
361
+ .CodeMirror {
362
+ flex: 1;
363
+ height: auto !important;
364
+ font-family: 'Fira Code', monospace;
365
+ font-size: 13px;
366
+ line-height: 1.6;
367
+ background: var(--panel) !important;
368
+ }
369
+
370
+ .CodeMirror-gutters {
371
+ background: rgba(0, 0, 0, 0.3) !important;
372
+ border-right: 1px solid var(--border) !important;
373
+ }
374
+
375
+ .CodeMirror-linenumber {
376
+ color: var(--text-muted) !important;
377
+ }
378
+
379
+ .injected-line {
380
+ background: rgba(34, 211, 238, 0.1) !important;
381
+ animation: injectFlash 1s ease-out;
382
+ }
383
+
384
+ @keyframes injectFlash {
385
+ 0% { background: rgba(34, 211, 238, 0.3) !important; }
386
+ 100% { background: rgba(34, 211, 238, 0.1) !important; }
387
+ }
388
+
389
+ /* Preview Side */
390
+ .preview-container {
391
+ width: 50%;
392
+ position: relative;
393
+ background: #000;
394
+ display: flex;
395
+ flex-direction: column;
396
+ min-width: 300px;
397
+ }
398
+
399
+ .preview-header {
400
+ padding: 12px 16px;
401
+ background: var(--panel-alt);
402
+ border-bottom: 1px solid var(--border);
403
+ display: flex;
404
+ justify-content: space-between;
405
+ align-items: center;
406
+ }
407
+
408
+ .device-selector {
409
+ display: flex;
410
+ gap: 4px;
411
+ background: rgba(0, 0, 0, 0.3);
412
+ padding: 4px;
413
+ border-radius: 6px;
414
+ }
415
+
416
+ .device-btn {
417
+ padding: 6px 10px;
418
+ font-size: 0.7rem;
419
+ background: transparent;
420
+ border: none;
421
+ color: var(--text-muted);
422
+ cursor: pointer;
423
+ border-radius: 4px;
424
+ transition: all 0.2s;
425
+ }
426
+
427
+ .device-btn:hover,
428
+ .device-btn.active {
429
+ background: rgba(34, 211, 238, 0.15);
430
+ color: var(--accent);
431
+ }
432
+
433
+ .preview-frame-wrapper {
434
+ flex: 1;
435
+ position: relative;
436
+ display: flex;
437
+ align-items: center;
438
+ justify-content: center;
439
+ background: repeating-conic-gradient(#1a1a1a 0% 25%, #111 0% 50%) 50% / 20px 20px;
440
+ overflow: hidden;
441
+ }
442
+
443
+ .preview-frame-wrapper.responsive {
444
+ padding: 20px;
445
+ }
446
+
447
+ .preview-frame-wrapper.responsive iframe {
448
+ max-width: 100%;
449
+ max-height: 100%;
450
+ border-radius: 8px;
451
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
452
+ }
453
+
454
+ iframe {
455
+ width: 100%;
456
+ height: 100%;
457
+ border: none;
458
+ background: #fff;
459
+ }
460
+
461
+ /* Overlay Tools */
462
+ .overlay-tools {
463
+ position: absolute;
464
+ bottom: 20px;
465
+ right: 20px;
466
+ display: flex;
467
+ gap: 8px;
468
+ background: var(--glass);
469
+ padding: 10px;
470
+ border-radius: 10px;
471
+ backdrop-filter: blur(15px);
472
+ border: 1px solid var(--border);
473
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
474
+ }
475
+
476
+ .overlay-tools button {
477
+ padding: 8px 14px;
478
+ font-size: 0.7rem;
479
+ }
480
+
481
+ /* Console Panel */
482
+ .console-panel {
483
+ background: var(--panel);
484
+ border-top: 1px solid var(--border);
485
+ max-height: 200px;
486
+ overflow: hidden;
487
+ display: flex;
488
+ flex-direction: column;
489
+ transition: max-height 0.3s ease;
490
+ }
491
+
492
+ .console-panel.collapsed {
493
+ max-height: 36px;
494
+ }
495
+
496
+ .console-header {
497
+ padding: 8px 16px;
498
+ background: var(--panel-alt);
499
+ display: flex;
500
+ justify-content: space-between;
501
+ align-items: center;
502
+ cursor: pointer;
503
+ user-select: none;
504
+ }
505
+
506
+ .console-title {
507
+ font-size: 0.7rem;
508
+ text-transform: uppercase;
509
+ letter-spacing: 1px;
510
+ color: var(--text-muted);
511
+ display: flex;
512
+ align-items: center;
513
+ gap: 8px;
514
+ }
515
+
516
+ .console-count {
517
+ background: var(--accent);
518
+ color: #000;
519
+ padding: 2px 6px;
520
+ border-radius: 10px;
521
+ font-size: 0.65rem;
522
+ font-weight: 700;
523
+ }
524
+
525
+ .console-output {
526
+ flex: 1;
527
+ overflow-y: auto;
528
+ padding: 10px;
529
+ font-family: 'Fira Code', monospace;
530
+ font-size: 0.8rem;
531
+ }
532
+
533
+ .console-line {
534
+ padding: 4px 8px;
535
+ border-radius: 4px;
536
+ margin-bottom: 4px;
537
+ display: flex;
538
+ align-items: flex-start;
539
+ gap: 8px;
540
+ }
541
+
542
+ .console-line.log {
543
+ background: rgba(255, 255, 255, 0.03);
544
+ color: var(--text);
545
+ }
546
+
547
+ .console-line.error {
548
+ background: rgba(248, 113, 113, 0.1);
549
+ color: var(--error);
550
+ border-left: 2px solid var(--error);
551
+ }
552
+
553
+ .console-line.warn {
554
+ background: rgba(251, 191, 36, 0.1);
555
+ color: var(--warning);
556
+ border-left: 2px solid var(--warning);
557
+ }
558
+
559
+ .console-line .timestamp {
560
+ color: var(--text-muted);
561
+ font-size: 0.7rem;
562
+ min-width: 60px;
563
+ }
564
+
565
+ /* Notification Toast */
566
+ .notification {
567
+ position: fixed;
568
+ bottom: 24px;
569
+ left: 24px;
570
+ background: var(--glass);
571
+ border: 1px solid var(--border);
572
+ padding: 14px 20px;
573
+ border-radius: 10px;
574
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
575
+ backdrop-filter: blur(20px);
576
+ transform: translateX(-150%);
577
+ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
578
+ z-index: 1000;
579
+ display: flex;
580
+ align-items: center;
581
+ gap: 12px;
582
+ font-size: 0.85rem;
583
+ max-width: 350px;
584
+ }
585
+
586
+ .notification.show {
587
+ transform: translateX(0);
588
+ }
589
+
590
+ .notification-icon {
591
+ width: 32px;
592
+ height: 32px;
593
+ border-radius: 8px;
594
+ display: flex;
595
+ align-items: center;
596
+ justify-content: center;
597
+ font-size: 0.9rem;
598
+ }
599
+
600
+ .notification.success .notification-icon {
601
+ background: rgba(52, 211, 153, 0.2);
602
+ color: var(--success);
603
+ }
604
+
605
+ .notification.error .notification-icon {
606
+ background: rgba(248, 113, 113, 0.2);
607
+ color: var(--error);
608
+ }
609
+
610
+ .notification.warning .notification-icon {
611
+ background: rgba(251, 191, 36, 0.2);
612
+ color: var(--warning);
613
+ }
614
+
615
+ .notification.info .notification-icon {
616
+ background: rgba(34, 211, 238, 0.2);
617
+ color: var(--accent);
618
+ }
619
+
620
+ /* Templates Modal */
621
+ .modal-overlay {
622
+ position: fixed;
623
+ top: 0;
624
+ left: 0;
625
+ right: 0;
626
+ bottom: 0;
627
+ background: rgba(0, 0, 0, 0.8);
628
+ backdrop-filter: blur(5px);
629
+ display: flex;
630
+ align-items: center;
631
+ justify-content: center;
632
+ z-index: 1000;
633
+ opacity: 0;
634
+ visibility: hidden;
635
+ transition: all 0.3s ease;
636
+ }
637
+
638
+ .modal-overlay.show {
639
+ opacity: 1;
640
+ visibility: visible;
641
+ }
642
+
643
+ .modal {
644
+ background: var(--panel);
645
+ border: 1px solid var(--border);
646
+ border-radius: 16px;
647
+ width: 90%;
648
+ max-width: 600px;
649
+ max-height: 80vh;
650
+ overflow: hidden;
651
+ transform: scale(0.9) translateY(20px);
652
+ transition: transform 0.3s ease;
653
+ }
654
+
655
+ .modal-overlay.show .modal {
656
+ transform: scale(1) translateY(0);
657
+ }
658
+
659
+ .modal-header {
660
+ padding: 20px 24px;
661
+ border-bottom: 1px solid var(--border);
662
+ display: flex;
663
+ justify-content: space-between;
664
+ align-items: center;
665
+ }
666
+
667
+ .modal-header h2 {
668
+ font-size: 1.1rem;
669
+ font-weight: 600;
670
+ }
671
+
672
+ .modal-body {
673
+ padding: 20px;
674
+ overflow-y: auto;
675
+ max-height: calc(80vh - 140px);
676
+ }
677
+
678
+ .template-grid {
679
+ display: grid;
680
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
681
+ gap: 12px;
682
+ }
683
+
684
+ .template-card {
685
+ background: var(--panel-alt);
686
+ border: 1px solid var(--border);
687
+ border-radius: 10px;
688
+ padding: 16px;
689
+ cursor: pointer;
690
+ transition: all 0.25s ease;
691
+ }
692
+
693
+ .template-card:hover {
694
+ border-color: var(--accent);
695
+ transform: translateY(-2px);
696
+ box-shadow: 0 8px 25px rgba(34, 211, 238, 0.15);
697
+ }
698
+
699
+ .template-card h3 {
700
+ font-size: 0.9rem;
701
+ margin-bottom: 6px;
702
+ color: var(--text);
703
+ }
704
+
705
+ .template-card p {
706
+ font-size: 0.75rem;
707
+ color: var(--text-muted);
708
+ }
709
+
710
+ /* Keyboard Shortcuts Hint */
711
+ .shortcuts-hint {
712
+ position: fixed;
713
+ bottom: 24px;
714
+ right: 24px;
715
+ font-size: 0.7rem;
716
+ color: var(--text-muted);
717
+ background: var(--glass);
718
+ padding: 8px 12px;
719
+ border-radius: 6px;
720
+ border: 1px solid var(--border);
721
+ opacity: 0.6;
722
+ transition: opacity 0.2s;
723
+ }
724
+
725
+ .shortcuts-hint:hover {
726
+ opacity: 1;
727
+ }
728
+
729
+ .shortcuts-hint kbd {
730
+ background: rgba(0, 0, 0, 0.3);
731
+ padding: 2px 6px;
732
+ border-radius: 4px;
733
+ margin: 0 2px;
734
+ font-family: 'Fira Code', monospace;
735
+ }
736
+
737
+ /* Attribution Link */
738
+ .attribution-link {
739
+ font-size: 0.75rem;
740
+ color: var(--text-muted);
741
+ text-decoration: none;
742
+ padding: 4px 10px;
743
+ border-radius: 4px;
744
+ transition: color 0.2s;
745
+ border: 1px solid transparent;
746
+ }
747
+
748
+ .attribution-link:hover {
749
+ color: var(--accent);
750
+ border-color: var(--border);
751
+ }
752
+
753
+ /* Responsive */
754
+ @media (max-width: 1024px) {
755
+ .header-center {
756
+ display: none;
757
+ }
758
+
759
+ main {
760
+ flex-direction: column;
761
+ }
762
+
763
+ .editor-container,
764
+ .preview-container {
765
+ width: 100% !important;
766
+ height: 50%;
767
+ min-width: unset;
768
+ }
769
+
770
+ .resizer {
771
+ display: none;
772
+ }
773
+
774
+ .shortcuts-hint {
775
+ display: none;
776
+ }
777
+ }
778
+
779
+ @media (max-width: 600px) {
780
+ header {
781
+ padding: 10px 12px;
782
+ }
783
+
784
+ .brand h1 {
785
+ font-size: 0.9rem;
786
+ }
787
+
788
+ .injection-panel {
789
+ padding: 10px;
790
+ gap: 8px;
791
+ }
792
+
793
+ .injection-panel input[type="number"] {
794
+ width: 55px;
795
+ padding: 6px 8px;
796
+ }
797
+
798
+ .overlay-tools {
799
+ bottom: 10px;
800
+ right: 10px;
801
+ padding: 8px;
802
+ }
803
+ }
804
+
805
+ /* Scrollbar */
806
+ ::-webkit-scrollbar {
807
+ width: 8px;
808
+ height: 8px;
809
+ }
810
+
811
+ ::-webkit-scrollbar-track {
812
+ background: transparent;
813
+ }
814
+
815
+ ::-webkit-scrollbar-thumb {
816
+ background: var(--border);
817
+ border-radius: 4px;
818
+ }
819
+
820
+ ::-webkit-scrollbar-thumb:hover {
821
+ background: var(--border-strong);
822
+ }
823
+ </style>
824
+ </head>
825
+ <body>
826
+ <header>
827
+ <div class="brand">
828
+ <div class="brand-icon">
829
+ <i class="fa-solid fa-bolt"></i>
830
+ </div>
831
+ <h1><span>ScriptForge</span> IDE</h1>
832
+ </div>
833
+
834
+ <div class="header-center">
835
+ <div class="url-input-wrapper">
836
+ <input type="text" id="targetUrl" placeholder="URL zum Mergen eingeben..." style="width: 280px;">
837
+ </div>
838
+ <button id="fetchBtn" class="primary">
839
+ <i class="fa-solid fa-code-merge"></i> Merge
840
+ </button>
841
+ </div>
842
+
843
+ <div class="header-right">
844
+ <button id="templatesBtn" class="small" title="Templates">
845
+ <i class="fa-solid fa-folder-open"></i>
846
+ </button>
847
+ <button id="refreshBtn" title="Aktualisieren">
848
+ <i class="fa-solid fa-play"></i> Run
849
+ </button>
850
+ <div class="status-badge">
851
+ <div class="status-dot" id="statusDot"></div>
852
+ <span id="statusText">Bereit</span>
853
+ </div>
854
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="attribution-link">
855
+ Built with anycoder
856
+ </a>
857
+ </div>
858
+ </header>
859
+
860
+ <main>
861
+ <!-- Editor Side -->
862
+ <div class="editor-container" id="editorPanel">
863
+ <div class="panel-header">
864
+ <div class="panel-title">
865
+ <i class="fa-solid fa-code"></i>
866
+ Editor
867
+ </div>
868
+ <div class="panel-actions">
869
+ <button class="small icon-only" id="formatBtn" title="Formatieren">
870
+ <i class="fa-solid fa-align-left"></i>
871
+ </button>
872
+ <button class="small icon-only" id="clearBtn" title="Löschen">
873
+ <i class="fa-solid fa-trash"></i>
874
+ </button>
875
+ </div>
876
+ </div>
877
+
878
+ <div class="injection-panel">
879
+ <span class="label">Injection Position:</span>
880
+ <div class="injection-group">
881
+ <input type="number" id="injectLine" value="10" min="1">
882
+ <span class="label">Line</span>
883
+ </div>
884
+ <button id="injectBtn" class="small">
885
+ <i class="fa-solid fa-code-branch"></i> Inject
886
+ </button>
887
+ </div>
888
+
889
+ <div id="codeEditor" style="flex: 1; overflow: hidden;"></div>
890
+
891
+ <div class="console-panel" id="consolePanel">
892
+ <div class="console-header" id="consoleToggle">
893
+ <div class="console-title">
894
+ <i class="fa-solid fa-terminal"></i>
895
+ Console
896
+ <span class="console-count" id="logCount">0</span>
897
+ </div>
898
+ <i class="fa-solid fa-chevron-down"></i>
899
+ </div>
900
+ <div class="console-output" id="consoleOutput">
901
+ <!-- Logs go here -->
902
+ </div>
903
+ </div>
904
+ </div>
905
+
906
+ <!-- Resizer -->
907
+ <div class="resizer" id="resizer"></div>
908
+
909
+ <!-- Preview Side -->
910
+ <div class="preview-container" id="previewPanel">
911
+ <div class="preview-header">
912
+ <div class="panel-title">
913
+ <i class="fa-solid fa-desktop"></i>
914
+ Preview
915
+ </div>
916
+ <div class="device-selector">
917
+ <button class="device-btn active" data-device="desktop"><i class="fa-solid fa-desktop"></i></button>
918
+ <button class="device-btn" data-device="tablet"><i class="fa-solid fa-tablet-screen-button"></i></button>
919
+ <button class="device-btn" data-device="mobile"><i class="fa-solid fa-mobile-screen-button"></i></button>
920
+ </div>
921
+ </div>
922
+
923
+ <div class="preview-frame-wrapper responsive" id="previewWrapper">
924
+ <iframe id="previewFrame" sandbox="allow-scripts allow-same-origin allow-modals"></iframe>
925
+ </div>
926
+
927
+ <div class="overlay-tools">
928
+ <button id="downloadBtn" title="Download HTML">
929
+ <i class="fa-solid fa-download"></i>
930
+ </button>
931
+ <button id="shareBtn" title="Share">
932
+ <i class="fa-solid fa-share-nodes"></i>
933
+ </button>
934
+ </div>
935
+ </div>
936
+ </main>
937
+
938
+ <!-- Templates Modal -->
939
+ <div class="modal-overlay" id="templatesModal">
940
+ <div class="modal">
941
+ <div class="modal-header">
942
+ <h2><i class="fa-solid fa-folder-tree"></i> Templates wählen</h2>
943
+ <button class="icon-only" id="closeModalBtn" style="background: transparent; border: none; color: var(--text-muted);">
944
+ <i class="fa-solid fa-xmark"></i>
945
+ </button>
946
+ </div>
947
+ <div class="modal-body">
948
+ <div class="template-grid">
949
+ <div class="template-card" data-template="hello">
950
+ <h3>Hello World</h3>
951
+ <p>Basis Script für Konsolenausgabe.</p>
952
+ </div>
953
+ <div class="template-card" data-template="dom-manip">
954
+ <h3>DOM Manipulation</h3>
955
+ <p>Elemente ändern und Styling hinzufügen.</p>
956
+ </div>
957
+ <div class="template-card" data-template="api-fetch">
958
+ <h3>API Fetch</h3>
959
+ <p>Daten von einer externen API laden.</p>
960
+ </div>
961
+ <div class="template-card" data-template="style-inject">
962
+ <h3>CSS Injection</h3>
963
+ <p>Neues Stylesheet in die Seite injizieren.</p>
964
+ </div>
965
+ </div>
966
+ </div>
967
+ </div>
968
+ </div>
969
+
970
+ <!-- Notification Toast -->
971
+ <div class="notification" id="notification">
972
+ <div class="notification-icon">
973
+ <i class="fa-solid fa-check"></i>
974
+ </div>
975
+ <span class="notification-text">Action completed successfully!</span>
976
+ </div>
977
+
978
+ <div class="shortcuts-hint">
979
+ <kbd>Ctrl</kbd> + <kbd>Enter</kbd> Run &nbsp;|&nbsp; <kbd>Ctrl</kbd> + <kbd>S</kbd> Save
980
+ </div>
981
+
982
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
983
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/xml/xml.min.js"></script>
984
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>
985
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/css/css.min.js"></script>
986
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
987
+
988
+ <script>
989
+ // --- Initialization ---
990
+ const editor = CodeMirror(document.getElementById('codeEditor'), {
991
+ mode: 'htmlmixed',
992
+ theme: 'dracula',
993
+ lineNumbers: true,
994
+ lineWrapping: true,
995
+ autoCloseTags: true,
996
+ autoCloseBrackets: true,
997
+ value: `<!-- ScriptForge Initialisiert -->\n<script>\n console.log("ScriptForge bereit!");\n document.body.style.background = '#f0f0f0';\n<\/script>\n\n<div style="padding: 20px; font-family: sans-serif;">\n <h1>Hallo Welt!</h1>\n <p>Dies ist eine Vorschau deines injizierten Codes.</p>\n <button onclick="alert('Klick registriert!')">Test Button</button>\n</div>`
998
+ });
999
+
1000
+ // --- State Management ---
1001
+ const state = {
1002
+ logs: [],
1003
+ isConsoleOpen: true
1004
+ };
1005
+
1006
+ // --- DOM Elements ---
1007
+ const resizer = document.getElementById('resizer');
1008
+ const editorPanel = document.getElementById('editorPanel');
1009
+ const previewPanel = document.getElementById('previewPanel');
1010
+ const previewFrame = document.getElementById('previewFrame');
1011
+ const consolePanel = document.getElementById('consolePanel');
1012
+ const consoleOutput = document.getElementById('consoleOutput');
1013
+ const logCountEl = document.getElementById('logCount');
1014
+ const notification = document.getElementById('notification');
1015
+
1016
+ // --- Resize Logic ---
1017
+ let isResizing = false;
1018
+
1019
+ resizer.addEventListener('mousedown', (e) => {
1020
+ isResizing = true;
1021
+ resizer.classList.add('dragging');
1022
+ document.body.style.cursor = 'col-resize';
1023
+ document.body.style.userSelect = 'none';
1024
+ });
1025
+
1026
+ document.addEventListener('mousemove', (e) => {
1027
+ if (!isResizing) return;
1028
+ const containerWidth = document.querySelector('main').offsetWidth;
1029
+ const newWidth = (e.clientX / containerWidth) * 100;
1030
+
1031
+ if (newWidth > 20 && newWidth < 80) {
1032
+ editorPanel.style.width = `${newWidth}%`;
1033
+ previewPanel.style.width = `${100 - newWidth}%`;
1034
+ }
1035
+ });
1036
+
1037
+ document.addEventListener('mouseup', () => {
1038
+ isResizing = false;
1039
+ resizer.classList.remove('dragging');
1040
+ document.body.style.cursor = 'default';
1041
+ document.body.style.userSelect = 'auto';
1042
+ });
1043
+
1044
+ // --- Console Logic ---
1045
+ function addLog(type, message) {
1046
+ const timestamp = new Date().toLocaleTimeString();
1047
+ const logLine = document.createElement('div');
1048
+ logLine.className = `console-line ${type}`;
1049
+ logLine.innerHTML = `<span class="timestamp">${timestamp}</span> <span>${message}</span>`;
1050
+ consoleOutput.appendChild(logLine);
1051
+ consoleOutput.scrollTop = consoleOutput.scrollHeight;
1052
+
1053
+ state.logs.push({ type, message, timestamp });
1054
+ logCountEl.textContent = state.logs.length;
1055
+
1056
+ // Update status
1057
+ const statusDot = document.getElementById('statusDot');
1058
+ const statusText = document.getElementById('statusText');
1059
+ if(type === 'error') {
1060
+ statusDot.style.background = 'var(--error)';
1061
+ statusText.textContent = 'Fehler';
1062
+ } else {
1063
+ statusDot.style.background = 'var(--success)';
1064
+ statusText.textContent = 'Aktiv';
1065
+ }
1066
+ }
1067
+
1068
+ // Intercept console.log in iframe
1069
+ function updatePreview() {
1070
+ const code = editor.getValue();
1071
+ const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
1072
+
1073
+ // Create a proxy for console
1074
+ const consoleProxy = `
1075
+ <script>
1076
+ (function() {
1077
+ const originalLog = console.log;
1078
+ const originalError = console.error;
1079
+ const originalWarn = console.warn;
1080
+
1081
+ function sendToParent(type, args) {
1082
+ const message = Array.from(args).map(arg =>
1083
+ typeof arg === 'object' ? JSON.stringify(arg) : String(arg