Hugging Face's logo

Spaces:
mayafree
/
ai
Running

App Files Community
mayafree commited on
Commit
a957e82
Β·
1 Parent(s): e1f94fc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +743 -478
index.html CHANGED
@@ -3,115 +3,159 @@
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
  <link rel="icon" type="image/png" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
10
  <link rel="apple-touch-icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
11
  <link rel="shortcut icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
12
  <!-- Open Graph (Facebook, Discord, Slack λ“±) -->
13
- <meta property="og:title" content="HumanGen.AI - AI Creative Playground">
14
  <meta property="og:description" content="Generate stunning images, videos, audio and more with state-of-the-art AI models. No coding required!">
15
  <meta property="og:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
16
- <meta property="og:url" content="https://humangen.ai">
17
  <meta property="og:type" content="website">
18
- <meta property="og:site_name" content="HumanGen.AI">
19
  <!-- Twitter Card -->
20
  <meta name="twitter:card" content="summary_large_image">
21
- <meta name="twitter:title" content="HumanGen.AI - AI Creative Playground">
22
  <meta name="twitter:description" content="Generate stunning images, videos, audio with cutting-edge AI. No coding required!">
23
  <meta name="twitter:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
24
- <meta name="twitter:site" content="@humangen_ai">
25
  <!-- μΆ”κ°€ SEO λ©”νƒ€νƒœκ·Έ -->
26
- <meta name="keywords" content="AI, image generation, video generation, audio generation, creative tools, humangen, artificial intelligence">
27
- <meta name="author" content="HumanGen.AI">
28
  <meta name="robots" content="index, follow">
29
- <link rel="canonical" href="https://humangen.ai">
30
  <!-- Google Fonts -->
31
  <link rel="preconnect" href="https://fonts.googleapis.com">
32
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
33
- <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">
34
  <style>
35
- /* ===== CSS Variables - Comic Classic Theme ===== */
 
 
 
 
36
  :root {
37
- --primary: #3B82F6;
38
- --secondary: #EF4444;
39
- --accent: #FACC15;
40
- --dark: #1F2937;
41
- --background: #FEF9C3;
42
- --white: #FFFFFF;
43
- --success: #10B981;
44
- --purple: #8B5CF6;
45
- --pink: #EC4899;
46
- --cyan: #06B6D4;
47
- --orange: #F97316;
48
- --shadow: 6px 6px 0px var(--dark);
49
- --shadow-sm: 4px 4px 0px var(--dark);
50
- --shadow-lg: 8px 8px 0px var(--dark);
51
- --border: 3px solid var(--dark);
52
- --radius: 12px;
 
53
  }
 
54
  /* ===== Reset & Base ===== */
55
  * {
56
  margin: 0;
57
  padding: 0;
58
  box-sizing: border-box;
59
  }
 
