Hugging Face's logo

Spaces:
farwew
/
test
Running

App Files Community
farwew commited on
Commit
c096d81
·
verified ·
1 Parent(s): ad8d7af

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +314 -624
index.html CHANGED
@@ -57,6 +57,54 @@
57
  .nav-active {
58
  color: #4f46e5;
59
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </style>
61
  </head>
62
  <body class="max-w-md mx-auto bg-gray-50">
@@ -239,681 +287,323 @@
239
  <h4 class="font-semibold">5 Tren Bisnis Makanan 2023</h4>
240
  <p class="text-sm text-gray-600 mt-1">Pelajari jenis makanan yang sedang booming di pasaran</p>
241
 
242
- <div class="flex items-center mt-3 text-xs text-gray-500">
243
- <i class="far fa-clock mr-1"></i>
244
- <span>5 menit baca</span>
245
- <span class="mx-2">•</span>
246
- <i class="far fa-calendar mr-1"></i>
247
- <span>15 Juni 2023</span>
248
- </div>
 
 
 
 
 
249
  </div>
250
  </div>
251
  </div>
252
 
253
- <!-- Article Card 2 -->
254
- <div class="article-card bg-white p-4 rounded-xl shadow-sm">
255
- <div class="flex">
256
- <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
257
- <i class="fas fa-money-bill-wave text-blue-600 text-xl"></i>
258
- </div>
259
- <div>
260
- <h4 class="font-semibold">Manajemen Keuangan untuk UMKM</h4>
261
- <p class="text-sm text-gray-600 mt-1">Tips mengatur keuangan usaha kecil agar tetap sehat</p>
262
-
263
- <div class="flex items-center mt-3 text-xs text-gray-500">
264
- <i class="far fa-clock mr-1"></i>
265
- <span>8 menit baca</span>
266
- <span class="mx-2">•</span>
267
- <i class="far fa-calendar mr-1"></i>
268
- <span>10 Juni 2023</span>
 
269
  </div>
270
  </div>
271
- </div>
272
- </div>
273
-
274
- <!-- Article Card 3 -->
275
- <div class="article-card bg-white p-4 rounded-xl shadow-sm">
276
- <div class="flex">
277
- <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
278
- <i class="fas fa-hashtag text-green-600 text-xl"></i>
279
- </div>
280
- <div>
281
- <h4 class="font-semibold">Strategi Pemasaran Digital</h4>
282
- <p class="text-sm text-gray-600 mt-1">Manfaatkan media sosial untuk menjangkau lebih banyak pelanggan</p>
283
-
284
- <div class="flex items-center mt-3 text-xs text-gray-500">
285
- <i class="far fa-clock mr-1"></i>
286
- <span>10 menit baca</span>
287
- <span class="mx-2">•</span>
288
- <i class="far fa-calendar mr-1"></i>
289
- <span>5 Juni 2023</span>
290
  </div>
291
  </div>
292
- </div>
293
- </div>
294
- </div>
295
-
296
- <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
297
- Lihat Semua Artikel
298
- </button>
299
- </section>
300
-
301
- <!-- Webinar Section -->
302
- <section id="webinar-tab" class="px-4 mt-4 tab-content hidden">
303
- <div class="flex justify-between items-center mb-3">
304
- <h3 class="font-semibold text-lg">Webinar Mendatang</h3>
305
- <a href="#" class="text-sm text-purple-600">Lihat semua</a>
306
- </div>
307
-
308
- <div class="space-y-4">
309
- <!-- Webinar Card 1 -->
310
- <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
311
- <div class="flex">
312
- <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
313
- <i class="fas fa-chalkboard-teacher text-purple-600 text-xl"></i>
314
  </div>
315
- <div>
316
- <h4 class="font-semibold">Kiat Sukses Bisnis Kopi Kekinian</h4>
317
- <p class="text-sm text-gray-600 mt-1">Dengan pemilik "Kopi Tenang" yang memiliki 15 cabang</p>
318
-
319
- <div class="flex items-center mt-2 text-sm">
320
- <div class="flex items-center mr-4">
321
- <i class="far fa-calendar text-purple-500 mr-1"></i>
322
- <span>25 Juni 2023</span>
323
  </div>
324
- <div class="flex items-center">
325
- <i class="far fa-clock text-purple-500 mr-1"></i>
326
- <span>19:00 WIB</span>
327
  </div>
328
  </div>
329
-
330
- <div class="mt-3 flex justify-between items-center">
331
- <span class="text-sm bg-purple-100 text-purple-600 px-2 py-1 rounded">Rp 75.000</span>
332
- <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition">
333
- Daftar
334
- </button>
335
  </div>
336
  </div>
337
  </div>
338
- </div>
339
-
340
- <!-- Webinar Card 2 -->
341
- <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
342
- <div class="flex">
343
- <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
344
- <i class="fas fa-store text-blue-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
345
  </div>
346
- <div>
347
- <h4 class="font-semibold">Memulai Bisnis Franchise Modal Kecil</h4>
348
- <p class="text-sm text-gray-600 mt-1">Panduan memilih franchise yang menguntungkan</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
349
 
350
- <div class="flex items-center mt-2 text-sm">
351
- <div class="flex items-center mr-4">
352
- <i class="far fa-calendar text-blue-500 mr-1"></i>
353
- <span>30 Juni 2023</span>
354
  </div>
355
- <div class="flex items-center">
356
- <i class="far fa-clock text-blue-500 mr-1"></i>
357
- <span>15:00 WIB</span>
358
  </div>
 
359
  </div>
360
 
361
- <div class="mt-3 flex justify-between items-center">
362
- <span class="text-sm bg-blue-100 text-blue-600 px-2 py-1 rounded">Rp 50.000</span>
363
- <button class="bg-blue-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-blue-700 transition">
364
- Daftar
365
- </button>
 
 
 
 
366
  </div>
367
  </div>
 
 
 
 
368
  </div>
369
- </div>
370
-
371
- <!-- Webinar Card 3 -->
372
- <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
373
- <div class="flex">
374
- <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
375
- <i class="fas fa-mobile-alt text-green-600 text-xl"></i>
376
  </div>
377
- <div>
378
- <h4 class="font-semibold">Optimalkan Penjualan dengan Marketplace</h4>
379
- <p class="text-sm text-gray-600 mt-1">Strategi meningkatkan omset di Tokopedia & Shopee</p>
380
-
381
- <div class="flex items-center mt-2 text-sm">
382
- <div class="flex items-center mr-4">
383
- <i class="far fa-calendar text-green-500 mr-1"></i>
384
- <span>5 Juli 2023</span>
385
  </div>
386
- <div class="flex items-center">
387
- <i class="far fa-clock text-green-500 mr-1"></i>
388
- <span>13:00 WIB</span>
 
389
  </div>
390
  </div>
391
 
392
- <div class="mt-3 flex justify-between items-center">
393
- <span class="text-sm bg-green-100 text-green-600 px-2 py-1 rounded">Gratis</span>
394
- <button class="bg-green-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-green-700 transition">
395
- Daftar
396
- </button>
397
- </div>
398
- </div>
399
- </div>
400
- </div>
401
- </div>
402
-
403
- <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
404
- Lihat Semua Webinar
405
- </button>
406
- </section>
407
-
408
- <!-- Tutorial Section -->
409
- <section id="tutorial-tab" class="px-4 mt-4 tab-content hidden">
410
- <div class="flex justify-between items-center mb-3">
411
- <h3 class="font-semibold text-lg">Tutorial UMKM</h3>
412
- <a href="#" class="text-sm text-purple-600">Lihat semua</a>
413
- </div>
414
-
415
- <div class="space-y-4">
416
- <!-- Tutorial Card 1 -->
417
- <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
418
- <div class="flex">
419
- <div class="w-20 h-20 bg-red-100 rounded-lg overflow-hidden mr-3">
420
- <img src="https://img.youtube.com/vi/abc123/0.jpg" alt="Video Thumbnail" class="w-full h-full object-cover">
421
- <div class="absolute inset-0 flex items-center justify-center">
422
- <i class="fas fa-play text-red-500 text-xl"></i>
423
  </div>
424
- </div>
425
- <div>
426
- <h4 class="font-semibold">Cara Membuat Laporan Keuangan Sederhana</h4>
427
- <p class="text-sm text-gray-600 mt-1">Panduan untuk pemula dalam mengelola keuangan UMKM</p>
428
 
429
- <div class="flex items-center mt-3 text-xs text-gray-500">
430
- <i class="far fa-clock mr-1"></i>
431
- <span>12 menit</span>
432
- <span class="mx-2">•</span>
433
- <i class="fas fa-eye mr-1"></i>
434
- <span>1.2K views</span>
 
 
 
435
  </div>
436
  </div>
437
  </div>
438
- </div>
439
-
440
- <!-- Tutorial Card 2 -->
441
- <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
442
- <div class="flex">
443
- <div class="w-20 h-20 bg-purple-100 rounded-lg overflow-hidden mr-3">
444
- <img src="https://img.youtube.com/vi/def456/0.jpg" alt="Video Thumbnail" class="w-full h-full object-cover">
445
- <div class="absolute inset-0 flex items-center justify-center">
446
- <i class="fas fa-play text-purple-500 text-xl"></i>
447
- </div>
448
  </div>
449
- <div>
450
- <h4 class="font-semibold">Strategi Branding untuk Produk Lokal</h4>
451
- <p class="text-sm text-gray-600 mt-1">Membangun citra merek yang kuat untuk UMKM</p>
452
-
453
- <div class="flex items-center mt-3 text-xs text-gray-500">
454
- <i class="far fa-clock mr-1"></i>
455
- <span>15 menit</span>
456
- <span class="mx-2">•</span>
457
- <i class="fas fa-eye mr-1"></i>
458
- <span>2.5K views</span>
 
 
459
  </div>
460
- </div>
461
- </div>
462
- </div>
463
-
464
- <!-- Tutorial Card 3 -->
465
- <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
466
- <div class="flex">
467
- <div class="w-20 h-20 bg-blue-100 rounded-lg overflow-hidden mr-3">
468
- <img src="https://img.youtube.com/vi/ghi789/0.jpg" alt="Video Thumbnail" class="w-full h-full object-cover">
469
- <div class="absolute inset-0 flex items-center justify-center">
470
- <i class="fas fa-play text-blue-500 text-xl"></i>
471
  </div>
472
- </div>
473
- <div>
474
- <h4 class="font-semibold">Packing Produk yang Aman untuk Pengiriman</h4>
475
- <p class="text-sm text-gray-600 mt-1">Teknik mengemas produk agar sampai dengan selamat</p>
476
 
477
- <div class="flex items-center mt-3 text-xs text-gray-500">
478
- <i class="far fa-clock mr-1"></i>
479
- <span>8 menit</span>
480
- <span class="mx-2">•</span>
481
- <i class="fas fa-eye mr-1"></i>
482
- <span>3.1K views</span>
 
 
 
 
483
  </div>
484
  </div>
485
  </div>
486
  </div>
487
  </div>
488
-
489
- <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
490
- Lihat Semua Tutorial
491
- </button>
492
- </section>
493
 
494
- <!-- Quick Access -->
495
- <section class="px-4 mt-6 mb-16">
496
- <h3 class="font-semibold text-lg mb-3">Akses Cepat</h3>
497
-
498
- <div class="grid grid-cols-4 gap-3">
499
- <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
500
- <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-2">
501
- <i class="fas fa-calculator text-blue-500"></i>
502
- </div>
503
- <span class="text-xs text-center">Kalkulator Modal</span>
504
  </a>
505
-
506
- <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
507
- <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
508
- <i class="fas fa-book text-green-500"></i>
509
- </div>
510
- <span class="text-xs text-center">Panduan</span>
511
  </a>
512
-
513
- <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
514
- <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
515
- <i class="fas fa-chart-line text-yellow-500"></i>
516
- </div>
517
- <span class="text-xs text-center">Tren Pasar</span>
518
  </a>
519
-
520
- <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
521
- <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
522
- <i class="fas fa-headset text-purple-500"></i>
523
- </div>
524
- <span class="text-xs text-center">Konsultasi</span>
525
  </a>
526
- </div>
527
- </section>
528
- </div>
529
-
530
- <!-- Search Page -->
531
- <div id="search-page" class="page hidden">
532
- <div class="bg-white p-4 rounded-b-xl shadow-sm">
533
- <div class="relative">
534
- <input type="text" placeholder="Cari jenis usaha, artikel, atau webinar..." class="w-full py-3 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
535
- <button class="absolute right-3 top-3 text-purple-600">
536
- <i class="fas fa-search"></i>
537
- </button>
538
- </div>
539
-
540
- <div class="mt-6">
541
- <h3 class="font-semibold text-lg mb-3">Kategori Populer</h3>
542
-
543
- <div class="flex flex-wrap gap-2">
544
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Makanan</span>
545
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Fashion</span>
546
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Kerajinan</span>
547
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Jasa</span>
548
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Pertanian</span>
549
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Teknologi</span>
550
- </div>
551
- </div>
552
-
553
- <div class="mt-6">
554
- <h3 class="font-semibold text-lg mb-3">Pencarian Terakhir</h3>
555
-
556
- <div class="space-y-2">
557
- <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
558
- <span>Bisnis kopi kekinian</span>
559
- <i class="fas fa-times text-gray-400"></i>
560
- </div>
561
- <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
562
- <span>Modal usaha under 5 juta</span>
563
- <i class="fas fa-times text-gray-400"></i>
564
- </div>
565
- <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
566
- <span>Strategi pemasaran online</span>
567
- <i class="fas fa-times text-gray-400"></i>
568
- </div>
569
- </div>
570
- </div>
571
- </div>
572
-
573
- <div class="px-4 mt-4">
574
- <h3 class="font-semibold text-lg mb-3">Hasil Pencarian</h3>
575
-
576
- <div class="bg-white p-4 rounded-xl shadow-sm">
577
- <p class="text-center text-gray-500">Mulai pencarian untuk melihat hasil</p>
578
- </div>
579
- </div>
580
- </div>
581
-
582
- <!-- Article Page -->
583
- <div id="article-page" class="page hidden">
584
- <div class="bg-white p-4 rounded-b-xl shadow-sm">
585
- <div class="flex justify-between items-center">
586
- <h1 class="text-xl font-bold">Artikel UMKM</h1>
587
- <button class="text-purple-600">
588
- <i class="fas fa-sliders-h"></i>
589
- </button>
590
- </div>
591
-
592
- <div class="mt-4 relative">
593
- <input type="text" placeholder="Cari artikel..." class="w-full py-3 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
594
- <button class="absolute right-3 top-3 text-purple-600">
595
- <i class="fas fa-search"></i>
596
- </button>
597
- </div>
598
-
599
- <div class="mt-4 flex overflow-x-auto pb-2 gap-2">
600
- <span class="px-3 py-1 bg-purple-600 text-white rounded-full text-sm whitespace-nowrap">Semua</span>
601
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Perencanaan</span>
602
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Pemasaran</span>
603
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Keuangan</span>
604
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Legal</span>
605
- </div>
606
- </div>
607
-
608
- <div class="px-4 mt-4 space-y-4">
609
- <!-- Featured Article -->
610
- <div class="bg-white rounded-xl shadow-sm overflow-hidden">
611
- <div class="h-40 bg-purple-100 relative">
612
- <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Featured Article" class="w-full h-full object-cover">
613
- <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
614
- <span class="text-xs bg-purple-600 text-white px-2 py-1 rounded">Featured</span>
615
- <h3 class="text-white font-semibold mt-2">10 Ide Bisnis Kreatif dengan Modal Minim</h3>
616
- </div>
617
- </div>
618
- <div class="p-4">
619
- <p class="text-sm text-gray-600">Temukan ide bisnis unik yang bisa dimulai dengan modal di bawah 5 juta rupiah dan memiliki potensi pasar yang besar.</p>
620
- <div class="flex items-center mt-3 text-xs text-gray-500">
621
- <i class="far fa-clock mr-1"></i>
622
- <span>8 menit baca</span>
623
- <span class="mx-2">•</span>
624
- <i class="far fa-calendar mr-1"></i>
625
- <span>18 Juni 2023</span>
626
- </div>
627
- </div>
628
- </div>
629
-
630
- <!-- Article List -->
631
- <div class="space-y-4">
632
- <div class="article-card bg-white p-4 rounded-xl shadow-sm">
633
- <div class="flex">
634
- <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
635
- <i class="fas fa-chart-pie text-blue-600 text-xl"></i>
636
- </div>
637
- <div>
638
- <h4 class="font-semibold">Analisis Pasar untuk Produk Lokal</h4>
639
- <p class="text-sm text-gray-600 mt-1">Bagaimana memahami kebutuhan pasar sebelum memulai usaha</p>
640
-
641
- <div class="flex items-center mt-3 text-xs text-gray-500">
642
- <i class="far fa-clock mr-1"></i>
643
- <span>6 menit baca</span>
644
- <span class="mx-2">•</span>
645
- <i class="far fa-calendar mr-1"></i>
646
- <span>15 Juni 2023</span>
647
- </div>
648
- </div>
649
- </div>
650
- </div>
651
-
652
- <div class="article-card bg-white p-4 rounded-xl shadow-sm">
653
- <div class="flex">
654
- <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
655
- <i class="fas fa-wallet text-green-600 text-xl"></i>
656
- </div>
657
- <div>
658
- <h4 class="font-semibold">Cara Mengajukan Pinjaman UMKM</h4>
659
- <p class="text-sm text-gray-600 mt-1">Panduan lengkap untuk mendapatkan modal usaha dari bank</p>
660
-
661
- <div class="flex items-center mt-3 text-xs text-gray-500">
662
- <i class="far fa-clock mr-1"></i>
663
- <span>10 menit baca</span>
664
- <span class="mx-2">•</span>
665
- <i class="far fa-calendar mr-1"></i>
666
- <span>12 Juni 2023</span>
667
- </div>
668
- </div>
669
- </div>
670
- </div>
671
-
672
- <div class="article-card bg-white p-4 rounded-xl shadow-sm">
673
- <div class="flex">
674
- <div class="w-20 h-20 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
675
- <i class="fas fa-users text-yellow-600 text-xl"></i>
676
- </div>
677
- <div>
678
- <h4 class="font-semibold">Membangun Tim untuk UMKM</h4>
679
- <p class="text-sm text-gray-600 mt-1">Strategi merekrut dan mempertahankan karyawan berkualitas</p>
680
-
681
- <div class="flex items-center mt-3 text-xs text-gray-500">
682
- <i class="far fa-clock mr-1"></i>
683
- <span>7 menit baca</span>
684
- <span class="mx-2">•</span>
685
- <i class="far fa-calendar mr-1"></i>
686
- <span>8 Juni 2023</span>
687
- </div>
688
- </div>
689
- </div>
690
- </div>
691
- </div>
692
-
693
- <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
694
- Muat Lebih Banyak
695
- </button>
696
- </div>
697
- </div>
698
 
699
- <!-- Profile Page -->
700
- <div id="profile-page" class="page hidden">
701
- <div class="bg-white p-4 rounded-b-xl shadow-sm">
702
- <div class="flex justify-between items-center">
703
- <h1 class="text-xl font-bold">Profil Saya</h1>
704
- <button class="text-purple-600">
705
- <i class="fas fa-cog"></i>
706
- </button>
707
- </div>
708
- </div>
709
-
710
- <div class="px-4 mt-4">
711
- <div class="bg-white p-6 rounded-xl shadow-sm text-center">
712
- <div class="w-24 h-24 bg-purple-100 rounded-full mx-auto mb-4 flex items-center justify-center">
713
- <i class="fas fa-user text-purple-600 text-3xl"></i>
714
- </div>
715
- <h3 class="font-semibold text-lg">Budi Santoso</h3>
716
- <p class="text-gray-600">Pelaku UMKM Pemula</p>
717
-
718
- <div class="mt-4 flex justify-center space-x-4">
719
- <div class="text-center">
720
- <div class="w-12 h-12 bg-blue-100 rounded-full mx-auto mb-2 flex items-center justify-center">
721
- <i class="fas fa-medal text-blue-600"></i>
722
- </div>
723
- <span class="text-xs">Level 2</span>
724
- </div>
725
- <div class="text-center">
726
- <div class="w-12 h-12 bg-green-100 rounded-full mx-auto mb-2 flex items-center justify-center">
727
- <i class="fas fa-star text-green-600"></i>
728
- </div>
729
- <span class="text-xs">85 XP</span>
730
- </div>
731
- <div class="text-center">
732
- <div class="w-12 h-12 bg-yellow-100 rounded-full mx-auto mb-2 flex items-center justify-center">
733
- <i class="fas fa-trophy text-yellow-600"></i>
734
- </div>
735
- <span class="text-xs">3 Pencapaian</span>
736
- </div>
737
- </div>
738
- </div>
739
-
740
- <div class="mt-6 space-y-4">
741
- <div class="bg-white p-4 rounded-xl shadow-sm">
742
- <h3 class="font-semibold mb-3">Profil UMKM</h3>
743
 
744
- <div class="space-y-3">
745
- <div>
746
- <p class="text-xs text-gray-500">Status</p>
747
- <p class="font-medium">Belum memiliki usaha</p>
748
- </div>
749
- <div>
750
- <p class="text-xs text-gray-500">Minat Bisnis</p>
751
- <p class="font-medium">Makanan & Minuman, Fashion</p>
752
- </div>
753
- <div>
754
- <p class="text-xs text-gray-500">Keterampilan</p>
755
- <p class="font-medium">Memasak, Desain Sederhana</p>
756
- </div>
757
- <div>
758
- <p class="text-xs text-gray-500">Lokasi</p>
759
- <p class="font-medium">Jakarta Selatan</p>
760
- </div>
761
- </div>
762
 
763
- <button class="w-full mt-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
764
- Edit Profil
765
- </button>
766
- </div>
767
-
768
- <div class="bg-white p-4 rounded-xl shadow-sm">
769
- <h3 class="font-semibold mb-3">Aktivitas Saya</h3>
770
 
771
- <div class="space-y-4">
772
- <div class="flex items-start">
773
- <div class="w-10 h-10 bg-purple-100 rounded-full mr-3 flex items-center justify-center">
774
- <i class="fas fa-book text-purple-600"></i>
775
- </div>
776
- <div>
777
- <h4 class="font-medium">Artikel dibaca</h4>
778
- <p class="text-sm text-gray-600">12 artikel</p>
779
- </div>
780
- </div>
781
-
782
- <div class="flex items-start">
783
- <div class="w-10 h-10 bg-blue-100 rounded-full mr-3 flex items-center justify-center">
784
- <i class="fas fa-video text-blue-600"></i>
785
- </div>
786
- <div>
787
- <h4 class="font-medium">Webinar diikuti</h4>
788
- <p class="text-sm text-gray-600">3 webinar</p>
789
- </div>
790
- </div>
791
-
792
- <div class="flex items-start">
793
- <div class="w-10 h-10 bg-green-100 rounded-full mr-3 flex items-center justify-center">
794
- <i class="fas fa-play text-green-600"></i>
795
- </div>
796
- <div>
797
- <h4 class="font-medium">Tutorial ditonton</h4>
798
- <p class="text-sm text-gray-600">7 video</p>
799
- </div>
800
- </div>
801
- </div>
802
- </div>
803
 
804
- <div class="bg-white p-4 rounded-xl shadow-sm">
805
- <h3 class="font-semibold mb-3">Pengaturan</h3>
 
 
 
 
 
806
 
807
- <div class="space-y-3">
808
- <button class="w-full text-left py-2 flex items-center">
809
- <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
810
- <i class="fas fa-bell text-gray-600"></i>
811
- </div>
812
- <span>Notifikasi</span>
813
- <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
814
- </button>
815
-
816
- <button class="w-full text-left py-2 flex items-center">
817
- <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
818
- <i class="fas fa-moon text-gray-600"></i>
819
- </div>
820
- <span>Tema Gelap</span>
821
- <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
822
- </button>
823
-
824
- <button class="w-full text-left py-2 flex items-center">
825
- <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
826
- <i class="fas fa-question-circle text-gray-600"></i>
827
- </div>
828
- <span>Bantuan</span>
829
- <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
830
- </button>
831
-
832
- <button class="w-full text-left py-2 flex items-center">
833
- <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
834
- <i class="fas fa-sign-out-alt text-gray-600"></i>
835
- </div>
836
- <span>Keluar</span>
837
- <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
838
- </button>
839
- </div>
840
- </div>
841
- </div>
842
- </div>
843
- </div>
844
-
845
- <!-- Bottom Navigation -->
846
- <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around py-3 max-w-md mx-auto">
847
- <a href="#" class="flex flex-col items-center text-purple-600 nav-active" onclick="switchPage('home-page')">
848
- <i class="fas fa-home text-lg"></i>
849
- <span class="text-xs mt-1">Beranda</span>
850
- </a>
851
- <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('search-page')">
852
- <i class="fas fa-search text-lg"></i>
853
- <span class="text-xs mt-1">Cari</span>
854
- </a>
855
- <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('article-page')">
856
- <i class="fas fa-book-open text-lg"></i>
857
- <span class="text-xs mt-1">Artikel</span>
858
- </a>
859
- <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('profile-page')">
860
- <i class="fas fa-user text-lg"></i>
861
- <span class="text-xs mt-1">Profil</span>
862
- </a>
863
- </nav>
864
-
865
- <script>
866
- // Switch between pages
867
- function switchPage(pageId) {
868
- // Hide all pages
869
- document.querySelectorAll('.page').forEach(page => {
870
- page.classList.remove('page-active');
871
- page.classList.add('hidden');
872
- });
873
-
874
- // Show selected page
875
- document.getElementById(pageId).classList.remove('hidden');
876
- document.getElementById(pageId).classList.add('page-active');
877
-
878
- // Update active nav item
879
- document.querySelectorAll('nav a').forEach(navItem => {
880
- navItem.classList.remove('text-purple-600', 'nav-active');
881
- navItem.classList.add('text-gray-500');
882
- });
883
-
884
- // Set active nav item
885
- event.currentTarget.classList.remove('text-gray-500');
886
- event.currentTarget.classList.add('text-purple-600', 'nav-active');
887
-
888
- // Update header based on page
889
- const header = document.getElementById('main-header');
890
- if (pageId === 'home-page') {
891
- header.classList.remove('hidden');
892
- } else {
893
- header.classList.add('hidden');
894
- }
895
- }
896
-
897
- // Switch between tabs on home page
898
- function switchTab(tabId) {
899
- // Update tab buttons
900
- document.querySelectorAll('.flex.justify-around button').forEach(tab => {
901
- tab.classList.remove('tab-active');
902
- tab.classList.add('text-gray-500');
903
- });
904
-
905
- // Add active class to clicked tab
906
- event.currentTarget.classList.add('tab-active');
907
- event.currentTarget.classList.remove('text-gray-500');
908
-
909
- // Hide all tab contents
910
- document.querySelectorAll('.tab-content').forEach(content => {
911
- content.classList.add('hidden');
912
- });
913
-
914
- // Show selected tab content
915
- document.getElementById(tabId + '-tab').classList.remove('hidden');
916
- }
917
- </script>
918
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=farwew/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
919
- </html>
 
57
  .nav-active {
58
  color: #4f46e5;
59
  }
60
+
61
+ /* Dashboard specific styles */
62
+ .dashboard-card {
63
+ border-radius: 12px;
64
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
65
+ transition: all 0.3s ease;
66
+ }
67
+
68
+ .dashboard-card:hover {
69
+ transform: translateY(-3px);
70
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
71
+ }
72
+
73
+ .stat-badge {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ padding: 4px 8px;
77
+ border-radius: 12px;
78
+ font-size: 12px;
79
+ font-weight: 500;
80
+ }
81
+
82
+ .chart-container {
83
+ height: 200px;
84
+ position: relative;
85
+ }
86
+
87
+ .goal-progress {
88
+ height: 8px;
89
+ border-radius: 4px;
90
+ background-color: #e5e7eb;
91
+ overflow: hidden;
92
+ }
93
+
94
+ .goal-progress-fill {
95
+ height: 100%;
96
+ border-radius: 4px;
97
+ background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 100%);
98
+ }
99
+
100
+ .milestone-card {
101
+ border-left: 4px solid #4f46e5;
102
+ transition: all 0.3s ease;
103
+ }
104
+
105
+ .milestone-card:hover {
106
+ transform: translateX(5px);
107
+ }
108
  </style>
