Hugging Face's logo

Spaces:
farwew
/
test
Running

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

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +712 -268
index.html CHANGED
@@ -286,324 +286,768 @@
286
  <div>
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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
286
  <div>
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
+ <div class="mt-2 flex items-center">
290
+ <span class="text-xs text-gray-500">8 menit baca</span>
291
+ <span class="mx-2 text-gray-300">•</span>
292
+ <span class="text-xs text-gray-500">2 hari lalu</span>
293
+ </div>
 
 
 
 
 
 
 
 
294
  </div>
295
  </div>
296
  </div>
297
 
298
+ <!-- Article Card 2 -->
299
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
300
+ <div class="flex">
301
+ <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
302
+ <i class="fas fa-money-bill-wave text-blue-600 text-xl"></i>
303
+ </div>
304
+ <div>
305
+ <h4 class="font-semibold">Cara Mengatur Keuangan UMKM</h4>
306
+ <p class="text-sm text-gray-600 mt-1">Tips sederhana untuk mengelola keuangan usaha kecil Anda</p>
307
+ <div class="mt-2 flex items-center">
308
+ <span class="text-xs text-gray-500">12 menit baca</span>
309
+ <span class="mx-2 text-gray-300">•</span>
310
+ <span class="text-xs text-gray-500">5 hari lalu</span>
311
  </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Article Card 3 -->
317
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
318
+ <div class="flex">
319
+ <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
320
+ <i class="fas fa-store text-green-600 text-xl"></i>
321
+ </div>
322
+ <div>
323
+ <h4 class="font-semibold">Strategi Pemasaran Online</h4>
324
+ <p class="text-sm text-gray-600 mt-1">Manfaatkan media sosial untuk menjangkau lebih banyak pelanggan</p>
325
+ <div class="mt-2 flex items-center">
326
+ <span class="text-xs text-gray-500">15 menit baca</span>
327
+ <span class="mx-2 text-gray-300">•</span>
328
+ <span class="text-xs text-gray-500">1 minggu lalu</span>
329
  </div>
330
  </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
336
+ Lihat Semua Artikel
337
+ </button>
338
+ </section>
339
+
340
+ <!-- Webinars Section -->
341
+ <section id="webinar-tab" class="px-4 mt-4 tab-content hidden">
342
+ <div class="flex justify-between items-center mb-3">
343
+ <h3 class="font-semibold text-lg">Webinar Mendatang</h3>
344
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
345
+ </div>
346
+
347
+ <div class="space-y-4">
348
+ <!-- Webinar Card 1 -->
349
+ <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
350
+ <div class="flex">
351
+ <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
352
+ <i class="fas fa-video text-purple-600 text-xl"></i>
353
+ </div>
354
+ <div>
355
+ <h4 class="font-semibold">Memulai Bisnis Kuliner</h4>
356
+ <p class="text-sm text-gray-600 mt-1">Pelajari langkah demi langkah memulai bisnis kuliner</p>
357
+ <div class="mt-2 flex items-center">
358
+ <span class="text-xs text-gray-500"><i class="far fa-calendar mr-1"></i> 15 Juli 2023</span>
359
+ <span class="mx-2 text-gray-300">•</span>
360
+ <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 19:00 WIB</span>
361
  </div>
362
+ <button class="mt-2 text-xs bg-purple-600 text-white px-3 py-1 rounded-full">
363
+ Daftar Sekarang
364
+ </button>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Webinar Card 2 -->
370
+ <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
371
+ <div class="flex">
372
+ <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
373
+ <i class="fas fa-chart-pie text-blue-600 text-xl"></i>
374
+ </div>
375
+ <div>
376
+ <h4 class="font-semibold">Analisis Pasar UMKM</h4>
377
+ <p class="text-sm text-gray-600 mt-1">Pahami kebutuhan pasar untuk produk Anda</p>
378
+ <div class="mt-2 flex items-center">
379
+ <span class="text-xs text-gray-500"><i class="far fa-calendar mr-1"></i> 20 Juli 2023</span>
380
+ <span class="mx-2 text-gray-300">•</span>
381
+ <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 13:00 WIB</span>
382
  </div>
383
+ <button class="mt-2 text-xs bg-purple-600 text-white px-3 py-1 rounded-full">
384
+ Daftar Sekarang
385
+ </button>
386
  </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Webinar Card 3 -->
