|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CUAN.IN - Bantu UMKM Tumbuh</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; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
#app-container { |
|
|
width: 100%; |
|
|
max-width: 480px; |
|
|
position: relative; |
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.1); |
|
|
height: 100vh; |
|
|
overflow-x: hidden; |
|
|
background-color: white; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); |
|
|
} |
|
|
|
|
|
.slide-in { |
|
|
animation: slideIn 0.3s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { |
|
|
transform: translateX(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.slide-out { |
|
|
animation: slideOut 0.3s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes slideOut { |
|
|
from { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
transform: translateX(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background-color: #e5e7eb; |
|
|
border-radius: 3px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background-color: #4f46e5; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.business-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.business-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tab-active { |
|
|
color: #4f46e5; |
|
|
border-bottom: 3px solid #4f46e5; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="app-container"> |
|
|
|
|
|
<header class="gradient-bg text-white p-4 sticky top-0 z-10"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-wallet text-2xl"></i> |
|
|
<h1 class="text-xl font-bold">CUAN.IN</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button onclick="toggleNotificationPanel()"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
</button> |
|
|
<button onclick="toggleProfilePanel()"> |
|
|
<i class="fas fa-user-circle text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="pb-20"> |
|
|
|
|
|
<section id="dashboard" class="px-4 py-6"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Halo, Budi!</h2> |
|
|
<p class="text-gray-600">Mari temukan bisnis yang cocok untukmu</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 gap-4 mb-6"> |
|
|
<button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('recommendation')"> |
|
|
<i class="fas fa-lightbulb text-purple-500 text-xl mb-1"></i> |
|
|
<p class="text-xs font-medium">Rekomendasi</p> |
|
|
</button> |
|
|
<button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('webinar')"> |
|
|
<i class="fas fa-video text-blue-500 text-xl mb-1"></i> |
|
|
<p class="text-xs font-medium">Webinar</p> |
|
|
</button> |
|
|
<button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('learning')"> |
|
|
<i class="fas fa-book text-green-500 text-xl mb-1"></i> |
|
|
<p class="text-xs font-medium">Belajar</p> |
|
|
</button> |
|
|
<button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('community')"> |
|
|
<i class="fas fa-users text-orange-500 text-xl mb-1"></i> |
|
|
<p class="text-xs font-medium">Komunitas</p> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-bold text-lg text-gray-800">Rekomendasi Bisnis</h3> |
|
|
<button class="text-purple-600 text-sm font-medium" onclick="navigateTo('recommendation')">Lihat Semua</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Kedai Kopi')"> |
|
|
<div class="bg-purple-100 rounded-lg p-2 mb-3 flex justify-center"> |
|
|
<i class="fas fa-coffee text-purple-600 text-3xl"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-gray-800">Kedai Kopi</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">Modal: Rp 5-10 juta</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<p class="text-xs font-medium">Potensi: Tinggi</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Jasa Fotografi')"> |
|
|
<div class="bg-blue-100 rounded-lg p-2 mb-3 flex justify-center"> |
|
|
<i class="fas fa-camera text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-gray-800">Jasa Fotografi</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">Modal: Rp 3-7 juta</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<p class="text-xs font-medium">Potensi: Sedang</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-bold text-lg text-gray-800">Webinar Mendatang</h3> |
|
|
<button class="text-purple-600 text-sm font-medium" onclick="navigateTo('webinar')">Lihat Semua</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow mb-3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 rounded-lg p-3 mr-3"> |
|
|
<i class="fas fa-video text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Strategi Pemasaran Digital UMKM</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">15 Juli 2023 • 19:00 WIB</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs">Oleh: Pakar Digital Marketing</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-3 bg-purple-600 text-white py-2 rounded-lg text-sm font-medium" onclick="showWebinarDetail()">Daftar Sekarang</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-bold text-lg text-gray-800">Artikel Terbaru</h3> |
|
|
<button class="text-purple-600 text-sm font-medium" onclick="navigateTo('learning')">Lihat Semua</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow mb-3"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://via.placeholder.com/80" alt="Article" class="w-20 h-20 rounded-lg object-cover mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">5 Kesalahan Finansial UMKM Pemula</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">10 menit baca</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-book-open text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs">Panduan Keuangan</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-3 border border-purple-600 text-purple-600 py-2 rounded-lg text-sm font-medium" onclick="showArticleDetail()">Baca Artikel</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="recommendation" class="hidden px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="navigateTo('dashboard')" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Rekomendasi Bisnis</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6 bg-white rounded-xl p-4 shadow"> |
|
|
<h3 class="font-bold text-gray-800 mb-3">Profil Bisnismu</h3> |
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-600 mb-1">Modal yang tersedia</p> |
|
|
<div class="progress-bar w-full mb-1"> |
|
|
<div class="progress-fill" style="width: 60%;"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">Rp 5-10 juta</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<p class="text-sm text-gray-600 mb-1">Minat Bisnis</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Kuliner</span> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Kreatif</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Jasa</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<p class="text-sm text-gray-600 mb-1">Lokasi Bisnis</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> |
|
|
<p class="text-sm">Surabaya, Jawa Timur</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800 mb-3">Rekomendasi Untukmu</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Kedai Kopi')"> |
|
|
<div class="flex"> |
|
|
<div class="bg-purple-100 rounded-lg p-3 mr-3 flex items-center"> |
|
|
<i class="fas fa-coffee text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Kedai Kopi</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">Modal: Rp 5-10 juta</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<p class="text-xs font-medium">Potensi: Tinggi</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Jasa Fotografi')"> |
|
|
<div class="flex"> |
|
|
<div class="bg-blue-100 rounded-lg p-3 mr-3 flex items-center"> |
|
|
<i class="fas fa-camera text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Jasa Fotografi</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">Modal: Rp 3-7 juta</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<p class="text-xs font-medium">Potensi: Sedang</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Bisnis Kue')"> |
|
|
<div class="flex"> |
|
|
<div class="bg-pink-100 rounded-lg p-3 mr-3 flex items-center"> |
|
|
<i class="fas fa-birthday-cake text-pink-600 text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Bisnis Kue</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">Modal: Rp 2-5 juta</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<p class="text-xs font-medium">Potensi: Tinggi</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="webinar" class="hidden px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="navigateTo('dashboard')" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Webinar UMKM</h2> |
|
|
</div> |
|
|
|
|
|
<div class="flex border-b mb-4"> |
|
|
<button class="flex-1 py-2 font-medium text-center tab-active" onclick="changeWebinarTab('upcoming')"> |
|
|
Mendatang |
|
|
</button> |
|
|
<button class="flex-1 py-2 font-medium text-center text-gray-500" onclick="changeWebinarTab('recorded')"> |
|
|
Rekaman |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="upcoming-webinars"> |
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 rounded-lg p-3 mr-3"> |
|
|
<i class="fas fa-video text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Strategi Pemasaran Digital UMKM</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">15 Juli 2023 • 19:00 WIB</p> |
|
|
<div class="flex items-center mb-3"> |
|
|
<i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs">Oleh: Pakar Digital Marketing</p> |
|
|
</div> |
|
|
<div class="flex items-center text-sm"> |
|
|
<i class="fas fa-users text-gray-400 mr-2"></i> |
|
|
<p class="text-gray-600">150+ peserta terdaftar</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-3 bg-purple-600 text-white py-2 rounded-lg text-sm font-medium" onclick="showWebinarDetail()">Daftar Sekarang</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 rounded-lg p-3 mr-3"> |
|
|
<i class="fas fa-chart-line text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Analisis Pasar untuk UMKM</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">20 Juli 2023 • 14:00 WIB</p> |
|
|
<div class="flex items-center mb-3"> |
|
|
<i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs">Oleh: Analis Pasar Senior</p> |
|
|
</div> |
|
|
<div class="flex items-center text-sm"> |
|
|
<i class="fas fa-users text-gray-400 mr-2"></i> |
|
|
<p class="text-gray-600">80+ peserta terdaftar</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-3 bg-purple-600 text-white py-2 rounded-lg text-sm font-medium" onclick="showWebinarDetail()">Daftar Sekarang</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="recorded-webinars" class="hidden"> |
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://via.placeholder.com/100" alt="Webinar" class="w-20 h-20 rounded-lg object-cover mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Manajemen Keuangan UMKM</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">1 Juni 2023 • 45 menit</p> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs">Oleh: Akuntan Profesional</p> |
|
|
</div> |
|
|
<div class="flex items-center text-sm"> |
|
|
<i class="fas fa-eye text-gray-400 mr-2"></i> |
|
|
<p class="text-gray-600">500+ penonton</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-3 border border-purple-600 text-purple-600 py-2 rounded-lg text-sm font-medium" onclick="showWebinarDetail()">Tonton Sekarang</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="learning" class="hidden px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="navigateTo('dashboard')" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Pusat Pembelajaran</h2> |
|
|
</div> |
|
|
|
|
|
<div class="flex border-b mb-4"> |
|
|
<button class="flex-1 py-2 font-medium text-center tab-active" onclick="changeLearningTab('articles')"> |
|
|
Artikel |
|
|
</button> |
|
|
<button class="flex-1 py-2 font-medium text-center text-gray-500" onclick="changeLearningTab('videos')"> |
|
|
Video |
|
|
</button> |
|
|
<button class="flex-1 py-2 font-medium text-center text-gray-500" onclick="changeLearningTab('guides')"> |
|
|
Panduan |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="articles-content"> |
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<img src="https://via.placeholder.com/350x150" alt="Article" class="w-full h-40 rounded-lg object-cover mb-3"> |
|
|
<h4 class="font-bold text-gray-800 mb-2">5 Kesalahan Finansial UMKM Pemula</h4> |
|
|
<p class="text-sm text-gray-600 mb-3">Pelajari kesalahan umum dalam mengelola keuangan UMKM dan cara menghindarinya untuk bisnis yang lebih sehat.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-book-open text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs text-gray-500">10 menit baca</p> |
|
|
</div> |
|
|
<button class="text-purple-600 text-sm font-medium" onclick="showArticleDetail()">Baca Selengkapnya</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<img src="https://via.placeholder.com/350x150" alt="Article" class="w-full h-40 rounded-lg object-cover mb-3"> |
|
|
<h4 class="font-bold text-gray-800 mb-2">Strategi Branding untuk UMKM</h4> |
|
|
<p class="text-sm text-gray-600 mb-3">Bagaimana membangun brand yang kuat meski dengan modal terbatas? Temukan jawabannya di artikel ini.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-book-open text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs text-gray-500">8 menit baca</p> |
|
|
</div> |
|
|
<button class="text-purple-600 text-sm font-medium" onclick="showArticleDetail()">Baca Selengkapnya</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="videos-content" class="hidden"> |
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/350x200" alt="Video" class="w-full h-40 rounded-lg object-cover mb-3"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-play-circle text-white text-4xl opacity-90"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h4 class="font-bold text-gray-800 mb-2">Tutorial Pemasaran Digital Dasar</h4> |
|
|
<p class="text-sm text-gray-600 mb-3">Pelajari dasar-dasar pemasaran digital untuk UMKM dalam video 15 menit ini.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-clock text-gray-400 text-xs mr-1"></i> |
|
|
<p class="text-xs text-gray-500">15 menit</p> |
|
|
</div> |
|
|
<button class="text-purple-600 text-sm font-medium" onclick="showVideoDetail()">Tonton Sekarang</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="guides-content" class="hidden"> |
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-yellow-100 rounded-lg p-3 mr-3"> |
|
|
<i class="fas fa-file-pdf text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800 mb-1">Panduan Lengkap Pendirian UMKM</h4> |
|
|
<p class="text-xs text-gray-500 mb-2">PDF • 25 halaman</p> |
|
|
<p class="text-sm text-gray-600 mb-3">Dokumen komprehensif yang memandu Anda langkah demi langkah mendirikan UMKM.</p> |
|
|
<button class="text-purple-600 text-sm font-medium" onclick="showGuideDetail()">Unduh Panduan</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="community" class="hidden px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="navigateTo('dashboard')" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Komunitas UMKM</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Cari topik atau tanya sesuatu..." class="w-full bg-white rounded-full py-3 pl-4 pr-10 shadow-sm"> |
|
|
<button class="absolute right-3 top-3 text-gray-400"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<div class="flex items-start mb-3"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Budi Santoso</h4> |
|
|
<p class="text-xs text-gray-500">2 jam yang lalu</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-3">Halo semua, saya baru mau memulai usaha kedai kopi kecil-kecilan. Ada yang punya tips untuk pemilihan supplier biji kopi yang berkualitas dengan harga terjangkau?</p> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-gray-500 flex items-center"> |
|
|
<i class="far fa-comment mr-1"></i> 5 Komentar |
|
|
</button> |
|
|
<button class="text-gray-500 flex items-center"> |
|
|
<i class="far fa-thumbs-up mr-1"></i> Suka |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow mb-4"> |
|
|
<div class="flex items-start mb-3"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Ani Wijaya</h4> |
|
|
<p class="text-xs text-gray-500">Kemarin</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-3">Saya ingin berbagi pengalaman sukses menjalankan usaha kue rumahan selama 2 tahun terakhir. Mulai dari modal 3 juta, sekarang sudah punya 5 karyawan dan omset 20 juta/bulan. Siap membantu yang mau bertanya!</p> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<button class="text-gray-500 flex items-center"> |
|
|
<i class="far fa-comment mr-1"></i> 12 Komentar |
|
|
</button> |
|
|
<button class="text-gray-500 flex items-center"> |
|
|
<i class="far fa-thumbs-up mr-1"></i> 24 Suka |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="fixed bottom-24 right-6 bg-purple-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center"> |
|
|
<i class="fas fa-plus text-xl"></i> |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="business-detail" class="hidden absolute inset-0 bg-white z-20 px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="hideBusinessDetail()" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Detail Bisnis</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="bg-purple-100 rounded-xl p-6 mb-4 flex justify-center"> |
|
|
<i class="fas fa-coffee text-purple-600 text-5xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Kedai Kopi</h3> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<p class="font-medium">Potensi: Tinggi</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-white rounded-lg p-3 shadow-sm"> |
|
|
<p class="text-xs text-gray-500 mb-1">Modal Awal</p> |
|
|
<p class="font-bold">Rp 5-10 juta</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg p-3 shadow-sm"> |
|
|
<p class="text-xs text-gray-500 mb-1">ROI</p> |
|
|
<p class="font-bold">8-12 bulan</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg p-3 shadow-sm"> |
|
|
<p class="text-xs text-gray-500 mb-1">Tingkat Kesulitan</p> |
|
|
<p class="font-bold">Menengah</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg p-3 shadow-sm"> |
|
|
<p class="text-xs text-gray-500 mb-1">Tren Pasar</p> |
|
|
<p class="font-bold">Naik</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-2">Deskripsi Bisnis</h4> |
|
|
<p class="text-gray-600">Bisnis kedai kopi kecil dengan konsep cozy dan minimalis, menyajikan kopi specialty dengan bahan berkualitas. Target pasar anak muda dan pekerja kantoran. Dapat dikembangkan dengan menambah menu makanan ringan.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-2">Kebutuhan Utama</h4> |
|
|
<ul class="list-disc list-inside text-gray-600 space-y-1"> |
|
|
<li>Mesin kopi dan peralatan barista</li> |
|
|
<li>Biji kopi berkualitas</li> |
|
|
<li>Lokasi strategis</li> |
|
|
<li>Kemasan yang menarik</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-2">Estimasi Keuntungan</h4> |
|
|
<p class="text-gray-600">Dengan rata-rata penjualan 50 cup/hari @Rp25.000, omzet bulanan mencapai Rp37.5 juta. Setelah dikurangi biaya operasional, estimasi keuntungan bersih Rp10-15 juta/bulan.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg"> |
|
|
<button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium" onclick="hideBusinessDetail()"> |
|
|
Mulai Bisnis Ini |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="webinar-detail" class="hidden absolute inset-0 bg-white z-20 px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="hideWebinarDetail()" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Detail Webinar</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="bg-purple-100 rounded-xl p-6 mb-4 flex justify-center"> |
|
|
<i class="fas fa-video text-purple-600 text-5xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Strategi Pemasaran Digital UMKM</h3> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-calendar-alt text-gray-400 mr-2"></i> |
|
|
<p>15 Juli 2023 • 19:00-21:00 WIB</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg p-4 shadow-sm mb-6"> |
|
|
<div class="flex items-start mb-3"> |
|
|
<img src="https://via.placeholder.com/50" alt="Speaker" class="w-12 h-12 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Pakar Digital Marketing</h4> |
|
|
<p class="text-sm text-gray-600">Praktisi pemasaran digital dengan pengalaman 10+ tahun membantu UMKM go digital</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"Dalam webinar ini, saya akan membagikan strategi praktis yang bisa langsung diaplikasikan untuk meningkatkan penjualan UMKM Anda."</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-2">Apa yang akan Anda pelajari?</h4> |
|
|
<ul class="list-disc list-inside text-gray-600 space-y-2"> |
|
|
<li>Dasar-dasar pemasaran digital untuk UMKM</li> |
|
|
<li>Strategi efektif promosi di media sosial</li> |
|
|
<li>Teknik optimasi Google Bisnisku</li> |
|
|
<li>Content marketing yang menarik pelanggan</li> |
|
|
<li>Analisis kompetitor sederhana</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-2">Biaya Pendaftaran</h4> |
|
|
<div class="flex items-end"> |
|
|
<p class="text-2xl font-bold text-purple-600 mr-2">Rp 50.000</p> |
|
|
<p class="text-sm text-gray-500 line-through">Rp 100.000</p> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">Harga khusus pendaftaran awal hingga 10 Juli</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg"> |
|
|
<button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium mb-2" onclick="showPayment()"> |
|
|
Daftar Sekarang |
|
|
</button> |
|
|
<button class="w-full border border-purple-600 text-purple-600 py-3 rounded-lg font-medium"> |
|
|
Tambahkan ke Kalender |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="article-detail" class="hidden absolute inset-0 bg-white z-20 px-4 py-6 overflow-y-auto"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="hideArticleDetail()" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Artikel</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">5 Kesalahan Finansial UMKM Pemula</h3> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://via.placeholder.com/40" alt="Author" class="w-8 h-8 rounded-full mr-2"> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Tim CUAN.IN</p> |
|
|
<p class="text-xs text-gray-500">10 menit baca • 15 Juni 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<img src="https://via.placeholder.com/400x200" alt="Article" class="w-full rounded-lg mb-6"> |
|
|
|
|
|
<div class="prose max-w-none"> |
|
|
<p class="text-gray-700 mb-4">Memulai usaha kecil menengah (UMKM) adalah langkah berani yang membutuhkan perencanaan matang, terutama dalam aspek keuangan. Sayangnya, banyak pelaku UMKM pemula melakukan kesalahan finansial yang bisa menghambat pertumbuhan bisnis mereka.</p> |
|
|
|
|
|
<h4 class="font-bold text-gray-800 text-lg mb-3 mt-6">1. Tidak Memisahkan Keuangan Pribadi dan Bisnis</h4> |
|
|
<p class="text-gray-700 mb-4">Kesalahan paling umum adalah mencampur keuangan pribadi dengan bisnis. Ini membuat sulit melacak pengeluaran bisnis dan menghitung profitabilitas. Solusinya: buka rekening terpisah khusus bisnis dan catat setiap transaksi.</p> |
|
|
|
|
|
<h4 class="font-bold text-gray-800 text-lg mb-3">2. Tidak Memiliki Anggaran yang Jelas</h4> |
|
|
<p class="text-gray-700 mb-4">Banyak UMKM beroperasi tanpa anggaran yang terencana. Buat anggaran bulanan yang mencakup semua pengeluaran tetap (sewa, gaji) dan variabel (bahan baku, pemasaran). Review anggaran setiap bulan.</p> |
|
|
|
|
|
<h4 class="font-bold text-gray-800 text-lg mb-3">3. Mengabaikan Arus Kas</h4> |
|
|
<p class="text-gray-700 mb-4">Profit di atas kertas tidak berarti uang tersedia di kas. Banyak bisnis bangkrut karena masalah arus kas meski secara teknis profitable. Pantau piutang dan utang secara ketat.</p> |
|
|
|
|
|
<h4 class="font-bold text-gray-800 text-lg mb-3">4. Tidak Menyiapkan Dana Darurat</h4> |
|
|
<p class="text-gray-700 mb-4">Setidaknya siapkan dana darurat untuk 3-6 bulan operasional. Ini akan menyelamatkan bisnis saat menghadapi masa sulit atau penurunan penjualan tak terduga.</p> |
|
|
|
|
|
<h4 class="font-bold text-gray-800 text-lg mb-3">5. Tidak Berinvestasi pada Pertumbuhan</h4> |
|
|
<p class="text-gray-700 mb-4">Banyak UMKM terlalu berhemat sampai tidak berinvestasi pada pengembangan bisnis. Alokasikan sebagian keuntungan untuk pemasaran, pelatihan, atau peningkatan produk.</p> |
|
|
|
|
|
<div class="bg-blue-50 p-4 rounded-lg mb-6"> |
|
|
<h5 class="font-bold text-blue-800 mb-2">Tips Tambahan:</h5> |
|
|
<p class="text-blue-700">Gunakan aplikasi akuntansi sederhana untuk memudahkan pencatatan keuangan. Konsultasikan dengan akuntan setidaknya setahun sekali untuk review kesehatan finansial bisnis Anda.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4 mt-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-3">Bagikan Artikel Ini</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-blue-100 text-blue-600 p-2 rounded-full"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</button> |
|
|
<button class="bg-blue-400 text-white p-2 rounded-full"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</button> |
|
|
<button class="bg-pink-600 text-white p-2 rounded-full"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</button> |
|
|
<button class="bg-green-500 text-white p-2 rounded-full"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="payment" class="hidden absolute inset-0 bg-white z-30 px-4 py-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="hidePayment()" class="mr-3"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Pembayaran</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">Strategi Pemasaran Digital UMKM</h3> |
|
|
<p class="text-gray-600 mb-4">15 Juli 2023 • 19:00-21:00 WIB</p> |
|
|
|
|
|
<div class="bg-gray-100 rounded-lg p-4 mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<p class="text-gray-600">Biaya Webinar</p> |
|
|
<p class="font-medium">Rp 50.000</p> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<p class="text-gray-600">Biaya Admin</p> |
|
|
<p class="font-medium">Rp 2.500</p> |
|
|
</div> |
|
|
<div class="border-t border-gray-300 my-2"></div> |
|
|
<div class="flex justify-between"> |
|
|
<p class="font-bold">Total Pembayaran</p> |
|
|
<p class="font-bold text-purple-600">Rp 52.500</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-3">Metode Pembayaran</h4> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-300"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/30" alt="Bank" class="w-8 h-8 mr-3"> |
|
|
<div> |
|
|
<p class="font-medium">Transfer Bank</p> |
|
|
<p class="text-xs text-gray-500">BNI, BRI, Mandiri, dll</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-300"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/30" alt="E-Wallet" class="w-8 h-8 mr-3"> |
|
|
<div> |
|
|
<p class="font-medium">E-Wallet</p> |
|
|
<p class="text-xs text-gray-500">OVO, Dana, LinkAja</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-300"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/30" alt="QRIS" class="w-8 h-8 mr-3"> |
|
|
<div> |
|
|
<p class="font-medium">QRIS</p> |
|
|
<p class="text-xs text-gray-500">Scan QR Code</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg"> |
|
|
<button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium" onclick="showPaymentSuccess()"> |
|
|
Lanjutkan Pembayaran |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="payment-success" class="hidden absolute inset-0 bg-white z-40 px-4 py-6 flex flex-col items-center justify-center"> |
|
|
<div class="text-center mb-6"> |
|
|
<div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-check-circle text-green-500 text-4xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-2">Pembayaran Berhasil!</h2> |
|
|
<p class="text-gray-600 mb-4">Anda telah berhasil mendaftar webinar "Strategi Pemasaran Digital UMKM"</p> |
|
|
<div class="bg-gray-100 rounded-lg p-4 max-w-xs mx-auto"> |
|
|
<p class="font-medium mb-1">Kode Peserta: WEB789123</p> |
|
|
<p class="text-sm text-gray-600">Simpan kode ini sebagai bukti pendaftaran</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full max-w-xs"> |
|
|
<button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium mb-3" onclick="hidePaymentSuccess()"> |
|
|
Kembali ke Beranda |
|
|
</button> |
|
|
<button class="w-full border border-purple-600 text-purple-600 py-3 rounded-lg font-medium"> |
|
|
Lihat Tiket |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="notification-panel" class="hidden absolute inset-0 bg-white z-50 transform translate-x-full"> |
|
|
<div class="gradient-bg text-white p-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-xl font-bold">Notifikasi</h2> |
|
|
<button onclick="toggleNotificationPanel()"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="flex items-start mb-4 pb-4 border-b border-gray-200"> |
|
|
<div class="bg-purple-100 rounded-full p-2 mr-3"> |
|
|
<i class="fas fa-bell text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Webinar besok!</h4> |
|
|
<p class="text-sm text-gray-600">Webinar "Strategi Pemasaran Digital UMKM" akan dimulai besok pukul 19:00 WIB</p> |
|
|
<p class="text-xs text-gray-400 mt-1">1 jam yang lalu</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start mb-4 pb-4 border-b border-gray-200"> |
|
|
<div class="bg-blue-100 rounded-full p-2 mr-3"> |
|
|
<i class="fas fa-lightbulb text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Rekomendasi baru</h4> |
|
|
<p class="text-sm text-gray-600">Kami menemukan 2 rekomendasi bisnis baru yang cocok untuk Anda</p> |
|
|
<p class="text-xs text-gray-400 mt-1">Kemarin</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 rounded-full p-2 mr-3"> |
|
|
<i class="fas fa-comment-dots text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Komentar baru</h4> |
|
|
<p class="text-sm text-gray-600">Ani Wijaya membalas pertanyaan Anda di forum komunitas</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 hari yang lalu</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="profile-panel" class="hidden absolute inset-0 bg-white z-50 transform translate-x-full"> |
|
|
<div class="gradient-bg text-white p-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-xl font-bold">Profil Saya</h2> |
|
|
<button onclick="toggleProfilePanel()"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="flex flex-col items-center mb-6"> |
|
|
<img src="https://via.placeholder.com/80" alt="Profile" class="w-20 h-20 rounded-full mb-3"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Budi Santoso</h3> |
|
|
<p class="text-gray-600">Calon Pengusaha UMKM</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-3">Akun Saya</h4> |
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
<button class="w-full flex items-center justify-between p-3 border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-user-edit text-purple-600 mr-3"></i> |
|
|
<p>Edit Profil</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between p-3 border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-lock text-purple-600 mr-3"></i> |
|
|
<p>Ubah Password</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between p-3"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bell text-purple-600 mr-3"></i> |
|
|
<p>Pengaturan Notifikasi</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-gray-800 mb-3">Bantuan</h4> |
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
<button class="w-full flex items-center justify-between p-3 border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-question-circle text-purple-600 mr-3"></i> |
|
|
<p>Pusat Bantuan</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between p-3"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-headset text-purple-600 mr-3"></i> |
|
|
<p>Hubungi Kami</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-3 bg-red-50 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-sign-out-alt text-red-600 mr-3"></i> |
|
|
<p class="text-red-600">Keluar</p> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-red-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around items-center p-3 z-10"> |
|
|
<button onclick="navigateTo('dashboard')" class="flex flex-col items-center text-purple-600"> |
|
|
<i class="fas fa-home text-xl"></i> |
|
|
<span class="text-xs mt-1">Beranda</span> |
|
|
</button> |
|
|
<button onclick="navigateTo('recommendation')" class="flex flex-col items-center text-gray-500"> |
|
|
<i class="fas fa-lightbulb text-xl"></i> |
|
|
<span class="text-xs mt-1">Rekomendasi</span> |
|
|
</button> |
|
|
<button onclick="navigateTo('webinar')" class="flex flex-col items-center text-gray-500"> |
|
|
<i class="fas fa-video text-xl"></i> |
|
|
<span class="text-xs mt-1">Webinar</span> |
|
|
</button> |
|
|
<button onclick="navigateTo('learning')" class="flex flex-col items-center text-gray-500"> |
|
|
<i class="fas fa-book text-xl"></i> |
|
|
<span class="text-xs mt-1">Belajar</span> |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function navigateTo(section) { |
|
|
|
|
|
document.querySelectorAll('main > section').forEach(sec => { |
|
|
sec.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(section).classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('nav button').forEach(btn => { |
|
|
btn.classList.remove('text-purple-600'); |
|
|
btn.classList.add('text-gray-500'); |
|
|
}); |
|
|
|
|
|
if(section === 'dashboard') { |
|
|
document.querySelector('nav button:nth-child(1)').classList.remove('text-gray-500'); |
|
|
document.querySelector('nav button:nth-child(1)').classList.add('text-purple-600'); |
|
|
} else if(section === 'recommendation') { |
|
|
document.querySelector('nav button:nth-child(2)').classList.remove('text-gray-500'); |
|
|
document.querySelector('nav button:nth-child(2)').classList.add('text-purple-600'); |
|
|
} else if(section === 'webinar') { |
|
|
document.querySelector('nav button:nth-child(3)').classList.remove('text-gray-500'); |
|
|
document.querySelector('nav button:nth-child(3)').classList.add('text-purple-600'); |
|
|
} else if(section === 'learning') { |
|
|
document.querySelector('nav button:nth-child(4)').classList.remove('text-gray-500'); |
|
|
document.querySelector('nav button:nth-child(4)').classList.add('text-purple-600'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showBusinessDetail(businessName) { |
|
|
document.getElementById('business-detail').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideBusinessDetail() { |
|
|
document.getElementById('business-detail').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function showWebinarDetail() { |
|
|
document.getElementById('webinar-detail').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideWebinarDetail() { |
|
|
document.getElementById('webinar-detail').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function showArticleDetail() { |
|
|
document.getElementById('article-detail').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideArticleDetail() { |
|
|
document.getElementById('article-detail').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function showPayment() { |
|
|
document.getElementById('payment').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hidePayment() { |
|
|
document.getElementById('payment').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showPaymentSuccess() { |
|
|
document.getElementById('payment-success').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hidePaymentSuccess() { |
|
|
document.getElementById('payment-success').classList.add('hidden'); |
|
|
navigateTo('dashboard'); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleNotificationPanel() { |
|
|
const panel = document.getElementById('notification-panel'); |
|
|
if(panel.classList.contains('hidden')) { |
|
|
panel.classList.remove('hidden'); |
|
|
panel.classList.remove('translate-x-full'); |
|
|
panel.classList.add('slide-in'); |
|
|
} else { |
|
|
panel.classList.add('slide-out'); |
|
|
setTimeout(() => { |
|
|
panel.classList.add('hidden'); |
|
|
panel.classList.add('translate-x-full'); |
|
|
panel.classList.remove('slide-in'); |
|
|
panel.classList.remove('slide-out'); |
|
|
}, 300); |
|
|
} |
|
|
} |
|
|
|
|
|
function toggleProfilePanel() { |
|
|
const panel = document.getElementById('profile-panel'); |
|
|
if(panel.classList.contains('hidden')) { |
|
|
panel.classList.remove('hidden'); |
|
|
panel.classList.remove('translate-x-full'); |
|
|
panel.classList.add('slide-in'); |
|
|
} else { |
|
|
panel.classList.add('slide-out'); |
|
|
setTimeout(() => { |
|
|
panel.classList.add('hidden'); |
|
|
panel.classList.add('translate-x-full'); |
|
|
panel.classList.remove('slide-in'); |
|
|
panel.classList.remove('slide-out'); |
|
|
}, 300); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function changeWebinarTab(tab) { |
|
|
if(tab === 'upcoming') { |
|
|
document.getElementById('upcoming-webinars').classList.remove('hidden'); |
|
|
document.getElementById('recorded-webinars').classList.add('hidden'); |
|
|
document.querySelector('#webinar button:nth-child(1)').classList.add('tab-active'); |
|
|
document.querySelector('#webinar button:nth-child(1)').classList.remove('text-gray-500'); |
|
|
document.querySelector('#webinar button:nth-child(2)').classList.remove('tab-active'); |
|
|
document.querySelector('#webinar button:nth-child(2)').classList.add('text-gray-500'); |
|
|
} else { |
|
|
document.getElementById('upcoming-webinars').classList.add('hidden'); |
|
|
document.getElementById('recorded-webinars').classList.remove('hidden'); |
|
|
document.querySelector('#webinar button:nth-child(1)').classList.remove('tab-active'); |
|
|
document.querySelector('#webinar button:nth-child(1)').classList.add('text-gray-500'); |
|
|
document.querySelector('#webinar button:nth-child(2)').classList.add('tab-active'); |
|
|
document.querySelector('#webinar button:nth-child(2)').classList.remove('text-gray-500'); |
|
|
} |
|
|
} |
|
|
|
|
|
function changeLearningTab(tab) { |
|
|
if(tab === 'articles') { |
|
|
document.getElementById('articles-content').classList.remove('hidden'); |
|
|
document.getElementById('videos-content').classList.add('hidden'); |
|
|
document.getElementById('guides-content').classList.add('hidden'); |
|
|
document.querySelector('#learning button:nth-child(1)').classList.add('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(1)').classList.remove('text-gray-500'); |
|
|
document.querySelector('#learning button:nth-child(2)').classList.remove('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(2)').classList.add('text-gray-500'); |
|
|
document.querySelector('#learning button:nth-child(3)').classList.remove('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(3)').classList.add('text-gray-500'); |
|
|
} else if(tab === 'videos') { |
|
|
document.getElementById('articles-content').classList.add('hidden'); |
|
|
document.getElementById('videos-content').classList.remove('hidden'); |
|
|
document.getElementById('guides-content').classList.add('hidden'); |
|
|
document.querySelector('#learning button:nth-child(1)').classList.remove('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(1)').classList.add('text-gray-500'); |
|
|
document.querySelector('#learning button:nth-child(2)').classList.add('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(2)').classList.remove('text-gray-500'); |
|
|
document.querySelector('#learning button:nth-child(3)').classList.remove('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(3)').classList.add('text-gray-500'); |
|
|
} else { |
|
|
document.getElementById('articles-content').classList.add('hidden'); |
|
|
document.getElementById('videos-content').classList.add('hidden'); |
|
|
document.getElementById('guides-content').classList.remove('hidden'); |
|
|
document.querySelector('#learning button:nth-child(1)').classList.remove('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(1)').classList.add('text-gray-500'); |
|
|
document.querySelector('#learning button:nth-child(2)').classList.remove('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(2)').classList.add('text-gray-500'); |
|
|
document.querySelector('#learning button:nth-child(3)').classList.add('tab-active'); |
|
|
document.querySelector('#learning button:nth-child(3)').classList.remove('text-gray-500'); |
|
|
} |
|
|
} |
|
|
</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/cuain-in" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