60
  body {
61
- font-family: 'Comic Neue', cursive, sans-serif;
62
- background-color: var(--background);
63
- background-image: radial-gradient(var(--dark) 1px, transparent 1px);
64
- background-size: 20px 20px;
65
  min-height: 100vh;
66
- color: var(--dark);
67
  overflow-x: hidden;
68
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  /* ===== Header ===== */
70
  .header {
71
  text-align: center;
72
  padding: 3rem 1rem 2rem;
73
  position: relative;
74
  }
 
75
  .logo {
76
- font-family: 'Bangers', cursive;
77
- font-size: 4rem;
78
- color: var(--dark);
 
79
  text-shadow:
80
- 5px 5px 0px var(--accent),
81
- 8px 8px 0px var(--dark);
 
 
82
  letter-spacing: 4px;
83
- -webkit-text-stroke: 2px var(--dark);
84
  margin-bottom: 1.5rem;
85
- animation: bounce 2s ease-in-out infinite;
86
  }
87
- @keyframes bounce {
88
- 0%, 100% { transform: translateY(0); }
89
- 50% { transform: translateY(-10px); }
 
 
 
 
 
 
 
 
 
 
 
 
90
  }
 
91
  /* ===== Banner Image ===== */
92
  .banner-container {
93
  max-width: 1200px;
94
  margin: 0 auto;
95
  padding: 0 1rem;
96
  }
 
97
  .banner-image {
98
  width: 100%;
99
  max-width: 1200px;
100
  height: auto;
101
- border: var(--border);
102
  border-radius: var(--radius);
103
- box-shadow: var(--shadow);
 
 
104
  display: block;
105
  }
 
106
  /* ===== Enterprise Banner ===== */
107
  .enterprise-banner {
108
  max-width: 1200px;
109
  margin: 1.5rem auto 0;
110
  padding: 1rem 2rem;
111
- background: linear-gradient(135deg, var(--primary) 0%, #1E40AF 50%, #7C3AED 100%);
112
- border: var(--border);
113
  border-radius: var(--radius);
114
- box-shadow: var(--shadow-sm);
 
 
115
  text-align: center;
116
  display: flex;
117
  align-items: center;
@@ -119,73 +163,92 @@
119
  gap: 0.75rem;
120
  flex-wrap: wrap;
121
  }
 
122
  .enterprise-banner-text {
123
- font-family: 'Bangers', cursive;
124
- font-size: 1.4rem;
125
- color: var(--white);
 
 
126
  letter-spacing: 1px;
127
- text-shadow: 2px 2px 0px var(--dark);
128
  }
 
129
  .enterprise-banner-link {
130
- font-family: 'Bangers', cursive;
131
- font-size: 1.5rem;
132
- color: var(--accent);
 
133
  text-decoration: none;
134
  padding: 0.25rem 0.75rem;
135
- background: var(--dark);
136
- border: 2px solid var(--accent);
137
- border-radius: 6px;
138
- transition: all 0.2s ease;
139
- text-shadow: none;
140
  }
 
141
  .enterprise-banner-link:hover {
142
- background: var(--accent);
143
- color: var(--dark);
 
 
144
  transform: scale(1.05);
145
  }
 
146
  .tagline {
147
  font-size: 1.4rem;
148
- font-weight: 700;
149
- color: var(--dark);
150
  margin-bottom: 1rem;
 
151
  }
 
152
  .subtitle {
153
  font-size: 1.1rem;
154
- color: #6B7280;
155
  max-width: 600px;
156
  margin: 0 auto;
157
  line-height: 1.6;
158
  }
 
159
  /* ===== Notice Box ===== */
160
  .notice-box {
161
  max-width: 700px;
162
  margin: 1.5rem auto 0;
163
  padding: 1rem 1.5rem;
164
- background: var(--white);
165
- border: var(--border);
166
  border-radius: var(--radius);
167
- box-shadow: var(--shadow-sm);
 
 
168
  }
 
169
  .notice-item {
170
  font-size: 0.95rem;
171
- color: var(--dark);
172
  margin-bottom: 0.5rem;
173
  line-height: 1.5;
174
  }
 
175
  .notice-item:last-child {
176
  margin-bottom: 0;
177
  }
 
178
  .notice-link {
179
- color: var(--primary);
180
  font-weight: 700;
181
  text-decoration: none;
182
- border-bottom: 2px solid var(--primary);
183
- transition: all 0.2s ease;
 
184
  }
 
185
  .notice-link:hover {
186
- color: var(--secondary);
187
- border-bottom-color: var(--secondary);
188
  }
 
189
  /* ===== Stats Bar ===== */
190
  .stats-bar {
191
  display: flex;
@@ -194,26 +257,38 @@
194
  padding: 1.5rem;
195
  margin: 2rem auto;
196
  max-width: 800px;
197
- background: var(--white);
198
- border: var(--border);
199
  border-radius: var(--radius);
200
- box-shadow: var(--shadow);
 
 
201
  flex-wrap: wrap;
202
  }
 
203
  .stat-item {
204
  text-align: center;
205
  }
 
206
  .stat-number {
207
- font-family: 'Bangers', cursive;
208
  font-size: 2rem;
209
- color: var(--primary);
 
 
 
 
210
  letter-spacing: 1px;
211
  }
 
212
  .stat-label {
213
  font-size: 0.9rem;
214
- font-weight: 700;
215
- color: var(--dark);
 
 
216
  }
 
217
  /* ===== Navigation Tabs ===== */
218
  .nav-tabs {
219
  display: flex;
@@ -224,147 +299,200 @@
224
  max-width: 1200px;
225
  margin: 0 auto;
226
  }
 
227
  .nav-tab {
228
- font-family: 'Comic Neue', cursive;
229
- font-weight: 700;
230
  font-size: 1rem;
231
  padding: 0.75rem 1.5rem;
232
- border: var(--border);
233
- border-radius: 8px;
234
- background: var(--white);
235
- color: var(--dark);
236
  cursor: pointer;
237
- box-shadow: var(--shadow-sm);
238
- transition: all 0.15s ease;
239
  }
 
240
  .nav-tab:hover {
241
- transform: translate(-2px, -2px);
242
- box-shadow: 6px 6px 0px var(--dark);
 
 
 
243
  }
 
244
  .nav-tab.active {
245
- background: var(--primary);
246
- color: var(--white);
247
- }
248
- .nav-tab:active {
249
- transform: translate(2px, 2px);
250
- box-shadow: 2px 2px 0px var(--dark);
251
  }
 
252
  /* ===== BEST Tab Special Style ===== */
253
  .nav-tab.best-tab {
254
- background: linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #EC4899 100%);
255
- color: var(--white);
256
- animation: best-pulse 2s infinite;
 
257
  }
 
258
  .nav-tab.best-tab.active {
259
- background: linear-gradient(135deg, #D97706 0%, #DC2626 50%, #DB2777 100%);
260
  }
261
- @keyframes best-pulse {
262
- 0%, 100% { box-shadow: 4px 4px 0px var(--dark), 0 0 10px #F59E0B; }
263
- 50% { box-shadow: 4px 4px 0px var(--dark), 0 0 20px #F59E0B, 0 0 30px #EF4444; }
 
 
 
 
 
 
 
264
  }
 
265
  /* ===== Main Container ===== */
266
  .container {
267
  max-width: 1400px;
268
  margin: 0 auto;
269
  padding: 2rem 1rem;
270
  }
 
271
  /* ===== Category Section ===== */
272
  .category-section {
273
  margin-bottom: 3rem;
274
  }
 
275
  .category-header {
276
  display: flex;
277
  align-items: center;
278
  gap: 1rem;
279
  margin-bottom: 1.5rem;
280
  padding-bottom: 0.5rem;
281
- border-bottom: 3px dashed var(--dark);
282
  }
 
283
  .category-icon {
284
  font-size: 2rem;
 
285
  }
 
286
  .category-title {
287
- font-family: 'Bangers', cursive;
288
- font-size: 2rem;
 
289
  letter-spacing: 2px;
290
- color: var(--dark);
 
 
 
291
  }
 
292
  .category-count {
293
- font-family: 'Comic Neue', cursive;
294
- font-weight: 700;
295
  font-size: 0.9rem;
296
- background: var(--accent);
 
297
  padding: 0.25rem 0.75rem;
298
- border: 2px solid var(--dark);
299
- border-radius: 20px;
 
300
  }
 
301
  /* ===== BEST Category Special Header ===== */
302
  .category-header.best-header {
303
- background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
304
  padding: 1rem;
305
  border-radius: var(--radius);
306
- border: 3px solid var(--dark);
307
- box-shadow: var(--shadow-sm);
 
 
308
  }
 
309
  .category-header.best-header .category-title {
310
- background: linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #EC4899 100%);
311
- -webkit-background-clip: text;
312
- -webkit-text-fill-color: transparent;
313
- background-clip: text;
314
  }
 
315
  .best-badge {
316
- background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
317
- color: var(--white);
318
- font-family: 'Bangers', cursive;
319
- font-size: 0.9rem;
 
320
  padding: 0.25rem 0.75rem;
321
- border: 2px solid var(--dark);
322
- border-radius: 20px;
323
- animation: best-pulse 2s infinite;
324
  }
 
325
  /* ===== Card Grid ===== */
326
  .card-grid {
327
  display: grid;
328
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
329
  gap: 1.5rem;
330
  }
 
331
  /* ===== Card Styles ===== */
332
  .card {
333
- background: var(--white);
334
- border: var(--border);
335
  border-radius: var(--radius);
336
- box-shadow: var(--shadow);
 
 
337
  overflow: hidden;
338
- transition: all 0.2s ease;
339
  cursor: pointer;
340
  text-decoration: none;
341
  color: inherit;
342
  display: block;
343
  }
 
344
  .card:hover {
345
- transform: translate(-4px, -4px);
346
- box-shadow: 10px 10px 0px var(--dark);
347
- }
348
- .card:active {
349
- transform: translate(2px, 2px);
350
- box-shadow: 4px 4px 0px var(--dark);
351
  }
 
352
  /* ===== BEST Card Special Style ===== */
353
  .card.best-card {
354
- border: 4px solid #F59E0B;
355
- box-shadow: 6px 6px 0px var(--dark), 0 0 15px rgba(245, 158, 11, 0.3);
 
 
356
  }
 
357
  .card.best-card:hover {
358
- box-shadow: 10px 10px 0px var(--dark), 0 0 25px rgba(245, 158, 11, 0.5);
 
 
359
  }
 
360
  /* ===== Help Desk Card Special Style ===== */
361
  .card.helpdesk-card {
362
- border: 4px solid #10B981;
363
- box-shadow: 6px 6px 0px var(--dark), 0 0 15px rgba(16, 185, 129, 0.3);
 
 
364
  }
 
365
  .card.helpdesk-card:hover {
366
- box-shadow: 10px 10px 0px var(--dark), 0 0 25px rgba(16, 185, 129, 0.5);
 
 
367
  }
 
368
  .card-preview {
369
  height: 180px;
370
  display: flex;
@@ -374,571 +502,646 @@
374
  position: relative;
375
  overflow: hidden;
376
  }
 
 
377
  .card-preview.gradient-1 {
378
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
379
  }
380
  .card-preview.gradient-2 {
381
- background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
382
  }
383
  .card-preview.gradient-3 {
384
- background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
385
  }
386
  .card-preview.gradient-4 {
387
- background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
388
  }
389
  .card-preview.gradient-5 {
390
- background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
391
  }
392
  .card-preview.gradient-6 {
393
- background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
394
  }
395
  .card-preview.gradient-7 {
396
- background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
397
  }
398
  .card-preview.gradient-8 {
399
- background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
400
  }
401
  .card-preview.gradient-9 {
402
- background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
403
  }
404
  .card-preview.gradient-10 {
405
- background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
406
  }
407
  .card-preview.gradient-qwen {
408
- background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);
409
  }
410
  .card-preview.gradient-qwen-lora {
411
- background: linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #EC4899 100%);
412
  }
413
  .card-preview.gradient-korea {
414
- background: linear-gradient(135deg, #0047A0 0%, #FFFFFF 50%, #C60C30 100%);
415
  }
416
  .card-preview.gradient-fortune {
417
- background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F59E0B 100%);
418
  }
419
  .card-preview.gradient-nsfw {
420
- background: linear-gradient(135deg, #DC2626 0%, #991B1B 50%, #7F1D1D 100%);
421
  }
422
  .card-preview.gradient-nsfw-2 {
423
- background: linear-gradient(135deg, #BE185D 0%, #9D174D 50%, #831843 100%);
424
  }
425
  .card-preview.gradient-nsfw-3 {
426
- background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%);
427
  }
428
  .card-preview.gradient-nsfw-4 {
429
- background: linear-gradient(135deg, #EA580C 0%, #C2410C 50%, #9A3412 100%);
430
  }
431
  .card-preview.gradient-nsfw-5 {
432
- background: linear-gradient(135deg, #0891B2 0%, #0E7490 50%, #155E75 100%);
433
  }
434
  .card-preview.gradient-nsfw-6 {
435
- background: linear-gradient(135deg, #DB2777 0%, #BE185D 50%, #9D174D 100%);
436
  }
437
  .card-preview.gradient-novel {
438
- background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 30%, #EC4899 70%, #F43F5E 100%);
439
  }
440
  .card-preview.gradient-exam {
441
- background: linear-gradient(135deg, #0369A1 0%, #0284C7 30%, #06B6D4 70%, #22D3EE 100%);
442
  }
443
  .card-preview.gradient-best {
444
- background: linear-gradient(135deg, #F59E0B 0%, #EF4444 30%, #EC4899 70%, #8B5CF6 100%);
445
  }
446
  .card-preview.gradient-youtube {
447
- background: linear-gradient(135deg, #FF0000 0%, #CC0000 30%, #990000 70%, #1F2937 100%);
448
  }
449
  .card-preview.gradient-minimax {
450
- background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 50%, #60A5FA 100%);
451
  }
452
  .card-preview.gradient-kimi {
453
- background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #C084FC 100%);
454
  }
455
  .card-preview.gradient-deepseek {
456
- background: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
457
  }
458
  .card-preview.gradient-glm {
459
- background: linear-gradient(135deg, #DC2626 0%, #F97316 50%, #FBBF24 100%);
460
  }
461
  .card-preview.gradient-motion {
462
- background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 30%, #F59E0B 70%, #10B981 100%);
463
  }
464
  .card-preview.gradient-helpdesk {
465
- background: linear-gradient(135deg, #10B981 0%, #059669 30%, #047857 70%, #065F46 100%);
466
  }
467
  .card-preview.gradient-camera3d {
468
- background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 30%, #EC4899 70%, #F97316 100%);
469
  }
470
  .card-preview.gradient-flipbook {
471
- background: linear-gradient(135deg, #EF4444 0%, #F97316 25%, #FACC15 50%, #3B82F6 75%, #8B5CF6 100%);
472
  }
473
  .card-preview.gradient-hwp {
474
- background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 25%, #EC4899 50%, #10B981 75%, #FACC15 100%);
475
  }
 
476
  .card-badge {
477
  position: absolute;
478
  top: 12px;
479
  right: 12px;
480
- font-family: 'Bangers', cursive;
481
- font-size: 0.85rem;
 
482
  padding: 0.35rem 0.75rem;
483
- border: 2px solid var(--dark);
484
- border-radius: 6px;
485
- box-shadow: 2px 2px 0px var(--dark);
486
  }
 
487
  .badge-new {
488
- background: var(--secondary);
489
- color: var(--white);
 
 
490
  }
491
  .badge-hot {
492
- background: var(--orange);
493
- color: var(--white);
 
 
494
  }
495
  .badge-beta {
496
- background: var(--purple);
497
- color: var(--white);
 
 
498
  }
499
  .badge-free {
500
- background: var(--success);
501
- color: var(--white);
 
 
502
  }
503
  .badge-qwen {
504
- background: #6366F1;
505
- color: var(--white);
 
 
506
  }
507
  .badge-korea {
508
- background: #0047A0;
509
- color: var(--white);
 
 
510
  }
511
  .badge-fortune {
512
- background: #8B5CF6;
513
- color: var(--white);
 
 
514
  }
515
  .badge-nsfw {
516
- background: #DC2626;
517
- color: var(--white);
 
 
518
  }
519
  .badge-novel {
520
- background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
521
- color: var(--white);
 
 
522
  }
523
  .badge-exam {
524
- background: linear-gradient(135deg, #0284C7 0%, #06B6D4 100%);
525
- color: var(--white);
 
 
526
  }
527
  .badge-best {
528
- background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
529
- color: var(--white);
530
- animation: best-pulse 2s infinite;
 
 
531
  }
532
  .badge-youtube {
533
- background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
534
- color: var(--white);
 
 
535
  }
536
  .badge-llm {
537
- background: linear-gradient(135deg, #1E40AF 0%, #7C3AED 100%);
538
- color: var(--white);
 
 
539
  }
540
  .badge-minimax {
541
- background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
542
- color: var(--white);
 
 
543
  }
544
  .badge-kimi {
545
- background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
546
- color: var(--white);
 
 
547
  }
548
  .badge-deepseek {
549
- background: linear-gradient(135deg, #059669 0%, #10B981 100%);
550
- color: var(--white);
 
 
551
  }
552
  .badge-glm {
553
- background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
554
- color: var(--white);
 
 
555
  }
556
  .badge-motion {
557
- background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
558
- color: var(--white);
 
 
559
  }
560
  .badge-helpdesk {
561
- background: linear-gradient(135deg, #10B981 0%, #059669 100%);
562
- color: var(--white);
563
- animation: helpdesk-pulse 2s infinite;
 
 
564
  }
565
  .badge-camera3d {
566
- background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
567
- color: var(--white);
 
 
568
  }
569
  .badge-flipbook {
570
- background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%);
571
- color: var(--white);
572
- animation: flipbook-pulse 2s infinite;
 
 
573
  }
574
  .badge-hwp {
575
- background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
576
- color: var(--white);
577
- animation: hwp-pulse 2s infinite;
 
 
578
  }
579
- @keyframes helpdesk-pulse {
580
- 0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #10B981; }
581
- 50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #10B981, 0 0 20px #059669; }
 
582
  }
583
- @keyframes flipbook-pulse {
584
- 0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #EF4444; }
585
- 50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #EF4444, 0 0 20px #8B5CF6; }
586
  }
587
- @keyframes hwp-pulse {
588
- 0%, 100% { box-shadow: 2px 2px 0px var(--dark), 0 0 8px #3B82F6; }
589
- 50% { box-shadow: 2px 2px 0px var(--dark), 0 0 15px #3B82F6, 0 0 20px #10B981; }
590
  }
 
591
  .card-content {
592
  padding: 1.25rem;
593
  }
 
594
  .card-title {
595
- font-family: 'Bangers', cursive;
596
- font-size: 1.4rem;
 
597
  letter-spacing: 1px;
598
  margin-bottom: 0.5rem;
599
- color: var(--dark);
 
600
  }
 
601
  .card-description {
602
  font-size: 0.95rem;
603
- color: #6B7280;
604
  line-height: 1.5;
605
  margin-bottom: 1rem;
606
  }
 
 
607
  .card-highlight {
608
- background: var(--accent);
609
- color: var(--dark);
610
- font-weight: 700;
611
- padding: 2px 6px;
612
  border-radius: 4px;
 
613
  }
614
  .card-highlight-qwen {
615
- background: #6366F1;
616
- color: var(--white);
617
- font-weight: 700;
618
- padding: 2px 6px;
619
  border-radius: 4px;
620
  }
621
  .card-highlight-korea {
622
- background: #0047A0;
623
- color: var(--white);
624
- font-weight: 700;
625
- padding: 2px 6px;
626
  border-radius: 4px;
627
  }
628
  .card-highlight-fortune {
629
- background: #8B5CF6;
630
- color: var(--white);
631
- font-weight: 700;
632
- padding: 2px 6px;
633
  border-radius: 4px;
634
  }
635
  .card-highlight-nsfw {
636
- background: #DC2626;
637
- color: var(--white);
638
- font-weight: 700;
639
- padding: 2px 6px;
640
  border-radius: 4px;
641
  }
642
  .card-highlight-novel {
643
- background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
644
- color: var(--white);
645
- font-weight: 700;
646
- padding: 2px 6px;
647
  border-radius: 4px;
648
  }
649
  .card-highlight-exam {
650
- background: linear-gradient(135deg, #0284C7 0%, #06B6D4 100%);
651
- color: var(--white);
652
- font-weight: 700;
653
- padding: 2px 6px;
654
  border-radius: 4px;
655
  }
656
  .card-highlight-best {
657
- background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
658
- color: var(--white);
659
- font-weight: 700;
660
- padding: 2px 6px;
661
  border-radius: 4px;
662
  }
663
  .card-highlight-youtube {
664
- background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
665
- color: var(--white);
666
- font-weight: 700;
667
- padding: 2px 6px;
668
  border-radius: 4px;
669
  }
670
  .card-highlight-llm {
671
- background: linear-gradient(135deg, #1E40AF 0%, #7C3AED 100%);
672
- color: var(--white);
673
- font-weight: 700;
674
- padding: 2px 6px;
675
  border-radius: 4px;
676
  }
677
  .card-highlight-minimax {
678
- background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
679
- color: var(--white);
680
- font-weight: 700;
681
- padding: 2px 6px;
682
  border-radius: 4px;
683
  }
684
  .card-highlight-kimi {
685
- background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
686
- color: var(--white);
687
- font-weight: 700;
688
- padding: 2px 6px;
689
  border-radius: 4px;
690
  }
691
  .card-highlight-deepseek {
692
- background: linear-gradient(135deg, #059669 0%, #10B981 100%);
693
- color: var(--white);
694
- font-weight: 700;
695
- padding: 2px 6px;
696
  border-radius: 4px;
697
  }
698
  .card-highlight-glm {
699
- background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
700
- color: var(--white);
701
- font-weight: 700;
702
- padding: 2px 6px;
703
  border-radius: 4px;
704
  }
705
  .card-highlight-motion {
706
- background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
707
- color: var(--white);
708
- font-weight: 700;
709
- padding: 2px 6px;
710
  border-radius: 4px;
711
  }
712
  .card-highlight-helpdesk {
713
- background: linear-gradient(135deg, #10B981 0%, #059669 100%);
714
- color: var(--white);
715
- font-weight: 700;
716
- padding: 2px 6px;
717
  border-radius: 4px;
718
  }
719
  .card-highlight-camera3d {
720
- background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
721
- color: var(--white);
722
- font-weight: 700;
723
- padding: 2px 6px;
724
  border-radius: 4px;
725
  }
726
  .card-highlight-flipbook {
727
- background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%);
728
- color: var(--white);
729
- font-weight: 700;
730
- padding: 2px 6px;
731
  border-radius: 4px;
732
  }
733
  .card-highlight-hwp {
734
- background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
735
- color: var(--white);
736
- font-weight: 700;
737
- padding: 2px 6px;
738
  border-radius: 4px;
739
  }
 
740
  .card-meta {
741
  display: flex;
742
  justify-content: space-between;
743
  align-items: center;
744
  padding-top: 0.75rem;
745
- border-top: 2px dashed #E5E7EB;
746
  }
 
747
  .card-tags {
748
  display: flex;
749
  gap: 0.5rem;
750
  flex-wrap: wrap;
751
  }
 
752
  .tag {
753
  font-size: 0.75rem;
754
- font-weight: 700;
755
  padding: 0.25rem 0.5rem;
756
- background: var(--background);
757
- border: 2px solid var(--dark);
758
  border-radius: 4px;
 
759
  }
760
  .tag-qwen {
761
  font-size: 0.75rem;
762
- font-weight: 700;
763
  padding: 0.25rem 0.5rem;
764
- background: #EEF2FF;
765
- border: 2px solid #6366F1;
766
  border-radius: 4px;
767
- color: #6366F1;
768
  }
769
  .tag-korea {
770
  font-size: 0.75rem;
771
- font-weight: 700;
772
  padding: 0.25rem 0.5rem;
773
- background: #EFF6FF;
774
- border: 2px solid #0047A0;
775
  border-radius: 4px;
776
- color: #0047A0;
777
  }
778
  .tag-fortune {
779
  font-size: 0.75rem;
780
- font-weight: 700;
781
  padding: 0.25rem 0.5rem;
782
- background: #F3E8FF;
783
- border: 2px solid #8B5CF6;
784
  border-radius: 4px;
785
- color: #8B5CF6;
786
  }
787
  .tag-nsfw {
788
  font-size: 0.75rem;
789
- font-weight: 700;
790
  padding: 0.25rem 0.5rem;
791
- background: #FEE2E2;
792
- border: 2px solid #DC2626;
793
  border-radius: 4px;
794
- color: #DC2626;
795
  }
796
  .tag-novel {
797
  font-size: 0.75rem;
798
- font-weight: 700;
799
  padding: 0.25rem 0.5rem;
800
- background: linear-gradient(135deg, #F3E8FF 0%, #FCE7F3 100%);
801
- border: 2px solid #7C3AED;
802
  border-radius: 4px;
803
- color: #7C3AED;
804
  }
805
  .tag-exam {
806
  font-size: 0.75rem;
807
- font-weight: 700;
808
  padding: 0.25rem 0.5rem;
809
- background: linear-gradient(135deg, #E0F2FE 0%, #CFFAFE 100%);
810
- border: 2px solid #0284C7;
811
  border-radius: 4px;
812
- color: #0284C7;
813
  }
814
  .tag-best {
815
  font-size: 0.75rem;
816
- font-weight: 700;
817
  padding: 0.25rem 0.5rem;
818
- background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
819
- border: 2px solid #F59E0B;
820
  border-radius: 4px;
821
- color: #D97706;
822
  }
823
  .tag-youtube {
824
  font-size: 0.75rem;
825
- font-weight: 700;
826
  padding: 0.25rem 0.5rem;
827
- background: #FEE2E2;
828
- border: 2px solid #FF0000;
829
  border-radius: 4px;
830
- color: #CC0000;
831
  }
832
  .tag-llm {
833
  font-size: 0.75rem;
834
- font-weight: 700;
835
  padding: 0.25rem 0.5rem;
836
- background: linear-gradient(135deg, #EEF2FF 0%, #F3E8FF 100%);
837
- border: 2px solid #1E40AF;
838
  border-radius: 4px;
839
- color: #1E40AF;
840
  }
841
  .tag-minimax {
842
  font-size: 0.75rem;
843
- font-weight: 700;
844
  padding: 0.25rem 0.5rem;
845
- background: #DBEAFE;
846
- border: 2px solid #1E3A8A;
847
  border-radius: 4px;
848
- color: #1E3A8A;
849
  }
850
  .tag-kimi {
851
  font-size: 0.75rem;
852
- font-weight: 700;
853
  padding: 0.25rem 0.5rem;
854
- background: #F3E8FF;
855
- border: 2px solid #7C3AED;
856
  border-radius: 4px;
857
- color: #7C3AED;
858
  }
859
  .tag-deepseek {
860
  font-size: 0.75rem;
861
- font-weight: 700;
862
  padding: 0.25rem 0.5rem;
863
- background: #D1FAE5;
864
- border: 2px solid #059669;
865
  border-radius: 4px;
866
- color: #059669;
867
  }
868
  .tag-glm {
869
  font-size: 0.75rem;
870
- font-weight: 700;
871
  padding: 0.25rem 0.5rem;
872
- background: #FEF3C7;
873
- border: 2px solid #DC2626;
874
  border-radius: 4px;
875
- color: #DC2626;
876
  }
877
  .tag-motion {
878
  font-size: 0.75rem;
879
- font-weight: 700;
880
  padding: 0.25rem 0.5rem;
881
- background: linear-gradient(135deg, #F3E8FF 0%, #FCE7F3 100%);
882
- border: 2px solid #8B5CF6;
883
  border-radius: 4px;
884
- color: #8B5CF6;
885
  }
886
  .tag-helpdesk {
887
  font-size: 0.75rem;
888
- font-weight: 700;
889
  padding: 0.25rem 0.5rem;
890
- background: #D1FAE5;
891
- border: 2px solid #10B981;
892
  border-radius: 4px;
893
- color: #059669;
894
  }
895
  .tag-camera3d {
896
  font-size: 0.75rem;
897
- font-weight: 700;
898
  padding: 0.25rem 0.5rem;
899
- background: linear-gradient(135deg, #DBEAFE 0%, #E9D5FF 100%);
900
- border: 2px solid #3B82F6;
901
  border-radius: 4px;
902
- color: #3B82F6;
903
  }
904
  .tag-flipbook {
905
  font-size: 0.75rem;
906
- font-weight: 700;
907
  padding: 0.25rem 0.5rem;
908
- background: linear-gradient(135deg, #FEE2E2 0%, #E9D5FF 100%);
909
- border: 2px solid #EF4444;
910
  border-radius: 4px;
911
- color: #EF4444;
912
  }
913
  .tag-hwp {
914
  font-size: 0.75rem;
915
- font-weight: 700;
916
  padding: 0.25rem 0.5rem;
917
- background: linear-gradient(135deg, #DBEAFE 0%, #D1FAE5 100%);
918
- border: 2px solid #3B82F6;
919
  border-radius: 4px;
920
- color: #3B82F6;
921
  }
 
922
  .card-arrow {
923
  font-size: 1.5rem;
924
- transition: transform 0.2s ease;
 
 
925
  }
 
926
  .card:hover .card-arrow {
927
- transform: translateX(5px);
 
928
  }
 
929
  /* ===== Footer ===== */
930
  .footer {
931
  text-align: center;
932
  padding: 3rem 1rem;
933
  margin-top: 2rem;
934
- border-top: 3px dashed var(--dark);
935
  }
 
936
  .footer-logo {
937
- font-family: 'Bangers', cursive;
938
  font-size: 2rem;
 
939
  letter-spacing: 2px;
 
 
 
 
940
  margin-bottom: 1rem;
941
  }
 
942
  .footer-links {
943
  display: flex;
944
  justify-content: center;
@@ -946,20 +1149,25 @@
946
  margin-bottom: 1rem;
947
  flex-wrap: wrap;
948
  }
 
949
  .footer-link {
950
- font-weight: 700;
951
- color: var(--dark);
952
  text-decoration: none;
953
- border-bottom: 2px solid transparent;
954
- transition: border-color 0.2s;
955
  }
 
956
  .footer-link:hover {
957
- border-bottom-color: var(--primary);
 
958
  }
 
959
  .footer-copy {
960
  font-size: 0.9rem;
961
- color: #6B7280;
962
  }
 
963
  /* ===== Floating Action Button ===== */
964
  .fab {
965
  position: fixed;
@@ -967,29 +1175,33 @@
967
  right: 2rem;
968
  width: 60px;
969
  height: 60px;
970
- background: var(--primary);
971
- border: var(--border);
972
  border-radius: 50%;
973
- box-shadow: var(--shadow);
 
 
974
  display: flex;
975
  align-items: center;
976
  justify-content: center;
977
  font-size: 1.5rem;
978
  cursor: pointer;
979
- transition: all 0.2s ease;
980
  z-index: 1000;
981
  }
 
982
  .fab:hover {
983
- transform: translate(-2px, -2px) scale(1.1);
984
- box-shadow: 8px 8px 0px var(--dark);
 
 
 
985
  }
 
986
  /* ===== Responsive ===== */
987
  @media (max-width: 768px) {
988
  .logo {
989
- font-size: 2.5rem;
990
- text-shadow:
991
- 3px 3px 0px var(--accent),
992
- 5px 5px 0px var(--dark);
993
  }
994
  .tagline {
995
  font-size: 1.1rem;
@@ -1006,7 +1218,7 @@
1006
  font-size: 0.9rem;
1007
  }
1008
  .category-title {
1009
- font-size: 1.5rem;
1010
  }
1011
  .card-grid {
1012
  grid-template-columns: 1fr;
@@ -1031,12 +1243,13 @@
1031
  gap: 0.5rem;
1032
  }
1033
  .enterprise-banner-text {
1034
- font-size: 1.1rem;
1035
  }
1036
  .enterprise-banner-link {
1037
- font-size: 1.2rem;
1038
  }
1039
  }
 
1040
  /* ===== Animation ===== */
1041
  @keyframes fadeInUp {
1042
  from {
@@ -1048,9 +1261,11 @@
1048
  transform: translateY(0);
1049
  }
1050
  }
 
1051
  .card {
1052
  animation: fadeInUp 0.5s ease forwards;
1053
  }
 
1054
  .card:nth-child(1) { animation-delay: 0.1s; }
1055
  .card:nth-child(2) { animation-delay: 0.2s; }
1056
  .card:nth-child(3) { animation-delay: 0.3s; }
@@ -1060,49 +1275,88 @@
1060
  .card:nth-child(7) { animation-delay: 0.7s; }
1061
  .card:nth-child(8) { animation-delay: 0.8s; }
1062
  .card:nth-child(9) { animation-delay: 0.9s; }
 
1063
  /* ===== Search Bar ===== */
1064
  .search-container {
1065
  max-width: 600px;
1066
  margin: 0 auto 2rem;
1067
  position: relative;
1068
  }
 
1069
  .search-input {
1070
  width: 100%;
1071
  padding: 1rem 1.5rem 1rem 3rem;
1072
- font-family: 'Comic Neue', cursive;
1073
  font-size: 1.1rem;
1074
- font-weight: 700;
1075
- border: var(--border);
1076
- border-radius: var(--radius);
1077
- box-shadow: var(--shadow);
1078
- background: var(--white);
1079
- color: var(--dark);
1080
  outline: none;
1081
- transition: all 0.2s ease;
 
1082
  }
 
1083
  .search-input:focus {
1084
- box-shadow: 8px 8px 0px var(--primary);
1085
- border-color: var(--primary);
 
 
1086
  }
 
1087
  .search-input::placeholder {
1088
- color: #9CA3AF;
1089
  font-weight: 400;
1090
  }
 
1091
  .search-icon {
1092
  position: absolute;
1093
  left: 1rem;
1094
  top: 50%;
1095
  transform: translateY(-50%);
1096
  font-size: 1.2rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1097
  }
1098
  </style>
1099
  </head>
1100
  <body>
1101
  <!-- Header -->
1102
  <header class="header">
1103
- <h1 class="logo">πŸ’₯ HUMANGEN.AI πŸ’₯</h1>
1104
  <div class="banner-container">
1105
- <img src="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/banner.png" alt="HumanGen.AI Banner" class="banner-image">
1106
  </div>
1107
  <!-- Enterprise Banner -->
1108
  <div class="enterprise-banner">
@@ -1110,15 +1364,13 @@
1110
  <a href="https://www.ginigen.ai" target="_blank" class="enterprise-banner-link">www.ginigen.ai</a>
1111
  </div>
1112
  <!-- Enterprise Contact Banner -->
1113
- <div style="background:#FACC15;border:3px solid #1F2937;border-radius:8px;padding:12px 20px;text-align:center;box-shadow:4px 4px 0 #1F2937;margin:20px auto;max-width:1200px">
1114
- <span style="font-family:'Bangers',cursive;color:#1F2937;font-size:1.2rem">πŸ’Ό Enterprise & CUSTOM(White Label) Β· 문의</span>
1115
- <span style="color:#1F2937;font-weight:700"> β†’ </span>
1116
- <a href="mailto:arxivgpt@gmail.com" style="color:#3B82F6;font-weight:700;font-family:'Comic Neue',cursive">πŸ“§ arxivgpt@gmail.com</a>
1117
  </div>
1118
  </header>
1119
 
1120
- <!-- AI Models 42둜 λ³€κ²½ -->
1121
-
1122
  <!-- Stats Bar -->
1123
  <div class="stats-bar">
1124
  <div class="stat-item">
@@ -1138,12 +1390,14 @@
1138
  <div class="stat-label">Creations / Month</div>
1139
  </div>
1140
  </div>
 
1141
  <!-- Search Bar -->
1142
  <div class="search-container">
1143
  <span class="search-icon">πŸ”</span>
1144
  <input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, youtube, trend, nsfw, novel, exam, best, llm, motion, camera, 3d, flipbook, hwp)" id="searchInput">
1145
  </div>
1146
- <!-- Navigation Tabs (Text moved after BEST) -->
 
1147
  <nav class="nav-tabs">
1148
  <button class="nav-tab active" data-category="all">🌟 All</button>
1149
  <button class="nav-tab best-tab" data-category="best">πŸ† BEST</button>
@@ -1156,9 +1410,10 @@
1156
  <button class="nav-tab" data-category="nsfw">πŸ”ž NSFW</button>
1157
  <button class="nav-tab" data-category="korea">πŸ‡°πŸ‡· Korea</button>
1158
  </nav>
 
1159
  <!-- Main Container -->
1160
  <main class="container">
1161
- <!-- BEST PICKS Section - Video Editor 제거, HWP AI μΆ”κ°€ -->
1162
  <section class="category-section" data-section="best">
1163
  <div class="category-header best-header">
1164
  <span class="category-icon">πŸ†</span>
@@ -1191,7 +1446,7 @@
1191
  </div>
1192
  </div>
1193
  </a>
1194
- <!-- BEST 2: HWP AI μ–΄μ‹œμŠ€ν„΄νŠΈ (NEW - Replaced Video Editor) -->
1195
  <a href="https://hwp.humangen.ai" target="_blank" class="card best-card" data-tags="best,korea,hwp,hwpx,pdf,document,ai,assistant,ν•œκ΅­μ–΄,λ¬Έμ„œ,λ³€ν™˜,markdown,read,see,speak,think,memory,llm,groq">
1196
  <div class="card-preview gradient-hwp">
1197
  <span>πŸ“„</span>
@@ -1265,7 +1520,8 @@
1265
  </a>
1266
  </div>
1267
  </section>
1268
- <!-- Text & Language Section (MOVED HERE - AFTER BEST) -->
 
1269
  <section class="category-section" data-section="text">
1270
  <div class="category-header">
1271
  <span class="category-icon">πŸ“</span>
@@ -1273,7 +1529,7 @@
1273
  <span class="category-count">7 models</span>
1274
  </div>
1275
  <div class="card-grid">
1276
- <!-- HELP DESK & CHATBOT - FIRST CARD (ALWAYS FIXED AT TOP) -->
1277
  <a href="https://chat.humangen.ai" target="_blank" class="card helpdesk-card" data-tags="text,helpdesk,chatbot,support,faq,ai,assistant,help,question,answer,service,guide,english,korean,ν•œκΈ€">
1278
  <div class="card-preview gradient-helpdesk">
1279
  <span>πŸ€–</span>
@@ -1283,7 +1539,7 @@
1283
  <h3 class="card-title">πŸ€– Help Desk & Chatbot</h3>
1284
  <p class="card-description">
1285
  <span class="card-highlight-helpdesk">AI-Powered Service Guide</span> -
1286
- Ask anything about HumanGen.AI's <strong>39 AI services</strong>!
1287
  Get instant recommendations, usage guides, and support.
1288
  🌐 <strong>English / ν•œκ΅­μ–΄</strong> bilingual support.
1289
  </p>
@@ -1439,11 +1695,6 @@
1439
  </div>
1440
  </section>
1441
 
1442
-
1443
-
1444
-
1445
- <!-- μΉ΄ν…Œκ³ λ¦¬ 카운트 μˆ˜μ • -->
1446
-
1447
  <!-- Image Generation Section -->
1448
  <section class="category-section" data-section="image">
1449
  <div class="category-header">
@@ -1452,7 +1703,7 @@
1452
  <span class="category-count">10 models</span>
1453
  </div>
1454
  <div class="card-grid">
1455
- <!-- NEW! 3D Camera Angle Editor Card - 39th Card -->
1456
  <a href="https://3dangle.humangen.ai" target="_blank" class="card" data-tags="image,camera,angle,3d,qwen,lora,lightning,edit,azimuth,elevation,distance,multiangle,threejs,interactive">
1457
  <div class="card-preview gradient-camera3d">
1458
  <span>🎬</span>
@@ -1476,31 +1727,29 @@
1476
  </div>
1477
  </div>
1478
  </a>
1479
-
1480
- <!-- NEW! Z-Image LoRA Generator Card - 40th Card -->
1481
- <a href="https://zlora.humangen.ai" target="_blank" class="card" data-tags="image,lora,z-image,turbo,style,generator,custom,30+styles,jimin,portrait,ghibli,pixel,anime">
1482
- <div class="card-preview gradient-qwen-lora">
1483
- <span>🎨</span>
1484
- <span class="card-badge badge-new">✨ NEW</span>
1485
- </div>
1486
- <div class="card-content">
1487
- <h3 class="card-title">🎨 Z-Image LoRA Generator</h3>
1488
- <p class="card-description">
1489
- <span class="card-highlight">Z-Image Turbo + 30+ LoRAs!</span> -
1490
- Generate stunning images with various styles! Ghibli, Pixel Art, Anime, Portrait & more.
1491
- ⚑ Turbo speed, 🎭 Custom LoRA support, πŸ“± SNS aspect presets.
1492
- </p>
1493
- <div class="card-meta">
1494
- <div class="card-tags">
1495
- <span class="tag">Z-Image</span>
1496
- <span class="tag">30+ LoRA</span>
1497
- <span class="tag">Turbo</span>
1498
- </div>
1499
- <span class="card-arrow">β†’</span>
1500
- </div>
1501
- </div>
1502
- </a>
1503
-
1504
  <!-- Qwen Image 2512 Card -->
1505
  <a href="https://q2512.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lightning,turbo,fast,alibaba,32b">
1506
  <div class="card-preview gradient-qwen">
@@ -1679,6 +1928,7 @@
1679
  </a>
1680
  </div>
1681
  </section>
 
1682
  <!-- Video Generation Section -->
1683
  <section class="category-section" data-section="video">
1684
  <div class="category-header">
@@ -1800,6 +2050,7 @@
1800
  </a>
1801
  </div>
1802
  </section>
 
1803
  <!-- Audio Generation Section -->
1804
  <section class="category-section" data-section="audio">
1805
  <div class="category-header">
@@ -1854,6 +2105,7 @@
1854
  </a>
1855
  </div>
1856
  </section>
 
1857
  <!-- 3D & Modeling Section -->
1858
  <section class="category-section" data-section="3d">
1859
  <div class="category-header">
@@ -1862,7 +2114,7 @@
1862
  <span class="category-count">2 models</span>
1863
  </div>
1864
  <div class="card-grid">
1865
- <!-- NEW! HY-Motion Generator Card -->
1866
  <a href="https://motion.humangen.ai" target="_blank" class="card" data-tags="3d,motion,human,animation,text-to-motion,fbx,dance,walk,jump,pose,body,movement,ai,generator">
1867
  <div class="card-preview gradient-motion">
1868
  <span>πŸ•Ί</span>
@@ -1909,6 +2161,7 @@
1909
  </a>
1910
  </div>
1911
  </section>
 
1912
  <!-- Tools Section -->
1913
  <section class="category-section" data-section="tools">
1914
  <div class="category-header">
@@ -2030,6 +2283,7 @@
2030
  </a>
2031
  </div>
2032
  </section>
 
2033
  <!-- NSFW Section -->
2034
  <section class="category-section" data-section="nsfw">
2035
  <div class="category-header">
@@ -2202,7 +2456,8 @@
2202
  </a>
2203
  </div>
2204
  </section>
2205
- <!-- Korea Section - 4 models둜 μ—…λ°μ΄νŠΈ -->
 
2206
  <section class="category-section" data-section="korea">
2207
  <div class="category-header">
2208
  <span class="category-icon">πŸ‡°πŸ‡·</span>
@@ -2210,7 +2465,7 @@
2210
  <span class="category-count">4 models</span>
2211
  </div>
2212
  <div class="card-grid">
2213
- <!-- NEW! 42번째 μΉ΄λ“œ - HWP AI μ–΄μ‹œμŠ€ν„΄νŠΈ -->
2214
  <a href="https://hwp.humangen.ai" target="_blank" class="card" data-tags="korea,hwp,hwpx,pdf,document,ai,assistant,ν•œκ΅­μ–΄,λ¬Έμ„œ,λ³€ν™˜,markdown,read,see,speak,think,memory,llm,groq,fireworks">
2215
  <div class="card-preview gradient-hwp">
2216
  <span>πŸ“„</span>
@@ -2307,9 +2562,10 @@
2307
  </div>
2308
  </section>
2309
  </main>
 
2310
  <!-- Footer -->
2311
  <footer class="footer">
2312
- <div class="footer-logo">πŸ’₯ HUMANGEN.AI πŸ’₯</div>
2313
  <div class="footer-links">
2314
  <a href="#" class="footer-link">About</a>
2315
  <a href="#" class="footer-link">Blog</a>
@@ -2318,24 +2574,29 @@
2318
  <a href="#" class="footer-link">Twitter</a>
2319
  <a href="#" class="footer-link">GitHub</a>
2320
  </div>
2321
- <p class="footer-copy">Β© 2025 HumanGen.AI - Powered by www.ginigen.ai/en πŸ€—</p>
2322
  </footer>
 
2323
  <!-- Floating Action Button -->
2324
  <div class="fab" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
2325
  ⬆️
2326
  </div>
 
2327
  <!-- JavaScript -->
2328
  <script>
2329
  // Category Navigation
2330
  const navTabs = document.querySelectorAll('.nav-tab');
2331
  const sections = document.querySelectorAll('.category-section');
2332
  const cards = document.querySelectorAll('.card');
 
2333
  navTabs.forEach(tab => {
2334
  tab.addEventListener('click', () => {
2335
  const category = tab.dataset.category;
 
2336
  // Update active tab
2337
  navTabs.forEach(t => t.classList.remove('active'));
2338
  tab.classList.add('active');
 
2339
  // Filter sections
2340
  if (category === 'all') {
2341
  sections.forEach(s => s.style.display = 'block');
@@ -2350,20 +2611,24 @@
2350
  }
2351
  });
2352
  });
 
2353
  // Search Functionality
2354
  const searchInput = document.getElementById('searchInput');
2355
  searchInput.addEventListener('input', (e) => {
2356
  const query = e.target.value.toLowerCase();
 
2357
  cards.forEach(card => {
2358
  const title = card.querySelector('.card-title').textContent.toLowerCase();
2359
  const description = card.querySelector('.card-description').textContent.toLowerCase();
2360
  const tags = card.dataset.tags?.toLowerCase() || '';
 
2361
  if (title.includes(query) || description.includes(query) || tags.includes(query)) {
2362
  card.style.display = 'block';
2363
  } else {
2364
  card.style.display = 'none';
2365
  }
2366
  });
 
2367
  // Show all sections when searching
2368
  if (query) {
2369
  sections.forEach(s => s.style.display = 'block');
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MAYAfree.ai - AI Creative Playground</title>
7
+ <meta name="description" content="MAYAfree.ai - Your Ultimate AI Creative Playground. Generate images, videos, audio and more with cutting-edge AI models.">
8
  <!-- νŒŒλΉ„μ½˜ μ„€μ • -->
9
  <link rel="icon" type="image/png" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
10
  <link rel="apple-touch-icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
11
  <link rel="shortcut icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
12
  <!-- Open Graph (Facebook, Discord, Slack λ“±) -->
13
+ <meta property="og:title" content="MAYAfree.ai - AI Creative Playground">
14
  <meta property="og:description" content="Generate stunning images, videos, audio and more with state-of-the-art AI models. No coding required!">
15
  <meta property="og:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
16
+ <meta property="og:url" content="https://mayafree.ai">
17
  <meta property="og:type" content="website">
18
+ <meta property="og:site_name" content="MAYAfree.ai">
19
  <!-- Twitter Card -->
20
  <meta name="twitter:card" content="summary_large_image">
21
+ <meta name="twitter:title" content="MAYAfree.ai - AI Creative Playground">
22
  <meta name="twitter:description" content="Generate stunning images, videos, audio with cutting-edge AI. No coding required!">
23
  <meta name="twitter:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
24
+ <meta name="twitter:site" content="@mayafree_ai">
25
  <!-- μΆ”κ°€ SEO λ©”νƒ€νƒœκ·Έ -->
26
+ <meta name="keywords" content="AI, image generation, video generation, audio generation, creative tools, mayafree, artificial intelligence">
27
+ <meta name="author" content="MAYAfree.ai">
28
  <meta name="robots" content="index, follow">
29
+ <link rel="canonical" href="https://mayafree.ai">
30
  <!-- Google Fonts -->
31
  <link rel="preconnect" href="https://fonts.googleapis.com">
32
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
33
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
34
  <style>
35
+ /* ═══════════════════════════════════════════════════════════
36
+ πŸ’‘ SOFT NEON GLOW μŠ€νƒ€μΌ - MAYAfree.ai
37
+ ═══════════════════════════════════════════════════════════ */
38
+
39
+ /* 🎨 핡심 색상 νŒ”λ ˆνŠΈ */
40
  :root {
41
+ --neon-pink: #ffb6c1;
42
+ --neon-mint: #98fb98;
43
+ --neon-lavender: #dda0dd;
44
+ --neon-aqua: #b0e0e6;
45
+ --neon-yellow: #ffeaa7;
46
+ --neon-coral: #f8b4b4;
47
+ --neon-bg: #1a1a2e;
48
+ --neon-bg-dark: #0f0f1a;
49
+ --neon-bg-card: rgba(255, 182, 193, 0.08);
50
+ --white: #ffffff;
51
+ --text-primary: #e8e8f0;
52
+ --text-secondary: rgba(255, 255, 255, 0.6);
53
+ --shadow-sm: 0 0 10px rgba(255, 182, 193, 0.2);
54
+ --shadow-md: 0 0 20px rgba(255, 182, 193, 0.3);
55
+ --shadow-lg: 0 0 40px rgba(255, 182, 193, 0.4);
56
+ --radius: 20px;
57
+ --radius-sm: 12px;
58
  }
59
+
60
  /* ===== Reset & Base ===== */
61
  * {
62
  margin: 0;
63
  padding: 0;
64
  box-sizing: border-box;
65
  }
66
+
67
  body {
68
+ font-family: 'Rajdhani', sans-serif;
69
+ background: linear-gradient(135deg, var(--neon-bg) 0%, var(--neon-bg-dark) 100%);
 
 
70
  min-height: 100vh;
71
+ color: var(--text-primary);
72
  overflow-x: hidden;
73
  }
74
+
75
+ /* Animated background */
76
+ body::before {
77
+ content: '';
78
+ position: fixed;
79
+ top: 0;
80
+ left: 0;
81
+ width: 100%;
82
+ height: 100%;
83
+ background:
84
+ radial-gradient(ellipse at 20% 20%, rgba(255, 182, 193, 0.08) 0%, transparent 50%),
85
+ radial-gradient(ellipse at 80% 80%, rgba(221, 160, 221, 0.08) 0%, transparent 50%),
86
+ radial-gradient(ellipse at 50% 50%, rgba(152, 251, 152, 0.05) 0%, transparent 50%);
87
+ pointer-events: none;
88
+ z-index: -1;
89
+ }
90
+
91
  /* ===== Header ===== */
92
  .header {
93
  text-align: center;
94
  padding: 3rem 1rem 2rem;
95
  position: relative;
96
  }
97
+
98
  .logo {
99
+ font-family: 'Orbitron', sans-serif;
100
+ font-size: 3.5rem;
101
+ font-weight: 800;
102
+ color: var(--neon-pink);
103
  text-shadow:
104
+ 0 0 10px rgba(255, 182, 193, 0.5),
105
+ 0 0 20px rgba(255, 182, 193, 0.3),
106
+ 0 0 40px rgba(255, 182, 193, 0.2),
107
+ 0 0 80px rgba(255, 182, 193, 0.1);
108
  letter-spacing: 4px;
 
109
  margin-bottom: 1.5rem;
110
+ animation: softPulse 3s ease-in-out infinite;
111
  }
112
+
113
+ @keyframes softPulse {
114
+ 0%, 100% {
115
+ text-shadow:
116
+ 0 0 10px rgba(255, 182, 193, 0.5),
117
+ 0 0 20px rgba(255, 182, 193, 0.3),
118
+ 0 0 40px rgba(255, 182, 193, 0.2);
119
+ }
120
+ 50% {
121
+ text-shadow:
122
+ 0 0 15px rgba(255, 182, 193, 0.7),
123
+ 0 0 30px rgba(255, 182, 193, 0.5),
124
+ 0 0 60px rgba(255, 182, 193, 0.3),
125
+ 0 0 100px rgba(255, 182, 193, 0.2);
126
+ }
127
  }
128
+
129
  /* ===== Banner Image ===== */
130
  .banner-container {
131
  max-width: 1200px;
132
  margin: 0 auto;
133
  padding: 0 1rem;
134
  }
135
+
136
  .banner-image {
137
  width: 100%;
138
  max-width: 1200px;
139
  height: auto;
140
+ border: 1px solid rgba(255, 182, 193, 0.3);
141
  border-radius: var(--radius);
142
+ box-shadow:
143
+ 0 0 30px rgba(255, 182, 193, 0.2),
144
+ inset 0 0 20px rgba(255, 182, 193, 0.05);
145
  display: block;
146
  }
147
+
148
  /* ===== Enterprise Banner ===== */
149
  .enterprise-banner {
150
  max-width: 1200px;
151
  margin: 1.5rem auto 0;
152
  padding: 1rem 2rem;
153
+ background: rgba(221, 160, 221, 0.1);
154
+ border: 1px solid rgba(221, 160, 221, 0.3);
155
  border-radius: var(--radius);
156
+ box-shadow:
157
+ 0 0 20px rgba(221, 160, 221, 0.15),
158
+ inset 0 0 20px rgba(221, 160, 221, 0.05);
159
  text-align: center;
160
  display: flex;
161
  align-items: center;
 
163
  gap: 0.75rem;
164
  flex-wrap: wrap;
165
  }
166
+
167
  .enterprise-banner-text {
168
+ font-family: 'Orbitron', sans-serif;
169
+ font-size: 1.2rem;
170
+ font-weight: 600;
171
+ color: var(--neon-lavender);
172
+ text-shadow: 0 0 10px rgba(221, 160, 221, 0.5);
173
  letter-spacing: 1px;
 
174
  }
175
+
176
  .enterprise-banner-link {
177
+ font-family: 'Orbitron', sans-serif;
178
+ font-size: 1.3rem;
179
+ font-weight: 700;
180
+ color: var(--neon-mint);
181
  text-decoration: none;
182
  padding: 0.25rem 0.75rem;
183
+ background: rgba(152, 251, 152, 0.1);
184
+ border: 1px solid rgba(152, 251, 152, 0.4);
185
+ border-radius: 50px;
186
+ transition: all 0.4s ease;
187
+ text-shadow: 0 0 10px rgba(152, 251, 152, 0.5);
188
  }
189
+
190
  .enterprise-banner-link:hover {
191
+ background: rgba(152, 251, 152, 0.2);
192
+ box-shadow:
193
+ 0 0 20px rgba(152, 251, 152, 0.4),
194
+ 0 0 40px rgba(152, 251, 152, 0.2);
195
  transform: scale(1.05);
196
  }
197
+
198
  .tagline {
199
  font-size: 1.4rem;
200
+ font-weight: 600;
201
+ color: var(--neon-aqua);
202
  margin-bottom: 1rem;
203
+ text-shadow: 0 0 10px rgba(176, 224, 230, 0.5);
204
  }
205
+
206
  .subtitle {
207
  font-size: 1.1rem;
208
+ color: var(--text-secondary);
209
  max-width: 600px;
210
  margin: 0 auto;
211
  line-height: 1.6;
212
  }
213
+
214
  /* ===== Notice Box ===== */
215
  .notice-box {
216
  max-width: 700px;
217
  margin: 1.5rem auto 0;
218
  padding: 1rem 1.5rem;
219
+ background: rgba(255, 182, 193, 0.08);
220
+ border: 1px solid rgba(255, 182, 193, 0.2);
221
  border-radius: var(--radius);
222
+ box-shadow:
223
+ 0 0 20px rgba(255, 182, 193, 0.1),
224
+ inset 0 0 20px rgba(255, 182, 193, 0.05);
225
  }
226
+
227
  .notice-item {
228
  font-size: 0.95rem;
229
+ color: var(--text-primary);
230
  margin-bottom: 0.5rem;
231
  line-height: 1.5;
232
  }
233
+
234
  .notice-item:last-child {
235
  margin-bottom: 0;
236
  }
237
+
238
  .notice-link {
239
+ color: var(--neon-mint);
240
  font-weight: 700;
241
  text-decoration: none;
242
+ border-bottom: 1px solid transparent;
243
+ transition: all 0.3s ease;
244
+ text-shadow: 0 0 5px rgba(152, 251, 152, 0.3);
245
  }
246
+
247
  .notice-link:hover {
248
+ border-bottom-color: var(--neon-mint);
249
+ text-shadow: 0 0 15px rgba(152, 251, 152, 0.6);
250
  }
251
+
252
  /* ===== Stats Bar ===== */
253
  .stats-bar {
254
  display: flex;
 
257
  padding: 1.5rem;
258
  margin: 2rem auto;
259
  max-width: 800px;
260
+ background: rgba(255, 182, 193, 0.08);
261
+ border: 1px solid rgba(255, 182, 193, 0.2);
262
  border-radius: var(--radius);
263
+ box-shadow:
264
+ 0 0 30px rgba(255, 182, 193, 0.15),
265
+ inset 0 0 20px rgba(255, 182, 193, 0.05);
266
  flex-wrap: wrap;
267
  }
268
+
269
  .stat-item {
270
  text-align: center;
271
  }
272
+
273
  .stat-number {
274
+ font-family: 'Orbitron', sans-serif;
275
  font-size: 2rem;
276
+ font-weight: 700;
277
+ color: var(--neon-pink);
278
+ text-shadow:
279
+ 0 0 10px rgba(255, 182, 193, 0.5),
280
+ 0 0 20px rgba(255, 182, 193, 0.3);
281
  letter-spacing: 1px;
282
  }
283
+
284
  .stat-label {
285
  font-size: 0.9rem;
286
+ font-weight: 600;
287
+ color: var(--text-secondary);
288
+ text-transform: uppercase;
289
+ letter-spacing: 1px;
290
  }
291
+
292
  /* ===== Navigation Tabs ===== */
293
  .nav-tabs {
294
  display: flex;
 
299
  max-width: 1200px;
300
  margin: 0 auto;
301
  }
302
+
303
  .nav-tab {
304
+ font-family: 'Rajdhani', sans-serif;
305
+ font-weight: 600;
306
  font-size: 1rem;
307
  padding: 0.75rem 1.5rem;
308
+ border: 1px solid rgba(221, 160, 221, 0.3);
309
+ border-radius: 50px;
310
+ background: rgba(30, 30, 50, 0.6);
311
+ color: var(--neon-lavender);
312
  cursor: pointer;
313
+ box-shadow: 0 0 15px rgba(221, 160, 221, 0.1);
314
+ transition: all 0.4s ease;
315
  }
316
+
317
  .nav-tab:hover {
318
+ background: rgba(221, 160, 221, 0.15);
319
+ box-shadow:
320
+ 0 0 20px rgba(221, 160, 221, 0.3),
321
+ 0 0 40px rgba(221, 160, 221, 0.15);
322
+ transform: translateY(-2px);
323
  }
324
+
325
  .nav-tab.active {
326
+ background: rgba(255, 182, 193, 0.2);
327
+ border-color: var(--neon-pink);
328
+ color: var(--neon-pink);
329
+ box-shadow:
330
+ 0 0 20px rgba(255, 182, 193, 0.4),
331
+ 0 0 40px rgba(255, 182, 193, 0.2);
332
  }
333
+
334
  /* ===== BEST Tab Special Style ===== */
335
  .nav-tab.best-tab {
336
+ background: linear-gradient(135deg, rgba(255, 234, 167, 0.2), rgba(248, 180, 180, 0.2));
337
+ border-color: var(--neon-yellow);
338
+ color: var(--neon-yellow);
339
+ animation: bestGlow 2s infinite;
340
  }
341
+
342
  .nav-tab.best-tab.active {
343
+ background: linear-gradient(135deg, rgba(255, 234, 167, 0.3), rgba(248, 180, 180, 0.3));
344
  }
345
+
346
+ @keyframes bestGlow {
347
+ 0%, 100% {
348
+ box-shadow: 0 0 15px rgba(255, 234, 167, 0.3);
349
+ }
350
+ 50% {
351
+ box-shadow:
352
+ 0 0 25px rgba(255, 234, 167, 0.5),
353
+ 0 0 50px rgba(255, 234, 167, 0.3);
354
+ }
355
  }
356
+
357
  /* ===== Main Container ===== */
358
  .container {
359
  max-width: 1400px;
360
  margin: 0 auto;
361
  padding: 2rem 1rem;
362
  }
363
+
364
  /* ===== Category Section ===== */
365
  .category-section {
366
  margin-bottom: 3rem;
367
  }
368
+
369
  .category-header {
370
  display: flex;
371
  align-items: center;
372
  gap: 1rem;
373
  margin-bottom: 1.5rem;
374
  padding-bottom: 0.5rem;
375
+ border-bottom: 1px solid rgba(255, 182, 193, 0.2);
376
  }
377
+
378
  .category-icon {
379
  font-size: 2rem;
380
+ filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.5));
381
  }
382
+
383
  .category-title {
384
+ font-family: 'Orbitron', sans-serif;
385
+ font-size: 1.8rem;
386
+ font-weight: 700;
387
  letter-spacing: 2px;
388
+ color: var(--neon-pink);
389
+ text-shadow:
390
+ 0 0 10px rgba(255, 182, 193, 0.5),
391
+ 0 0 20px rgba(255, 182, 193, 0.3);
392
  }
393
+
394
  .category-count {
395
+ font-family: 'Rajdhani', sans-serif;
396
+ font-weight: 600;
397
  font-size: 0.9rem;
398
+ background: rgba(152, 251, 152, 0.15);
399
+ color: var(--neon-mint);
400
  padding: 0.25rem 0.75rem;
401
+ border: 1px solid rgba(152, 251, 152, 0.3);
402
+ border-radius: 50px;
403
+ text-shadow: 0 0 5px rgba(152, 251, 152, 0.3);
404
  }
405
+
406
  /* ===== BEST Category Special Header ===== */
407
  .category-header.best-header {
408
+ background: linear-gradient(135deg, rgba(255, 234, 167, 0.1), rgba(248, 180, 180, 0.1));
409
  padding: 1rem;
410
  border-radius: var(--radius);
411
+ border: 1px solid rgba(255, 234, 167, 0.3);
412
+ box-shadow:
413
+ 0 0 30px rgba(255, 234, 167, 0.15),
414
+ inset 0 0 20px rgba(255, 234, 167, 0.05);
415
  }
416
+
417
  .category-header.best-header .category-title {
418
+ color: var(--neon-yellow);
419
+ text-shadow:
420
+ 0 0 10px rgba(255, 234, 167, 0.5),
421
+ 0 0 20px rgba(255, 234, 167, 0.3);
422
  }
423
+
424
  .best-badge {
425
+ background: linear-gradient(135deg, rgba(255, 234, 167, 0.2), rgba(248, 180, 180, 0.2));
426
+ color: var(--neon-yellow);
427
+ font-family: 'Orbitron', sans-serif;
428
+ font-size: 0.85rem;
429
+ font-weight: 600;
430
  padding: 0.25rem 0.75rem;
431
+ border: 1px solid rgba(255, 234, 167, 0.4);
432
+ border-radius: 50px;
433
+ animation: bestGlow 2s infinite;
434
  }
435
+
436
  /* ===== Card Grid ===== */
437
  .card-grid {
438
  display: grid;
439
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
440
  gap: 1.5rem;
441
  }
442
+
443
  /* ===== Card Styles ===== */
444
  .card {
445
+ background: rgba(255, 182, 193, 0.08);
446
+ border: 1px solid rgba(255, 182, 193, 0.2);
447
  border-radius: var(--radius);
448
+ box-shadow:
449
+ 0 0 20px rgba(255, 182, 193, 0.1),
450
+ inset 0 0 20px rgba(255, 182, 193, 0.03);
451
  overflow: hidden;
452
+ transition: all 0.4s ease;
453
  cursor: pointer;
454
  text-decoration: none;
455
  color: inherit;
456
  display: block;
457
  }
458
+
459
  .card:hover {
460
+ transform: translateY(-8px);
461
+ box-shadow:
462
+ 0 0 40px rgba(255, 182, 193, 0.3),
463
+ 0 0 80px rgba(255, 182, 193, 0.15),
464
+ inset 0 0 30px rgba(255, 182, 193, 0.05);
465
+ border-color: rgba(255, 182, 193, 0.4);
466
  }
467
+
468
  /* ===== BEST Card Special Style ===== */
469
  .card.best-card {
470
+ border-color: rgba(255, 234, 167, 0.4);
471
+ box-shadow:
472
+ 0 0 25px rgba(255, 234, 167, 0.2),
473
+ inset 0 0 20px rgba(255, 234, 167, 0.05);
474
  }
475
+
476
  .card.best-card:hover {
477
+ box-shadow:
478
+ 0 0 50px rgba(255, 234, 167, 0.4),
479
+ 0 0 100px rgba(255, 234, 167, 0.2);
480
  }
481
+
482
  /* ===== Help Desk Card Special Style ===== */
483
  .card.helpdesk-card {
484
+ border-color: rgba(152, 251, 152, 0.4);
485
+ box-shadow:
486
+ 0 0 25px rgba(152, 251, 152, 0.15),
487
+ inset 0 0 20px rgba(152, 251, 152, 0.05);
488
  }
489
+
490
  .card.helpdesk-card:hover {
491
+ box-shadow:
492
+ 0 0 50px rgba(152, 251, 152, 0.3),
493
+ 0 0 100px rgba(152, 251, 152, 0.15);
494
  }
495
+
496
  .card-preview {
497
  height: 180px;
498
  display: flex;
 
502
  position: relative;
503
  overflow: hidden;
504
  }
505
+
506
+ /* Gradient backgrounds for cards */
507
  .card-preview.gradient-1 {
508
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
509
  }
510
  .card-preview.gradient-2 {
511
+ background: linear-gradient(135deg, rgba(240, 147, 251, 0.3) 0%, rgba(245, 87, 108, 0.3) 100%);
512
  }
513
  .card-preview.gradient-3 {
514
+ background: linear-gradient(135deg, rgba(79, 172, 254, 0.3) 0%, rgba(0, 242, 254, 0.3) 100%);
515
  }
516
  .card-preview.gradient-4 {
517
+ background: linear-gradient(135deg, rgba(67, 233, 123, 0.3) 0%, rgba(56, 249, 215, 0.3) 100%);
518
  }
519
  .card-preview.gradient-5 {
520
+ background: linear-gradient(135deg, rgba(250, 112, 154, 0.3) 0%, rgba(254, 225, 64, 0.3) 100%);
521
  }
522
  .card-preview.gradient-6 {
523
+ background: linear-gradient(135deg, rgba(168, 237, 234, 0.3) 0%, rgba(254, 214, 227, 0.3) 100%);
524
  }
525
  .card-preview.gradient-7 {
526
+ background: linear-gradient(135deg, rgba(255, 154, 158, 0.3) 0%, rgba(254, 207, 239, 0.3) 100%);
527
  }
528
  .card-preview.gradient-8 {
529
+ background: linear-gradient(135deg, rgba(255, 236, 210, 0.3) 0%, rgba(252, 182, 159, 0.3) 100%);
530
  }
531
  .card-preview.gradient-9 {
532
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(240, 147, 251, 0.3) 100%);
533
  }
534
  .card-preview.gradient-10 {
535
+ background: linear-gradient(135deg, rgba(17, 153, 142, 0.3) 0%, rgba(56, 239, 125, 0.3) 100%);
536
  }
537
  .card-preview.gradient-qwen {
538
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.4) 50%, rgba(168, 85, 247, 0.3) 100%);
539
  }
540
  .card-preview.gradient-qwen-lora {
541
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(239, 68, 68, 0.3) 50%, rgba(236, 72, 153, 0.3) 100%);
542
  }
543
  .card-preview.gradient-korea {
544
+ background: linear-gradient(135deg, rgba(0, 71, 160, 0.3) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(198, 12, 48, 0.3) 100%);
545
  }
546
  .card-preview.gradient-fortune {
547
+ background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(236, 72, 153, 0.3) 50%, rgba(245, 158, 11, 0.3) 100%);
548
  }
549
  .card-preview.gradient-nsfw {
550
+ background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(153, 27, 27, 0.3) 50%, rgba(127, 29, 29, 0.3) 100%);
551
  }
552
  .card-preview.gradient-nsfw-2 {
553
+ background: linear-gradient(135deg, rgba(190, 24, 93, 0.3) 0%, rgba(157, 23, 77, 0.3) 50%, rgba(131, 24, 67, 0.3) 100%);
554
  }
555
  .card-preview.gradient-nsfw-3 {
556
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(109, 40, 217, 0.3) 50%, rgba(91, 33, 182, 0.3) 100%);
557
  }
558
  .card-preview.gradient-nsfw-4 {
559
+ background: linear-gradient(135deg, rgba(234, 88, 12, 0.3) 0%, rgba(194, 65, 12, 0.3) 50%, rgba(154, 52, 18, 0.3) 100%);
560
  }
561
  .card-preview.gradient-nsfw-5 {
562
+ background: linear-gradient(135deg, rgba(8, 145, 178, 0.3) 0%, rgba(14, 116, 144, 0.3) 50%, rgba(21, 94, 117, 0.3) 100%);
563
  }
564
  .card-preview.gradient-nsfw-6 {
565
+ background: linear-gradient(135deg, rgba(219, 39, 119, 0.3) 0%, rgba(190, 24, 93, 0.3) 50%, rgba(157, 23, 77, 0.3) 100%);
566
  }
567
  .card-preview.gradient-novel {
568
+ background: linear-gradient(135deg, rgba(76, 29, 149, 0.3) 0%, rgba(124, 58, 237, 0.3) 30%, rgba(236, 72, 153, 0.3) 70%, rgba(244, 63, 94, 0.3) 100%);
569
  }
570
  .card-preview.gradient-exam {
571
+ background: linear-gradient(135deg, rgba(3, 105, 161, 0.3) 0%, rgba(2, 132, 199, 0.3) 30%, rgba(6, 182, 212, 0.3) 70%, rgba(34, 211, 238, 0.3) 100%);
572
  }
573
  .card-preview.gradient-best {
574
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(239, 68, 68, 0.3) 30%, rgba(236, 72, 153, 0.3) 70%, rgba(139, 92, 246, 0.3) 100%);
575
  }
576
  .card-preview.gradient-youtube {
577
+ background: linear-gradient(135deg, rgba(255, 0, 0, 0.3) 0%, rgba(204, 0, 0, 0.3) 30%, rgba(153, 0, 0, 0.3) 70%, rgba(31, 41, 55, 0.4) 100%);
578
  }
579
  .card-preview.gradient-minimax {
580
+ background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(59, 130, 246, 0.3) 50%, rgba(96, 165, 250, 0.3) 100%);
581
  }
582
  .card-preview.gradient-kimi {
583
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(168, 85, 247, 0.3) 50%, rgba(192, 132, 252, 0.3) 100%);
584
  }
585
  .card-preview.gradient-deepseek {
586
+ background: linear-gradient(135deg, rgba(5, 150, 105, 0.3) 0%, rgba(16, 185, 129, 0.3) 50%, rgba(52, 211, 153, 0.3) 100%);
587
  }
588
  .card-preview.gradient-glm {
589
+ background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(249, 115, 22, 0.3) 50%, rgba(251, 191, 36, 0.3) 100%);
590
  }
591
  .card-preview.gradient-motion {
592
+ background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(236, 72, 153, 0.3) 30%, rgba(245, 158, 11, 0.3) 70%, rgba(16, 185, 129, 0.3) 100%);
593
  }
594
  .card-preview.gradient-helpdesk {
595
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.3) 30%, rgba(4, 120, 87, 0.3) 70%, rgba(6, 95, 70, 0.3) 100%);
596
  }
597
  .card-preview.gradient-camera3d {
598
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 30%, rgba(236, 72, 153, 0.3) 70%, rgba(249, 115, 22, 0.3) 100%);
599
  }
600
  .card-preview.gradient-flipbook {
601
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(249, 115, 22, 0.3) 25%, rgba(250, 204, 21, 0.3) 50%, rgba(59, 130, 246, 0.3) 75%, rgba(139, 92, 246, 0.3) 100%);
602
  }
603
  .card-preview.gradient-hwp {
604
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 25%, rgba(236, 72, 153, 0.3) 50%, rgba(16, 185, 129, 0.3) 75%, rgba(250, 204, 21, 0.3) 100%);
605
  }
606
+
607
  .card-badge {
608
  position: absolute;
609
  top: 12px;
610
  right: 12px;
611
+ font-family: 'Orbitron', sans-serif;
612
+ font-size: 0.75rem;
613
+ font-weight: 600;
614
  padding: 0.35rem 0.75rem;
615
+ border-radius: 50px;
616
+ text-transform: uppercase;
617
+ letter-spacing: 1px;
618
  }
619
+
620
  .badge-new {
621
+ background: rgba(152, 251, 152, 0.2);
622
+ color: var(--neon-mint);
623
+ border: 1px solid rgba(152, 251, 152, 0.4);
624
+ box-shadow: 0 0 15px rgba(152, 251, 152, 0.3);
625
  }
626
  .badge-hot {
627
+ background: rgba(249, 115, 22, 0.2);
628
+ color: #fdba74;
629
+ border: 1px solid rgba(249, 115, 22, 0.4);
630
+ box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
631
  }
632
  .badge-beta {
633
+ background: rgba(139, 92, 246, 0.2);
634
+ color: var(--neon-lavender);
635
+ border: 1px solid rgba(139, 92, 246, 0.4);
636
+ box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
637
  }
638
  .badge-free {
639
+ background: rgba(16, 185, 129, 0.2);
640
+ color: #6ee7b7;
641
+ border: 1px solid rgba(16, 185, 129, 0.4);
642
+ box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
643
  }
644
  .badge-qwen {
645
+ background: rgba(99, 102, 241, 0.2);
646
+ color: #a5b4fc;
647
+ border: 1px solid rgba(99, 102, 241, 0.4);
648
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
649
  }
650
  .badge-korea {
651
+ background: rgba(0, 71, 160, 0.2);
652
+ color: #93c5fd;
653
+ border: 1px solid rgba(0, 71, 160, 0.4);
654
+ box-shadow: 0 0 15px rgba(0, 71, 160, 0.3);
655
  }
656
  .badge-fortune {
657
+ background: rgba(139, 92, 246, 0.2);
658
+ color: var(--neon-lavender);
659
+ border: 1px solid rgba(139, 92, 246, 0.4);
660
+ box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
661
  }
662
  .badge-nsfw {
663
+ background: rgba(220, 38, 38, 0.2);
664
+ color: #fca5a5;
665
+ border: 1px solid rgba(220, 38, 38, 0.4);
666
+ box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
667
  }
668
  .badge-novel {
669
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(236, 72, 153, 0.3));
670
+ color: #f0abfc;
671
+ border: 1px solid rgba(236, 72, 153, 0.4);
672
+ box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
673
  }
674
  .badge-exam {
675
+ background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(6, 182, 212, 0.3));
676
+ color: #67e8f9;
677
+ border: 1px solid rgba(6, 182, 212, 0.4);
678
+ box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
679
  }
680
  .badge-best {
681
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.3));
682
+ color: var(--neon-yellow);
683
+ border: 1px solid rgba(245, 158, 11, 0.4);
684
+ box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
685
+ animation: bestGlow 2s infinite;
686
  }
687
  .badge-youtube {
688
+ background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(204, 0, 0, 0.3));
689
+ color: #fca5a5;
690
+ border: 1px solid rgba(255, 0, 0, 0.4);
691
+ box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
692
  }
693
  .badge-llm {
694
+ background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(124, 58, 237, 0.3));
695
+ color: #c4b5fd;
696
+ border: 1px solid rgba(124, 58, 237, 0.4);
697
+ box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
698
  }
699
  .badge-minimax {
700
+ background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(59, 130, 246, 0.3));
701
+ color: #93c5fd;
702
+ border: 1px solid rgba(59, 130, 246, 0.4);
703
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
704
  }
705
  .badge-kimi {
706
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(168, 85, 247, 0.3));
707
+ color: #d8b4fe;
708
+ border: 1px solid rgba(168, 85, 247, 0.4);
709
+ box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
710
  }
711
  .badge-deepseek {
712
+ background: linear-gradient(135deg, rgba(5, 150, 105, 0.3), rgba(16, 185, 129, 0.3));
713
+ color: #6ee7b7;
714
+ border: 1px solid rgba(16, 185, 129, 0.4);
715
+ box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
716
  }
717
  .badge-glm {
718
+ background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(249, 115, 22, 0.3));
719
+ color: #fdba74;
720
+ border: 1px solid rgba(249, 115, 22, 0.4);
721
+ box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
722
  }
723
  .badge-motion {
724
+ background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
725
+ color: #f0abfc;
726
+ border: 1px solid rgba(236, 72, 153, 0.4);
727
+ box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
728
  }
729
  .badge-helpdesk {
730
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
731
+ color: #6ee7b7;
732
+ border: 1px solid rgba(16, 185, 129, 0.4);
733
+ box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
734
+ animation: helpdeskGlow 2s infinite;
735
  }
736
  .badge-camera3d {
737
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
738
+ color: #c4b5fd;
739
+ border: 1px solid rgba(139, 92, 246, 0.4);
740
+ box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
741
  }
742
  .badge-flipbook {
743
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(139, 92, 246, 0.3));
744
+ color: #fca5a5;
745
+ border: 1px solid rgba(239, 68, 68, 0.4);
746
+ box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
747
+ animation: flipbookGlow 2s infinite;
748
  }
749
  .badge-hwp {
750
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3));
751
+ color: #93c5fd;
752
+ border: 1px solid rgba(59, 130, 246, 0.4);
753
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
754
+ animation: hwpGlow 2s infinite;
755
  }