391
+ <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
392
+ <div class="flex">
393
+ <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
394
+ <i class="fas fa-bullhorn text-green-600 text-xl"></i>
395
+ </div>
396
+ <div>
397
+ <h4 class="font-semibold">Digital Marketing untuk UMKM</h4>
398
+ <p class="text-sm text-gray-600 mt-1">Manfaatkan digital marketing untuk tingkatkan penjualan</p>
399
+ <div class="mt-2 flex items-center">
400
+ <span class="text-xs text-gray-500"><i class="far fa-calendar mr-1"></i> 25 Juli 2023</span>
401
+ <span class="mx-2 text-gray-300">•</span>
402
+ <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 10:00 WIB</span>
403
  </div>
404
+ <button class="mt-2 text-xs bg-purple-600 text-white px-3 py-1 rounded-full">
405
+ Daftar Sekarang
406
+ </button>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
413
+ Lihat Semua Webinar
414
+ </button>
415
+ </section>
416
+
417
+ <!-- Tutorials Section -->
418
+ <section id="tutorial-tab" class="px-4 mt-4 tab-content hidden">
419
+ <div class="flex justify-between items-center mb-3">
420
+ <h3 class="font-semibold text-lg">Tutorial Praktis</h3>
421
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
422
+ </div>
423
+
424
+ <div class="space-y-4">
425
+ <!-- Tutorial Card 1 -->
426
+ <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
427
+ <div class="flex">
428
+ <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
429
+ <i class="fas fa-calculator text-purple-600 text-xl"></i>
430
+ </div>
431
+ <div>
432
+ <h4 class="font-semibold">Hitung HPP Produk</h4>
433
+ <p class="text-sm text-gray-600 mt-1">Cara mudah menghitung harga pokok produksi</p>
434
+ <div class="mt-2 flex items-center">
435
+ <span class="text-xs text-gray-500"><i class="fas fa-play-circle mr-1"></i> Video</span>
436
+ <span class="mx-2 text-gray-300">•</span>
437
+ <span class="text-xs text-gray-500">8 menit</span>
438
  </div>
439
  </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Tutorial Card 2 -->
444
+ <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
445
+ <div class="flex">
446
+ <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
447
+ <i class="fas fa-camera text-blue-600 text-xl"></i>
448
+ </div>
449
+ <div>
450
+ <h4 class="font-semibold">Foto Produk yang Menarik</h4>
451
+ <p class="text-sm text-gray-600 mt-1">Tips memotret produk dengan smartphone</p>
452
+ <div class="mt-2 flex items-center">
453
+ <span class="text-xs text-gray-500"><i class="fas fa-play-circle mr-1"></i> Video</span>
454
+ <span class="mx-2 text-gray-300">•</span>
455
+ <span class="text-xs text-gray-500">12 menit</span>
456
  </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- Tutorial Card 3 -->
462
+ <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
463
+ <div class="flex">
464
+ <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
465
+ <i class="fas fa-file-invoice-dollar text-green-600 text-xl"></i>
466
+ </div>
467
+ <div>
468
+ <h4 class="font-semibold">Buat Invoice Profesional</h4>
469
+ <p class="text-sm text-gray-600 mt-1">Panduan membuat invoice menggunakan Excel</p>
470
+ <div class="mt-2 flex items-center">
471
+ <span class="text-xs text-gray-500"><i class="fas fa-file-pdf mr-1"></i> PDF</span>
472
+ <span class="mx-2 text-gray-300">•</span>
473
+ <span class="text-xs text-gray-500">5 langkah</span>
474
  </div>
475
  </div>
476
  </div>
