Hugging Face's logo

Spaces:
kamcio1989
/
anycoder-aaca22b0
Running

App Files Community
kamcio1989 commited on
Commit
75690f4
·
verified ·
1 Parent(s): 30cd6a0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1018 -19
index.html CHANGED
@@ -1,19 +1,1018 @@
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 Hub - Platform Apps & AI Tools</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
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary: #6366f1;
18
+ --primary-dark: #4f46e5;
19
+ --secondary: #10b981;
20
+ --dark: #1f2937;
21
+ --light: #f9fafb;
22
+ --gray: #6b7280;
23
+ --card-bg: #ffffff;
24
+ --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
25
+ }
26
+
27
+ body {
28
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
29
+ color: var(--dark);
30
+ line-height: 1.6;
31
+ }
32
+
33
+ .container {
34
+ max-width: 1200px;
35
+ margin: 0 auto;
36
+ padding: 0 20px;
37
+ }
38
+
39
+ /* Header Styles */
40
+ header {
41
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
42
+ color: white;
43
+ padding: 1rem 0;
44
+ position: sticky;
45
+ top: 0;
46
+ z-index: 100;
47
+ box-shadow: var(--shadow);
48
+ }
49
+
50
+ .header-content {
51
+ display: flex;
52
+ justify-content: space-between;
53
+ align-items: center;
54
+ }
55
+
56
+ .logo {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 10px;
60
+ font-size: 1.5rem;
61
+ font-weight: 700;
62
+ }
63
+
64
+ .logo i {
65
+ font-size: 1.8rem;
66
+ }
67
+
68
+ .built-with {
69
+ font-size: 0.8rem;
70
+ opacity: 0.9;
71
+ }
72
+
73
+ .built-with a {
74
+ color: white;
75
+ text-decoration: none;
76
+ transition: all 0.3s ease;
77
+ }
78
+
79
+ .built-with a:hover {
80
+ text-decoration: underline;
81
+ }
82
+
83
+ nav ul {
84
+ display: flex;
85
+ list-style: none;
86
+ gap: 2rem;
87
+ }
88
+
89
+ nav a {
90
+ color: white;
91
+ text-decoration: none;
92
+ font-weight: 500;
93
+ transition: all 0.3s ease;
94
+ padding: 0.5rem 0;
95
+ position: relative;
96
+ }
97
+
98
+ nav a:hover {
99
+ opacity: 0.8;
100
+ }
101
+
102
+ nav a::after {
103
+ content: '';
104
+ position: absolute;
105
+ bottom: 0;
106
+ left: 0;
107
+ width: 0;
108
+ height: 2px;
109
+ background: white;
110
+ transition: width 0.3s ease;
111
+ }
112
+
113
+ nav a:hover::after {
114
+ width: 100%;
115
+ }
116
+
117
+ .search-bar {
118
+ display: flex;
119
+ background: rgba(255, 255, 255, 0.15);
120
+ border-radius: 50px;
121
+ padding: 0.5rem 1rem;
122
+ align-items: center;
123
+ gap: 10px;
124
+ transition: all 0.3s ease;
125
+ }
126
+
127
+ .search-bar:focus-within {
128
+ background: rgba(255, 255, 255, 0.25);
129
+ }
130
+
131
+ .search-bar input {
132
+ background: transparent;
133
+ border: none;
134
+ outline: none;
135
+ color: white;
136
+ width: 200px;
137
+ }
138
+
139
+ .search-bar input::placeholder {
140
+ color: rgba(255, 255, 255, 0.7);
141
+ }
142
+
143
+ .mobile-menu {
144
+ display: none;
145
+ font-size: 1.5rem;
146
+ cursor: pointer;
147
+ }
148
+
149
+ /* Hero Section */
150
+ .hero {
151
+ padding: 5rem 0;
152
+ text-align: center;
153
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
154
+ color: white;
155
+ border-radius: 0 0 30px 30px;
156
+ margin-bottom: 3rem;
157
+ }
158
+
159
+ .hero h1 {
160
+ font-size: 3.5rem;
161
+ margin-bottom: 1rem;
162
+ font-weight: 800;
163
+ }
164
+
165
+ .hero p {
166
+ font-size: 1.2rem;
167
+ max-width: 700px;
168
+ margin: 0 auto 2rem;
169
+ opacity: 0.9;
170
+ }
171
+
172
+ .cta-buttons {
173
+ display: flex;
174
+ justify-content: center;
175
+ gap: 1rem;
176
+ margin-top: 2rem;
177
+ }
178
+
179
+ .btn {
180
+ padding: 0.8rem 1.8rem;
181
+ border-radius: 50px;
182
+ font-weight: 600;
183
+ cursor: pointer;
184
+ transition: all 0.3s ease;
185
+ border: none;
186
+ font-size: 1rem;
187
+ }
188
+
189
+ .btn-primary {
190
+ background: white;
191
+ color: var(--primary);
192
+ }
193
+
194
+ .btn-primary:hover {
195
+ transform: translateY(-3px);
196
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
197
+ }
198
+
199
+ .btn-secondary {
200
+ background: transparent;
201
+ color: white;
202
+ border: 2px solid white;
203
+ }
204
+
205
+ .btn-secondary:hover {
206
+ background: white;
207
+ color: var(--primary);
208
+ }
209
+
210
+ /* Section Styles */
211
+ section {
212
+ padding: 4rem 0;
213
+ }
214
+
215
+ .section-header {
216
+ text-align: center;
217
+ margin-bottom: 3rem;
218
+ }
219
+
220
+ .section-header h2 {
221
+ font-size: 2.5rem;
222
+ margin-bottom: 1rem;
223
+ color: var(--dark);
224
+ }
225
+
226
+ .section-header p {
227
+ color: var(--gray);
228
+ max-width: 600px;
229
+ margin: 0 auto;
230
+ }
231
+
232
+ /* Category Filter */
233
+ .category-filter {
234
+ display: flex;
235
+ justify-content: center;
236
+ gap: 1rem;
237
+ margin-bottom: 2rem;
238
+ flex-wrap: wrap;
239
+ }
240
+
241
+ .category-btn {
242
+ padding: 0.6rem 1.5rem;
243
+ border-radius: 50px;
244
+ background: var(--light);
245
+ border: 1px solid #e5e7eb;
246
+ cursor: pointer;
247
+ transition: all 0.3s ease;
248
+ font-weight: 500;
249
+ }
250
+
251
+ .category-btn.active, .category-btn:hover {
252
+ background: var(--primary);
253
+ color: white;
254
+ }
255
+
256
+ /* Cards Grid */
257
+ .cards-grid {
258
+ display: grid;
259
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
260
+ gap: 2rem;
261
+ }
262
+
263
+ .card {
264
+ background: var(--card-bg);
265
+ border-radius: 15px;
266
+ overflow: hidden;
267
+ box-shadow: var(--shadow);
268
+ transition: all 0.3s ease;
269
+ display: flex;
270
+ flex-direction: column;
271
+ }
272
+
273
+ .card:hover {
274
+ transform: translateY(-10px);
275
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
276
+ }
277
+
278
+ .card-image {
279
+ height: 180px;
280
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ color: white;
285
+ font-size: 2.5rem;
286
+ }
287
+
288
+ .card-content {
289
+ padding: 1.5rem;
290
+ flex-grow: 1;
291
+ display: flex;
292
+ flex-direction: column;
293
+ }
294
+
295
+ .card h3 {
296
+ font-size: 1.3rem;
297
+ margin-bottom: 0.5rem;
298
+ }
299
+
300
+ .card p {
301
+ color: var(--gray);
302
+ margin-bottom: 1rem;
303
+ flex-grow: 1;
304
+ }
305
+
306
+ .card-tags {
307
+ display: flex;
308
+ gap: 0.5rem;
309
+ margin-bottom: 1rem;
310
+ flex-wrap: wrap;
311
+ }
312
+
313
+ .tag {
314
+ background: var(--light);
315
+ padding: 0.3rem 0.8rem;
316
+ border-radius: 50px;
317
+ font-size: 0.8rem;
318
+ color: var(--gray);
319
+ }
320
+
321
+ .card-footer {
322
+ display: flex;
323
+ justify-content: space-between;
324
+ align-items: center;
325
+ margin-top: auto;
326
+ }
327
+
328
+ .card-btn {
329
+ padding: 0.5rem 1rem;
330
+ background: var(--primary);
331
+ color: white;
332
+ border: none;
333
+ border-radius: 5px;
334
+ cursor: pointer;
335
+ transition: all 0.3s ease;
336
+ font-weight: 500;
337
+ }
338
+
339
+ .card-btn:hover {
340
+ background: var(--primary-dark);
341
+ }
342
+
343
+ .rating {
344
+ display: flex;
345
+ align-items: center;
346
+ gap: 5px;
347
+ color: #f59e0b;
348
+ }
349
+
350
+ /* Features Section */
351
+ .features {
352
+ background: var(--light);
353
+ border-radius: 30px;
354
+ }
355
+
356
+ .features-grid {
357
+ display: grid;
358
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
359
+ gap: 2rem;
360
+ }
361
+
362
+ .feature {
363
+ text-align: center;
364
+ padding: 2rem 1rem;
365
+ }
366
+
367
+ .feature-icon {
368
+ width: 80px;
369
+ height: 80px;
370
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
371
+ border-radius: 50%;
372
+ display: flex;
373
+ align-items: center;
374
+ justify-content: center;
375
+ margin: 0 auto 1.5rem;
376
+ color: white;
377
+ font-size: 2rem;
378
+ }
379
+
380
+ .feature h3 {
381
+ margin-bottom: 1rem;
382
+ }
383
+
384
+ .feature p {
385
+ color: var(--gray);
386
+ }
387
+
388
+ /* Newsletter */
389
+ .newsletter {
390
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
391
+ color: white;
392
+ padding: 4rem 0;
393
+ text-align: center;
394
+ border-radius: 30px;
395
+ }
396
+
397
+ .newsletter h2 {
398
+ margin-bottom: 1rem;
399
+ }
400
+
401
+ .newsletter p {
402
+ max-width: 600px;
403
+ margin: 0 auto 2rem;
404
+ opacity: 0.9;
405
+ }
406
+
407
+ .newsletter-form {
408
+ display: flex;
409
+ max-width: 500px;
410
+ margin: 0 auto;
411
+ gap: 1rem;
412
+ }
413
+
414
+ .newsletter-form input {
415
+ flex-grow: 1;
416
+ padding: 0.8rem 1.5rem;
417
+ border-radius: 50px;
418
+ border: none;
419
+ outline: none;
420
+ }
421
+
422
+ /* Footer */
423
+ footer {
424
+ background: var(--dark);
425
+ color: white;
426
+ padding: 4rem 0 2rem;
427
+ }
428
+
429
+ .footer-content {
430
+ display: grid;
431
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
432
+ gap: 3rem;
433
+ margin-bottom: 3rem;
434
+ }
435
+
436
+ .footer-column h3 {
437
+ margin-bottom: 1.5rem;
438
+ font-size: 1.2rem;
439
+ }
440
+
441
+ .footer-column ul {
442
+ list-style: none;
443
+ }
444
+
445
+ .footer-column ul li {
446
+ margin-bottom: 0.8rem;
447
+ }
448
+
449
+ .footer-column a {
450
+ color: #d1d5db;
451
+ text-decoration: none;
452
+ transition: all 0.3s ease;
453
+ }
454
+
455
+ .footer-column a:hover {
456
+ color: white;
457
+ }
458
+
459
+ .social-links {
460
+ display: flex;
461
+ gap: 1rem;
462
+ margin-top: 1rem;
463
+ }
464
+
465
+ .social-links a {
466
+ display: flex;
467
+ align-items: center;
468
+ justify-content: center;
469
+ width: 40px;
470
+ height: 40px;
471
+ background: rgba(255, 255, 255, 0.1);
472
+ border-radius: 50%;
473
+ transition: all 0.3s ease;
474
+ }
475
+
476
+ .social-links a:hover {
477
+ background: var(--primary);
478
+ transform: translateY(-3px);
479
+ }
480
+
481
+ .footer-bottom {
482
+ text-align: center;
483
+ padding-top: 2rem;
484
+ border-top: 1px solid #374151;
485
+ color: #9ca3af;
486
+ }
487
+
488
+ /* Responsive Design */
489
+ @media (max-width: 992px) {
490
+ .hero h1 {
491
+ font-size: 2.8rem;
492
+ }
493
+
494
+ .cards-grid {
495
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
496
+ gap: 1.5rem;
497
+ padding: 0 1rem;
498
+ justify-content: center;
499
+ align-items: center;
500
+ margin: 0 auto;
501
+ max-width: 90%;
502
+ display: grid;
503
+ place-items: center;
504
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
505
+ width: 100%;
506
+ box-sizing: border-box;
507
+ gap: 1.5rem;
508
+ }
509
+
510
+ .card {
511
+ width: 100%;
512
+ max-width: 350px;
513
+ margin: 0 auto;
514
+ }
515
+ }
516
+
517
+ @media (max-width: 768px) {
518
+ .header-content {
519
+ flex-wrap: wrap;
520
+ }
521
+
522
+ nav {
523
+ order: 3;
524
+ width: 100%;
525
+ margin-top: 1rem;
526
+ display: none;
527
+ }
528
+
529
+ nav.active {
530
+ display: block;
531
+ }
532
+
533
+ nav ul {
534
+ flex-direction: column;
535
+ gap: 1rem;
536
+ }
537
+
538
+ .mobile-menu {
539
+ display: block;
540
+ }
541
+
542
+ .search-bar {
543
+ order: 2;
544
+ width: 100%;
545
+ margin-top: 1rem;
546
+ }
547
+
548
+ .search-bar input {
549
+ width: 100%;
550
+ }
551
+
552
+ .hero h1 {
553
+ font-size: 2.2rem;
554
+ }
555
+
556
+ .hero p {
557
+ font-size: 1rem;
558
+ }
559
+
560
+ .cta-buttons {
561
+ flex-direction: column;
562
+ align-items: center;
563
+ }
564
+
565
+ .btn {
566
+ width: 200px;
567
+ }
568
+
569
+ .newsletter-form {
570
+ flex-direction: column;
571
+ }
572
+ }
573
+
574
+ @media (max-width: 576px) {
575
+ .hero {
576
+ padding: 3rem 0;
577
+ }
578
+
579
+ .hero h1 {
580
+ font-size: 1.8rem;
581
+ }
582
+
583
+ .section-header h2 {
584
+ font-size: 2rem;
585
+ }
586
+
587
+ .cards-grid {
588
+ grid-template-columns: 1fr;
589
+ }
590
+ }
591
+ </style>
592
+ </head>
593
+ <body>
594
+ <header>
595
+ <div class="container">
596
+ <div class="header-content">
597
+ <div class="logo">
598
+ <i class="fas fa-brain"></i>
599
+ <span>AI Hub</span>
600
+ <div class="built-with">
601
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
602
+ </div>
603
+ </div>
604
+
605
+ <nav id="nav-menu">
606
+ <ul>
607
+ <li><a href="#home">Home</a></li>
608
+ <li><a href="#platforms">Platforms</a></li>
609
+ <li><a href="#tools">AI Tools</a></li>
610
+ <li><a href="#features">Features</a></li>
611
+ <li><a href="#resources">Resources</a></li>
612
+ </ul>
613
+ </nav>
614
+
615
+ <div class="search-bar">
616
+ <i class="fas fa-search"></i>
617
+ <input type="text" placeholder="Search AI tools...">
618
+ </div>
619
+
620
+ <div class="mobile-menu" id="mobile-menu">
621
+ <i class="fas fa-bars"></i>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ </header>
626
+
627
+ <section class="hero" id="home">
628
+ <div class="container">
629
+ <h1>Discover the Future of AI</h1>
630
+ <p>Explore cutting-edge AI platforms and tools that are transforming industries and empowering creators worldwide.</p>
631
+ <div class="cta-buttons">
632
+ <button class="btn btn-primary">Get Started</button>
633
+ <button class="btn btn-secondary">Explore Tools</button>
634
+ </div>
635
+ </div>
636
+ </section>
637
+
638
+ <section id="platforms">
639
+ <div class="container">
640
+ <div class="section-header">
641
+ <h2>AI Platforms</h2>
642
+ <p>Comprehensive platforms offering a suite of AI capabilities for various applications</p>
643
+ </div>
644
+
645
+ <div class="category-filter">
646
+ <button class="category-btn active" data-category="all">All</button>
647
+ <button class="category-btn" data-category="nlp">NLP</button>
648
+ <button class="category-btn" data-category="vision">Computer Vision</button>
649
+ <button class="category-btn" data-category="generative">Generative AI</button>
650
+ <button class="category-btn" data-category="ml">Machine Learning</button>
651
+ </div>
652
+
653
+ <div class="cards-grid">
654
+ <div class="card" data-category="nlp">
655
+ <div class="card-image">
656
+ <i class="fas fa-comment-dots"></i>
657
+ </div>
658
+ <div class="card-content">
659
+ <h3>OpenAI Platform</h3>
660
+ <p>Advanced language models for text generation, translation, and conversation.</p>
661
+ <div class="card-tags">
662
+ <span class="tag">NLP</span>
663
+ <span class="tag">Text Generation</span>
664
+ </div>
665
+ <div class="card-footer">
666
+ <button class="card-btn">Explore</button>
667
+ <div class="rating">
668
+ <i class="fas fa-star"></i>
669
+ <span>4.8</span>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="card" data-category="vision">
676
+ <div class="card-image">
677
+ <i class="fas fa-eye"></i>
678
+ </div>
679
+ <div class="card-content">
680
+ <h3>Clarifai</h3>
681
+ <p>Computer vision platform for image and video recognition and analysis.</p>
682
+ <div class="card-tags">
683
+ <span class="tag">Computer Vision</span>
684
+ <span class="tag">Image Analysis</span>
685
+ </div>
686
+ <div class="card-footer">
687
+ <button class="card-btn">Explore</button>
688
+ <div class="rating">
689
+ <i class="fas fa-star"></i>
690
+ <span>4.5</span>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+
696
+ <div class="card" data-category="generative">
697
+ <div class="card-image">
698
+ <i class="fas fa-paint-brush"></i>
699
+ </div>
700
+ <div class="card-content">
701
+ <h3>Runway ML</h3>
702
+ <p>Creative toolkit for artists and creators using generative AI models.</p>
703
+ <div class="card-tags">
704
+ <span class="tag">Generative AI</span>
705
+ <span class="tag">Creative Tools</span>
706
+ </div>
707
+ <div class="card-footer">
708
+ <button class="card-btn">Explore</button>
709
+ <div class="rating">
710
+ <i class="fas fa-star"></i>
711
+ <span>4.7</span>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+ <div class="card" data-category="ml">
718
+ <div class="card-image">
719
+ <i class="fas fa-chart-line"></i>
720
+ </div>
721
+ <div class="card-content">
722
+ <h3>Hugging Face</h3>
723
+ <p>Platform for building, training and deploying machine learning models.</p>
724
+ <div class="card-tags">
725
+ <span class="tag">Machine Learning</span>
726
+ <span class="tag">Model Hub</span>
727
+ </div>
728
+ <div class="card-footer">
729
+ <button class="card-btn">Explore</button>
730
+ <div class="rating">
731
+ <i class="fas fa-star"></i>
732
+ <span>4.9</span>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ </section>
740
+
741
+ <section id="tools">
742
+ <div class="container">
743
+ <div class="section-header">
744
+ <h2>AI Tools</h2>
745
+ <p>Specialized tools for specific AI tasks and workflows</p>
746
+ </div>
747
+
748
+ <div class="cards-grid">
749
+ <div class="card" data-category="nlp">
750
+ <div class="card-image">
751
+ <i class="fas fa-language"></i>
752
+ </div>
753
+ <div class="card-content">
754
+ <h3>Grammarly AI</h3>
755
+ <p>AI-powered writing assistant that helps improve grammar, tone, and clarity.</p>
756
+ <div class="card-tags">
757
+ <span class="tag">NLP</span>
758
+ <span class="tag">Writing</span>
759
+ </div>
760
+ <div class="card-footer">
761
+ <button class="card-btn">Try Now</button>
762
+ <div class="rating">
763
+ <i class="fas fa-star"></i>
764
+ <span>4.6</span>
765
+ </div>
766
+ </div>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="card" data-category="vision">
771
+ <div class="card-image">
772
+ <i class="fas fa-camera"></i>
773
+ </div>
774
+ <div class="card-content">
775
+ <h3>Lobe</h3>
776
+ <p>Train custom machine learning models with a simple, visual interface.</p>
777
+ <div class="card-tags">
778
+ <span class="tag">Computer Vision</span>
779
+ <span class="tag">Training</span>
780
+ </div>
781
+ <div class="card-footer">
782
+ <button class="card-btn">Try Now</button>
783
+ <div class="rating">
784
+ <i class="fas fa-star"></i>
785
+ <span>4.3</span>
786
+ </div>
787
+ </div>
788
+ </div>
789
+ </div>
790
+
791
+ <div class="card" data-category="generative">
792
+ <div class="card-image">
793
+ <i class="fas fa-music"></i>
794
+ </div>
795
+ <div class="card-content">
796
+ <h3>Amper Music</h3>
797
+ <p>Create original music using AI for videos, podcasts, and other projects.</p>
798
+ <div class="card-tags">
799
+ <span class="tag">Generative AI</span>
800
+ <span class="tag">Music</span>
801
+ </div>
802
+ <div class="card-footer">
803
+ <button class="card-btn">Try Now</button>
804
+ <div class="rating">
805
+ <i class="fas fa-star"></i>
806
+ <span>4.4</span>
807
+ </div>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </div>
812
+ </div>
813
+ </section>
814
+
815
+ <section class="features" id="features">
816
+ <div class="container">
817
+ <div class="section-header">
818
+ <h2>Why Choose AI Hub</h2>
819
+ <p>Our platform offers unique advantages for exploring and utilizing AI technologies</p>
820
+ </div>
821
+
822
+ <div class="features-grid">
823
+ <div class="feature">
824
+ <div class="feature-icon">
825
+ <i class="fas fa-rocket"></i>
826
+ </div>
827
+ <h3>Cutting-Edge Tools</h3>
828
+ <p>Access the latest AI technologies and stay ahead of the curve.</p>
829
+ </div>
830
+
831
+ <div class="feature">
832
+ <div class="feature-icon">
833
+ <i class="fas fa-shield-alt"></i>
834
+ </div>
835
+ <h3>Secure & Private</h3>
836
+ <p>Your data and models are protected with enterprise-grade security.</p>
837
+ </div>
838
+
839
+ <div class="feature">
840
+ <div class="feature-icon">
841
+ <i class="fas fa-users"></i>
842
+ </div>
843
+ <h3>Community Driven</h3>
844
+ <p>Join a vibrant community of AI enthusiasts, developers, and researchers.</p>
845
+ </div>
846
+
847
+ <div class="feature">
848
+ <div class="feature-icon">
849
+ <i class="fas fa-graduation-cap"></i>
850
+ </div>
851
+ <h3>Learning Resources</h3>
852
+ <p>Comprehensive tutorials, documentation, and courses to master AI.</p>
853
+ </div>
854
+ </div>
855
+ </div>
856
+ </section>
857
+
858
+ <section class="newsletter">
859
+ <div class="container">
860
+ <h2>Stay Updated with AI Trends</h2>
861
+ <p>Subscribe to our newsletter and receive the latest news, tool updates, and industry insights directly to your inbox.</p>
862
+ <div class="newsletter-form">
863
+ <input type="email" placeholder="Enter your email">
864
+ <button class="btn btn-primary">Subscribe</button>
865
+ </div>
866
+ </div>
867
+ </section>
868
+
869
+ <footer id="resources">
870
+ <div class="container">
871
+ <div class="footer-content">
872
+ <div class="footer-column">
873
+ <h3>AI Hub</h3>
874
+ <p>The central platform for discovering and utilizing AI technologies and tools.</p>
875
+ <div class="social-links">
876
+ <a href="#"><i class="fab fa-twitter"></i></a>
877
+ <a href="#"><i class="fab fa-linkedin"></i></a>
878
+ <a href="#"><i class="fab fa-github"></i></a>
879
+ <a href="#"><i class="fab fa-discord"></i></a>
880
+ </div>
881
+ </div>
882
+
883
+ <div class="footer-column">
884
+ <h3>Platforms</h3>
885
+ <ul>
886
+ <li><a href="#">OpenAI</a></li>
887
+ <li><a href="#">Hugging Face</a></li>
888
+ <li><a href="#">Clarifai</a></li>
889
+ <li><a href="#">Runway ML</a></li>
890
+ </ul>
891
+ </div>
892
+
893
+ <div class="footer-column">
894
+ <h3>Tools</h3>
895
+ <ul>
896
+ <li><a href="#">Grammarly AI</a></li>
897
+ <li><a href="#">Lobe</a></li>
898
+ <li><a href="#">Amper Music</a></li>
899
+ <li><a href="#">More Tools</a></li>
900
+ </ul>
901
+ </div>
902
+
903
+ <div class="footer-column">
904
+ <h3>Resources</h3>
905
+ <ul>
906
+ <li><a href="#">Documentation</a></li>
907
+ <li><a href="#">Tutorials</a></li>
908
+ <li><a href="#">Blog</a></li>
909
+ <li><a href="#">Community</a></li>
910
+ </ul>
911
+ </div>
912
+ </div>
913
+
914
+ <div class="footer-bottom">
915
+ <p>&copy; 2023 AI Hub. All rights reserved. <span class="built-with"><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></span></p>
916
+ </div>
917
+ </div>
918
+ </footer>
919
+
920
+ <script>
921
+ // Mobile menu toggle
922
+ document.getElementById('mobile-menu').addEventListener('click', function() {
923
+ const navMenu = document.getElementById('nav-menu');
924
+ navMenu.classList.toggle('active');
925
+ });
926
+
927
+ // Category filter functionality
928
+ document.querySelectorAll('.category-btn').forEach(button => {
929
+ button.addEventListener('click', function() {
930
+ // Remove active class from all buttons
931
+ document.querySelectorAll('.category-btn').forEach(btn => {
932
+ btn.classList.remove('active');
933
+ });
934
+
935
+ // Add active class to clicked button
936
+ this.classList.add('active');
937
+
938
+ const category = this.getAttribute('data-category');
939
+ const cards = document.querySelectorAll('.card');
940
+
941
+ cards.forEach(card => {
942
+ if (category === 'all' || card.getAttribute('data-category') === category) {
943
+ card.style.display = 'flex';
944
+ } else {
945
+ card.style.display = 'none';
946
+ }
947
+ });
948
+ });
949
+
950
+ // Smooth scrolling for anchor links
951
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
952
+ anchor.addEventListener('click', function(e) {
953
+ e.preventDefault();
954
+
955
+ const targetId = this.getAttribute('href');
956
+ const targetElement = document.querySelector(targetId);
957
+
958
+ if (targetElement) {
959
+ window.scrollTo({
960
+ top: targetElement.offsetTop - 80,
961
+ behavior: 'smooth'
962
+ });
963
+ }
964
+ });
965
+ });
966
+
967
+ // Add animation to cards on scroll
968
+ const observerOptions = {
969
+ threshold: 0.1,
970
+ rootMargin: '0px 0px -50px 0px'
971
+ };
972
+
973
+ const observer = new IntersectionObserver((entries) => {
974
+ entries.forEach(entry => {
975
+ if (entry.isIntersecting) {
976
+ entry.target.style.opacity = '1';
977
+ entry.target.style.transform = 'translateY(0)';
978
+ }
979
+ });
980
+ }, observerOptions);
981
+
982
+ // Apply initial styles and observe cards
983
+ document.querySelectorAll('.card').forEach(card => {
984
+ card.style.opacity = '0';
985
+ card.style.transform = 'translateY(20px)';
986
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
987
+ observer.observe(card);
988
+ });
989
+
990
+ // Newsletter form submission
991
+ document.querySelector('.newsletter-form').addEventListener('submit', function(e) {
992
+ e.preventDefault();
993
+ const email = this.querySelector('input').value;
994
+ if (email) {
995
+ alert(`Thank you for subscribing with ${email}! You'll receive our latest updates soon.`);
996
+ this.querySelector('input').value = '';
997
+ }
998
+ });
999
+
1000
+ // Search functionality
1001
+ document.querySelector('.search-bar input').addEventListener('input', function(e) {
1002
+ const searchTerm = e.target.value.toLowerCase();
1003
+ const cards = document.querySelectorAll('.card');
1004
+
1005
+ cards.forEach(card => {
1006
+ const title = card.querySelector('h3').textContent.toLowerCase();
1007
+ const description = card.querySelector('p').textContent.toLowerCase();
1008
+
1009
+ if (title.includes(searchTerm) || description.includes(searchTerm)) {
1010
+ card.style.display = 'flex';
1011
+ } else {
1012
+ card.style.display = 'none';
1013
+ }
1014
+ });
1015
+ });
1016
+ </script>
1017
+ </body>
1018
+ </html>