756
+
757
+ @keyframes helpdeskGlow {
758
+ 0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }
759
+ 50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 30px rgba(16, 185, 129, 0.3); }
760
  }
761
+ @keyframes flipbookGlow {
762
+ 0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
763
+ 50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 30px rgba(139, 92, 246, 0.3); }
764
  }
765
+ @keyframes hwpGlow {
766
+ 0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
767
+ 50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 30px rgba(16, 185, 129, 0.3); }
768
  }
769
+
770
  .card-content {
771
  padding: 1.25rem;
772
  }
773
+
774
  .card-title {
775
+ font-family: 'Orbitron', sans-serif;
776
+ font-size: 1.2rem;
777
+ font-weight: 600;
778
  letter-spacing: 1px;
779
  margin-bottom: 0.5rem;
780
+ color: var(--neon-pink);
781
+ text-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
782
  }
783
+
784
  .card-description {
785
  font-size: 0.95rem;
786
+ color: var(--text-secondary);
787
  line-height: 1.5;
788
  margin-bottom: 1rem;
789
  }
790
+
791
+ /* Card Highlights */
792
  .card-highlight {
793
+ background: rgba(255, 234, 167, 0.2);
794
+ color: var(--neon-yellow);
795
+ font-weight: 600;
796
+ padding: 2px 8px;
797
  border-radius: 4px;
798
+ text-shadow: 0 0 5px rgba(255, 234, 167, 0.3);
799
  }