477
+ </div>
478
+ </div>
479
+
480
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
481
+ Lihat Semua Tutorial
482
+ </button>
483
+ </section>
484
+ </div>
485
+
486
+ <!-- Search Page -->
487
+ <div id="search-page" class="page hidden">
488
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
489
+ <div class="relative">
490
+ <input type="text" placeholder="Cari usaha, artikel, atau webinar..." class="w-full py-3 px-4 pr-10 rounded-full border focus:outline-none focus:ring-2 focus:ring-purple-300">
491
+ <button class="absolute right-3 top-3 text-gray-500">
492
+ <i class="fas fa-search"></i>
493
+ </button>
494
+ </div>
495
+
496
+ <div class="mt-4">
497
+ <h3 class="font-semibold">Kategori Populer</h3>
498
+ <div class="flex flex-wrap gap-2 mt-2">
499
+ <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm">Makanan</span>
500
+ <span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">Fashion</span>
501
+ <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">Pertanian</span>
502
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">Kerajinan</span>
503
+ <span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">Kesehatan</span>
504
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Teknologi</span>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="px-4 mt-4">
510
+ <h3 class="font-semibold">Pencarian Terakhir</h3>
511
+ <div class="mt-2 space-y-2">
512
+ <div class="flex justify-between items-center py-2 border-b">
513
+ <span class="text-gray-600">Bisnis kopi</span>
514
+ <i class="fas fa-times text-gray-400"></i>
515
+ </div>
516
+ <div class="flex justify-between items-center py-2 border-b">
517
+ <span class="text-gray-600">Modal usaha kecil</span>
518
+ <i class="fas fa-times text-gray-400"></i>
519
+ </div>
520
+ <div class="flex justify-between items-center py-2 border-b">
521
+ <span class="text-gray-600">Resep kue</span>
522
+ <i class="fas fa-times text-gray-400"></i>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Dashboard Page -->
529
+ <div id="dashboard-page" class="page hidden">
530
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
531
+ <div class="flex justify-between items-center">
532
+ <h1 class="text-xl font-bold">Dashboard UMKM</h1>
533
+ <div class="flex items-center space-x-2">
534
+ <button class="text-gray-500">
535
+ <i class="fas fa-filter"></i>
536
+ </button>
537
+ <button class="text-gray-500">
538
+ <i class="fas fa-calendar-alt"></i>
539
+ </button>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="px-4 mt-4 space-y-4">
545
+ <!-- Quick Stats -->
546
+ <div class="grid grid-cols-2 gap-3">
547
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
548
+ <div class="flex items-center justify-between">
549
+ <div>
550
+ <p class="text-sm text-gray-500">Total Penjualan</p>
551
+ <h3 class="text-xl font-bold">Rp 12.450.000</h3>
552
+ </div>
553
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
554
+ <i class="fas fa-shopping-cart text-purple-600"></i>
555
+ </div>
556
+ </div>
557
+ <div class="mt-2">
558
+ <span class="stat-badge bg-green-100 text-green-600">
559
+ <i class="fas fa-arrow-up mr-1"></i> 12% dari bulan lalu
560
+ </span>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
565
+ <div class="flex items-center justify-between">
566
+ <div>
567
+ <p class="text-sm text-gray-500">Pelanggan</p>
568
+ <h3 class="text-xl font-bold">143</h3>
569
+ </div>
570
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
571
+ <i class="fas fa-users text-blue-600"></i>
572
+ </div>
573
+ </div>
574
+ <div class="mt-2">
575
+ <span class="stat-badge bg-green-100 text-green-600">
576
+ <i class="fas fa-arrow-up mr-1"></i> 8% dari bulan lalu
577
+ </span>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
582
+ <div class="flex items-center justify-between">
583
+ <div>
584
+ <p class="text-sm text-gray-500">Produk Terjual</p>
585
+ <h3 class="text-xl font-bold">287</h3>
586
+ </div>
587
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
588
+ <i class="fas fa-box-open text-yellow-600"></i>
589
+ </div>
590
+ </div>
591
+ <div class="mt-2">
592
+ <span class="stat-badge bg-red-100 text-red-600">
593
+ <i class="fas fa-arrow-down mr-1"></i> 5% dari bulan lalu
594
+ </span>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
599
+ <div class="flex items-center justify-between">
600
+ <div>
601
+ <p class="text-sm text-gray-500">Rating</p>
602
+ <h3 class="text-xl font-bold">4.7</h3>
603
+ </div>
604
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
605
+ <i class="fas fa-star text-green-600"></i>
606
+ </div>
607
+ </div>
608
+ <div class="mt-2">
609
+ <span class="stat-badge bg-green-100 text-green-600">
610
+ <i class="fas fa-arrow-up mr-1"></i> 0.2 dari bulan lalu
611
+ </span>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <!-- Sales Chart -->
617
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
618
+ <div class="flex justify-between items-center mb-4">
619
+ <h3 class="font-semibold">Perkembangan Penjualan</h3>
620
+ <select class="text-sm border rounded px-2 py-1">
621
+ <option>Bulan Ini</option>
622
+ <option>3 Bulan Terakhir</option>
623
+ <option>Tahun Ini</option>
624
+ </select>
625
+ </div>
626
+ <div class="chart-container">
627
+ <!-- Placeholder for chart -->
628
+ <div class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center">
629
+ <p class="text-gray-500">Grafik penjualan akan muncul di sini</p>
630
+ </div>
631
+ </div>
632
+ </div>
633
+
634
+ <!-- Goals Progress -->
635
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
636
+ <h3 class="font-semibold mb-4">Target Bulanan</h3>
637
+
638
+ <div class="space-y-3">
639
+ <div>
640
+ <div class="flex justify-between mb-1">
641
+ <span class="text-sm font-medium">Target Penjualan</span>
642
+ <span class="text-sm font-medium">65%</span>
643
+ </div>
644
+ <div class="goal-progress">
645
+ <div class="goal-progress-fill" style="width: 65%"></div>
646
+ </div>
647
+ <p class="text-xs text-gray-500 mt-1">Rp 12.450.000 dari Rp 19.000.000</p>
648
+ </div>
649
 
