Hugging Face's logo

Spaces:
Rudert
/
VicoX
Sleeping

App Files Community
Rudert commited on
Commit
34a6d53
·
verified ·
1 Parent(s): 2800f96

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +1037 -1009
style.css CHANGED
@@ -3,168 +3,120 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NexusAI - Advanced Chat Interface</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
9
  <style>
10
- /* ===== BASE STYLES & VARIABLES ===== */
11
- :root {
12
- --primary-bg: #0f111a;
13
- --secondary-bg: #1a1d29;
14
- --tertiary-bg: #25293a;
15
- --accent-primary: #7e57ff;
16
- --accent-secondary: #6366f1;
17
- --accent-tertiary: #8b5cf6;
18
- --accent-glow: rgba(126, 87, 255, 0.35);
19
- --text-primary: #f0f4ff;
20
- --text-secondary: #a5b4fc;
21
- --border-primary: rgba(126, 87, 255, 0.15);
22
- --success: #10b981;
23
- --warning: #f59e0b;
24
- --danger: #ef4444;
25
- --glass-bg: rgba(30, 35, 55, 0.7);
26
- --glass-border: rgba(100, 116, 189, 0.2);
27
- --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
28
- --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.25);
29
- --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.4);
30
- --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
31
- --transition-normal: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
32
- --transition-slow: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
33
- --border-radius-sm: 8px;
34
- --border-radius-md: 16px;
35
- --border-radius-lg: 24px;
36
- --border-radius-full: 9999px;
37
- }
38
-
39
  * {
40
  box-sizing: border-box;
41
  margin: 0;
42
  padding: 0;
43
  }
44
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  body {
46
- background: radial-gradient(circle at 10% 20%, rgba(60, 30, 120, 0.15) 0%, rgba(15, 17, 26, 0) 40%),
47
- radial-gradient(circle at 90% 80%, rgba(126, 87, 255, 0.1) 0%, rgba(15, 17, 26, 0) 40%);
48
  background-color: var(--primary-bg);
49
- color: var(--text-primary);
50
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
51
- line-height: 1.5;
52
  height: 100vh;
53
  overflow: hidden;
 
 
 
 
 
54
  position: relative;
55
  }
56
 
57
- body::before {
58
- content: '';
59
  position: fixed;
60
  top: 0;
61
  left: 0;
62
- width: 100%;
63
- height: 100%;
64
- background:
65
- radial-gradient(circle at 10% 20%, rgba(126, 87, 255, 0.05) 0%, transparent 25%),
66
- radial-gradient(circle at 90% 80%, rgba(74, 222, 128, 0.05) 0%, transparent 25%);
67
- z-index: -1;
 
68
  }
69
 
70
- /* ===== APP LAYOUT ===== */
71
- #app {
72
- display: flex;
73
- height: 100vh;
74
- position: relative;
75
- overflow: hidden;
76
  }
77
 
