Hugging Face's logo

Spaces:
aaravriyer193
/
anycoder-de1aac6b
Running

App Files Community
aaravriyer193 commited on
Commit
242cf91
·
verified ·
1 Parent(s): 69933bf

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +611 -19
index.html CHANGED
@@ -1,19 +1,611 @@
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>Nexus AI - Modern Chat Interface</title>
7
+ <!-- Importing Remix Icons for modern iconography -->
8
+ <script src="https://unpkg.com/@remixicon/remixicon@2.9.0/icons/remixicon.js"></script>
9
+ <!-- Google Fonts: Inter for clean UI -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+
12
+ <style>
13
+ /* --- CSS VARIABLES & RESET --- */
14
+ :root {
15
+ --bg-dark: #0f0f13;
16
+ --bg-panel: #1a1a24;
17
+ --bg-input: #252530;
18
+ --primary: #6c5ce7;
19
+ --primary-glow: #6c5ce7aa;
20
+ --accent: #00cec9;
21
+ --text-main: #ffffff;
22
+ --text-muted: #a0a0b0;
23
+ --border: rgba(255, 255, 255, 0.1);
24
+ --glass: rgba(255, 255, 255, 0.05);
25
+ --glass-border: rgba(255, 255, 255, 0.08);
26
+ --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
27
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ font-family: 'Inter', sans-serif;
35
+ }
36
+
37
+ body {
38
+ background-color: var(--bg-dark);
39
+ color: var(--text-main);
40
+ height: 100vh;
41
+ overflow: hidden;
42
+ display: flex;
43
+ /* Animated Background Gradient */
44
+ background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0f0f13 100%);
45
+ }
46
+
47
+ /* --- LAYOUT --- */
48
+ .app-container {
49
+ display: flex;
50
+ width: 100%;
51
+ height: 100%;
52
+ position: relative;
53
+ }
54
+
55
+ /* --- SIDEBAR --- */
56
+ .sidebar {
57
+ width: 280px;
58
+ background: var(--bg-panel);
59
+ border-right: 1px solid var(--border);
60
+ display: flex;
61
+ flex-direction: column;
62
+ padding: 20px;
63
+ transition: var(--transition);
64
+ z-index: 10;
65
+ }
66
+
67
+ .brand {
68
+ font-size: 1.2rem;
69
+ font-weight: 700;
70
+ color: var(--text-main);
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 10px;
74
+ margin-bottom: 30px;
75
+ letter-spacing: -0.5px;
76
+ }
77
+
78
+ .brand i {
79
+ color: var(--primary);
80
+ font-size: 1.5rem;
81
+ }
82
+
83
+ .new-chat-btn {
84
+ background: linear-gradient(135deg, var(--primary), #8e44ad);
85
+ color: white;
86
+ border: none;
87
+ padding: 12px;
88
+ border-radius: 8px;
89
+ font-weight: 600;
90
+ cursor: pointer;
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+ gap: 8px;
95
+ transition: var(--transition);
96
+ box-shadow: 0 4px 15px rgba(108, 118, 232, 0.4);
97
+ }
98
+
99
+ .new-chat-btn:hover {
100
+ transform: translateY(-2px);
101
+ box-shadow: 0 6px 20px rgba(108, 118, 232, 0.6);
102
+ }
103
+
104
+ .history-label {
105
+ color: var(--text-muted);
106
+ font-size: 0.85rem;
107
+ margin-top: 25px;
108
+ margin-bottom: 10px;
109
+ text-transform: uppercase;
110
+ letter-spacing: 1px;
111
+ }
112
+
113
+ .history-list {
114
+ flex-grow: 1;
115
+ overflow-y: auto;
116
+ }
117
+
118
+ .history-item {
119
+ padding: 10px;
120
+ border-radius: 6px;
121
+ color: var(--text-muted);
122
+ cursor: pointer;
123
+ transition: var(--transition);
124
+ display: flex;
125
+ align-items: center;
126
+ gap: 10px;
127
+ font-size: 0.9rem;
128
+ white-space: nowrap;
129
+ overflow: hidden;
130
+ text-overflow: ellipsis;
131
+ }
132
+
133
+ .history-item:hover {
134
+ background: var(--glass);
135
+ color: var(--text-main);
136
+ }
137
+
138
+ /* --- MAIN CHAT AREA --- */
139
+ .chat-area {
140
+ flex-grow: 1;
141
+ display: flex;
142
+ flex-direction: column;
143
+ position: relative;
144
+ background: transparent;
145
+ }
146
+
147
+ /* Header */
148
+ .chat-header {
149
+ padding: 20px;
150
+ display: flex;
151
+ justify-content: space-between;
152
+ align-items: center;
153
+ border-bottom: 1px solid var(--border);
154
+ background: rgba(15, 15, 19, 0.8);
155
+ backdrop-filter: blur(10px);
156
+ }
157
+
158
+ .chat-title {
159
+ font-weight: 600;
160
+ display: flex;
161
+ align-items: center;
162
+ gap: 8px;
163
+ }
164
+
165
+ .status-dot {
166
+ width: 8px;
167
+ height: 8px;
168
+ background: var(--accent);
169
+ border-radius: 50%;
170
+ box-shadow: 0 0 10px var(--accent);
171
+ animation: pulse 2s infinite;
172
+ }
173
+
174
+ /* Messages Container */
175
+ .messages-container {
176
+ flex-grow: 1;
177
+ padding: 20px 40px;
178
+ overflow-y: auto;
179
+ display: flex;
180
+ flex-direction: column;
181
+ gap: 20px;
182
+ scroll-behavior: smooth;
183
+ }
184
+
185
+ /* Message Bubbles */
186
+ .message {
187
+ display: flex;
188
+ gap: 15px;
189
+ max-width: 800px;
190
+ animation: slideIn 0.4s ease forwards;
191
+ opacity: 0;
192
+ transform: translateY(10px);
193
+ }
194
+
195
+ @keyframes slideIn {
196
+ to { opacity: 1; transform: translateY(0); }
197
+ }
198
+
199
+ @keyframes pulse {
200
+ 0% { opacity: 1; }
201
+ 50% { opacity: 0.5; }
202
+ 100% { opacity: 1; }
203
+ }
204
+
205
+ .message.user {
206
+ flex-direction: row-reverse;
207
+ }
208
+
209
+ .avatar {
210
+ width: 40px;
211
+ height: 40px;
212
+ border-radius: 12px;
213
+ display: flex;
214
+ align-items: center;
215
+ justify-content: center;
216
+ font-size: 1.2rem;
217
+ flex-shrink: 0;
218
+ }
219
+
220
+ .avatar.bot {
221
+ background: linear-gradient(135deg, #2d343f, #1a1a24);
222
+ border: 1px solid var(--border);
223
+ color: var(--primary);
224
+ }
225
+
226
+ .avatar.user {
227
+ background: var(--primary);
228
+ color: white;
229
+ box-shadow: 0 4px 10px rgba(108, 118, 232, 0.3);
230
+ }
231
+
232
+ .message-content {
233
+ background: var(--bg-panel);
234
+ padding: 15px 20px;
235
+ border-radius: 12px;
236
+ border: 1px solid var(--border);
237
+ line-height: 1.6;
238
+ font-size: 0.95rem;
239
+ position: relative;
240
+ max-width: 70%;
241
+ }
242
+
243
+ .message.user .message-content {
244
+ background: rgba(108, 118, 232, 0.1);
245
+ border: 1px solid rgba(108, 118, 232, 0.2);
246
+ color: #e0e0ff;
247
+ }
248
+
249
+ /* Input Area */
250
+ .input-area {
251
+ padding: 20px 40px;
252
+ background: rgba(15, 15, 19, 0.9);
253
+ backdrop-filter: blur(10px);
254
+ border-top: 1px solid var(--border);
255
+ display: flex;
256
+ align-items: center;
257
+ gap: 15px;
258
+ }
259
+
260
+ .input-wrapper {
261
+ flex-grow: 1;
262
+ position: relative;
263
+ background: var(--bg-input);
264
+ border-radius: 14px;
265
+ border: 1px solid var(--border);
266
+ transition: var(--transition);
267
+ display: flex;
268
+ align-items: center;
269
+ padding: 5px;
270
+ }
271
+
272
+ .input-wrapper:focus-within {
273
+ border-color: var(--primary);
274
+ box-shadow: 0 0 15px rgba(108, 118, 232, 0.15);
275
+ }
276
+
277
+ #chat-input {
278
+ width: 100%;
279
+ background: transparent;
280
+ border: none;
281
+ padding: 12px 15px;
282
+ color: var(--text-main);
283
+ font-size: 1rem;
284
+ outline: none;
285
+ }
286
+
287
+ .send-btn {
288
+ background: var(--primary);
289
+ color: white;
290
+ border: none;
291
+ width: 40px;
292
+ height: 40px;
293
+ border-radius: 10px;
294
+ cursor: pointer;
295
+ display: flex;
296
+ align-items: center;
297
+ justify-content: center;
298
+ transition: var(--transition);
299
+ }
300
+
301
+ .send-btn:hover {
302
+ background: #7d69f0;
303
+ transform: scale(1.05);
304
+ }
305
+
306
+ .send-btn:disabled {
307
+ background: var(--bg-input);
308
+ color: var(--text-muted);
309
+ cursor: not-allowed;
310
+ transform: none;
311
+ }
312
+
313
+ /* Typing Indicator */
314
+ .typing-indicator {
315
+ display: flex;
316
+ gap: 4px;
317
+ padding: 5px 0;
318
+ }
319
+ .dot {
320
+ width: 6px;
321
+ height: 6px;
322
+ background: var(--text-muted);
323
+ border-radius: 50%;
324
+ animation: typing 1.4s infinite ease-in-out both;
325
+ }
326
+ .dot:nth-child(1) { animation-delay: -0.32s; }
327
+ .dot:nth-child(2) { animation-delay: -0.16s; }
328
+
329
+ @keyframes typing {
330
+ 0%, 80%, 100% { transform: scale(0); }
331
+ 40% { transform: scale(1); }
332
+ }
333
+
334
+ /* --- RESPONSIVE --- */
335
+ .mobile-menu-btn {
336
+ display: none;
337
+ background: none;
338
+ border: none;
339
+ color: var(--text-main);
340
+ cursor: pointer;
341
+ font-size: 1.5rem;
342
+ }
343
+
344
+ @media (max-width: 768px) {
345
+ .sidebar {
346
+ position: absolute;
347
+ left: -280px;
348
+ height: 100%;
349
+ box-shadow: 10px 0 30px rgba(0,0,0,0.5);
350
+ }
351
+ .sidebar.active {
352
+ left: 0;
353
+ }
354
+ .mobile-menu-btn {
355
+ display: block;
356
+ }
357
+ .messages-container {
358
+ padding: 15px;
359
+ }
360
+ .input-area {
361
+ padding: 15px;
362
+ }
363
+ .message-content {
364
+ max-width: 85%;
365
+ }
366
+ }
367
+
368
+ /* --- ANYCODER LINK --- */
369
+ .anycoder-badge {
370
+ margin-top: auto;
371
+ border-top: 1px solid var(--border);
372
+ padding-top: 15px;
373
+ }
374
+ .anycoder-link {
375
+ display: flex;
376
+ align-items: center;
377
+ gap: 8px;
378
+ text-decoration: none;
379
+ color: var(--text-muted);
380
+ font-size: 0.85rem;
381
+ transition: var(--transition);
382
+ padding: 8px;
383
+ border-radius: 6px;
384
+ }
385
+ .anycoder-link:hover {
386
+ color: var(--primary);
387
+ background: var(--glass);
388
+ }
389
+
390
+ /* Scrollbar Styling */
391
+ ::-webkit-scrollbar {
392
+ width: 8px;
393
+ }
394
+ ::-webkit-scrollbar-track {
395
+ background: transparent;
396
+ }
397
+ ::-webkit-scrollbar-thumb {
398
+ background: var(--bg-input);
399
+ border-radius: 4px;
400
+ }
401
+ ::-webkit-scrollbar-thumb:hover {
402
+ background: var(--primary);
403
+ }
404
+ </style>
405
+ </head>
406
+ <body>
407
+
408
+ <div class="app-container">
409
+ <!-- Sidebar -->
410
+ <aside class="sidebar" id="sidebar">
411
+ <div class="brand">
412
+ <i class="ri-robot-2-fill"></i>
413
+ Nexus AI
414
+ </div>
415
+
416
+ <button class="new-chat-btn" onclick="resetChat()">
417
+ <i class="ri-add-line"></i> New Chat
418
+ </button>
419
+
420
+ <div class="history-label">Recent Conversations</div>
421
+ <div class="history-list">
422
+ <div class="history-item">
423
+ <i class="ri-message-3-line"></i>
424
+ <span>Project Alpha Ideas</span>
425
+ </div>
426
+ <div class="history-item">
427
+ <i class="ri-message-3-line"></i>
428
+ <span>Coding Help: React</span>
429
+ </div>
430
+ <div class="history-item">
431
+ <i class="ri-message-3-line"></i>
432
+ <span>Daily Standup Summary</span>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="anycoder-badge">
437
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
438
+ <i class="ri-code-s-slash-line"></i>
439
+ Built with anycoder
440
+ </a>
441
+ </div>
442
+ </aside>
443
+
444
+ <!-- Main Chat -->
445
+ <main class="chat-area">
446
+ <div class="chat-header">
447
+ <div style="display: flex; align-items: center; gap: 10px;">
448
+ <button class="mobile-menu-btn" onclick="toggleSidebar()">
449
+ <i class="ri-menu-line"></i>
450
+ </button>
451
+ <div class="chat-title">
452
+ <div class="status-dot"></div>
453
+ Nexus Core v2.0
454
+ </div>
455
+ </div>
456
+ <div style="color: var(--text-muted); font-size: 0.9rem;">
457
+ <i class="ri-settings-4-line"></i>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="messages-container" id="messages">
462
+ <!-- Welcome Message -->
463
+ <div class="message bot">
464
+ <div class="avatar bot">
465
+ <i class="ri-robot-2-fill"></i>
466
+ </div>
467
+ <div class="message-content">
468
+ Hello! I'm Nexus. I can help you with coding, creative writing, or general analysis. How can I assist you today?
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="input-area">
474
+ <div class="input-wrapper">
475
+ <input type="text" id="chat-input" placeholder="Type your message..." autocomplete="off">
476
+ </div>
477
+ <button class="send-btn" id="send-btn" onclick="sendMessage()">
478
+ <i class="ri-arrow-right-line"></i>
479
+ </button>
480
+ </div>
481
+ </main>
482
+ </div>
483
+
484
+ <script>
485
+ const messagesContainer = document.getElementById('messages');
486
+ const chatInput = document.getElementById('chat-input');
487
+ const sendBtn = document.getElementById('send-btn');
488
+ const sidebar = document.getElementById('sidebar');
489
+
490
+ // Toggle Sidebar on Mobile
491
+ function toggleSidebar() {
492
+ sidebar.classList.toggle('active');
493
+ }
494
+
495
+ // Reset Chat
496
+ function resetChat() {
497
+ messagesContainer.innerHTML = '';
498
+ // Add initial message again
499
+ addMessage("Hello! I'm Nexus. Ready to work.", 'bot');
500
+ if(window.innerWidth <= 768) sidebar.classList.remove('active');
501
+ }
502
+
503
+ // Add Message to UI
504
+ function addMessage(text, type) {
505
+ const msgDiv = document.createElement('div');
506
+ msgDiv.classList.add('message', type);
507
+
508
+ const avatarDiv = document.createElement('div');
509
+ avatarDiv.classList.add('avatar', type);
510
+
511
+ if(type === 'bot') {
512
+ avatarDiv.innerHTML = '<i class="ri-robot-2-fill"></i>';
513
+ } else {
514
+ avatarDiv.innerHTML = '<i class="ri-user-smile-line"></i>';
515
+ }
516
+
517
+ const contentDiv = document.createElement('div');
518
+ contentDiv.classList.add('message-content');
519
+ contentDiv.textContent = text;
520
+
521
+ msgDiv.appendChild(avatarDiv);
522
+ msgDiv.appendChild(contentDiv);
523
+
524
+ messagesContainer.appendChild(msgDiv);
525
+
526
+ // Auto scroll to bottom
527
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
528
+ }
529
+
530
+ // Show Typing Indicator
531
+ function showTypingIndicator() {
532
+ const id = 'typing-' + Date.now();
533
+ const msgDiv = document.createElement('div');
534
+ msgDiv.classList.add('message', 'bot');
535
+ msgDiv.id = id;
536
+
537
+ const avatarDiv = document.createElement('div');
538
+ avatarDiv.classList.add('avatar', 'bot');
539
+ avatarDiv.innerHTML = '<i class="ri-robot-2-fill"></i>';
540
+
541
+ const contentDiv = document.createElement('div');
542
+ contentDiv.classList.add('message-content');
543
+ contentDiv.style.padding = '10px 20px'; // smaller padding for dots
544
+
545
+ const dots = `
546
+ <div class="typing-indicator">
547
+ <div class="dot"></div>
548
+ <div class="dot"></div>
549
+ <div class="dot"></div>
550
+ </div>
551
+ `;
552
+ contentDiv.innerHTML = dots;
553
+
554
+ msgDiv.appendChild(avatarDiv);
555
+ msgDiv.appendChild(contentDiv);
556
+ messagesContainer.appendChild(msgDiv);
557
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
558
+ return id;
559
+ }
560
+
561
+ // Remove Typing Indicator
562
+ function removeTypingIndicator(id) {
563
+ const element = document.getElementById(id);
564
+ if(element) element.remove();
565
+ }
566
+
567
+ // Mock AI Response Logic
568
+ function getBotResponse(input) {
569
+ const lowerInput = input.toLowerCase();
570
+ if(lowerInput.includes('hello') || lowerInput.includes('hi')) return "Greetings! How are you doing today?";
571
+ if(lowerInput.includes('code') || lowerInput.includes('html')) return "I can certainly help with code. Here is a snippet:\n\nconst hello = 'world';\nconsole.log(hello);";
572
+ if(lowerInput.includes('anycoder')) return "Built with anycoder is a great tool! It helps generate code efficiently.";
573
+ if(lowerInput.includes('weather')) return "I don't have real-time access to weather data, but it looks sunny in the digital world!";
574
+ if(lowerInput.includes('thanks')) return "You're welcome! Feel free to ask anything else.";
575
+
576
+ return "That's interesting! Tell me more about that, or ask me to generate some code.";
577
+ }
578
+
579
+ // Handle Send
580
+ function sendMessage() {
581
+ const text = chatInput.value.trim();
582
+ if(!text) return;
583
+
584
+ // Add User Message
585
+ addMessage(text, 'user');
586
+ chatInput.value = '';
587
+
588
+ // Disable button temporarily
589
+ sendBtn.disabled = true;
590
+
591
+ // Simulate AI Delay
592
+ const typingId = showTypingIndicator();
593
+
594
+ setTimeout(() => {
595
+ removeTypingIndicator(typingId);
596
+ const response = getBotResponse(text);
597
+ addMessage(response, 'bot');
598
+ sendBtn.disabled = false;
599
+ }, 1500 + Math.random() * 1000); // Random delay between 1.5s and 2.5s
600
+ }
601
+
602
+ // Enter key to send
603
+ chatInput.addEventListener('keypress', (e) => {
604
+ if(e.key === 'Enter') {
605
+ sendMessage();
606
+ }
607
+ });
608
+
609
+ </script>
610
+ </body>
611
+ </html>