650
+ <div>
651
+ <div class="flex justify-between mb-1">
652
+ <span class="text-sm font-medium">Target Pelanggan Baru</span>
653
+ <span class="text-sm font-medium">80%</span>
 
 
 
 
 
 
 
 
 
 
 
654
  </div>
655
+ <div class="goal-progress">
656
+ <div class="goal-progress-fill" style="width: 80%"></div>
657
+ </div>
658
+ <p class="text-xs text-gray-500 mt-1">32 dari 40 pelanggan baru</p>
659
  </div>
660
 
661
+ <div>
662
+ <div class="flex justify-between mb-1">
663
+ <span class="text-sm font-medium">Target Produk Baru</span>
664
+ <span class="text-sm font-medium">40%</span>
665
+ </div>
666
+ <div class="goal-progress">
667
+ <div class="goal-progress-fill" style="width: 40%"></div>
668
+ </div>
669
+ <p class="text-xs text-gray-500 mt-1">2 dari 5 produk baru</p>
670
+ </div>
671
+ </div>
672
+
673
+ <button class="w-full mt-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
674
+ Atur Target Baru
675
+ </button>
676
+ </div>
677
+
678
+ <!-- Recent Activities -->
679
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
680
+ <div class="flex justify-between items-center mb-4">
681
+ <h3 class="font-semibold">Aktivitas Terkini</h3>
682
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
683
+ </div>
684
+
685
+ <div class="space-y-4">
686
+ <div class="flex items-start">
687
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1">
688
+ <i class="fas fa-shopping-cart text-green-600"></i>
689
+ </div>
690
+ <div>
691
+ <h4 class="font-medium">Pesanan Baru #ORD-287</h4>
692
+ <p class="text-sm text-gray-600">Rp 450.000 • 2 produk</p>
693
+ <p class="text-xs text-gray-500 mt-1">Hari ini, 14:32</p>
694
+ </div>
695
+ </div>
696
+
697
+ <div class="flex items-start">
698
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
699
+ <i class="fas fa-user-plus text-blue-600"></i>
700
+ </div>
701
+ <div>
702
+ <h4 class="font-medium">Pelanggan Baru</h4>
703
+ <p class="text-sm text-gray-600">Siti Nurhaliza • Jakarta</p>
704
+ <p class="text-xs text-gray-500 mt-1">Kemarin, 18:15</p>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="flex items-start">
709
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3 mt-1">
710
+ <i class="fas fa-star text-yellow-600"></i>
711
+ </div>
712
+ <div>
713
+ <h4 class="font-medium">Ulasan Baru</h4>
714
+ <p class="text-sm text-gray-600">5 bintang • "Produk sangat berkualitas"</p>
715
+ <p class="text-xs text-gray-500 mt-1">Kemarin, 10:42</p>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <!-- Milestones -->
722
+ <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm">
723
+ <div class="flex justify-between items-center mb-4">
724
+ <h3 class="font-semibold">Pencapaian</h3>
725
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
726
+ </div>
727
+
728
+ <div class="space-y-3">
729
+ <div class="milestone-card bg-gray-50 p-3 rounded-r">
730
+ <div class="flex items-center">
731
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
732
+ <i class="fas fa-trophy text-purple-600"></i>
733
  </div>
 
734
  <div>
