Hugging Face's logo

Spaces:
farwew
/
test
Running

App Files Community
farwew commited on
Commit
ad8d7af
·
verified ·
1 Parent(s): 5812a1b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +919 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🏆
4
  colorFrom: blue
5
- colorTo: indigo
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: test
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: green
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,919 @@
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 - Temukan Usaha UMKM Terbaik untuk Anda</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
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
19
+ }
20
+
21
+ .business-card, .article-card, .webinar-card, .tutorial-card {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .business-card:hover, .article-card:hover, .webinar-card:hover, .tutorial-card:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .progress-bar {
31
+ height: 8px;
32
+ border-radius: 4px;
33
+ background-color: #e5e7eb;
34
+ }
35
+
36
+ .progress-fill {
37
+ height: 100%;
38
+ border-radius: 4px;
39
+ background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 100%);
40
+ transition: width 0.5s ease;
41
+ }
42
+
43
+ .tab-active {
44
+ border-bottom: 3px solid #4f46e5;
45
+ color: #4f46e5;
46
+ font-weight: 600;
47
+ }
48
+
49
+ .page {
50
+ display: none;
51
+ }
52
+
53
+ .page-active {
54
+ display: block;
55
+ }
56
+
57
+ .nav-active {
58
+ color: #4f46e5;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="max-w-md mx-auto bg-gray-50">
63
+ <!-- Header -->
64
+ <header class="gradient-bg text-white p-4 rounded-b-2xl shadow-lg" id="main-header">
65
+ <div class="flex justify-between items-center">
66
+ <div class="flex items-center space-x-2">
67
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
68
+ <i class="fas fa-coins text-purple-600 text-xl"></i>
69
+ </div>
70
+ <h1 class="text-xl font-bold">Cuan.in</h1>
71
+ </div>
72
+ <div class="flex space-x-3">
73
+ <button class="bg-white bg-opacity-20 p-2 rounded-full">
74
+ <i class="fas fa-bell"></i>
75
+ </button>
76
+ <button class="bg-white bg-opacity-20 p-2 rounded-full">
77
+ <i class="fas fa-user"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="mt-6">
83
+ <h2 class="text-xl font-semibold">Halo, Budi!</h2>
84
+ <p class="text-purple-100">Temukan usaha UMKM yang cocok untuk Anda</p>
85
+
86
+ <div class="mt-4 relative">
87
+ <input type="text" placeholder="Cari jenis usaha..." class="w-full py-3 px-4 pr-10 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-300">
88
+ <button class="absolute right-3 top-3 text-purple-600">
89
+ <i class="fas fa-search"></i>
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </header>
94
+
95
+ <!-- Home Page -->
96
+ <div id="home-page" class="page page-active">
97
+ <!-- Progress Section -->
98
+ <section class="bg-white mx-4 mt-6 p-4 rounded-xl shadow-sm">
99
+ <div class="flex justify-between items-center mb-2">
100
+ <h3 class="font-medium text-gray-700">Profil UMKM Anda</h3>
101
+ <span class="text-sm text-purple-600">65% lengkap</span>
102
+ </div>
103
+
104
+ <div class="progress-bar mb-2">
105
+ <div class="progress-fill" style="width: 65%"></div>
106
+ </div>
107
+
108
+ <p class="text-sm text-gray-500">Lengkapi profil untuk rekomendasi usaha yang lebih akurat</p>
109
+
110
+ <button class="mt-3 w-full py-2 bg-purple-100 text-purple-600 rounded-lg font-medium hover:bg-purple-200 transition">
111
+ Lengkapi Profil
112
+ </button>
113
+ </section>
114
+
115
+ <!-- Tabs Navigation -->
116
+ <div class="flex justify-around mt-6 px-4 border-b">
117
+ <button class="tab-active pb-2 px-4" onclick="switchTab('recommendation')">Rekomendasi</button>
118
+ <button class="text-gray-500 pb-2 px-4" onclick="switchTab('article')">Artikel</button>
119
+ <button class="text-gray-500 pb-2 px-4" onclick="switchTab('webinar')">Webinar</button>
120
+ <button class="text-gray-500 pb-2 px-4" onclick="switchTab('tutorial')">Tutorial</button>
121
+ </div>
122
+
123
+ <!-- Business Recommendations -->
124
+ <section id="recommendation-tab" class="px-4 mt-4 tab-content">
125
+ <h3 class="font-semibold text-lg mb-3">Rekomendasi untuk Anda</h3>
126
+
127
+ <div class="space-y-4">
128
+ <!-- Business Card 1 -->
129
+ <div class="business-card bg-white p-4 rounded-xl shadow-sm">
130
+ <div class="flex items-start">
131
+ <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
132
+ <i class="fas fa-utensils text-yellow-500 text-2xl"></i>
133
+ </div>
134
+ <div class="flex-1">
135
+ <h4 class="font-semibold">Warung Makan Sederhana</h4>
136
+ <div class="flex items-center mt-1">
137
+ <i class="fas fa-map-marker-alt text-gray-400 text-xs mr-1"></i>
138
+ <span class="text-xs text-gray-500">Cocok di daerah Anda (Jakarta Selatan)</span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="mt-3 flex justify-between items-center">
144
+ <div>
145
+ <p class="text-xs text-gray-500">Estimasi Modal</p>
146
+ <p class="font-medium">Rp 5-10 juta</p>
147
+ </div>
148
+ <div>
149
+ <p class="text-xs text-gray-500">Potensi Keuntungan</p>
150
+ <p class="font-medium text-green-500">Rp 2-4 juta/bulan</p>
151
+ </div>
152
+ <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition">
153
+ Detail
154
+ </button>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Business Card 2 -->
159
+ <div class="business-card bg-white p-4 rounded-xl shadow-sm">
160
+ <div class="flex items-start">
161
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
162
+ <i class="fas fa-tshirt text-blue-500 text-2xl"></i>
163
+ </div>
164
+ <div class="flex-1">
165
+ <h4 class="font-semibold">Bisnis Kaos Distro</h4>
166
+ <div class="flex items-center mt-1">
167
+ <i class="fas fa-map-marker-alt text-gray-400 text-xs mr-1"></i>
168
+ <span class="text-xs text-gray-500">Cocok di daerah Anda (Jakarta Selatan)</span>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="mt-3 flex justify-between items-center">
174
+ <div>
175
+ <p class="text-xs text-gray-500">Estimasi Modal</p>
176
+ <p class="font-medium">Rp 8-15 juta</p>
177
+ </div>
178
+ <div>
179
+ <p class="text-xs text-gray-500">Potensi Keuntungan</p>
180
+ <p class="font-medium text-green-500">Rp 3-6 juta/bulan</p>
181
+ </div>
182
+ <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition">
183
+ Detail
184
+ </button>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Business Card 3 -->
189
+ <div class="business-card bg-white p-4 rounded-xl shadow-sm">
190
+ <div class="flex items-start">
191
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mr-3">
192
+ <i class="fas fa-seedling text-green-500 text-2xl"></i>
193
+ </div>
194
+ <div class="flex-1">
195
+ <h4 class="font-semibold">Tanaman Hias Mini</h4>
196
+ <div class="flex items-center mt-1">
197
+ <i class="fas fa-map-marker-alt text-gray-400 text-xs mr-1"></i>
198
+ <span class="text-xs text-gray-500">Cocok di daerah Anda (Jakarta Selatan)</span>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="mt-3 flex justify-between items-center">
204
+ <div>
205
+ <p class="text-xs text-gray-500">Estimasi Modal</p>
206
+ <p class="font-medium">Rp 3-7 juta</p>
207
+ </div>
208
+ <div>
209
+ <p class="text-xs text-gray-500">Potensi Keuntungan</p>
210
+ <p class="font-medium text-green-500">Rp 1.5-3 juta/bulan</p>
211
+ </div>
212
+ <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition">
213
+ Detail
214
+ </button>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
220
+ Lihat Semua Rekomendasi
221
+ </button>
222
+ </section>
223
+
224
+ <!-- Articles Section -->
225
+ <section id="article-tab" class="px-4 mt-4 tab-content hidden">
226
+ <div class="flex justify-between items-center mb-3">
227
+ <h3 class="font-semibold text-lg">Artikel Terbaru</h3>
228
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
229
+ </div>
230
+
231
+ <div class="space-y-4">
232
+ <!-- Article Card 1 -->
233
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
234
+ <div class="flex">
235
+ <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
236
+ <i class="fas fa-chart-line text-purple-600 text-xl"></i>
237
+ </div>
238
+ <div>
239
+ <h4 class="font-semibold">5 Tren Bisnis Makanan 2023</h4>
240
+ <p class="text-sm text-gray-600 mt-1">Pelajari jenis makanan yang sedang booming di pasaran</p>
241
+
242
+ <div class="flex items-center mt-3 text-xs text-gray-500">
243
+ <i class="far fa-clock mr-1"></i>
244
+ <span>5 menit baca</span>
245
+ <span class="mx-2">•</span>
246
+ <i class="far fa-calendar mr-1"></i>
247
+ <span>15 Juni 2023</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Article Card 2 -->
254
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
255
+ <div class="flex">
256
+ <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
257
+ <i class="fas fa-money-bill-wave text-blue-600 text-xl"></i>
258
+ </div>
259
+ <div>
260
+ <h4 class="font-semibold">Manajemen Keuangan untuk UMKM</h4>
261
+ <p class="text-sm text-gray-600 mt-1">Tips mengatur keuangan usaha kecil agar tetap sehat</p>
262
+
263
+ <div class="flex items-center mt-3 text-xs text-gray-500">
264
+ <i class="far fa-clock mr-1"></i>
265
+ <span>8 menit baca</span>
266
+ <span class="mx-2">•</span>
267
+ <i class="far fa-calendar mr-1"></i>
268
+ <span>10 Juni 2023</span>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Article Card 3 -->
275
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
276
+ <div class="flex">
277
+ <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
278
+ <i class="fas fa-hashtag text-green-600 text-xl"></i>
279
+ </div>
280
+ <div>
281
+ <h4 class="font-semibold">Strategi Pemasaran Digital</h4>
282
+ <p class="text-sm text-gray-600 mt-1">Manfaatkan media sosial untuk menjangkau lebih banyak pelanggan</p>
283
+
284
+ <div class="flex items-center mt-3 text-xs text-gray-500">
285
+ <i class="far fa-clock mr-1"></i>
286
+ <span>10 menit baca</span>
287
+ <span class="mx-2">•</span>
288
+ <i class="far fa-calendar mr-1"></i>
289
+ <span>5 Juni 2023</span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
297
+ Lihat Semua Artikel
298
+ </button>
299
+ </section>
300
+
301
+ <!-- Webinar Section -->
302
+ <section id="webinar-tab" class="px-4 mt-4 tab-content hidden">
303
+ <div class="flex justify-between items-center mb-3">
304
+ <h3 class="font-semibold text-lg">Webinar Mendatang</h3>
305
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
306
+ </div>
307
+
308
+ <div class="space-y-4">
309
+ <!-- Webinar Card 1 -->
310
+ <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
311
+ <div class="flex">
312
+ <div class="w-20 h-20 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
313
+ <i class="fas fa-chalkboard-teacher text-purple-600 text-xl"></i>
314
+ </div>
315
+ <div>
316
+ <h4 class="font-semibold">Kiat Sukses Bisnis Kopi Kekinian</h4>
317
+ <p class="text-sm text-gray-600 mt-1">Dengan pemilik "Kopi Tenang" yang memiliki 15 cabang</p>
318
+
319
+ <div class="flex items-center mt-2 text-sm">
320
+ <div class="flex items-center mr-4">
321
+ <i class="far fa-calendar text-purple-500 mr-1"></i>
322
+ <span>25 Juni 2023</span>
323
+ </div>
324
+ <div class="flex items-center">
325
+ <i class="far fa-clock text-purple-500 mr-1"></i>
326
+ <span>19:00 WIB</span>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="mt-3 flex justify-between items-center">
331
+ <span class="text-sm bg-purple-100 text-purple-600 px-2 py-1 rounded">Rp 75.000</span>
332
+ <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition">
333
+ Daftar
334
+ </button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Webinar Card 2 -->
341
+ <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
342
+ <div class="flex">
343
+ <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
344
+ <i class="fas fa-store text-blue-600 text-xl"></i>
345
+ </div>
346
+ <div>
347
+ <h4 class="font-semibold">Memulai Bisnis Franchise Modal Kecil</h4>
348
+ <p class="text-sm text-gray-600 mt-1">Panduan memilih franchise yang menguntungkan</p>
349
+
350
+ <div class="flex items-center mt-2 text-sm">
351
+ <div class="flex items-center mr-4">
352
+ <i class="far fa-calendar text-blue-500 mr-1"></i>
353
+ <span>30 Juni 2023</span>
354
+ </div>
355
+ <div class="flex items-center">
356
+ <i class="far fa-clock text-blue-500 mr-1"></i>
357
+ <span>15:00 WIB</span>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="mt-3 flex justify-between items-center">
362
+ <span class="text-sm bg-blue-100 text-blue-600 px-2 py-1 rounded">Rp 50.000</span>
363
+ <button class="bg-blue-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-blue-700 transition">
364
+ Daftar
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Webinar Card 3 -->
372
+ <div class="webinar-card bg-white p-4 rounded-xl shadow-sm">
373
+ <div class="flex">
374
+ <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
375
+ <i class="fas fa-mobile-alt text-green-600 text-xl"></i>
376
+ </div>
377
+ <div>
378
+ <h4 class="font-semibold">Optimalkan Penjualan dengan Marketplace</h4>
379
+ <p class="text-sm text-gray-600 mt-1">Strategi meningkatkan omset di Tokopedia & Shopee</p>
380
+
381
+ <div class="flex items-center mt-2 text-sm">
382
+ <div class="flex items-center mr-4">
383
+ <i class="far fa-calendar text-green-500 mr-1"></i>
384
+ <span>5 Juli 2023</span>
385
+ </div>
386
+ <div class="flex items-center">
387
+ <i class="far fa-clock text-green-500 mr-1"></i>
388
+ <span>13:00 WIB</span>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="mt-3 flex justify-between items-center">
393
+ <span class="text-sm bg-green-100 text-green-600 px-2 py-1 rounded">Gratis</span>
394
+ <button class="bg-green-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-green-700 transition">
395
+ Daftar
396
+ </button>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
404
+ Lihat Semua Webinar
405
+ </button>
406
+ </section>
407
+
408
+ <!-- Tutorial Section -->
409
+ <section id="tutorial-tab" class="px-4 mt-4 tab-content hidden">
410
+ <div class="flex justify-between items-center mb-3">
411
+ <h3 class="font-semibold text-lg">Tutorial UMKM</h3>
412
+ <a href="#" class="text-sm text-purple-600">Lihat semua</a>
413
+ </div>
414
+
415
+ <div class="space-y-4">
416
+ <!-- Tutorial Card 1 -->
417
+ <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
418
+ <div class="flex">
419
+ <div class="w-20 h-20 bg-red-100 rounded-lg overflow-hidden mr-3">
420
+ <img src="https://img.youtube.com/vi/abc123/0.jpg" alt="Video Thumbnail" class="w-full h-full object-cover">
421
+ <div class="absolute inset-0 flex items-center justify-center">
422
+ <i class="fas fa-play text-red-500 text-xl"></i>
423
+ </div>
424
+ </div>
425
+ <div>
426
+ <h4 class="font-semibold">Cara Membuat Laporan Keuangan Sederhana</h4>
427
+ <p class="text-sm text-gray-600 mt-1">Panduan untuk pemula dalam mengelola keuangan UMKM</p>
428
+
429
+ <div class="flex items-center mt-3 text-xs text-gray-500">
430
+ <i class="far fa-clock mr-1"></i>
431
+ <span>12 menit</span>
432
+ <span class="mx-2">•</span>
433
+ <i class="fas fa-eye mr-1"></i>
434
+ <span>1.2K views</span>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Tutorial Card 2 -->
441
+ <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
442
+ <div class="flex">
443
+ <div class="w-20 h-20 bg-purple-100 rounded-lg overflow-hidden mr-3">
444
+ <img src="https://img.youtube.com/vi/def456/0.jpg" alt="Video Thumbnail" class="w-full h-full object-cover">
445
+ <div class="absolute inset-0 flex items-center justify-center">
446
+ <i class="fas fa-play text-purple-500 text-xl"></i>
447
+ </div>
448
+ </div>
449
+ <div>
450
+ <h4 class="font-semibold">Strategi Branding untuk Produk Lokal</h4>
451
+ <p class="text-sm text-gray-600 mt-1">Membangun citra merek yang kuat untuk UMKM</p>
452
+
453
+ <div class="flex items-center mt-3 text-xs text-gray-500">
454
+ <i class="far fa-clock mr-1"></i>
455
+ <span>15 menit</span>
456
+ <span class="mx-2">•</span>
457
+ <i class="fas fa-eye mr-1"></i>
458
+ <span>2.5K views</span>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Tutorial Card 3 -->
465
+ <div class="tutorial-card bg-white p-4 rounded-xl shadow-sm">
466
+ <div class="flex">
467
+ <div class="w-20 h-20 bg-blue-100 rounded-lg overflow-hidden mr-3">
468
+ <img src="https://img.youtube.com/vi/ghi789/0.jpg" alt="Video Thumbnail" class="w-full h-full object-cover">
469
+ <div class="absolute inset-0 flex items-center justify-center">
470
+ <i class="fas fa-play text-blue-500 text-xl"></i>
471
+ </div>
472
+ </div>
473
+ <div>
474
+ <h4 class="font-semibold">Packing Produk yang Aman untuk Pengiriman</h4>
475
+ <p class="text-sm text-gray-600 mt-1">Teknik mengemas produk agar sampai dengan selamat</p>
476
+
477
+ <div class="flex items-center mt-3 text-xs text-gray-500">
478
+ <i class="far fa-clock mr-1"></i>
479
+ <span>8 menit</span>
480
+ <span class="mx-2">•</span>
481
+ <i class="fas fa-eye mr-1"></i>
482
+ <span>3.1K views</span>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
490
+ Lihat Semua Tutorial
491
+ </button>
492
+ </section>
493
+
494
+ <!-- Quick Access -->
495
+ <section class="px-4 mt-6 mb-16">
496
+ <h3 class="font-semibold text-lg mb-3">Akses Cepat</h3>
497
+
498
+ <div class="grid grid-cols-4 gap-3">
499
+ <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
500
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-2">
501
+ <i class="fas fa-calculator text-blue-500"></i>
502
+ </div>
503
+ <span class="text-xs text-center">Kalkulator Modal</span>
504
+ </a>
505
+
506
+ <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
507
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
508
+ <i class="fas fa-book text-green-500"></i>
509
+ </div>
510
+ <span class="text-xs text-center">Panduan</span>
511
+ </a>
512
+
513
+ <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
514
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
515
+ <i class="fas fa-chart-line text-yellow-500"></i>
516
+ </div>
517
+ <span class="text-xs text-center">Tren Pasar</span>
518
+ </a>
519
+
520
+ <a href="#" class="bg-white p-3 rounded-xl shadow-sm flex flex-col items-center">
521
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
522
+ <i class="fas fa-headset text-purple-500"></i>
523
+ </div>
524
+ <span class="text-xs text-center">Konsultasi</span>
525
+ </a>
526
+ </div>
527
+ </section>
528
+ </div>
529
+
530
+ <!-- Search Page -->
531
+ <div id="search-page" class="page hidden">
532
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
533
+ <div class="relative">
534
+ <input type="text" placeholder="Cari jenis usaha, artikel, atau webinar..." class="w-full py-3 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
535
+ <button class="absolute right-3 top-3 text-purple-600">
536
+ <i class="fas fa-search"></i>
537
+ </button>
538
+ </div>
539
+
540
+ <div class="mt-6">
541
+ <h3 class="font-semibold text-lg mb-3">Kategori Populer</h3>
542
+
543
+ <div class="flex flex-wrap gap-2">
544
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Makanan</span>
545
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Fashion</span>
546
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Kerajinan</span>
547
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Jasa</span>
548
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Pertanian</span>
549
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Teknologi</span>
550
+ </div>
551
+ </div>
552
+
553
+ <div class="mt-6">
554
+ <h3 class="font-semibold text-lg mb-3">Pencarian Terakhir</h3>
555
+
556
+ <div class="space-y-2">
557
+ <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
558
+ <span>Bisnis kopi kekinian</span>
559
+ <i class="fas fa-times text-gray-400"></i>
560
+ </div>
561
+ <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
562
+ <span>Modal usaha under 5 juta</span>
563
+ <i class="fas fa-times text-gray-400"></i>
564
+ </div>
565
+ <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded">
566
+ <span>Strategi pemasaran online</span>
567
+ <i class="fas fa-times text-gray-400"></i>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="px-4 mt-4">
574
+ <h3 class="font-semibold text-lg mb-3">Hasil Pencarian</h3>
575
+
576
+ <div class="bg-white p-4 rounded-xl shadow-sm">
577
+ <p class="text-center text-gray-500">Mulai pencarian untuk melihat hasil</p>
578
+ </div>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Article Page -->
583
+ <div id="article-page" class="page hidden">
584
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
585
+ <div class="flex justify-between items-center">
586
+ <h1 class="text-xl font-bold">Artikel UMKM</h1>
587
+ <button class="text-purple-600">
588
+ <i class="fas fa-sliders-h"></i>
589
+ </button>
590
+ </div>
591
+
592
+ <div class="mt-4 relative">
593
+ <input type="text" placeholder="Cari artikel..." class="w-full py-3 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
594
+ <button class="absolute right-3 top-3 text-purple-600">
595
+ <i class="fas fa-search"></i>
596
+ </button>
597
+ </div>
598
+
599
+ <div class="mt-4 flex overflow-x-auto pb-2 gap-2">
600
+ <span class="px-3 py-1 bg-purple-600 text-white rounded-full text-sm whitespace-nowrap">Semua</span>
601
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Perencanaan</span>
602
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Pemasaran</span>
603
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Keuangan</span>
604
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm whitespace-nowrap">Legal</span>
605
+ </div>
606
+ </div>
607
+
608
+ <div class="px-4 mt-4 space-y-4">
609
+ <!-- Featured Article -->
610
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
611
+ <div class="h-40 bg-purple-100 relative">
612
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Featured Article" class="w-full h-full object-cover">
613
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
614
+ <span class="text-xs bg-purple-600 text-white px-2 py-1 rounded">Featured</span>
615
+ <h3 class="text-white font-semibold mt-2">10 Ide Bisnis Kreatif dengan Modal Minim</h3>
616
+ </div>
617
+ </div>
618
+ <div class="p-4">
619
+ <p class="text-sm text-gray-600">Temukan ide bisnis unik yang bisa dimulai dengan modal di bawah 5 juta rupiah dan memiliki potensi pasar yang besar.</p>
620
+ <div class="flex items-center mt-3 text-xs text-gray-500">
621
+ <i class="far fa-clock mr-1"></i>
622
+ <span>8 menit baca</span>
623
+ <span class="mx-2">•</span>
624
+ <i class="far fa-calendar mr-1"></i>
625
+ <span>18 Juni 2023</span>
626
+ </div>
627
+ </div>
628
+ </div>
629
+
630
+ <!-- Article List -->
631
+ <div class="space-y-4">
632
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
633
+ <div class="flex">
634
+ <div class="w-20 h-20 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
635
+ <i class="fas fa-chart-pie text-blue-600 text-xl"></i>
636
+ </div>
637
+ <div>
638
+ <h4 class="font-semibold">Analisis Pasar untuk Produk Lokal</h4>
639
+ <p class="text-sm text-gray-600 mt-1">Bagaimana memahami kebutuhan pasar sebelum memulai usaha</p>
640
+
641
+ <div class="flex items-center mt-3 text-xs text-gray-500">
642
+ <i class="far fa-clock mr-1"></i>
643
+ <span>6 menit baca</span>
644
+ <span class="mx-2">•</span>
645
+ <i class="far fa-calendar mr-1"></i>
646
+ <span>15 Juni 2023</span>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
653
+ <div class="flex">
654
+ <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center mr-3">
655
+ <i class="fas fa-wallet text-green-600 text-xl"></i>
656
+ </div>
657
+ <div>
658
+ <h4 class="font-semibold">Cara Mengajukan Pinjaman UMKM</h4>
659
+ <p class="text-sm text-gray-600 mt-1">Panduan lengkap untuk mendapatkan modal usaha dari bank</p>
660
+
661
+ <div class="flex items-center mt-3 text-xs text-gray-500">
662
+ <i class="far fa-clock mr-1"></i>
663
+ <span>10 menit baca</span>
664
+ <span class="mx-2">•</span>
665
+ <i class="far fa-calendar mr-1"></i>
666
+ <span>12 Juni 2023</span>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="article-card bg-white p-4 rounded-xl shadow-sm">
673
+ <div class="flex">
674
+ <div class="w-20 h-20 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
675
+ <i class="fas fa-users text-yellow-600 text-xl"></i>
676
+ </div>
677
+ <div>
678
+ <h4 class="font-semibold">Membangun Tim untuk UMKM</h4>
679
+ <p class="text-sm text-gray-600 mt-1">Strategi merekrut dan mempertahankan karyawan berkualitas</p>
680
+
681
+ <div class="flex items-center mt-3 text-xs text-gray-500">
682
+ <i class="far fa-clock mr-1"></i>
683
+ <span>7 menit baca</span>
684
+ <span class="mx-2">•</span>
685
+ <i class="far fa-calendar mr-1"></i>
686
+ <span>8 Juni 2023</span>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+
693
+ <button class="w-full mt-4 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
694
+ Muat Lebih Banyak
695
+ </button>
696
+ </div>
697
+ </div>
698
+
699
+ <!-- Profile Page -->
700
+ <div id="profile-page" class="page hidden">
701
+ <div class="bg-white p-4 rounded-b-xl shadow-sm">
702
+ <div class="flex justify-between items-center">
703
+ <h1 class="text-xl font-bold">Profil Saya</h1>
704
+ <button class="text-purple-600">
705
+ <i class="fas fa-cog"></i>
706
+ </button>
707
+ </div>
708
+ </div>
709
+
710
+ <div class="px-4 mt-4">
711
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center">
712
+ <div class="w-24 h-24 bg-purple-100 rounded-full mx-auto mb-4 flex items-center justify-center">
713
+ <i class="fas fa-user text-purple-600 text-3xl"></i>
714
+ </div>
715
+ <h3 class="font-semibold text-lg">Budi Santoso</h3>
716
+ <p class="text-gray-600">Pelaku UMKM Pemula</p>
717
+
718
+ <div class="mt-4 flex justify-center space-x-4">
719
+ <div class="text-center">
720
+ <div class="w-12 h-12 bg-blue-100 rounded-full mx-auto mb-2 flex items-center justify-center">
721
+ <i class="fas fa-medal text-blue-600"></i>
722
+ </div>
723
+ <span class="text-xs">Level 2</span>
724
+ </div>
725
+ <div class="text-center">
726
+ <div class="w-12 h-12 bg-green-100 rounded-full mx-auto mb-2 flex items-center justify-center">
727
+ <i class="fas fa-star text-green-600"></i>
728
+ </div>
729
+ <span class="text-xs">85 XP</span>
730
+ </div>
731
+ <div class="text-center">
732
+ <div class="w-12 h-12 bg-yellow-100 rounded-full mx-auto mb-2 flex items-center justify-center">
733
+ <i class="fas fa-trophy text-yellow-600"></i>
734
+ </div>
735
+ <span class="text-xs">3 Pencapaian</span>
736
+ </div>
737
+ </div>
738
+ </div>
739
+
740
+ <div class="mt-6 space-y-4">
741
+ <div class="bg-white p-4 rounded-xl shadow-sm">
742
+ <h3 class="font-semibold mb-3">Profil UMKM</h3>
743
+
744
+ <div class="space-y-3">
745
+ <div>
746
+ <p class="text-xs text-gray-500">Status</p>
747
+ <p class="font-medium">Belum memiliki usaha</p>
748
+ </div>
749
+ <div>
750
+ <p class="text-xs text-gray-500">Minat Bisnis</p>
751
+ <p class="font-medium">Makanan & Minuman, Fashion</p>
752
+ </div>
753
+ <div>
754
+ <p class="text-xs text-gray-500">Keterampilan</p>
755
+ <p class="font-medium">Memasak, Desain Sederhana</p>
756
+ </div>
757
+ <div>
758
+ <p class="text-xs text-gray-500">Lokasi</p>
759
+ <p class="font-medium">Jakarta Selatan</p>
760
+ </div>
761
+ </div>
762
+
763
+ <button class="w-full mt-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
764
+ Edit Profil
765
+ </button>
766
+ </div>
767
+
768
+ <div class="bg-white p-4 rounded-xl shadow-sm">
769
+ <h3 class="font-semibold mb-3">Aktivitas Saya</h3>
770
+
771
+ <div class="space-y-4">
772
+ <div class="flex items-start">
773
+ <div class="w-10 h-10 bg-purple-100 rounded-full mr-3 flex items-center justify-center">
774
+ <i class="fas fa-book text-purple-600"></i>
775
+ </div>
776
+ <div>
777
+ <h4 class="font-medium">Artikel dibaca</h4>
778
+ <p class="text-sm text-gray-600">12 artikel</p>
779
+ </div>
780
+ </div>
781
+
782
+ <div class="flex items-start">
783
+ <div class="w-10 h-10 bg-blue-100 rounded-full mr-3 flex items-center justify-center">
784
+ <i class="fas fa-video text-blue-600"></i>
785
+ </div>
786
+ <div>
787
+ <h4 class="font-medium">Webinar diikuti</h4>
788
+ <p class="text-sm text-gray-600">3 webinar</p>
789
+ </div>
790
+ </div>
791
+
792
+ <div class="flex items-start">
793
+ <div class="w-10 h-10 bg-green-100 rounded-full mr-3 flex items-center justify-center">
794
+ <i class="fas fa-play text-green-600"></i>
795
+ </div>
796
+ <div>
797
+ <h4 class="font-medium">Tutorial ditonton</h4>
798
+ <p class="text-sm text-gray-600">7 video</p>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ </div>
803
+
804
+ <div class="bg-white p-4 rounded-xl shadow-sm">
805
+ <h3 class="font-semibold mb-3">Pengaturan</h3>
806
+
807
+ <div class="space-y-3">
808
+ <button class="w-full text-left py-2 flex items-center">
809
+ <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
810
+ <i class="fas fa-bell text-gray-600"></i>
811
+ </div>
812
+ <span>Notifikasi</span>
813
+ <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
814
+ </button>
815
+
816
+ <button class="w-full text-left py-2 flex items-center">
817
+ <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
818
+ <i class="fas fa-moon text-gray-600"></i>
819
+ </div>
820
+ <span>Tema Gelap</span>
821
+ <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
822
+ </button>
823
+
824
+ <button class="w-full text-left py-2 flex items-center">
825
+ <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
826
+ <i class="fas fa-question-circle text-gray-600"></i>
827
+ </div>
828
+ <span>Bantuan</span>
829
+ <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
830
+ </button>
831
+
832
+ <button class="w-full text-left py-2 flex items-center">
833
+ <div class="w-8 h-8 bg-gray-100 rounded-full mr-3 flex items-center justify-center">
834
+ <i class="fas fa-sign-out-alt text-gray-600"></i>
835
+ </div>
836
+ <span>Keluar</span>
837
+ <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
838
+ </button>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </div>
844
+
845
+ <!-- Bottom Navigation -->
846
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around py-3 max-w-md mx-auto">
847
+ <a href="#" class="flex flex-col items-center text-purple-600 nav-active" onclick="switchPage('home-page')">
848
+ <i class="fas fa-home text-lg"></i>
849
+ <span class="text-xs mt-1">Beranda</span>
850
+ </a>
851
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('search-page')">
852
+ <i class="fas fa-search text-lg"></i>
853
+ <span class="text-xs mt-1">Cari</span>
854
+ </a>
855
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('article-page')">
856
+ <i class="fas fa-book-open text-lg"></i>
857
+ <span class="text-xs mt-1">Artikel</span>
858
+ </a>
859
+ <a href="#" class="flex flex-col items-center text-gray-500" onclick="switchPage('profile-page')">
860
+ <i class="fas fa-user text-lg"></i>
861
+ <span class="text-xs mt-1">Profil</span>
862
+ </a>
863
+ </nav>
864
+
865
+ <script>
866
+ // Switch between pages
867
+ function switchPage(pageId) {
868
+ // Hide all pages
869
+ document.querySelectorAll('.page').forEach(page => {
870
+ page.classList.remove('page-active');
871
+ page.classList.add('hidden');
872
+ });
873
+
874
+ // Show selected page
875
+ document.getElementById(pageId).classList.remove('hidden');
876
+ document.getElementById(pageId).classList.add('page-active');
877
+
878
+ // Update active nav item
879
+ document.querySelectorAll('nav a').forEach(navItem => {
880
+ navItem.classList.remove('text-purple-600', 'nav-active');
881
+ navItem.classList.add('text-gray-500');
882
+ });
883
+
884
+ // Set active nav item
885
+ event.currentTarget.classList.remove('text-gray-500');
886
+ event.currentTarget.classList.add('text-purple-600', 'nav-active');
887
+
888
+ // Update header based on page
889
+ const header = document.getElementById('main-header');
890
+ if (pageId === 'home-page') {
891
+ header.classList.remove('hidden');
892
+ } else {
893
+ header.classList.add('hidden');
894
+ }
895
+ }
896
+
897
+ // Switch between tabs on home page
898
+ function switchTab(tabId) {
899
+ // Update tab buttons
900
+ document.querySelectorAll('.flex.justify-around button').forEach(tab => {
901
+ tab.classList.remove('tab-active');
902
+ tab.classList.add('text-gray-500');
903
+ });
904
+
905
+ // Add active class to clicked tab
906
+ event.currentTarget.classList.add('tab-active');
907
+ event.currentTarget.classList.remove('text-gray-500');
908
+
909
+ // Hide all tab contents
910
+ document.querySelectorAll('.tab-content').forEach(content => {
911
+ content.classList.add('hidden');
912
+ });
913
+
914
+ // Show selected tab content
915
+ document.getElementById(tabId + '-tab').classList.remove('hidden');
916
+ }
917
+ </script>
918
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=farwew/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
919
+ </html>