800
  .card-highlight-qwen {
801
+ background: rgba(99, 102, 241, 0.2);
802
+ color: #a5b4fc;
803
+ font-weight: 600;
804
+ padding: 2px 8px;
805
  border-radius: 4px;
806
  }
807
  .card-highlight-korea {
808
+ background: rgba(0, 71, 160, 0.2);
809
+ color: #93c5fd;
810
+ font-weight: 600;
811
+ padding: 2px 8px;
812
  border-radius: 4px;
813
  }
814
  .card-highlight-fortune {
815
+ background: rgba(139, 92, 246, 0.2);
816
+ color: var(--neon-lavender);
817
+ font-weight: 600;
818
+ padding: 2px 8px;
819
  border-radius: 4px;
820
  }
821
  .card-highlight-nsfw {
822
+ background: rgba(220, 38, 38, 0.2);
823
+ color: #fca5a5;
824
+ font-weight: 600;
825
+ padding: 2px 8px;
826
  border-radius: 4px;
827
  }
828
  .card-highlight-novel {
829
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(236, 72, 153, 0.3));
830
+ color: #f0abfc;
831
+ font-weight: 600;
832
+ padding: 2px 8px;
833
  border-radius: 4px;
834
  }
835
  .card-highlight-exam {
836
+ background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(6, 182, 212, 0.3));
837
+ color: #67e8f9;
838
+ font-weight: 600;
839
+ padding: 2px 8px;
840
  border-radius: 4px;