735
+ <h4 class="font-medium">Penjualan Rp 10 Juta</h4>
736
+ <p class="text-xs text-gray-500">Pencapaian pertama kali melewati Rp 10 juta dalam sebulan</p>
737
+ </div>
738
+ </div>
739
+ </div>
740
+
741
+ <div class="milestone-card bg-gray-50 p-3 rounded-r">
742
+ <div class="flex items-center">
743
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
744
+ <i class="fas fa-users text-blue-600"></i>
745
  </div>
 
746
  <div>
747
+ <h4 class="font-medium">100 Pelanggan</h4>
748
+ <p class="text-xs text-gray-500">Total pelanggan mencapai 100 orang</p>
 
 
 
 
 
 
749
  </div>
750
  </div>
 
 
 
 
751
  </div>
752
 
753
+ <div class="milestone-card bg-gray-50 p-3 rounded-r">
754
+ <div class="flex items-center">
755
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
756
+ <i class="fas fa-star text-green-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
757
  </div>
758
+ <div>
759
+ <h4 class="font-medium">Rating 4.5+</h4>
760
+ <p class="text-xs text-gray-500">Pertahankan rating di atas 4.5 selama 3 bulan</p>
 
 
 
 
 
 
 
761
  </div>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- Articles Page -->
770
+ <div id="article-page" class="page hidden">
771
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
772
+ <h1 class="text-xl font-bold">Artikel UMKM</h1>
773
+ <div class="mt-2 relative">
774
+ <input type="text" placeholder="Cari artikel..." class="w-full py-3 px-4 pr-10 rounded-full border focus:outline-none focus:ring-2 focus:ring-purple-300">
775
+ <button class="absolute right-3 top-3 text-gray-500">
776
+ <i class="fas fa-search"></i>
777
+ </button>
778
+ </div>
779
+ </div>
780
+
781
+ <div class="px-4 mt-4">
782
+ <div class="flex justify-between items-center mb-3">
783
+ <h3 class="font-semibold">Kategori Populer</h3>
784
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
785
+ </div>
786
+
787
+ <div class="flex overflow-x-auto gap-3 pb-2">
788
+ <div class="flex-shrink-0 w-24 h-24 bg-purple-100 rounded-xl flex flex-col items-center justify-center">
789
+ <i class="fas fa-chart-line text-purple-600 text-xl mb-1"></i>
790
+ <span class="text-xs font-medium">Strategi</span>
791
+ </div>
792
+ <div class="flex-shrink-0 w-24 h-24 bg-blue-100 rounded-xl flex flex-col items-center justify-center">
793
+ <i class="fas fa-money-bill-wave text-blue-600 text-xl mb-1"></i>
794
+ <span class="text-xs font-medium">Keuangan</span>
795
+ </div>
796
+ <div class="flex-shrink-0 w-24 h-24 bg-green-100 rounded-xl flex flex-col items-center justify-center">
797
+ <i class="fas fa-store text-green-600 text-xl mb-1"></i>
798
+ <span class="text-xs font-medium">Pemasaran</span>
799
+ </div>
800
+ <div class="flex-shrink-0 w-24 h-24 bg-yellow-100 rounded-xl flex flex-col items-center justify-center">
801
+ <i class="fas fa-utensils text-yellow-600 text-xl mb-1"></i>
802
+ <span class="text-xs font-medium">Kuliner</span>
803
+ </div>
804
+ <div class="flex-shrink-0 w-24 h-24 bg-red-100 rounded-xl flex flex-col items-center justify-center">
805
+ <i class="fas fa-tshirt text-red-600 text-xl mb-1"></i>
806
+ <span class="text-xs font-medium">Fashion</span>
807
+ </div>
808
+ </div>
809
+
810
+ <div class="mt-6">
811
+ <div class="flex justify-between items-center mb-3">
812
+ <h3 class="font-semibold">Artikel Terbaru</h3>
813
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
814
+ </div>
815
+
816
+ <div class="space-y-4">
817
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
818
+ <div class="flex">
819
+ <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
820
+ <i class="fas fa-chart-line text-purple-600 text-xl"></i>
821
+ </div>
822
+ <div>
823
+ <h4 class="font-semibold">5 Tren Bisnis Makanan 2023</h4>
824
+ <p class="text-sm text-gray-600 mt-1">Pelajari jenis makanan yang sedang booming di pasaran</p>
825
+ <div class="mt-2 flex items-center">
826
+ <span class="text-xs text-gray-500">8 menit baca</span>
827
+ <span class="mx-2 text-gray-300">•</span>
828
+ <span class="text-xs text-gray-500">2 hari lalu</span>
829
  </div>
