Hugging Face's logo

Spaces:
xorgus
/
anycoder-69bf8212
Running

App Files Community
xorgus commited on
Commit
e194039
·
verified ·
1 Parent(s): 7060ecc

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +526 -19
index.html CHANGED
@@ -1,19 +1,526 @@
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>How to Use Me - Interactive Guide</title>
7
+ <!-- Importing FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ /* --- CSS VARIABLES & RESET --- */
12
+ :root {
13
+ --primary-color: #6366f1; /* Indigo */
14
+ --secondary-color: #a855f7; /* Purple */
15
+ --accent-color: #ec4899; /* Pink */
16
+ --bg-dark: #0f172a;
17
+ --bg-card: #1e293b;
18
+ --text-main: #f8fafc;
19
+ --text-muted: #94a3b8;
20
+ --border-color: #334155;
21
+ --glass-bg: rgba(30, 41, 59, 0.7);
22
+ --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
23
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
+ }
25
+
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ body {
33
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
34
+ background-color: var(--bg-dark);
35
+ color: var(--text-main);
36
+ line-height: 1.6;
37
+ overflow-x: hidden;
38
+ min-height: 100vh;
39
+ }
40
+
41
+ /* --- BACKGROUND ANIMATION --- */
42
+ .bg-gradient {
43
+ position: fixed;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ z-index: -1;
49
+ background: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15), transparent 25%),
50
+ radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.15), transparent 25%);
51
+ animation: pulseBg 10s infinite alternate;
52
+ }
53
+
54
+ @keyframes pulseBg {
55
+ 0% { transform: scale(1); opacity: 0.8; }
56
+ 100% { transform: scale(1.1); opacity: 1; }
57
+ }
58
+
59
+ /* --- HEADER & NAV --- */
60
+ header {
61
+ position: sticky;
62
+ top: 0;
63
+ z-index: 100;
64
+ background: rgba(15, 23, 42, 0.8);
65
+ backdrop-filter: blur(12px);
66
+ border-bottom: 1px solid var(--border-color);
67
+ padding: 1rem 2rem;
68
+ display: flex;
69
+ justify-content: space-between;
70
+ align-items: center;
71
+ }
72
+
73
+ .logo {
74
+ font-size: 1.5rem;
75
+ font-weight: 700;
76
+ background: linear-gradient(to right, var(--primary-color), var(--accent-color));
77
+ -webkit-background-clip: text;
78
+ -webkit-text-fill-color: transparent;
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 0.5rem;
82
+ }
83
+
84
+ .built-with {
85
+ font-size: 0.85rem;
86
+ color: var(--text-muted);
87
+ text-decoration: none;
88
+ padding: 0.4rem 1rem;
89
+ border-radius: 20px;
90
+ background: rgba(255, 255, 255, 0.05);
91
+ border: 1px solid rgba(255, 255, 255, 0.1);
92
+ transition: var(--transition);
93
+ }
94
+
95
+ .built-with:hover {
96
+ background: rgba(255, 255, 255, 0.1);
97
+ color: var(--text-main);
98
+ transform: translateY(-2px);
99
+ }
100
+
101
+ /* --- HERO SECTION --- */
102
+ .hero {
103
+ text-align: center;
104
+ padding: 4rem 1rem 2rem;
105
+ max-width: 800px;
106
+ margin: 0 auto;
107
+ }
108
+
109
+ .hero h1 {
110
+ font-size: 3rem;
111
+ margin-bottom: 1rem;
112
+ letter-spacing: -0.02em;
113
+ }
114
+
115
+ .hero p {
116
+ font-size: 1.25rem;
117
+ color: var(--text-muted);
118
+ margin-bottom: 2rem;
119
+ }
120
+
121
+ /* --- SEARCH BAR --- */
122
+ .search-container {
123
+ position: relative;
124
+ max-width: 600px;
125
+ margin: 0 auto;
126
+ }
127
+
128
+ .search-input {
129
+ width: 100%;
130
+ padding: 1rem 1.5rem 1rem 3rem;
131
+ border-radius: 50px;
132
+ border: 1px solid var(--border-color);
133
+ background: var(--bg-card);
134
+ color: var(--text-main);
135
+ font-size: 1rem;
136
+ outline: none;
137
+ box-shadow: var(--shadow);
138
+ transition: var(--transition);
139
+ }
140
+
141
+ .search-input:focus {
142
+ border-color: var(--primary-color);
143
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
144
+ }
145
+
146
+ .search-icon {
147
+ position: absolute;
148
+ left: 1.2rem;
149
+ top: 50%;
150
+ transform: translateY(-50%);
151
+ color: var(--text-muted);
152
+ }
153
+
154
+ /* --- GRID LAYOUT --- */
155
+ .container {
156
+ max-width: 1200px;
157
+ margin: 0 auto;
158
+ padding: 2rem;
159
+ }
160
+
161
+ .guide-grid {
162
+ display: grid;
163
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
164
+ gap: 2rem;
165
+ }
166
+
167
+ /* --- CARDS --- */
168
+ .card {
169
+ background: var(--bg-card);
170
+ border: 1px solid var(--border-color);
171
+ border-radius: 16px;
172
+ padding: 2rem;
173
+ position: relative;
174
+ overflow: hidden;
175
+ transition: var(--transition);
176
+ display: flex;
177
+ flex-direction: column;
178
+ }
179
+
180
+ .card:hover {
181
+ transform: translateY(-5px);
182
+ border-color: var(--primary-color);
183
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
184
+ }
185
+
186
+ .card::before {
187
+ content: '';
188
+ position: absolute;
189
+ top: 0;
190
+ left: 0;
191
+ width: 100%;
192
+ height: 4px;
193
+ background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
194
+ opacity: 0;
195
+ transition: var(--transition);
196
+ }
197
+
198
+ .card:hover::before {
199
+ opacity: 1;
200
+ }
201
+
202
+ .icon-box {
203
+ width: 50px;
204
+ height: 50px;
205
+ border-radius: 12px;
206
+ display: flex;
207
+ align-items: center;
208
+ justify-content: center;
209
+ font-size: 1.5rem;
210
+ margin-bottom: 1.5rem;
211
+ color: white;
212
+ }
213
+
214
+ .icon-box.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
215
+ .icon-box.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
216
+ .icon-box.green { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
217
+ .icon-box.pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
218
+
219
+ .card h3 {
220
+ font-size: 1.25rem;
221
+ margin-bottom: 0.75rem;
222
+ }
223
+
224
+ .card p {
225
+ color: var(--text-muted);
226
+ font-size: 0.95rem;
227
+ margin-bottom: 1.5rem;
228
+ flex-grow: 1;
229
+ }
230
+
231
+ .card-btn {
232
+ align-self: flex-start;
233
+ padding: 0.6rem 1.2rem;
234
+ background: transparent;
235
+ border: 1px solid var(--primary-color);
236
+ color: var(--primary-color);
237
+ border-radius: 8px;
238
+ cursor: pointer;
239
+ font-weight: 600;
240
+ font-size: 0.9rem;
241
+ transition: var(--transition);
242
+ }
243
+
244
+ .card-btn:hover {
245
+ background: var(--primary-color);
246
+ color: white;
247
+ }
248
+
249
+ /* --- FAQ SECTION --- */
250
+ .faq-section {
251
+ margin-top: 4rem;
252
+ }
253
+
254
+ .section-title {
255
+ text-align: center;
256
+ margin-bottom: 3rem;
257
+ }
258
+
259
+ .faq-grid {
260
+ display: grid;
261
+ grid-template-columns: 1fr 1fr;
262
+ gap: 1.5rem;
263
+ }
264
+
265
+ .faq-item {
266
+ background: rgba(255, 255, 255, 0.03);
267
+ border-radius: 12px;
268
+ padding: 1.5rem;
269
+ border: 1px solid transparent;
270
+ transition: var(--transition);
271
+ }
272
+
273
+ .faq-item:hover {
274
+ background: rgba(255, 255, 255, 0.05);
275
+ border-color: rgba(255, 255, 255, 0.1);
276
+ }
277
+
278
+ .faq-question {
279
+ font-weight: 600;
280
+ display: flex;
281
+ justify-content: space-between;
282
+ align-items: center;
283
+ cursor: pointer;
284
+ margin-bottom: 0.5rem;
285
+ }
286
+
287
+ .faq-answer {
288
+ color: var(--text-muted);
289
+ font-size: 0.9rem;
290
+ display: none; /* Hidden by default */
291
+ padding-top: 0.5rem;
292
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
293
+ }
294
+
295
+ .faq-item.active .faq-answer {
296
+ display: block;
297
+ animation: fadeIn 0.3s ease;
298
+ }
299
+
300
+ .faq-item.active .faq-question i {
301
+ transform: rotate(180deg);
302
+ }
303
+
304
+ @keyframes fadeIn {
305
+ from { opacity: 0; transform: translateY(-5px); }
306
+ to { opacity: 1; transform: translateY(0); }
307
+ }
308
+
309
+ /* --- FOOTER --- */
310
+ footer {
311
+ text-align: center;
312
+ padding: 3rem;
313
+ color: var(--text-muted);
314
+ font-size: 0.9rem;
315
+ border-top: 1px solid var(--border-color);
316
+ margin-top: 4rem;
317
+ }
318
+
319
+ /* --- RESPONSIVE --- */
320
+ @media (max-width: 768px) {
321
+ .hero h1 { font-size: 2rem; }
322
+ .faq-grid { grid-template-columns: 1fr; }
323
+ .search-container { width: 90%; }
324
+ }
325
+ </style>
326
+ </head>
327
+ <body>
328
+
329
+ <!-- Background Animation -->
330
+ <div class="bg-gradient"></div>
331
+
332
+ <!-- Navigation -->
333
+ <header>
334
+ <div class="logo">
335
+ <i class="fa-solid fa-robot"></i>
336
+ <span>AI Assistant</span>
337
+ </div>
338
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
339
+ Built with anycoder
340
+ </a>
341
+ </header>
342
+
343
+ <!-- Hero Section -->
344
+ <section class="hero">
345
+ <h1>How do I use you?</h1>
346
+ <p>I'm designed to help you write code, explain concepts, and brainstorm ideas. Explore the guide below to see how we can work together.</p>
347
+
348
+ <div class="search-container">
349
+ <i class="fa-solid fa-magnifying-glass search-icon"></i>
350
+ <input type="text" id="searchInput" class="search-input" placeholder="Type a topic (e.g., 'code', 'writing', 'math')...">
351
+ </div>
352
+ </section>
353
+
354
+ <!-- Main Content -->
355
+ <main class="container">
356
+
357
+ <!-- Guide Grid -->
358
+ <div class="guide-grid" id="guideGrid">
359
+
360
+ <!-- Card 1: Coding -->
361
+ <div class="card" data-category="code">
362
+ <div class="icon-box blue">
363
+ <i class="fa-solid fa-code"></i>
364
+ </div>
365
+ <h3>Writing Code</h3>
366
+ <p>Ask me to write, debug, or refactor code in any language. You can ask for specific snippets, full file structures, or explanations of complex algorithms.</p>
367
+ <button class="card-btn" onclick="copyPrompt('Write a Python script to scrape a website.')">Try Example</button>
368
+ </div>
369
+
370
+ <!-- Card 2: Creative Writing -->
371
+ <div class="card" data-category="writing">
372
+ <div class="icon-box pink">
373
+ <i class="fa-solid fa-pen-nib"></i>
374
+ </div>
375
+ <h3>Creative Writing</h3>
376
+ <p>Need a story, poem, email, or social media post? Provide a topic, tone, or length, and I will generate creative text tailored to your needs.</p>
377
+ <button class="card-btn" onclick="copyPrompt('Write a professional email to a client.')">Try Example</button>
378
+ </div>
379
+
380
+ <!-- Card 3: Analysis -->
381
+ <div class="card" data-category="analysis">
382
+ <div class="icon-box purple">
383
+ <i class="fa-solid fa-chart-pie"></i>
384
+ </div>
385
+ <h3>Analysis & Summaries</h3>
386
+ <p>Paste text or an article, and I can summarize it, extract key points, or analyze the sentiment. Great for research and quick information processing.</p>
387
+ <button class="card-btn" onclick="copyPrompt('Summarize this text for me: ...')">Try Example</button>
388
+ </div>
389
+
390
+ <!-- Card 4: Learning -->
391
+ <div class="card" data-category="learning">
392
+ <div class="icon-box green">
393
+ <i class="fa-solid fa-graduation-cap"></i>
394
+ </div>
395
+ <h3>Learning & Tutoring</h3>
396
+ <p>Stuck on a concept? Ask me to explain things simply or act as a tutor. I can break down complex topics into easy-to-understand steps.</p>
397
+ <button class="card-btn" onclick="copyPrompt('Explain quantum computing like I am 5.')">Try Example</button>
398
+ </div>
399
+
400
+ </div>
401
+
402
+ <!-- FAQ Section -->
403
+ <section class="faq-section">
404
+ <div class="section-title">
405
+ <h2>Frequently Asked Questions</h2>
406
+ </div>
407
+
408
+ <div class="faq-grid">
409
+ <div class="faq-item">
410
+ <div class="faq-question">
411
+ Can I use code generation?
412
+ <i class="fa-solid fa-chevron-down"></i>
413
+ </div>
414
+ <div class="faq-answer">
415
+ Yes, I can generate code in over 50 programming languages including Python, JavaScript, HTML, CSS, C++, and Java. I can also debug existing code.
416
+ </div>
417
+ </div>
418
+
419
+ <div class="faq-item">
420
+ <div class="faq-question">
421
+ Is my data private?
422
+ <i class="fa-solid fa-chevron-down"></i>
423
+ </div>
424
+ <div class="faq-answer">
425
+ While this is a demo application, generally you should not share sensitive personal data, passwords, or confidential business information with AI models.
426
+ </div>
427
+ </div>
428
+
429
+ <div class="faq-item">
430
+ <div class="faq-question">
431
+ How accurate is the information?
432
+ <i class="fa-solid fa-chevron-down"></i>
433
+ </div>
434
+ <div class="faq-answer">
435
+ I strive for accuracy, but I can occasionally make mistakes or "hallucinate" facts. Always verify critical information with trusted sources.
436
+ </div>
437
+ </div>
438
+
439
+ <div class="faq-item">
440
+ <div class="faq-question">
441
+ Can I change the tone of voice?
442
+ <i class="fa-solid fa-chevron-down"></i>
443
+ </div>
444
+ <div class="faq-answer">
445
+ Absolutely. You can ask me to respond formally, casually, in a specific character voice, or in a specific language.
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ </main>
452
+
453
+ <!-- Footer -->
454
+ <footer>
455
+ <p>&copy; 2023 AI Assistant Guide. Built with anycoder</p>
456
+ </footer>
457
+
458
+ <!-- JavaScript for Interactivity -->
459
+ <script>
460
+ // 1. Search Functionality
461
+ const searchInput = document.getElementById('searchInput');
462
+ const cards = document.querySelectorAll('.card');
463
+
464
+ searchInput.addEventListener('input', (e) => {
465
+ const searchTerm = e.target.value.toLowerCase();
466
+
467
+ cards.forEach(card => {
468
+ const title = card.querySelector('h3').textContent.toLowerCase();
469
+ const desc = card.querySelector('p').textContent.toLowerCase();
470
+ const category = card.getAttribute('data-category');
471
+
472
+ // Check if search term matches title, description, or category
473
+ if (title.includes(searchTerm) || desc.includes(searchTerm) || category.includes(searchTerm)) {
474
+ card.style.display = 'flex';
475
+ // Add a small animation effect when reappearing
476
+ card.style.opacity = '0';
477
+ setTimeout(() => card.style.opacity = '1', 50);
478
+ } else {
479
+ card.style.display = 'none';
480
+ }
481
+ });
482
+ });
483
+
484
+ // 2. FAQ Accordion
485
+ const faqItems = document.querySelectorAll('.faq-item');
486
+
487
+ faqItems.forEach(item => {
488
+ const question = item.querySelector('.faq-question');
489
+ question.addEventListener('click', () => {
490
+ // Close other items (optional - remove if you want multiple open)
491
+ faqItems.forEach(otherItem => {
492
+ if (otherItem !== item) {
493
+ otherItem.classList.remove('active');
494
+ }
495
+ });
496
+ // Toggle current item
497
+ item.classList.toggle('active');
498
+ });
499
+ });
500
+
501
+ // 3. Button Interaction (Copy Prompt)
502
+ function copyPrompt(text) {
503
+ // Create a temporary input to copy text
504
+ const tempInput = document.createElement('input');
505
+ tempInput.value = text;
506
+ document.body.appendChild(tempInput);
507
+ tempInput.select();
508
+ document.execCommand('copy');
509
+ document.body.removeChild(tempInput);
510
+
511
+ // Visual feedback
512
+ const btn = event.target;
513
+ const originalText = btn.innerText;
514
+ btn.innerText = "Copied!";
515
+ btn.style.background = "var(--primary-color)";
516
+ btn.style.color = "white";
517
+
518
+ setTimeout(() => {
519
+ btn.innerText = originalText;
520
+ btn.style.background = "transparent";
521
+ btn.style.color = "var(--primary-color)";
522
+ }, 2000);
523
+ }
524
+ </script>
525
+ </body>
526
+ </html>