841
  }
842
  .card-highlight-best {
843
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.3));
844
+ color: var(--neon-yellow);
845
+ font-weight: 600;
846
+ padding: 2px 8px;
847
  border-radius: 4px;
848
  }
849
  .card-highlight-youtube {
850
+ background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(204, 0, 0, 0.3));
851
+ color: #fca5a5;
852
+ font-weight: 600;
853
+ padding: 2px 8px;
854
  border-radius: 4px;
855
  }
856
  .card-highlight-llm {
857
+ background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(124, 58, 237, 0.3));
858
+ color: #c4b5fd;
859
+ font-weight: 600;
860
+ padding: 2px 8px;
861
  border-radius: 4px;
862
  }
863
  .card-highlight-minimax {
864
+ background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(59, 130, 246, 0.3));
865
+ color: #93c5fd;
866
+ font-weight: 600;
867
+ padding: 2px 8px;
868
  border-radius: 4px;
869
  }
870
  .card-highlight-kimi {
871
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(168, 85, 247, 0.3));
872
+ color: #d8b4fe;
873
+ font-weight: 600;
874
+ padding: 2px 8px;
875
  border-radius: 4px;
876
  }
877
  .card-highlight-deepseek {
878
+ background: linear-gradient(135deg, rgba(5, 150, 105, 0.3), rgba(16, 185, 129, 0.3));
879
+ color: #6ee7b7;
880
+ font-weight: 600;
881
+ padding: 2px 8px;
882
  border-radius: 4px;
883
  }
