Hugging Face's logo

Spaces:
Colt45en
/
anycoder-5492a652
Running

App Files Community
Colt45en commited on
Commit
f766350
·
verified ·
1 Parent(s): c86e827

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +926 -19
index.html CHANGED
@@ -1,19 +1,926 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Chat Assistant</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary-color: #6366f1;
17
+ --secondary-color: #8b5cf6;
18
+ --bg-primary: #0f172a;
19
+ --bg-secondary: #1e293b;
20
+ --bg-tertiary: #334155;
21
+ --text-primary: #f1f5f9;
22
+ --text-secondary: #94a3b8;
23
+ --accent: #22d3ee;
24
+ --message-user: #6366f1;
25
+ --message-ai: #334155;
26
+ --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
27
+ --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1);
28
+ --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
29
+ --border-radius: 12px;
30
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
31
+ }
32
+
33
+ body.light-theme {
34
+ --bg-primary: #ffffff;
35
+ --bg-secondary: #f8fafc;
36
+ --bg-tertiary: #e2e8f0;
37
+ --text-primary: #1e293b;
38
+ --text-secondary: #64748b;
39
+ --message-user: #6366f1;
40
+ --message-ai: #f1f5f9;
41
+ --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
42
+ --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1);
43
+ }
44
+
45
+ body {
46
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
47
+ background: var(--bg-primary);
48
+ color: var(--text-primary);
49
+ height: 100vh;
50
+ overflow: hidden;
51
+ transition: var(--transition);
52
+ }
53
+
54
+ .app-container {
55
+ display: flex;
56
+ height: 100vh;
57
+ position: relative;
58
+ }
59
+
60
+ /* Sidebar */
61
+ .sidebar {
62
+ width: 280px;
63
+ background: var(--bg-secondary);
64
+ border-right: 1px solid var(--bg-tertiary);
65
+ display: flex;
66
+ flex-direction: column;
67
+ transition: var(--transition);
68
+ position: relative;
69
+ z-index: 10;
70
+ }
71
+
72
+ .sidebar-header {
73
+ padding: 20px;
74
+ border-bottom: 1px solid var(--bg-tertiary);
75
+ background: var(--bg-tertiary);
76
+ }
77
+
78
+ .logo {
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 12px;
82
+ font-size: 1.5rem;
83
+ font-weight: 700;
84
+ color: var(--primary-color);
85
+ }
86
+
87
+ .logo i {
88
+ font-size: 2rem;
89
+ background: var(--gradient);
90
+ -webkit-background-clip: text;
91
+ -webkit-text-fill-color: transparent;
92
+ }
93
+
94
+ .new-chat-btn {
95
+ margin: 20px;
96
+ padding: 12px;
97
+ background: var(--gradient);
98
+ border: none;
99
+ border-radius: var(--border-radius);
100
+ color: white;
101
+ font-size: 1rem;
102
+ font-weight: 600;
103
+ cursor: pointer;
104
+ transition: var(--transition);
105
+ display: flex;
106
+ align-items: center;
107
+ justify-content: center;
108
+ gap: 8px;
109
+ }
110
+
111
+ .new-chat-btn:hover {
112
+ transform: translateY(-2px);
113
+ box-shadow: var(--shadow-lg);
114
+ }
115
+
116
+ .chat-history {
117
+ flex: 1;
118
+ overflow-y: auto;
119
+ padding: 10px;
120
+ }
121
+
122
+ .chat-history-item {
123
+ padding: 12px 16px;
124
+ margin-bottom: 8px;
125
+ border-radius: var(--border-radius);
126
+ cursor: pointer;
127
+ transition: var(--transition);
128
+ display: flex;
129
+ align-items: center;
130
+ gap: 12px;
131
+ color: var(--text-secondary);
132
+ }
133
+
134
+ .chat-history-item:hover {
135
+ background: var(--bg-tertiary);
136
+ color: var(--text-primary);
137
+ }
138
+
139
+ .chat-history-item.active {
140
+ background: var(--primary-color);
141
+ color: white;
142
+ }
143
+
144
+ .chat-history-item i {
145
+ font-size: 1.2rem;
146
+ }
147
+
148
+ /* Main Chat Area */
149
+ .main-content {
150
+ flex: 1;
151
+ display: flex;
152
+ flex-direction: column;
153
+ position: relative;
154
+ }
155
+
156
+ .chat-header {
157
+ padding: 20px 30px;
158
+ background: var(--bg-secondary);
159
+ border-bottom: 1px solid var(--bg-tertiary);
160
+ display: flex;
161
+ justify-content: space-between;
162
+ align-items: center;
163
+ }
164
+
165
+ .chat-info {
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 15px;
169
+ }
170
+
171
+ .status-indicator {
172
+ width: 10px;
173
+ height: 10px;
174
+ background: #10b981;
175
+ border-radius: 50%;
176
+ animation: pulse 2s infinite;
177
+ }
178
+
179
+ @keyframes pulse {
180
+ 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
181
+ 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
182
+ 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
183
+ }
184
+
185
+ .header-actions {
186
+ display: flex;
187
+ gap: 15px;
188
+ }
189
+
190
+ .header-btn {
191
+ background: none;
192
+ border: none;
193
+ color: var(--text-secondary);
194
+ font-size: 1.2rem;
195
+ cursor: pointer;
196
+ padding: 8px;
197
+ border-radius: 8px;
198
+ transition: var(--transition);
199
+ }
200
+
201
+ .header-btn:hover {
202
+ background: var(--bg-tertiary);
203
+ color: var(--text-primary);
204
+ }
205
+
206
+ .messages-container {
207
+ flex: 1;
208
+ overflow-y: auto;
209
+ padding: 30px;
210
+ display: flex;
211
+ flex-direction: column;
212
+ gap: 20px;
213
+ scroll-behavior: smooth;
214
+ }
215
+
216
+ .message {
217
+ display: flex;
218
+ gap: 15px;
219
+ animation: slideIn 0.3s ease-out;
220
+ max-width: 80%;
221
+ }
222
+
223
+ @keyframes slideIn {
224
+ from { opacity: 0; transform: translateY(20px); }
225
+ to { opacity: 1; transform: translateY(0); }
226
+ }
227
+
228
+ .message.user {
229
+ align-self: flex-end;
230
+ flex-direction: row-reverse;
231
+ }
232
+
233
+ .message-avatar {
234
+ width: 40px;
235
+ height: 40px;
236
+ border-radius: 50%;
237
+ display: flex;
238
+ align-items: center;
239
+ justify-content: center;
240
+ font-size: 1.2rem;
241
+ flex-shrink: 0;
242
+ }
243
+
244
+ .message.user .message-avatar {
245
+ background: var(--gradient);
246
+ color: white;
247
+ }
248
+
249
+ .message.ai .message-avatar {
250
+ background: var(--bg-tertiary);
251
+ color: var(--primary-color);
252
+ }
253
+
254
+ .message-content {
255
+ display: flex;
256
+ flex-direction: column;
257
+ gap: 5px;
258
+ }
259
+
260
+ .message-bubble {
261
+ padding: 15px 20px;
262
+ border-radius: var(--border-radius);
263
+ background: var(--message-ai);
264
+ color: var(--text-primary);
265
+ line-height: 1.6;
266
+ word-wrap: break-word;
267
+ position: relative;
268
+ box-shadow: var(--shadow);
269
+ }
270
+
271
+ .message.user .message-bubble {
272
+ background: var(--message-user);
273
+ color: white;
274
+ }
275
+
276
+ .message-time {
277
+ font-size: 0.75rem;
278
+ color: var(--text-secondary);
279
+ padding: 0 5px;
280
+ }
281
+
282
+ .typing-indicator {
283
+ display: none;
284
+ align-items: center;
285
+ gap: 15px;
286
+ padding: 0 30px;
287
+ }
288
+
289
+ .typing-indicator.active {
290
+ display: flex;
291
+ }
292
+
293
+ .typing-dots {
294
+ display: flex;
295
+ gap: 5px;
296
+ padding: 15px 20px;
297
+ background: var(--message-ai);
298
+ border-radius: var(--border-radius);
299
+ box-shadow: var(--shadow);
300
+ }
301
+
302
+ .typing-dot {
303
+ width: 8px;
304
+ height: 8px;
305
+ border-radius: 50%;
306
+ background: var(--text-secondary);
307
+ animation: typing 1.4s infinite;
308
+ }
309
+
310
+ .typing-dot:nth-child(2) { animation-delay: 0.2s; }
311
+ .typing-dot:nth-child(3) { animation-delay: 0.4s; }
312
+
313
+ @keyframes typing {
314
+ 0%, 60%, 100% { transform: translateY(0); }
315
+ 30% { transform: translateY(-10px); }
316
+ }
317
+
318
+ /* Input Area */
319
+ .input-container {
320
+ padding: 20px 30px;
321
+ background: var(--bg-secondary);
322
+ border-top: 1px solid var(--bg-tertiary);
323
+ }
324
+
325
+ .input-wrapper {
326
+ display: flex;
327
+ gap: 12px;
328
+ align-items: center;
329
+ background: var(--bg-primary);
330
+ border: 2px solid var(--bg-tertiary);
331
+ border-radius: var(--border-radius);
332
+ padding: 5px;
333
+ transition: var(--transition);
334
+ }
335
+
336
+ .input-wrapper:focus-within {
337
+ border-color: var(--primary-color);
338
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
339
+ }
340
+
341
+ .message-input {
342
+ flex: 1;
343
+ border: none;
344
+ background: none;
345
+ padding: 12px 15px;
346
+ font-size: 1rem;
347
+ color: var(--text-primary);
348
+ outline: none;
349
+ resize: none;
350
+ max-height: 120px;
351
+ min-height: 24px;
352
+ }
353
+
354
+ .input-actions {
355
+ display: flex;
356
+ gap: 8px;
357
+ }
358
+
359
+ .input-btn {
360
+ background: none;
361
+ border: none;
362
+ color: var(--text-secondary);
363
+ font-size: 1.2rem;
364
+ cursor: pointer;
365
+ padding: 10px;
366
+ border-radius: 8px;
367
+ transition: var(--transition);
368
+ }
369
+
370
+ .input-btn:hover {
371
+ background: var(--bg-tertiary);
372
+ color: var(--text-primary);
373
+ }
374
+
375
+ .send-btn {
376
+ background: var(--gradient);
377
+ color: white;
378
+ padding: 10px 15px;
379
+ border-radius: 8px;
380
+ }
381
+
382
+ .send-btn:hover {
383
+ transform: translateY(-2px);
384
+ box-shadow: var(--shadow);
385
+ }
386
+
387
+ /* Mobile Menu Toggle */
388
+ .mobile-menu-toggle {
389
+ display: none;
390
+ position: fixed;
391
+ top: 20px;
392
+ left: 20px;
393
+ z-index: 100;
394
+ background: var(--bg-secondary);
395
+ border: none;
396
+ color: var(--text-primary);
397
+ font-size: 1.5rem;
398
+ padding: 10px;
399
+ border-radius: var(--border-radius);
400
+ cursor: pointer;
401
+ box-shadow: var(--shadow);
402
+ }
403
+
404
+ /* Responsive Design */
405
+ @media (max-width: 768px) {
406
+ .sidebar {
407
+ position: fixed;
408
+ left: -280px;
409
+ height: 100vh;
410
+ z-index: 50;
411
+ box-shadow: var(--shadow-lg);
412
+ }
413
+
414
+ .sidebar.active {
415
+ left: 0;
416
+ }
417
+
418
+ .mobile-menu-toggle {
419
+ display: block;
420
+ }
421
+
422
+ .message {
423
+ max-width: 90%;
424
+ }
425
+
426
+ .messages-container {
427
+ padding: 20px 15px;
428
+ }
429
+
430
+ .input-container {
431
+ padding: 15px;
432
+ }
433
+
434
+ .chat-header {
435
+ padding: 15px 20px;
436
+ }
437
+ }
438
+
439
+ /* Scrollbar Styling */
440
+ ::-webkit-scrollbar {
441
+ width: 8px;
442
+ height: 8px;
443
+ }
444
+
445
+ ::-webkit-scrollbar-track {
446
+ background: var(--bg-tertiary);
447
+ }
448
+
449
+ ::-webkit-scrollbar-thumb {
450
+ background: var(--text-secondary);
451
+ border-radius: 4px;
452
+ }
453
+
454
+ ::-webkit-scrollbar-thumb:hover {
455
+ background: var(--primary-color);
456
+ }
457
+
458
+ /* Welcome Screen */
459
+ .welcome-screen {
460
+ display: flex;
461
+ flex-direction: column;
462
+ align-items: center;
463
+ justify-content: center;
464
+ height: 100%;
465
+ text-align: center;
466
+ padding: 40px;
467
+ }
468
+
469
+ .welcome-icon {
470
+ font-size: 4rem;
471
+ background: var(--gradient);
472
+ -webkit-background-clip: text;
473
+ -webkit-text-fill-color: transparent;
474
+ margin-bottom: 20px;
475
+ }
476
+
477
+ .welcome-title {
478
+ font-size: 2rem;
479
+ font-weight: 700;
480
+ margin-bottom: 10px;
481
+ }
482
+
483
+ .welcome-subtitle {
484
+ color: var(--text-secondary);
485
+ font-size: 1.1rem;
486
+ margin-bottom: 30px;
487
+ }
488
+
489
+ .suggestions {
490
+ display: flex;
491
+ flex-wrap: wrap;
492
+ gap: 12px;
493
+ justify-content: center;
494
+ max-width: 600px;
495
+ }
496
+
497
+ .suggestion-chip {
498
+ padding: 10px 20px;
499
+ background: var(--bg-tertiary);
500
+ border: 1px solid var(--bg-tertiary);
501
+ border-radius: 20px;
502
+ color: var(--text-primary);
503
+ cursor: pointer;
504
+ transition: var(--transition);
505
+ font-size: 0.9rem;
506
+ }
507
+
508
+ .suggestion-chip:hover {
509
+ background: var(--primary-color);
510
+ color: white;
511
+ transform: translateY(-2px);
512
+ box-shadow: var(--shadow);
513
+ }
514
+ </style>
515
+ </head>
516
+ <body>
517
+ <div class="app-container">
518
+ <!-- Mobile Menu Toggle -->
519
+ <button class="mobile-menu-toggle" onclick="toggleSidebar()">
520
+ <i class="fas fa-bars"></i>
521
+ </button>
522
+
523
+ <!-- Sidebar -->
524
+ <aside class="sidebar" id="sidebar">
525
+ <div class="sidebar-header">
526
+ <div class="logo">
527
+ <i class="fas fa-robot"></i>
528
+ <span>AI Assistant</span>
529
+ </div>
530
+ </div>
531
+
532
+ <button class="new-chat-btn" onclick="startNewChat()">
533
+ <i class="fas fa-plus"></i>
534
+ New Chat
535
+ </button>
536
+
537
+ <div class="chat-history" id="chatHistory">
538
+ <div class="chat-history-item active">
539
+ <i class="fas fa-message"></i>
540
+ <span>Current Conversation</span>
541
+ </div>
542
+ </div>
543
+ </aside>
544
+
545
+ <!-- Main Content -->
546
+ <main class="main-content">
547
+ <!-- Chat Header -->
548
+ <div class="chat-header">
549
+ <div class="chat-info">
550
+ <div class="status-indicator"></div>
551
+ <div>
552
+ <div style="font-weight: 600;">AI Assistant</div>
553
+ <div style="font-size: 0.85rem; color: var(--text-secondary);">Always here to help</div>
554
+ </div>
555
+ </div>
556
+ <div class="header-actions">
557
+ <button class="header-btn" onclick="toggleTheme()" title="Toggle theme">
558
+ <i class="fas fa-moon" id="themeIcon"></i>
559
+ </button>
560
+ <button class="header-btn" onclick="clearChat()" title="Clear chat">
561
+ <i class="fas fa-trash"></i>
562
+ </button>
563
+ <button class="header-btn" onclick="downloadChat()" title="Download chat">
564
+ <i class="fas fa-download"></i>
565
+ </button>
566
+ </div>
567
+ </div>
568
+
569
+ <!-- Messages Container -->
570
+ <div class="messages-container" id="messagesContainer">
571
+ <div class="welcome-screen" id="welcomeScreen">
572
+ <i class="fas fa-comments welcome-icon"></i>
573
+ <h1 class="welcome-title">Welcome to AI Chat</h1>
574
+ <p class="welcome-subtitle">Start a conversation with your AI assistant. I'm here to help with any questions or tasks you have!</p>
575
+ <div class="suggestions">
576
+ <div class="suggestion-chip" onclick="sendSuggestion('Help me write a professional email')">
577
+ ✉️ Write an email
578
+ </div>
579
+ <div class="suggestion-chip" onclick="sendSuggestion('Explain quantum computing simply')">
580
+ 🧠 Explain concept
581
+ </div>
582
+ <div class="suggestion-chip" onclick="sendSuggestion('Give me coding tips for JavaScript')">
583
+ 💻 Coding help
584
+ </div>
585
+ <div class="suggestion-chip" onclick="sendSuggestion('Create a workout plan')">
586
+ 🏃 Fitness plan
587
+ </div>
588
+ <div class="suggestion-chip" onclick="sendSuggestion('Help me brainstorm ideas')">
589
+ 💡 Brainstorm
590
+ </div>
591
+ <div class="suggestion-chip" onclick="sendSuggestion('Tell me a fun fact')">
592
+ 🎉 Fun fact
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <!-- Typing Indicator -->
599
+ <div class="typing-indicator" id="typingIndicator">
600
+ <div class="message-avatar">
601
+ <i class="fas fa-robot"></i>
602
+ </div>
603
+ <div class="typing-dots">
604
+ <div class="typing-dot"></div>
605
+ <div class="typing-dot"></div>
606
+ <div class="typing-dot"></div>
607
+ </div>
608
+ </div>
609
+
610
+ <!-- Input Container -->
611
+ <div class="input-container">
612
+ <div class="input-wrapper">
613
+ <textarea
614
+ class="message-input"
615
+ id="messageInput"
616
+ placeholder="Type your message..."
617
+ rows="1"
618
+ onkeydown="handleKeyPress(event)"
619
+ oninput="autoResize(this)"
620
+ ></textarea>
621
+ <div class="input-actions">
622
+ <button class="input-btn" onclick="attachFile()" title="Attach file">
623
+ <i class="fas fa-paperclip"></i>
624
+ </button>
625
+ <button class="input-btn" onclick="voiceInput()" title="Voice input">
626
+ <i class="fas fa-microphone"></i>
627
+ </button>
628
+ <button class="input-btn send-btn" onclick="sendMessage()" title="Send message">
629
+ <i class="fas fa-paper-plane"></i>
630
+ </button>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </main>
635
+ </div>
636
+
637
+ <script>
638
+ let chatStarted = false;
639
+ let messageHistory = [];
640
+
641
+ // AI Responses Database
642
+ const aiResponses = {
643
+ greeting: [
644
+ "Hello! I'm your AI assistant. How can I help you today?",
645
+ "Hi there! What can I do for you?",
646
+ "Greetings! I'm here to assist you with any questions or tasks."
647
+ ],
648
+ coding: [
649
+ "I'd be happy to help you with coding! JavaScript is a versatile language. Some key tips: 1) Use const and let instead of var, 2) Learn async/await for handling promises, 3) Master array methods like map, filter, and reduce. What specific aspect would you like to explore?",
650
+ "For JavaScript development, I recommend focusing on modern ES6+ features, understanding closures, and practicing DOM manipulation. Would you like me to explain any of these in detail?"
651
+ ],
652
+ email: [
653
+ "I can help you write a professional email! Here's a template:\n\nSubject: [Your Subject]\n\nDear [Recipient Name],\n\n[Opening sentence stating purpose]\n\n[Main body with details]\n\n[Closing sentence]\n\nBest regards,\n[Your Name]\n\nWould you like me to help you customize this for a specific situation?"
654
+ ],
655
+ quantum: [
656
+ "Quantum computing is like traditional computing but uses quantum bits (qubits) instead of regular bits. While regular bits are either 0 or 1, qubits can be both at the same time! This allows quantum computers to process many possibilities simultaneously. Think of it like exploring all paths in a maze at once instead of one by one. It's particularly useful for complex problems like drug discovery and cryptography."
657
+ ],
658
+ workout: [
659
+ "Here's a balanced workout plan:\n\n🏋️ **Monday**: Upper body (push-ups, pull-ups, shoulder press)\n🏃 **Tuesday**: Cardio (30 min run or cycling)\n💪 **Wednesday**: Lower body (squats, lunges, deadlifts)\n🧘 **Thursday**: Flexibility & core (yoga, planks)\n🏊 **Friday**: Full body circuit\n🚶 **Weekend**: Active recovery (walking, stretching)\n\nRemember to warm up, stay hydrated, and listen to your body!"
660
+ ],
661
+ brainstorm: [
662
+ "I love brainstorming! Let's explore some creative thinking techniques:\n\n1. **Mind Mapping**: Start with a central idea and branch out\n2. **SCAMPER**: Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, Reverse\n3. **Six Thinking Hats**: Look at problems from different perspectives\n4. **Random Word Association**: Connect unrelated concepts\n\nWhat topic would you like to brainstorm about?"
663
+ ],
664
+ fact: [
665
+ "Here's a fun fact: Octopuses have three hearts! Two pump blood through the gills, while the third pumps it to the rest of the body. When they swim, the heart that delivers blood to the body actually stops beating, which is why they prefer crawling over swimming!",
666
+ "Fun fact: Honey never spoils! Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old and still perfectly edible. The low water content and acidic pH make it impossible for bacteria to grow."
667
+ ],
668
+ default: [
669
+ "That's an interesting question! Let me think about that for you...",
670
+ "I understand what you're asking. Here's what I think about it...",
671
+ "Great question! Based on my knowledge, I can tell you that...",
672
+ "That's something I can definitely help with. Here's my take on it..."
673
+ ]
674
+ };
675
+
676
+ // Get relevant response
677
+ function getAIResponse(message) {
678
+ const lowerMessage = message.toLowerCase();
679
+
680
+ if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('hey')) {
681
+ return getRandomResponse(aiResponses.greeting);
682
+ } else if (lowerMessage.includes('coding') || lowerMessage.includes('javascript') || lowerMessage.includes('code')) {
683
+ return getRandomResponse(aiResponses.coding);
684
+ } else if (lowerMessage.includes('email') || lowerMessage.includes('mail')) {
685
+ return getRandomResponse(aiResponses.email);
686
+ } else if (lowerMessage.includes('quantum') || lowerMessage.includes('computing')) {
687
+ return getRandomResponse(aiResponses.quantum);
688
+ } else if (lowerMessage.includes('workout') || lowerMessage.includes('exercise') || lowerMessage.includes('fitness')) {
689
+ return getRandomResponse(aiResponses.workout);
690
+ } else if (lowerMessage.includes('brainstorm') || lowerMessage.includes('ideas')) {
691
+ return getRandomResponse(aiResponses.brainstorm);
692
+ } else if (lowerMessage.includes('fact') || lowerMessage.includes('fun')) {
693
+ return getRandomResponse(aiResponses.fact);
694
+ } else {
695
+ return getRandomResponse(aiResponses.default) + " " + generateContextualResponse(message);
696
+ }
697
+ }
698
+
699
+ function getRandomResponse(responses) {
700
+ return responses[Math.floor(Math.random() * responses.length)];
701
+ }
702
+
703
+ function generateContextualResponse(message) {
704
+ const words = message.split(' ');
705
+ const keyWords = words.filter(word => word.length > 4).slice(0, 2);
706
+ return `You mentioned ${keyWords.join(' and ') || 'this topic'}. This is definitely worth exploring further. Could you tell me more about what specifically interests you?`;
707
+ }
708
+
709
+ // Send message
710
+ function sendMessage() {
711
+ const input = document.getElementById('messageInput');
712
+ const message = input.value.trim();
713
+
714
+ if (message === '') return;
715
+
716
+ if (!chatStarted) {
717
+ document.getElementById('welcomeScreen').style.display = 'none';
718
+ chatStarted = true;
719
+ }
720
+
721
+ // Add user message
722
+ addMessage(message, 'user');
723
+ messageHistory.push({ role: 'user', content: message, time: new Date() });
724
+
725
+ // Clear input
726
+ input.value = '';
727
+ autoResize(input);
728
+
729
+ // Show typing indicator
730
+ showTypingIndicator();
731
+
732
+ // Simulate AI response
733
+ setTimeout(() => {
734
+ hideTypingIndicator();
735
+ const aiResponse = getAIResponse(message);
736
+ addMessage(aiResponse, 'ai');
737
+ messageHistory.push({ role: 'ai', content: aiResponse, time: new Date() });
738
+ }, 1000 + Math.random() * 1000);
739
+ }
740
+
741
+ // Add message to chat
742
+ function addMessage(text, sender) {
743
+ const container = document.getElementById('messagesContainer');
744
+ const messageDiv = document.createElement('div');
745
+ messageDiv.className = `message ${sender}`;
746
+
747
+ const time = new Date().toLocaleTimeString('en-US', {
748
+ hour: '2-digit',
749
+ minute: '2-digit'
750
+ });
751
+
752
+ messageDiv.innerHTML = `
753
+ <div class="message-avatar">
754
+ <i class="fas fa-${sender === 'user' ? 'user' : 'robot'}"></i>
755
+ </div>
756
+ <div class="message-content">
757
+ <div class="message-bubble">${text.replace(/\n/g, '<br>')}</div>
758
+ <div class="message-time">${time}</div>
759
+ </div>
760
+ `;
761
+
762
+ container.appendChild(messageDiv);
763
+ scrollToBottom();
764
+ }
765
+
766
+ // Show/hide typing indicator
767
+ function showTypingIndicator() {
768
+ document.getElementById('typingIndicator').classList.add('active');
769
+ scrollToBottom();
770
+ }
771
+
772
+ function hideTypingIndicator() {
773
+ document.getElementById('typingIndicator').classList.remove('active');
774
+ }
775
+
776
+ // Scroll to bottom
777
+ function scrollToBottom() {
778
+ const container = document.getElementById('messagesContainer');
779
+ setTimeout(() => {
780
+ container.scrollTop = container.scrollHeight;
781
+ }, 100);
782
+ }
783
+
784
+ // Handle key press
785
+ function handleKeyPress(event) {
786
+ if (event.key === 'Enter' && !event.shiftKey) {
787
+ event.preventDefault();
788
+ sendMessage();
789
+ }
790
+ }
791
+
792
+ // Auto resize textarea
793
+ function autoResize(textarea) {
794
+ textarea.style.height = 'auto';
795
+ textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
796
+ }
797
+
798
+ // Send suggestion
799
+ function sendSuggestion(text) {
800
+ document.getElementById('messageInput').value = text;
801
+ sendMessage();
802
+ }
803
+
804
+ // Theme toggle
805
+ function toggleTheme() {
806
+ document.body.classList.toggle('light-theme');
807
+ const icon = document.getElementById('themeIcon');
808
+ icon.className = document.body.classList.contains('light-theme') ? 'fas fa-sun' : 'fas fa-moon';
809
+ }
810
+
811
+ // Clear chat
812
+ function clearChat() {
813
+ if (confirm('Are you sure you want to clear the chat history?')) {
814
+ document.getElementById('messagesContainer').innerHTML = `
815
+ <div class="welcome-screen" id="welcomeScreen">
816
+ <i class="fas fa-comments welcome-icon"></i>
817
+ <h1 class="welcome-title">Welcome to AI Chat</h1>
818
+ <p class="welcome-subtitle">Start a conversation with your AI assistant. I'm here to help with any questions or tasks you have!</p>
819
+ <div class="suggestions">
820
+ <div class="suggestion-chip" onclick="sendSuggestion('Help me write a professional email')">
821
+ ✉️ Write an email
822
+ </div>
823
+ <div class="suggestion-chip" onclick="sendSuggestion('Explain quantum computing simply')">
824
+ 🧠 Explain concept
825
+ </div>
826
+ <div class="suggestion-chip" onclick="sendSuggestion('Give me coding tips for JavaScript')">
827
+ 💻 Coding help
828
+ </div>
829
+ <div class="suggestion-chip" onclick="sendSuggestion('Create a workout plan')">
830
+ 🏃 Fitness plan
831
+ </div>
832
+ <div class="suggestion-chip" onclick="sendSuggestion('Help me brainstorm ideas')">
833
+ 💡 Brainstorm
834
+ </div>
835
+ <div class="suggestion-chip" onclick="sendSuggestion('Tell me a fun fact')">
836
+ 🎉 Fun fact
837
+ </div>
838
+ </div>
839
+ </div>
840
+ `;
841
+ chatStarted = false;
842
+ messageHistory = [];
843
+ }
844
+ }
845
+
846
+ // Download chat
847
+ function downloadChat() {
848
+ if (messageHistory.length === 0) {
849
+ alert('No chat history to download');
850
+ return;
851
+ }
852
+
853
+ let content = 'AI Chat History\n';
854
+ content += '================\n\n';
855
+
856
+ messageHistory.forEach(msg => {
857
+ content += `${msg.role.toUpperCase()} (${msg.time.toLocaleString()}):\n`;
858
+ content += `${msg.content}\n\n`;
859
+ });
860
+
861
+ const blob = new Blob([content], { type: 'text/plain' });
862
+ const url = window.URL.createObjectURL(blob);
863
+ const a = document.createElement('a');
864
+ a.href = url;
865
+ a.download = `chat-history-${Date.now()}.txt`;
866
+ a.click();
867
+ window.URL.revokeObjectURL(url);
868
+ }
869
+
870
+ // Start new chat
871
+ function startNewChat() {
872
+ if (messageHistory.length > 0 && confirm('Start a new chat? Current conversation will be saved to history.')) {
873
+ // Add to history
874
+ const historyItem = document.createElement('div');
875
+ historyItem.className = 'chat-history-item';
876
+ historyItem.innerHTML = `
877
+ <i class="fas fa-message"></i>
878
+ <span>Chat ${document.querySelectorAll('.chat-history-item').length}</span>
879
+ `;
880
+ document.getElementById('chatHistory').appendChild(historyItem);
881
+
882
+ clearChat();
883
+ }
884
+
885
+ // Close sidebar on mobile
886
+ if (window.innerWidth <= 768) {
887
+ toggleSidebar();
888
+ }
889
+ }
890
+
891
+ // Toggle sidebar
892
+ function toggleSidebar() {
893
+ document.getElementById('sidebar').classList.toggle('active');
894
+ }
895
+
896
+ // Attach file (placeholder)
897
+ function attachFile() {
898
+ alert('File attachment feature coming soon!');
899
+ }
900
+
901
+ // Voice input (placeholder)
902
+ function voiceInput() {
903
+ alert('Voice input feature coming soon!');
904
+ }
905
+
906
+ // Close sidebar when clicking outside on mobile
907
+ document.addEventListener('click', function(event) {
908
+ const sidebar = document.getElementById('sidebar');
909
+ const toggle = document.querySelector('.mobile-menu-toggle');
910
+
911
+ if (window.innerWidth <= 768 &&
912
+ sidebar.classList.contains('active') &&
913
+ !sidebar.contains(event.target) &&
914
+ !toggle.contains(event.target)) {
915
+ sidebar.classList.remove('active');
916
+ }
917
+ });
918
+
919
+ // Initialize
920
+ document.addEventListener('DOMContentLoaded', function() {
921
+ // Focus input
922
+ document.getElementById('messageInput').focus();
923
+ });
924
+ </script>
925
+ </body>
926
+ </html>