78
- /* ===== SIDEBAR ===== */
79
  .sidebar {
80
- width: 280px;
81
- background: linear-gradient(160deg, var(--secondary-bg) 0%, #151824 100%);
82
- border-right: 1px solid var(--border-primary);
83
  padding: 1.5rem;
84
  overflow-y: auto;
 
 
 
85
  position: fixed;
86
- left: 0;
87
- top: 0;
88
  height: 100%;
89
- z-index: 100;
90
- transform: translateX(-100%);
91
- transition: var(--transition-normal);
92
- box-shadow: var(--shadow-md);
93
  }
94
 
95
  .sidebar.open {
96
  transform: translateX(0);
97
  }
98
 
99
- .sidebar::after {
100
- content: '';
101
- position: absolute;
102
- top: 0;
103
- left: 0;
104
- right: 0;
105
- height: 6px;
106
- background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
107
- border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
108
- }
109
-
110
  .sidebar-header {
111
  display: flex;
112
  justify-content: space-between;
113
  align-items: center;
114
  margin-bottom: 1.5rem;
115
  padding-bottom: 1rem;
116
- border-bottom: 1px solid var(--border-primary);
117
- position: relative;
118
- }
119
-
120
- .sidebar-header::after {
121
- content: '';
122
- position: absolute;
123
- bottom: -1px;
124
- left: 0;
125
- right: 0;
126
- height: 1px;
127
- background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
128
  }
129
 
130
- .logo {
131
- display: flex;
132
- align-items: center;
133
- gap: 0.75rem;
134
- font-weight: 800;
135
- font-size: 1.4rem;
136
- background: linear-gradient(90deg, var(--accent-primary), #a78bfa);
137
- -webkit-background-clip: text;
138
- -webkit-text-fill-color: transparent;
139
- text-shadow: 0 0 10px rgba(126, 87, 255, 0.3);
140
- }
141
-
142
- .logo i {
143
- font-size: 1.8rem;
144
- background: linear-gradient(90deg, var(--accent-primary), #a78bfa);
145
- -webkit-background-clip: text;
146
- -webkit-text-fill-color: transparent;
147
  }
148
 
149
  .close-btn {
150
- background: rgba(255, 255, 255, 0.1);
151
  border: none;
152
  color: var(--text-secondary);
153
- font-size: 1.2rem;
154
- width: 36px;
155
- height: 36px;
156
- border-radius: var(--border-radius-full);
157
  cursor: pointer;
158
- transition: var(--transition-fast);
 
 
 
159
  display: flex;
160
  align-items: center;
161
  justify-content: center;
162
  }
163
 
164
  .close-btn:hover {
165
- background: rgba(126, 87, 255, 0.2);
166
- color: var(--accent-primary);
167
- transform: rotate(90deg);
168
  }
169
 
170
  .sidebar-section {
@@ -178,25 +130,18 @@
178
  text-transform: uppercase;
179
  letter-spacing: 1px;
180
  font-weight: 600;
181
- display: flex;
182
- align-items: center;
183
- gap: 0.5rem;
184
- }
185
-
186
- .sidebar-section h4 i {
187
- color: var(--accent-primary);
188
  }
189
 
190
  .sidebar-item {
191
- padding: 0.85rem 1.2rem;
192
- border-radius: var(--border-radius-md);
193
  margin-bottom: 0.5rem;
194
  cursor: pointer;
195
- transition: var(--transition-fast);
196
  display: flex;
197
  align-items: center;
198
- gap: 0.9rem;
199
- font-size: 0.98rem;
200
  position: relative;
201
  overflow: hidden;
202
  }
@@ -205,163 +150,167 @@
205
  content: '';
206
  position: absolute;
207
  top: 0;
208
- left: 0;
209
- width: 4px;
210
  height: 100%;
211
- background: var(--accent-primary);
212
- transform: scaleY(0);
213
- transform-origin: bottom;
214
- transition: var(--transition-fast);
215
- border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
216
- }
217
-
218
- .sidebar-item:hover {
219
- background: rgba(126, 87, 255, 0.12);
220
  }
221
 
222
  .sidebar-item:hover::before {
223
- transform: scaleY(1);
224
  }
225
 
226
- .sidebar-item.active {
227
- background: rgba(126, 87, 255, 0.15);
228
- border-left: none;
 
229
  }
230
 
231
- .sidebar-item.active::before {
232
- transform: scaleY(1);
 
 
233
  }
234
 
235
  .sidebar-item i {
236
- font-size: 1.1rem;
237
  width: 24px;
238
- color: var(--text-secondary);
239
- }
240
-
241
- .sidebar-item:hover i,
242
- .sidebar-item.active i {
243
- color: var(--accent-primary);
244
- transform: scale(1.1);
245
- }
246
-
247
- .sidebar-item span {
248
- transition: var(--transition-fast);
249
- }
250
-
251
- .sidebar-item:hover span,
252
- .sidebar-item.active span {
253
- color: var(--accent-primary);
254
- font-weight: 500;
255
- }
256
-
257
- .sidebar-footer {
258
- margin-top: 2rem;
259
- padding-top: 1.5rem;
260
- border-top: 1px solid var(--border-primary);
261
- font-size: 0.85rem;
262
- color: var(--text-secondary);
263
  text-align: center;
264
  }
265
 
266
- /* ===== MAIN CONTENT ===== */
267
  .main-content {
268
  flex: 1;
269
  display: flex;
270
  flex-direction: column;
271
  position: relative;
272
- margin-left: 0;
273
- transition: margin-left 0.3s ease;
274
  }
275
 
276
- .sidebar.open + .main-content {
277
- margin-left: 280px;
278
- }
279
-
280
- /* ===== HEADER ===== */
281
  .header {
282
- background: var(--glass-bg);
283
- backdrop-filter: blur(12px);
284
- -webkit-backdrop-filter: blur(12px);
285
- border-bottom: 1px solid var(--glass-border);
286
- padding: 0.8rem 1.8rem;
287
  display: flex;
288
  justify-content: space-between;
289
  align-items: center;
290
  position: sticky;
291
  top: 0;
292
- z-index: 90;
293
- box-shadow: var(--shadow-sm);
294
  }
295
 
296
  .header-left {
297
  display: flex;
298
  align-items: center;
299
- gap: 1.2rem;
300
  }
301
 
302
  .hamburger-btn {
303
- background: rgba(255, 255, 255, 0.08);
304
  border: none;
305
  color: var(--text-secondary);
306
- font-size: 1.4rem;
307
- width: 42px;
308
- height: 42px;
309
- border-radius: var(--border-radius-md);
310
  cursor: pointer;
311
- transition: var(--transition-fast);
 
 
 
312
  display: flex;
313
  align-items: center;
314
  justify-content: center;
315
  }
316
 
317
  .hamburger-btn:hover {
318
- background: rgba(126, 87, 255, 0.2);
319
- color: var(--accent-primary);
320
- transform: scale(1.05);
321
  }
322
 
323
- .mode-selector, .model-selector {
324
- background: rgba(30, 35, 55, 0.8);
325
- border: 1px solid var(--glass-border);
326
- border-radius: var(--border-radius-md);
327
- padding: 0.6rem 1rem;
328
- color: var(--text-color);
329
- font-size: 0.9rem;
330
- min-width: 160px;
331
- backdrop-filter: blur(6px);
332
- transition: var(--transition-fast);
333
  }
334
 
335
- .mode-selector:hover, .model-selector:hover {
336
- border-color: var(--accent-primary);
337
- box-shadow: 0 0 0 2px var(--accent-glow);
 
 
 
 
338
  }
339
 
340
  .header-right {
341
  display: flex;
342
  align-items: center;
343
- gap: 0.9rem;
344
  }
345
 
346
- .user-profile {
347
- width: 36px;
348
- height: 36px;
349
- border-radius: var(--border-radius-full);
350
- background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
351
  display: flex;
352
  align-items: center;
353
- justify-content: center;
354
- font-weight: 600;
355
- cursor: pointer;
356
- transition: var(--transition-fast);
 
 
 
 
 
 
 
 
 
 
 
357
  }
358
 
359
- .user-profile:hover {
360
- transform: scale(1.08);
361
- box-shadow: 0 0 0 3px var(--accent-glow);
362
  }
363
 
364
- /* ===== TAB NAVIGATION ===== */
 
 
 
 
 
365
  .tab-container {
366
  flex: 1;
367
  display: flex;
@@ -371,67 +320,44 @@
371
 
372
  .tab-header {
373
  display: flex;
374
- background: var(--glass-bg);
375
- border-bottom: 1px solid var(--glass-border);
376
  padding: 0 1rem;
377
- backdrop-filter: blur(10px);
378
- position: relative;
379
- }
380
-
381
- .tab-header::after {
382
- content: '';
383
- position: absolute;
384
- bottom: 0;
385
- left: 0;
386
- width: 100px;
387
- height: 3px;
388
- background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
389
- border-radius: var(--border-radius-full);
390
- transition: var(--transition-normal);
391
  }
392
 
393
- .tab-header[data-active-tab="chat"]::after { left: 20px; }
394
- .tab-header[data-active-tab="files"]::after { left: 180px; }
395
- .tab-header[data-active-tab="terminal"]::after { left: 340px; }
396
- .tab-header[data-active-tab="preview"]::after { left: 500px; }
397
-
398
  .tab {
399
- padding: 0.9rem 1.5rem;
400
  cursor: pointer;
401
- font-size: 0.95rem;
402
- font-weight: 500;
 
403
  position: relative;
404
- transition: var(--transition-fast);
405
- display: flex;
406
- align-items: center;
407
- gap: 0.6rem;
408
  }
409
 
410
- .tab i {
411
- font-size: 1.1rem;
 
 
 
 
 
 
 
412
  }
413
 
414
- .tab:hover {
415
- color: var(--accent-primary);
 
416
  }
417
 
418
  .tab.active {
419
- color: var(--accent-primary);
420
  }
421
 
422
- .tab.active::after {
423
- content: '';
424
- position: absolute;
425
- bottom: 0;
426
- left: 50%;
427
- transform: translateX(-50%);
428
- width: 6px;
429
- height: 6px;
430
- border-radius: var(--border-radius-full);
431
- background: var(--accent-primary);
432
  }
433
 
434
- /* ===== CHAT CONTAINER ===== */
435
  .tab-content {
436
  display: none;
437
  flex: 1;
@@ -443,1109 +369,1211 @@
443
  flex-direction: column;
444
  }
445
 
 
446
  .chat-container {
447
  flex: 1;
448
  max-width: 1200px;
449
  width: 100%;
450
  margin: 0 auto;
451
- padding: 1.2rem;
452
  display: flex;
453
  flex-direction: column;
454
  overflow-y: auto;
 
 
 
 
 
 
 
 
 
 
 
455
  position: relative;
456
  }
457
 
458
- .welcome-screen {
459
- text-align: center;
460
- padding: 3rem 1.5rem;
461
- color: var(--text-secondary);
462
- max-width: 800px;
463
- margin: 1.5rem auto;
464
- animation: fadeInUp 0.6s ease;
465
  }
466
 
467
- @keyframes fadeInUp {
468
- from {
469
- opacity: 0;
470
- transform: translateY(20px);
471
- }
472
- to {
473
- opacity: 1;
474
- transform: translateY(0);
475
- }
476
  }
477
 
478
- .welcome-icon {
479
- font-size: 4.5rem;
480
- margin-bottom: 1.2rem;
481
- background: linear-gradient(90deg, var(--accent-primary), #a78bfa);
482
- -webkit-background-clip: text;
483
- -webkit-text-fill-color: transparent;
484
- position: relative;
485
- animation: pulse 2s infinite;
486
  }
487
 
488
- @keyframes pulse {
489
- 0% { text-shadow: 0 0 0 rgba(126, 87, 255, 0.4); }
490
- 70% { text-shadow: 0 0 15px rgba(126, 87, 255, 0.8); }
491
- 100% { text-shadow: 0 0 0 rgba(126, 87, 255, 0.4); }
 
 
 
492
  }
493
 
494
- .welcome-title {
495
- font-size: 2.4rem;
496
- margin-bottom: 0.8rem;
497
- background: linear-gradient(90deg, var(--text-primary), #c4b5fd);
498
- -webkit-background-clip: text;
499
- -webkit-text-fill-color: transparent;
500
- font-weight: 800;
501
- letter-spacing: -0.03em;
 
 
502
  }
503
 
504
- .welcome-subtitle {
505
- font-size: 1.2rem;
506
- margin-bottom: 2rem;
507
- color: #cbd5e1;
508
- max-width: 650px;
509
- margin-left: auto;
510
- margin-right: auto;
511
- line-height: 1.6;
512
  }
513
 
514
- .suggestion-cards {
515
- display: grid;
516
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
517
- gap: 1.2rem;
518
- margin-top: 1.5rem;
519
  }
520
 
521
- .suggestion-card {
522
- background: rgba(35, 40, 55, 0.6);
523
- border: 1px solid var(--glass-border);
524
- border-radius: var(--border-radius-lg);
525
- padding: 1.4rem;
526
- cursor: pointer;
527
- transition: var(--transition-normal);
528
- backdrop-filter: blur(4px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
529
  position: relative;
530
  overflow: hidden;
531
- box-shadow: var(--shadow-sm);
532
  }
533
 
534
- .suggestion-card::before {
535
  content: '';
536
  position: absolute;
537
- top: -2px;
538
- left: -2px;
539
- right: -2px;
540
- bottom: -2px;
541
- background: linear-gradient(45deg, var(--accent-primary), var(--accent-tertiary), #6366f1, var(--accent-primary));
542
- z-index: -1;
543
- border-radius: var(--border-radius-lg);
544
- animation: rotateGradient 8s linear infinite;
545
- opacity: 0;
546
- transition: opacity 0.3s ease;
547
- }
548
-
549
- @keyframes rotateGradient {
550
- 0% { transform: rotate(0deg); }
551
- 100% { transform: rotate(360deg); }
552
  }
553
 
554
- .suggestion-card:hover::before {
555
- opacity: 1;
 
 
 
 
 
556
  }
557
 
558
- .suggestion-card:hover {
559
- transform: translateY(-5px);
560
- border-color: transparent;
561
- box-shadow: var(--shadow-md);
 
 
 
 
 
 
 
562
  }
563
 
564
- .suggestion-title {
565
- font-weight: 700;
566
- margin-bottom: 0.6rem;
567
- font-size: 1.1rem;
568
- color: var(--accent-primary);
569
  display: flex;
 
570
  align-items: center;
571
- gap: 0.6rem;
 
 
572
  }
573
 
574
- .suggestion-title i {
575
- font-size: 1.2rem;
 
 
576
  }
577
 
578
- .suggestion-desc {
579
- color: #cbd5e1;
580
- font-size: 0.95rem;
581
- line-height: 1.5;
 
 
 
582
  }
583
 
584
- /* ===== MESSAGES ===== */
585
- .message {
586
- max-width: 85%;
587
- padding: 1.1rem 1.4rem;
588
- border-radius: var(--border-radius-lg);
589
- margin-bottom: 1.6rem;
590
- line-height: 1.6;
591
- animation: messageSlideIn 0.3s ease;
592
- position: relative;
593
- box-shadow: var(--shadow-sm);
594
  }
595
 
596
- @keyframes messageSlideIn {
597
- from {
598
- opacity: 0;
599
- transform: translateX(-10px) scaleY(0.95);
600
- }
601
- to {
602
- opacity: 1;
603
- transform: translateX(0) scaleY(1);
604
- }
605
  }
606
 
607
- .user-message {
608
- margin-left: auto;
609
- background: linear-gradient(150deg, var(--accent-secondary), var(--accent-primary));
610
- border-radius: var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-sm) var(--border-radius-lg);
 
 
 
611
  color: white;
612
- box-shadow: 0 4px 20px rgba(126, 87, 255, 0.35);
 
 
 
 
 
 
 
 
613
  }
614
 
615
- .user-message::after {
616
- content: '';
617
- position: absolute;
618
- bottom: -8px;
619
- right: 20px;
620
- border-width: 8px 8px 0 0;
621
- border-style: solid;
622
- border-color: transparent transparent transparent rgba(126, 87, 255, 0.8);
623
- transform: rotate(45deg);
624
  }
625
 
626
- .assistant-message {
627
- background: var(--glass-bg);
628
- backdrop-filter: blur(8px);
629
- border: 1px solid var(--glass-border);
630
- border-radius: var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-sm);
631
  color: var(--text-color);
632
- position: relative;
633
- overflow: hidden;
634
  }
635
 
636
- .assistant-message::before {
637
- content: '';
638
- position: absolute;
639
- top: 0;
640
- left: 0;
641
- right: 0;
642
- height: 3px;
643
- background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
644
- opacity: 0.7;
645
  }
646
 
647
- .message-header {
648
- display: flex;
649
- align-items: center;
650
- gap: 0.7rem;
651
- margin-bottom: 0.7rem;
652
- font-size: 0.9rem;
653
- color: var(--text-secondary);
654
  }
655
 
656
- .avatar {
657
- width: 32px;
658
- height: 32px;
659
- border-radius: var(--border-radius-full);
 
660
  display: flex;
661
  align-items: center;
662
- justify-content: center;
663
- font-weight: 600;
664
- font-size: 0.9rem;
665
- flex-shrink: 0;
 
666
  }
667
 
668
- .user-avatar {
669
- background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
670
  }
671
 
672
- .assistant-avatar {
673
- background: linear-gradient(135deg, #4f46e5, #7e3af2);
674
  }
675
 
676
- .message-content {
677
- position: relative;
678
  }
679
 
680
- /* ===== TYPING INDICATOR ===== */
681
- .typing-indicator {
682
- display: inline-flex;
683
- padding: 0.2rem 0;
684
  }
685
 
686
- .typing-dot {
687
- display: inline-block;
688
- width: 8px;
689
- height: 8px;
690
- border-radius: 50%;
691
- background: var(--text-secondary);
692
- margin: 0 1.5px;
693
- animation: typingAnimation 1.4s infinite both;
694
- opacity: 0.7;
695
  }
696
 
697
- .typing-dot:nth-child(1) { animation-delay: -0.32s; }
698
- .typing-dot:nth-child(2) { animation-delay: -0.16s; }
699
- .typing-dot:nth-child(3) { animation-delay: 0s; }
700
 
701
- @keyframes typingAnimation {
702
- 0%, 80%, 100% {
703
- transform: scale(0.5);
704
- opacity: 0.5;
705
- }
706
- 40% {
707
- transform: scale(1);
708
- opacity: 1;
709
- }
 
710
  }
711
 
712
- /* ===== AI-SPECIFIC STYLING ===== */
713
- .thinking-step {
714
- background: rgba(42, 48, 70, 0.7);
715
- border-left: 3px solid var(--accent-primary);
716
- padding: 0.85rem;
717
- margin: 0.7rem 0;
718
- border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
719
- font-style: italic;
720
- color: #cbd5e1;
721
- position: relative;
722
- overflow: hidden;
723
  }
724
 
725
- .thinking-step::before {
726
- content: '';
727
- position: absolute;
728
- top: 0;
729
- left: 0;
730
- bottom: 0;
731
- width: 3px;
732
- background: linear-gradient(to bottom, transparent, var(--accent-primary), transparent);
733
  }
734
 
735
- .ai-plan {
736
- background: rgba(30, 35, 55, 0.6);
737
- border: 1px solid rgba(126, 87, 255, 0.2);
738
- border-radius: var(--border-radius-md);
739
- padding: 1.1rem;
740
- margin: 1.2rem 0;
741
- position: relative;
742
- backdrop-filter: blur(4px);
743
  }
744
 
745
- .ai-plan-title {
 
 
 
 
 
 
 
 
 
 
 
 
746
  display: flex;
747
  align-items: center;
748
- gap: 0.6rem;
749
- margin-bottom: 0.8rem;
750
- color: var(--accent-primary);
751
- font-weight: 600;
752
  }
753
 
754
- .plan-steps {
755
- padding-left: 1.2rem;
 
756
  }
757
 
758
- .plan-step {
 
 
 
 
 
 
 
 
759
  position: relative;
760
- padding-left: 1.4rem;
761
- margin: 0.6rem 0;
762
- color: #e2e8f0;
763
  }
764
 
765
- .plan-step::before {
766
- content: '';
767
- position: absolute;
768
- left: 0;
769
- top: 0.85rem;
770
- width: 8px;
771
- height: 8px;
772
- border-radius: 50%;
773
- background: var(--accent-primary);
774
  }
775
 
776
- .code-container {
777
- background: #1a1d29;
778
- border: 1px solid var(--glass-border);
779
- border-radius: var(--border-radius-md);
780
- padding: 1.2rem;
781
- margin: 1.2rem 0;
 
 
 
 
 
782
  font-family: 'Fira Code', monospace;
783
- font-size: 0.95rem;
784
- overflow-x: auto;
785
- line-height: 1.6;
786
- position: relative;
787
  }
788
 
789
- .code-header {
 
 
 
 
 
 
 
 
 
 
 
790
  display: flex;
791
  justify-content: space-between;
792
  align-items: center;
793
- padding-bottom: 0.6rem;
794
- margin-bottom: 0.8rem;
795
- border-bottom: 1px solid rgba(126, 87, 255, 0.15);
796
  }
797
 
798
- .code-title {
799
- font-size: 0.85rem;
800
- color: var(--text-secondary);
 
 
801
  display: flex;
802
- align-items: center;
803
  gap: 0.5rem;
804
  }
805
 
806
- .copy-btn {
807
- background: rgba(255, 255, 255, 0.08);
808
- border: none;
809
- color: var(--text-secondary);
810
- border-radius: var(--border-radius-sm);
811
- padding: 0.3rem 0.8rem;
812
- font-size: 0.8rem;
813
  cursor: pointer;
814
- transition: var(--transition-fast);
 
 
 
815
  }
816
 
817
- .copy-btn:hover {
818
- background: rgba(126, 87, 255, 0.2);
819
- color: var(--accent-primary);
 
 
 
 
 
 
 
820
  }
821
 
822
- /* ===== INPUT AREA ===== */
823
  .input-area {
824
- background: var(--glass-bg);
825
- backdrop-filter: blur(15px);
826
- -webkit-backdrop-filter: blur(15px);
827
- border-top: 1px solid var(--glass-border);
828
- padding: 1.2rem 1.8rem;
829
  position: sticky;
830
  bottom: 0;
831
- z-index: 80;
832
- box-shadow: var(--shadow-sm);
833
  }
834
 
835
  .input-container {
836
  max-width: 1200px;
837
  margin: 0 auto;
838
  display: flex;
839
- gap: 0.9rem;
840
  align-items: flex-end;
841
- position: relative;
842
  }
843
 
844
  .message-input {
845
  flex: 1;
846
- background: rgba(30, 35, 55, 0.7);
847
- border: 1px solid var(--glass-border);
848
- border-radius: var(--border-radius-lg);
849
- padding: 1.1rem 1.4rem;
850
  color: var(--text-color);
851
- font-size: 1rem;
852
  resize: none;
853
- min-height: 60px;
854
- max-height: 220px;
855
- transition: var(--transition-fast);
856
- backdrop-filter: blur(4px);
857
  font-family: 'Inter', sans-serif;
858
  }
859
 
860
  .message-input:focus {
861
- outline: none;
862
- border-color: var(--accent-primary);
863
- box-shadow: 0 0 0 3px var(--accent-glow);
864
- }
865
-
866
- .message-input::placeholder {
867
- color: var(--text-secondary);
868
- opacity: 0.7;
869
  }
870
 
871
  .send-button {
872
- background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
873
  color: white;
874
  border: none;
875
- border-radius: var(--border-radius-full);
876
- width: 60px;
877
- height: 60px;
878
- font-size: 1.3rem;
879
  cursor: pointer;
880
- transition: var(--transition-normal);
881
  display: flex;
882
  align-items: center;
883
  justify-content: center;
884
- box-shadow: 0 4px 15px rgba(126, 87, 255, 0.4);
 
 
885
  }
886
 
887
  .send-button:hover {
888
- transform: scale(1.08) rotate(5deg);
889
- box-shadow: 0 6px 20px rgba(126, 87, 255, 0.6);
890
  }
891
 
892
- .send-button:active {
893
- transform: scale(0.95) rotate(0);
 
 
 
894
  }
895
 
896
- .send-button i {
897
- position: relative;
898
- top: 1px;
 
 
899
  }
900
 
901
- .input-tools {
902
- display: flex;
903
- gap: 0.7rem;
904
- margin-bottom: 0.8rem;
905
- justify-content: flex-end;
 
 
906
  }
907
 
908
- .tool-btn {
909
- width: 36px;
910
- height: 36px;
911
- border-radius: var(--border-radius-full);
912
- background: rgba(255, 255, 255, 0.07);
913
- border: 1px solid var(--glass-border);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
914
  color: var(--text-secondary);
915
- display: flex;
916
- align-items: center;
917
- justify-content: center;
918
- font-size: 0.95rem;
919
- cursor: pointer;
920
- transition: var(--transition-fast);
921
  }
922
 
923
- .tool-btn:hover {
924
- background: rgba(126, 87, 255, 0.15);
925
- color: var(--accent-primary);
926
- transform: translateY(-2px);
 
927
  }
928
 
929
- /* ===== TERMINAL TAB ===== */
930
- .terminal-container {
931
- display: flex;
932
- flex-direction: column;
933
- height: 100%;
934
- background: #0c0f1a;
935
- border-radius: var(--border-radius-lg);
936
- margin: 1rem;
937
- overflow: hidden;
938
- box-shadow: var(--shadow-lg);
939
  position: relative;
 
940
  }
941
 
942
- .terminal-header {
943
- background: #1a1d29;
944
- padding: 0.8rem 1.2rem;
945
- display: flex;
946
- align-items: center;
947
- gap: 0.8rem;
948
- border-bottom: 1px solid rgba(126, 87, 255, 0.2);
 
 
949
  }
950
 
951
- .terminal-controls {
952
- display: flex;
953
- gap: 0.6rem;
954
  }
955
 
956
- .terminal-dot {
957
- width: 12px;
958
- height: 12px;
959
- border-radius: var(--border-radius-full);
960
  }
961
 
962
- .terminal-dot.red { background: var(--danger); }
963
- .terminal-dot.yellow { background: var(--warning); }
964
- .terminal-dot.green { background: var(--success); }
 
 
 
 
 
965
 
966
- .terminal-title {
967
  color: var(--text-secondary);
968
  font-size: 0.9rem;
969
- font-weight: 500;
970
  }
971
 
972
- .terminal-output {
973
- flex: 1;
974
- padding: 1.2rem;
975
- color: #e2e8f0;
976
- font-family: 'Fira Code', monospace;
977
- font-size: 0.95rem;
978
- overflow-y: auto;
979
- line-height: 1.6;
980
- background: #0a0c15;
981
  }
982
 
983
- .terminal-line {
984
- display: flex;
985
- margin-bottom: 0.4rem;
 
 
 
 
 
986
  }
987
 
988
- .terminal-prompt {
989
- color: var(--accent-primary);
990
- margin-right: 0.6rem;
991
- min-width: 40px;
992
- }
993
 
994
- .terminal-input-container {
995
- padding: 0.9rem 1.2rem;
996
- background: #1a1d29;
997
- border-top: 1px solid rgba(126, 87, 255, 0.1);
998
- display: flex;
999
- align-items: center;
1000
  }
1001
 
1002
- #terminal-input {
1003
- flex: 1;
1004
- background: transparent;
 
 
 
 
 
 
 
1005
  border: none;
1006
- color: #e2e8f0;
1007
- font-family: 'Fira Code', monospace;
1008
- font-size: 0.95rem;
1009
- outline: none;
1010
- }
1011
-
1012
- #terminal-input::placeholder {
1013
- color: rgba(199, 210, 255, 0.5);
 
1014
  }
1015
 
1016
- /* ===== RESPONSIVE DESIGN ===== */
1017
- @media (max-width: 900px) {
1018
- .sidebar {
1019
- width: 260px;
1020
- }
1021
-
1022
- .sidebar.open + .main-content {
1023
- margin-left: 260px;
1024
- }
1025
  }
1026
 
 
1027
  @media (max-width: 768px) {
1028
  .sidebar {
1029
- transform: translateX(-100%);
1030
  }
1031
-
1032
- .sidebar.open {
1033
- transform: translateX(0);
1034
- box-shadow: var(--shadow-lg);
1035
- }
1036
-
1037
- .main-content {
1038
- margin-left: 0 !important;
1039
- }
1040
-
1041
  .message {
1042
  max-width: 95%;
1043
  }
1044
-
1045
- .welcome-title {
1046
- font-size: 1.8rem;
1047
- }
1048
-
1049
- .welcome-icon {
1050
- font-size: 3.5rem;
1051
- }
1052
-
1053
  .input-container {
1054
  flex-direction: column;
1055
  }
1056
-
1057
  .send-button {
1058
- align-self: flex-end;
1059
- width: 56px;
1060
- height: 56px;
1061
- }
1062
-
1063
- .tab-header {
1064
- overflow-x: auto;
1065
- justify-content: flex-start;
1066
- padding: 0 0.5rem;
1067
- }
1068
-
1069
- .tab {
1070
- padding: 0.9rem 0.8rem;
1071
- font-size: 0.85rem;
1072
- }
1073
-
1074
- .tab i {
1075
- font-size: 0.9rem;
1076
- }
1077
-
1078
- .hamburger-btn {
1079
- margin-left: -8px;
1080
  }
1081
-
1082
- /* Floating action button for new chat */
1083
- .new-chat-fab {
1084
- position: fixed;
1085
- bottom: 2rem;
1086
- right: 2rem;
1087
- width: 60px;
1088
- height: 60px;
1089
- border-radius: var(--border-radius-full);
1090
- background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
1091
- border: none;
1092
- color: white;
1093
- font-size: 1.4rem;
1094
- box-shadow: 0 6px 20px rgba(126, 87, 255, 0.6);
1095
- z-index: 1000;
1096
- display: flex;
1097
- align-items: center;
1098
- justify-content: center;
1099
- cursor: pointer;
1100
- transition: var(--transition-normal);
1101
- }
1102
-
1103
- .new-chat-fab:hover {
1104
- transform: scale(1.1) rotate(10deg);
1105
- box-shadow: 0 8px 25px rgba(126, 87, 255, 0.8);
1106
- }
1107
- }
1108
 
1109
- @media (max-width: 480px) {
1110
- .header {
1111
- padding: 0.7rem 1rem;
1112
- }
1113
-
1114
- .welcome-screen {
1115
- padding: 2rem 1rem;
1116
- }
1117
-
1118
- .welcome-title {
1119
- font-size: 1.6rem;
1120
  }
1121
-
1122
  .suggestion-cards {
1123
  grid-template-columns: 1fr;
1124
  }
1125
  }
1126
 
1127
- /* ===== ANIMATIONS ===== */
1128
- @keyframes float {
1129
- 0%, 100% { transform: translateY(0); }
1130
- 50% { transform: translateY(-8px); }
1131
- }
1132
-
1133
- .floating {
1134
- animation: float 3s ease-in-out infinite;
1135
  }
1136
 
1137
- @keyframes gradientBG {
1138
- 0% { background-position: 0% 50%; }
1139
- 50% { background-position: 100% 50%; }
1140
- 100% { background-position: 0% 50%; }
1141
  }
1142
 
1143
- .gradient-border {
1144
- position: relative;
1145
- border-radius: var(--border-radius-lg);
1146
- overflow: hidden;
1147
- }
1148
-
1149
- .gradient-border::before {
1150
- content: '';
1151
- position: absolute;
1152
- top: -2px;
1153
- left: -2px;
1154
- right: -2px;
1155
- bottom: -2px;
1156
- background: linear-gradient(45deg, var(--accent-primary), var(--accent-tertiary), #6366f1, var(--accent-primary));
1157
- z-index: -1;
1158
- border-radius: var(--border-radius-lg);
1159
- animation: rotateGradient 8s linear infinite;
1160
- opacity: 0;
1161
- transition: opacity 0.5s ease;
1162
  }
1163
 
1164
- .gradient-border:hover::before {
1165
- opacity: 1;
1166
  }
1167
  </style>
1168
  </head>
1169
  <body>
1170
  <div id="app">
1171
- <!-- Sidebar Navigation -->
 
 
 
1172
  <div class="sidebar">
1173
  <div class="sidebar-header">
1174
- <div class="logo">
1175
- <i class="fas fa-brain"></i>
1176
- <span>NexusAI</span>
1177
- </div>
1178
  <button class="close-btn">
1179
  <i class="fas fa-times"></i>
1180
  </button>
1181
  </div>
1182
 
1183
  <div class="sidebar-section">
1184
- <h4><i class="fas fa-comments"></i> Conversations</h4>
1185
  <div class="sidebar-item active">
1186
- <i class="fas fa-message"></i>
1187
- <span>New Conversation</span>
1188
  </div>
1189
  <div class="sidebar-item">
1190
- <i class="fas fa-code"></i>
1191
- <span>Code Assistant</span>
1192
  </div>
1193
  <div class="sidebar-item">
1194
- <i class="fas fa-file-invoice"></i>
1195
- <span>Research Paper</span>
1196
  </div>
 
 
 
 
1197
  <div class="sidebar-item">
1198
- <i class="fas fa-lightbulb"></i>
 
 
 
 
1199
  <span>Creative Writing</span>
1200
  </div>
 
 
 
 
 
 
 
 
1201
  </div>
1202
 
1203
  <div class="sidebar-section">
1204
- <h4><i class="fas fa-cog"></i> Settings</h4>
1205
  <div class="sidebar-item">
1206
- <i class="fas fa-sliders"></i>
1207
  <span>Preferences</span>
1208
  </div>
1209
  <div class="sidebar-item">
1210
- <i class="fas fa-shield-alt"></i>
1211
- <span>Privacy</span>
1212
  </div>
1213
  <div class="sidebar-item">
1214
- <i class="fas fa-plug"></i>
1215
- <span>Integrations</span>
1216
  </div>
1217
  </div>
1218
-
1219
- <div class="sidebar-footer">
1220
- <p>NexusAI v2.1.3 • Advanced Reasoning</p>
1221
- </div>
1222
  </div>
1223
 
1224
- <!-- Main Content Area -->
1225
  <div class="main-content">
1226
- <header class="header">
 
1227
  <div class="header-left">
1228
  <button class="hamburger-btn">
1229
  <i class="fas fa-bars"></i>
1230
  </button>
1231
  <div class="logo">
1232
- <i class="fas fa-brain"></i>
1233
- <span>NexusAI</span>
1234
  </div>
1235
  </div>
1236
 
1237
  <div class="header-right">
1238
  <select class="mode-selector">
1239
- <option>Advanced Reasoning</option>
1240
  <option>Creative Mode</option>
1241
- <option>Code Specialist</option>
1242
- <option>Research Assistant</option>
1243
  </select>
1244
-
1245
  <select class="model-selector">
1246
- <option>Nexus-7B (Fast)</option>
1247
- <option>Nexus-13B (Balanced)</option>
1248
- <option>Nexus-32B (Powerful)</option>
1249
  </select>
1250
-
1251
- <div class="user-profile">
1252
- <span>UH</span>
1253
- </div>
1254
  </div>
1255
- </header>
1256
 
 
1257
  <div class="tab-container">
1258
- <div class="tab-header" data-active-tab="chat">
1259
- <div class="tab active">
1260
- <i class="fas fa-comments"></i>
1261
- <span>Chat</span>
1262
- </div>
1263
- <div class="tab">
1264
- <i class="fas fa-folder"></i>
1265
- <span>Files</span>
1266
- </div>
1267
- <div class="tab">
1268
- <i class="fas fa-terminal"></i>
1269
- <span>Terminal</span>
1270
- </div>
1271
- <div class="tab">
1272
- <i class="fas fa-desktop"></i>
1273
- <span>Preview</span>
1274
- </div>
1275
  </div>
1276
 
 
1277
  <div class="tab-content active" id="chat-tab">
1278
  <div class="chat-container">
 
1279
  <div class="welcome-screen">
1280
- <div class="welcome-icon floating">
1281
  <i class="fas fa-robot"></i>
1282
  </div>
1283
- <h1 class="welcome-title">Hello, UserHero!</h1>
1284
- <p class="welcome-subtitle">I'm NexusAI, your advanced AI assistant. I can help with coding, analysis, creative writing, and more. How can I assist you today?</p>
1285
 
1286
  <div class="suggestion-cards">
1287
- <div class="suggestion-card gradient-border">
1288
  <div class="suggestion-title">
1289
  <i class="fas fa-code"></i>
1290
- <span>Code Assistance</span>
 
 
 
1291
  </div>
1292
- <p class="suggestion-desc">Help me debug this JavaScript function and optimize performance</p>
1293
  </div>
1294
-
1295
- <div class="suggestion-card gradient-border">
1296
  <div class="suggestion-title">
1297
- <i class="fas fa-lightbulb"></i>
1298
- <span>Creative Ideas</span>
 
 
 
1299
  </div>
1300
- <p class="suggestion-desc">Generate unique startup ideas for sustainable technology</p>
1301
  </div>
1302
-
1303
- <div class="suggestion-card gradient-border">
1304
  <div class="suggestion-title">
1305
  <i class="fas fa-chart-line"></i>
1306
- <span>Data Analysis</span>
 
 
 
1307
  </div>
1308
- <p class="suggestion-desc">Analyze this sales dataset and provide insights</p>
1309
- </div>
1310
- </div>
1311
- </div>
1312
-
1313
- <!-- Example Messages -->
1314
- <div class="message assistant-message">
1315
- <div class="message-header">
1316
- <div class="avatar assistant-avatar">
1317
- <i class="fas fa-brain"></i>
1318
  </div>
1319
- <div class="message-info">
1320
- <span class="sender">NexusAI</span>
1321
- <span class="timestamp">10:24 AM</span>
 
 
 
 
 
1322
  </div>
1323
  </div>
1324
- <div class="message-content">
1325
- <p>Hello! I'm NexusAI, your advanced reasoning assistant. I can help with complex problem-solving, code generation, data analysis, and creative tasks. How can I assist you today?</p>
1326
- </div>
1327
  </div>
1328
 
 
1329
  <div class="message user-message">
1330
  <div class="message-header">
1331
- <div class="avatar user-avatar">
1332
- <span>UH</span>
1333
- </div>
1334
- <div class="message-info">
1335
- <span class="sender">UserHero</span>
1336
- <span class="timestamp">10:25 AM</span>
1337
- </div>
1338
  </div>
1339
  <div class="message-content">
1340
- <p>Can you help me create a responsive CSS animation for a chat interface like ChatGPT or Grok? I want something with unique animations and beautiful icons.</p>
1341
  </div>
1342
  </div>
1343
 
1344
  <div class="message assistant-message">
1345
  <div class="message-header">
1346
- <div class="avatar assistant-avatar">
1347
- <i class="fas fa-brain"></i>
1348
- </div>
1349
- <div class="message-info">
1350
- <span class="sender">NexusAI</span>
1351
- <span class="timestamp">10:26 AM</span>
1352
- </div>
1353
  </div>
1354
  <div class="message-content">
1355
- <p class="thinking-step">Analyzing user request for modern chat interface design...</p>
1356
- <p class="thinking-step">Considering animation libraries and CSS techniques...</p>
1357
-
1358
- <div class="ai-plan">
1359
- <div class="ai-plan-title">
1360
- <i class="fas fa-tasks"></i>
1361
- <span>Implementation Plan</span>
1362
- </div>
1363
- <div class="plan-steps">
1364
- <div class="plan-step">Create glassmorphism UI with backdrop filters</div>
1365
- <div class="plan-step">Implement smooth message animations with keyframes</div>
1366
- <div class="plan-step">Add gradient accents and interactive elements</div>
1367
- <div class="plan-step">Design animated typing indicators</div>
1368
- <div class="plan-step">Create responsive layout for all devices</div>
1369
- </div>
1370
- </div>
1371
-
1372
- <p>I'll create a complete, modern chat interface with stunning animations! Here's a CSS solution that includes:</p>
1373
 
1374
  <div class="code-container">
1375
  <div class="code-header">
1376
- <div class="code-title">
1377
- <i class="fas fa-code"></i>
1378
- <span>Modern Chat Interface.css</span>
1379
- </div>
1380
  <button class="copy-btn">
1381
  <i class="fas fa-copy"></i> Copy
1382
  </button>
1383
  </div>
1384
- <pre><code>:root {
1385
- --primary-bg: #0f111a;
1386
- --accent-primary: #7e57ff;
1387
- --accent-glow: rgba(126, 87, 255, 0.35);
1388
- /* Additional variables... */
1389
- }
1390
-
1391
- .message {
1392
- animation: fadeInUp 0.3s ease;
1393
- box-shadow: 0 4px 20px var(--accent-glow);
1394
- }
1395
-
1396
- @keyframes fadeInUp {
1397
- from { opacity: 0; transform: translateY(10px); }
1398
- to { opacity: 1; transform: translateY(0); }
1399
- }</code></pre>
 
 
 
 
 
 
1400
  </div>
1401
 
1402
- <p>The complete implementation includes:</p>
1403
- <ul>
1404
- <li>⚡️ Smooth animations for messages and UI elements</li>
1405
- <li>✨ Glassmorphism effects with backdrop filters</li>
1406
- <li>🎨 Beautiful gradient accents and interactive hover effects</li>
1407
- <li>📱 Fully responsive design for all devices</li>
1408
- <li>💡 Typing indicators and thinking animations</li>
1409
- </ul>
1410
-
1411
- <p>Would you like me to provide the complete code for this interface?</p>
1412
  </div>
1413
  </div>
1414
  </div>
1415
-
1416
- <div class="input-area">
1417
- <div class="input-tools">
1418
- <button class="tool-btn" title="Attach file">
1419
- <i class="fas fa-paperclip"></i>
1420
- </button>
1421
- <button class="tool-btn" title="Voice input">
1422
- <i class="fas fa-microphone"></i>
 
1423
  </button>
1424
- <button class="tool-btn" title="Image generation">
1425
- <i class="fas fa-image"></i>
 
1426
  </button>
1427
- <button class="tool-btn" title="Code interpreter">
1428
- <i class="fas fa-code"></i>
 
1429
  </button>
1430
  </div>
1431
-
1432
- <div class="input-container">
1433
- <textarea class="message-input" placeholder="Message NexusAI..."></textarea>
1434
- <button class="send-button">
1435
- <i class="fas fa-paper-plane"></i>
1436
- </button>
1437
  </div>
1438
  </div>
1439
- </div>
1440
-
1441
- <div class="tab-content" id="terminal-tab">
1442
- <div class="terminal-container">
1443
- <div class="terminal-header">
1444
- <div class="terminal-controls">
1445
- <div class="terminal-dot red"></div>
1446
- <div class="terminal-dot yellow"></div>
1447
- <div class="terminal-dot green"></div>
1448
- </div>
1449
- <div class="terminal-title">nexus-shell</div>
1450
- </div>
1451
-
1452
- <div class="terminal-output">
1453
- <div class="terminal-line">
1454
- <span class="terminal-prompt">user@nexusAI:</span>
1455
- <span class="terminal-command">~/projects/chat-interface$</span>
1456
- </div>
1457
- <div class="terminal-line">
1458
- <span class="terminal-prompt"></span>
1459
- <span class="terminal-text">System initialized with advanced animation capabilities</span>
1460
- </div>
1461
- <div class="terminal-line">
1462
- <span class="terminal-prompt"></span>
1463
- <span class="terminal-text">Loading gradient libraries...</span>
1464
  </div>
1465
- <div class="terminal-line">
1466
- <span class="terminal-prompt"></span>
1467
- <span class="terminal-text">✓ Animation engine started (60fps)</span>
1468
- </div>
1469
- <div class="terminal-line">
1470
- <span class="terminal-prompt"></span>
1471
- <span class="terminal-text">✓ Glassmorphism effects enabled</span>
 
 
 
 
 
 
1472
  </div>
1473
- <div class="terminal-line">
1474
- <span class="terminal-prompt"></span>
1475
- <span class="terminal-text">✓ Responsive layout module loaded</span>
 
 
 
1476
  </div>
1477
- <div class="terminal-line">
1478
- <span class="terminal-prompt"></span>
1479
- <span class="terminal-text">Ready for user interaction</span>
 
 
 
 
 
 
1480
  </div>
1481
  </div>
1482
-
1483
- <div class="terminal-input-container">
1484
- <span class="terminal-prompt">user@nexusAI:</span>
1485
- <input type="text" id="terminal-input" placeholder="Type command...">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1486
  </div>
1487
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1488
  </div>
1489
  </div>
1490
  </div>
1491
 
1492
  <!-- Floating Action Button for Mobile -->
1493
- <button class="new-chat-fab" aria-label="New chat">
1494
  <i class="fas fa-plus"></i>
1495
  </button>
1496
  </div>
1497
 
1498
  <script>
1499
- // Simple interactivity for demo purposes
1500
  document.addEventListener('DOMContentLoaded', function() {
1501
- // Sidebar toggle
1502
  const hamburgerBtn = document.querySelector('.hamburger-btn');
1503
  const closeBtn = document.querySelector('.close-btn');
1504
  const sidebar = document.querySelector('.sidebar');
 
1505
 
1506
- hamburgerBtn.addEventListener('click', () => {
1507
- sidebar.classList.add('open');
1508
- });
 
1509
 
1510
- closeBtn.addEventListener('click', () => {
1511
- sidebar.classList.remove('open');
1512
- });
1513
 
1514
- // Tab switching
1515
  const tabs = document.querySelectorAll('.tab');
1516
  const tabContents = document.querySelectorAll('.tab-content');
1517
- const tabHeader = document.querySelector('.tab-header');
1518
 
1519
  tabs.forEach(tab => {
1520
  tab.addEventListener('click', () => {
1521
- // Update active tab in header
1522
- const tabName = tab.querySelector('span').textContent.toLowerCase();
1523
- tabHeader.setAttribute('data-active-tab', tabName);
1524
-
1525
- // Update tab active states
1526
  tabs.forEach(t => t.classList.remove('active'));
 
 
 
1527
  tab.classList.add('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1528
 
1529
- // Show corresponding content
1530
- tabContents.forEach(content => content.classList.remove('active'));
1531
- document.getElementById(`${tabName}-tab`).classList.add('active');
 
 
 
 
 
 
1532
  });
1533
  });
1534
 
1535
- // New chat button
1536
- const newChatBtn = document.querySelector('.new-chat-fab');
1537
- if (newChatBtn) {
1538
- newChatBtn.addEventListener('click', () => {
1539
- // In a real app, this would create a new chat
1540
- alert('New chat created!');
 
 
 
 
 
 
1541
  });
1542
- }
1543
 
1544
- // Auto-focus terminal input
1545
  const terminalInput = document.getElementById('terminal-input');
1546
- if (terminalInput) {
1547
- terminalInput.focus();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1548
  }
 
 
 
1549
  });
1550
  </script>
1551
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Chat Interface</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
10
  <style>
11
+ /* Reset dan base styles */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  * {
13
  box-sizing: border-box;
14
  margin: 0;
15
  padding: 0;
16
  }
17
 
18
+ :root {
19
+ --primary-bg: #0f1117;
20
+ --secondary-bg: #1a1d29;
21
+ --accent-color: #8b5cf6;
22
+ --accent-hover: #a78bfa;
23
+ --text-color: #f8fafc;
24
+ --text-secondary: #94a3b8;
25
+ --border-color: #2d3748;
26
+ --user-bubble: linear-gradient(135deg, #6366f1, #8b5cf6);
27
+ --assistant-bubble: #1e293b;
28
+ --success-color: #10b981;
29
+ --warning-color: #f59e0b;
30
+ --danger-color: #ef4444;
31
+ --sidebar-width: 280px;
32
+ }
33
+
34
  body {
 
 
35
  background-color: var(--primary-bg);
36
+ color: var(--text-color);
37
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
38
+ line-height: 1.6;
39
  height: 100vh;
40
  overflow: hidden;
41
+ }
42
+
43
+ #app {
44
+ display: flex;
45
+ height: 100vh;
46
  position: relative;
47
  }
48
 
49
+ /* Backdrop untuk sidebar mobile */
50
+ .sidebar-backdrop {
51
  position: fixed;
52
  top: 0;
53
  left: 0;
54
+ right: 0;
55
+ bottom: 0;
56
+ background-color: rgba(0, 0, 0, 0.5);
57
+ z-index: 99;
58
+ opacity: 0;
59
+ visibility: hidden;
60
+ transition: all 0.3s ease;
61
  }
62
 
63
+ .sidebar-backdrop.active {
64
+ opacity: 1;
65
+ visibility: visible;
 
 
 
66
  }
67
 
68
+ /* Sidebar */
69
  .sidebar {
70
+ width: var(--sidebar-width);
71
+ background-color: var(--secondary-bg);
72
+ border-right: 1px solid var(--border-color);
73
  padding: 1.5rem;
74
  overflow-y: auto;
75
+ transform: translateX(-100%);
76
+ transition: transform 0.3s ease;
77
+ z-index: 100;
78
  position: fixed;
 
 
79
  height: 100%;
80
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 
 
 
81
  }
82
 
83
  .sidebar.open {
84
  transform: translateX(0);
85
  }
86
 
 
 
 
 
 
 
 
 
 
 
 
87
  .sidebar-header {
88
  display: flex;
89
  justify-content: space-between;
90
  align-items: center;
91
  margin-bottom: 1.5rem;
92
  padding-bottom: 1rem;
93
+ border-bottom: 1px solid var(--border-color);
 
 
 
 
 
 
 
 
 
 
 
94
  }
95
 
96
+ .sidebar-header h3 {
97
+ font-size: 1.25rem;
98
+ color: var(--accent-color);
99
+ font-weight: 600;
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  }
101
 
102
  .close-btn {
103
+ background: none;
104
  border: none;
105
  color: var(--text-secondary);
106
+ font-size: 1.5rem;
 
 
 
107
  cursor: pointer;
108
+ transition: all 0.2s ease;
109
+ width: 32px;
110
+ height: 32px;
111
+ border-radius: 50%;
112
  display: flex;
113
  align-items: center;
114
  justify-content: center;
115
  }
116
 
117
  .close-btn:hover {
118
+ color: var(--accent-color);
119
+ background-color: rgba(139, 92, 246, 0.1);
 
120
  }
121
 
122
  .sidebar-section {
 
130
  text-transform: uppercase;
131
  letter-spacing: 1px;
132
  font-weight: 600;
 
 
 
 
 
 
 
133
  }
134
 
135
  .sidebar-item {
136
+ padding: 0.75rem 1rem;
137
+ border-radius: 0.75rem;
138
  margin-bottom: 0.5rem;
139
  cursor: pointer;
140
+ transition: all 0.2s ease;
141
  display: flex;
142
  align-items: center;
143
+ gap: 0.75rem;
144
+ font-size: 0.95rem;
145
  position: relative;
146
  overflow: hidden;
147
  }
 
150
  content: '';
151
  position: absolute;
152
  top: 0;
153
+ left: -100%;
154
+ width: 100%;
155
  height: 100%;
156
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
157
+ transition: left 0.5s ease;
 
 
 
 
 
 
 
158
  }
159
 
160
  .sidebar-item:hover::before {
161
+ left: 100%;
162
  }
163
 
164
+ .sidebar-item:hover {
165
+ background-color: rgba(99, 102, 241, 0.1);
166
+ color: var(--accent-color);
167
+ transform: translateX(5px);
168
  }
169
 
170
+ .sidebar-item.active {
171
+ background-color: rgba(99, 102, 241, 0.2);
172
+ border-left: 3px solid var(--accent-color);
173
+ color: var(--accent-color);
174
  }
175
 
176
  .sidebar-item i {
177
+ font-size: 1.25rem;
178
  width: 24px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
179
  text-align: center;
180
  }
181
 
182
+ /* Main Content */
183
  .main-content {
184
  flex: 1;
185
  display: flex;
186
  flex-direction: column;
187
  position: relative;
188
+ transition: all 0.3s ease;
 
189
  }
190
 
191
+ /* Header */
 
 
 
 
192
  .header {
193
+ background-color: rgba(15, 17, 23, 0.9);
194
+ backdrop-filter: blur(10px);
195
+ -webkit-backdrop-filter: blur(10px);
196
+ border-bottom: 1px solid var(--border-color);
197
+ padding: 0.75rem 1.5rem;
198
  display: flex;
199
  justify-content: space-between;
200
  align-items: center;
201
  position: sticky;
202
  top: 0;
203
+ z-index: 10;
204
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
205
  }
206
 
207
  .header-left {
208
  display: flex;
209
  align-items: center;
210
+ gap: 1rem;
211
  }
212
 
213
  .hamburger-btn {
214
+ background: none;
215
  border: none;
216
  color: var(--text-secondary);
217
+ font-size: 1.5rem;
 
 
 
218
  cursor: pointer;
219
+ transition: all 0.2s ease;
220
+ width: 36px;
221
+ height: 36px;
222
+ border-radius: 50%;
223
  display: flex;
224
  align-items: center;
225
  justify-content: center;
226
  }
227
 
228
  .hamburger-btn:hover {
229
+ color: var(--accent-color);
230
+ background-color: rgba(139, 92, 246, 0.1);
 
231
  }
232
 
233
+ .logo {
234
+ display: flex;
235
+ align-items: center;
236
+ gap: 0.75rem;
237
+ font-weight: 700;
238
+ font-size: 1.25rem;
239
+ background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
240
+ -webkit-background-clip: text;
241
+ -webkit-text-fill-color: transparent;
242
+ animation: logo-pulse 3s infinite;
243
  }
244
 
245
+ @keyframes logo-pulse {
246
+ 0%, 100% { opacity: 1; }
247
+ 50% { opacity: 0.8; }
248
+ }
249
+
250
+ .logo i {
251
+ font-size: 1.5rem;
252
  }
253
 
254
  .header-right {
255
  display: flex;
256
  align-items: center;
257
+ gap: 1rem;
258
  }
259
 
260
+ .mode-selector, .model-selector {
261
+ background-color: var(--secondary-bg);
262
+ border: 1px solid var(--border-color);
263
+ border-radius: 0.75rem;
264
+ padding: 0.5rem 0.75rem;
265
+ color: var(--text-color);
266
+ font-size: 0.875rem;
267
+ min-width: 180px;
268
+ cursor: pointer;
269
+ transition: all 0.2s ease;
270
+ }
271
+
272
+ .mode-selector:hover, .model-selector:hover {
273
+ border-color: var(--accent-color);
274
+ box-shadow: 0 0 0 1px var(--accent-color);
275
+ }
276
+
277
+ .new-chat-btn {
278
+ background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
279
+ color: white;
280
+ border: none;
281
+ border-radius: 0.75rem;
282
+ padding: 0.5rem 1rem;
283
+ font-weight: 500;
284
+ cursor: pointer;
285
  display: flex;
286
  align-items: center;
287
+ gap: 0.5rem;
288
+ transition: all 0.2s ease;
289
+ position: relative;
290
+ overflow: hidden;
291
+ }
292
+
293
+ .new-chat-btn::before {
294
+ content: '';
295
+ position: absolute;
296
+ top: 0;
297
+ left: -100%;
298
+ width: 100%;
299
+ height: 100%;
300
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
301
+ transition: left 0.5s ease;
302
  }
303
 
304
+ .new-chat-btn:hover::before {
305
+ left: 100%;
 
306
  }
307
 
308
+ .new-chat-btn:hover {
309
+ transform: translateY(-2px);
310
+ box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
311
+ }
312
+
313
+ /* Tab Container */
314
  .tab-container {
315
  flex: 1;
316
  display: flex;
 
320
 
321
  .tab-header {
322
  display: flex;
323
+ background-color: var(--secondary-bg);
324
+ border-bottom: 1px solid var(--border-color);
325
  padding: 0 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
326
  }
327
 
 
 
 
 
 
328
  .tab {
329
+ padding: 0.75rem 1.5rem;
330
  cursor: pointer;
331
+ font-size: 0.9rem;
332
+ border-bottom: 2px solid transparent;
333
+ transition: all 0.2s ease;
334
  position: relative;
 
 
 
 
335
  }
336
 
337
+ .tab::after {
338
+ content: '';
339
+ position: absolute;
340
+ bottom: 0;
341
+ left: 50%;
342
+ width: 0;
343
+ height: 2px;
344
+ background-color: var(--accent-color);
345
+ transition: all 0.3s ease;
346
  }
347
 
348
+ .tab.active::after {
349
+ width: 100%;
350
+ left: 0;
351
  }
352
 
353
  .tab.active {
354
+ color: var(--accent-color);
355
  }
356
 
357
+ .tab:hover {
358
+ background-color: rgba(99, 102, 241, 0.1);
 
 
 
 
 
 
 
 
359
  }
360
 
 
361
  .tab-content {
362
  display: none;
363
  flex: 1;
 
369
  flex-direction: column;
370
  }
371
 
372
+ /* Chat Container */
373
  .chat-container {
374
  flex: 1;
375
  max-width: 1200px;
376
  width: 100%;
377
  margin: 0 auto;
378
+ padding: 1.5rem 1rem;
379
  display: flex;
380
  flex-direction: column;
381
  overflow-y: auto;
382
+ scrollbar-width: thin;
383
+ }
384
+
385
+ /* Messages */
386
+ .message {
387
+ max-width: 85%;
388
+ padding: 1rem;
389
+ border-radius: 1rem;
390
+ margin-bottom: 1.25rem;
391
+ line-height: 1.5;
392
+ animation: fadeIn 0.3s ease;
393
  position: relative;
394
  }
395
 
396
+ @keyframes fadeIn {
397
+ from { opacity: 0; transform: translateY(10px); }
398
+ to { opacity: 1; transform: translateY(0); }
 
 
 
 
399
  }
400
 
401
+ .user-message {
402
+ margin-left: auto;
403
+ background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
404
+ border-radius: 1.25rem 0.5rem 1.25rem 1.25rem;
405
+ color: white;
406
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 
 
 
407
  }
408
 
409
+ .assistant-message {
410
+ background-color: var(--assistant-bubble);
411
+ border-radius: 0.5rem 1.25rem 1.25rem 1.25rem;
412
+ border: 1px solid var(--border-color);
413
+ color: var(--text-color);
414
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
 
415
  }
416
 
417
+ .message-header {
418
+ display: flex;
419
+ align-items: center;
420
+ gap: 0.5rem;
421
+ margin-bottom: 0.5rem;
422
+ font-size: 0.85rem;
423
+ color: var(--text-secondary);
424
  }
425
 
426
+ .avatar {
427
+ width: 28px;
428
+ height: 28px;
429
+ border-radius: 50%;
430
+ display: flex;
431
+ align-items: center;
432
+ justify-content: center;
433
+ font-weight: 600;
434
+ font-size: 0.8rem;
435
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
436
  }
437
 
438
+ .user-avatar {
439
+ background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
440
+ color: white;
 
 
 
 
 
441
  }
442
 
443
+ .assistant-avatar {
444
+ background: linear-gradient(90deg, #10b981, #3b82f6);
445
+ color: white;
 
 
446
  }
447
 
448
+ /* Enhanced content styling */
449
+ .thinking-step {
450
+ background-color: rgba(30, 35, 50, 0.7);
451
+ border-left: 3px solid var(--accent-color);
452
+ padding: 0.75rem;
453
+ margin: 0.5rem 0;
454
+ border-radius: 0 0.25rem 0.25rem 0;
455
+ font-size: 0.9em;
456
+ color: var(--text-secondary);
457
+ font-style: italic;
458
+ animation: pulse 2s infinite;
459
+ }
460
+
461
+ @keyframes pulse {
462
+ 0%, 100% { opacity: 1; }
463
+ 50% { opacity: 0.7; }
464
+ }
465
+
466
+ .ai-plan {
467
+ background-color: rgba(25, 30, 45, 0.8);
468
+ border: 1px solid rgba(139, 92, 246, 0.3);
469
+ border-radius: 0.75rem;
470
+ padding: 1rem;
471
+ margin: 1rem 0;
472
  position: relative;
473
  overflow: hidden;
 
474
  }
475
 
476
+ .ai-plan::before {
477
  content: '';
478
  position: absolute;
479
+ top: 0;
480
+ left: 0;
481
+ width: 4px;
482
+ height: 100%;
483
+ background: linear-gradient(to bottom, var(--accent-color), var(--accent-hover));
 
 
 
 
 
 
 
 
 
 
484
  }
485
 
486
+ .plan-step {
487
+ background-color: rgba(30, 35, 50, 0.7);
488
+ border-left: 3px solid var(--accent-color);
489
+ padding: 0.5rem;
490
+ margin: 0.3rem 0;
491
+ border-radius: 0 0.25rem 0.25rem 0;
492
+ font-size: 0.95em;
493
  }
494
 
495
+ .code-container {
496
+ background-color: #1a1f2d;
497
+ border: 1px solid var(--border-color);
498
+ border-radius: 0.75rem;
499
+ padding: 1rem;
500
+ margin: 1rem 0;
501
+ font-family: 'Fira Code', monospace;
502
+ font-size: 0.95rem;
503
+ overflow-x: auto;
504
+ line-height: 1.5;
505
+ position: relative;
506
  }
507
 
508
+ .code-header {
 
 
 
 
509
  display: flex;
510
+ justify-content: space-between;
511
  align-items: center;
512
+ margin-bottom: 0.5rem;
513
+ padding-bottom: 0.5rem;
514
+ border-bottom: 1px solid var(--border-color);
515
  }
516
 
517
+ .code-language {
518
+ font-size: 0.8rem;
519
+ color: var(--text-secondary);
520
+ font-weight: 600;
521
  }
522
 
523
+ .copy-btn {
524
+ background: none;
525
+ border: none;
526
+ color: var(--text-secondary);
527
+ cursor: pointer;
528
+ font-size: 0.8rem;
529
+ transition: all 0.2s ease;
530
  }
531
 
532
+ .copy-btn:hover {
533
+ color: var(--accent-color);
 
 
 
 
 
 
 
 
534
  }
535
 
536
+ /* Files Tab */
537
+ .files-header {
538
+ display: flex;
539
+ justify-content: space-between;
540
+ align-items: center;
541
+ padding: 0.75rem 1rem;
542
+ background-color: var(--secondary-bg);
543
+ border-bottom: 1px solid var(--border-color);
 
544
  }
545
 
546
+ .file-actions {
547
+ display: flex;
548
+ gap: 0.5rem;
549
+ }
550
+
551
+ .file-action-btn {
552
+ background-color: var(--accent-color);
553
  color: white;
554
+ border: none;
555
+ border-radius: 0.5rem;
556
+ padding: 0.5rem 1rem;
557
+ font-size: 0.9rem;
558
+ cursor: pointer;
559
+ display: flex;
560
+ align-items: center;
561
+ gap: 0.5rem;
562
+ transition: all 0.2s ease;
563
  }
564
 
565
+ .file-action-btn:hover {
566
+ background-color: var(--accent-hover);
567
+ transform: translateY(-1px);
 
 
 
 
 
 
568
  }
569
 
570
+ .file-search input {
571
+ background-color: var(--secondary-bg);
572
+ border: 1px solid var(--border-color);
573
+ border-radius: 0.5rem;
574
+ padding: 0.5rem 1rem;
575
  color: var(--text-color);
576
+ width: 200px;
577
+ transition: all 0.2s ease;
578
  }
579
 
580
+ .file-search input:focus {
581
+ border-color: var(--accent-color);
582
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
 
 
 
 
 
 
583
  }
584
 
585
+ .file-tree {
586
+ flex: 1;
587
+ overflow-y: auto;
588
+ padding: 1rem;
 
 
 
589
  }
590
 
591
+ .folder-item {
592
+ margin-bottom: 0.5rem;
593
+ }
594
+
595
+ .folder-header {
596
  display: flex;
597
  align-items: center;
598
+ gap: 0.5rem;
599
+ padding: 0.5rem;
600
+ border-radius: 0.5rem;
601
+ cursor: pointer;
602
+ transition: all 0.2s ease;
603
  }
604
 
605
+ .folder-header:hover {
606
+ background-color: rgba(99, 102, 241, 0.1);
607
  }
608
 
609
+ .folder-icon {
610
+ transition: transform 0.3s ease;
611
  }
612
 
613
+ .folder-item.expanded .folder-icon {
614
+ transform: rotate(90deg);
615
  }
616
 
617
+ .folder-content {
618
+ margin-left: 1.5rem;
619
+ display: none;
620
+ animation: slideDown 0.3s ease;
621
  }
622
 
623
+ @keyframes slideDown {
624
+ from { opacity: 0; max-height: 0; }
625
+ to { opacity: 1; max-height: 500px; }
 
 
 
 
 
 
626
  }
627
 
628
+ .folder-item.expanded .folder-content {
629
+ display: block;
630
+ }
631
 
632
+ .file-item {
633
+ padding: 0.5rem;
634
+ border-radius: 0.5rem;
635
+ margin-bottom: 0.25rem;
636
+ cursor: pointer;
637
+ transition: all 0.2s ease;
638
+ display: flex;
639
+ align-items: center;
640
+ gap: 0.5rem;
641
+ font-size: 0.95rem;
642
  }
643
 
644
+ .file-item:hover {
645
+ background-color: rgba(99, 102, 241, 0.1);
646
+ color: var(--accent-color);
647
+ transform: translateX(5px);
 
 
 
 
 
 
 
648
  }
649
 
650
+ /* Terminal Tab */
651
+ .terminal-header {
652
+ display: flex;
653
+ justify-content: space-between;
654
+ align-items: center;
655
+ padding: 0.75rem 1rem;
656
+ background-color: var(--secondary-bg);
657
+ border-bottom: 1px solid var(--border-color);
658
  }
659
 
660
+ .terminal-title {
661
+ font-weight: 600;
 
 
 
 
 
 
662
  }
663
 
664
+ .terminal-controls {
665
+ display: flex;
666
+ gap: 0.5rem;
667
+ }
668
+
669
+ .terminal-control-btn {
670
+ background-color: var(--secondary-bg);
671
+ color: var(--text-color);
672
+ border: 1px solid var(--border-color);
673
+ border-radius: 0.5rem;
674
+ padding: 0.5rem 1rem;
675
+ font-size: 0.9rem;
676
+ cursor: pointer;
677
  display: flex;
678
  align-items: center;
679
+ gap: 0.5rem;
680
+ transition: all 0.2s ease;
 
 
681
  }
682
 
683
+ .terminal-control-btn:hover {
684
+ background-color: rgba(99, 102, 241, 0.1);
685
+ border-color: var(--accent-color);
686
  }
687
 
688
+ .terminal-output {
689
+ flex: 1;
690
+ padding: 1rem;
691
+ background-color: #0a0a0a;
692
+ color: #f0f0f0;
693
+ font-family: 'Fira Code', monospace;
694
+ overflow-y: auto;
695
+ white-space: pre-wrap;
696
+ line-height: 1.5;
697
  position: relative;
 
 
 
698
  }
699
 
700
+ .terminal-line {
701
+ margin-bottom: 0.25rem;
 
 
 
 
 
 
 
702
  }
703
 
704
+ .terminal-input-container {
705
+ display: flex;
706
+ align-items: center;
707
+ padding: 0.5rem 1rem;
708
+ background-color: #0a0a0a;
709
+ border-top: 1px solid var(--border-color);
710
+ }
711
+
712
+ .terminal-prompt {
713
+ color: var(--accent-color);
714
+ margin-right: 0.5rem;
715
  font-family: 'Fira Code', monospace;
716
+ font-weight: 600;
 
 
 
717
  }
718
 
719
+ #terminal-input {
720
+ flex: 1;
721
+ background-color: transparent;
722
+ border: none;
723
+ color: #f0f0f0;
724
+ font-family: 'Fira Code', monospace;
725
+ font-size: 1rem;
726
+ outline: none;
727
+ }
728
+
729
+ /* Preview Tab */
730
+ .preview-header {
731
  display: flex;
732
  justify-content: space-between;
733
  align-items: center;
734
+ padding: 0.75rem 1rem;
735
+ background-color: var(--secondary-bg);
736
+ border-bottom: 1px solid var(--border-color);
737
  }
738
 
739
+ .preview-title {
740
+ font-weight: 600;
741
+ }
742
+
743
+ .preview-controls {
744
  display: flex;
 
745
  gap: 0.5rem;
746
  }
747
 
748
+ .preview-control-btn {
749
+ background-color: var(--secondary-bg);
750
+ color: var(--text-color);
751
+ border: 1px solid var(--border-color);
752
+ border-radius: 0.5rem;
753
+ padding: 0.5rem 1rem;
754
+ font-size: 0.9rem;
755
  cursor: pointer;
756
+ display: flex;
757
+ align-items: center;
758
+ gap: 0.5rem;
759
+ transition: all 0.2s ease;
760
  }
761
 
762
+ .preview-control-btn:hover {
763
+ background-color: rgba(99, 102, 241, 0.1);
764
+ border-color: var(--accent-color);
765
+ }
766
+
767
+ #preview-frame {
768
+ flex: 1;
769
+ border: none;
770
+ width: 100%;
771
+ background-color: white;
772
  }
773
 
774
+ /* Input Area */
775
  .input-area {
776
+ background-color: rgba(15, 17, 23, 0.9);
777
+ backdrop-filter: blur(10px);
778
+ -webkit-backdrop-filter: blur(10px);
779
+ border-top: 1px solid var(--border-color);
780
+ padding: 1rem;
781
  position: sticky;
782
  bottom: 0;
 
 
783
  }
784
 
785
  .input-container {
786
  max-width: 1200px;
787
  margin: 0 auto;
788
  display: flex;
789
+ gap: 0.75rem;
790
  align-items: flex-end;
 
791
  }
792
 
793
  .message-input {
794
  flex: 1;
795
+ background-color: var(--secondary-bg);
796
+ border: 1px solid var(--border-color);
797
+ border-radius: 0.75rem;
798
+ padding: 0.75rem 1rem;
799
  color: var(--text-color);
800
+ font-size: 0.95rem;
801
  resize: none;
802
+ min-height: 52px;
803
+ max-height: 200px;
804
+ transition: all 0.2s ease;
805
+ outline: none;
806
  font-family: 'Inter', sans-serif;
807
  }
808
 
809
  .message-input:focus {
810
+ border-color: var(--accent-color);
811
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
 
 
 
 
 
 
812
  }
813
 
814
  .send-button {
815
+ background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
816
  color: white;
817
  border: none;
818
+ border-radius: 0.75rem;
819
+ padding: 0.65rem 1.25rem;
820
+ font-weight: 500;
 
821
  cursor: pointer;
822
+ transition: all 0.2s ease;
823
  display: flex;
824
  align-items: center;
825
  justify-content: center;
826
+ min-width: 52px;
827
+ height: 52px;
828
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
829
  }
830
 
831
  .send-button:hover {
832
+ transform: translateY(-2px);
833
+ box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
834
  }
835
 
836
+ .send-button:disabled {
837
+ opacity: 0.5;
838
+ cursor: not-allowed;
839
+ transform: none;
840
+ box-shadow: none;
841
  }
842
 
843
+ .input-hint {
844
+ text-align: center;
845
+ color: var(--text-secondary);
846
+ font-size: 0.8rem;
847
+ margin-top: 0.5rem;
848
  }
849
 
850
+ /* Welcome Screen */
851
+ .welcome-screen {
852
+ text-align: center;
853
+ padding: 2rem 1rem;
854
+ color: var(--text-secondary);
855
+ max-width: 800px;
856
+ margin: 2rem auto;
857
  }
858
 
859
+ .welcome-icon {
860
+ font-size: 4rem;
861
+ margin-bottom: 1rem;
862
+ background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
863
+ -webkit-background-clip: text;
864
+ -webkit-text-fill-color: transparent;
865
+ animation: float 3s ease-in-out infinite;
866
+ }
867
+
868
+ @keyframes float {
869
+ 0%, 100% { transform: translateY(0); }
870
+ 50% { transform: translateY(-10px); }
871
+ }
872
+
873
+ .welcome-title {
874
+ font-size: 2.5rem;
875
+ margin-bottom: 0.5rem;
876
+ color: var(--text-color);
877
+ font-weight: 700;
878
+ background: linear-gradient(90deg, var(--text-color), var(--accent-color));
879
+ -webkit-background-clip: text;
880
+ -webkit-text-fill-color: transparent;
881
+ }
882
+
883
+ .welcome-subtitle {
884
+ font-size: 1.1rem;
885
+ margin-bottom: 1.5rem;
886
  color: var(--text-secondary);
 
 
 
 
 
 
887
  }
888
 
889
+ .suggestion-cards {
890
+ display: grid;
891
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
892
+ gap: 1rem;
893
+ margin-top: 1rem;
894
  }
895
 
896
+ .suggestion-card {
897
+ background-color: var(--secondary-bg);
898
+ border: 1px solid var(--border-color);
899
+ border-radius: 0.75rem;
900
+ padding: 1rem;
901
+ cursor: pointer;
902
+ transition: all 0.3s ease;
903
+ text-align: left;
 
 
904
  position: relative;
905
+ overflow: hidden;
906
  }
907
 
908
+ .suggestion-card::before {
909
+ content: '';
910
+ position: absolute;
911
+ top: 0;
912
+ left: -100%;
913
+ width: 100%;
914
+ height: 100%;
915
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
916
+ transition: left 0.5s ease;
917
  }
918
 
919
+ .suggestion-card:hover::before {
920
+ left: 100%;
 
921
  }
922
 
923
+ .suggestion-card:hover {
924
+ transform: translateY(-5px);
925
+ border-color: var(--accent-color);
926
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
927
  }
928
 
929
+ .suggestion-title {
930
+ font-weight: 600;
931
+ margin-bottom: 0.5rem;
932
+ color: var(--accent-color);
933
+ display: flex;
934
+ align-items: center;
935
+ gap: 0.5rem;
936
+ }
937
 
938
+ .suggestion-desc {
939
  color: var(--text-secondary);
940
  font-size: 0.9rem;
 
941
  }
942
 
943
+ /* Typing Indicator */
944
+ .typing-indicator {
945
+ display: inline-block;
946
+ margin-left: 5px;
 
 
 
 
 
947
  }
948
 
949
+ .typing-dot {
950
+ display: inline-block;
951
+ width: 8px;
952
+ height: 8px;
953
+ border-radius: 50%;
954
+ background: var(--text-secondary);
955
+ margin: 0 1px;
956
+ animation: typing 1.4s infinite both;
957
  }
958
 
959
+ .typing-dot:nth-child(1) { animation-delay: -0.32s; }
960
+ .typing-dot:nth-child(2) { animation-delay: -0.16s; }
961
+ .typing-dot:nth-child(3) { animation-delay: 0s; }
 
 
962
 
963
+ @keyframes typing {
964
+ 0%, 80%, 100% { transform: scale(0.4); opacity: 0.5; }
965
+ 40% { transform: scale(1.0); opacity: 1; }
 
 
 
966
  }
967
 
968
+ /* Floating Action Button */
969
+ .floating-action-btn {
970
+ position: fixed;
971
+ bottom: 1.5rem;
972
+ right: 1.5rem;
973
+ width: 56px;
974
+ height: 56px;
975
+ border-radius: 50%;
976
+ background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
977
+ color: white;
978
  border: none;
979
+ display: flex;
980
+ align-items: center;
981
+ justify-content: center;
982
+ font-size: 1.5rem;
983
+ cursor: pointer;
984
+ box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
985
+ transition: all 0.3s ease;
986
+ z-index: 50;
987
+ animation: pulse 2s infinite;
988
  }
989
 
990
+ .floating-action-btn:hover {
991
+ transform: scale(1.1);
992
+ box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
 
 
 
 
 
 
993
  }
994
 
995
+ /* Mobile Responsiveness */
996
  @media (max-width: 768px) {
997
  .sidebar {
998
+ width: 85%;
999
  }
1000
+
 
 
 
 
 
 
 
 
 
1001
  .message {
1002
  max-width: 95%;
1003
  }
1004
+
 
 
 
 
 
 
 
 
1005
  .input-container {
1006
  flex-direction: column;
1007
  }
1008
+
1009
  .send-button {
1010
+ width: 100%;
1011
+ margin-top: 0.5rem;
1012
+ height: 44px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1013
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1014
 
1015
+ .header-right {
1016
+ display: none;
 
 
 
 
 
 
 
 
 
1017
  }
1018
+
1019
  .suggestion-cards {
1020
  grid-template-columns: 1fr;
1021
  }
1022
  }
1023
 
1024
+ /* Scrollbar Styling */
1025
+ ::-webkit-scrollbar {
1026
+ width: 6px;
 
 
 
 
 
1027
  }
1028
 
1029
+ ::-webkit-scrollbar-track {
1030
+ background: var(--secondary-bg);
 
 
1031
  }
1032
 
1033
+ ::-webkit-scrollbar-thumb {
1034
+ background: var(--border-color);
1035
+ border-radius: 3px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1036
  }
1037
 
1038
+ ::-webkit-scrollbar-thumb:hover {
1039
+ background: var(--accent-color);
1040
  }
1041
  </style>
1042
  </head>
1043
  <body>
1044
  <div id="app">
1045
+ <!-- Backdrop for sidebar on mobile -->
1046
+ <div class="sidebar-backdrop"></div>
1047
+
1048
+ <!-- Sidebar -->
1049
  <div class="sidebar">
1050
  <div class="sidebar-header">
1051
+ <h3>AI Assistant</h3>
 
 
 
1052
  <button class="close-btn">
1053
  <i class="fas fa-times"></i>
1054
  </button>
1055
  </div>
1056
 
1057
  <div class="sidebar-section">
1058
+ <h4>Chats</h4>
1059
  <div class="sidebar-item active">
1060
+ <i class="fas fa-comment"></i>
1061
+ <span>Today</span>
1062
  </div>
1063
  <div class="sidebar-item">
1064
+ <i class="fas fa-history"></i>
1065
+ <span>Previous 7 Days</span>
1066
  </div>
1067
  <div class="sidebar-item">
1068
+ <i class="fas fa-calendar"></i>
1069
+ <span>Previous 30 Days</span>
1070
  </div>
1071
+ </div>
1072
+
1073
+ <div class="sidebar-section">
1074
+ <h4>Collections</h4>
1075
  <div class="sidebar-item">
1076
+ <i class="fas fa-code"></i>
1077
+ <span>Programming</span>
1078
+ </div>
1079
+ <div class="sidebar-item">
1080
+ <i class="fas fa-palette"></i>
1081
  <span>Creative Writing</span>
1082
  </div>
1083
+ <div class="sidebar-item">
1084
+ <i class="fas fa-chart-bar"></i>
1085
+ <span>Data Analysis</span>
1086
+ </div>
1087
+ <div class="sidebar-item">
1088
+ <i class="fas fa-language"></i>
1089
+ <span>Translation</span>
1090
+ </div>
1091
  </div>
1092
 
1093
  <div class="sidebar-section">
1094
+ <h4>Settings</h4>
1095
  <div class="sidebar-item">
1096
+ <i class="fas fa-cog"></i>
1097
  <span>Preferences</span>
1098
  </div>
1099
  <div class="sidebar-item">
1100
+ <i class="fas fa-user"></i>
1101
+ <span>Account</span>
1102
  </div>
1103
  <div class="sidebar-item">
1104
+ <i class="fas fa-moon"></i>
1105
+ <span>Theme</span>
1106
  </div>
1107
  </div>
 
 
 
 
1108
  </div>
1109
 
1110
+ <!-- Main Content -->
1111
  <div class="main-content">
1112
+ <!-- Header -->
1113
+ <div class="header">
1114
  <div class="header-left">
1115
  <button class="hamburger-btn">
1116
  <i class="fas fa-bars"></i>
1117
  </button>
1118
  <div class="logo">
1119
+ <i class="fas fa-robot"></i>
1120
+ <span>AI Assistant</span>
1121
  </div>
1122
  </div>
1123
 
1124
  <div class="header-right">
1125
  <select class="mode-selector">
1126
+ <option>Balanced Mode</option>
1127
  <option>Creative Mode</option>
1128
+ <option>Precise Mode</option>
 
1129
  </select>
 
1130
  <select class="model-selector">
1131
+ <option>Qwen3-Max</option>
1132
+ <option>GPT-4</option>
1133
+ <option>Claude-3</option>
1134
  </select>
1135
+ <button class="new-chat-btn">
1136
+ <i class="fas fa-plus"></i>
1137
+ <span>New Chat</span>
1138
+ </button>
1139
  </div>
1140
+ </div>
1141
 
1142
+ <!-- Tab Container -->
1143
  <div class="tab-container">
1144
+ <div class="tab-header">
1145
+ <div class="tab active" data-tab="chat">Chat</div>
1146
+ <div class="tab" data-tab="files">Files</div>
1147
+ <div class="tab" data-tab="terminal">Terminal</div>
1148
+ <div class="tab" data-tab="preview">Preview</div>
 
 
 
 
 
 
 
 
 
 
 
 
1149
  </div>
1150
 
1151
+ <!-- Chat Tab -->
1152
  <div class="tab-content active" id="chat-tab">
1153
  <div class="chat-container">
1154
+ <!-- Welcome Screen -->
1155
  <div class="welcome-screen">
1156
+ <div class="welcome-icon">
1157
  <i class="fas fa-robot"></i>
1158
  </div>
1159
+ <h1 class="welcome-title">How can I help you today?</h1>
1160
+ <p class="welcome-subtitle">Ask me anything or try one of these examples</p>
1161
 
1162
  <div class="suggestion-cards">
1163
+ <div class="suggestion-card">
1164
  <div class="suggestion-title">
1165
  <i class="fas fa-code"></i>
1166
+ <span>Write a Python function</span>
1167
+ </div>
1168
+ <div class="suggestion-desc">
1169
+ Create a function to calculate Fibonacci sequence
1170
  </div>
 
1171
  </div>
1172
+ <div class="suggestion-card">
 
1173
  <div class="suggestion-title">
1174
+ <i class="fas fa-pen-fancy"></i>
1175
+ <span>Creative story</span>
1176
+ </div>
1177
+ <div class="suggestion-desc">
1178
+ Write a short story about a robot learning emotions
1179
  </div>
 
1180
  </div>
1181
+ <div class="suggestion-card">
 
1182
  <div class="suggestion-title">
1183
  <i class="fas fa-chart-line"></i>
1184
+ <span>Data analysis</span>
1185
+ </div>
1186
+ <div class="suggestion-desc">
1187
+ Help me analyze sales data and identify trends
1188
  </div>
 
 
 
 
 
 
 
 
 
 
1189
  </div>
1190
+ <div class="suggestion-card">
1191
+ <div class="suggestion-title">
1192
+ <i class="fas fa-language"></i>
1193
+ <span>Translate text</span>
1194
+ </div>
1195
+ <div class="suggestion-desc">
1196
+ Translate this paragraph to Spanish
1197
+ </div>
1198
  </div>
1199
  </div>
 
 
 
1200
  </div>
1201
 
1202
+ <!-- Example Messages -->
1203
  <div class="message user-message">
1204
  <div class="message-header">
1205
+ <div class="avatar user-avatar">U</div>
1206
+ <span>You</span>
 
 
 
 
 
1207
  </div>
1208
  <div class="message-content">
1209
+ Hello! Can you help me write a Python function to calculate the factorial of a number?
1210
  </div>
1211
  </div>
1212
 
1213
  <div class="message assistant-message">
1214
  <div class="message-header">
1215
+ <div class="avatar assistant-avatar">AI</div>
1216
+ <span>Assistant</span>
 
 
 
 
 
1217
  </div>
1218
  <div class="message-content">
1219
+ <div class="thinking-step">Thinking about the best approach...</div>
1220
+ <p>Sure! Here's a Python function to calculate the factorial of a number:</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1221
 
1222
  <div class="code-container">
1223
  <div class="code-header">
1224
+ <span class="code-language">Python</span>
 
 
 
1225
  <button class="copy-btn">
1226
  <i class="fas fa-copy"></i> Copy
1227
  </button>
1228
  </div>
1229
+ <pre><code>def factorial(n):
1230
+ """
1231
+ Calculate the factorial of a non-negative integer.
1232
+
1233
+ Args:
1234
+ n (int): A non-negative integer
1235
+
1236
+ Returns:
1237
+ int: The factorial of n
1238
+ """
1239
+ if n < 0:
1240
+ raise ValueError("Factorial is not defined for negative numbers")
1241
+ elif n == 0 or n == 1:
1242
+ return 1
1243
+ else:
1244
+ result = 1
1245
+ for i in range(2, n + 1):
1246
+ result *= i
1247
+ return result
1248
+
1249
+ # Example usage
1250
+ print(factorial(5)) # Output: 120</code></pre>
1251
  </div>
1252
 
1253
+ <p>This function handles edge cases and includes proper documentation. Would you like me to explain any part of it or create a recursive version instead?</p>
 
 
 
 
 
 
 
 
 
1254
  </div>
1255
  </div>
1256
  </div>
1257
+ </div>
1258
+
1259
+ <!-- Files Tab -->
1260
+ <div class="tab-content" id="files-tab">
1261
+ <div class="files-header">
1262
+ <div class="file-actions">
1263
+ <button class="file-action-btn">
1264
+ <i class="fas fa-plus"></i>
1265
+ <span>New File</span>
1266
  </button>
1267
+ <button class="file-action-btn">
1268
+ <i class="fas fa-folder-plus"></i>
1269
+ <span>New Folder</span>
1270
  </button>
1271
+ <button class="file-action-btn">
1272
+ <i class="fas fa-upload"></i>
1273
+ <span>Upload</span>
1274
  </button>
1275
  </div>
1276
+ <div class="file-search">
1277
+ <input type="text" placeholder="Search files...">
 
 
 
 
1278
  </div>
1279
  </div>
1280
+ <div class="file-tree">
1281
+ <div class="folder-item expanded">
1282
+ <div class="folder-header">
1283
+ <i class="fas fa-chevron-right folder-icon"></i>
1284
+ <i class="fas fa-folder"></i>
1285
+ <span>Projects</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1286
  </div>
1287
+ <div class="folder-content">
1288
+ <div class="file-item">
1289
+ <i class="fas fa-file-code"></i>
1290
+ <span>web_app.py</span>
1291
+ </div>
1292
+ <div class="file-item">
1293
+ <i class="fas fa-file-alt"></i>
1294
+ <span>README.md</span>
1295
+ </div>
1296
+ <div class="file-item">
1297
+ <i class="fas fa-file-image"></i>
1298
+ <span>design.png</span>
1299
+ </div>
1300
  </div>
1301
+ </div>
1302
+ <div class="folder-item">
1303
+ <div class="folder-header">
1304
+ <i class="fas fa-chevron-right folder-icon"></i>
1305
+ <i class="fas fa-folder"></i>
1306
+ <span>Documents</span>
1307
  </div>
1308
+ <div class="folder-content">
1309
+ <div class="file-item">
1310
+ <i class="fas fa-file-pdf"></i>
1311
+ <span>report.pdf</span>
1312
+ </div>
1313
+ <div class="file-item">
1314
+ <i class="fas fa-file-word"></i>
1315
+ <span>proposal.docx</span>
1316
+ </div>
1317
  </div>
1318
  </div>
1319
+ <div class="file-item">
1320
+ <i class="fas fa-file"></i>
1321
+ <span>notes.txt</span>
1322
+ </div>
1323
+ </div>
1324
+ </div>
1325
+
1326
+ <!-- Terminal Tab -->
1327
+ <div class="tab-content" id="terminal-tab">
1328
+ <div class="terminal-header">
1329
+ <div class="terminal-title">Terminal</div>
1330
+ <div class="terminal-controls">
1331
+ <button class="terminal-control-btn">
1332
+ <i class="fas fa-plus"></i>
1333
+ <span>New Tab</span>
1334
+ </button>
1335
+ <button class="terminal-control-btn">
1336
+ <i class="fas fa-redo"></i>
1337
+ <span>Clear</span>
1338
+ </button>
1339
+ </div>
1340
+ </div>
1341
+ <div class="terminal-output">
1342
+ <div class="terminal-line">[user@ai-assistant ~]$ ls -la</div>
1343
+ <div class="terminal-line">total 48</div>
1344
+ <div class="terminal-line">drwxr-xr-x 12 user staff 384 Jun 10 10:30 .</div>
1345
+ <div class="terminal-line">drwxr-xr-x 5 user staff 160 Jun 5 14:22 ..</div>
1346
+ <div class="terminal-line">-rw-r--r-- 1 user staff 324 Jun 8 09:15 .gitignore</div>
1347
+ <div class="terminal-line">drwxr-xr-x 4 user staff 128 Jun 10 10:30 src</div>
1348
+ <div class="terminal-line">drwxr-xr-x 3 user staff 96 Jun 9 16:45 docs</div>
1349
+ <div class="terminal-line">-rw-r--r-- 1 user staff 1024 Jun 10 10:28 package.json</div>
1350
+ <div class="terminal-line">[user@ai-assistant ~]$</div>
1351
+ </div>
1352
+ <div class="terminal-input-container">
1353
+ <span class="terminal-prompt">[user@ai-assistant ~]$</span>
1354
+ <input type="text" id="terminal-input" autocomplete="off">
1355
+ </div>
1356
+ </div>
1357
+
1358
+ <!-- Preview Tab -->
1359
+ <div class="tab-content" id="preview-tab">
1360
+ <div class="preview-header">
1361
+ <div class="preview-title">Preview</div>
1362
+ <div class="preview-controls">
1363
+ <button class="preview-control-btn">
1364
+ <i class="fas fa-sync-alt"></i>
1365
+ <span>Refresh</span>
1366
+ </button>
1367
+ <button class="preview-control-btn">
1368
+ <i class="fas fa-expand"></i>
1369
+ <span>Fullscreen</span>
1370
+ </button>
1371
  </div>
1372
  </div>
1373
+ <iframe id="preview-frame" src="about:blank"></iframe>
1374
+ </div>
1375
+ </div>
1376
+
1377
+ <!-- Input Area -->
1378
+ <div class="input-area">
1379
+ <div class="input-container">
1380
+ <textarea class="message-input" placeholder="Type your message here..."></textarea>
1381
+ <button class="send-button">
1382
+ <i class="fas fa-paper-plane"></i>
1383
+ </button>
1384
+ </div>
1385
+ <div class="input-hint">
1386
+ Press Enter to send, Shift+Enter for new line
1387
  </div>
1388
  </div>
1389
  </div>
1390
 
1391
  <!-- Floating Action Button for Mobile -->
1392
+ <button class="floating-action-btn">
1393
  <i class="fas fa-plus"></i>
1394
  </button>
1395
  </div>
1396
 
1397
  <script>
 
1398
  document.addEventListener('DOMContentLoaded', function() {
1399
+ // Sidebar toggle functionality
1400
  const hamburgerBtn = document.querySelector('.hamburger-btn');
1401
  const closeBtn = document.querySelector('.close-btn');
1402
  const sidebar = document.querySelector('.sidebar');
1403
+ const sidebarBackdrop = document.querySelector('.sidebar-backdrop');
1404
 
1405
+ function toggleSidebar() {
1406
+ sidebar.classList.toggle('open');
1407
+ sidebarBackdrop.classList.toggle('active');
1408
+ }
1409
 
1410
+ hamburgerBtn.addEventListener('click', toggleSidebar);
1411
+ closeBtn.addEventListener('click', toggleSidebar);
1412
+ sidebarBackdrop.addEventListener('click', toggleSidebar);
1413
 
1414
+ // Tab switching functionality
1415
  const tabs = document.querySelectorAll('.tab');
1416
  const tabContents = document.querySelectorAll('.tab-content');
 
1417
 
1418
  tabs.forEach(tab => {
1419
  tab.addEventListener('click', () => {
1420
+ // Remove active class from all tabs and contents
 
 
 
 
1421
  tabs.forEach(t => t.classList.remove('active'));
1422
+ tabContents.forEach(c => c.classList.remove('active'));
1423
+
1424
+ // Add active class to clicked tab and corresponding content
1425
  tab.classList.add('active');
1426
+ const tabId = tab.getAttribute('data-tab');
1427
+ document.getElementById(`${tabId}-tab`).classList.add('active');
1428
+ });
1429
+ });
1430
+
1431
+ // Auto-resize textarea
1432
+ const messageInput = document.querySelector('.message-input');
1433
+
1434
+ messageInput.addEventListener('input', function() {
1435
+ this.style.height = 'auto';
1436
+ this.style.height = (this.scrollHeight) + 'px';
1437
+ });
1438
+
1439
+ // Send message on Enter (without Shift)
1440
+ messageInput.addEventListener('keydown', function(e) {
1441
+ if (e.key === 'Enter' && !e.shiftKey) {
1442
+ e.preventDefault();
1443
+ // In a real app, this would send the message
1444
+ // For demo, we'll just clear the input
1445
+ this.value = '';
1446
+ this.style.height = 'auto';
1447
+ }
1448
+ });
1449
+
1450
+ // Folder expansion
1451
+ const folderHeaders = document.querySelectorAll('.folder-header');
1452
+
1453
+ folderHeaders.forEach(header => {
1454
+ header.addEventListener('click', () => {
1455
+ const folderItem = header.parentElement;
1456
+ folderItem.classList.toggle('expanded');
1457
+ });
1458
+ });
1459
+
1460
+ // Copy button functionality
1461
+ const copyButtons = document.querySelectorAll('.copy-btn');
1462
+
1463
+ copyButtons.forEach(button => {
1464
+ button.addEventListener('click', () => {
1465
+ const codeBlock = button.parentElement.nextElementSibling;
1466
+ const text = codeBlock.textContent;
1467
 
1468
+ navigator.clipboard.writeText(text).then(() => {
1469
+ // Visual feedback
1470
+ const originalText = button.innerHTML;
1471
+ button.innerHTML = '<i class="fas fa-check"></i> Copied!';
1472
+
1473
+ setTimeout(() => {
1474
+ button.innerHTML = originalText;
1475
+ }, 2000);
1476
+ });
1477
  });
1478
  });
1479
 
1480
+ // Suggestion cards
1481
+ const suggestionCards = document.querySelectorAll('.suggestion-card');
1482
+
1483
+ suggestionCards.forEach(card => {
1484
+ card.addEventListener('click', () => {
1485
+ const title = card.querySelector('.suggestion-title span').textContent;
1486
+ messageInput.value = title;
1487
+ messageInput.focus();
1488
+
1489
+ // Trigger the input event to resize the textarea
1490
+ const event = new Event('input', { bubbles: true });
1491
+ messageInput.dispatchEvent(event);
1492
  });
1493
+ });
1494
 
1495
+ // Simulate typing in terminal
1496
  const terminalInput = document.getElementById('terminal-input');
1497
+ const terminalOutput = document.querySelector('.terminal-output');
1498
+
1499
+ terminalInput.addEventListener('keydown', function(e) {
1500
+ if (e.key === 'Enter') {
1501
+ e.preventDefault();
1502
+ const command = this.value.trim();
1503
+
1504
+ if (command) {
1505
+ // Add the command to output
1506
+ const commandLine = document.createElement('div');
1507
+ commandLine.className = 'terminal-line';
1508
+ commandLine.textContent = `[user@ai-assistant ~]$ ${command}`;
1509
+ terminalOutput.appendChild(commandLine);
1510
+
1511
+ // Simulate command output based on input
1512
+ setTimeout(() => {
1513
+ let output = '';
1514
+
1515
+ if (command === 'ls' || command === 'ls -la') {
1516
+ output = `total 48
1517
+ drwxr-xr-x 12 user staff 384 Jun 10 10:30 .
1518
+ drwxr-xr-x 5 user staff 160 Jun 5 14:22 ..
1519
+ -rw-r--r-- 1 user staff 324 Jun 8 09:15 .gitignore
1520
+ drwxr-xr-x 4 user staff 128 Jun 10 10:30 src
1521
+ drwxr-xr-x 3 user staff 96 Jun 9 16:45 docs
1522
+ -rw-r--r-- 1 user staff 1024 Jun 10 10:28 package.json`;
1523
+ } else if (command === 'pwd') {
1524
+ output = '/home/user/ai-assistant';
1525
+ } else if (command === 'whoami') {
1526
+ output = 'user';
1527
+ } else {
1528
+ output = `Command '${command}' not found`;
1529
+ }
1530
+
1531
+ const outputLines = output.split('\n');
1532
+ outputLines.forEach(line => {
1533
+ const outputLine = document.createElement('div');
1534
+ outputLine.className = 'terminal-line';
1535
+ outputLine.textContent = line;
1536
+ terminalOutput.appendChild(outputLine);
1537
+ });
1538
+
1539
+ // Add new prompt
1540
+ const promptLine = document.createElement('div');
1541
+ promptLine.className = 'terminal-line';
1542
+ promptLine.textContent = '[user@ai-assistant ~]$';
1543
+ terminalOutput.appendChild(promptLine);
1544
+
1545
+ // Scroll to bottom
1546
+ terminalOutput.scrollTop = terminalOutput.scrollHeight;
1547
+ }, 300);
1548
+
1549
+ // Clear input
1550
+ this.value = '';
1551
+ }
1552
+ }
1553
+ });
1554
+
1555
+ // New chat button functionality
1556
+ const newChatBtn = document.querySelector('.new-chat-btn');
1557
+ const floatingActionBtn = document.querySelector('.floating-action-btn');
1558
+
1559
+ function startNewChat() {
1560
+ // Hide welcome screen and show empty chat
1561
+ const welcomeScreen = document.querySelector('.welcome-screen');
1562
+ const exampleMessages = document.querySelectorAll('.message');
1563
+
1564
+ welcomeScreen.style.display = 'none';
1565
+ exampleMessages.forEach(msg => msg.style.display = 'none');
1566
+
1567
+ // Clear input
1568
+ messageInput.value = '';
1569
+ messageInput.focus();
1570
+
1571
+ // Switch to chat tab if not already there
1572
+ tabs[0].click();
1573
  }
1574
+
1575
+ newChatBtn.addEventListener('click', startNewChat);
1576
+ floatingActionBtn.addEventListener('click', startNewChat);
1577
  });
1578
  </script>
1579
  </body>