109
  </head>
110
  <body class="max-w-md mx-auto bg-gray-50">
 
287
  <h4 class="font-semibold">5 Tren Bisnis Makanan 2023</h4>
288
  <p class="text-sm text-gray-600 mt-1">Pelajari jenis makanan yang sedang booming di pasaran</p>
289
 
290
+ <!-- Dashboard Page -->
291
+ <div id="dashboard-page" class="page hidden">
292
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
293
+ <div class="flex justify-between items-center">
294
+ <h1 class="text-xl font-bold">Dashboard UMKM</h1>
295
+ <div class="flex items-center space-x-2">
296
+ <button class="text-gray-500">
297
+ <i class="fas fa-filter"></i>
298
+ </button>
299
+ <button class="text-gray-500">
300
+ <i class="fas fa-calendar-alt"></i>
301
+ </button>
302
  </div>
303
  </div>
304
  </div>
305
 
306
+ <div class="px-4 mt-4 space-y-4">
307
+ <!-- Quick Stats -->
308
+ <div class="grid grid-cols-2 gap-3">
309
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
310
+ <div class="flex items-center justify-between">
311
+ <div>
312
+ <p class="text-sm text-gray-500">Total Penjualan</p>
313
+ <h3 class="text-xl font-bold">Rp 12.450.000</h3>
314
+ </div>
315
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
316
+ <i class="fas fa-shopping-cart text-purple-600"></i>
317
+ </div>
318
+ </div>
319
+ <div class="mt-2">
320
+ <span class="stat-badge bg-green-100 text-green-600">
321
+ <i class="fas fa-arrow-up mr-1"></i> 12% dari bulan lalu
322
+ </span>
323
  </div>