830
  </div>
831
  </div>
832
  </div>
833
 
834
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
835
+ <div class="flex">
836
+ <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
837
+ <i class="fas fa-money-bill-wave text-blue-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
838
  </div>
839
+ <div>
840
+ <h4 class="font-semibold">Cara Mengatur Keuangan UMKM</h4>
841
+ <p class="text-sm text-gray-600 mt-1">Tips sederhana untuk mengelola keuangan usaha kecil Anda</p>
842
+ <div class="mt-2 flex items-center">
843
+ <span class="text-xs text-gray-500">12 menit baca</span>
844
+ <span class="mx-2 text-gray-300">•</span>
845
+ <span class="text-xs text-gray-500">5 hari lalu</span>
 
 
 
846
  </div>
847
  </div>
848
+ </div>
849
+ </div>
850
+
851
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
852
+ <div class="flex">
853
+ <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
854
+ <i class="fas fa-store text-green-600 text-xl"></i>
855
+ </div>
856
+ <div>
857
+ <h4 class="font-semibold">Strategi Pemasaran Online</h4>
858
+ <p class="text-sm text-gray-600 mt-1">Manfaatkan media sosial untuk menjangkau lebih banyak pelanggan</p>
859
+ <div class="mt-2 flex items-center">
860
+ <span class="text-xs text-gray-500">15 menit baca</span>
861
+ <span class="mx-2 text-gray-300">•</span>
862
+ <span class="text-xs text-gray-500">1 minggu lalu</span>
863
  </div>
864
  </div>
865
  </div>
866
  </div>
867
  </div>
868
  </div>
869
+ </div>
870
+ </div>
871
 
872
+ <!-- Profile Page -->
873
+ <div id="profile-page" class="page hidden">
874
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
875
+ <div class="flex justify-between items-center">
876
+ <h1 class="text-xl font-bold">Profil Saya</h1>
877
+ <button class="text-purple-600">
878
+ <i class="fas fa-ellipsis-h"></i>
879
+ </button>
880
+ </div>
881
+ </div>
882
+
883
+ <div class="px-4 mt-4">
884
+ <div class="bg-white p-4 rounded-xl shadow-sm">
885
+ <div class="flex flex-col items-center">
886
+ <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mb-3">
887
+ <i class="fas fa-user text-purple-600 text-2xl"></i>
888
+ </div>
889
+ <h3 class="font-semibold">Budi Santoso</h3>
890
+ <p class="text-sm text-gray-500">Pemilik UMKM Makanan</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
891
 
892
+ <div class="mt-4 w-full">
893
+ <div class="flex justify-between mb-1">
894
+ <span class="text-sm font-medium">Profil UMKM</span>
895
+ <span class="text-sm font-medium">65%</span>
896
+ </div>
897
+ <div class="progress-bar">
898
+ <div class="progress-fill" style="width: 65%"></div>
899
+ </div>
900
+ </div>
901
+ </div>
902
+
903
+ <div class="mt-6 space-y-4">
904
+ <div class="flex items-center justify-between py-2 border-b">
905
+ <div class="flex items-center">
906
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
907
+ <i class="fas fa-store text-purple-600"></i>
908
+ </div>
909
+ <span>UMKM Saya</span>
910
+ </div>
911
+ <i class="fas fa-chevron-right text-gray-400"></i>
912
+ </div>
913
 
914
+ <div class="flex items-center justify-between py-2 border-b">
915
+ <div class="flex items-center">
916
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
917
+ <i class="fas fa-cog text-blue-600"></i>
918
+ </div>
919
+ <span>Pengaturan</span>
920
+ </div>
921
+ <i class="fas fa-chevron-right text-gray-400"></i>
922
+ </div>
923
 
924
+ <div class="flex items-center justify-between py-2 border-b">
925
+ <div class="flex items-center">
926
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
927
+ <i class="fas fa-question-circle text-green-600"></i>
928
+ </div>
929
+ <span>Bantuan</span>
930
+ </div>
931
+ <i class="fas fa-chevron-right text-gray-400"></i>
932
+ </div>
933
 
934
+ <div class="flex items-center justify-between py-2">
935
+ <div class="flex items-center">
936
+ <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
937
+ <i class="fas fa-sign-out-alt text-red-600"></i>
938
+ </div>
939
+ <span>Keluar</span>
940
+ </div>
941
+ <i class="fas fa-chevron-right text-gray-400"></i>
942
+ </div>
943
+ </div>
944
+ </div>
945
+
946
+ <div class="mt-4 bg-white p-4 rounded-xl shadow-sm">
947
+ <h3 class="font-semibold mb-3">Pencapaian Saya</h3>
948
 