884
  .card-highlight-glm {
885
+ background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(249, 115, 22, 0.3));
886
+ color: #fdba74;
887
+ font-weight: 600;
888
+ padding: 2px 8px;
889
  border-radius: 4px;
890
  }
891
  .card-highlight-motion {
892
+ background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
893
+ color: #f0abfc;
894
+ font-weight: 600;
895
+ padding: 2px 8px;
896
  border-radius: 4px;
897
  }
898
  .card-highlight-helpdesk {
899
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
900
+ color: #6ee7b7;
901
+ font-weight: 600;
902
+ padding: 2px 8px;
903
  border-radius: 4px;
904
  }
905
  .card-highlight-camera3d {
906
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
907
+ color: #c4b5fd;
908
+ font-weight: 600;
909
+ padding: 2px 8px;
910
  border-radius: 4px;
911
  }
912
  .card-highlight-flipbook {
913
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(139, 92, 246, 0.3));
914
+ color: #fca5a5;
915
+ font-weight: 600;
916
+ padding: 2px 8px;
917
  border-radius: 4px;
918
  }
919
  .card-highlight-hwp {
920
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3));
921
+ color: #93c5fd;
922
+ font-weight: 600;
923
+ padding: 2px 8px;
924
  border-radius: 4px;
925
  }