324
  </div>
325
+
326
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
327
+ <div class="flex items-center justify-between">
328
+ <div>
329
+ <p class="text-sm text-gray-500">Pelanggan</p>
330
+ <h3 class="text-xl font-bold">143</h3>
331
+ </div>
332
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
333
+ <i class="fas fa-users text-blue-600"></i>
334
+ </div>
335
+ </div>
336
+ <div class="mt-2">
337
+ <span class="stat-badge bg-green-100 text-green-600">
338
+ <i class="fas fa-arrow-up mr-1"></i> 8% dari bulan lalu
339
+ </span>
 
 
 
 
340
  </div>
341
  </div>
342
+
343
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
344
+ <div class="flex items-center justify-between">
345
+ <div>
346
+ <p class="text-sm text-gray-500">Produk Terjual</p>
347
+ <h3 class="text-xl font-bold">287</h3>
348
+ </div>
349
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
350
+ <i class="fas fa-box-open text-yellow-600"></i>
351
+ </div>
352
+ </div>
353
+ <div class="mt-2">
354
+ <span class="stat-badge bg-red-100 text-red-600">
355
+ <i class="fas fa-arrow-down mr-1"></i> 5% dari bulan lalu
356
+ </span>
357
+ </div>
 
 
 
 
 
 
358
  </div>