949
+ <div class="grid grid-cols-3 gap-2">
950
+ <div class="flex flex-col items-center p-2">
951
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-1">
952
+ <i class="fas fa-trophy text-purple-600"></i>
953
+ </div>
954
+ <span class="text-xs text-center">Pemula</span>
955
+ </div>
 
 
 
 
956
 
957
+ <div class="flex flex-col items-center p-2">
958
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-1">
959
+ <i class="fas fa-fire text-blue-600"></i>
960
+ </div>
961
+ <span class="text-xs text-center">5 Hari Berturut-turut</span>
962
+ </div>
963
 
964
+ <div class="flex flex-col items-center p-2">
965
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-1">
966
+ <i class="fas fa-book text-green-600"></i>
967
+ </div>
968
+ <span class="text-xs text-center">Pembaca Aktif</span>
969
+ </div>
970
+ </div>
971
+ </div>
972
+ </div>
973
+ </div>
974
+
975
+ <!-- Bottom Navigation -->
976
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around py-3 max-w-md mx-auto">
977
+ <a href="#" class="flex flex-col items-center text-purple-600 nav-active" onclick="switchPage('home-page')">
978
+ <i class="fas fa-home text-lg"></i>
979
+ <span class="text-xs mt-1">Beranda</span>
980
+ </a>
981
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('search-page')">
982
+ <i class="fas fa-search text-lg"></i>
983
+ <span class="text-xs mt-1">Cari</span>
984
+ </a>
985
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('dashboard-page')">
986
+ <i class="fas fa-chart-line text-lg"></i>
987
+ <span class="text-xs mt-1">Dashboard</span>
988
+ </a>
989
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('article-page')">
990
+ <i class="fas fa-book-open text-lg"></i>
991
+ <span class="text-xs mt-1">Artikel</span>
992
+ </a>
993
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('profile-page')">
994
+ <i class="fas fa-user text-lg"></i>
995
+ <span class="text-xs mt-1">Profil</span>
996
+ </a>
997
+ </nav>
998
+
999
+ <script>
1000
+ // Switch between pages
1001
+ function switchPage(pageId) {
1002
+ // Hide all pages
1003
+ document.querySelectorAll('.page').forEach(page => {
1004
+ page.classList.remove('page-active');
1005
+ page.classList.add('hidden');
1006
+ });
1007
+
1008
+ // Show selected page
1009
+ document.getElementById(pageId).classList.remove('hidden');
1010
+ document.getElementById(pageId).classList.add('page-active');
1011
+
1012
+ // Update active nav item
1013
+ document.querySelectorAll('nav a').forEach(navItem => {
1014
+ navItem.classList.remove('text-purple-600', 'nav-active');
1015
+ navItem.classList.add('text-gray-500');
1016
+ });
1017
+
1018
+ // Set active nav item
1019
+ event.currentTarget.classList.remove('text-gray-500');
1020
+ event.currentTarget.classList.add('text-purple-600', 'nav-active');
1021
+
1022
+ // Update header based on page
1023
+ const header = document.getElementById('main-header');
1024
+ if (pageId === 'home-page') {
1025
+ header.classList.remove('hidden');
1026
+ } else {
1027
+ header.classList.add('hidden');
1028
+ }
1029
+ }
1030
+
1031
+ // Switch between tabs on home page
1032
+ function switchTab(tabId) {
1033
+ // Update tab buttons
1034
+ document.querySelectorAll('.flex.justify-around button').forEach(tab => {
1035
+ tab.classList.remove('tab-active');
1036
+ tab.classList.add('text-gray-500');
1037
+ });
1038
+
1039
+ // Add active class to clicked tab
1040
+ event.currentTarget.classList.add('tab-active');
1041
+ event.currentTarget.classList.remove('text-gray-500');
1042
+
1043
+ // Hide all tab contents
1044
+ document.querySelectorAll('.tab-content').forEach(content => {
1045
+ content.classList.add('hidden');
1046
+ });
1047
+
1048
+ // Show selected tab content
1049
+ document.getElementById(tabId + '-tab').classList.remove('hidden');
1050
+ }
1051
+ </script>
1052
+ <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>
1053
+ </html>