FarelDeveloper commited on
Commit
c858efa
·
verified ·
1 Parent(s): 0c92069

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1039 -19
index.html CHANGED
@@ -1,19 +1,1039 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="id">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>AI-FAREL - Solusi AI Canggih untuk Masa Depan</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ :root {
12
+ --primary-color: #667eea;
13
+ --secondary-color: #764ba2;
14
+ --accent-color: #f093fb;
15
+ --dark-bg: #0f0f1e;
16
+ --light-bg: #1a1a2e;
17
+ --text-primary: #ffffff;
18
+ --text-secondary: #a0a0b8;
19
+ --success-color: #4ade80;
20
+ --warning-color: #fbbf24;
21
+ --error-color: #f87171;
22
+ --gradient-1: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
23
+ --gradient-2: linear-gradient(135deg, var(--accent-color), var(--primary-color));
24
+ --shadow-glow: 0 0 30px rgba(102, 126, 234, 0.5);
25
+ --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.3);
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
36
+ background: var(--dark-bg);
37
+ color: var(--text-primary);
38
+ overflow-x: hidden;
39
+ line-height: 1.6;
40
+ }
41
+
42
+ /* Animated Background */
43
+ .bg-animation {
44
+ position: fixed;
45
+ width: 100%;
46
+ height: 100%;
47
+ top: 0;
48
+ left: 0;
49
+ z-index: -1;
50
+ background: linear-gradient(45deg, #0f0f1e, #1a1a2e, #16213e);
51
+ background-size: 400% 400%;
52
+ animation: gradientShift 15s ease infinite;
53
+ }
54
+
55
+ @keyframes gradientShift {
56
+ 0% {
57
+ background-position: 0% 50%;
58
+ }
59
+
60
+ 50% {
61
+ background-position: 100% 50%;
62
+ }
63
+
64
+ 100% {
65
+ background-position: 0% 50%;
66
+ }
67
+ }
68
+
69
+ .floating-shapes {
70
+ position: fixed;
71
+ width: 100%;
72
+ height: 100%;
73
+ overflow: hidden;
74
+ z-index: -1;
75
+ }
76
+
77
+ .shape {
78
+ position: absolute;
79
+ background: var(--gradient-1);
80
+ opacity: 0.1;
81
+ animation: float 20s infinite;
82
+ }
83
+
84
+ .shape:nth-child(1) {
85
+ width: 80px;
86
+ height: 80px;
87
+ left: 10%;
88
+ animation-delay: 0s;
89
+ border-radius: 50%;
90
+ }
91
+
92
+ .shape:nth-child(2) {
93
+ width: 120px;
94
+ height: 120px;
95
+ right: 20%;
96
+ animation-delay: 2s;
97
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
98
+ }
99
+
100
+ .shape:nth-child(3) {
101
+ width: 100px;
102
+ height: 100px;
103
+ left: 70%;
104
+ animation-delay: 4s;
105
+ border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
106
+ }
107
+
108
+ @keyframes float {
109
+
110
+ 0%,
111
+ 100% {
112
+ transform: translateY(0) rotate(0deg);
113
+ }
114
+
115
+ 33% {
116
+ transform: translateY(-100px) rotate(120deg);
117
+ }
118
+
119
+ 66% {
120
+ transform: translateY(100px) rotate(240deg);
121
+ }
122
+ }
123
+
124
+ /* Header */
125
+ header {
126
+ background: rgba(26, 26, 46, 0.95);
127
+ backdrop-filter: blur(10px);
128
+ padding: 1rem 0;
129
+ position: fixed;
130
+ width: 100%;
131
+ top: 0;
132
+ z-index: 1000;
133
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
134
+ }
135
+
136
+ nav {
137
+ max-width: 1200px;
138
+ margin: 0 auto;
139
+ padding: 0 2rem;
140
+ display: flex;
141
+ justify-content: space-between;
142
+ align-items: center;
143
+ }
144
+
145
+ .logo {
146
+ font-size: 1.8rem;
147
+ font-weight: bold;
148
+ background: var(--gradient-1);
149
+ -webkit-background-clip: text;
150
+ -webkit-text-fill-color: transparent;
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 0.5rem;
154
+ }
155
+
156
+ .logo i {
157
+ -webkit-text-fill-color: var(--primary-color);
158
+ }
159
+
160
+ .nav-links {
161
+ display: flex;
162
+ gap: 2rem;
163
+ list-style: none;
164
+ }
165
+
166
+ .nav-links a {
167
+ color: var(--text-secondary);
168
+ text-decoration: none;
169
+ transition: all 0.3s ease;
170
+ position: relative;
171
+ }
172
+
173
+ .nav-links a:hover {
174
+ color: var(--primary-color);
175
+ }
176
+
177
+ .nav-links a::after {
178
+ content: '';
179
+ position: absolute;
180
+ bottom: -5px;
181
+ left: 0;
182
+ width: 0;
183
+ height: 2px;
184
+ background: var(--gradient-1);
185
+ transition: width 0.3s ease;
186
+ }
187
+
188
+ .nav-links a:hover::after {
189
+ width: 100%;
190
+ }
191
+
192
+ /* Main Content */
193
+ main {
194
+ padding-top: 80px;
195
+ min-height: 100vh;
196
+ }
197
+
198
+ /* Hero Section */
199
+ .hero {
200
+ padding: 4rem 2rem;
201
+ text-align: center;
202
+ max-width: 1200px;
203
+ margin: 0 auto;
204
+ }
205
+
206
+ .hero h1 {
207
+ font-size: clamp(2.5rem, 5vw, 4rem);
208
+ margin-bottom: 1rem;
209
+ background: var(--gradient-2);
210
+ -webkit-background-clip: text;
211
+ -webkit-text-fill-color: transparent;
212
+ animation: glow 2s ease-in-out infinite alternate;
213
+ }
214
+
215
+ @keyframes glow {
216
+ from {
217
+ filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5));
218
+ }
219
+
220
+ to {
221
+ filter: drop-shadow(0 0 30px rgba(240, 147, 251, 0.8));
222
+ }
223
+ }
224
+
225
+ .hero p {
226
+ font-size: 1.2rem;
227
+ color: var(--text-secondary);
228
+ margin-bottom: 2rem;
229
+ }
230
+
231
+ .cta-buttons {
232
+ display: flex;
233
+ gap: 1rem;
234
+ justify-content: center;
235
+ flex-wrap: wrap;
236
+ }
237
+
238
+ .btn {
239
+ padding: 0.8rem 2rem;
240
+ border-radius: 50px;
241
+ border: none;
242
+ font-size: 1rem;
243
+ cursor: pointer;
244
+ transition: all 0.3s ease;
245
+ text-decoration: none;
246
+ display: inline-flex;
247
+ align-items: center;
248
+ gap: 0.5rem;
249
+ position: relative;
250
+ overflow: hidden;
251
+ }
252
+
253
+ .btn-primary {
254
+ background: var(--gradient-1);
255
+ color: white;
256
+ box-shadow: var(--shadow-glow);
257
+ }
258
+
259
+ .btn-secondary {
260
+ background: transparent;
261
+ color: var(--primary-color);
262
+ border: 2px solid var(--primary-color);
263
+ }
264
+
265
+ .btn:hover {
266
+ transform: translateY(-2px);
267
+ box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
268
+ }
269
+
270
+ .btn::before {
271
+ content: '';
272
+ position: absolute;
273
+ top: 50%;
274
+ left: 50%;
275
+ width: 0;
276
+ height: 0;
277
+ border-radius: 50%;
278
+ background: rgba(255, 255, 255, 0.3);
279
+ transform: translate(-50%, -50%);
280
+ transition: width 0.6s, height 0.6s;
281
+ }
282
+
283
+ .btn:hover::before {
284
+ width: 300px;
285
+ height: 300px;
286
+ }
287
+
288
+ /* Features Section */
289
+ .features {
290
+ padding: 4rem 2rem;
291
+ max-width: 1200px;
292
+ margin: 0 auto;
293
+ }
294
+
295
+ .section-title {
296
+ text-align: center;
297
+ font-size: 2.5rem;
298
+ margin-bottom: 3rem;
299
+ background: var(--gradient-1);
300
+ -webkit-background-clip: text;
301
+ -webkit-text-fill-color: transparent;
302
+ }
303
+
304
+ .feature-grid {
305
+ display: grid;
306
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
307
+ gap: 2rem;
308
+ margin-bottom: 4rem;
309
+ }
310
+
311
+ .feature-card {
312
+ background: rgba(26, 26, 46, 0.8);
313
+ padding: 2rem;
314
+ border-radius: 20px;
315
+ border: 1px solid rgba(102, 126, 234, 0.3);
316
+ transition: all 0.3s ease;
317
+ position: relative;
318
+ overflow: hidden;
319
+ }
320
+
321
+ .feature-card::before {
322
+ content: '';
323
+ position: absolute;
324
+ top: 0;
325
+ left: 0;
326
+ width: 100%;
327
+ height: 100%;
328
+ background: var(--gradient-1);
329
+ opacity: 0;
330
+ transition: opacity 0.3s ease;
331
+ }
332
+
333
+ .feature-card:hover {
334
+ transform: translateY(-10px);
335
+ box-shadow: var(--shadow-card);
336
+ border-color: var(--primary-color);
337
+ }
338
+
339
+ .feature-card:hover::before {
340
+ opacity: 0.1;
341
+ }
342
+
343
+ .feature-icon {
344
+ font-size: 3rem;
345
+ color: var(--primary-color);
346
+ margin-bottom: 1rem;
347
+ }
348
+
349
+ .feature-card h3 {
350
+ font-size: 1.5rem;
351
+ margin-bottom: 1rem;
352
+ color: var(--text-primary);
353
+ }
354
+
355
+ .feature-card p {
356
+ color: var(--text-secondary);
357
+ position: relative;
358
+ z-index: 1;
359
+ }
360
+
361
+ /* API Section */
362
+ .api-section {
363
+ padding: 4rem 2rem;
364
+ max-width: 1200px;
365
+ margin: 0 auto;
366
+ }
367
+
368
+ .api-container {
369
+ background: rgba(26, 26, 46, 0.8);
370
+ border-radius: 20px;
371
+ padding: 2rem;
372
+ border: 1px solid rgba(102, 126, 234, 0.3);
373
+ }
374
+
375
+ .api-controls {
376
+ display: flex;
377
+ gap: 1rem;
378
+ margin-bottom: 2rem;
379
+ flex-wrap: wrap;
380
+ }
381
+
382
+ .api-input {
383
+ flex: 1;
384
+ min-width: 200px;
385
+ padding: 0.8rem;
386
+ border-radius: 10px;
387
+ border: 1px solid rgba(102, 126, 234, 0.5);
388
+ background: rgba(15, 15, 30, 0.8);
389
+ color: var(--text-primary);
390
+ font-size: 1rem;
391
+ transition: all 0.3s ease;
392
+ }
393
+
394
+ .api-input:focus {
395
+ outline: none;
396
+ border-color: var(--primary-color);
397
+ box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
398
+ }
399
+
400
+ .api-results {
401
+ min-height: 300px;
402
+ max-height: 500px;
403
+ overflow-y: auto;
404
+ padding: 1rem;
405
+ background: rgba(15, 15, 30, 0.8);
406
+ border-radius: 10px;
407
+ border: 1px solid rgba(102, 126, 234, 0.2);
408
+ }
409
+
410
+ .loading {
411
+ display: none;
412
+ text-align: center;
413
+ padding: 2rem;
414
+ }
415
+
416
+ .loading.active {
417
+ display: block;
418
+ }
419
+
420
+ .spinner {
421
+ border: 3px solid rgba(102, 126, 234, 0.2);
422
+ border-top: 3px solid var(--primary-color);
423
+ border-radius: 50%;
424
+ width: 40px;
425
+ height: 40px;
426
+ animation: spin 1s linear infinite;
427
+ margin: 0 auto;
428
+ }
429
+
430
+ @keyframes spin {
431
+ 0% {
432
+ transform: rotate(0deg);
433
+ }
434
+
435
+ 100% {
436
+ transform: rotate(360deg);
437
+ }
438
+ }
439
+
440
+ .result-item {
441
+ background: rgba(26, 26, 46, 0.6);
442
+ padding: 1rem;
443
+ border-radius: 10px;
444
+ margin-bottom: 1rem;
445
+ border-left: 3px solid var(--primary-color);
446
+ animation: slideIn 0.5s ease;
447
+ }
448
+
449
+ @keyframes slideIn {
450
+ from {
451
+ opacity: 0;
452
+ transform: translateX(-20px);
453
+ }
454
+
455
+ to {
456
+ opacity: 1;
457
+ transform: translateX(0);
458
+ }
459
+ }
460
+
461
+ /* Chat Section */
462
+ .chat-section {
463
+ padding: 4rem 2rem;
464
+ max-width: 800px;
465
+ margin: 0 auto;
466
+ }
467
+
468
+ .chat-container {
469
+ background: rgba(26, 26, 46, 0.8);
470
+ border-radius: 20px;
471
+ padding: 2rem;
472
+ border: 1px solid rgba(102, 126, 234, 0.3);
473
+ min-height: 500px;
474
+ }
475
+
476
+ .chat-messages {
477
+ height: 400px;
478
+ overflow-y: auto;
479
+ padding: 1rem;
480
+ background: rgba(15, 15, 30, 0.8);
481
+ border-radius: 10px;
482
+ margin-bottom: 1rem;
483
+ }
484
+
485
+ .message {
486
+ margin-bottom: 1rem;
487
+ animation: fadeIn 0.5s ease;
488
+ }
489
+
490
+ @keyframes fadeIn {
491
+ from {
492
+ opacity: 0;
493
+ }
494
+
495
+ to {
496
+ opacity: 1;
497
+ }
498
+ }
499
+
500
+ .message.user {
501
+ text-align: right;
502
+ }
503
+
504
+ .message-bubble {
505
+ display: inline-block;
506
+ padding: 0.8rem 1.2rem;
507
+ border-radius: 15px;
508
+ max-width: 70%;
509
+ }
510
+
511
+ .message.user .message-bubble {
512
+ background: var(--gradient-1);
513
+ color: white;
514
+ }
515
+
516
+ .message.bot .message-bubble {
517
+ background: rgba(102, 126, 234, 0.2);
518
+ color: var(--text-primary);
519
+ }
520
+
521
+ .chat-input-container {
522
+ display: flex;
523
+ gap: 1rem;
524
+ }
525
+
526
+ .chat-input {
527
+ flex: 1;
528
+ padding: 0.8rem;
529
+ border-radius: 25px;
530
+ border: 1px solid rgba(102, 126, 234, 0.5);
531
+ background: rgba(15, 15, 30, 0.8);
532
+ color: var(--text-primary);
533
+ }
534
+
535
+ /* Footer */
536
+ footer {
537
+ background: rgba(26, 26, 46, 0.95);
538
+ padding: 2rem;
539
+ text-align: center;
540
+ margin-top: 4rem;
541
+ border-top: 1px solid rgba(102, 126, 234, 0.3);
542
+ }
543
+
544
+ .social-links {
545
+ display: flex;
546
+ gap: 1rem;
547
+ justify-content: center;
548
+ margin-top: 1rem;
549
+ }
550
+
551
+ .social-links a {
552
+ color: var(--text-secondary);
553
+ font-size: 1.5rem;
554
+ transition: all 0.3s ease;
555
+ }
556
+
557
+ .social-links a:hover {
558
+ color: var(--primary-color);
559
+ transform: translateY(-5px);
560
+ }
561
+
562
+ /* Notification Toast */
563
+ .toast {
564
+ position: fixed;
565
+ bottom: 20px;
566
+ right: 20px;
567
+ padding: 1rem 1.5rem;
568
+ background: rgba(26, 26, 46, 0.95);
569
+ border-radius: 10px;
570
+ border: 1px solid var(--primary-color);
571
+ box-shadow: var(--shadow-card);
572
+ transform: translateX(400px);
573
+ transition: transform 0.3s ease;
574
+ z-index: 2000;
575
+ }
576
+
577
+ .toast.show {
578
+ transform: translateX(0);
579
+ }
580
+
581
+ .toast.success {
582
+ border-color: var(--success-color);
583
+ }
584
+
585
+ .toast.error {
586
+ border-color: var(--error-color);
587
+ }
588
+
589
+ /* Responsive Design */
590
+ @media (max-width: 768px) {
591
+ .nav-links {
592
+ display: none;
593
+ }
594
+
595
+ .hero h1 {
596
+ font-size: 2rem;
597
+ }
598
+
599
+ .feature-grid {
600
+ grid-template-columns: 1fr;
601
+ }
602
+
603
+ .api-controls {
604
+ flex-direction: column;
605
+ }
606
+
607
+ .message-bubble {
608
+ max-width: 85%;
609
+ }
610
+ }
611
+
612
+ /* Mobile Menu */
613
+ .mobile-menu-toggle {
614
+ display: none;
615
+ background: none;
616
+ border: none;
617
+ color: var(--text-primary);
618
+ font-size: 1.5rem;
619
+ cursor: pointer;
620
+ }
621
+
622
+ @media (max-width: 768px) {
623
+ .mobile-menu-toggle {
624
+ display: block;
625
+ }
626
+
627
+ .nav-links {
628
+ position: fixed;
629
+ top: 60px;
630
+ left: 0;
631
+ width: 100%;
632
+ background: rgba(26, 26, 46, 0.98);
633
+ flex-direction: column;
634
+ padding: 2rem;
635
+ transform: translateX(-100%);
636
+ transition: transform 0.3s ease;
637
+ }
638
+
639
+ .nav-links.active {
640
+ transform: translateX(0);
641
+ display: flex;
642
+ }
643
+ }
644
+ </style>
645
+ </head>
646
+
647
+ <body>
648
+ <div class="bg-animation"></div>
649
+ <div class="floating-shapes">
650
+ <div class="shape"></div>
651
+ <div class="shape"></div>
652
+ <div class="shape"></div>
653
+ </div>
654
+
655
+ <header>
656
+ <nav>
657
+ <div class="logo">
658
+ <i class="fas fa-brain"></i>
659
+ AI-FAREL
660
+ </div>
661
+ <ul class="nav-links" id="navLinks">
662
+ <li><a href="#home">Beranda</a></li>
663
+ <li><a href="#features">Fitur</a></li>
664
+ <li><a href="#api">API</a></li>
665
+ <li><a href="#chat">Asisten AI</a></li>
666
+ <li><a href="#contact">Kontak</a></li>
667
+ </ul>
668
+ <button class="mobile-menu-toggle" id="mobileMenuToggle">
669
+ <i class="fas fa-bars"></i>
670
+ </button>
671
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
672
+ style="color: var(--text-secondary); font-size: 0.9rem;">
673
+ Built with anycoder
674
+ </a>
675
+ </nav>
676
+ </header>
677
+
678
+ <main>
679
+ <section id="home" class="hero">
680
+ <h1>Selamat Datang di AI-FAREL</h1>
681
+ <p>Solusi Kecerdasan Buatan Terdepan untuk Transformasi Digital Anda</p>
682
+ <div class="cta-buttons">
683
+ <button class="btn btn-primary" onclick="scrollToSection('api')">
684
+ <i class="fas fa-rocket"></i>
685
+ Mulai Sekarang
686
+ </button>
687
+ <button class="btn btn-secondary" onclick="scrollToSection('features')">
688
+ <i class="fas fa-info-circle"></i>
689
+ Pelajari Lebih Lanjut
690
+ </button>
691
+ </div>
692
+ </section>
693
+
694
+ <section id="features" class="features">
695
+ <h2 class="section-title">Fitur Unggulan Kami</h2>
696
+ <div class="feature-grid">
697
+ <div class="feature-card">
698
+ <div class="feature-icon">
699
+ <i class="fas fa-robot"></i>
700
+ </div>
701
+ <h3>AI Chatbot Cerdas</h3>
702
+ <p>Asisten virtual yang dapat memahami dan merespons pertanyaan kompleks dengan akurasi tinggi.</p>
703
+ </div>
704
+ <div class="feature-card">
705
+ <div class="feature-icon">
706
+ <i class="fas fa-chart-line"></i>
707
+ </div>
708
+ <h3>Analitik Prediktif</h3>
709
+ <p>Analisis data mendalam dengan machine learning untuk prediksi yang akurat dan insight berharga.</p>
710
+ </div>
711
+ <div class="feature-card">
712
+ <div class="feature-icon">
713
+ <i class="fas fa-shield-alt"></i>
714
+ </div>
715
+ <h3>Keamanan Terjamin</h3>
716
+ <p>Enkripsi data end-to-end dan perlindungan privasi dengan standar keamanan tertinggi.</p>
717
+ </div>
718
+ <div class="feature-card">
719
+ <div class="feature-icon">
720
+ <i class="fas fa-cloud"></i>
721
+ </div>
722
+ <h3>Cloud Integration</h3>
723
+ <p>Integrasi seamless dengan berbagai platform cloud untuk skalabilitas maksimal.</p>
724
+ </div>
725
+ <div class="feature-card">
726
+ <div class="feature-icon">
727
+ <i class="fas fa-code"></i>
728
+ </div>
729
+ <h3>API Developer Friendly</h3>
730
+ <p>Dokumentasi lengkap dan SDK untuk integrasi mudah ke aplikasi Anda.</p>
731
+ </div>
732
+ <div class="feature-card">
733
+ <div class="feature-icon">
734
+ <i class="fas fa-users"></i>
735
+ </div>
736
+ <h3>Support 24/7</h3>
737
+ <p>Tim support profesional siap membantu Anda kapan saja, di mana saja.</p>
738
+ </div>
739
+ </div>
740
+ </section>
741
+
742
+ <section id="api" class="api-section">
743
+ <h2 class="section-title">API Explorer</h2>
744
+ <div class="api-container">
745
+ <div class="api-controls">
746
+ <input type="text" class="api-input" id="apiEndpoint" placeholder="Masukkan endpoint API..." value="/api/users">
747
+ <select class="api-input" id="apiMethod" style="flex: 0 0 150px;">
748
+ <option value="GET">GET</option>
749
+ <option value="POST">POST</option>
750
+ <option value="PUT">PUT</option>
751
+ <option value="DELETE">DELETE</option>
752
+ </select>
753
+ <button class="btn btn-primary" onclick="fetchAPI()">
754
+ <i class="fas fa-play"></i>
755
+ Fetch Data
756
+ </button>
757
+ </div>
758
+
759
+ <div class="loading" id="apiLoading">
760
+ <div class="spinner"></div>
761
+ <p style="margin-top: 1rem;">Mengambil data...</p>
762
+ </div>
763
+
764
+ <div class="api-results" id="apiResults">
765
+ <p style="color: var(--text-secondary);">Klik "Fetch Data" untuk mengambil data dari API</p>
766
+ </div>
767
+ </div>
768
+ </section>
769
+
770
+ <section id="chat" class="chat-section">
771
+ <h2 class="section-title">Asisten AI-FAREL</h2>
772
+ <div class="chat-container">
773
+ <div class="chat-messages" id="chatMessages">
774
+ <div class="message bot">
775
+ <div class="message-bubble">
776
+ Halo! Saya adalah asisten AI-FAREL. Ada yang bisa saya bantu hari ini?
777
+ </div>
778
+ </div>
779
+ </div>
780
+ <div class="chat-input-container">
781
+ <input type="text" class="chat-input" id="chatInput" placeholder="Ketik pesan Anda..." onkeypress="handleChatKeyPress(event)">
782
+ <button class="btn btn-primary" onclick="sendMessage()">
783
+ <i class="fas fa-paper-plane"></i>
784
+ </button>
785
+ </div>
786
+ </div>
787
+ </section>
788
+ </main>
789
+
790
+ <footer id="contact">
791
+ <p>&copy; 2024 AI-FAREL. All rights reserved.</p>
792
+ <div class="social-links">
793
+ <a href="#"><i class="fab fa-facebook"></i></a>
794
+ <a href="#"><i class="fab fa-twitter"></i></a>
795
+ <a href="#"><i class="fab fa-linkedin"></i></a>
796
+ <a href="#"><i class="fab fa-github"></i></a>
797
+ </div>
798
+ </footer>
799
+
800
+ <div class="toast" id="toast"></div>
801
+
802
+ <script>
803
+ // Mobile Menu Toggle
804
+ document.getElementById('mobileMenuToggle').addEventListener('click', function() {
805
+ document.getElementById('navLinks').classList.toggle('active');
806
+ });
807
+
808
+ // Smooth Scrolling
809
+ function scrollToSection(sectionId) {
810
+ const section = document.getElementById(sectionId);
811
+ section.scrollIntoView({ behavior: 'smooth' });
812
+ }
813
+
814
+ // Navigation Active State
815
+ const sections = document.querySelectorAll('section');
816
+ const navLinks = document.querySelectorAll('.nav-links a');
817
+
818
+ window.addEventListener('scroll', () => {
819
+ let current = '';
820
+ sections.forEach(section => {
821
+ const sectionTop = section.offsetTop;
822
+ const sectionHeight = section.clientHeight;
823
+ if (scrollY >= (sectionTop - 100)) {
824
+ current = section.getAttribute('id');
825
+ }
826
+ });
827
+
828
+ navLinks.forEach(link => {
829
+ link.classList.remove('active');
830
+ if (link.getAttribute('href').slice(1) === current) {
831
+ link.classList.add('active');
832
+ }
833
+ });
834
+ });
835
+
836
+ // Toast Notification
837
+ function showToast(message, type = 'success') {
838
+ const toast = document.getElementById('toast');
839
+ toast.textContent = message;
840
+ toast.className = `toast ${type}`;
841
+ toast.classList.add('show');
842
+
843
+ setTimeout(() => {
844
+ toast.classList.remove('show');
845
+ }, 3000);
846
+ }
847
+
848
+ // API Fetch Function
849
+ async function fetchAPI() {
850
+ const endpoint = document.getElementById('apiEndpoint').value;
851
+ const method = document.getElementById('apiMethod').value;
852
+ const loading = document.getElementById('apiLoading');
853
+ const results = document.getElementById('apiResults');
854
+
855
+ if (!endpoint) {
856
+ showToast('Silakan masukkan endpoint API', 'error');
857
+ return;
858
+ }
859
+
860
+ loading.classList.add('active');
861
+ results.innerHTML = '';
862
+
863
+ // Simulate API call (replace with actual API call)
864
+ setTimeout(() => {
865
+ loading.classList.remove('active');
866
+
867
+ // Demo data - replace with actual API response
868
+ const demoData = {
869
+ '/api/users': [
870
+ { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' },
871
+ { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' },
872
+ { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' }
873
+ ],
874
+ '/api/products': [
875
+ { id: 1, name: 'AI Assistant Pro', price: '$99/month', features: 'Advanced AI features' },
876
+ { id: 2, name: 'Data Analytics Suite', price: '$199/month', features: 'Real-time analytics' },
877
+ { id: 3, name: 'Cloud Storage Plus', price: '$49/month', features: 'Unlimited storage' }
878
+ ],
879
+ '/api/analytics': {
880
+ totalUsers: 1250,
881
+ activeUsers: 890,
882
+ growth: '+23%',
883
+ revenue: '$45,678'
884
+ }
885
+ };
886
+
887
+ const data = demoData[endpoint] || { message: 'Data berhasil diambil', timestamp: new Date().toISOString() };
888
+
889
+ if (Array.isArray(data)) {
890
+ data.forEach(item => {
891
+ const resultItem = document.createElement('div');
892
+ resultItem.className = 'result-item';
893
+ resultItem.innerHTML = `
894
+ <pre style="color: var(--text-primary); font-family: monospace;">${JSON.stringify(item, null, 2)}</pre>
895
+ `;
896
+ results.appendChild(resultItem);
897
+ });
898
+ } else {
899
+ const resultItem = document.createElement('div');
900
+ resultItem.className = 'result-item';
901
+ resultItem.innerHTML = `
902
+ <pre style="color: var(--text-primary); font-family: monospace;">${JSON.stringify(data, null, 2)}</pre>
903
+ `;
904
+ results.appendChild(resultItem);
905
+ }
906
+
907
+ showToast('Data berhasil diambil!', 'success');
908
+ }, 1500);
909
+
910
+ // Uncomment below for actual API call
911
+ /*
912
+ try {
913
+ const response = await fetch(`https://your-api-domain.com${endpoint}`, {
914
+ method: method,
915
+ headers: {
916
+ 'Content-Type': 'application/json',
917
+ // Add any authentication headers here
918
+ }
919
+ });
920
+
921
+ if (!response.ok) {
922
+ throw new Error(`HTTP error! status: ${response.status}`);
923
+ }
924
+
925
+ const data = await response.json();
926
+ loading.classList.remove('active');
927
+
928
+ // Display results
929
+ const resultItem = document.createElement('div');
930
+ resultItem.className = 'result-item';
931
+ resultItem.innerHTML = `
932
+ <pre style="color: var(--text-primary); font-family: monospace;">${JSON.stringify(data, null, 2)}</pre>
933
+ `;
934
+ results.appendChild(resultItem);
935
+
936
+ showToast('Data berhasil diambil!', 'success');
937
+ } catch (error) {
938
+ loading.classList.remove('active');
939
+ showToast('Error: ' + error.message, 'error');
940
+
941
+ results.innerHTML = `
942
+ <div class="result-item" style="border-color: var(--error-color);">
943
+ <p style="color: var(--error-color);">Error: ${error.message}</p>
944
+ </div>
945
+ `;
946
+ }
947
+ */
948
+ }
949
+
950
+ // Chat Functionality
951
+ function sendMessage() {
952
+ const input = document.getElementById('chatInput');
953
+ const message = input.value.trim();
954
+
955
+ if (!message) return;
956
+
957
+ const messagesContainer = document.getElementById('chatMessages');
958
+
959
+ // Add user message
960
+ const userMessage = document.createElement('div');
961
+ userMessage.className = 'message user';
962
+ userMessage.innerHTML = `
963
+ <div class="message-bubble">${message}</div>
964
+ `;
965
+ messagesContainer.appendChild(userMessage);
966
+
967
+ input.value = '';
968
+
969
+ // Simulate bot response
970
+ setTimeout(() => {
971
+ const botResponses = [
972
+ 'Saya memahami pertanyaan Anda. Mari saya bantu mencari solusi terbaik.',
973
+ 'Itu adalah pertanyaan yang menarik! Berdasarkan analisis AI saya, saya merekomendasikan...',
974
+ 'Terima kasih telah bertanya. Saya akan membantu Anda dengan informasi yang diperlukan.',
975
+ 'Berdasarkan data yang saya miliki, jawaban untuk pertanyaan Anda adalah...',
976
+ 'Saya sedang memproses permintaan Anda. Mohon tunggu sebentar...'
977
+ ];
978
+
979
+ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];
980
+
981
+ const botMessage = document.createElement('div');
982
+ botMessage.className = 'message bot';
983
+ botMessage.innerHTML = `
984
+ <div class="message-bubble">${randomResponse}</div>
985
+ `;
986
+ messagesContainer.appendChild(botMessage);
987
+
988
+ // Scroll to bottom
989
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
990
+ }, 1000);
991
+
992
+ // Scroll to bottom
993
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
994
+ }
995
+
996
+ function handleChatKeyPress(event) {
997
+ if (event.key === 'Enter') {
998
+ sendMessage();
999
+ }
1000
+ }
1001
+
1002
+ // Initialize animations on scroll
1003
+ const observerOptions = {
1004
+ threshold: 0.1,
1005
+ rootMargin: '0px 0px -100px 0px'
1006
+ };
1007
+
1008
+ const observer = new IntersectionObserver((entries) => {
1009
+ entries.forEach(entry => {
1010
+ if (entry.isIntersecting) {
1011
+ entry.target.style.animation = 'fadeIn 0.6s ease forwards';
1012
+ }
1013
+ });
1014
+ }, observerOptions);
1015
+
1016
+ // Observe all feature cards
1017
+ document.querySelectorAll('.feature-card').forEach(card => {
1018
+ observer.observe(card);
1019
+ });
1020
+
1021
+ // Add parallax effect to shapes
1022
+ window.addEventListener('scroll', () => {
1023
+ const scrolled = window.pageYOffset;
1024
+ const shapes = document.querySelectorAll('.shape');
1025
+
1026
+ shapes.forEach((shape, index) => {
1027
+ const speed = 0.5 + (index * 0.2);
1028
+ shape.style.transform = `translateY(${scrolled * speed}px)`;
1029
+ });
1030
+ });
1031
+
1032
+ // Initialize page
1033
+ document.addEventListener('DOMContentLoaded', () => {
1034
+ showToast('Selamat datang di AI-FAREL!', 'success');
1035
+ });
1036
+ </script>
1037
+ </body>
1038
+
1039
+ </html>