359
+
360
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
361
+ <div class="flex items-center justify-between">
362
+ <div>
363
+ <p class="text-sm text-gray-500">Rating</p>
364
+ <h3 class="text-xl font-bold">4.7</h3>
 
 
365
  </div>
366
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
367
+ <i class="fas fa-star text-green-600"></i>
 
368
  </div>
369
  </div>
370
+ <div class="mt-2">
371
+ <span class="stat-badge bg-green-100 text-green-600">
372
+ <i class="fas fa-arrow-up mr-1"></i> 0.2 dari bulan lalu
373
+ </span>
 
 
374
  </div>
375
  </div>
376
  </div>
377
+
378
+ <!-- Sales Chart -->
379
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
380
+ <div class="flex justify-between items-center mb-4">
381
+ <h3 class="font-semibold">Perkembangan Penjualan</h3>
382
+ <select class="text-sm border rounded px-2 py-1">
383
+ <option>Bulan Ini</option>
384
+ <option>3 Bulan Terakhir</option>
385
+ <option>Tahun Ini</option>
386
+ </select>
387
+ </div>
388
+ <div class="chart-container">
389
+ <!-- Placeholder for chart -->
390
+ <div class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center">
391
+ <p class="text-gray-500">Grafik penjualan akan muncul di sini</p>
392
+ </div>
393
  </div>
