Hugging Face's logo

Spaces:
Superwolff
/
anycoder-96fb55be
Running

App Files Community
Superwolff commited on
Commit
3e26322
·
verified ·
1 Parent(s): 08da966

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1307 -1241
index.html CHANGED
@@ -1,1252 +1,1318 @@
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>CodeForge — Personal IDE</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
8
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
- <style>
10
- :root {
11
- --bg-primary: #0d1117;
12
- --bg-secondary: #161b22;
13
- --bg-tertiary: #1c2333;
14
- --bg-hover: #1f2937;
15
- --bg-active: #253040;
16
- --border: #30363d;
17
- --border-light: #3d4450;
18
- --text-primary: #e6edf3;
19
- --text-secondary: #8b949e;
20
- --text-muted: #6e7681;
21
- --accent: #58a6ff;
22
- --accent-hover: #79b8ff;
23
- --accent-dim: rgba(88,166,255,0.15);
24
- --green: #3fb950;
25
- --green-dim: rgba(63,185,80,0.15);
26
- --yellow: #d29922;
27
- --yellow-dim: rgba(210,153,34,0.15);
28
- --red: #f85149;
29
- --red-dim: rgba(248,81,73,0.15);
30
- --purple: #bc8cff;
31
- --purple-dim: rgba(188,140,255,0.15);
32
- --orange: #f0883e;
33
- --orange-dim: rgba(240,136,62,0.15);
34
- --cyan: #39d2c0;
35
- --cyan-dim: rgba(57,210,192,0.15);
36
- --sidebar-width: 260px;
37
- --activitybar-width: 48px;
38
- --statusbar-height: 24px;
39
- --tabbar-height: 38px;
40
- --breadcrumb-height: 26px;
41
- --terminal-height: 200px;
42
- }
43
-
44
- * { margin: 0; padding: 0; box-sizing: border-box; }
45
-
46
- body {
47
- font-family: 'Inter', sans-serif;
48
- background: var(--bg-primary);
49
- color: var(--text-primary);
50
- overflow: hidden;
51
- height: 100vh;
52
- width: 100vw;
53
- }
54
-
55
- ::-webkit-scrollbar { width: 8px; height: 8px; }
56
- ::-webkit-scrollbar-track { background: transparent; }
57
- ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
58
- ::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
59
- ::-webkit-scrollbar-corner { background: transparent; }
60
-
61
- .app { display: flex; flex-direction: column; height: 100vh; }
62
-
63
- /* ===== TITLE BAR ===== */
64
- .titlebar {
65
- display: flex;
66
- align-items: center;
67
- justify-content: space-between;
68
- height: 32px;
69
- background: var(--bg-secondary);
70
- border-bottom: 1px solid var(--border);
71
- padding: 0 12px;
72
- -webkit-app-region: drag;
73
- flex-shrink: 0;
74
- }
75
-
76
- .titlebar-left {
77
- display: flex;
78
- align-items: center;
79
- gap: 12px;
80
- font-size: 12px;
81
- color: var(--text-secondary);
82
- }
83
-
84
- .titlebar-left .logo {
85
- display: flex;
86
- align-items: center;
87
- gap: 6px;
88
- font-weight: 600;
89
- color: var(--accent);
90
- font-size: 13px;
91
- }
92
-
93
- .titlebar-left .logo i { font-size: 14px; }
94
-
95
- .titlebar-center {
96
- font-size: 11px;
97
- color: var(--text-muted);
98
- position: absolute;
99
- left: 50%;
100
- transform: translateX(-50%);
101
- }
102
-
103
- .titlebar-right {
104
- display: flex;
105
- align-items: center;
106
- gap: 2px;
107
- }
108
-
109
- .titlebar-btn {
110
- width: 28px;
111
- height: 24px;
112
- display: flex;
113
- align-items: center;
114
- justify-content: center;
115
- border: none;
116
- background: transparent;
117
- color: var(--text-secondary);
118
- cursor: pointer;
119
- border-radius: 4px;
120
- font-size: 11px;
121
- transition: all 0.15s;
122
- }
123
-
124
- .titlebar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
125
- .titlebar-btn.close:hover { background: var(--red); color: #fff; }
126
-
127
- .anycoder-link {
128
- color: var(--accent);
129
- text-decoration: none;
130
- font-size: 11px;
131
- font-weight: 500;
132
- transition: color 0.2s;
133
- }
134
- .anycoder-link:hover { color: var(--accent-hover); text-decoration: underline; }
135
-
136
- /* ===== MAIN LAYOUT ===== */
137
- .main { display: flex; flex: 1; overflow: hidden; }
138
-
139
- /* ===== ACTIVITY BAR ===== */
140
- .activitybar {
141
- width: var(--activitybar-width);
142
- background: var(--bg-secondary);
143
- border-right: 1px solid var(--border);
144
- display: flex;
145
- flex-direction: column;
146
- align-items: center;
147
- padding: 4px 0;
148
- flex-shrink: 0;
149
- }
150
-
151
- .activity-icon {
152
- width: 40px;
153
- height: 40px;
154
- display: flex;
155
- align-items: center;
156
- justify-content: center;
157
- color: var(--text-muted);
158
- cursor: pointer;
159
- border-radius: 8px;
160
- margin: 2px 0;
161
- font-size: 18px;
162
- position: relative;
163
- transition: all 0.2s;
164
- }
165
-
166
- .activity-icon::before {
167
- content: '';
168
- position: absolute;
169
- left: -4px;
170
- top: 50%;
171
- transform: translateY(-50%);
172
- width: 3px;
173
- height: 0;
174
- background: var(--accent);
175
- border-radius: 0 2px 2px 0;
176
- transition: height 0.2s;
177
- }
178
-
179
- .activity-icon:hover { color: var(--text-primary); }
180
- .activity-icon.active { color: var(--text-primary); }
181
- .activity-icon.active::before { height: 20px; }
182
-
183
- .activity-spacer { flex: 1; }
184
-
185
- .activity-badge {
186
- position: absolute;
187
- top: 6px;
188
- right: 6px;
189
- width: 16px;
190
- height: 16px;
191
- background: var(--accent);
192
- color: #fff;
193
- font-size: 9px;
194
- font-weight: 700;
195
- border-radius: 50%;
196
- display: flex;
197
- align-items: center;
198
- justify-content: center;
199
- }
200
-
201
- /* ===== SIDEBAR ===== */
202
- .sidebar {
203
- width: var(--sidebar-width);
204
- background: var(--bg-secondary);
205
- border-right: 1px solid var(--border);
206
- display: flex;
207
- flex-direction: column;
208
- flex-shrink: 0;
209
- transition: width 0.2s, opacity 0.2s;
210
- overflow: hidden;
211
- }
212
-
213
- .sidebar.collapsed { width: 0; border-right: none; }
214
-
215
- .sidebar-header {
216
- display: flex;
217
- align-items: center;
218
- justify-content: space-between;
219
- padding: 10px 14px;
220
- font-size: 11px;
221
- font-weight: 600;
222
- text-transform: uppercase;
223
- letter-spacing: 0.5px;
224
- color: var(--text-secondary);
225
- }
226
-
227
- .sidebar-header-actions {
228
- display: flex;
229
- gap: 4px;
230
- }
231
-
232
- .sidebar-header-actions button {
233
- background: none;
234
- border: none;
235
- color: var(--text-muted);
236
- cursor: pointer;
237
- font-size: 13px;
238
- padding: 2px;
239
- border-radius: 4px;
240
- transition: all 0.15s;
241
- }
242
-
243
- .sidebar-header-actions button:hover {
244
- color: var(--text-primary);
245
- background: var(--bg-hover);
246
- }
247
-
248
- .sidebar-search {
249
- padding: 0 8px 8px;
250
- }
251
-
252
- .sidebar-search input {
253
- width: 100%;
254
- background: var(--bg-primary);
255
- border: 1px solid var(--border);
256
- color: var(--text-primary);
257
- padding: 5px 8px;
258
- font-size: 12px;
259
- border-radius: 4px;
260
- outline: none;
261
- font-family: 'Inter', sans-serif;
262
- transition: border-color 0.2s;
263
- }
264
-
265
- .sidebar-search input:focus { border-color: var(--accent); }
266
- .sidebar-search input::placeholder { color: var(--text-muted); }
267
-
268
- .file-tree {
269
- flex: 1;
270
- overflow-y: auto;
271
- padding: 0 4px;
272
- }
273
-
274
- .tree-section {
275
- margin-bottom: 2px;
276
- }
277
-
278
- .tree-section-header {
279
- display: flex;
280
- align-items: center;
281
- gap: 4px;
282
- padding: 4px 8px;
283
- font-size: 11px;
284
- font-weight: 600;
285
- color: var(--text-secondary);
286
- cursor: pointer;
287
- border-radius: 4px;
288
- transition: background 0.15s;
289
- }
290
-
291
- .tree-section-header:hover { background: var(--bg-hover); }
292
- .tree-section-header i { font-size: 9px; transition: transform 0.2s; }
293
- .tree-section-header.collapsed i { transform: rotate(-90deg); }
294
-
295
- .tree-item {
296
- display: flex;
297
- align-items: center;
298
- gap: 6px;
299
- padding: 3px 8px 3px 20px;
300
- font-size: 13px;
301
- cursor: pointer;
302
- border-radius: 4px;
303
- color: var(--text-secondary);
304
- transition: all 0.15s;
305
- white-space: nowrap;
306
- overflow: hidden;
307
- text-overflow: ellipsis;
308
- }
309
-
310
- .tree-item:hover { background: var(--bg-hover); color: var(--text-primary); }
311
- .tree-item.active { background: var(--accent-dim); color: var(--accent); }
312
-
313
- .tree-item .file-icon { font-size: 14px; flex-shrink: 0; }
314
- .tree-item .file-icon.js { color: var(--yellow); }
315
- .tree-item .file-icon.html { color: var(--orange); }
316
- .tree-item .file-icon.css { color: var(--accent); }
317
- .tree-item .file-icon.json { color: var(--green); }
318
- .tree-item .file-icon.md { color: var(--text-secondary); }
319
- .tree-item .file-icon.folder { color: var(--accent); }
320
- .tree-item .file-icon.img { color: var(--purple); }
321
- .tree-item .file-icon.git { color: var(--red); }
322
- .tree-item .file-icon.config { color: var(--text-muted); }
323
-
324
- .tree-item .file-name { overflow: hidden; text-overflow: ellipsis; }
325
-
326
- .tree-item .file-modified {
327
- margin-left: auto;
328
- width: 6px;
329
- height: 6px;
330
- background: var(--green);
331
- border-radius: 50%;
332
- flex-shrink: 0;
333
- }
334
-
335
- /* ===== EDITOR AREA ===== */
336
- .editor-area {
337
- flex: 1;
338
- display: flex;
339
- flex-direction: column;
340
- overflow: hidden;
341
- min-width: 0;
342
- }
343
-
344
- /* Tabs */
345
- .tabbar {
346
- display: flex;
347
- align-items: stretch;
348
- height: var(--tabbar-height);
349
- background: var(--bg-secondary);
350
- border-bottom: 1px solid var(--border);
351
- overflow-x: auto;
352
- flex-shrink: 0;
353
- }
354
-
355
- .tabbar::-webkit-scrollbar { height: 0; }
356
-
357
- .tab {
358
- display: flex;
359
- align-items: center;
360
- gap: 6px;
361
- padding: 0 14px;
362
- font-size: 12px;
363
- color: var(--text-muted);
364
- cursor: pointer;
365
- border-right: 1px solid var(--border);
366
- white-space: nowrap;
367
- min-width: 100px;
368
- max-width: 180px;
369
- position: relative;
370
- transition: all 0.15s;
371
- }
372
-
373
- .tab:hover { background: var(--bg-tertiary); color: var(--text-secondary); }
374
-
375
- .tab.active {
376
- background: var(--bg-primary);
377
- color: var(--text-primary);
378
- }
379
-
380
- .tab.active::after {
381
- content: '';
382
- position: absolute;
383
- top: 0;
384
- left: 0;
385
- right: 0;
386
- height: 2px;
387
- background: var(--accent);
388
- }
389
-
390
- .tab .tab-icon { font-size: 13px; }
391
- .tab .tab-icon.js { color: var(--yellow); }
392
- .tab .tab-icon.html { color: var(--orange); }
393
- .tab .tab-icon.css { color: var(--accent); }
394
- .tab .tab-icon.json { color: var(--green); }
395
- .tab .tab-icon.md { color: var(--text-secondary); }
396
-
397
- .tab .tab-close {
398
- margin-left: auto;
399
- width: 18px;
400
- height: 18px;
401
- display: flex;
402
- align-items: center;
403
- justify-content: center;
404
- border-radius: 4px;
405
- font-size: 10px;
406
- opacity: 0;
407
- transition: all 0.15s;
408
- }
409
-
410
- .tab:hover .tab-close, .tab.active .tab-close { opacity: 1; }
411
- .tab .tab-close:hover { background: var(--bg-hover); }
412
-
413
- .tab .tab-modified {
414
- margin-left: auto;
415
- width: 6px;
416
- height: 6px;
417
- background: var(--green);
418
- border-radius: 50%;
419
- }
420
-
421
- .tab .tab-modified + .tab-close { margin-left: 4px; }
422
-
423
- /* Breadcrumb */
424
- .breadcrumb {
425
- display: flex;
426
- align-items: center;
427
- gap: 4px;
428
- height: var(--breadcrumb-height);
429
- padding: 0 16px;
430
- font-size: 12px;
431
- color: var(--text-muted);
432
- background: var(--bg-primary);
433
- border-bottom: 1px solid var(--border);
434
- flex-shrink: 0;
435
- }
436
-
437
- .breadcrumb span { cursor: pointer; transition: color 0.15s; }
438
- .breadcrumb span:hover { color: var(--text-primary); }
439
- .breadcrumb .sep { font-size: 10px; }
440
-
441
- /* Code Editor */
442
- .editor-container {
443
- flex: 1;
444
- display: flex;
445
- overflow: hidden;
446
- position: relative;
447
- }
448
-
449
- .line-numbers {
450
- width: 54px;
451
- background: var(--bg-primary);
452
- padding: 12px 0;
453
- text-align: right;
454
- font-family: 'JetBrains Mono', monospace;
455
- font-size: 13px;
456
- line-height: 1.6;
457
- color: var(--text-muted);
458
- user-select: none;
459
- overflow: hidden;
460
- flex-shrink: 0;
461
- }
462
-
463
- .line-numbers .line-num {
464
- padding-right: 16px;
465
- height: 20.8px;
466
- display: flex;
467
- align-items: center;
468
- justify-content: flex-end;
469
- }
470
-
471
- .line-numbers .line-num.active { color: var(--text-primary); }
472
-
473
- .code-editor {
474
- flex: 1;
475
- padding: 12px 16px;
476
- font-family: 'JetBrains Mono', monospace;
477
- font-size: 13px;
478
- line-height: 1.6;
479
- color: var(--text-primary);
480
- background: var(--bg-primary);
481
- border: none;
482
- outline: none;
483
- resize: none;
484
- overflow: auto;
485
- white-space: pre;
486
- tab-size: 4;
487
- }
488
-
489
- .code-editor::selection { background: var(--accent-dim); }
490
-
491
- /* Minimap */
492
- .minimap {
493
- width: 60px;
494
- background: var(--bg-primary);
495
- border-left: 1px solid var(--border);
496
- overflow: hidden;
497
- position: relative;
498
- flex-shrink: 0;
499
- cursor: pointer;
500
- }
501
-
502
- .minimap-content {
503
- padding: 12px 4px;
504
- transform: scaleX(0.4) scaleY(0.4);
505
- transform-origin: top right;
506
- font-family: 'JetBrains Mono', monospace;
507
- font-size: 13px;
508
- line-height: 1.6;
509
- color: var(--text-muted);
510
- white-space: pre;
511
- opacity: 0.6;
512
- pointer-events: none;
513
- }
514
-
515
- .minimap-viewport {
516
- position: absolute;
517
- top: 0;
518
- left: 0;
519
- right: 0;
520
- height: 40px;
521
- background: rgba(88,166,255,0.08);
522
- border: 1px solid rgba(88,166,255,0.2);
523
- border-radius: 2px;
524
- pointer-events: none;
525
- transition: top 0.1s;
526
- }
527
-
528
- /* Welcome Tab */
529
- .welcome-screen {
530
- flex: 1;
531
- display: flex;
532
- flex-direction: column;
533
- align-items: center;
534
- justify-content: center;
535
- gap: 24px;
536
- padding: 40px;
537
- background: var(--bg-primary);
538
- }
539
-
540
- .welcome-logo {
541
- font-size: 64px;
542
- color: var(--accent);
543
- opacity: 0.3;
544
- }
545
-
546
- .welcome-title {
547
- font-size: 28px;
548
- font-weight: 300;
549
- color: var(--text-secondary);
550
- }
551
-
552
- .welcome-shortcuts {
553
- display: grid;
554
- grid-template-columns: repeat(2, 1fr);
555
- gap: 8px 32px;
556
- margin-top: 16px;
557
- }
558
-
559
- .welcome-shortcut {
560
- display: flex;
561
- align-items: center;
562
- gap: 12px;
563
- font-size: 13px;
564
- color: var(--text-muted);
565
- cursor: pointer;
566
- padding: 6px 8px;
567
- border-radius: 6px;
568
- transition: all 0.2s;
569
- }
570
-
571
- .welcome-shortcut:hover { background: var(--bg-hover); color: var(--text-primary); }
572
-
573
- .welcome-shortcut kbd {
574
- background: var(--bg-tertiary);
575
- border: 1px solid var(--border);
576
- padding: 2px 6px;
577
- border-radius: 4px;
578
- font-family: 'JetBrains Mono', monospace;
579
- font-size: 11px;
580
- color: var(--text-secondary);
581
- }
582
-
583
- /* ===== PANELS (Terminal etc.) ===== */
584
- .panel-area {
585
- border-top: 1px solid var(--border);
586
- flex-shrink: 0;
587
- display: flex;
588
- flex-direction: column;
589
- background: var(--bg-secondary);
590
- }
591
-
592
- .panel-area.hidden { display: none; }
593
-
594
- .panel-tabs {
595
- display: flex;
596
- align-items: center;
597
- height: 32px;
598
- border-bottom: 1px solid var(--border);
599
- padding: 0 8px;
600
- gap: 2px;
601
- }
602
-
603
- .panel-tab {
604
- padding: 4px 12px;
605
- font-size: 12px;
606
- color: var(--text-muted);
607
- cursor: pointer;
608
- border-radius: 4px;
609
- transition: all 0.15s;
610
- position: relative;
611
- }
612
-
613
- .panel-tab:hover { color: var(--text-secondary); }
614
- .panel-tab.active { color: var(--text-primary); }
615
- .panel-tab.active::after {
616
- content: '';
617
- position: absolute;
618
- bottom: -5px;
619
- left: 50%;
620
- transform: translateX(-50%);
621
- width: 20px;
622
- height: 2px;
623
- background: var(--accent);
624
- border-radius: 1px;
625
- }
626
-
627
- .panel-tab .badge {
628
- background: var(--red);
629
- color: #fff;
630
- font-size: 9px;
631
- padding: 1px 5px;
632
- border-radius: 8px;
633
- margin-left: 4px;
634
- font-weight: 600;
635
- }
636
-
637
- .panel-actions {
638
- margin-left: auto;
639
- display: flex;
640
- gap: 4px;
641
- }
642
-
643
- .panel-actions button {
644
- background: none;
645
- border: none;
646
- color: var(--text-muted);
647
- cursor: pointer;
648
- font-size: 13px;
649
- padding: 4px 6px;
650
- border-radius: 4px;
651
- transition: all 0.15s;
652
- }
653
-
654
- .panel-actions button:hover {
655
- color: var(--text-primary);
656
- background: var(--bg-hover);
657
- }
658
-
659
- .terminal {
660
- height: var(--terminal-height);
661
- overflow-y: auto;
662
- padding: 8px 14px;
663
- font-family: 'JetBrains Mono', monospace;
664
- font-size: 12px;
665
- line-height: 1.5;
666
- background: var(--bg-primary);
667
- }
668
-
669
- .terminal-line { display: flex; gap: 8px; margin-bottom: 2px; }
670
-
671
- .terminal-prompt { color: var(--green); white-space: nowrap; }
672
- .terminal-path { color: var(--accent); }
673
- .terminal-cmd { color: var(--text-primary); }
674
- .terminal-output { color: var(--text-secondary); }
675
- .terminal-error { color: var(--red); }
676
- .terminal-warning { color: var(--yellow); }
677
- .terminal-info { color: var(--accent); }
678
-
679
- .terminal-input-line {
680
- display: flex;
681
- align-items: center;
682
- gap: 8px;
683
- margin-top: 4px;
684
- }
685
-
686
- .terminal-input {
687
- flex: 1;
688
- background: transparent;
689
- border: none;
690
- color: var(--text-primary);
691
- font-family: 'JetBrains Mono', monospace;
692
- font-size: 12px;
693
- outline: none;
694
- }
695
-
696
- /* ===== STATUS BAR ===== */
697
- .statusbar {
698
- display: flex;
699
- align-items: center;
700
- justify-content: space-between;
701
- height: var(--statusbar-height);
702
- background: var(--accent);
703
- padding: 0 10px;
704
- font-size: 11px;
705
- color: #fff;
706
- flex-shrink: 0;
707
- }
708
-
709
- .statusbar-left, .statusbar-right {
710
- display: flex;
711
- align-items: center;
712
- gap: 2px;
713
- }
714
-
715
- .status-item {
716
- display: flex;
717
- align-items: center;
718
- gap: 4px;
719
- padding: 0 6px;
720
- cursor: pointer;
721
- height: 100%;
722
- transition: background 0.15s;
723
- }
724
-
725
- .status-item:hover { background: rgba(255,255,255,0.15); }
726
- .status-item i { font-size: 12px; }
727
-
728
- /* ===== COMMAND PALETTE ===== */
729
- .command-overlay {
730
- position: fixed;
731
- inset: 0;
732
- background: rgba(0,0,0,0.5);
733
- z-index: 1000;
734
- display: none;
735
- align-items: flex-start;
736
- justify-content: center;
737
- padding-top: 15vh;
738
- backdrop-filter: blur(4px);
739
- }
740
-
741
- .command-overlay.show { display: flex; }
742
-
743
- .command-palette {
744
- width: 540px;
745
- max-width: 90vw;
746
- background: var(--bg-secondary);
747
- border: 1px solid var(--border);
748
- border-radius: 10px;
749
- box-shadow: 0 20px 60px rgba(0,0,0,0.5);
750
- overflow: hidden;
751
- animation: slideDown 0.15s ease;
752
- }
753
-
754
- @keyframes slideDown {
755
- from { opacity: 0; transform: translateY(-10px); }
756
- to { opacity: 1; transform: translateY(0); }
757
- }
758
-
759
- .command-input-wrap {
760
- display: flex;
761
- align-items: center;
762
- padding: 12px 16px;
763
- border-bottom: 1px solid var(--border);
764
- gap: 10px;
765
- }
766
-
767
- .command-input-wrap i { color: var(--text-muted); font-size: 16px; }
768
-
769
- .command-input {
770
- flex: 1;
771
- background: transparent;
772
- border: none;
773
- color: var(--text-primary);
774
- font-size: 14px;
775
- font-family: 'Inter', sans-serif;
776
- outline: none;
777
- }
778
-
779
- .command-input::placeholder { color: var(--text-muted); }
780
-
781
- .command-list {
782
- max-height: 320px;
783
- overflow-y: auto;
784
- padding: 4px;
785
- }
786
-
787
- .command-item {
788
- display: flex;
789
- align-items: center;
790
- gap: 10px;
791
- padding: 8px 12px;
792
- cursor: pointer;
793
- border-radius: 6px;
794
- transition: background 0.1s;
795
- }
796
-
797
- .command-item:hover, .command-item.selected { background: var(--accent-dim); }
798
- .command-item i { color: var(--text-muted); width: 20px; text-align: center; font-size: 14px; }
799
- .command-item .cmd-label { font-size: 13px; color: var(--text-primary); flex: 1; }
800
- .command-item .cmd-shortcut { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
801
-
802
- /* ===== NOTIFICATIONS ===== */
803
- .notification-area {
804
- position: fixed;
805
- bottom: 36px;
806
- right: 16px;
807
- z-index: 2000;
808
- display: flex;
809
- flex-direction: column;
810
- gap: 8px;
811
- }
812
-
813
- .notification {
814
- display: flex;
815
- align-items: flex-start;
816
- gap: 10px;
817
- padding: 12px 16px;
818
- background: var(--bg-secondary);
819
- border: 1px solid var(--border);
820
- border-radius: 8px;
821
- box-shadow: 0 8px 24px rgba(0,0,0,0.4);
822
- min-width: 300px;
823
- max-width: 400px;
824
- animation: notifIn 0.3s ease;
825
- font-size: 13px;
826
- }
827
-
828
- .notification.hiding { animation: notifOut 0.3s ease forwards; }
829
-
830
- @keyframes notifIn {
831
- from { opacity: 0; transform: translateX(30px); }
832
- to { opacity: 1; transform: translateX(0); }
833
- }
834
-
835
- @keyframes notifOut {
836
- from { opacity: 1; transform: translateX(0); }
837
- to { opacity: 0; transform: translateX(30px); }
838
- }
839
-
840
- .notification .notif-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
841
- .notification .notif-icon.info { color: var(--accent); }
842
- .notification .notif-icon.success { color: var(--green); }
843
- .notification .notif-icon.warning { color: var(--yellow); }
844
- .notification .notif-icon.error { color: var(--red); }
845
-
846
- .notification .notif-content { flex: 1; }
847
- .notification .notif-title { font-weight: 600; margin-bottom: 2px; }
848
- .notification .notif-msg { color: var(--text-secondary); font-size: 12px; }
849
-
850
- .notification .notif-close {
851
- background: none;
852
- border: none;
853
- color: var(--text-muted);
854
- cursor: pointer;
855
- font-size: 14px;
856
- padding: 0;
857
- transition: color 0.15s;
858
- }
859
-
860
- .notification .notif-close:hover { color: var(--text-primary); }
861
-
862
- /* ===== SEARCH SIDEBAR ===== */
863
- .search-panel { padding: 8px; display: none; flex-direction: column; gap: 8px; }
864
- .search-panel.active { display: flex; }
865
-
866
- .search-input-group {
867
- display: flex;
868
- gap: 4px;
869
- }
870
-
871
- .search-input-group input {
872
- flex: 1;
873
- background: var(--bg-primary);
874
- border: 1px solid var(--border);
875
- color: var(--text-primary);
876
- padding: 5px 8px;
877
- font-size: 12px;
878
- border-radius: 4px;
879
- outline: none;
880
- font-family: 'Inter', sans-serif;
881
- }
882
-
883
- .search-input-group input:focus { border-color: var(--accent); }
884
-
885
- .search-input-group button {
886
- background: var(--bg-primary);
887
- border: 1px solid var(--border);
888
- color: var(--text-muted);
889
- padding: 4px 8px;
890
- border-radius: 4px;
891
- cursor: pointer;
892
- font-size: 12px;
893
- transition: all 0.15s;
894
- }
895
-
896
- .search-input-group button:hover { color: var(--text-primary); border-color: var(--accent); }
897
-
898
- .search-results {
899
- font-size: 12px;
900
- color: var(--text-secondary);
901
- padding: 4px 0;
902
- }
903
-
904
- .search-result-item {
905
- padding: 4px 8px;
906
- cursor: pointer;
907
- border-radius: 4px;
908
- transition: background 0.15s;
909
- overflow: hidden;
910
- text-overflow: ellipsis;
911
- white-space: nowrap;
912
- }
913
-
914
- .search-result-item:hover { background: var(--bg-hover); }
915
-
916
- .search-result-item .match {
917
- background: var(--yellow-dim);
918
- color: var(--yellow);
919
- padding: 0 2px;
920
- border-radius: 2px;
921
- }
922
-
923
- /* ===== GIT SIDEBAR ===== */
924
- .git-panel { padding: 12px; display: none; flex-direction: column; gap: 12px; }
925
- .git-panel.active { display: flex; }
926
-
927
- .git-branch {
928
- display: flex;
929
- align-items: center;
930
- gap: 6px;
931
- font-size: 13px;
932
- color: var(--text-primary);
933
- }
934
-
935
- .git-branch i { color: var(--green); }
936
-
937
- .git-changes-title {
938
- font-size: 11px;
939
- font-weight: 600;
940
- text-transform: uppercase;
941
- letter-spacing: 0.5px;
942
- color: var(--text-secondary);
943
- }
944
-
945
- .git-change-item {
946
- display: flex;
947
- align-items: center;
948
- gap: 8px;
949
- padding: 4px 0;
950
- font-size: 12px;
951
- }
952
-
953
- .git-change-item .change-type {
954
- font-size: 11px;
955
- font-weight: 600;
956
- width: 16px;
957
- text-align: center;
958
- }
959
-
960
- .git-change-item .change-type.M { color: var(--yellow); }
961
- .git-change-item .change-type.A { color: var(--green); }
962
- .git-change-item .change-type.D { color: var(--red); }
963
-
964
- .git-change-item .change-file { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; }
965
-
966
- .git-commit-area textarea {
967
- width: 100%;
968
- background: var(--bg-primary);
969
- border: 1px solid var(--border);
970
- color: var(--text-primary);
971
- padding: 8px;
972
- font-size: 12px;
973
- border-radius: 6px;
974
- outline: none;
975
- font-family: 'Inter', sans-serif;
976
- resize: vertical;
977
- min-height: 60px;
978
- }
979
-
980
- .git-commit-area textarea:focus { border-color: var(--accent); }
981
-
982
- .git-commit-btn {
983
- width: 100%;
984
- padding: 6px 12px;
985
- background: var(--green);
986
- color: #fff;
987
- border: none;
988
- border-radius: 6px;
989
- font-size: 12px;
990
- font-weight: 600;
991
- cursor: pointer;
992
- transition: opacity 0.15s;
993
- }
994
-
995
- .git-commit-btn:hover { opacity: 0.9; }
996
-
997
- /* ===== EXTENSIONS SIDEBAR ===== */
998
- .extensions-panel { padding: 8px; display: none; flex-direction: column; gap: 8px; }
999
- .extensions-panel.active { display: flex; }
1000
-
1001
- .ext-item {
1002
- display: flex;
1003
- align-items: center;
1004
- gap: 10px;
1005
- padding: 8px;
1006
- border-radius: 6px;
1007
- cursor: pointer;
1008
- transition: background 0.15s;
1009
- }
1010
-
1011
- .ext-item:hover { background: var(--bg-hover); }
1012
-
1013
- .ext-icon {
1014
- width: 36px;
1015
- height: 36px;
1016
- border-radius: 6px;
1017
- display: flex;
1018
- align-items: center;
1019
- justify-content: center;
1020
- font-size: 18px;
1021
- flex-shrink: 0;
1022
- }
1023
-
1024
- .ext-info { flex: 1; min-width: 0; }
1025
- .ext-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
1026
- .ext-desc { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1027
-
1028
- /* ===== RESIZE HANDLE ===== */
1029
- .resize-handle {
1030
- height: 4px;
1031
- cursor: ns-resize;
1032
- background: transparent;
1033
- transition: background 0.2s;
1034
- flex-shrink: 0;
1035
- }
1036
-
1037
- .resize-handle:hover { background: var(--accent); }
1038
-
1039
- /* ===== CONTEXT MENU ===== */
1040
- .context-menu {
1041
- position: fixed;
1042
- background: var(--bg-secondary);
1043
- border: 1px solid var(--border);
1044
- border-radius: 8px;
1045
- padding: 4px;
1046
- min-width: 200px;
1047
- box-shadow: 0 8px 24px rgba(0,0,0,0.4);
1048
- z-index: 3000;
1049
- display: none;
1050
- }
1051
-
1052
- .context-menu.show { display: block; }
1053
-
1054
- .ctx-item {
1055
- display: flex;
1056
- align-items: center;
1057
- gap: 10px;
1058
- padding: 6px 12px;
1059
- font-size: 13px;
1060
- color: var(--text-primary);
1061
- cursor: pointer;
1062
- border-radius: 4px;
1063
- transition: background 0.1s;
1064
- }
1065
-
1066
- .ctx-item:hover { background: var(--accent-dim); }
1067
- .ctx-item i { width: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
1068
- .ctx-item .ctx-shortcut { margin-left: auto; font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
1069
- .ctx-separator { height: 1px; background: var(--border); margin: 4px 8px; }
1070
-
1071
- /* ===== RESPONSIVE ===== */
1072
- @media (max-width: 768px) {
1073
- .sidebar { position: absolute; z-index: 100; height: calc(100vh - 56px); top: 56px; left: var(--activitybar-width); }
1074
- .sidebar.collapsed { transform: translateX(-100%); }
1075
- .minimap { display: none; }
1076
- .breadcrumb { display: none; }
1077
- .welcome-shortcuts { grid-template-columns: 1fr; }
1078
- }
1079
-
1080
- /* ===== ANIMATIONS ===== */
1081
- @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
1082
- .animate-pulse { animation: pulse 2s infinite; }
1083
-
1084
- @keyframes fadeIn {
1085
- from { opacity: 0; }
1086
- to { opacity: 1; }
1087
- }
1088
-
1089
- .fade-in { animation: fadeIn 0.3s ease; }
1090
-
1091
- /* Syntax highlighting classes */
1092
- .syn-keyword { color: var(--purple); }
1093
- .syn-string { color: var(--orange); }
1094
- .syn-number { color: var(--cyan); }
1095
- .syn-comment { color: var(--text-muted); font-style: italic; }
1096
- .syn-function { color: var(--accent); }
1097
- .syn-variable { color: var(--text-primary); }
1098
- .syn-operator { color: var(--red); }
1099
- .syn-type { color: var(--green); }
1100
- .syn-tag { color: var(--red); }
1101
- .syn-attr { color: var(--yellow); }
1102
- .syn-punctuation { color: var(--text-secondary); }
1103
- </style>
1104
  </head>
1105
  <body>
1106
- <div class="app">
1107
- <!-- Title Bar -->
1108
- <div class="titlebar">
1109
- <div class="titlebar-left">
1110
- <div class="logo">
1111
- <i class="fa-solid fa-code"></i>
1112
- CodeForge
1113
- </div>
1114
- <span style="color: var(--text-muted);">—</span>
1115
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1116
  </div>
1117
- <div class="titlebar-center">index.js — my-project</div>
1118
- <div class="titlebar-right">
1119
- <button class="titlebar-btn"><i class="fa-solid fa-minus"></i></button>
1120
- <button class="titlebar-btn"><i class="fa-regular fa-square"></i></button>
1121
- <button class="titlebar-btn close"><i class="fa-solid fa-xmark"></i></button>
 
 
 
 
 
 
1122
  </div>
 
 
 
 
 
1123
  </div>
1124
 
1125
- <!-- Main Layout -->
1126
- <div class="main">
1127
- <!-- Activity Bar -->
1128
- <div class="activitybar">
1129
- <div class="activity-icon active" data-panel="explorer" title="Explorer"><i class="fa-regular fa-copy"></i></div>
1130
- <div class="activity-icon" data-panel="search" title="Search"><i class="fa-solid fa-magnifying-glass"></i></div>
1131
- <div class="activity-icon" data-panel="git" title="Source Control">
1132
- <i class="fa-solid fa-code-branch"></i>
1133
- <span class="activity-badge">3</span>
1134
- </div>
1135
- <div class="activity-icon" data-panel="extensions" title="Extensions"><i class="fa-solid fa-puzzle-piece"></i></div>
1136
- <div class="activity-spacer"></div>
1137
- <div class="activity-icon" id="accountBtn" title="Account"><i class="fa-regular fa-circle-user"></i></div>
1138
- <div class="activity-icon" id="settingsBtn" title="Settings"><i class="fa-solid fa-gear"></i></div>
1139
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1140
 
1141
- <!-- Sidebar -->
1142
- <div class="sidebar" id="sidebar">
1143
- <!-- Explorer Panel -->
1144
- <div class="explorer-panel" id="panel-explorer">
1145
- <div class="sidebar-header">
1146
- <span>Explorer</span>
1147
- <div class="sidebar-header-actions">
1148
- <button title="New File" id="newFileBtn"><i class="fa-solid fa-file-circle-plus"></i></button>
1149
- <button title="New Folder"><i class="fa-solid fa-folder-plus"></i></button>
1150
- <button title="Refresh"><i class="fa-solid fa-arrows-rotate"></i></button>
1151
- <button title="Collapse All"><i class="fa-solid fa-angles-down"></i></button>
1152
- </div>
1153
- </div>
1154
- <div class="sidebar-search">
1155
- <input type="text" placeholder="Filter files..." id="fileFilter">
1156
- </div>
1157
- <div class="file-tree" id="fileTree">
1158
- <div class="tree-section">
1159
- <div class="tree-section-header" data-section="project">
1160
- <i class="fa-solid fa-chevron-down"></i>
1161
- <i class="fa-solid fa-folder-open file-icon folder"></i>
1162
- <span>my-project</span>
1163
- </div>
1164
- <div class="tree-section-content" id="projectFiles">
1165
- <div class="tree-item" data-file="index.js">
1166
- <i class="fa-brands fa-js file-icon js"></i>
1167
- <span class="file-name">index.js</span>
1168
- <span class="file-modified"></span>
1169
- </div>
1170
- <div class="tree-item" data-file="app.js">
1171
- <i class="fa-brands fa-js file-icon js"></i>
1172
- <span class="file-name">app.js</span>
1173
- </div>
1174
- <div class="tree-item" data-file="styles.css">
1175
- <i class="fa-brands fa-css3-alt file-icon css"></i>
1176
- <span class="file-name">styles.css</span>
1177
- <span class="file-modified"></span>
1178
- </div>
1179
- <div class="tree-item" data-file="index.html">
1180
- <i class="fa-brands fa-html5 file-icon html"></i>
1181
- <span class="file-name">index.html</span>
1182
- </div>
1183
- <div class="tree-section">
1184
- <div class="tree-section-header" data-section="components">
1185
- <i class="fa-solid fa-chevron-down"></i>
1186
- <i class="fa-solid fa-folder-open file-icon folder"></i>
1187
- <span>components</span>
1188
- </div>
1189
- <div class="tree-section-content" style="padding-left: 12px;">
1190
- <div class="tree-item" data-file="Header.js">
1191
- <i class="fa-brands fa-js file-icon js"></i>
1192
- <span class="file-name">Header.js</span>
1193
- </div>
1194
- <div class="tree-item" data-file="Footer.js">
1195
- <i class="fa-brands fa-js file-icon js"></i>
1196
- <span class="file-name">Footer.js</span>
1197
- </div>
1198
- <div class="tree-item" data-file="Sidebar.js">
1199
- <i class="fa-brands fa-js file-icon js"></i>
1200
- <span class="file-name">Sidebar.js</span>
1201
- <span class="file-modified"></span>
1202
- </div>
1203
- </div>
1204
- </div>
1205
- <div class="tree-section">
1206
- <div class="tree-section-header" data-section="utils">
1207
- <i class="fa-solid fa-chevron-down"></i>
1208
- <i class="fa-solid fa-folder-open file-icon folder"></i>
1209
- <span>utils</span>
1210
- </div>
1211
- <div class="tree-section-content" style="padding-left: 12px;">
1212
- <div class="tree-item" data-file="helpers.js">
1213
- <i class="fa-brands fa-js file-icon js"></i>
1214
- <span class="file-name">helpers.js</span>
1215
- </div>
1216
- <div class="tree-item" data-file="api.js">
1217
- <i class="fa-brands fa-js file-icon js"></i>
1218
- <span class="file-name">api.js</span>
1219
- </div>
1220
- </div>
1221
- </div>
1222
- <div class="tree-item" data-file="package.json">
1223
- <i class="fa-solid fa-file-code file-icon json"></i>
1224
- <span class="file-name">package.json</span>
1225
- </div>
1226
- <div class="tree-item" data-file="README.md">
1227
- <i class="fa-solid fa-file-lines file-icon md"></i>
1228
- <span class="file-name">README.md</span>
1229
- </div>
1230
- <div class="tree-item" data-file=".gitignore">
1231
- <i class="fa-brands fa-git-alt file-icon git"></i>
1232
- <span class="file-name">.gitignore</span>
1233
- </div>
1234
- </div>
1235
- </div>
1236
- </div>
1237
- </div>
1238
-
1239
- <!-- Search Panel -->
1240
- <div class="search-panel" id="panel-search">
1241
- <div class="sidebar-header"><span>Search</span></div>
1242
- <div class="search-input-group">
1243
- <input type="text" placeholder="Search..." id="searchInput">
1244
- <button title="Match Case"><i class="fa-solid fa-font"></i></button>
1245
- <button title="Regex"><i class="fa-solid fa-asterisk"></i></button>
1246
- </div>
1247
- <div class="search-input-group">
1248
- <input type="text" placeholder="Replace...">
1249
- </div>
1250
- <div class="search-results" id="searchResults">
1251
- <div style="color: var(--text-muted); padding: 8px; font-size: 12px;">Type to search across files</div>
1252
- </div
 
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>CodeForge — AI Code Studio</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --bg-primary: #0a0e17;
12
+ --bg-secondary: #111827;
13
+ --bg-tertiary: #1a2236;
14
+ --bg-card: #151d2e;
15
+ --bg-hover: #1e2a42;
16
+ --bg-active: #243352;
17
+ --border: #1e2d45;
18
+ --border-light: #2a3f5f;
19
+ --text-primary: #e8edf5;
20
+ --text-secondary: #8892a8;
21
+ --text-muted: #5a6478;
22
+ --accent: #6c5ce7;
23
+ --accent-hover: #8b7cf7;
24
+ --accent-dim: rgba(108, 92, 231, 0.15);
25
+ --accent-glow: rgba(108, 92, 231, 0.3);
26
+ --green: #00d2a0;
27
+ --green-dim: rgba(0, 210, 160, 0.12);
28
+ --yellow: #ffc048;
29
+ --yellow-dim: rgba(255, 192, 72, 0.12);
30
+ --red: #ff5c72;
31
+ --red-dim: rgba(255, 92, 114, 0.12);
32
+ --blue: #4facfe;
33
+ --blue-dim: rgba(79, 172, 254, 0.12);
34
+ --orange: #ff8a4c;
35
+ --orange-dim: rgba(255, 138, 76, 0.12);
36
+ --cyan: #22d3ee;
37
+ --cyan-dim: rgba(34, 211, 238, 0.12);
38
+ --pink: #f472b6;
39
+ --pink-dim: rgba(244, 114, 182, 0.12);
40
+ --teal: #2dd4bf;
41
+ --teal-dim: rgba(45, 212, 191, 0.12);
42
+ --sidebar-width: 280px;
43
+ --statusbar-height: 26px;
44
+ --header-height: 52px;
45
+ }
46
+
47
+ * { margin: 0; padding: 0; box-sizing: border-box; }
48
+
49
+ body {
50
+ font-family: 'Inter', sans-serif;
51
+ background: var(--bg-primary);
52
+ color: var(--text-primary);
53
+ overflow: hidden;
54
+ height: 100vh;
55
+ width: 100vw;
56
+ }
57
+
58
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
59
+ ::-webkit-scrollbar-track { background: transparent; }
60
+ ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
61
+ ::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
62
+
63
+ .app { display: flex; flex-direction: column; height: 100vh; }
64
+
65
+ /* ===== HEADER ===== */
66
+ .header {
67
+ display: flex;
68
+ align-items: center;
69
+ height: var(--header-height);
70
+ background: var(--bg-secondary);
71
+ border-bottom: 1px solid var(--border);
72
+ padding: 0 16px;
73
+ gap: 12px;
74
+ flex-shrink: 0;
75
+ position: relative;
76
+ z-index: 100;
77
+ }
78
+
79
+ .header::after {
80
+ content: '';
81
+ position: absolute;
82
+ bottom: -1px;
83
+ left: 0;
84
+ right: 0;
85
+ height: 1px;
86
+ background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
87
+ }
88
+
89
+ .logo {
90
+ display: flex;
91
+ align-items: center;
92
+ gap: 8px;
93
+ font-weight: 700;
94
+ font-size: 16px;
95
+ color: var(--text-primary);
96
+ flex-shrink: 0;
97
+ }
98
+
99
+ .logo-icon {
100
+ width: 28px;
101
+ height: 28px;
102
+ background: linear-gradient(135deg, var(--accent), var(--blue));
103
+ border-radius: 8px;
104
+ display: flex;
105
+ align-items: center;
106
+ justify-content: center;
107
+ font-size: 14px;
108
+ color: #fff;
109
+ }
110
+
111
+ .anycoder-link {
112
+ color: var(--accent);
113
+ text-decoration: none;
114
+ font-size: 11px;
115
+ font-weight: 500;
116
+ padding: 3px 8px;
117
+ border-radius: 4px;
118
+ background: var(--accent-dim);
119
+ transition: all 0.2s;
120
+ white-space: nowrap;
121
+ }
122
+
123
+ .anycoder-link:hover {
124
+ background: var(--accent-glow);
125
+ color: var(--accent-hover);
126
+ }
127
+
128
+ .header-separator {
129
+ width: 1px;
130
+ height: 24px;
131
+ background: var(--border);
132
+ flex-shrink: 0;
133
+ }
134
+
135
+ /* Selector Buttons */
136
+ .selector-group {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 8px;
140
+ flex-shrink: 0;
141
+ }
142
+
143
+ .selector-btn {
144
+ display: flex;
145
+ align-items: center;
146
+ gap: 8px;
147
+ padding: 6px 14px;
148
+ background: var(--bg-tertiary);
149
+ border: 1px solid var(--border);
150
+ border-radius: 8px;
151
+ color: var(--text-primary);
152
+ font-size: 13px;
153
+ font-weight: 500;
154
+ cursor: pointer;
155
+ transition: all 0.2s;
156
+ font-family: 'Inter', sans-serif;
157
+ white-space: nowrap;
158
+ position: relative;
159
+ }
160
+
161
+ .selector-btn:hover {
162
+ border-color: var(--accent);
163
+ background: var(--bg-hover);
164
+ }
165
+
166
+ .selector-btn.active {
167
+ border-color: var(--accent);
168
+ box-shadow: 0 0 0 1px var(--accent-dim), 0 0 12px var(--accent-dim);
169
+ }
170
+
171
+ .selector-btn .sel-icon {
172
+ width: 20px;
173
+ height: 20px;
174
+ border-radius: 5px;
175
+ display: flex;
176
+ align-items: center;
177
+ justify-content: center;
178
+ font-size: 11px;
179
+ flex-shrink: 0;
180
+ }
181
+
182
+ .selector-btn .sel-chevron {
183
+ font-size: 10px;
184
+ color: var(--text-muted);
185
+ transition: transform 0.2s;
186
+ }
187
+
188
+ .selector-btn.open .sel-chevron {
189
+ transform: rotate(180deg);
190
+ }
191
+
192
+ .header-spacer { flex: 1; }
193
+
194
+ .header-actions {
195
+ display: flex;
196
+ align-items: center;
197
+ gap: 6px;
198
+ }
199
+
200
+ .header-action-btn {
201
+ width: 34px;
202
+ height: 34px;
203
+ display: flex;
204
+ align-items: center;
205
+ justify-content: center;
206
+ background: transparent;
207
+ border: 1px solid transparent;
208
+ color: var(--text-secondary);
209
+ cursor: pointer;
210
+ border-radius: 8px;
211
+ font-size: 15px;
212
+ transition: all 0.2s;
213
+ }
214
+
215
+ .header-action-btn:hover {
216
+ background: var(--bg-hover);
217
+ color: var(--text-primary);
218
+ border-color: var(--border);
219
+ }
220
+
221
+ .generate-btn {
222
+ display: flex;
223
+ align-items: center;
224
+ gap: 8px;
225
+ padding: 7px 20px;
226
+ background: linear-gradient(135deg, var(--accent), #8b5cf6);
227
+ border: none;
228
+ border-radius: 8px;
229
+ color: #fff;
230
+ font-size: 13px;
231
+ font-weight: 600;
232
+ cursor: pointer;
233
+ transition: all 0.25s;
234
+ font-family: 'Inter', sans-serif;
235
+ white-space: nowrap;
236
+ box-shadow: 0 2px 12px var(--accent-dim);
237
+ }
238
+
239
+ .generate-btn:hover {
240
+ transform: translateY(-1px);
241
+ box-shadow: 0 4px 20px var(--accent-glow);
242
+ }
243
+
244
+ .generate-btn:active {
245
+ transform: translateY(0);
246
+ }
247
+
248
+ .generate-btn.generating {
249
+ opacity: 0.8;
250
+ pointer-events: none;
251
+ }
252
+
253
+ .generate-btn.generating i {
254
+ animation: spin 1s linear infinite;
255
+ }
256
+
257
+ @keyframes spin {
258
+ to { transform: rotate(360deg); }
259
+ }
260
+
261
+ /* ===== DROPDOWN PANELS ===== */
262
+ .dropdown-overlay {
263
+ position: fixed;
264
+ inset: 0;
265
+ z-index: 500;
266
+ display: none;
267
+ }
268
+
269
+ .dropdown-overlay.show { display: block; }
270
+
271
+ .dropdown-panel {
272
+ position: absolute;
273
+ top: calc(var(--header-height) + 4px);
274
+ background: var(--bg-secondary);
275
+ border: 1px solid var(--border);
276
+ border-radius: 12px;
277
+ box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
278
+ z-index: 600;
279
+ display: none;
280
+ overflow: hidden;
281
+ animation: dropIn 0.15s ease;
282
+ }
283
+
284
+ .dropdown-panel.show { display: block; }
285
+
286
+ @keyframes dropIn {
287
+ from { opacity: 0; transform: translateY(-6px); }
288
+ to { opacity: 1; transform: translateY(0); }
289
+ }
290
+
291
+ .dropdown-search {
292
+ padding: 10px 12px;
293
+ border-bottom: 1px solid var(--border);
294
+ }
295
+
296
+ .dropdown-search input {
297
+ width: 100%;
298
+ background: var(--bg-primary);
299
+ border: 1px solid var(--border);
300
+ color: var(--text-primary);
301
+ padding: 7px 10px 7px 32px;
302
+ font-size: 13px;
303
+ border-radius: 6px;
304
+ outline: none;
305
+ font-family: 'Inter', sans-serif;
306
+ transition: border-color 0.2s;
307
+ }
308
+
309
+ .dropdown-search input:focus { border-color: var(--accent); }
310
+ .dropdown-search input::placeholder { color: var(--text-muted); }
311
+
312
+ .dropdown-search-wrap {
313
+ position: relative;
314
+ }
315
+
316
+ .dropdown-search-wrap i {
317
+ position: absolute;
318
+ left: 10px;
319
+ top: 50%;
320
+ transform: translateY(-50%);
321
+ color: var(--text-muted);
322
+ font-size: 12px;
323
+ }
324
+
325
+ .dropdown-list {
326
+ max-height: 340px;
327
+ overflow-y: auto;
328
+ padding: 6px;
329
+ }
330
+
331
+ .dropdown-category {
332
+ padding: 6px 10px 4px;
333
+ font-size: 10px;
334
+ font-weight: 700;
335
+ text-transform: uppercase;
336
+ letter-spacing: 1px;
337
+ color: var(--text-muted);
338
+ }
339
+
340
+ .dropdown-item {
341
+ display: flex;
342
+ align-items: center;
343
+ gap: 10px;
344
+ padding: 8px 10px;
345
+ border-radius: 8px;
346
+ cursor: pointer;
347
+ transition: all 0.15s;
348
+ }
349
+
350
+ .dropdown-item:hover { background: var(--bg-hover); }
351
+
352
+ .dropdown-item.selected {
353
+ background: var(--accent-dim);
354
+ border: 1px solid rgba(108, 92, 231, 0.3);
355
+ }
356
+
357
+ .dropdown-item .dd-icon {
358
+ width: 28px;
359
+ height: 28px;
360
+ border-radius: 7px;
361
+ display: flex;
362
+ align-items: center;
363
+ justify-content: center;
364
+ font-size: 14px;
365
+ flex-shrink: 0;
366
+ }
367
+
368
+ .dropdown-item .dd-info { flex: 1; min-width: 0; }
369
+
370
+ .dropdown-item .dd-name {
371
+ font-size: 13px;
372
+ font-weight: 500;
373
+ color: var(--text-primary);
374
+ }
375
+
376
+ .dropdown-item .dd-desc {
377
+ font-size: 11px;
378
+ color: var(--text-muted);
379
+ overflow: hidden;
380
+ text-overflow: ellipsis;
381
+ white-space: nowrap;
382
+ }
383
+
384
+ .dropdown-item .dd-check {
385
+ color: var(--accent);
386
+ font-size: 13px;
387
+ opacity: 0;
388
+ }
389
+
390
+ .dropdown-item.selected .dd-check { opacity: 1; }
391
+
392
+ .dropdown-item .dd-tag {
393
+ font-size: 9px;
394
+ padding: 2px 6px;
395
+ border-radius: 4px;
396
+ font-weight: 600;
397
+ text-transform: uppercase;
398
+ }
399
+
400
+ /* ===== MAIN CONTENT ===== */
401
+ .main-content {
402
+ flex: 1;
403
+ display: flex;
404
+ overflow: hidden;
405
+ }
406
+
407
+ /* ===== SIDEBAR ===== */
408
+ .sidebar {
409
+ width: var(--sidebar-width);
410
+ background: var(--bg-secondary);
411
+ border-right: 1px solid var(--border);
412
+ display: flex;
413
+ flex-direction: column;
414
+ flex-shrink: 0;
415
+ transition: width 0.25s, opacity 0.25s;
416
+ overflow: hidden;
417
+ }
418
+
419
+ .sidebar.collapsed {
420
+ width: 0;
421
+ border-right: none;
422
+ }
423
+
424
+ .sidebar-section {
425
+ border-bottom: 1px solid var(--border);
426
+ }
427
+
428
+ .sidebar-section-header {
429
+ display: flex;
430
+ align-items: center;
431
+ justify-content: space-between;
432
+ padding: 12px 14px;
433
+ cursor: pointer;
434
+ transition: background 0.15s;
435
+ }
436
+
437
+ .sidebar-section-header:hover { background: var(--bg-hover); }
438
+
439
+ .sidebar-section-title {
440
+ display: flex;
441
+ align-items: center;
442
+ gap: 8px;
443
+ font-size: 11px;
444
+ font-weight: 700;
445
+ text-transform: uppercase;
446
+ letter-spacing: 0.8px;
447
+ color: var(--text-secondary);
448
+ }
449
+
450
+ .sidebar-section-title i { font-size: 12px; }
451
+
452
+ .sidebar-section-chevron {
453
+ font-size: 10px;
454
+ color: var(--text-muted);
455
+ transition: transform 0.2s;
456
+ }
457
+
458
+ .sidebar-section.collapsed .sidebar-section-chevron {
459
+ transform: rotate(-90deg);
460
+ }
461
+
462
+ .sidebar-section-content {
463
+ padding: 4px 8px 10px;
464
+ }
465
+
466
+ .sidebar-section.collapsed .sidebar-section-content {
467
+ display: none;
468
+ }
469
+
470
+ /* Model Card in Sidebar */
471
+ .model-card {
472
+ display: flex;
473
+ align-items: center;
474
+ gap: 10px;
475
+ padding: 10px;
476
+ background: var(--bg-tertiary);
477
+ border: 1px solid var(--border);
478
+ border-radius: 10px;
479
+ margin-bottom: 6px;
480
+ cursor: pointer;
481
+ transition: all 0.2s;
482
+ }
483
+
484
+ .model-card:hover {
485
+ border-color: var(--accent);
486
+ background: var(--bg-hover);
487
+ }
488
+
489
+ .model-card.active {
490
+ border-color: var(--accent);
491
+ box-shadow: 0 0 0 1px var(--accent-dim);
492
+ }
493
+
494
+ .model-card-icon {
495
+ width: 34px;
496
+ height: 34px;
497
+ border-radius: 8px;
498
+ display: flex;
499
+ align-items: center;
500
+ justify-content: center;
501
+ font-size: 16px;
502
+ flex-shrink: 0;
503
+ }
504
+
505
+ .model-card-info { flex: 1; min-width: 0; }
506
+
507
+ .model-card-name {
508
+ font-size: 12px;
509
+ font-weight: 600;
510
+ color: var(--text-primary);
511
+ overflow: hidden;
512
+ text-overflow: ellipsis;
513
+ white-space: nowrap;
514
+ }
515
+
516
+ .model-card-provider {
517
+ font-size: 10px;
518
+ color: var(--text-muted);
519
+ }
520
+
521
+ .model-card-check {
522
+ color: var(--accent);
523
+ font-size: 13px;
524
+ opacity: 0;
525
+ }
526
+
527
+ .model-card.active .model-card-check { opacity: 1; }
528
+
529
+ /* Language Pills */
530
+ .lang-grid {
531
+ display: grid;
532
+ grid-template-columns: repeat(2, 1fr);
533
+ gap: 4px;
534
+ }
535
+
536
+ .lang-pill {
537
+ display: flex;
538
+ align-items: center;
539
+ gap: 6px;
540
+ padding: 7px 10px;
541
+ border-radius: 7px;
542
+ cursor: pointer;
543
+ transition: all 0.2s;
544
+ font-size: 12px;
545
+ font-weight: 500;
546
+ color: var(--text-secondary);
547
+ border: 1px solid transparent;
548
+ }
549
+
550
+ .lang-pill:hover {
551
+ background: var(--bg-hover);
552
+ color: var(--text-primary);
553
+ }
554
+
555
+ .lang-pill.active {
556
+ background: var(--accent-dim);
557
+ color: var(--accent);
558
+ border-color: rgba(108, 92, 231, 0.3);
559
+ }
560
+
561
+ .lang-pill i { font-size: 14px; }
562
+
563
+ /* Quick Actions */
564
+ .quick-actions {
565
+ display: flex;
566
+ flex-direction: column;
567
+ gap: 4px;
568
+ padding: 8px;
569
+ }
570
+
571
+ .quick-action {
572
+ display: flex;
573
+ align-items: center;
574
+ gap: 10px;
575
+ padding: 8px 10px;
576
+ border-radius: 7px;
577
+ cursor: pointer;
578
+ transition: all 0.15s;
579
+ font-size: 12px;
580
+ color: var(--text-secondary);
581
+ }
582
+
583
+ .quick-action:hover {
584
+ background: var(--bg-hover);
585
+ color: var(--text-primary);
586
+ }
587
+
588
+ .quick-action i {
589
+ width: 18px;
590
+ text-align: center;
591
+ font-size: 13px;
592
+ }
593
+
594
+ .quick-action .qa-shortcut {
595
+ margin-left: auto;
596
+ font-size: 10px;
597
+ color: var(--text-muted);
598
+ font-family: 'JetBrains Mono', monospace;
599
+ }
600
+
601
+ /* ===== EDITOR AREA ===== */
602
+ .editor-area {
603
+ flex: 1;
604
+ display: flex;
605
+ flex-direction: column;
606
+ overflow: hidden;
607
+ min-width: 0;
608
+ }
609
+
610
+ /* Prompt Bar */
611
+ .prompt-bar {
612
+ display: flex;
613
+ align-items: flex-start;
614
+ gap: 10px;
615
+ padding: 12px 16px;
616
+ background: var(--bg-secondary);
617
+ border-bottom: 1px solid var(--border);
618
+ flex-shrink: 0;
619
+ }
620
+
621
+ .prompt-icon {
622
+ width: 32px;
623
+ height: 32px;
624
+ background: linear-gradient(135deg, var(--accent), var(--blue));
625
+ border-radius: 8px;
626
+ display: flex;
627
+ align-items: center;
628
+ justify-content: center;
629
+ font-size: 14px;
630
+ color: #fff;
631
+ flex-shrink: 0;
632
+ margin-top: 2px;
633
+ }
634
+
635
+ .prompt-input-wrap {
636
+ flex: 1;
637
+ position: relative;
638
+ }
639
+
640
+ .prompt-input {
641
+ width: 100%;
642
+ background: var(--bg-tertiary);
643
+ border: 1px solid var(--border);
644
+ color: var(--text-primary);
645
+ padding: 8px 14px;
646
+ font-size: 13px;
647
+ border-radius: 10px;
648
+ outline: none;
649
+ font-family: 'Inter', sans-serif;
650
+ resize: none;
651
+ min-height: 36px;
652
+ max-height: 120px;
653
+ transition: border-color 0.2s, box-shadow 0.2s;
654
+ line-height: 1.5;
655
+ }
656
+
657
+ .prompt-input:focus {
658
+ border-color: var(--accent);
659
+ box-shadow: 0 0 0 3px var(--accent-dim);
660
+ }
661
+
662
+ .prompt-input::placeholder { color: var(--text-muted); }
663
+
664
+ .prompt-send {
665
+ width: 36px;
666
+ height: 36px;
667
+ background: linear-gradient(135deg, var(--accent), #8b5cf6);
668
+ border: none;
669
+ border-radius: 8px;
670
+ color: #fff;
671
+ cursor: pointer;
672
+ font-size: 14px;
673
+ display: flex;
674
+ align-items: center;
675
+ justify-content: center;
676
+ transition: all 0.2s;
677
+ flex-shrink: 0;
678
+ margin-top: 2px;
679
+ }
680
+
681
+ .prompt-send:hover {
682
+ transform: scale(1.05);
683
+ box-shadow: 0 2px 12px var(--accent-glow);
684
+ }
685
+
686
+ /* Tabs */
687
+ .tabbar {
688
+ display: flex;
689
+ align-items: stretch;
690
+ height: 38px;
691
+ background: var(--bg-secondary);
692
+ border-bottom: 1px solid var(--border);
693
+ overflow-x: auto;
694
+ flex-shrink: 0;
695
+ }
696
+
697
+ .tabbar::-webkit-scrollbar { height: 0; }
698
+
699
+ .tab {
700
+ display: flex;
701
+ align-items: center;
702
+ gap: 6px;
703
+ padding: 0 16px;
704
+ font-size: 12px;
705
+ color: var(--text-muted);
706
+ cursor: pointer;
707
+ border-right: 1px solid var(--border);
708
+ white-space: nowrap;
709
+ position: relative;
710
+ transition: all 0.15s;
711
+ }
712
+
713
+ .tab:hover { background: var(--bg-tertiary); color: var(--text-secondary); }
714
+
715
+ .tab.active {
716
+ background: var(--bg-primary);
717
+ color: var(--text-primary);
718
+ }
719
+
720
+ .tab.active::after {
721
+ content: '';
722
+ position: absolute;
723
+ top: 0;
724
+ left: 0;
725
+ right: 0;
726
+ height: 2px;
727
+ background: linear-gradient(90deg, var(--accent), var(--blue));
728
+ }
729
+
730
+ .tab .tab-icon { font-size: 13px; }
731
+
732
+ .tab .tab-close {
733
+ margin-left: 8px;
734
+ width: 18px;
735
+ height: 18px;
736
+ display: flex;
737
+ align-items: center;
738
+ justify-content: center;
739
+ border-radius: 4px;
740
+ font-size: 10px;
741
+ opacity: 0;
742
+ transition: all 0.15s;
743
+ }
744
+
745
+ .tab:hover .tab-close, .tab.active .tab-close { opacity: 0.7; }
746
+ .tab .tab-close:hover { opacity: 1; background: var(--bg-hover); }
747
+
748
+ .tab .tab-modified {
749
+ margin-left: 8px;
750
+ width: 6px;
751
+ height: 6px;
752
+ background: var(--green);
753
+ border-radius: 50%;
754
+ }
755
+
756
+ /* Editor Container */
757
+ .editor-container {
758
+ flex: 1;
759
+ display: flex;
760
+ overflow: hidden;
761
+ position: relative;
762
+ }
763
+
764
+ .line-numbers {
765
+ width: 54px;
766
+ background: var(--bg-primary);
767
+ padding: 14px 0;
768
+ text-align: right;
769
+ font-family: 'JetBrains Mono', monospace;
770
+ font-size: 13px;
771
+ line-height: 1.65;
772
+ color: var(--text-muted);
773
+ user-select: none;
774
+ overflow: hidden;
775
+ flex-shrink: 0;
776
+ }
777
+
778
+ .line-num {
779
+ padding-right: 16px;
780
+ height: 21.45px;
781
+ display: flex;
782
+ align-items: center;
783
+ justify-content: flex-end;
784
+ }
785
+
786
+ .line-num.active { color: var(--text-primary); }
787
+
788
+ .code-editor {
789
+ flex: 1;
790
+ padding: 14px 18px;
791
+ font-family: 'JetBrains Mono', monospace;
792
+ font-size: 13px;
793
+ line-height: 1.65;
794
+ color: var(--text-primary);
795
+ background: var(--bg-primary);
796
+ border: none;
797
+ outline: none;
798
+ resize: none;
799
+ overflow: auto;
800
+ white-space: pre;
801
+ tab-size: 2;
802
+ }
803
+
804
+ .code-editor::selection { background: var(--accent-dim); }
805
+
806
+ /* Minimap */
807
+ .minimap {
808
+ width: 56px;
809
+ background: var(--bg-primary);
810
+ border-left: 1px solid var(--border);
811
+ overflow: hidden;
812
+ position: relative;
813
+ flex-shrink: 0;
814
+ cursor: pointer;
815
+ }
816
+
817
+ .minimap-content {
818
+ padding: 14px 4px;
819
+ transform: scaleX(0.35) scaleY(0.35);
820
+ transform-origin: top right;
821
+ font-family: 'JetBrains Mono', monospace;
822
+ font-size: 13px;
823
+ line-height: 1.65;
824
+ color: var(--text-muted);
825
+ white-space: pre;
826
+ opacity: 0.5;
827
+ pointer-events: none;
828
+ }
829
+
830
+ .minimap-viewport {
831
+ position: absolute;
832
+ top: 0;
833
+ left: 0;
834
+ right: 0;
835
+ height: 40px;
836
+ background: rgba(108, 92, 231, 0.08);
837
+ border: 1px solid rgba(108, 92, 231, 0.2);
838
+ border-radius: 2px;
839
+ pointer-events: none;
840
+ transition: top 0.1s;
841
+ }
842
+
843
+ /* ===== BOTTOM PANEL ===== */
844
+ .panel-area {
845
+ border-top: 1px solid var(--border);
846
+ flex-shrink: 0;
847
+ display: flex;
848
+ flex-direction: column;
849
+ background: var(--bg-secondary);
850
+ }
851
+
852
+ .panel-area.hidden { display: none; }
853
+
854
+ .panel-tabs {
855
+ display: flex;
856
+ align-items: center;
857
+ height: 34px;
858
+ border-bottom: 1px solid var(--border);
859
+ padding: 0 10px;
860
+ gap: 2px;
861
+ }
862
+
863
+ .panel-tab {
864
+ padding: 5px 14px;
865
+ font-size: 12px;
866
+ color: var(--text-muted);
867
+ cursor: pointer;
868
+ border-radius: 5px;
869
+ transition: all 0.15s;
870
+ position: relative;
871
+ }
872
+
873
+ .panel-tab:hover { color: var(--text-secondary); }
874
+
875
+ .panel-tab.active {
876
+ color: var(--text-primary);
877
+ background: var(--bg-hover);
878
+ }
879
+
880
+ .panel-tab .badge {
881
+ background: var(--red);
882
+ color: #fff;
883
+ font-size: 9px;
884
+ padding: 1px 5px;
885
+ border-radius: 8px;
886
+ margin-left: 4px;
887
+ font-weight: 600;
888
+ }
889
+
890
+ .panel-actions {
891
+ margin-left: auto;
892
+ display: flex;
893
+ gap: 4px;
894
+ }
895
+
896
+ .panel-actions button {
897
+ background: none;
898
+ border: none;
899
+ color: var(--text-muted);
900
+ cursor: pointer;
901
+ font-size: 13px;
902
+ padding: 4px 6px;
903
+ border-radius: 4px;
904
+ transition: all 0.15s;
905
+ }
906
+
907
+ .panel-actions button:hover {
908
+ color: var(--text-primary);
909
+ background: var(--bg-hover);
910
+ }
911
+
912
+ .terminal {
913
+ height: 180px;
914
+ overflow-y: auto;
915
+ padding: 10px 16px;
916
+ font-family: 'JetBrains Mono', monospace;
917
+ font-size: 12px;
918
+ line-height: 1.6;
919
+ background: var(--bg-primary);
920
+ }
921
+
922
+ .terminal-line { margin-bottom: 2px; }
923
+ .terminal-prompt { color: var(--green); }
924
+ .terminal-path { color: var(--blue); }
925
+ .terminal-cmd { color: var(--text-primary); }
926
+ .terminal-output { color: var(--text-secondary); }
927
+ .terminal-error { color: var(--red); }
928
+ .terminal-info { color: var(--accent); }
929
+
930
+ .terminal-input-line {
931
+ display: flex;
932
+ align-items: center;
933
+ gap: 8px;
934
+ margin-top: 4px;
935
+ }
936
+
937
+ .terminal-input {
938
+ flex: 1;
939
+ background: transparent;
940
+ border: none;
941
+ color: var(--text-primary);
942
+ font-family: 'JetBrains Mono', monospace;
943
+ font-size: 12px;
944
+ outline: none;
945
+ }
946
+
947
+ /* ===== STATUS BAR ===== */
948
+ .statusbar {
949
+ display: flex;
950
+ align-items: center;
951
+ justify-content: space-between;
952
+ height: var(--statusbar-height);
953
+ background: linear-gradient(90deg, var(--accent), #8b5cf6);
954
+ padding: 0 12px;
955
+ font-size: 11px;
956
+ color: #fff;
957
+ flex-shrink: 0;
958
+ }
959
+
960
+ .statusbar-left, .statusbar-right {
961
+ display: flex;
962
+ align-items: center;
963
+ gap: 2px;
964
+ }
965
+
966
+ .status-item {
967
+ display: flex;
968
+ align-items: center;
969
+ gap: 4px;
970
+ padding: 0 8px;
971
+ cursor: pointer;
972
+ height: 100%;
973
+ transition: background 0.15s;
974
+ border-radius: 3px;
975
+ }
976
+
977
+ .status-item:hover { background: rgba(255,255,255,0.15); }
978
+ .status-item i { font-size: 11px; }
979
+
980
+ /* ===== NOTIFICATIONS ===== */
981
+ .notification-area {
982
+ position: fixed;
983
+ bottom: 40px;
984
+ right: 16px;
985
+ z-index: 2000;
986
+ display: flex;
987
+ flex-direction: column;
988
+ gap: 8px;
989
+ }
990
+
991
+ .notification {
992
+ display: flex;
993
+ align-items: flex-start;
994
+ gap: 10px;
995
+ padding: 12px 16px;
996
+ background: var(--bg-secondary);
997
+ border: 1px solid var(--border);
998
+ border-radius: 10px;
999
+ box-shadow: 0 8px 32px rgba(0,0,0,0.5);
1000
+ min-width: 300px;
1001
+ max-width: 400px;
1002
+ animation: notifIn 0.3s ease;
1003
+ font-size: 13px;
1004
+ }
1005
+
1006
+ .notification.hiding { animation: notifOut 0.3s ease forwards; }
1007
+
1008
+ @keyframes notifIn {
1009
+ from { opacity: 0; transform: translateX(30px); }
1010
+ to { opacity: 1; transform: translateX(0); }
1011
+ }
1012
+
1013
+ @keyframes notifOut {
1014
+ from { opacity: 1; transform: translateX(0); }
1015
+ to { opacity: 0; transform: translateX(30px); }
1016
+ }
1017
+
1018
+ .notif-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
1019
+ .notif-icon.info { color: var(--blue); }
1020
+ .notif-icon.success { color: var(--green); }
1021
+ .notif-icon.warning { color: var(--yellow); }
1022
+ .notif-icon.error { color: var(--red); }
1023
+
1024
+ .notif-content { flex: 1; }
1025
+ .notif-title { font-weight: 600; margin-bottom: 2px; font-size: 13px; }
1026
+ .notif-msg { color: var(--text-secondary); font-size: 12px; }
1027
+
1028
+ .notif-close {
1029
+ background: none;
1030
+ border: none;
1031
+ color: var(--text-muted);
1032
+ cursor: pointer;
1033
+ font-size: 14px;
1034
+ padding: 0;
1035
+ transition: color 0.15s;
1036
+ }
1037
+
1038
+ .notif-close:hover { color: var(--text-primary); }
1039
+
1040
+ /* ===== TYPING ANIMATION ===== */
1041
+ @keyframes blink {
1042
+ 0%, 100% { opacity: 1; }
1043
+ 50% { opacity: 0; }
1044
+ }
1045
+
1046
+ .cursor-blink {
1047
+ display: inline-block;
1048
+ width: 2px;
1049
+ height: 16px;
1050
+ background: var(--accent);
1051
+ animation: blink 1s step-end infinite;
1052
+ vertical-align: middle;
1053
+ margin-left: 1px;
1054
+ }
1055
+
1056
+ /* ===== RESPONSIVE ===== */
1057
+ @media (max-width: 900px) {
1058
+ .sidebar { display: none; }
1059
+ .minimap { display: none; }
1060
+ .selector-btn .sel-label { display: none; }
1061
+ .generate-btn span { display: none; }
1062
+ .generate-btn { padding: 7px 12px; }
1063
+ }
1064
+
1065
+ @media (max-width: 600px) {
1066
+ .header { padding: 0 8px; gap: 6px; }
1067
+ .logo span { display: none; }
1068
+ .anycoder-link { display: none; }
1069
+ .header-separator { display: none; }
1070
+ .prompt-bar { padding: 8px 10px; }
1071
+ }
1072
+
1073
+ /* Ambient glow effect */
1074
+ .glow-orb {
1075
+ position: fixed;
1076
+ width: 300px;
1077
+ height: 300px;
1078
+ border-radius: 50%;
1079
+ pointer-events: none;
1080
+ z-index: 0;
1081
+ filter: blur(100px);
1082
+ opacity: 0.04;
1083
+ }
1084
+
1085
+ .glow-orb.orb1 {
1086
+ top: -100px;
1087
+ right: -100px;
1088
+ background: var(--accent);
1089
+ }
1090
+
1091
+ .glow-orb.orb2 {
1092
+ bottom: -100px;
1093
+ left: -100px;
1094
+ background: var(--blue);
1095
+ }
1096
+ </style>
 
 
 
 
 
 
 
1097
  </head>
1098
  <body>
1099
+ <div class="glow-orb orb1"></div>
1100
+ <div class="glow-orb orb2"></div>
1101
+
1102
+ <div class="app">
1103
+ <!-- Header -->
1104
+ <div class="header">
1105
+ <div class="logo">
1106
+ <div class="logo-icon"><i class="fa-solid fa-bolt"></i></div>
1107
+ <span>CodeForge</span>
1108
+ </div>
1109
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
1110
+ <div class="header-separator"></div>
1111
+
1112
+ <div class="selector-group">
1113
+ <!-- Language Selector -->
1114
+ <button class="selector-btn" id="langSelectorBtn">
1115
+ <span class="sel-icon" id="langSelIcon" style="background:var(--yellow-dim);color:var(--yellow);">
1116
+ <i class="fa-brands fa-js"></i>
1117
+ </span>
1118
+ <span class="sel-label" id="langSelLabel">JavaScript</span>
1119
+ <i class="fa-solid fa-chevron-down sel-chevron"></i>
1120
+ </button>
1121
+
1122
+ <!-- Model Selector -->
1123
+ <button class="selector-btn" id="modelSelectorBtn">
1124
+ <span class="sel-icon" id="modelSelIcon" style="background:var(--accent-dim);color:var(--accent);">
1125
+ <i class="fa-solid fa-brain"></i>
1126
+ </span>
1127
+ <span class="sel-label" id="modelSelLabel">GPT-4o</span>
1128
+ <i class="fa-solid fa-chevron-down sel-chevron"></i>
1129
+ </button>
1130
+ </div>
1131
+
1132
+ <div class="header-spacer"></div>
1133
+
1134
+ <div class="header-actions">
1135
+ <button class="header-action-btn" id="toggleSidebarBtn" title="Toggle Sidebar">
1136
+ <i class="fa-solid fa-bars"></i>
1137
+ </button>
1138
+ <button class="header-action-btn" id="toggleTerminalBtn" title="Toggle Terminal">
1139
+ <i class="fa-solid fa-terminal"></i>
1140
+ </button>
1141
+ <button class="header-action-btn" title="Settings">
1142
+ <i class="fa-solid fa-gear"></i>
1143
+ </button>
1144
+ <button class="generate-btn" id="generateBtn">
1145
+ <i class="fa-solid fa-wand-magic-sparkles"></i>
1146
+ <span>Generate</span>
1147
+ </button>
1148
+ </div>
1149
+ </div>
1150
+
1151
+ <!-- Main Content -->
1152
+ <div class="main-content">
1153
+ <!-- Sidebar -->
1154
+ <div class="sidebar" id="sidebar">
1155
+ <!-- AI Models Section -->
1156
+ <div class="sidebar-section" id="modelsSection">
1157
+ <div class="sidebar-section-header" onclick="toggleSection('modelsSection')">
1158
+ <div class="sidebar-section-title">
1159
+ <i class="fa-solid fa-brain"></i>
1160
+ AI Models
1161
  </div>
1162
+ <i class="fa-solid fa-chevron-down sidebar-section-chevron"></i>
1163
+ </div>
1164
+ <div class="sidebar-section-content" id="sidebarModels"></div>
1165
+ </div>
1166
+
1167
+ <!-- Languages Section -->
1168
+ <div class="sidebar-section" id="langsSection">
1169
+ <div class="sidebar-section-header" onclick="toggleSection('langsSection')">
1170
+ <div class="sidebar-section-title">
1171
+ <i class="fa-solid fa-code"></i>
1172
+ Languages
1173
  </div>
1174
+ <i class="fa-solid fa-chevron-down sidebar-section-chevron"></i>
1175
+ </div>
1176
+ <div class="sidebar-section-content">
1177
+ <div class="lang-grid" id="sidebarLangs"></div>
1178
+ </div>
1179
  </div>
1180
 
1181
+ <!-- Quick Actions -->
1182
+ <div class="sidebar-section" id="actionsSection">
1183
+ <div class="sidebar-section-header" onclick="toggleSection('actionsSection')">
1184
+ <div class="sidebar-section-title">
1185
+ <i class="fa-solid fa-bolt"></i>
1186
+ Quick Actions
 
 
 
 
 
 
 
 
1187
  </div>
1188
+ <i class="fa-solid fa-chevron-down sidebar-section-chevron"></i>
1189
+ </div>
1190
+ <div class="sidebar-section-content">
1191
+ <div class="quick-actions">
1192
+ <div class="quick-action" onclick="handleQuickAction('explain')">
1193
+ <i class="fa-solid fa-lightbulb"></i>
1194
+ Explain Code
1195
+ <span class="qa-shortcut">Ctrl+E</span>
1196
+ </div>
1197
+ <div class="quick-action" onclick="handleQuickAction('refactor')">
1198
+ <i class="fa-solid fa-arrows-rotate"></i>
1199
+ Refactor
1200
+ <span class="qa-shortcut">Ctrl+R</span>
1201
+ </div>
1202
+ <div class="quick-action" onclick="handleQuickAction('debug')">
1203
+ <i class="fa-solid fa-bug"></i>
1204
+ Debug
1205
+ <span class="qa-shortcut">Ctrl+D</span>
1206
+ </div>
1207
+ <div class="quick-action" onclick="handleQuickAction('optimize')">
1208
+ <i class="fa-solid fa-gauge-high"></i>
1209
+ Optimize
1210
+ <span class="qa-shortcut">Ctrl+O</span>
1211
+ </div>
1212
+ <div class="quick-action" onclick="handleQuickAction('document')">
1213
+ <i class="fa-solid fa-file-lines"></i>
1214
+ Document
1215
+ <span class="qa-shortcut">Ctrl+Shift+D</span>
1216
+ </div>
1217
+ <div class="quick-action" onclick="handleQuickAction('test')">
1218
+ <i class="fa-solid fa-flask"></i>
1219
+ Generate Tests
1220
+ <span class="qa-shortcut">Ctrl+T</span>
1221
+ </div>
1222
+ </div>
1223
+ </div>
1224
+ </div>
1225
+ </div>
1226
+
1227
+ <!-- Editor Area -->
1228
+ <div class="editor-area">
1229
+ <!-- Prompt Bar -->
1230
+ <div class="prompt-bar">
1231
+ <div class="prompt-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
1232
+ <div class="prompt-input-wrap">
1233
+ <textarea class="prompt-input" id="promptInput" rows="1" placeholder="Describe what you want to generate... (e.g., 'Create a React hook for fetching data with caching')"></textarea>
1234
+ </div>
1235
+ <button class="prompt-send" id="promptSendBtn" title="Send">
1236
+ <i class="fa-solid fa-paper-plane"></i>
1237
+ </button>
1238
+ </div>
1239
+
1240
+ <!-- Tabs -->
1241
+ <div class="tabbar" id="tabbar">
1242
+ <div class="tab active" data-tab="main">
1243
+ <i class="fa-brands fa-js tab-icon" id="tabIcon" style="color:var(--yellow);"></i>
1244
+ <span id="tabName">index.js</span>
1245
+ <span class="tab-close" onclick="event.stopPropagation();"><i class="fa-solid fa-xmark"></i></span>
1246
+ </div>
1247
+ </div>
1248
 
1249
+ <!-- Editor -->
1250
+ <div class="editor-container">
1251
+ <div class="line-numbers" id="lineNumbers"></div>
1252
+ <textarea class="code-editor" id="codeEditor" spellcheck="false"></textarea>
1253
+ <div class="minimap">
1254
+ <div class="minimap-content" id="minimapContent"></div>
1255
+ <div class="minimap-viewport" id="minimapViewport"></div>
1256
+ </div>
1257
+ </div>
1258
+
1259
+ <!-- Bottom Panel -->
1260
+ <div class="panel-area" id="panelArea">
1261
+ <div class="panel-tabs">
1262
+ <div class="panel-tab active" data-panel="terminal">Terminal</div>
1263
+ <div class="panel-tab" data-panel="output">Output</div>
1264
+ <div class="panel-tab" data-panel="problems">Problems <span class="badge">2</span></div>
1265
+ <div class="panel-actions">
1266
+ <button onclick="document.getElementById('panelArea').classList.add('hidden')"><i class="fa-solid fa-xmark"></i></button>
1267
+ </div>
1268
+ </div>
1269
+ <div class="terminal" id="terminal">
1270
+ <div class="terminal-line">
1271
+ <span class="terminal-prompt">~<span class="terminal-path">/my-project</span>$</span>
1272
+ <span class="terminal-cmd">npm run dev</span>
1273
+ </div>
1274
+ <div class="terminal-line"><span class="terminal-output"> VITE v5.0.12 ready in 342 ms</span></div>
1275
+ <div class="terminal-line"><span class="terminal-output"> ➜ Local: http://localhost:5173/</span></div>
1276
+ <div class="terminal-line"><span class="terminal-output"> ➜ Network: http://192.168.1.42:5173/</span></div>
1277
+ <div class="terminal-line"><span class="terminal-info"> ready in 342ms</span></div>
1278
+ <div class="terminal-input-line">
1279
+ <span class="terminal-prompt">~<span class="terminal-path">/my-project</span>$</span>
1280
+ <input type="text" class="terminal-input" id="terminalInput" placeholder="Type a command...">
1281
+ </div>
1282
+ </div>
1283
+ </div>
1284
+ </div>
1285
+ </div>
1286
+
1287
+ <!-- Status Bar -->
1288
+ <div class="statusbar">
1289
+ <div class="statusbar-left">
1290
+ <div class="status-item"><i class="fa-solid fa-code-branch"></i> main</div>
1291
+ <div class="status-item"><i class="fa-solid fa-circle-check"></i> 0 errors</div>
1292
+ <div class="status-item"><i class="fa-solid fa-triangle-exclamation"></i> 2 warnings</div>
1293
+ </div>
1294
+ <div class="statusbar-right">
1295
+ <div class="status-item" id="statusLang"><i class="fa-brands fa-js"></i> JavaScript</div>
1296
+ <div class="status-item" id="statusModel"><i class="fa-solid fa-brain"></i> GPT-4o</div>
1297
+ <div class="status-item">Ln 1, Col 1</div>
1298
+ <div class="status-item">UTF-8</div>
1299
+ <div class="status-item">Spaces: 2</div>
1300
+ </div>
1301
+ </div>
1302
+ </div>
1303
+
1304
+ <!-- Language Dropdown -->
1305
+ <div class="dropdown-overlay" id="langDropdownOverlay"></div>
1306
+ <div class="dropdown-panel" id="langDropdown" style="left:120px;width:320px;">
1307
+ <div class="dropdown-search">
1308
+ <div class="dropdown-search-wrap">
1309
+ <i class="fa-solid fa-magnifying-glass"></i>
1310
+ <input type="text" placeholder="Search languages..." id="langSearchInput">
1311
+ </div>
1312
+ </div>
1313
+ <div class="dropdown-list" id="langDropdownList"></div>
1314
+ </div>
1315
+
1316
+ <!-- Model Dropdown -->
1317
+ <div class="dropdown-overlay" id="modelDropdownOverlay"></div>
1318
+ <div class="dropdown-panel" id="modelDropdown" style="left