Download index.html from farwew/test: direct link, hf CLI and curl.
- Browser
- Download file 54.1 kB
-
https://huggingface.co/spaces/farwew/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/farwew/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/farwew/test/resolve/main/index.html
54.1 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cuan.in - Temukan Usaha UMKM Terbaik untuk Anda</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); | |
| } | |
| .business-card, .article-card, .webinar-card, .tutorial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .business-card:hover, .article-card:hover, .webinar-card:hover, .tutorial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e5e7eb; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 100%); | |
| transition: width 0.5s ease; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #4f46e5; | |
| color: #4f46e5; | |
| font-weight: 600; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page-active { | |
| display: block; | |
| } | |
| .nav-active { | |
| color: #4f46e5; | |
| } | |
| /* Dashboard specific styles */ | |
| .dashboard-card { | |
| border-radius: 12px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .stat-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .chart-container { | |
| height: 200px; | |
| position: relative; | |
| } | |
| .goal-progress { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e5e7eb; | |
| overflow: hidden; | |
| } | |
| .goal-progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 100%); | |
| } | |
| .milestone-card { | |
| border-left: 4px solid #4f46e5; | |
| transition: all 0.3s ease; | |
| } | |
| .milestone-card:hover { | |
| transform: translateX(5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="max-w-md mx-auto bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white p-4 rounded-b-2xl shadow-lg" id="main-header"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-coins text-purple-600 text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold">Cuan.in</h1> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-white bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="bg-white bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h2 class="text-xl font-semibold">Halo, Budi!</h2> | |
| <p class="text-purple-100">Temukan usaha UMKM yang cocok untuk Anda</p> | |
| <div class="mt-4 relative"> | |
| <input type="text" placeholder="Cari jenis usaha..." class="w-full py-3 px-4 pr-10 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-300"> | |
| <button class="absolute right-3 top-3 text-purple-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Home Page --> | |
| <div id="home-page" class="page page-active"> | |
| <!-- Progress Section --> | |
| <section class="bg-white mx-4 mt-6 p-4 rounded-xl shadow-sm"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium text-gray-700">Profil UMKM Anda</h3> | |
| <span class="text-sm text-purple-600">65% lengkap</span> | |
| </div> | |
| <div class="progress-bar mb-2"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500">Lengkapi profil untuk rekomendasi usaha yang lebih akurat</p> | |
| <button class="mt-3 w-full py-2 bg-purple-100 text-purple-600 rounded-lg font-medium hover:bg-purple-200 transition"> | |
| Lengkapi Profil | |
| </button> | |
| </section> | |
| <!-- Tabs Navigation --> | |
| <div class="flex justify-around mt-6 px-4 border-b"> | |
| <button class="tab-active pb-2 px-4" onclick="switchTab('recommendation')">Rekomendasi</button> | |
| <button class="text-gray-500 pb-2 px-4" onclick="switchTab('article')">Artikel</button> | |
| <button class="text-gray-500 pb-2 px-4" onclick="switchTab('webinar')">Webinar</button> | |
| <button class="text-gray-500 pb-2 px-4" onclick="switchTab('tutorial')">Tutorial</button> | |
| </div> | |
| <!-- Business Recommendations --> | |
| <section id="recommendation-tab" class="px-4 mt-4 tab-content"> | |
| <h3 class="font-semibold text-lg mb-3">Rekomendasi untuk Anda</h3> | |
| <div class="space-y-4"> | |
| <!-- Business Card 1 --> | |
| <div class="business-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-utensils text-yellow-500 text-2xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-semibold">Warung Makan Sederhana</h4> | |
| <div class="flex items-center mt-1"> | |
| <i class="fas fa-map-marker-alt text-gray-400 text-xs mr-1"></i> | |
| <span class="text-xs text-gray-500">Cocok di daerah Anda (Jakarta Selatan)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-gray-500">Estimasi Modal</p> | |
| <p class="font-medium">Rp 5-10 juta</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Potensi Keuntungan</p> | |
| <p class="font-medium text-green-500">Rp 2-4 juta/bulan</p> | |
| </div> | |
| <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition"> | |
| Detail | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Business Card 2 --> | |
| <div class="business-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-tshirt text-blue-500 text-2xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-semibold">Bisnis Kaos Distro</h4> | |
| <div class="flex items-center mt-1"> | |
| <i class="fas fa-map-marker-alt text-gray-400 text-xs mr-1"></i> | |
| <span class="text-xs text-gray-500">Cocok di daerah Anda (Jakarta Selatan)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-gray-500">Estimasi Modal</p> | |
| <p class="font-medium">Rp 8-15 juta</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Potensi Keuntungan</p> | |
| <p class="font-medium text-green-500">Rp 3-6 juta/bulan</p> | |
| </div> | |
| <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition"> | |
| Detail | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Business Card 3 --> | |
| <div class="business-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-seedling text-green-500 text-2xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-semibold">Tanaman Hias Mini</h4> | |
| <div class="flex items-center mt-1"> | |
| <i class="fas fa-map-marker-alt text-gray-400 text-xs mr-1"></i> | |
| <span class="text-xs text-gray-500">Cocok di daerah Anda (Jakarta Selatan)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-gray-500">Estimasi Modal</p> | |
| <p class="font-medium">Rp 3-7 juta</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Potensi Keuntungan</p> | |
| <p class="font-medium text-green-500">Rp 1.5-3 juta/bulan</p> | |
| </div> | |
| <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition"> | |
| Detail | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition"> | |
| Lihat Semua Rekomendasi | |
| </button> | |
| </section> | |
| <!-- Articles Section --> | |
| <section id="article-tab" class="px-4 mt-4 tab-content hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold text-lg">Artikel Terbaru</h3> | |
| <a href="#" class="text-sm text-purple-600">Lihat semua</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Article Card 1 --> | |
| <div class="article-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">5 Tren Bisnis Makanan 2023</h4> | |
| <p class="text-sm text-gray-600 mt-1">Pelajari jenis makanan yang sedang booming di pasaran</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500">8 menit baca</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">2 hari lalu</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article Card 2 --> | |
| <div class="article-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-money-bill-wave text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Cara Mengatur Keuangan UMKM</h4> | |
| <p class="text-sm text-gray-600 mt-1">Tips sederhana untuk mengelola keuangan usaha kecil Anda</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500">12 menit baca</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">5 hari lalu</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article Card 3 --> | |
| <div class="article-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-store text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Strategi Pemasaran Online</h4> | |
| <p class="text-sm text-gray-600 mt-1">Manfaatkan media sosial untuk menjangkau lebih banyak pelanggan</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500">15 menit baca</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">1 minggu lalu</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition"> | |
| Lihat Semua Artikel | |
| </button> | |
| </section> | |
| <!-- Webinars Section --> | |
| <section id="webinar-tab" class="px-4 mt-4 tab-content hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold text-lg">Webinar Mendatang</h3> | |
| <a href="#" class="text-sm text-purple-600">Lihat semua</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Webinar Card 1 --> | |
| <div class="webinar-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-video text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Memulai Bisnis Kuliner</h4> | |
| <p class="text-sm text-gray-600 mt-1">Pelajari langkah demi langkah memulai bisnis kuliner</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500"><i class="far fa-calendar mr-1"></i> 15 Juli 2023</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 19:00 WIB</span> | |
| </div> | |
| <button class="mt-2 text-xs bg-purple-600 text-white px-3 py-1 rounded-full"> | |
| Daftar Sekarang | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Webinar Card 2 --> | |
| <div class="webinar-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-pie text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Analisis Pasar UMKM</h4> | |
| <p class="text-sm text-gray-600 mt-1">Pahami kebutuhan pasar untuk produk Anda</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500"><i class="far fa-calendar mr-1"></i> 20 Juli 2023</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 13:00 WIB</span> | |
| </div> | |
| <button class="mt-2 text-xs bg-purple-600 text-white px-3 py-1 rounded-full"> | |
| Daftar Sekarang | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Webinar Card 3 --> | |
| <div class="webinar-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-bullhorn text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Digital Marketing untuk UMKM</h4> | |
| <p class="text-sm text-gray-600 mt-1">Manfaatkan digital marketing untuk tingkatkan penjualan</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500"><i class="far fa-calendar mr-1"></i> 25 Juli 2023</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> 10:00 WIB</span> | |
| </div> | |
| <button class="mt-2 text-xs bg-purple-600 text-white px-3 py-1 rounded-full"> | |
| Daftar Sekarang | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition"> | |
| Lihat Semua Webinar | |
| </button> | |
| </section> | |
| <!-- Tutorials Section --> | |
| <section id="tutorial-tab" class="px-4 mt-4 tab-content hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold text-lg">Tutorial Praktis</h3> | |
| <a href="#" class="text-sm text-purple-600">Lihat semua</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Tutorial Card 1 --> | |
| <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-calculator text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Hitung HPP Produk</h4> | |
| <p class="text-sm text-gray-600 mt-1">Cara mudah menghitung harga pokok produksi</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500"><i class="fas fa-play-circle mr-1"></i> Video</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">8 menit</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tutorial Card 2 --> | |
| <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-camera text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Foto Produk yang Menarik</h4> | |
| <p class="text-sm text-gray-600 mt-1">Tips memotret produk dengan smartphone</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500"><i class="fas fa-play-circle mr-1"></i> Video</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">12 menit</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tutorial Card 3 --> | |
| <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-invoice-dollar text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Buat Invoice Profesional</h4> | |
| <p class="text-sm text-gray-600 mt-1">Panduan membuat invoice menggunakan Excel</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500"><i class="fas fa-file-pdf mr-1"></i> PDF</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">5 langkah</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition"> | |
| Lihat Semua Tutorial | |
| </button> | |
| </section> | |
| </div> | |
| <!-- Search Page --> | |
| <div id="search-page" class="page hidden"> | |
| <div class="bg-white p-4 rounded-b-xl shadow-sm"> | |
| <div class="relative"> | |
| <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"> | |
| <button class="absolute right-3 top-3 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-semibold">Kategori Populer</h3> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm">Makanan</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">Fashion</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">Pertanian</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">Kerajinan</span> | |
| <span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm">Kesehatan</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Teknologi</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 mt-4"> | |
| <h3 class="font-semibold">Pencarian Terakhir</h3> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex justify-between items-center py-2 border-b"> | |
| <span class="text-gray-600">Bisnis kopi</span> | |
| <i class="fas fa-times text-gray-400"></i> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b"> | |
| <span class="text-gray-600">Modal usaha kecil</span> | |
| <i class="fas fa-times text-gray-400"></i> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b"> | |
| <span class="text-gray-600">Resep kue</span> | |
| <i class="fas fa-times text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard Page --> | |
| <div id="dashboard-page" class="page hidden"> | |
| <div class="bg-white p-4 rounded-b-xl shadow-sm"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-xl font-bold">Dashboard UMKM</h1> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 mt-4 space-y-4"> | |
| <!-- Quick Stats --> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Penjualan</p> | |
| <h3 class="text-xl font-bold">Rp 12.450.000</h3> | |
| </div> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="stat-badge bg-green-100 text-green-600"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% dari bulan lalu | |
| </span> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Pelanggan</p> | |
| <h3 class="text-xl font-bold">143</h3> | |
| </div> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-users text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="stat-badge bg-green-100 text-green-600"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8% dari bulan lalu | |
| </span> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Produk Terjual</p> | |
| <h3 class="text-xl font-bold">287</h3> | |
| </div> | |
| <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-box-open text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="stat-badge bg-red-100 text-red-600"> | |
| <i class="fas fa-arrow-down mr-1"></i> 5% dari bulan lalu | |
| </span> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Rating</p> | |
| <h3 class="text-xl font-bold">4.7</h3> | |
| </div> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-star text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="stat-badge bg-green-100 text-green-600"> | |
| <i class="fas fa-arrow-up mr-1"></i> 0.2 dari bulan lalu | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sales Chart --> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">Perkembangan Penjualan</h3> | |
| <select class="text-sm border rounded px-2 py-1"> | |
| <option>Bulan Ini</option> | |
| <option>3 Bulan Terakhir</option> | |
| <option>Tahun Ini</option> | |
| </select> | |
| </div> | |
| <div class="chart-container"> | |
| <!-- Placeholder for chart --> | |
| <div class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-500">Grafik penjualan akan muncul di sini</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Goals Progress --> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <h3 class="font-semibold mb-4">Target Bulanan</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Target Penjualan</span> | |
| <span class="text-sm font-medium">65%</span> | |
| </div> | |
| <div class="goal-progress"> | |
| <div class="goal-progress-fill" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Rp 12.450.000 dari Rp 19.000.000</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Target Pelanggan Baru</span> | |
| <span class="text-sm font-medium">80%</span> | |
| </div> | |
| <div class="goal-progress"> | |
| <div class="goal-progress-fill" style="width: 80%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">32 dari 40 pelanggan baru</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Target Produk Baru</span> | |
| <span class="text-sm font-medium">40%</span> | |
| </div> | |
| <div class="goal-progress"> | |
| <div class="goal-progress-fill" style="width: 40%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">2 dari 5 produk baru</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition"> | |
| Atur Target Baru | |
| </button> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">Aktivitas Terkini</h3> | |
| <a href="#" class="text-sm text-purple-600">Lihat semua</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-shopping-cart text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Pesanan Baru #ORD-287</h4> | |
| <p class="text-sm text-gray-600">Rp 450.000 • 2 produk</p> | |
| <p class="text-xs text-gray-500 mt-1">Hari ini, 14:32</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-user-plus text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Pelanggan Baru</h4> | |
| <p class="text-sm text-gray-600">Siti Nurhaliza • Jakarta</p> | |
| <p class="text-xs text-gray-500 mt-1">Kemarin, 18:15</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-star text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Ulasan Baru</h4> | |
| <p class="text-sm text-gray-600">5 bintang • "Produk sangat berkualitas"</p> | |
| <p class="text-xs text-gray-500 mt-1">Kemarin, 10:42</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Milestones --> | |
| <div class="dashboard-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">Pencapaian</h3> | |
| <a href="#" class="text-sm text-purple-600">Lihat semua</a> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="milestone-card bg-gray-50 p-3 rounded-r"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-trophy text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Penjualan Rp 10 Juta</h4> | |
| <p class="text-xs text-gray-500">Pencapaian pertama kali melewati Rp 10 juta dalam sebulan</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="milestone-card bg-gray-50 p-3 rounded-r"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-users text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">100 Pelanggan</h4> | |
| <p class="text-xs text-gray-500">Total pelanggan mencapai 100 orang</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="milestone-card bg-gray-50 p-3 rounded-r"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-star text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Rating 4.5+</h4> | |
| <p class="text-xs text-gray-500">Pertahankan rating di atas 4.5 selama 3 bulan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Articles Page --> | |
| <div id="article-page" class="page hidden"> | |
| <div class="bg-white p-4 rounded-b-xl shadow-sm"> | |
| <h1 class="text-xl font-bold">Artikel UMKM</h1> | |
| <div class="mt-2 relative"> | |
| <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"> | |
| <button class="absolute right-3 top-3 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-4 mt-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">Kategori Populer</h3> | |
| <a href="#" class="text-sm text-purple-600">Lihat semua</a> | |
| </div> | |
| <div class="flex overflow-x-auto gap-3 pb-2"> | |
| <div class="flex-shrink-0 w-24 h-24 bg-purple-100 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-chart-line text-purple-600 text-xl mb-1"></i> | |
| <span class="text-xs font-medium">Strategi</span> | |
| </div> | |
| <div class="flex-shrink-0 w-24 h-24 bg-blue-100 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-money-bill-wave text-blue-600 text-xl mb-1"></i> | |
| <span class="text-xs font-medium">Keuangan</span> | |
| </div> | |
| <div class="flex-shrink-0 w-24 h-24 bg-green-100 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-store text-green-600 text-xl mb-1"></i> | |
| <span class="text-xs font-medium">Pemasaran</span> | |
| </div> | |
| <div class="flex-shrink-0 w-24 h-24 bg-yellow-100 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-utensils text-yellow-600 text-xl mb-1"></i> | |
| <span class="text-xs font-medium">Kuliner</span> | |
| </div> | |
| <div class="flex-shrink-0 w-24 h-24 bg-red-100 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-tshirt text-red-600 text-xl mb-1"></i> | |
| <span class="text-xs font-medium">Fashion</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">Artikel Terbaru</h3> | |
| <a href="#" class="text-sm text-purple-600">Lihat semua</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="article-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">5 Tren Bisnis Makanan 2023</h4> | |
| <p class="text-sm text-gray-600 mt-1">Pelajari jenis makanan yang sedang booming di pasaran</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500">8 menit baca</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">2 hari lalu</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="article-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-money-bill-wave text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Cara Mengatur Keuangan UMKM</h4> | |
| <p class="text-sm text-gray-600 mt-1">Tips sederhana untuk mengelola keuangan usaha kecil Anda</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500">12 menit baca</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">5 hari lalu</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="article-card bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex"> | |
| <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-store text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Strategi Pemasaran Online</h4> | |
| <p class="text-sm text-gray-600 mt-1">Manfaatkan media sosial untuk menjangkau lebih banyak pelanggan</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500">15 menit baca</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-xs text-gray-500">1 minggu lalu</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Page --> | |
| <div id="profile-page" class="page hidden"> | |
| <div class="bg-white p-4 rounded-b-xl shadow-sm"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-xl font-bold">Profil Saya</h1> | |
| <button class="text-purple-600"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-4 mt-4"> | |
| <div class="bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-user text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold">Budi Santoso</h3> | |
| <p class="text-sm text-gray-500">Pemilik UMKM Makanan</p> | |
| <div class="mt-4 w-full"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Profil UMKM</span> | |
| <span class="text-sm font-medium">65%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 space-y-4"> | |
| <div class="flex items-center justify-between py-2 border-b"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-store text-purple-600"></i> | |
| </div> | |
| <span>UMKM Saya</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between py-2 border-b"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-cog text-blue-600"></i> | |
| </div> | |
| <span>Pengaturan</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between py-2 border-b"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-question-circle text-green-600"></i> | |
| </div> | |
| <span>Bantuan</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between py-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-sign-out-alt text-red-600"></i> | |
| </div> | |
| <span>Keluar</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-white p-4 rounded-xl shadow-sm"> | |
| <h3 class="font-semibold mb-3">Pencapaian Saya</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div class="flex flex-col items-center p-2"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-trophy text-purple-600"></i> | |
| </div> | |
| <span class="text-xs text-center">Pemula</span> | |
| </div> | |
| <div class="flex flex-col items-center p-2"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-fire text-blue-600"></i> | |
| </div> | |
| <span class="text-xs text-center">5 Hari Berturut-turut</span> | |
| </div> | |
| <div class="flex flex-col items-center p-2"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-book text-green-600"></i> | |
| </div> | |
| <span class="text-xs text-center">Pembaca Aktif</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around py-3 max-w-md mx-auto"> | |
| <a href="#" class="flex flex-col items-center text-purple-600 nav-active" onclick="switchPage('home-page')"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Beranda</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('search-page')"> | |
| <i class="fas fa-search text-lg"></i> | |
| <span class="text-xs mt-1">Cari</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('dashboard-page')"> | |
| <i class="fas fa-chart-line text-lg"></i> | |
| <span class="text-xs mt-1">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('article-page')"> | |
| <i class="fas fa-book-open text-lg"></i> | |
| <span class="text-xs mt-1">Artikel</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('profile-page')"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">Profil</span> | |
| </a> | |
| </nav> | |
| <script> | |
| // Switch between pages | |
| function switchPage(pageId) { | |
| // Hide all pages | |
| document.querySelectorAll('.page').forEach(page => { | |
| page.classList.remove('page-active'); | |
| page.classList.add('hidden'); | |
| }); | |
| // Show selected page | |
| document.getElementById(pageId).classList.remove('hidden'); | |
| document.getElementById(pageId).classList.add('page-active'); | |
| // Update active nav item | |
| document.querySelectorAll('nav a').forEach(navItem => { | |
| navItem.classList.remove('text-purple-600', 'nav-active'); | |
| navItem.classList.add('text-gray-500'); | |
| }); | |
| // Set active nav item | |
| event.currentTarget.classList.remove('text-gray-500'); | |
| event.currentTarget.classList.add('text-purple-600', 'nav-active'); | |
| // Update header based on page | |
| const header = document.getElementById('main-header'); | |
| if (pageId === 'home-page') { | |
| header.classList.remove('hidden'); | |
| } else { | |
| header.classList.add('hidden'); | |
| } | |
| } | |
| // Switch between tabs on home page | |
| function switchTab(tabId) { | |
| // Update tab buttons | |
| document.querySelectorAll('.flex.justify-around button').forEach(tab => { | |
| tab.classList.remove('tab-active'); | |
| tab.classList.add('text-gray-500'); | |
| }); | |
| // Add active class to clicked tab | |
| event.currentTarget.classList.add('tab-active'); | |
| event.currentTarget.classList.remove('text-gray-500'); | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| // Show selected tab content | |
| document.getElementById(tabId + '-tab').classList.remove('hidden'); | |
| } | |
| </script> | |
| <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> | |
| </html> |