394
+ </div>
395
+
396
+ <!-- Goals Progress -->
397
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
398
+ <h3 class="font-semibold mb-4">Target Bulanan</h3>
399
+
400
+ <div class="space-y-3">
401
+ <div>
402
+ <div class="flex justify-between mb-1">
403
+ <span class="text-sm font-medium">Target Penjualan</span>
404
+ <span class="text-sm font-medium">65%</span>
405
+ </div>
406
+ <div class="goal-progress">
407
+ <div class="goal-progress-fill" style="width: 65%"></div>
408
+ </div>
409
+ <p class="text-xs text-gray-500 mt-1">Rp 12.450.000 dari Rp 19.000.000</p>
410
+ </div>
411
 
412
+ <div>
413
+ <div class="flex justify-between mb-1">
414
+ <span class="text-sm font-medium">Target Pelanggan Baru</span>
415
+ <span class="text-sm font-medium">80%</span>
416
  </div>
417
+ <div class="goal-progress">
418
+ <div class="goal-progress-fill" style="width: 80%"></div>
 
419
  </div>
420
+ <p class="text-xs text-gray-500 mt-1">32 dari 40 pelanggan baru</p>
421
  </div>
422
 
423
+ <div>
424
+ <div class="flex justify-between mb-1">
425
+ <span class="text-sm font-medium">Target Produk Baru</span>
426
+ <span class="text-sm font-medium">40%</span>
427
+ </div>
428
+ <div class="goal-progress">
429
+ <div class="goal-progress-fill" style="width: 40%"></div>
430
+ </div>
431
+ <p class="text-xs text-gray-500 mt-1">2 dari 5 produk baru</p>
432
  </div>
