Hugging Face's logo

Spaces:
Heartsync
/
humangen
Running

App Files Community
seawolf2357 commited on
Commit
fc016fe
·
verified ·
1 Parent(s): b90155f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1120 -19
index.html CHANGED
@@ -1,19 +1,1120 @@
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>HumanGen.AI - AI Creative Playground</title>
7
+ <meta name="description" content="HumanGen.AI - Your Ultimate AI Creative Playground. Generate images, videos, audio and more with cutting-edge AI models.">
8
+
9
+ <!-- Google Fonts -->
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">
13
+
14
+ <style>
15
+ /* ===== CSS Variables - Comic Classic Theme ===== */
16
+ :root {
17
+ --primary: #3B82F6;
18
+ --secondary: #EF4444;
19
+ --accent: #FACC15;
20
+ --dark: #1F2937;
21
+ --background: #FEF9C3;
22
+ --white: #FFFFFF;
23
+ --success: #10B981;
24
+ --purple: #8B5CF6;
25
+ --pink: #EC4899;
26
+ --cyan: #06B6D4;
27
+ --orange: #F97316;
28
+
29
+ --shadow: 6px 6px 0px var(--dark);
30
+ --shadow-sm: 4px 4px 0px var(--dark);
31
+ --shadow-lg: 8px 8px 0px var(--dark);
32
+ --border: 3px solid var(--dark);
33
+ --radius: 12px;
34
+ }
35
+
36
+ /* ===== Reset & Base ===== */
37
+ * {
38
+ margin: 0;
39
+ padding: 0;
40
+ box-sizing: border-box;
41
+ }
42
+
43
+ body {
44
+ font-family: 'Comic Neue', cursive, sans-serif;
45
+ background-color: var(--background);
46
+ background-image: radial-gradient(var(--dark) 1px, transparent 1px);
47
+ background-size: 20px 20px;
48
+ min-height: 100vh;
49
+ color: var(--dark);
50
+ overflow-x: hidden;
51
+ }
52
+
53
+ /* ===== Header ===== */
54
+ .header {
55
+ text-align: center;
56
+ padding: 3rem 1rem 2rem;
57
+ position: relative;
58
+ }
59
+
60
+ .logo {
61
+ font-family: 'Bangers', cursive;
62
+ font-size: 4rem;
63
+ color: var(--dark);
64
+ text-shadow:
65
+ 5px 5px 0px var(--accent),
66
+ 8px 8px 0px var(--dark);
67
+ letter-spacing: 4px;
68
+ -webkit-text-stroke: 2px var(--dark);
69
+ margin-bottom: 0.5rem;
70
+ animation: bounce 2s ease-in-out infinite;
71
+ }
72
+
73
+ @keyframes bounce {
74
+ 0%, 100% { transform: translateY(0); }
75
+ 50% { transform: translateY(-10px); }
76
+ }
77
+
78
+ .tagline {
79
+ font-size: 1.4rem;
80
+ font-weight: 700;
81
+ color: var(--dark);
82
+ margin-bottom: 1rem;
83
+ }
84
+
85
+ .subtitle {
86
+ font-size: 1.1rem;
87
+ color: #6B7280;
88
+ max-width: 600px;
89
+ margin: 0 auto;
90
+ line-height: 1.6;
91
+ }
92
+
93
+ /* ===== Stats Bar ===== */
94
+ .stats-bar {
95
+ display: flex;
96
+ justify-content: center;
97
+ gap: 2rem;
98
+ padding: 1.5rem;
99
+ margin: 2rem auto;
100
+ max-width: 800px;
101
+ background: var(--white);
102
+ border: var(--border);
103
+ border-radius: var(--radius);
104
+ box-shadow: var(--shadow);
105
+ flex-wrap: wrap;
106
+ }
107
+
108
+ .stat-item {
109
+ text-align: center;
110
+ }
111
+
112
+ .stat-number {
113
+ font-family: 'Bangers', cursive;
114
+ font-size: 2rem;
115
+ color: var(--primary);
116
+ letter-spacing: 1px;
117
+ }
118
+
119
+ .stat-label {
120
+ font-size: 0.9rem;
121
+ font-weight: 700;
122
+ color: var(--dark);
123
+ }
124
+
125
+ /* ===== Navigation Tabs ===== */
126
+ .nav-tabs {
127
+ display: flex;
128
+ justify-content: center;
129
+ gap: 0.5rem;
130
+ padding: 1rem;
131
+ flex-wrap: wrap;
132
+ max-width: 1200px;
133
+ margin: 0 auto;
134
+ }
135
+
136
+ .nav-tab {
137
+ font-family: 'Comic Neue', cursive;
138
+ font-weight: 700;
139
+ font-size: 1rem;
140
+ padding: 0.75rem 1.5rem;
141
+ border: var(--border);
142
+ border-radius: 8px;
143
+ background: var(--white);
144
+ color: var(--dark);
145
+ cursor: pointer;
146
+ box-shadow: var(--shadow-sm);
147
+ transition: all 0.15s ease;
148
+ }
149
+
150
+ .nav-tab:hover {
151
+ transform: translate(-2px, -2px);
152
+ box-shadow: 6px 6px 0px var(--dark);
153
+ }
154
+
155
+ .nav-tab.active {
156
+ background: var(--primary);
157
+ color: var(--white);
158
+ }
159
+
160
+ .nav-tab:active {
161
+ transform: translate(2px, 2px);
162
+ box-shadow: 2px 2px 0px var(--dark);
163
+ }
164
+
165
+ /* ===== Main Container ===== */
166
+ .container {
167
+ max-width: 1400px;
168
+ margin: 0 auto;
169
+ padding: 2rem 1rem;
170
+ }
171
+
172
+ /* ===== Category Section ===== */
173
+ .category-section {
174
+ margin-bottom: 3rem;
175
+ }
176
+
177
+ .category-header {
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 1rem;
181
+ margin-bottom: 1.5rem;
182
+ padding-bottom: 0.5rem;
183
+ border-bottom: 3px dashed var(--dark);
184
+ }
185
+
186
+ .category-icon {
187
+ font-size: 2rem;
188
+ }
189
+
190
+ .category-title {
191
+ font-family: 'Bangers', cursive;
192
+ font-size: 2rem;
193
+ letter-spacing: 2px;
194
+ color: var(--dark);
195
+ }
196
+
197
+ .category-count {
198
+ font-family: 'Comic Neue', cursive;
199
+ font-weight: 700;
200
+ font-size: 0.9rem;
201
+ background: var(--accent);
202
+ padding: 0.25rem 0.75rem;
203
+ border: 2px solid var(--dark);
204
+ border-radius: 20px;
205
+ }
206
+
207
+ /* ===== Card Grid ===== */
208
+ .card-grid {
209
+ display: grid;
210
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
211
+ gap: 1.5rem;
212
+ }
213
+
214
+ /* ===== Card Styles ===== */
215
+ .card {
216
+ background: var(--white);
217
+ border: var(--border);
218
+ border-radius: var(--radius);
219
+ box-shadow: var(--shadow);
220
+ overflow: hidden;
221
+ transition: all 0.2s ease;
222
+ cursor: pointer;
223
+ text-decoration: none;
224
+ color: inherit;
225
+ display: block;
226
+ }
227
+
228
+ .card:hover {
229
+ transform: translate(-4px, -4px);
230
+ box-shadow: 10px 10px 0px var(--dark);
231
+ }
232
+
233
+ .card:active {
234
+ transform: translate(2px, 2px);
235
+ box-shadow: 4px 4px 0px var(--dark);
236
+ }
237
+
238
+ .card-preview {
239
+ height: 180px;
240
+ display: flex;
241
+ align-items: center;
242
+ justify-content: center;
243
+ font-size: 4rem;
244
+ position: relative;
245
+ overflow: hidden;
246
+ }
247
+
248
+ .card-preview.gradient-1 {
249
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
250
+ }
251
+ .card-preview.gradient-2 {
252
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
253
+ }
254
+ .card-preview.gradient-3 {
255
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
256
+ }
257
+ .card-preview.gradient-4 {
258
+ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
259
+ }
260
+ .card-preview.gradient-5 {
261
+ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
262
+ }
263
+ .card-preview.gradient-6 {
264
+ background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
265
+ }
266
+ .card-preview.gradient-7 {
267
+ background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
268
+ }
269
+ .card-preview.gradient-8 {
270
+ background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
271
+ }
272
+
273
+ .card-badge {
274
+ position: absolute;
275
+ top: 12px;
276
+ right: 12px;
277
+ font-family: 'Bangers', cursive;
278
+ font-size: 0.85rem;
279
+ padding: 0.35rem 0.75rem;
280
+ border: 2px solid var(--dark);
281
+ border-radius: 6px;
282
+ box-shadow: 2px 2px 0px var(--dark);
283
+ }
284
+
285
+ .badge-new {
286
+ background: var(--secondary);
287
+ color: var(--white);
288
+ }
289
+
290
+ .badge-hot {
291
+ background: var(--orange);
292
+ color: var(--white);
293
+ }
294
+
295
+ .badge-beta {
296
+ background: var(--purple);
297
+ color: var(--white);
298
+ }
299
+
300
+ .card-content {
301
+ padding: 1.25rem;
302
+ }
303
+
304
+ .card-title {
305
+ font-family: 'Bangers', cursive;
306
+ font-size: 1.4rem;
307
+ letter-spacing: 1px;
308
+ margin-bottom: 0.5rem;
309
+ color: var(--dark);
310
+ }
311
+
312
+ .card-description {
313
+ font-size: 0.95rem;
314
+ color: #6B7280;
315
+ line-height: 1.5;
316
+ margin-bottom: 1rem;
317
+ }
318
+
319
+ .card-meta {
320
+ display: flex;
321
+ justify-content: space-between;
322
+ align-items: center;
323
+ padding-top: 0.75rem;
324
+ border-top: 2px dashed #E5E7EB;
325
+ }
326
+
327
+ .card-tags {
328
+ display: flex;
329
+ gap: 0.5rem;
330
+ flex-wrap: wrap;
331
+ }
332
+
333
+ .tag {
334
+ font-size: 0.75rem;
335
+ font-weight: 700;
336
+ padding: 0.25rem 0.5rem;
337
+ background: var(--background);
338
+ border: 2px solid var(--dark);
339
+ border-radius: 4px;
340
+ }
341
+
342
+ .card-arrow {
343
+ font-size: 1.5rem;
344
+ transition: transform 0.2s ease;
345
+ }
346
+
347
+ .card:hover .card-arrow {
348
+ transform: translateX(5px);
349
+ }
350
+
351
+ /* ===== Coming Soon Card ===== */
352
+ .card.coming-soon {
353
+ opacity: 0.7;
354
+ cursor: not-allowed;
355
+ }
356
+
357
+ .card.coming-soon:hover {
358
+ transform: none;
359
+ box-shadow: var(--shadow);
360
+ }
361
+
362
+ .card.coming-soon .card-preview {
363
+ filter: grayscale(50%);
364
+ }
365
+
366
+ /* ===== Footer ===== */
367
+ .footer {
368
+ text-align: center;
369
+ padding: 3rem 1rem;
370
+ margin-top: 2rem;
371
+ border-top: 3px dashed var(--dark);
372
+ }
373
+
374
+ .footer-logo {
375
+ font-family: 'Bangers', cursive;
376
+ font-size: 2rem;
377
+ letter-spacing: 2px;
378
+ margin-bottom: 1rem;
379
+ }
380
+
381
+ .footer-links {
382
+ display: flex;
383
+ justify-content: center;
384
+ gap: 2rem;
385
+ margin-bottom: 1rem;
386
+ flex-wrap: wrap;
387
+ }
388
+
389
+ .footer-link {
390
+ font-weight: 700;
391
+ color: var(--dark);
392
+ text-decoration: none;
393
+ border-bottom: 2px solid transparent;
394
+ transition: border-color 0.2s;
395
+ }
396
+
397
+ .footer-link:hover {
398
+ border-bottom-color: var(--primary);
399
+ }
400
+
401
+ .footer-copy {
402
+ font-size: 0.9rem;
403
+ color: #6B7280;
404
+ }
405
+
406
+ /* ===== Floating Action Button ===== */
407
+ .fab {
408
+ position: fixed;
409
+ bottom: 2rem;
410
+ right: 2rem;
411
+ width: 60px;
412
+ height: 60px;
413
+ background: var(--primary);
414
+ border: var(--border);
415
+ border-radius: 50%;
416
+ box-shadow: var(--shadow);
417
+ display: flex;
418
+ align-items: center;
419
+ justify-content: center;
420
+ font-size: 1.5rem;
421
+ cursor: pointer;
422
+ transition: all 0.2s ease;
423
+ z-index: 1000;
424
+ }
425
+
426
+ .fab:hover {
427
+ transform: translate(-2px, -2px) scale(1.1);
428
+ box-shadow: 8px 8px 0px var(--dark);
429
+ }
430
+
431
+ /* ===== Responsive ===== */
432
+ @media (max-width: 768px) {
433
+ .logo {
434
+ font-size: 2.5rem;
435
+ text-shadow:
436
+ 3px 3px 0px var(--accent),
437
+ 5px 5px 0px var(--dark);
438
+ }
439
+
440
+ .tagline {
441
+ font-size: 1.1rem;
442
+ }
443
+
444
+ .stats-bar {
445
+ gap: 1rem;
446
+ padding: 1rem;
447
+ }
448
+
449
+ .stat-number {
450
+ font-size: 1.5rem;
451
+ }
452
+
453
+ .nav-tab {
454
+ padding: 0.5rem 1rem;
455
+ font-size: 0.9rem;
456
+ }
457
+
458
+ .category-title {
459
+ font-size: 1.5rem;
460
+ }
461
+
462
+ .card-grid {
463
+ grid-template-columns: 1fr;
464
+ }
465
+
466
+ .card-preview {
467
+ height: 150px;
468
+ font-size: 3rem;
469
+ }
470
+ }
471
+
472
+ /* ===== Animation ===== */
473
+ @keyframes fadeInUp {
474
+ from {
475
+ opacity: 0;
476
+ transform: translateY(20px);
477
+ }
478
+ to {
479
+ opacity: 1;
480
+ transform: translateY(0);
481
+ }
482
+ }
483
+
484
+ .card {
485
+ animation: fadeInUp 0.5s ease forwards;
486
+ }
487
+
488
+ .card:nth-child(1) { animation-delay: 0.1s; }
489
+ .card:nth-child(2) { animation-delay: 0.2s; }
490
+ .card:nth-child(3) { animation-delay: 0.3s; }
491
+ .card:nth-child(4) { animation-delay: 0.4s; }
492
+ .card:nth-child(5) { animation-delay: 0.5s; }
493
+ .card:nth-child(6) { animation-delay: 0.6s; }
494
+
495
+ /* ===== Search Bar ===== */
496
+ .search-container {
497
+ max-width: 600px;
498
+ margin: 0 auto 2rem;
499
+ position: relative;
500
+ }
501
+
502
+ .search-input {
503
+ width: 100%;
504
+ padding: 1rem 1.5rem 1rem 3rem;
505
+ font-family: 'Comic Neue', cursive;
506
+ font-size: 1.1rem;
507
+ font-weight: 700;
508
+ border: var(--border);
509
+ border-radius: var(--radius);
510
+ box-shadow: var(--shadow);
511
+ background: var(--white);
512
+ color: var(--dark);
513
+ outline: none;
514
+ transition: all 0.2s ease;
515
+ }
516
+
517
+ .search-input:focus {
518
+ box-shadow: 8px 8px 0px var(--primary);
519
+ border-color: var(--primary);
520
+ }
521
+
522
+ .search-input::placeholder {
523
+ color: #9CA3AF;
524
+ font-weight: 400;
525
+ }
526
+
527
+ .search-icon {
528
+ position: absolute;
529
+ left: 1rem;
530
+ top: 50%;
531
+ transform: translateY(-50%);
532
+ font-size: 1.2rem;
533
+ }
534
+ </style>
535
+ </head>
536
+ <body>
537
+ <!-- Header -->
538
+ <header class="header">
539
+ <h1 class="logo">💥 HUMANGEN.AI 💥</h1>
540
+ <p class="tagline">🎨 Your Ultimate AI Creative Playground 🚀</p>
541
+ <p class="subtitle">
542
+ Generate stunning images, videos, audio, and more with state-of-the-art AI models.
543
+ No coding required – just imagine and create!
544
+ </p>
545
+ </header>
546
+
547
+ <!-- Stats Bar -->
548
+ <div class="stats-bar">
549
+ <div class="stat-item">
550
+ <div class="stat-number">15+</div>
551
+ <div class="stat-label">AI Models</div>
552
+ </div>
553
+ <div class="stat-item">
554
+ <div class="stat-number">100K+</div>
555
+ <div class="stat-label">Creations</div>
556
+ </div>
557
+ <div class="stat-item">
558
+ <div class="stat-number">50K+</div>
559
+ <div class="stat-label">Users</div>
560
+ </div>
561
+ <div class="stat-item">
562
+ <div class="stat-number">99.9%</div>
563
+ <div class="stat-label">Uptime</div>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Search Bar -->
568
+ <div class="search-container">
569
+ <span class="search-icon">🔍</span>
570
+ <input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, music)" id="searchInput">
571
+ </div>
572
+
573
+ <!-- Navigation Tabs -->
574
+ <nav class="nav-tabs">
575
+ <button class="nav-tab active" data-category="all">🌟 All</button>
576
+ <button class="nav-tab" data-category="image">🖼️ Image</button>
577
+ <button class="nav-tab" data-category="video">🎬 Video</button>
578
+ <button class="nav-tab" data-category="audio">🎵 Audio</button>
579
+ <button class="nav-tab" data-category="text">📝 Text</button>
580
+ <button class="nav-tab" data-category="3d">🎮 3D</button>
581
+ <button class="nav-tab" data-category="tools">🛠️ Tools</button>
582
+ </nav>
583
+
584
+ <!-- Main Container -->
585
+ <main class="container">
586
+
587
+ <!-- Image Generation Section -->
588
+ <section class="category-section" data-section="image">
589
+ <div class="category-header">
590
+ <span class="category-icon">🖼️</span>
591
+ <h2 class="category-title">IMAGE GENERATION</h2>
592
+ <span class="category-count">4 models</span>
593
+ </div>
594
+ <div class="card-grid">
595
+
596
+ <!-- Z-Image Turbo Card -->
597
+ <a href="https://z.humangen.ai" target="_blank" class="card" data-tags="image,turbo,fast">
598
+ <div class="card-preview gradient-1">
599
+ <span>⚡</span>
600
+ <span class="card-badge badge-hot">🔥 HOT</span>
601
+ </div>
602
+ <div class="card-content">
603
+ <h3 class="card-title">⚡ Z-Image Turbo Plus</h3>
604
+ <p class="card-description">
605
+ Ultra-fast image generation with SOMA prompt enhancement.
606
+ Create stunning visuals in seconds with AI-powered prompt optimization.
607
+ </p>
608
+ <div class="card-meta">
609
+ <div class="card-tags">
610
+ <span class="tag">Fast</span>
611
+ <span class="tag">SOMA</span>
612
+ <span class="tag">HD</span>
613
+ </div>
614
+ <span class="card-arrow">→</span>
615
+ </div>
616
+ </div>
617
+ </a>
618
+
619
+ <!-- Flux Image Card -->
620
+ <a href="https://flux.humangen.ai" target="_blank" class="card coming-soon" data-tags="image,flux,quality">
621
+ <div class="card-preview gradient-2">
622
+ <span>✨</span>
623
+ <span class="card-badge badge-beta">SOON</span>
624
+ </div>
625
+ <div class="card-content">
626
+ <h3 class="card-title">✨ Flux Pro</h3>
627
+ <p class="card-description">
628
+ Next-generation image synthesis with exceptional quality and artistic control.
629
+ Perfect for professional creative work.
630
+ </p>
631
+ <div class="card-meta">
632
+ <div class="card-tags">
633
+ <span class="tag">Pro</span>
634
+ <span class="tag">4K</span>
635
+ </div>
636
+ <span class="card-arrow">→</span>
637
+ </div>
638
+ </div>
639
+ </a>
640
+
641
+ <!-- SDXL Card -->
642
+ <a href="https://sdxl.humangen.ai" target="_blank" class="card coming-soon" data-tags="image,sdxl,stable">
643
+ <div class="card-preview gradient-3">
644
+ <span>🎨</span>
645
+ <span class="card-badge badge-beta">SOON</span>
646
+ </div>
647
+ <div class="card-content">
648
+ <h3 class="card-title">🎨 SDXL Studio</h3>
649
+ <p class="card-description">
650
+ Stable Diffusion XL with custom LoRA support.
651
+ Endless creative possibilities with community models.
652
+ </p>
653
+ <div class="card-meta">
654
+ <div class="card-tags">
655
+ <span class="tag">LoRA</span>
656
+ <span class="tag">Custom</span>
657
+ </div>
658
+ <span class="card-arrow">→</span>
659
+ </div>
660
+ </div>
661
+ </a>
662
+
663
+ <!-- Image Editor Card -->
664
+ <a href="https://edit.humangen.ai" target="_blank" class="card coming-soon" data-tags="image,edit,inpaint">
665
+ <div class="card-preview gradient-4">
666
+ <span>🖌️</span>
667
+ <span class="card-badge badge-beta">SOON</span>
668
+ </div>
669
+ <div class="card-content">
670
+ <h3 class="card-title">🖌️ AI Image Editor</h3>
671
+ <p class="card-description">
672
+ Inpainting, outpainting, and smart editing tools.
673
+ Transform any image with AI-powered precision.
674
+ </p>
675
+ <div class="card-meta">
676
+ <div class="card-tags">
677
+ <span class="tag">Edit</span>
678
+ <span class="tag">Inpaint</span>
679
+ </div>
680
+ <span class="card-arrow">→</span>
681
+ </div>
682
+ </div>
683
+ </a>
684
+
685
+ </div>
686
+ </section>
687
+
688
+ <!-- Video Generation Section -->
689
+ <section class="category-section" data-section="video">
690
+ <div class="category-header">
691
+ <span class="category-icon">🎬</span>
692
+ <h2 class="category-title">VIDEO GENERATION</h2>
693
+ <span class="category-count">3 models</span>
694
+ </div>
695
+ <div class="card-grid">
696
+
697
+ <!-- Text to Video Card -->
698
+ <a href="https://video.humangen.ai" target="_blank" class="card coming-soon" data-tags="video,text2video">
699
+ <div class="card-preview gradient-5">
700
+ <span>🎥</span>
701
+ <span class="card-badge badge-new">NEW</span>
702
+ </div>
703
+ <div class="card-content">
704
+ <h3 class="card-title">🎥 Text to Video</h3>
705
+ <p class="card-description">
706
+ Generate stunning videos from text descriptions.
707
+ Create cinematic content with just a prompt.
708
+ </p>
709
+ <div class="card-meta">
710
+ <div class="card-tags">
711
+ <span class="tag">T2V</span>
712
+ <span class="tag">HD</span>
713
+ </div>
714
+ <span class="card-arrow">→</span>
715
+ </div>
716
+ </div>
717
+ </a>
718
+
719
+ <!-- Image to Video Card -->
720
+ <a href="https://i2v.humangen.ai" target="_blank" class="card coming-soon" data-tags="video,image2video">
721
+ <div class="card-preview gradient-6">
722
+ <span>🎞️</span>
723
+ <span class="card-badge badge-beta">SOON</span>
724
+ </div>
725
+ <div class="card-content">
726
+ <h3 class="card-title">🎞️ Image to Video</h3>
727
+ <p class="card-description">
728
+ Bring your images to life with AI animation.
729
+ Add motion and dynamics to any still image.
730
+ </p>
731
+ <div class="card-meta">
732
+ <div class="card-tags">
733
+ <span class="tag">I2V</span>
734
+ <span class="tag">Animate</span>
735
+ </div>
736
+ <span class="card-arrow">→</span>
737
+ </div>
738
+ </div>
739
+ </a>
740
+
741
+ <!-- Video Editor Card -->
742
+ <a href="https://vedit.humangen.ai" target="_blank" class="card coming-soon" data-tags="video,edit">
743
+ <div class="card-preview gradient-7">
744
+ <span>✂️</span>
745
+ <span class="card-badge badge-beta">SOON</span>
746
+ </div>
747
+ <div class="card-content">
748
+ <h3 class="card-title">✂️ AI Video Editor</h3>
749
+ <p class="card-description">
750
+ Smart video editing with AI assistance.
751
+ Cut, trim, enhance, and transform videos effortlessly.
752
+ </p>
753
+ <div class="card-meta">
754
+ <div class="card-tags">
755
+ <span class="tag">Edit</span>
756
+ <span class="tag">Enhance</span>
757
+ </div>
758
+ <span class="card-arrow">→</span>
759
+ </div>
760
+ </div>
761
+ </a>
762
+
763
+ </div>
764
+ </section>
765
+
766
+ <!-- Audio Generation Section -->
767
+ <section class="category-section" data-section="audio">
768
+ <div class="category-header">
769
+ <span class="category-icon">🎵</span>
770
+ <h2 class="category-title">AUDIO GENERATION</h2>
771
+ <span class="category-count">3 models</span>
772
+ </div>
773
+ <div class="card-grid">
774
+
775
+ <!-- Music Generator Card -->
776
+ <a href="https://music.humangen.ai" target="_blank" class="card coming-soon" data-tags="audio,music">
777
+ <div class="card-preview gradient-8">
778
+ <span>🎹</span>
779
+ <span class="card-badge badge-new">NEW</span>
780
+ </div>
781
+ <div class="card-content">
782
+ <h3 class="card-title">🎹 AI Music Studio</h3>
783
+ <p class="card-description">
784
+ Create original music tracks with AI.
785
+ From ambient to EDM, compose any genre.
786
+ </p>
787
+ <div class="card-meta">
788
+ <div class="card-tags">
789
+ <span class="tag">Music</span>
790
+ <span class="tag">Compose</span>
791
+ </div>
792
+ <span class="card-arrow">→</span>
793
+ </div>
794
+ </div>
795
+ </a>
796
+
797
+ <!-- Voice Clone Card -->
798
+ <a href="https://voice.humangen.ai" target="_blank" class="card coming-soon" data-tags="audio,voice,tts">
799
+ <div class="card-preview gradient-1">
800
+ <span>🎙️</span>
801
+ <span class="card-badge badge-beta">SOON</span>
802
+ </div>
803
+ <div class="card-content">
804
+ <h3 class="card-title">🎙️ Voice Studio</h3>
805
+ <p class="card-description">
806
+ Text-to-speech with natural voices.
807
+ Create voiceovers and narrations instantly.
808
+ </p>
809
+ <div class="card-meta">
810
+ <div class="card-tags">
811
+ <span class="tag">TTS</span>
812
+ <span class="tag">Voice</span>
813
+ </div>
814
+ <span class="card-arrow">→</span>
815
+ </div>
816
+ </div>
817
+ </a>
818
+
819
+ <!-- Sound Effects Card -->
820
+ <a href="https://sfx.humangen.ai" target="_blank" class="card coming-soon" data-tags="audio,sfx">
821
+ <div class="card-preview gradient-2">
822
+ <span>🔊</span>
823
+ <span class="card-badge badge-beta">SOON</span>
824
+ </div>
825
+ <div class="card-content">
826
+ <h3 class="card-title">🔊 Sound Effects</h3>
827
+ <p class="card-description">
828
+ Generate custom sound effects from text.
829
+ Perfect for games, videos, and podcasts.
830
+ </p>
831
+ <div class="card-meta">
832
+ <div class="card-tags">
833
+ <span class="tag">SFX</span>
834
+ <span class="tag">Custom</span>
835
+ </div>
836
+ <span class="card-arrow">→</span>
837
+ </div>
838
+ </div>
839
+ </a>
840
+
841
+ </div>
842
+ </section>
843
+
844
+ <!-- Text & Language Section -->
845
+ <section class="category-section" data-section="text">
846
+ <div class="category-header">
847
+ <span class="category-icon">📝</span>
848
+ <h2 class="category-title">TEXT & LANGUAGE</h2>
849
+ <span class="category-count">2 models</span>
850
+ </div>
851
+ <div class="card-grid">
852
+
853
+ <!-- Chat Assistant Card -->
854
+ <a href="https://chat.humangen.ai" target="_blank" class="card coming-soon" data-tags="text,chat,assistant">
855
+ <div class="card-preview gradient-3">
856
+ <span>💬</span>
857
+ <span class="card-badge badge-beta">SOON</span>
858
+ </div>
859
+ <div class="card-content">
860
+ <h3 class="card-title">💬 AI Chat Assistant</h3>
861
+ <p class="card-description">
862
+ Intelligent conversation with advanced LLM.
863
+ Get help with writing, coding, and more.
864
+ </p>
865
+ <div class="card-meta">
866
+ <div class="card-tags">
867
+ <span class="tag">Chat</span>
868
+ <span class="tag">LLM</span>
869
+ </div>
870
+ <span class="card-arrow">→</span>
871
+ </div>
872
+ </div>
873
+ </a>
874
+
875
+ <!-- Writing Assistant Card -->
876
+ <a href="https://write.humangen.ai" target="_blank" class="card coming-soon" data-tags="text,write">
877
+ <div class="card-preview gradient-4">
878
+ <span>✍️</span>
879
+ <span class="card-badge badge-beta">SOON</span>
880
+ </div>
881
+ <div class="card-content">
882
+ <h3 class="card-title">✍️ Writing Studio</h3>
883
+ <p class="card-description">
884
+ AI-powered writing assistant for all your content needs.
885
+ Blogs, stories, emails, and more.
886
+ </p>
887
+ <div class="card-meta">
888
+ <div class="card-tags">
889
+ <span class="tag">Write</span>
890
+ <span class="tag">Content</span>
891
+ </div>
892
+ <span class="card-arrow">→</span>
893
+ </div>
894
+ </div>
895
+ </a>
896
+
897
+ </div>
898
+ </section>
899
+
900
+ <!-- 3D & Modeling Section -->
901
+ <section class="category-section" data-section="3d">
902
+ <div class="category-header">
903
+ <span class="category-icon">🎮</span>
904
+ <h2 class="category-title">3D & MODELING</h2>
905
+ <span class="category-count">2 models</span>
906
+ </div>
907
+ <div class="card-grid">
908
+
909
+ <!-- 3D Model Generator Card -->
910
+ <a href="https://3d.humangen.ai" target="_blank" class="card coming-soon" data-tags="3d,model">
911
+ <div class="card-preview gradient-5">
912
+ <span>🧊</span>
913
+ <span class="card-badge badge-beta">SOON</span>
914
+ </div>
915
+ <div class="card-content">
916
+ <h3 class="card-title">🧊 3D Model Generator</h3>
917
+ <p class="card-description">
918
+ Generate 3D models from text or images.
919
+ Ready for games, AR/VR, and 3D printing.
920
+ </p>
921
+ <div class="card-meta">
922
+ <div class="card-tags">
923
+ <span class="tag">3D</span>
924
+ <span class="tag">GLB</span>
925
+ </div>
926
+ <span class="card-arrow">→</span>
927
+ </div>
928
+ </div>
929
+ </a>
930
+
931
+ <!-- Avatar Creator Card -->
932
+ <a href="https://avatar.humangen.ai" target="_blank" class="card coming-soon" data-tags="3d,avatar">
933
+ <div class="card-preview gradient-6">
934
+ <span>👤</span>
935
+ <span class="card-badge badge-beta">SOON</span>
936
+ </div>
937
+ <div class="card-content">
938
+ <h3 class="card-title">👤 Avatar Creator</h3>
939
+ <p class="card-description">
940
+ Create realistic 3D avatars from photos.
941
+ Perfect for metaverse and gaming.
942
+ </p>
943
+ <div class="card-meta">
944
+ <div class="card-tags">
945
+ <span class="tag">Avatar</span>
946
+ <span class="tag">VR</span>
947
+ </div>
948
+ <span class="card-arrow">→</span>
949
+ </div>
950
+ </div>
951
+ </a>
952
+
953
+ </div>
954
+ </section>
955
+
956
+ <!-- Tools Section -->
957
+ <section class="category-section" data-section="tools">
958
+ <div class="category-header">
959
+ <span class="category-icon">🛠️</span>
960
+ <h2 class="category-title">AI TOOLS</h2>
961
+ <span class="category-count">3 tools</span>
962
+ </div>
963
+ <div class="card-grid">
964
+
965
+ <!-- Background Remover Card -->
966
+ <a href="https://bg.humangen.ai" target="_blank" class="card coming-soon" data-tags="tools,background">
967
+ <div class="card-preview gradient-7">
968
+ <span>🪄</span>
969
+ <span class="card-badge badge-beta">SOON</span>
970
+ </div>
971
+ <div class="card-content">
972
+ <h3 class="card-title">🪄 Background Remover</h3>
973
+ <p class="card-description">
974
+ Remove backgrounds from any image instantly.
975
+ Clean, precise, and professional results.
976
+ </p>
977
+ <div class="card-meta">
978
+ <div class="card-tags">
979
+ <span class="tag">Remove</span>
980
+ <span class="tag">Fast</span>
981
+ </div>
982
+ <span class="card-arrow">→</span>
983
+ </div>
984
+ </div>
985
+ </a>
986
+
987
+ <!-- Upscaler Card -->
988
+ <a href="https://upscale.humangen.ai" target="_blank" class="card coming-soon" data-tags="tools,upscale">
989
+ <div class="card-preview gradient-8">
990
+ <span>🔍</span>
991
+ <span class="card-badge badge-beta">SOON</span>
992
+ </div>
993
+ <div class="card-content">
994
+ <h3 class="card-title">🔍 AI Upscaler</h3>
995
+ <p class="card-description">
996
+ Enhance and upscale images up to 4x.
997
+ Restore old photos with AI magic.
998
+ </p>
999
+ <div class="card-meta">
1000
+ <div class="card-tags">
1001
+ <span class="tag">4x</span>
1002
+ <span class="tag">Enhance</span>
1003
+ </div>
1004
+ <span class="card-arrow">→</span>
1005
+ </div>
1006
+ </div>
1007
+ </a>
1008
+
1009
+ <!-- Face Swap Card -->
1010
+ <a href="https://face.humangen.ai" target="_blank" class="card coming-soon" data-tags="tools,face">
1011
+ <div class="card-preview gradient-1">
1012
+ <span>🎭</span>
1013
+ <span class="card-badge badge-beta">SOON</span>
1014
+ </div>
1015
+ <div class="card-content">
1016
+ <h3 class="card-title">🎭 Face Swap</h3>
1017
+ <p class="card-description">
1018
+ Swap faces in photos and videos seamlessly.
1019
+ Fun and creative face transformations.
1020
+ </p>
1021
+ <div class="card-meta">
1022
+ <div class="card-tags">
1023
+ <span class="tag">Swap</span>
1024
+ <span class="tag">Fun</span>
1025
+ </div>
1026
+ <span class="card-arrow">→</span>
1027
+ </div>
1028
+ </div>
1029
+ </a>
1030
+
1031
+ </div>
1032
+ </section>
1033
+
1034
+ </main>
1035
+
1036
+ <!-- Footer -->
1037
+ <footer class="footer">
1038
+ <div class="footer-logo">💥 HUMANGEN.AI 💥</div>
1039
+ <div class="footer-links">
1040
+ <a href="#" class="footer-link">About</a>
1041
+ <a href="#" class="footer-link">Blog</a>
1042
+ <a href="#" class="footer-link">API</a>
1043
+ <a href="#" class="footer-link">Discord</a>
1044
+ <a href="#" class="footer-link">Twitter</a>
1045
+ <a href="#" class="footer-link">GitHub</a>
1046
+ </div>
1047
+ <p class="footer-copy">© 2025 HumanGen.AI - Powered by Hugging Face 🤗</p>
1048
+ </footer>
1049
+
1050
+ <!-- Floating Action Button -->
1051
+ <div class="fab" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
1052
+ ⬆️
1053
+ </div>
1054
+
1055
+ <!-- JavaScript -->
1056
+ <script>
1057
+ // Category Navigation
1058
+ const navTabs = document.querySelectorAll('.nav-tab');
1059
+ const sections = document.querySelectorAll('.category-section');
1060
+ const cards = document.querySelectorAll('.card');
1061
+
1062
+ navTabs.forEach(tab => {
1063
+ tab.addEventListener('click', () => {
1064
+ const category = tab.dataset.category;
1065
+
1066
+ // Update active tab
1067
+ navTabs.forEach(t => t.classList.remove('active'));
1068
+ tab.classList.add('active');
1069
+
1070
+ // Filter sections
1071
+ if (category === 'all') {
1072
+ sections.forEach(s => s.style.display = 'block');
1073
+ } else {
1074
+ sections.forEach(s => {
1075
+ if (s.dataset.section === category) {
1076
+ s.style.display = 'block';
1077
+ } else {
1078
+ s.style.display = 'none';
1079
+ }
1080
+ });
1081
+ }
1082
+ });
1083
+ });
1084
+
1085
+ // Search Functionality
1086
+ const searchInput = document.getElementById('searchInput');
1087
+
1088
+ searchInput.addEventListener('input', (e) => {
1089
+ const query = e.target.value.toLowerCase();
1090
+
1091
+ cards.forEach(card => {
1092
+ const title = card.querySelector('.card-title').textContent.toLowerCase();
1093
+ const description = card.querySelector('.card-description').textContent.toLowerCase();
1094
+ const tags = card.dataset.tags?.toLowerCase() || '';
1095
+
1096
+ if (title.includes(query) || description.includes(query) || tags.includes(query)) {
1097
+ card.style.display = 'block';
1098
+ } else {
1099
+ card.style.display = 'none';
1100
+ }
1101
+ });
1102
+
1103
+ // Show all sections when searching
1104
+ if (query) {
1105
+ sections.forEach(s => s.style.display = 'block');
1106
+ navTabs.forEach(t => t.classList.remove('active'));
1107
+ navTabs[0].classList.add('active');
1108
+ }
1109
+ });
1110
+
1111
+ // Prevent navigation for coming soon cards
1112
+ document.querySelectorAll('.card.coming-soon').forEach(card => {
1113
+ card.addEventListener('click', (e) => {
1114
+ e.preventDefault();
1115
+ alert('🚀 Coming Soon! This feature is under development.');
1116
+ });
1117
+ });
1118
+ </script>
1119
+ </body>
1120
+ </html>