926
+
927
  .card-meta {
928
  display: flex;
929
  justify-content: space-between;
930
  align-items: center;
931
  padding-top: 0.75rem;
932
+ border-top: 1px solid rgba(255, 182, 193, 0.15);
933
  }
934
+
935
  .card-tags {
936
  display: flex;
937
  gap: 0.5rem;
938
  flex-wrap: wrap;
939
  }
940
+
941
  .tag {
942
  font-size: 0.75rem;
943
+ font-weight: 600;
944
  padding: 0.25rem 0.5rem;
945
+ background: rgba(255, 182, 193, 0.1);
946
+ border: 1px solid rgba(255, 182, 193, 0.2);
947
  border-radius: 4px;
948
+ color: var(--neon-pink);
949
  }
950
  .tag-qwen {
951
  font-size: 0.75rem;
952
+ font-weight: 600;
953
  padding: 0.25rem 0.5rem;
954
+ background: rgba(99, 102, 241, 0.1);
955
+ border: 1px solid rgba(99, 102, 241, 0.3);
956
  border-radius: 4px;
957
+ color: #a5b4fc;
958
  }
959
  .tag-korea {
960
  font-size: 0.75rem;
961
+ font-weight: 600;
962
  padding: 0.25rem 0.5rem;
963
+ background: rgba(0, 71, 160, 0.1);
964
+ border: 1px solid rgba(0, 71, 160, 0.3);
965
  border-radius: 4px;
966
+ color: #93c5fd;
967
  }
968
  .tag-fortune {
969
  font-size: 0.75rem;
970
+ font-weight: 600;
971
  padding: 0.25rem 0.5rem;
972
+ background: rgba(139, 92, 246, 0.1);
973
+ border: 1px solid rgba(139, 92, 246, 0.3);
974
  border-radius: 4px;
975
+ color: #d8b4fe;
976
  }
977
  .tag-nsfw {
978
  font-size: 0.75rem;
979
+ font-weight: 600;
980
  padding: 0.25rem 0.5rem;
981
+ background: rgba(220, 38, 38, 0.1);
982
+ border: 1px solid rgba(220, 38, 38, 0.3);
983
  border-radius: 4px;
984
+ color: #fca5a5;
985
  }
986
  .tag-novel {
987
  font-size: 0.75rem;
988
+ font-weight: 600;
989
  padding: 0.25rem 0.5rem;
990
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1));
991
+ border: 1px solid rgba(124, 58, 237, 0.3);
992
  border-radius: 4px;
993
+ color: #f0abfc;
994
  }
995
  .tag-exam {
996
  font-size: 0.75rem;
997
+ font-weight: 600;
998
  padding: 0.25rem 0.5rem;
999
+ background: linear-gradient(135deg, rgba(2, 132, 199, 0.1), rgba(6, 182, 212, 0.1));
1000
+ border: 1px solid rgba(6, 182, 212, 0.3);
1001
  border-radius: 4px;
1002
+ color: #67e8f9;
1003
  }
1004
  .tag-best {
1005
  font-size: 0.75rem;
1006
+ font-weight: 600;
1007
  padding: 0.25rem 0.5rem;
1008
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
1009
+ border: 1px solid rgba(245, 158, 11, 0.3);
1010
  border-radius: 4px;
1011
+ color: var(--neon-yellow);
1012
  }
1013
  .tag-youtube {
1014
  font-size: 0.75rem;
1015
+ font-weight: 600;
1016
  padding: 0.25rem 0.5rem;
1017
+ background: rgba(255, 0, 0, 0.1);
1018
+ border: 1px solid rgba(255, 0, 0, 0.3);
1019
  border-radius: 4px;
1020
+ color: #fca5a5;
1021
  }
1022
  .tag-llm {
1023
  font-size: 0.75rem;
1024
+ font-weight: 600;
1025
  padding: 0.25rem 0.5rem;
1026
+ background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(124, 58, 237, 0.1));
1027
+ border: 1px solid rgba(30, 64, 175, 0.3);
1028
  border-radius: 4px;
1029
+ color: #c4b5fd;
1030
  }
1031
  .tag-minimax {
1032
  font-size: 0.75rem;
1033
+ font-weight: 600;
1034
  padding: 0.25rem 0.5rem;
1035
+ background: rgba(30, 58, 138, 0.1);
1036
+ border: 1px solid rgba(59, 130, 246, 0.3);
1037
  border-radius: 4px;
1038
+ color: #93c5fd;
1039
  }
1040
  .tag-kimi {
1041
  font-size: 0.75rem;
1042
+ font-weight: 600;
1043
  padding: 0.25rem 0.5rem;
1044
+ background: rgba(124, 58, 237, 0.1);
1045
+ border: 1px solid rgba(168, 85, 247, 0.3);
1046
  border-radius: 4px;
1047
+ color: #d8b4fe;
1048
  }
1049
  .tag-deepseek {
1050
  font-size: 0.75rem;
1051
+ font-weight: 600;
1052
  padding: 0.25rem 0.5rem;
1053
+ background: rgba(5, 150, 105, 0.1);
1054
+ border: 1px solid rgba(16, 185, 129, 0.3);
1055
  border-radius: 4px;
1056
+ color: #6ee7b7;
1057
  }
1058
  .tag-glm {
1059
  font-size: 0.75rem;
1060
+ font-weight: 600;
1061
  padding: 0.25rem 0.5rem;
1062
+ background: rgba(220, 38, 38, 0.1);
1063
+ border: 1px solid rgba(249, 115, 22, 0.3);
1064
  border-radius: 4px;
1065
+ color: #fdba74;
1066
  }
1067
  .tag-motion {
1068
  font-size: 0.75rem;
1069
+ font-weight: 600;
1070
  padding: 0.25rem 0.5rem;
1071
+ background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
1072
+ border: 1px solid rgba(139, 92, 246, 0.3);
1073
  border-radius: 4px;
1074
+ color: #f0abfc;
1075
  }
1076
  .tag-helpdesk {
1077
  font-size: 0.75rem;
1078
+ font-weight: 600;
1079
  padding: 0.25rem 0.5rem;
1080
+ background: rgba(16, 185, 129, 0.1);
1081
+ border: 1px solid rgba(16, 185, 129, 0.3);
1082
  border-radius: 4px;
1083
+ color: #6ee7b7;
1084
  }
1085
  .tag-camera3d {
1086
  font-size: 0.75rem;
1087
+ font-weight: 600;
1088
  padding: 0.25rem 0.5rem;
1089
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
1090
+ border: 1px solid rgba(59, 130, 246, 0.3);
1091
  border-radius: 4px;
1092
+ color: #c4b5fd;
1093
  }
1094
  .tag-flipbook {
1095
  font-size: 0.75rem;
1096
+ font-weight: 600;
1097
  padding: 0.25rem 0.5rem;
1098
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(139, 92, 246, 0.1));
1099
+ border: 1px solid rgba(239, 68, 68, 0.3);
1100
  border-radius: 4px;
1101
+ color: #fca5a5;
1102
  }
1103
  .tag-hwp {
1104
  font-size: 0.75rem;
1105
+ font-weight: 600;
1106
  padding: 0.25rem 0.5rem;
1107
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
1108
+ border: 1px solid rgba(59, 130, 246, 0.3);
1109
  border-radius: 4px;
1110
+ color: #93c5fd;
1111
  }
1112
+
1113
  .card-arrow {
1114
  font-size: 1.5rem;
1115
+ color: var(--neon-pink);
1116
+ transition: all 0.3s ease;
1117
+ text-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
1118
  }
1119
+
1120
  .card:hover .card-arrow {
1121
+ transform: translateX(8px);
1122
+ text-shadow: 0 0 15px rgba(255, 182, 193, 0.5);
1123
  }
1124
+
1125
  /* ===== Footer ===== */
1126
  .footer {
1127
  text-align: center;
1128
  padding: 3rem 1rem;
1129
  margin-top: 2rem;
1130
+ border-top: 1px solid rgba(255, 182, 193, 0.2);
1131
  }
1132
+
1133
  .footer-logo {
1134
+ font-family: 'Orbitron', sans-serif;
1135
  font-size: 2rem;
1136
+ font-weight: 700;
1137
  letter-spacing: 2px;
1138
+ color: var(--neon-pink);
1139
+ text-shadow:
1140
+ 0 0 10px rgba(255, 182, 193, 0.5),
1141
+ 0 0 20px rgba(255, 182, 193, 0.3);
1142
  margin-bottom: 1rem;
1143
  }
1144
+
1145
  .footer-links {
1146
  display: flex;
1147
  justify-content: center;
 
1149
  margin-bottom: 1rem;
1150
  flex-wrap: wrap;
1151
  }
1152
+
1153
  .footer-link {
1154
+ font-weight: 600;
1155
+ color: var(--neon-lavender);
1156
  text-decoration: none;
1157
+ transition: all 0.3s ease;
1158
+ text-shadow: 0 0 5px rgba(221, 160, 221, 0.3);
1159
  }
1160
+
1161
  .footer-link:hover {
1162
+ color: var(--neon-pink);
1163
+ text-shadow: 0 0 15px rgba(255, 182, 193, 0.5);
1164
  }
1165
+
1166
  .footer-copy {
1167
  font-size: 0.9rem;
1168
+ color: var(--text-secondary);
1169
  }
1170
+
1171
  /* ===== Floating Action Button ===== */
1172
  .fab {
1173
  position: fixed;
 
1175
  right: 2rem;
1176
  width: 60px;
1177
  height: 60px;
1178
+ background: rgba(255, 182, 193, 0.15);
1179
+ border: 1px solid rgba(255, 182, 193, 0.4);
1180
  border-radius: 50%;
1181
+ box-shadow:
1182
+ 0 0 20px rgba(255, 182, 193, 0.3),
1183
+ inset 0 0 15px rgba(255, 182, 193, 0.1);
1184
  display: flex;
1185
  align-items: center;
1186
  justify-content: center;
1187
  font-size: 1.5rem;
1188
  cursor: pointer;
1189
+ transition: all 0.4s ease;
1190
  z-index: 1000;
1191
  }
1192
+
1193
  .fab:hover {
1194
+ transform: scale(1.1);
1195
+ box-shadow:
1196
+ 0 0 40px rgba(255, 182, 193, 0.5),
1197
+ 0 0 60px rgba(255, 182, 193, 0.3),
1198
+ inset 0 0 20px rgba(255, 182, 193, 0.15);
1199
  }
1200
+
1201
  /* ===== Responsive ===== */
1202
  @media (max-width: 768px) {
1203
  .logo {
1204
+ font-size: 2.2rem;
 
 
 
1205
  }
1206
  .tagline {
1207
  font-size: 1.1rem;
 
1218
  font-size: 0.9rem;
1219
  }
1220
  .category-title {
1221
+ font-size: 1.3rem;
1222
  }
1223
  .card-grid {
1224
  grid-template-columns: 1fr;
 
1243
  gap: 0.5rem;
1244
  }
1245
  .enterprise-banner-text {
1246
+ font-size: 1rem;
1247
  }
1248
  .enterprise-banner-link {
1249
+ font-size: 1.1rem;
1250
  }
1251
  }
1252
+
1253
  /* ===== Animation ===== */
1254
  @keyframes fadeInUp {
1255
  from {
 
1261
  transform: translateY(0);
1262
  }
1263
  }
1264
+
1265
  .card {
1266
  animation: fadeInUp 0.5s ease forwards;
1267
  }
1268
+
1269
  .card:nth-child(1) { animation-delay: 0.1s; }
1270
  .card:nth-child(2) { animation-delay: 0.2s; }
1271
  .card:nth-child(3) { animation-delay: 0.3s; }
 
1275
  .card:nth-child(7) { animation-delay: 0.7s; }
