|
|
<!DOCTYPE html> |
|
|
<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-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 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> |
|
|
|
|
|
|
|
|
<div id="home-page" class="page page-active"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
function switchPage(pageId) { |
|
|
|
|
|
document.querySelectorAll('.page').forEach(page => { |
|
|
page.classList.remove('page-active'); |
|
|
page.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(pageId).classList.remove('hidden'); |
|
|
document.getElementById(pageId).classList.add('page-active'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('nav a').forEach(navItem => { |
|
|
navItem.classList.remove('text-purple-600', 'nav-active'); |
|
|
navItem.classList.add('text-gray-500'); |
|
|
}); |
|
|
|
|
|
|
|
|
event.currentTarget.classList.remove('text-gray-500'); |
|
|
event.currentTarget.classList.add('text-purple-600', 'nav-active'); |
|
|
|
|
|
|
|
|
const header = document.getElementById('main-header'); |
|
|
if (pageId === 'home-page') { |
|
|
header.classList.remove('hidden'); |
|
|
} else { |
|
|
header.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function switchTab(tabId) { |
|
|
|
|
|
document.querySelectorAll('.flex.justify-around button').forEach(tab => { |
|
|
tab.classList.remove('tab-active'); |
|
|
tab.classList.add('text-gray-500'); |
|
|
}); |
|
|
|
|
|
|
|
|
event.currentTarget.classList.add('tab-active'); |
|
|
event.currentTarget.classList.remove('text-gray-500'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