433
  </div>
434
+
435
+ <button class="w-full mt-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
436
+ Atur Target Baru
437
+ </button>
438
  </div>
439
+
440
+ <!-- Recent Activities -->
441
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
442
+ <div class="flex justify-between items-center mb-4">
443
+ <h3 class="font-semibold">Aktivitas Terkini</h3>
444
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
 
445
  </div>
446
+
447
+ <div class="space-y-4">
448
+ <div class="flex items-start">
449
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1">
450
+ <i class="fas fa-shopping-cart text-green-600"></i>
 
 
 
451
  </div>
452
+ <div>
453
+ <h4 class="font-medium">Pesanan Baru #ORD-287</h4>
454
+ <p class="text-sm text-gray-600">Rp 450.000 • 2 produk</p>
455
+ <p class="text-xs text-gray-500 mt-1">Hari ini, 14:32</p>
456
  </div>
457
  </div>
458
 
459
+ <div class="flex items-start">
460
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
461
+ <i class="fas fa-user-plus text-blue-600"></i>
462
+ </div>
463
+ <div>
464
+ <h4 class="font-medium">Pelanggan Baru</h4>
465
+ <p class="text-sm text-gray-600">Siti Nurhaliza • Jakarta</p>
466
+ <p class="text-xs text-gray-500 mt-1">Kemarin, 18:15</p>
467
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
468
  </div>
 
 
 
 