1276
  .card:nth-child(8) { animation-delay: 0.8s; }
1277
  .card:nth-child(9) { animation-delay: 0.9s; }
1278
+
1279
  /* ===== Search Bar ===== */
1280
  .search-container {
1281
  max-width: 600px;
1282
  margin: 0 auto 2rem;
1283
  position: relative;
1284
  }
1285
+
1286
  .search-input {
1287
  width: 100%;
1288
  padding: 1rem 1.5rem 1rem 3rem;
1289
+ font-family: 'Rajdhani', sans-serif;
1290
  font-size: 1.1rem;
1291
+ font-weight: 600;
1292
+ border: 1px solid rgba(221, 160, 221, 0.3);
1293
+ border-radius: 50px;
1294
+ background: rgba(30, 30, 50, 0.8);
1295
+ color: var(--text-primary);
 
1296
  outline: none;
1297
+ transition: all 0.4s ease;
1298
+ box-shadow: 0 0 15px rgba(221, 160, 221, 0.1);
1299
  }
1300
+
1301
  .search-input:focus {
1302
+ border-color: var(--neon-lavender);
1303
+ box-shadow:
1304
+ 0 0 25px rgba(221, 160, 221, 0.3),
1305
+ 0 0 50px rgba(221, 160, 221, 0.15);
1306
  }
1307
+
1308
  .search-input::placeholder {
1309
+ color: var(--text-secondary);
1310
  font-weight: 400;
1311
  }
1312
+
1313
  .search-icon {
1314
  position: absolute;
1315
  left: 1rem;
1316
  top: 50%;
1317
  transform: translateY(-50%);
1318
  font-size: 1.2rem;
1319
+ filter: drop-shadow(0 0 5px rgba(221, 160, 221, 0.3));
1320
+ }
1321
+
1322
+ /* Enterprise Contact Banner */
1323
+ .contact-banner {
1324
+ background: rgba(255, 234, 167, 0.1);
1325
+ border: 1px solid rgba(255, 234, 167, 0.3);
1326
+ border-radius: var(--radius-sm);
1327
+ padding: 12px 20px;
1328
+ text-align: center;
1329
+ box-shadow: 0 0 20px rgba(255, 234, 167, 0.1);
1330
+ margin: 20px auto;
1331
+ max-width: 1200px;
1332
+ }
1333
+
1334
+ .contact-banner span {
1335
+ font-family: 'Orbitron', sans-serif;
1336
+ color: var(--neon-yellow);
1337
+ font-size: 1.1rem;
1338
+ text-shadow: 0 0 10px rgba(255, 234, 167, 0.3);
1339
+ }
1340
+
1341
+ .contact-banner a {
1342
+ color: var(--neon-aqua);
1343
+ font-weight: 700;
1344
+ text-decoration: none;
1345
+ text-shadow: 0 0 10px rgba(176, 224, 230, 0.3);
1346
+ transition: all 0.3s ease;
1347
+ }
1348
+
1349
+ .contact-banner a:hover {
1350
+ text-shadow: 0 0 15px rgba(176, 224, 230, 0.6);
1351
  }
1352
  </style>
1353
  </head>
1354
  <body>
1355
  <!-- Header -->
1356
  <header class="header">
1357
+ <h1 class="logo">✨ MAYAfree.ai ✨</h1>
1358
  <div class="banner-container">
1359
+ <img src="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/banner.png" alt="MAYAfree.ai Banner" class="banner-image">
1360
  </div>
1361
  <!-- Enterprise Banner -->
1362
  <div class="enterprise-banner">
 
1364
  <a href="https://www.ginigen.ai" target="_blank" class="enterprise-banner-link">www.ginigen.ai</a>
1365
  </div>
1366
  <!-- Enterprise Contact Banner -->
1367
+ <div class="contact-banner">
1368
+ <span>πŸ’Ό Enterprise & CUSTOM(White Label) Β· 문의</span>
1369
+ <span style="color:var(--text-secondary);font-weight:700"> β†’ </span>
1370
+ <a href="mailto:arxivgpt@gmail.com">πŸ“§ arxivgpt@gmail.com</a>
1371
  </div>
1372
  </header>
1373
 
 
 
1374
  <!-- Stats Bar -->
1375
  <div class="stats-bar">
1376
  <div class="stat-item">
 
1390
  <div class="stat-label">Creations / Month</div>
1391
  </div>
1392
  </div>
1393
+
1394
  <!-- Search Bar -->
1395
  <div class="search-container">
1396
  <span class="search-icon">πŸ”</span>
1397
  <input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, youtube, trend, nsfw, novel, exam, best, llm, motion, camera, 3d, flipbook, hwp)" id="searchInput">
1398
  </div>
1399
+
1400
+ <!-- Navigation Tabs -->
1401
  <nav class="nav-tabs">
1402
  <button class="nav-tab active" data-category="all">🌟 All</button>
1403
  <button class="nav-tab best-tab" data-category="best">πŸ† BEST</button>
 
1410
  <button class="nav-tab" data-category="nsfw">πŸ”ž NSFW</button>
1411
  <button class="nav-tab" data-category="korea">πŸ‡°πŸ‡· Korea</button>
1412
  </nav>
1413
+
1414
  <!-- Main Container -->
1415
  <main class="container">
1416
+ <!-- BEST PICKS Section -->
1417
  <section class="category-section" data-section="best">
1418
  <div class="category-header best-header">
1419
  <span class="category-icon">πŸ†</span>
 
1446
  </div>
1447
  </div>
1448
  </a>
1449
+ <!-- BEST 2: HWP AI μ–΄μ‹œμŠ€ν„΄νŠΈ -->
1450
  <a href="https://hwp.humangen.ai" target="_blank" class="card best-card" data-tags="best,korea,hwp,hwpx,pdf,document,ai,assistant,ν•œκ΅­μ–΄,λ¬Έμ„œ,λ³€ν™˜,markdown,read,see,speak,think,memory,llm,groq">
1451
  <div class="card-preview gradient-hwp">
1452
  <span>πŸ“„</span>
 
1520
  </a>
1521
  </div>
1522
  </section>
1523
+
1524
+ <!-- Text & Language Section -->
1525
  <section class="category-section" data-section="text">
1526
  <div class="category-header">
1527
  <span class="category-icon">πŸ“</span>
 
1529
  <span class="category-count">7 models</span>
1530
  </div>
1531
  <div class="card-grid">
1532
+ <!-- HELP DESK & CHATBOT -->
1533
  <a href="https://chat.humangen.ai" target="_blank" class="card helpdesk-card" data-tags="text,helpdesk,chatbot,support,faq,ai,assistant,help,question,answer,service,guide,english,korean,ν•œκΈ€">
1534
  <div class="card-preview gradient-helpdesk">
1535
  <span>πŸ€–</span>
 
1539
  <h3 class="card-title">πŸ€– Help Desk & Chatbot</h3>
1540
  <p class="card-description">
1541
  <span class="card-highlight-helpdesk">AI-Powered Service Guide</span> -
1542
+ Ask anything about MAYAfree.ai's <strong>39 AI services</strong>!
1543
  Get instant recommendations, usage guides, and support.
1544
  🌐 <strong>English / ν•œκ΅­μ–΄</strong> bilingual support.
1545
  </p>
 
1695
  </div>
1696
  </section>
1697
 
 
 
 
 
 
1698
  <!-- Image Generation Section -->
1699
  <section class="category-section" data-section="image">
1700
  <div class="category-header">
 
1703
  <span class="category-count">10 models</span>
1704
  </div>
1705
  <div class="card-grid">
1706
+ <!-- 3D Camera Angle Editor Card -->
1707
  <a href="https://3dangle.humangen.ai" target="_blank" class="card" data-tags="image,camera,angle,3d,qwen,lora,lightning,edit,azimuth,elevation,distance,multiangle,threejs,interactive">
1708
  <div class="card-preview gradient-camera3d">
1709
  <span>🎬</span>
 
1727
  </div>
1728
  </div>
1729
  </a>
1730
+ <!-- Z-Image LoRA Generator Card -->
1731
+ <a href="https://zlora.humangen.ai" target="_blank" class="card" data-tags="image,lora,z-image,turbo,style,generator,custom,30+styles,jimin,portrait,ghibli,pixel,anime">
1732
+ <div class="card-preview gradient-qwen-lora">
1733
+ <span>🎨</span>
1734
+ <span class="card-badge badge-new">✨ NEW</span>
1735
+ </div>
1736
+ <div class="card-content">
1737
+ <h3 class="card-title">🎨 Z-Image LoRA Generator</h3>
1738
+ <p class="card-description">
1739
+ <span class="card-highlight">Z-Image Turbo + 30+ LoRAs!</span> -
1740
+ Generate stunning images with various styles! Ghibli, Pixel Art, Anime, Portrait & more.
1741
+ ⚑ Turbo speed, 🎭 Custom LoRA support, πŸ“± SNS aspect presets.
1742
+ </p>
1743
+ <div class="card-meta">
1744
+ <div class="card-tags">
1745
+ <span class="tag">Z-Image</span>
1746
+ <span class="tag">30+ LoRA</span>
1747
+ <span class="tag">Turbo</span>
1748
+ </div>
1749
+ <span class="card-arrow">β†’</span>
1750
+ </div>
1751
+ </div>
1752
+ </a>
 
 
1753
  <!-- Qwen Image 2512 Card -->
1754
  <a href="https://q2512.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lightning,turbo,fast,alibaba,32b">
1755
  <div class="card-preview gradient-qwen">
 
1928
  </a>
1929
  </div>
1930
  </section>
1931
+
1932
  <!-- Video Generation Section -->
1933
  <section class="category-section" data-section="video">
1934
  <div class="category-header">
 
2050
  </a>
2051
  </div>
2052
  </section>
2053
+
2054
  <!-- Audio Generation Section -->
2055
  <section class="category-section" data-section="audio">
2056
  <div class="category-header">
 
2105
  </a>
2106
  </div>
2107
  </section>
2108
+
2109
  <!-- 3D & Modeling Section -->
2110
  <section class="category-section" data-section="3d">
2111
  <div class="category-header">
 
2114
  <span class="category-count">2 models</span>
2115
  </div>
2116
  <div class="card-grid">
2117
+ <!-- HY-Motion Generator Card -->
2118
  <a href="https://motion.humangen.ai" target="_blank" class="card" data-tags="3d,motion,human,animation,text-to-motion,fbx,dance,walk,jump,pose,body,movement,ai,generator">
2119
  <div class="card-preview gradient-motion">
2120
  <span>πŸ•Ί</span>
 
2161
  </a>
2162
  </div>
2163
  </section>
2164
+
2165
  <!-- Tools Section -->
2166
  <section class="category-section" data-section="tools">
2167
  <div class="category-header">
 
2283
  </a>
2284
  </div>
2285
  </section>
2286
+
2287
  <!-- NSFW Section -->
2288
  <section class="category-section" data-section="nsfw">
2289
  <div class="category-header">
 
2456
  </a>
2457
  </div>
2458
  </section>
2459
+
2460
+ <!-- Korea Section -->
2461
  <section class="category-section" data-section="korea">
2462
  <div class="category-header">
2463
  <span class="category-icon">πŸ‡°πŸ‡·</span>
 
2465
  <span class="category-count">4 models</span>
2466
  </div>
2467
  <div class="card-grid">
2468
+ <!-- HWP AI μ–΄μ‹œμŠ€ν„΄νŠΈ -->
2469
  <a href="https://hwp.humangen.ai" target="_blank" class="card" data-tags="korea,hwp,hwpx,pdf,document,ai,assistant,ν•œκ΅­μ–΄,λ¬Έμ„œ,λ³€ν™˜,markdown,read,see,speak,think,memory,llm,groq,fireworks">
2470
  <div class="card-preview gradient-hwp">
2471
  <span>πŸ“„</span>
 
2562
  </div>
2563
  </section>
2564
  </main>
2565
+
2566
  <!-- Footer -->
2567
  <footer class="footer">
2568
+ <div class="footer-logo">✨ MAYAfree.ai ✨</div>
2569
  <div class="footer-links">
2570
  <a href="#" class="footer-link">About</a>
2571
  <a href="#" class="footer-link">Blog</a>
 
2574
  <a href="#" class="footer-link">Twitter</a>
2575
  <a href="#" class="footer-link">GitHub</a>
2576
  </div>
2577
+ <p class="footer-copy">Β© 2025 MAYAfree.ai - Powered by www.ginigen.ai/en πŸ€—</p>
2578
  </footer>
2579
+
2580
  <!-- Floating Action Button -->
2581
  <div class="fab" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
2582
  ⬆️
2583
  </div>
2584
+
2585
  <!-- JavaScript -->
2586
  <script>
2587
  // Category Navigation
2588
  const navTabs = document.querySelectorAll('.nav-tab');
2589
  const sections = document.querySelectorAll('.category-section');
2590
  const cards = document.querySelectorAll('.card');
2591
+
2592
  navTabs.forEach(tab => {
2593
  tab.addEventListener('click', () => {
2594
  const category = tab.dataset.category;
2595
+
2596
  // Update active tab
2597
  navTabs.forEach(t => t.classList.remove('active'));
2598
  tab.classList.add('active');
2599
+
2600
  // Filter sections
2601
  if (category === 'all') {
2602
  sections.forEach(s => s.style.display = 'block');
 
2611
  }
2612
  });
2613
  });
2614
+
2615
  // Search Functionality
2616
  const searchInput = document.getElementById('searchInput');
2617
  searchInput.addEventListener('input', (e) => {
2618
  const query = e.target.value.toLowerCase();
2619
+
2620
  cards.forEach(card => {
2621
  const title = card.querySelector('.card-title').textContent.toLowerCase();
2622
  const description = card.querySelector('.card-description').textContent.toLowerCase();
2623
  const tags = card.dataset.tags?.toLowerCase() || '';
2624
+
2625
  if (title.includes(query) || description.includes(query) || tags.includes(query)) {
2626
  card.style.display = 'block';
2627
  } else {
2628
  card.style.display = 'none';
2629
  }
2630
  });
2631
+
2632
  // Show all sections when searching
2633
  if (query) {
2634
  sections.forEach(s => s.style.display = 'block');