Hugging Face's logo

Spaces:
farwew
/
cuain-in
Running

App Files Community
farwew commited on
Commit
1ce0f3f
·
verified ·
1 Parent(s): b07b065

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1139 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cuain In
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cuain-in
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1139 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CUAN.IN - Bantu UMKM Tumbuh</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f9fa;
15
+ max-width: 480px;
16
+ margin: 0 auto;
17
+ position: relative;
18
+ box-shadow: 0 0 20px rgba(0,0,0,0.1);
19
+ height: 100vh;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .gradient-bg {
24
+ background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
25
+ }
26
+
27
+ .slide-in {
28
+ animation: slideIn 0.3s ease-out forwards;
29
+ }
30
+
31
+ @keyframes slideIn {
32
+ from {
33
+ transform: translateX(100%);
34
+ opacity: 0;
35
+ }
36
+ to {
37
+ transform: translateX(0);
38
+ opacity: 1;
39
+ }
40
+ }
41
+
42
+ .slide-out {
43
+ animation: slideOut 0.3s ease-out forwards;
44
+ }
45
+
46
+ @keyframes slideOut {
47
+ from {
48
+ transform: translateX(0);
49
+ opacity: 1;
50
+ }
51
+ to {
52
+ transform: translateX(100%);
53
+ opacity: 0;
54
+ }
55
+ }
56
+
57
+ .progress-bar {
58
+ height: 6px;
59
+ background-color: #e5e7eb;
60
+ border-radius: 3px;
61
+ overflow: hidden;
62
+ }
63
+
64
+ .progress-fill {
65
+ height: 100%;
66
+ background-color: #4f46e5;
67
+ transition: width 0.3s ease;
68
+ }
69
+
70
+ .business-card:hover {
71
+ transform: translateY(-5px);
72
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
73
+ }
74
+
75
+ .business-card {
76
+ transition: all 0.3s ease;
77
+ }
78
+
79
+ .tab-active {
80
+ color: #4f46e5;
81
+ border-bottom: 3px solid #4f46e5;
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="relative">
86
+ <!-- Header -->
87
+ <header class="gradient-bg text-white p-4 sticky top-0 z-10">
88
+ <div class="flex justify-between items-center">
89
+ <div class="flex items-center space-x-2">
90
+ <i class="fas fa-wallet text-2xl"></i>
91
+ <h1 class="text-xl font-bold">CUAN.IN</h1>
92
+ </div>
93
+ <div class="flex space-x-4">
94
+ <button onclick="toggleNotificationPanel()">
95
+ <i class="fas fa-bell text-xl"></i>
96
+ </button>
97
+ <button onclick="toggleProfilePanel()">
98
+ <i class="fas fa-user-circle text-xl"></i>
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </header>
103
+
104
+ <!-- Main Content -->
105
+ <main class="pb-20">
106
+ <!-- Dashboard Section -->
107
+ <section id="dashboard" class="px-4 py-6">
108
+ <div class="mb-6">
109
+ <h2 class="text-2xl font-bold text-gray-800">Halo, Budi!</h2>
110
+ <p class="text-gray-600">Mari temukan bisnis yang cocok untukmu</p>
111
+ </div>
112
+
113
+ <!-- Quick Access -->
114
+ <div class="grid grid-cols-4 gap-4 mb-6">
115
+ <button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('recommendation')">
116
+ <i class="fas fa-lightbulb text-purple-500 text-xl mb-1"></i>
117
+ <p class="text-xs font-medium">Rekomendasi</p>
118
+ </button>
119
+ <button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('webinar')">
120
+ <i class="fas fa-video text-blue-500 text-xl mb-1"></i>
121
+ <p class="text-xs font-medium">Webinar</p>
122
+ </button>
123
+ <button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('learning')">
124
+ <i class="fas fa-book text-green-500 text-xl mb-1"></i>
125
+ <p class="text-xs font-medium">Belajar</p>
126
+ </button>
127
+ <button class="bg-white rounded-lg p-3 shadow text-center" onclick="navigateTo('community')">
128
+ <i class="fas fa-users text-orange-500 text-xl mb-1"></i>
129
+ <p class="text-xs font-medium">Komunitas</p>
130
+ </button>
131
+ </div>
132
+
133
+ <!-- Recommendation Section -->
134
+ <div class="mb-6">
135
+ <div class="flex justify-between items-center mb-3">
136
+ <h3 class="font-bold text-lg text-gray-800">Rekomendasi Bisnis</h3>
137
+ <button class="text-purple-600 text-sm font-medium" onclick="navigateTo('recommendation')">Lihat Semua</button>
138
+ </div>
139
+
140
+ <div class="grid grid-cols-2 gap-4">
141
+ <div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Kedai Kopi')">
142
+ <div class="bg-purple-100 rounded-lg p-2 mb-3 flex justify-center">
143
+ <i class="fas fa-coffee text-purple-600 text-3xl"></i>
144
+ </div>
145
+ <h4 class="font-bold text-gray-800">Kedai Kopi</h4>
146
+ <p class="text-xs text-gray-500 mb-2">Modal: Rp 5-10 juta</p>
147
+ <div class="flex items-center">
148
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
149
+ <p class="text-xs font-medium">Potensi: Tinggi</p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Jasa Fotografi')">
154
+ <div class="bg-blue-100 rounded-lg p-2 mb-3 flex justify-center">
155
+ <i class="fas fa-camera text-blue-600 text-3xl"></i>
156
+ </div>
157
+ <h4 class="font-bold text-gray-800">Jasa Fotografi</h4>
158
+ <p class="text-xs text-gray-500 mb-2">Modal: Rp 3-7 juta</p>
159
+ <div class="flex items-center">
160
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
161
+ <p class="text-xs font-medium">Potensi: Sedang</p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Webinar Section -->
168
+ <div class="mb-6">
169
+ <div class="flex justify-between items-center mb-3">
170
+ <h3 class="font-bold text-lg text-gray-800">Webinar Mendatang</h3>
171
+ <button class="text-purple-600 text-sm font-medium" onclick="navigateTo('webinar')">Lihat Semua</button>
172
+ </div>
173
+
174
+ <div class="bg-white rounded-xl p-4 shadow mb-3">
175
+ <div class="flex items-start">
176
+ <div class="bg-purple-100 rounded-lg p-3 mr-3">
177
+ <i class="fas fa-video text-purple-600 text-xl"></i>
178
+ </div>
179
+ <div>
180
+ <h4 class="font-bold text-gray-800">Strategi Pemasaran Digital UMKM</h4>
181
+ <p class="text-xs text-gray-500 mb-2">15 Juli 2023 • 19:00 WIB</p>
182
+ <div class="flex items-center">
183
+ <i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i>
184
+ <p class="text-xs">Oleh: Pakar Digital Marketing</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <button class="w-full mt-3 bg-purple-600 text-white py-2 rounded-lg text-sm font-medium" onclick="showWebinarDetail()">Daftar Sekarang</button>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Learning Section -->
193
+ <div>
194
+ <div class="flex justify-between items-center mb-3">
195
+ <h3 class="font-bold text-lg text-gray-800">Artikel Terbaru</h3>
196
+ <button class="text-purple-600 text-sm font-medium" onclick="navigateTo('learning')">Lihat Semua</button>
197
+ </div>
198
+
199
+ <div class="bg-white rounded-xl p-4 shadow mb-3">
200
+ <div class="flex items-start">
201
+ <img src="https://via.placeholder.com/80" alt="Article" class="w-20 h-20 rounded-lg object-cover mr-3">
202
+ <div>
203
+ <h4 class="font-bold text-gray-800">5 Kesalahan Finansial UMKM Pemula</h4>
204
+ <p class="text-xs text-gray-500 mb-2">10 menit baca</p>
205
+ <div class="flex items-center">
206
+ <i class="fas fa-book-open text-gray-400 text-xs mr-1"></i>
207
+ <p class="text-xs">Panduan Keuangan</p>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ <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>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Recommendation Section -->
217
+ <section id="recommendation" class="hidden px-4 py-6">
218
+ <div class="flex items-center mb-6">
219
+ <button onclick="navigateTo('dashboard')" class="mr-3">
220
+ <i class="fas fa-arrow-left text-gray-600"></i>
221
+ </button>
222
+ <h2 class="text-xl font-bold text-gray-800">Rekomendasi Bisnis</h2>
223
+ </div>
224
+
225
+ <div class="mb-6 bg-white rounded-xl p-4 shadow">
226
+ <h3 class="font-bold text-gray-800 mb-3">Profil Bisnismu</h3>
227
+ <div class="mb-4">
228
+ <p class="text-sm text-gray-600 mb-1">Modal yang tersedia</p>
229
+ <div class="progress-bar w-full mb-1">
230
+ <div class="progress-fill" style="width: 60%;"></div>
231
+ </div>
232
+ <p class="text-xs text-gray-500">Rp 5-10 juta</p>
233
+ </div>
234
+
235
+ <div class="mb-4">
236
+ <p class="text-sm text-gray-600 mb-1">Minat Bisnis</p>
237
+ <div class="flex flex-wrap gap-2">
238
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Kuliner</span>
239
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Kreatif</span>
240
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Jasa</span>
241
+ </div>
242
+ </div>
243
+
244
+ <div>
245
+ <p class="text-sm text-gray-600 mb-1">Lokasi Bisnis</p>
246
+ <div class="flex items-center">
247
+ <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
248
+ <p class="text-sm">Surabaya, Jawa Timur</p>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div>
254
+ <h3 class="font-bold text-gray-800 mb-3">Rekomendasi Untukmu</h3>
255
+
256
+ <div class="grid grid-cols-1 gap-4">
257
+ <div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Kedai Kopi')">
258
+ <div class="flex">
259
+ <div class="bg-purple-100 rounded-lg p-3 mr-3 flex items-center">
260
+ <i class="fas fa-coffee text-purple-600 text-2xl"></i>
261
+ </div>
262
+ <div>
263
+ <h4 class="font-bold text-gray-800">Kedai Kopi</h4>
264
+ <p class="text-xs text-gray-500 mb-2">Modal: Rp 5-10 juta</p>
265
+ <div class="flex items-center">
266
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
267
+ <p class="text-xs font-medium">Potensi: Tinggi</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Jasa Fotografi')">
274
+ <div class="flex">
275
+ <div class="bg-blue-100 rounded-lg p-3 mr-3 flex items-center">
276
+ <i class="fas fa-camera text-blue-600 text-2xl"></i>
277
+ </div>
278
+ <div>
279
+ <h4 class="font-bold text-gray-800">Jasa Fotografi</h4>
280
+ <p class="text-xs text-gray-500 mb-2">Modal: Rp 3-7 juta</p>
281
+ <div class="flex items-center">
282
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
283
+ <p class="text-xs font-medium">Potensi: Sedang</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="business-card bg-white rounded-xl p-4 shadow" onclick="showBusinessDetail('Bisnis Kue')">
290
+ <div class="flex">
291
+ <div class="bg-pink-100 rounded-lg p-3 mr-3 flex items-center">
292
+ <i class="fas fa-birthday-cake text-pink-600 text-2xl"></i>
293
+ </div>
294
+ <div>
295
+ <h4 class="font-bold text-gray-800">Bisnis Kue</h4>
296
+ <p class="text-xs text-gray-500 mb-2">Modal: Rp 2-5 juta</p>
297
+ <div class="flex items-center">
298
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
299
+ <p class="text-xs font-medium">Potensi: Tinggi</p>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Webinar Section -->
309
+ <section id="webinar" class="hidden px-4 py-6">
310
+ <div class="flex items-center mb-6">
311
+ <button onclick="navigateTo('dashboard')" class="mr-3">
312
+ <i class="fas fa-arrow-left text-gray-600"></i>
313
+ </button>
314
+ <h2 class="text-xl font-bold text-gray-800">Webinar UMKM</h2>
315
+ </div>
316
+
317
+ <div class="flex border-b mb-4">
318
+ <button class="flex-1 py-2 font-medium text-center tab-active" onclick="changeWebinarTab('upcoming')">
319
+ Mendatang
320
+ </button>
321
+ <button class="flex-1 py-2 font-medium text-center text-gray-500" onclick="changeWebinarTab('recorded')">
322
+ Rekaman
323
+ </button>
324
+ </div>
325
+
326
+ <div id="upcoming-webinars">
327
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
328
+ <div class="flex items-start">
329
+ <div class="bg-purple-100 rounded-lg p-3 mr-3">
330
+ <i class="fas fa-video text-purple-600 text-xl"></i>
331
+ </div>
332
+ <div>
333
+ <h4 class="font-bold text-gray-800">Strategi Pemasaran Digital UMKM</h4>
334
+ <p class="text-xs text-gray-500 mb-2">15 Juli 2023 • 19:00 WIB</p>
335
+ <div class="flex items-center mb-3">
336
+ <i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i>
337
+ <p class="text-xs">Oleh: Pakar Digital Marketing</p>
338
+ </div>
339
+ <div class="flex items-center text-sm">
340
+ <i class="fas fa-users text-gray-400 mr-2"></i>
341
+ <p class="text-gray-600">150+ peserta terdaftar</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <button class="w-full mt-3 bg-purple-600 text-white py-2 rounded-lg text-sm font-medium" onclick="showWebinarDetail()">Daftar Sekarang</button>
346
+ </div>
347
+
348
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
349
+ <div class="flex items-start">
350
+ <div class="bg-blue-100 rounded-lg p-3 mr-3">
351
+ <i class="fas fa-chart-line text-blue-600 text-xl"></i>
352
+ </div>
353
+ <div>
354
+ <h4 class="font-bold text-gray-800">Analisis Pasar untuk UMKM</h4>
355
+ <p class="text-xs text-gray-500 mb-2">20 Juli 2023 • 14:00 WIB</p>
356
+ <div class="flex items-center mb-3">
357
+ <i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i>
358
+ <p class="text-xs">Oleh: Analis Pasar Senior</p>
359
+ </div>
360
+ <div class="flex items-center text-sm">
361
+ <i class="fas fa-users text-gray-400 mr-2"></i>
362
+ <p class="text-gray-600">80+ peserta terdaftar</p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ <button class="w-full mt-3 bg-purple-600 text-white py-2 rounded-lg text-sm font-medium" onclick="showWebinarDetail()">Daftar Sekarang</button>
367
+ </div>
368
+ </div>
369
+
370
+ <div id="recorded-webinars" class="hidden">
371
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
372
+ <div class="flex items-start">
373
+ <img src="https://via.placeholder.com/100" alt="Webinar" class="w-20 h-20 rounded-lg object-cover mr-3">
374
+ <div>
375
+ <h4 class="font-bold text-gray-800">Manajemen Keuangan UMKM</h4>
376
+ <p class="text-xs text-gray-500 mb-2">1 Juni 2023 • 45 menit</p>
377
+ <div class="flex items-center mb-2">
378
+ <i class="fas fa-user-tie text-gray-400 text-xs mr-1"></i>
379
+ <p class="text-xs">Oleh: Akuntan Profesional</p>
380
+ </div>
381
+ <div class="flex items-center text-sm">
382
+ <i class="fas fa-eye text-gray-400 mr-2"></i>
383
+ <p class="text-gray-600">500+ penonton</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <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>
388
+ </div>
389
+ </div>
390
+ </section>
391
+
392
+ <!-- Learning Section -->
393
+ <section id="learning" class="hidden px-4 py-6">
394
+ <div class="flex items-center mb-6">
395
+ <button onclick="navigateTo('dashboard')" class="mr-3">
396
+ <i class="fas fa-arrow-left text-gray-600"></i>
397
+ </button>
398
+ <h2 class="text-xl font-bold text-gray-800">Pusat Pembelajaran</h2>
399
+ </div>
400
+
401
+ <div class="flex border-b mb-4">
402
+ <button class="flex-1 py-2 font-medium text-center tab-active" onclick="changeLearningTab('articles')">
403
+ Artikel
404
+ </button>
405
+ <button class="flex-1 py-2 font-medium text-center text-gray-500" onclick="changeLearningTab('videos')">
406
+ Video
407
+ </button>
408
+ <button class="flex-1 py-2 font-medium text-center text-gray-500" onclick="changeLearningTab('guides')">
409
+ Panduan
410
+ </button>
411
+ </div>
412
+
413
+ <div id="articles-content">
414
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
415
+ <img src="https://via.placeholder.com/350x150" alt="Article" class="w-full h-40 rounded-lg object-cover mb-3">
416
+ <h4 class="font-bold text-gray-800 mb-2">5 Kesalahan Finansial UMKM Pemula</h4>
417
+ <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>
418
+ <div class="flex justify-between items-center">
419
+ <div class="flex items-center">
420
+ <i class="fas fa-book-open text-gray-400 text-xs mr-1"></i>
421
+ <p class="text-xs text-gray-500">10 menit baca</p>
422
+ </div>
423
+ <button class="text-purple-600 text-sm font-medium" onclick="showArticleDetail()">Baca Selengkapnya</button>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
428
+ <img src="https://via.placeholder.com/350x150" alt="Article" class="w-full h-40 rounded-lg object-cover mb-3">
429
+ <h4 class="font-bold text-gray-800 mb-2">Strategi Branding untuk UMKM</h4>
430
+ <p class="text-sm text-gray-600 mb-3">Bagaimana membangun brand yang kuat meski dengan modal terbatas? Temukan jawabannya di artikel ini.</p>
431
+ <div class="flex justify-between items-center">
432
+ <div class="flex items-center">
433
+ <i class="fas fa-book-open text-gray-400 text-xs mr-1"></i>
434
+ <p class="text-xs text-gray-500">8 menit baca</p>
435
+ </div>
436
+ <button class="text-purple-600 text-sm font-medium" onclick="showArticleDetail()">Baca Selengkapnya</button>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <div id="videos-content" class="hidden">
442
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
443
+ <div class="relative">
444
+ <img src="https://via.placeholder.com/350x200" alt="Video" class="w-full h-40 rounded-lg object-cover mb-3">
445
+ <div class="absolute inset-0 flex items-center justify-center">
446
+ <i class="fas fa-play-circle text-white text-4xl opacity-90"></i>
447
+ </div>
448
+ </div>
449
+ <h4 class="font-bold text-gray-800 mb-2">Tutorial Pemasaran Digital Dasar</h4>
450
+ <p class="text-sm text-gray-600 mb-3">Pelajari dasar-dasar pemasaran digital untuk UMKM dalam video 15 menit ini.</p>
451
+ <div class="flex justify-between items-center">
452
+ <div class="flex items-center">
453
+ <i class="fas fa-clock text-gray-400 text-xs mr-1"></i>
454
+ <p class="text-xs text-gray-500">15 menit</p>
455
+ </div>
456
+ <button class="text-purple-600 text-sm font-medium" onclick="showVideoDetail()">Tonton Sekarang</button>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div id="guides-content" class="hidden">
462
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
463
+ <div class="flex items-start">
464
+ <div class="bg-yellow-100 rounded-lg p-3 mr-3">
465
+ <i class="fas fa-file-pdf text-yellow-600 text-xl"></i>
466
+ </div>
467
+ <div>
468
+ <h4 class="font-bold text-gray-800 mb-1">Panduan Lengkap Pendirian UMKM</h4>
469
+ <p class="text-xs text-gray-500 mb-2">PDF • 25 halaman</p>
470
+ <p class="text-sm text-gray-600 mb-3">Dokumen komprehensif yang memandu Anda langkah demi langkah mendirikan UMKM.</p>
471
+ <button class="text-purple-600 text-sm font-medium" onclick="showGuideDetail()">Unduh Panduan</button>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </section>
477
+
478
+ <!-- Community Section -->
479
+ <section id="community" class="hidden px-4 py-6">
480
+ <div class="flex items-center mb-6">
481
+ <button onclick="navigateTo('dashboard')" class="mr-3">
482
+ <i class="fas fa-arrow-left text-gray-600"></i>
483
+ </button>
484
+ <h2 class="text-xl font-bold text-gray-800">Komunitas UMKM</h2>
485
+ </div>
486
+
487
+ <div class="mb-4">
488
+ <div class="relative">
489
+ <input type="text" placeholder="Cari topik atau tanya sesuatu..." class="w-full bg-white rounded-full py-3 pl-4 pr-10 shadow-sm">
490
+ <button class="absolute right-3 top-3 text-gray-400">
491
+ <i class="fas fa-search"></i>
492
+ </button>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
497
+ <div class="flex items-start mb-3">
498
+ <img src="https://via.placeholder.com/40" alt="User" class="w-10 h-10 rounded-full mr-3">
499
+ <div>
500
+ <h4 class="font-bold text-gray-800">Budi Santoso</h4>
501
+ <p class="text-xs text-gray-500">2 jam yang lalu</p>
502
+ </div>
503
+ </div>
504
+ <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>
505
+ <div class="flex justify-between text-sm">
506
+ <button class="text-gray-500 flex items-center">
507
+ <i class="far fa-comment mr-1"></i> 5 Komentar
508
+ </button>
509
+ <button class="text-gray-500 flex items-center">
510
+ <i class="far fa-thumbs-up mr-1"></i> Suka
511
+ </button>
512
+ </div>
513
+ </div>
514
+
515
+ <div class="bg-white rounded-xl p-4 shadow mb-4">
516
+ <div class="flex items-start mb-3">
517
+ <img src="https://via.placeholder.com/40" alt="User" class="w-10 h-10 rounded-full mr-3">
518
+ <div>
519
+ <h4 class="font-bold text-gray-800">Ani Wijaya</h4>
520
+ <p class="text-xs text-gray-500">Kemarin</p>
521
+ </div>
522
+ </div>
523
+ <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>
524
+ <div class="flex justify-between text-sm">
525
+ <button class="text-gray-500 flex items-center">
526
+ <i class="far fa-comment mr-1"></i> 12 Komentar
527
+ </button>
528
+ <button class="text-gray-500 flex items-center">
529
+ <i class="far fa-thumbs-up mr-1"></i> 24 Suka
530
+ </button>
531
+ </div>
532
+ </div>
533
+
534
+ <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">
535
+ <i class="fas fa-plus text-xl"></i>
536
+ </button>
537
+ </section>
538
+
539
+ <!-- Business Detail -->
540
+ <section id="business-detail" class="hidden absolute inset-0 bg-white z-20 px-4 py-6">
541
+ <div class="flex items-center mb-6">
542
+ <button onclick="hideBusinessDetail()" class="mr-3">
543
+ <i class="fas fa-arrow-left text-gray-600"></i>
544
+ </button>
545
+ <h2 class="text-xl font-bold text-gray-800">Detail Bisnis</h2>
546
+ </div>
547
+
548
+ <div class="mb-6">
549
+ <div class="bg-purple-100 rounded-xl p-6 mb-4 flex justify-center">
550
+ <i class="fas fa-coffee text-purple-600 text-5xl"></i>
551
+ </div>
552
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Kedai Kopi</h3>
553
+ <div class="flex items-center mb-4">
554
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
555
+ <p class="font-medium">Potensi: Tinggi</p>
556
+ </div>
557
+
558
+ <div class="grid grid-cols-2 gap-4 mb-6">
559
+ <div class="bg-white rounded-lg p-3 shadow-sm">
560
+ <p class="text-xs text-gray-500 mb-1">Modal Awal</p>
561
+ <p class="font-bold">Rp 5-10 juta</p>
562
+ </div>
563
+ <div class="bg-white rounded-lg p-3 shadow-sm">
564
+ <p class="text-xs text-gray-500 mb-1">ROI</p>
565
+ <p class="font-bold">8-12 bulan</p>
566
+ </div>
567
+ <div class="bg-white rounded-lg p-3 shadow-sm">
568
+ <p class="text-xs text-gray-500 mb-1">Tingkat Kesulitan</p>
569
+ <p class="font-bold">Menengah</p>
570
+ </div>
571
+ <div class="bg-white rounded-lg p-3 shadow-sm">
572
+ <p class="text-xs text-gray-500 mb-1">Tren Pasar</p>
573
+ <p class="font-bold">Naik</p>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="mb-6">
578
+ <h4 class="font-bold text-gray-800 mb-2">Deskripsi Bisnis</h4>
579
+ <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>
580
+ </div>
581
+
582
+ <div class="mb-6">
583
+ <h4 class="font-bold text-gray-800 mb-2">Kebutuhan Utama</h4>
584
+ <ul class="list-disc list-inside text-gray-600 space-y-1">
585
+ <li>Mesin kopi dan peralatan barista</li>
586
+ <li>Biji kopi berkualitas</li>
587
+ <li>Lokasi strategis</li>
588
+ <li>Kemasan yang menarik</li>
589
+ </ul>
590
+ </div>
591
+
592
+ <div class="mb-6">
593
+ <h4 class="font-bold text-gray-800 mb-2">Estimasi Keuntungan</h4>
594
+ <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>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg">
599
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium" onclick="hideBusinessDetail()">
600
+ Mulai Bisnis Ini
601
+ </button>
602
+ </div>
603
+ </section>
604
+
605
+ <!-- Webinar Detail -->
606
+ <section id="webinar-detail" class="hidden absolute inset-0 bg-white z-20 px-4 py-6">
607
+ <div class="flex items-center mb-6">
608
+ <button onclick="hideWebinarDetail()" class="mr-3">
609
+ <i class="fas fa-arrow-left text-gray-600"></i>
610
+ </button>
611
+ <h2 class="text-xl font-bold text-gray-800">Detail Webinar</h2>
612
+ </div>
613
+
614
+ <div class="mb-6">
615
+ <div class="bg-purple-100 rounded-xl p-6 mb-4 flex justify-center">
616
+ <i class="fas fa-video text-purple-600 text-5xl"></i>
617
+ </div>
618
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Strategi Pemasaran Digital UMKM</h3>
619
+ <div class="flex items-center mb-4">
620
+ <i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
621
+ <p>15 Juli 2023 • 19:00-21:00 WIB</p>
622
+ </div>
623
+
624
+ <div class="bg-white rounded-lg p-4 shadow-sm mb-6">
625
+ <div class="flex items-start mb-3">
626
+ <img src="https://via.placeholder.com/50" alt="Speaker" class="w-12 h-12 rounded-full mr-3">
627
+ <div>
628
+ <h4 class="font-bold text-gray-800">Pakar Digital Marketing</h4>
629
+ <p class="text-sm text-gray-600">Praktisi pemasaran digital dengan pengalaman 10+ tahun membantu UMKM go digital</p>
630
+ </div>
631
+ </div>
632
+ <p class="text-gray-600">"Dalam webinar ini, saya akan membagikan strategi praktis yang bisa langsung diaplikasikan untuk meningkatkan penjualan UMKM Anda."</p>
633
+ </div>
634
+
635
+ <div class="mb-6">
636
+ <h4 class="font-bold text-gray-800 mb-2">Apa yang akan Anda pelajari?</h4>
637
+ <ul class="list-disc list-inside text-gray-600 space-y-2">
638
+ <li>Dasar-dasar pemasaran digital untuk UMKM</li>
639
+ <li>Strategi efektif promosi di media sosial</li>
640
+ <li>Teknik optimasi Google Bisnisku</li>
641
+ <li>Content marketing yang menarik pelanggan</li>
642
+ <li>Analisis kompetitor sederhana</li>
643
+ </ul>
644
+ </div>
645
+
646
+ <div class="mb-6">
647
+ <h4 class="font-bold text-gray-800 mb-2">Biaya Pendaftaran</h4>
648
+ <div class="flex items-end">
649
+ <p class="text-2xl font-bold text-purple-600 mr-2">Rp 50.000</p>
650
+ <p class="text-sm text-gray-500 line-through">Rp 100.000</p>
651
+ </div>
652
+ <p class="text-sm text-gray-600 mt-1">Harga khusus pendaftaran awal hingga 10 Juli</p>
653
+ </div>
654
+ </div>
655
+
656
+ <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg">
657
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium mb-2" onclick="showPayment()">
658
+ Daftar Sekarang
659
+ </button>
660
+ <button class="w-full border border-purple-600 text-purple-600 py-3 rounded-lg font-medium">
661
+ Tambahkan ke Kalender
662
+ </button>
663
+ </div>
664
+ </section>
665
+
666
+ <!-- Article Detail -->
667
+ <section id="article-detail" class="hidden absolute inset-0 bg-white z-20 px-4 py-6 overflow-y-auto">
668
+ <div class="flex items-center mb-6">
669
+ <button onclick="hideArticleDetail()" class="mr-3">
670
+ <i class="fas fa-arrow-left text-gray-600"></i>
671
+ </button>
672
+ <h2 class="text-xl font-bold text-gray-800">Artikel</h2>
673
+ </div>
674
+
675
+ <div class="mb-8">
676
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">5 Kesalahan Finansial UMKM Pemula</h3>
677
+ <div class="flex items-center mb-6">
678
+ <img src="https://via.placeholder.com/40" alt="Author" class="w-8 h-8 rounded-full mr-2">
679
+ <div>
680
+ <p class="text-sm font-medium">Tim CUAN.IN</p>
681
+ <p class="text-xs text-gray-500">10 menit baca • 15 Juni 2023</p>
682
+ </div>
683
+ </div>
684
+
685
+ <img src="https://via.placeholder.com/400x200" alt="Article" class="w-full rounded-lg mb-6">
686
+
687
+ <div class="prose max-w-none">
688
+ <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>
689
+
690
+ <h4 class="font-bold text-gray-800 text-lg mb-3 mt-6">1. Tidak Memisahkan Keuangan Pribadi dan Bisnis</h4>
691
+ <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>
692
+
693
+ <h4 class="font-bold text-gray-800 text-lg mb-3">2. Tidak Memiliki Anggaran yang Jelas</h4>
694
+ <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>
695
+
696
+ <h4 class="font-bold text-gray-800 text-lg mb-3">3. Mengabaikan Arus Kas</h4>
697
+ <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>
698
+
699
+ <h4 class="font-bold text-gray-800 text-lg mb-3">4. Tidak Menyiapkan Dana Darurat</h4>
700
+ <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>
701
+
702
+ <h4 class="font-bold text-gray-800 text-lg mb-3">5. Tidak Berinvestasi pada Pertumbuhan</h4>
703
+ <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>
704
+
705
+ <div class="bg-blue-50 p-4 rounded-lg mb-6">
706
+ <h5 class="font-bold text-blue-800 mb-2">Tips Tambahan:</h5>
707
+ <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>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="border-t border-gray-200 pt-4 mt-6">
712
+ <h4 class="font-bold text-gray-800 mb-3">Bagikan Artikel Ini</h4>
713
+ <div class="flex space-x-4">
714
+ <button class="bg-blue-100 text-blue-600 p-2 rounded-full">
715
+ <i class="fab fa-facebook-f"></i>
716
+ </button>
717
+ <button class="bg-blue-400 text-white p-2 rounded-full">
718
+ <i class="fab fa-twitter"></i>
719
+ </button>
720
+ <button class="bg-pink-600 text-white p-2 rounded-full">
721
+ <i class="fab fa-instagram"></i>
722
+ </button>
723
+ <button class="bg-green-500 text-white p-2 rounded-full">
724
+ <i class="fab fa-whatsapp"></i>
725
+ </button>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </section>
730
+
731
+ <!-- Payment -->
732
+ <section id="payment" class="hidden absolute inset-0 bg-white z-30 px-4 py-6">
733
+ <div class="flex items-center mb-6">
734
+ <button onclick="hidePayment()" class="mr-3">
735
+ <i class="fas fa-arrow-left text-gray-600"></i>
736
+ </button>
737
+ <h2 class="text-xl font-bold text-gray-800">Pembayaran</h2>
738
+ </div>
739
+
740
+ <div class="mb-6">
741
+ <h3 class="text-lg font-bold text-gray-800 mb-2">Strategi Pemasaran Digital UMKM</h3>
742
+ <p class="text-gray-600 mb-4">15 Juli 2023 • 19:00-21:00 WIB</p>
743
+
744
+ <div class="bg-gray-100 rounded-lg p-4 mb-6">
745
+ <div class="flex justify-between mb-2">
746
+ <p class="text-gray-600">Biaya Webinar</p>
747
+ <p class="font-medium">Rp 50.000</p>
748
+ </div>
749
+ <div class="flex justify-between">
750
+ <p class="text-gray-600">Biaya Admin</p>
751
+ <p class="font-medium">Rp 2.500</p>
752
+ </div>
753
+ <div class="border-t border-gray-300 my-2"></div>
754
+ <div class="flex justify-between">
755
+ <p class="font-bold">Total Pembayaran</p>
756
+ <p class="font-bold text-purple-600">Rp 52.500</p>
757
+ </div>
758
+ </div>
759
+
760
+ <div class="mb-6">
761
+ <h4 class="font-bold text-gray-800 mb-3">Metode Pembayaran</h4>
762
+ <div class="space-y-3">
763
+ <div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-300">
764
+ <div class="flex items-center">
765
+ <img src="https://via.placeholder.com/30" alt="Bank" class="w-8 h-8 mr-3">
766
+ <div>
767
+ <p class="font-medium">Transfer Bank</p>
768
+ <p class="text-xs text-gray-500">BNI, BRI, Mandiri, dll</p>
769
+ </div>
770
+ </div>
771
+ <i class="fas fa-chevron-right text-gray-400"></i>
772
+ </div>
773
+
774
+ <div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-300">
775
+ <div class="flex items-center">
776
+ <img src="https://via.placeholder.com/30" alt="E-Wallet" class="w-8 h-8 mr-3">
777
+ <div>
778
+ <p class="font-medium">E-Wallet</p>
779
+ <p class="text-xs text-gray-500">OVO, Dana, LinkAja</p>
780
+ </div>
781
+ </div>
782
+ <i class="fas fa-chevron-right text-gray-400"></i>
783
+ </div>
784
+
785
+ <div class="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-300">
786
+ <div class="flex items-center">
787
+ <img src="https://via.placeholder.com/30" alt="QRIS" class="w-8 h-8 mr-3">
788
+ <div>
789
+ <p class="font-medium">QRIS</p>
790
+ <p class="text-xs text-gray-500">Scan QR Code</p>
791
+ </div>
792
+ </div>
793
+ <i class="fas fa-chevron-right text-gray-400"></i>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </div>
798
+
799
+ <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg">
800
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium" onclick="showPaymentSuccess()">
801
+ Lanjutkan Pembayaran
802
+ </button>
803
+ </div>
804
+ </section>
805
+
806
+ <!-- Payment Success -->
807
+ <section id="payment-success" class="hidden absolute inset-0 bg-white z-40 px-4 py-6 flex flex-col items-center justify-center">
808
+ <div class="text-center mb-6">
809
+ <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
810
+ <i class="fas fa-check-circle text-green-500 text-4xl"></i>
811
+ </div>
812
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Pembayaran Berhasil!</h2>
813
+ <p class="text-gray-600 mb-4">Anda telah berhasil mendaftar webinar "Strategi Pemasaran Digital UMKM"</p>
814
+ <div class="bg-gray-100 rounded-lg p-4 max-w-xs mx-auto">
815
+ <p class="font-medium mb-1">Kode Peserta: WEB789123</p>
816
+ <p class="text-sm text-gray-600">Simpan kode ini sebagai bukti pendaftaran</p>
817
+ </div>
818
+ </div>
819
+
820
+ <div class="w-full max-w-xs">
821
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium mb-3" onclick="hidePaymentSuccess()">
822
+ Kembali ke Beranda
823
+ </button>
824
+ <button class="w-full border border-purple-600 text-purple-600 py-3 rounded-lg font-medium">
825
+ Lihat Tiket
826
+ </button>
827
+ </div>
828
+ </section>
829
+
830
+ <!-- Notification Panel -->
831
+ <div id="notification-panel" class="hidden absolute inset-0 bg-white z-50 transform translate-x-full">
832
+ <div class="gradient-bg text-white p-4">
833
+ <div class="flex justify-between items-center">
834
+ <h2 class="text-xl font-bold">Notifikasi</h2>
835
+ <button onclick="toggleNotificationPanel()">
836
+ <i class="fas fa-times text-xl"></i>
837
+ </button>
838
+ </div>
839
+ </div>
840
+
841
+ <div class="p-4">
842
+ <div class="flex items-start mb-4 pb-4 border-b border-gray-200">
843
+ <div class="bg-purple-100 rounded-full p-2 mr-3">
844
+ <i class="fas fa-bell text-purple-600"></i>
845
+ </div>
846
+ <div>
847
+ <h4 class="font-bold text-gray-800">Webinar besok!</h4>
848
+ <p class="text-sm text-gray-600">Webinar "Strategi Pemasaran Digital UMKM" akan dimulai besok pukul 19:00 WIB</p>
849
+ <p class="text-xs text-gray-400 mt-1">1 jam yang lalu</p>
850
+ </div>
851
+ </div>
852
+
853
+ <div class="flex items-start mb-4 pb-4 border-b border-gray-200">
854
+ <div class="bg-blue-100 rounded-full p-2 mr-3">
855
+ <i class="fas fa-lightbulb text-blue-600"></i>
856
+ </div>
857
+ <div>
858
+ <h4 class="font-bold text-gray-800">Rekomendasi baru</h4>
859
+ <p class="text-sm text-gray-600">Kami menemukan 2 rekomendasi bisnis baru yang cocok untuk Anda</p>
860
+ <p class="text-xs text-gray-400 mt-1">Kemarin</p>
861
+ </div>
862
+ </div>
863
+
864
+ <div class="flex items-start">
865
+ <div class="bg-green-100 rounded-full p-2 mr-3">
866
+ <i class="fas fa-comment-dots text-green-600"></i>
867
+ </div>
868
+ <div>
869
+ <h4 class="font-bold text-gray-800">Komentar baru</h4>
870
+ <p class="text-sm text-gray-600">Ani Wijaya membalas pertanyaan Anda di forum komunitas</p>
871
+ <p class="text-xs text-gray-400 mt-1">2 hari yang lalu</p>
872
+ </div>
873
+ </div>
874
+ </div>
875
+ </div>
876
+
877
+ <!-- Profile Panel -->
878
+ <div id="profile-panel" class="hidden absolute inset-0 bg-white z-50 transform translate-x-full">
879
+ <div class="gradient-bg text-white p-4">
880
+ <div class="flex justify-between items-center">
881
+ <h2 class="text-xl font-bold">Profil Saya</h2>
882
+ <button onclick="toggleProfilePanel()">
883
+ <i class="fas fa-times text-xl"></i>
884
+ </button>
885
+ </div>
886
+ </div>
887
+
888
+ <div class="p-4">
889
+ <div class="flex flex-col items-center mb-6">
890
+ <img src="https://via.placeholder.com/80" alt="Profile" class="w-20 h-20 rounded-full mb-3">
891
+ <h3 class="text-xl font-bold text-gray-800">Budi Santoso</h3>
892
+ <p class="text-gray-600">Calon Pengusaha UMKM</p>
893
+ </div>
894
+
895
+ <div class="mb-6">
896
+ <h4 class="font-bold text-gray-800 mb-3">Akun Saya</h4>
897
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
898
+ <button class="w-full flex items-center justify-between p-3 border-b border-gray-100">
899
+ <div class="flex items-center">
900
+ <i class="fas fa-user-edit text-purple-600 mr-3"></i>
901
+ <p>Edit Profil</p>
902
+ </div>
903
+ <i class="fas fa-chevron-right text-gray-400"></i>
904
+ </button>
905
+ <button class="w-full flex items-center justify-between p-3 border-b border-gray-100">
906
+ <div class="flex items-center">
907
+ <i class="fas fa-lock text-purple-600 mr-3"></i>
908
+ <p>Ubah Password</p>
909
+ </div>
910
+ <i class="fas fa-chevron-right text-gray-400"></i>
911
+ </button>
912
+ <button class="w-full flex items-center justify-between p-3">
913
+ <div class="flex items-center">
914
+ <i class="fas fa-bell text-purple-600 mr-3"></i>
915
+ <p>Pengaturan Notifikasi</p>
916
+ </div>
917
+ <i class="fas fa-chevron-right text-gray-400"></i>
918
+ </button>
919
+ </div>
920
+ </div>
921
+
922
+ <div class="mb-6">
923
+ <h4 class="font-bold text-gray-800 mb-3">Bantuan</h4>
924
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
925
+ <button class="w-full flex items-center justify-between p-3 border-b border-gray-100">
926
+ <div class="flex items-center">
927
+ <i class="fas fa-question-circle text-purple-600 mr-3"></i>
928
+ <p>Pusat Bantuan</p>
929
+ </div>
930
+ <i class="fas fa-chevron-right text-gray-400"></i>
931
+ </button>
932
+ <button class="w-full flex items-center justify-between p-3">
933
+ <div class="flex items-center">
934
+ <i class="fas fa-headset text-purple-600 mr-3"></i>
935
+ <p>Hubungi Kami</p>
936
+ </div>
937
+ <i class="fas fa-chevron-right text-gray-400"></i>
938
+ </button>
939
+ </div>
940
+ </div>
941
+
942
+ <button class="w-full flex items-center justify-between p-3 bg-red-50 rounded-lg">
943
+ <div class="flex items-center">
944
+ <i class="fas fa-sign-out-alt text-red-600 mr-3"></i>
945
+ <p class="text-red-600">Keluar</p>
946
+ </div>
947
+ <i class="fas fa-chevron-right text-red-400"></i>
948
+ </button>
949
+ </div>
950
+ </div>
951
+ </main>
952
+
953
+ <!-- Bottom Navigation -->
954
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around items-center p-3 z-10">
955
+ <button onclick="navigateTo('dashboard')" class="flex flex-col items-center text-purple-600">
956
+ <i class="fas fa-home text-xl"></i>
957
+ <span class="text-xs mt-1">Beranda</span>
958
+ </button>
959
+ <button onclick="navigateTo('recommendation')" class="flex flex-col items-center text-gray-500">
960
+ <i class="fas fa-lightbulb text-xl"></i>
961
+ <span class="text-xs mt-1">Rekomendasi</span>
962
+ </button>
963
+ <button onclick="navigateTo('webinar')" class="flex flex-col items-center text-gray-500">
964
+ <i class="fas fa-video text-xl"></i>
965
+ <span class="text-xs mt-1">Webinar</span>
966
+ </button>
967
+ <button onclick="navigateTo('learning')" class="flex flex-col items-center text-gray-500">
968
+ <i class="fas fa-book text-xl"></i>
969
+ <span class="text-xs mt-1">Belajar</span>
970
+ </button>
971
+ </nav>
972
+
973
+ <script>
974
+ // Navigation functions
975
+ function navigateTo(section) {
976
+ // Hide all sections
977
+ document.querySelectorAll('main > section').forEach(sec => {
978
+ sec.classList.add('hidden');
979
+ });
980
+
981
+ // Show selected section
982
+ document.getElementById(section).classList.remove('hidden');
983
+
984
+ // Update active tab in bottom navigation
985
+ document.querySelectorAll('nav button').forEach(btn => {
986
+ btn.classList.remove('text-purple-600');
987
+ btn.classList.add('text-gray-500');
988
+ });
989
+
990
+ if(section === 'dashboard') {
991
+ document.querySelector('nav button:nth-child(1)').classList.remove('text-gray-500');
992
+ document.querySelector('nav button:nth-child(1)').classList.add('text-purple-600');
993
+ } else if(section === 'recommendation') {
994
+ document.querySelector('nav button:nth-child(2)').classList.remove('text-gray-500');
995
+ document.querySelector('nav button:nth-child(2)').classList.add('text-purple-600');
996
+ } else if(section === 'webinar') {
997
+ document.querySelector('nav button:nth-child(3)').classList.remove('text-gray-500');
998
+ document.querySelector('nav button:nth-child(3)').classList.add('text-purple-600');
999
+ } else if(section === 'learning') {
1000
+ document.querySelector('nav button:nth-child(4)').classList.remove('text-gray-500');
1001
+ document.querySelector('nav button:nth-child(4)').classList.add('text-purple-600');
1002
+ }
1003
+ }
1004
+
1005
+ // Business detail functions
1006
+ function showBusinessDetail(businessName) {
1007
+ document.getElementById('business-detail').classList.remove('hidden');
1008
+ }
1009
+
1010
+ function hideBusinessDetail() {
1011
+ document.getElementById('business-detail').classList.add('hidden');
1012
+ }
1013
+
1014
+ // Webinar detail functions
1015
+ function showWebinarDetail() {
1016
+ document.getElementById('webinar-detail').classList.remove('hidden');
1017
+ }
1018
+
1019
+ function hideWebinarDetail() {
1020
+ document.getElementById('webinar-detail').classList.add('hidden');
1021
+ }
1022
+
1023
+ // Article detail functions
1024
+ function showArticleDetail() {
1025
+ document.getElementById('article-detail').classList.remove('hidden');
1026
+ }
1027
+
1028
+ function hideArticleDetail() {
1029
+ document.getElementById('article-detail').classList.add('hidden');
1030
+ }
1031
+
1032
+ // Payment functions
1033
+ function showPayment() {
1034
+ document.getElementById('payment').classList.remove('hidden');
1035
+ }
1036
+
1037
+ function hidePayment() {
1038
+ document.getElementById('payment').classList.add('hidden');
1039
+ }
1040
+
1041
+ function showPaymentSuccess() {
1042
+ document.getElementById('payment-success').classList.remove('hidden');
1043
+ }
1044
+
1045
+ function hidePaymentSuccess() {
1046
+ document.getElementById('payment-success').classList.add('hidden');
1047
+ navigateTo('dashboard');
1048
+ }
1049
+
1050
+ // Panel toggle functions
1051
+ function toggleNotificationPanel() {
1052
+ const panel = document.getElementById('notification-panel');
1053
+ if(panel.classList.contains('hidden')) {
1054
+ panel.classList.remove('hidden');
1055
+ panel.classList.remove('translate-x-full');
1056
+ panel.classList.add('slide-in');
1057
+ } else {
1058
+ panel.classList.add('slide-out');
1059
+ setTimeout(() => {
1060
+ panel.classList.add('hidden');
1061
+ panel.classList.add('translate-x-full');
1062
+ panel.classList.remove('slide-in');
1063
+ panel.classList.remove('slide-out');
1064
+ }, 300);
1065
+ }
1066
+ }
1067
+
1068
+ function toggleProfilePanel() {
1069
+ const panel = document.getElementById('profile-panel');
1070
+ if(panel.classList.contains('hidden')) {
1071
+ panel.classList.remove('hidden');
1072
+ panel.classList.remove('translate-x-full');
1073
+ panel.classList.add('slide-in');
1074
+ } else {
1075
+ panel.classList.add('slide-out');
1076
+ setTimeout(() => {
1077
+ panel.classList.add('hidden');
1078
+ panel.classList.add('translate-x-full');
1079
+ panel.classList.remove('slide-in');
1080
+ panel.classList.remove('slide-out');
1081
+ }, 300);
1082
+ }
1083
+ }
1084
+
1085
+ // Tab switching functions
1086
+ function changeWebinarTab(tab) {
1087
+ if(tab === 'upcoming') {
1088
+ document.getElementById('upcoming-webinars').classList.remove('hidden');
1089
+ document.getElementById('recorded-webinars').classList.add('hidden');
1090
+ document.querySelector('#webinar button:nth-child(1)').classList.add('tab-active');
1091
+ document.querySelector('#webinar button:nth-child(1)').classList.remove('text-gray-500');
1092
+ document.querySelector('#webinar button:nth-child(2)').classList.remove('tab-active');
1093
+ document.querySelector('#webinar button:nth-child(2)').classList.add('text-gray-500');
1094
+ } else {
1095
+ document.getElementById('upcoming-webinars').classList.add('hidden');
1096
+ document.getElementById('recorded-webinars').classList.remove('hidden');
1097
+ document.querySelector('#webinar button:nth-child(1)').classList.remove('tab-active');
1098
+ document.querySelector('#webinar button:nth-child(1)').classList.add('text-gray-500');
1099
+ document.querySelector('#webinar button:nth-child(2)').classList.add('tab-active');
1100
+ document.querySelector('#webinar button:nth-child(2)').classList.remove('text-gray-500');
1101
+ }
1102
+ }
1103
+
1104
+ function changeLearningTab(tab) {
1105
+ if(tab === 'articles') {
1106
+ document.getElementById('articles-content').classList.remove('hidden');
1107
+ document.getElementById('videos-content').classList.add('hidden');
1108
+ document.getElementById('guides-content').classList.add('hidden');
1109
+ document.querySelector('#learning button:nth-child(1)').classList.add('tab-active');
1110
+ document.querySelector('#learning button:nth-child(1)').classList.remove('text-gray-500');
1111
+ document.querySelector('#learning button:nth-child(2)').classList.remove('tab-active');
1112
+ document.querySelector('#learning button:nth-child(2)').classList.add('text-gray-500');
1113
+ document.querySelector('#learning button:nth-child(3)').classList.remove('tab-active');
1114
+ document.querySelector('#learning button:nth-child(3)').classList.add('text-gray-500');
1115
+ } else if(tab === 'videos') {
1116
+ document.getElementById('articles-content').classList.add('hidden');
1117
+ document.getElementById('videos-content').classList.remove('hidden');
1118
+ document.getElementById('guides-content').classList.add('hidden');
1119
+ document.querySelector('#learning button:nth-child(1)').classList.remove('tab-active');
1120
+ document.querySelector('#learning button:nth-child(1)').classList.add('text-gray-500');
1121
+ document.querySelector('#learning button:nth-child(2)').classList.add('tab-active');
1122
+ document.querySelector('#learning button:nth-child(2)').classList.remove('text-gray-500');
1123
+ document.querySelector('#learning button:nth-child(3)').classList.remove('tab-active');
1124
+ document.querySelector('#learning button:nth-child(3)').classList.add('text-gray-500');
1125
+ } else {
1126
+ document.getElementById('articles-content').classList.add('hidden');
1127
+ document.getElementById('videos-content').classList.add('hidden');
1128
+ document.getElementById('guides-content').classList.remove('hidden');
1129
+ document.querySelector('#learning button:nth-child(1)').classList.remove('tab-active');
1130
+ document.querySelector('#learning button:nth-child(1)').classList.add('text-gray-500');
1131
+ document.querySelector('#learning button:nth-child(2)').classList.remove('tab-active');
1132
+ document.querySelector('#learning button:nth-child(2)').classList.add('text-gray-500');
1133
+ document.querySelector('#learning button:nth-child(3)').classList.add('tab-active');
1134
+ document.querySelector('#learning button:nth-child(3)').classList.remove('text-gray-500');
1135
+ }
1136
+ }
1137
+ </script>
1138
+ <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>
1139
+ </html>