469
 
470
+ <div class="flex items-start">
471
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3 mt-1">
472
+ <i class="fas fa-star text-yellow-600"></i>
473
+ </div>
474
+ <div>
475
+ <h4 class="font-medium">Ulasan Baru</h4>
476
+ <p class="text-sm text-gray-600">5 bintang • "Produk sangat berkualitas"</p>
477
+ <p class="text-xs text-gray-500 mt-1">Kemarin, 10:42</p>
478
+ </div>
479
  </div>
480
  </div>
481
  </div>
482
+
483
+ <!-- Milestones -->
484
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
485
+ <div class="flex justify-between items-center mb-4">
486
+ <h3 class="font-semibold">Pencapaian</h3>
487
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
 
 
 
 
488
  </div>
489
+
490
+ <div class="space-y-3">
491
+ <div class="milestone-card bg-gray-50 p-3 rounded-r">
492
+ <div class="flex items-center">
493
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
494
+ <i class="fas fa-trophy text-purple-600"></i>
495
+ </div>
496
+ <div>
497
+ <h4 class="font-medium">Penjualan Rp 10 Juta</h4>
498
+ <p class="text-xs text-gray-500">Pencapaian pertama kali melewati Rp 10 juta dalam sebulan</p>
499
+ </div>
500
+ </div>
501
  </div>
502
+
503
+ <div class="milestone-card bg-gray-50 p-3 rounded-r">
504
+ <div class="flex items-center">
505
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
506
+ <i class="fas fa-users text-blue-600"></i>
507
+ </div>
508
+ <div>
509
+ <h4 class="font-medium">100 Pelanggan</h4>
510
+ <p class="text-xs text-gray-500">Total pelanggan mencapai 100 orang</p>
511
+ </div>
512
+ </div>
513
  </div>
 
 
 
 
514
 
515
+ <div class="milestone-card bg-gray-50 p-3 rounded-r">
516
+ <div class="flex items-center">
517
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
518
+ <i class="fas fa-star text-green-600"></i>
519
+ </div>
520
+ <div>
521
+ <h4 class="font-medium">Rating 4.5+</h4>
522
+ <p class="text-xs text-gray-500">Pertahankan rating di atas 4.5 selama 3 bulan</p>
523
+ </div>
524
+ </div>
525
  </div>
526
  </div>
527
  </div>
528
  </div>
529
  </div>
 
 
 
 
 
530
 
531
+ <!-- Bottom Navigation -->
532
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around py-3 max-w-md mx-auto">
533
+ <a href="#" class="flex flex-col items-center text-purple-600 nav-active" onclick="switchPage('home-page')">
534
+ <i class="fas fa-home text-lg"></i>
535
+ <span class="text-xs mt-1">Beranda</span>
 
 
 
 
 
536
  </a>
537
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('search-page')">
538
+ <i class="fas fa-search text-lg"></i>
539
+ <span class="text-xs mt-1">Cari</span>
 
 
 
540
  </a>
541
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('dashboard-page')">
542
+ <i class="fas fa-chart-line text-lg"></i>
543
+ <span class="text-xs mt-1">Dashboard</span>
 
 
 
544
  </a>
545
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('article-page')">
546
+ <i class="fas fa-book-open text-lg"></i>
547
+ <span class="text-xs mt-1">Artikel</span>
 
 
 
548
  </a>
549
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('profile-page')">
550
+ <i class="fas fa-user text-lg"></i>
551
+ <span class="text-xs mt-1">Profil</span>
552
+ </a>
553
+ </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
554
 
555
+ <script>
556
+ // Switch between pages
557
+ function switchPage(pageId) {
558
+ // Hide all pages
559
+ document.querySelectorAll('.page').forEach(page => {
560
+ page.classList.remove('page-active');
561
+ page.classList.add('hidden');
562
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
563
 
564
+ // Show selected page
565
+ document.getElementById(pageId).classList.remove('hidden');
566
+ document.getElementById(pageId).classList.add('page-active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
567
 
568
+ // Update active nav item
569
+ document.querySelectorAll('nav a').forEach(navItem => {
570
+ navItem.classList.remove('text-purple-600', 'nav-active');
571
+ navItem.classList.add('text-gray-500');
572
+ });
 
 
573
 
574
+ // Set active nav item
575
+ event.currentTarget.classList.remove('text-gray-500');
576
+ event.currentTarget.classList.add('text-purple-600', 'nav-active');
577
+
578
+ // Update header based on page
579
+ const header = document.getElementById('main-header');
580
+ if (pageId === 'home-page') {
581
+ header.classList.remove('hidden');
582
+ } else {
583
+ header.classList.add('hidden');
584
+ }
585
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
586
 
587
+ // Switch between tabs on home page
588
+ function switchTab(tabId) {
589
+ // Update tab buttons
590
+ document.querySelectorAll('.flex.justify-around button').forEach(tab => {
591
+ tab.classList.remove('tab-active');
592
+ tab.classList.add('text-gray-500');
593
+ });
594
 
595
+ // Add active class to clicked tab
596
+ event.currentTarget.classList.add('tab-active');
597
+ event.currentTarget.classList.remove('text-gray-500');
598
+
599
+ // Hide all tab contents
600
+ document.querySelectorAll('.tab-content').forEach(content => {
601
+ content.classList.add('hidden');
602
+ });
603
+
604
+ // Show selected tab content
605
+ document.getElementById(tabId + '-tab').classList.remove('hidden');
606
+ }
607
+ </script>
608
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=farwew/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
609
+ </html>