Hugging Face's logo

Spaces:
kritsanan
/
instructa
Running

App Files Community
kritsanan commited on
Commit
e1254ec
·
verified ·
1 Parent(s): 5b60024

UI/UX Design Layout Intuitive navigation with a focus on profile browsing and messaging. Responsive design to ensure usability on various device sizes. Look & Feel Modern and clean design with a focus on Thai cultural aesthetics. Use of vibrant colors to reflect Thai culture. Pages Home/Discovery Profile Messages Subscription Settings Components Profile Card Chat Interface Match Finder Subscription Modal - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +402 -735
index.html CHANGED
@@ -3,838 +3,505 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NexusFlow | Advanced Content Management</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
9
  <script>
10
  tailwind.config = {
11
  theme: {
12
  extend: {
13
  colors: {
14
- primary: '#6366f1',
15
- secondary: '#8b5cf6',
16
- dark: '#0f172a',
17
- accent: '#06b6d4'
 
18
  },
19
  fontFamily: {
20
- sans: ['Inter', 'sans-serif']
21
  }
22
  }
23
  }
24
  }
25
  </script>
26
  <style>
27
- :root {
28
- --glass-bg: rgba(255, 255, 255, 0.08);
29
- --glass-border: rgba(255, 255, 255, 0.1);
30
- --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
31
  }
32
-
33
- body {
34
- background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
35
- color: #e2e8f0;
36
- min-height: 100vh;
37
- overflow-x: hidden;
38
- }
39
-
40
- .glass-panel {
41
- background: var(--glass-bg);
42
- backdrop-filter: blur(12px);
43
- -webkit-backdrop-filter: blur(12px);
44
- border: 1px solid var(--glass-border);
45
- box-shadow: var(--glass-shadow);
46
- border-radius: 16px;
47
  }
48
-
49
- .neumorphic {
50
- border-radius: 16px;
51
- background: linear-gradient(145deg, #1e293b, #0f172a);
52
- box-shadow: 10px 10px 20px #0d1425,
53
- -10px -10px 20px #1e2c4b;
54
- }
55
-
56
- .cube {
57
- transform-style: preserve-3d;
58
- transform: rotateX(-20deg) rotateY(30deg);
59
- animation: rotate 15s infinite linear;
60
  }
61
-
62
- .cube-face {
63
  position: absolute;
64
- width: 100px;
65
- height: 100px;
66
- border: 2px solid rgba(99, 102, 241, 0.6);
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- background: rgba(15, 23, 42, 0.7);
71
  }
72
-
73
- .front { transform: translateZ(50px); }
74
- .back { transform: rotateY(180deg) translateZ(50px); }
75
- .right { transform: rotateY(90deg) translateZ(50px); }
76
- .left { transform: rotateY(-90deg) translateZ(50px); }
77
- .top { transform: rotateX(90deg) translateZ(50px); }
78
- .bottom { transform: rotateX(-90deg) translateZ(50px); }
79
-
80
- @keyframes rotate {
81
- 0% { transform: rotateX(-20deg) rotateY(0deg); }
82
- 100% { transform: rotateX(-20deg) rotateY(360deg); }
83
  }
84
-
85
- .gradient-border {
 
 
 
 
 
 
86
  position: relative;
87
- background: linear-gradient(135deg, #0f172a, #1e293b);
88
- border-radius: 16px;
89
  }
90
-
91
- .gradient-border::before {
92
  content: '';
93
  position: absolute;
94
- top: -2px;
95
- left: -2px;
96
- right: -2px;
97
- bottom: -2px;
98
- background: linear-gradient(45deg, #6366f1, #8b5cf6, #06b6d4);
99
- border-radius: 18px;
100
- z-index: -1;
101
  }
102
-
103
- .page-transition {
104
- transition: all 0.3s ease;
105
  }
106
-
107
- .active-tab {
108
- background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
109
- border-left: 3px solid #8b5cf6;
110
  }
111
-
112
- .chart-bar {
113
- transition: height 0.5s ease;
114
  }
115
-
116
- .pulse {
117
- animation: pulse 2s infinite;
118
  }
119
-
120
- @keyframes pulse {
121
- 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
122
- 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
123
- 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
124
  }
125
-
126
- @media (max-width: 768px) {
127
- .mobile-menu {
128
- position: fixed;
129
- bottom: 0;
130
- left: 0;
131
- right: 0;
132
- z-index: 50;
133
- }
134
  }
135
  </style>
136
  </head>
137
- <body class="font-sans">
138
- <!-- Main Layout -->
139
- <div class="flex flex-col md:flex-row h-screen">
140
- <!-- Sidebar -->
141
- <div class="w-full md:w-64 bg-dark p-4 flex flex-col">
142
- <div class="mb-8">
143
- <h1 class="text-2xl font-bold text-white flex items-center">
144
- <span class="bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">Nexus</span>Flow
145
- </h1>
146
- <p class="text-slate-400 text-sm">Advanced Content Platform</p>
147
  </div>
148
-
149
- <nav class="flex-1">
150
- <ul class="space-y-1">
151
- <li>
152
- <a href="#" data-page="dashboard" class="nav-link active-tab">
153
- <span>📊</span> Dashboard
154
- </a>
155
- </li>
156
- <li>
157
- <a href="#" data-page="content" class="nav-link">
158
- <span>🧠</span> AI Content Creation
159
- </a>
160
- </li>
161
- <li>
162
- <a href="#" data-page="scheduling" class="nav-link">
163
- <span>⏱️</span> Advanced Scheduling
164
- </a>
165
- </li>
166
- <li>
167
- <a href="#" data-page="analytics" class="nav-link">
168
- <span>📈</span> 3D Analytics
169
- </a>
170
- </li>
171
- <li>
172
- <a href="#" data-page="preview" class="nav-link">
173
- <span>👁️</span> 3D Content Preview
174
- </a>
175
- </li>
176
- <li>
177
- <a href="#" data-page="team" class="nav-link">
178
- <span>👥</span> Team Management
179
- </a>
180
- </li>
181
- <li>
182
- <a href="#" data-page="history" class="nav-link">
183
- <span>🕒</span> Post History
184
- </a>
185
- </li>
186
- </ul>
187
- </nav>
188
-
189
- <div class="mt-auto">
190
- <div class="flex items-center gap-3 p-3 glass-panel rounded-xl">
191
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
192
- <span class="text-white font-bold">A</span>
193
  </div>
194
- <div>
195
- <p class="text-sm font-medium">Admin User</p>
196
- <p class="text-xs text-slate-400">admin@nexusflow.com</p>
 
 
197
  </div>
198
  </div>
199
- </div>
200
- </div>
201
-
202
- <!-- Main Content -->
203
- <div class="flex-1 overflow-auto">
204
- <!-- Top Bar -->
205
- <div class="p-4 border-b border-slate-800 flex justify-between items-center">
206
- <h2 class="text-xl font-semibold" id="page-title">Dashboard</h2>
207
- <div class="flex items-center gap-4">
208
- <div class="relative">
209
- <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
210
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
211
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
212
- </svg>
213
- </div>
214
- <input type="text" class="bg-slate-800 border border-slate-700 rounded-lg py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-primary" placeholder="Search...">
215
- </div>
216
-
217
- <div class="flex gap-3">
218
- <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition">
219
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
220
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
221
- </svg>
222
- </button>
223
-
224
  <div class="relative">
225
- <select class="appearance-none bg-slate-800 border border-slate-700 rounded-lg py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
226
- <option>English</option>
227
- <option>Spanish</option>
228
- <option>French</option>
229
- <option>German</option>
230
- </select>
231
- <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
232
- <svg class="h-4 w-4 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
233
- <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
234
- </svg>
235
  </div>
236
- </div>
237
- </div>
238
- </div>
239
- </div>
240
-
241
- <!-- Page Content -->
242
- <div id="page-content" class="p-4 md:p-6">
243
- <!-- Dashboard Page -->
244
- <div id="dashboard" class="page page-transition">
245
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
246
- <div class="glass-panel p-5 rounded-xl">
247
- <div class="flex justify-between items-start">
248
- <div>
249
- <p class="text-slate-400">Content Generated</p>
250
- <p class="text-2xl font-bold mt-1">1,248</p>
251
- </div>
252
- <div class="p-3 rounded-lg bg-primary/10">
253
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
254
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
255
- </svg>
256
- </div>
257
  </div>
258
- <div class="mt-3 h-2 bg-slate-700 rounded-full overflow-hidden">
259
- <div class="h-full bg-primary rounded-full" style="width: 75%"></div>
 
 
 
 
260
  </div>
 
261
  </div>
262
-
263
- <div class="glass-panel p-5 rounded-xl">
264
- <div class="flex justify-between items-start">
265
- <div>
266
- <p class="text-slate-400">Scheduled Posts</p>
267
- <p class="text-2xl font-bold mt-1">84</p>
268
- </div>
269
- <div class="p-3 rounded-lg bg-secondary/10">
270
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
271
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
272
- </svg>
273
- </div>
274
  </div>
275
- <div class="mt-3 h-2 bg-slate-700 rounded-full overflow-hidden">
276
- <div class="h-full bg-secondary rounded-full" style="width: 60%"></div>
 
 
 
277
  </div>
278
  </div>
279
-
280
- <div class="glass-panel p-5 rounded-xl">
281
- <div class="flex justify-between items-start">
282
- <div>
283
- <p class="text-slate-400">Team Members</p>
284
- <p class="text-2xl font-bold mt-1">12</p>
285
- </div>
286
- <div class="p-3 rounded-lg bg-accent/10">
287
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
288
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
289
- </svg>
290
- </div>
291
- </div>
292
- <div class="mt-3 h-2 bg-slate-700 rounded-full overflow-hidden">
293
- <div class="h-full bg-accent rounded-full" style="width: 90%"></div>
294
  </div>
 
295
  </div>
296
  </div>
297
-
298
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
299
- <div class="glass-panel p-5 rounded-xl">
300
- <div class="flex justify-between items-center mb-4">
301
- <h3 class="font-semibold">Engagement Analytics</h3>
302
- <button class="text-sm text-primary">View Report</button>
 
 
303
  </div>
304
- <div class="h-64">
305
- <div class="flex items-end h-5/6 gap-4 mt-6">
306
- <div class="flex-1 flex flex-col items-center">
307
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 70%"></div>
308
- <span class="text-xs mt-2 text-slate-400">Mon</span>
309
- </div>
310
- <div class="flex-1 flex flex-col items-center">
311
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 85%"></div>
312
- <span class="text-xs mt-2 text-slate-400">Tue</span>
313
- </div>
314
- <div class="flex-1 flex flex-col items-center">
315
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 65%"></div>
316
- <span class="text-xs mt-2 text-slate-400">Wed</span>
317
- </div>
318
- <div class="flex-1 flex flex-col items-center">
319
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 90%"></div>
320
- <span class="text-xs mt-2 text-slate-400">Thu</span>
321
- </div>
322
- <div class="flex-1 flex flex-col items-center">
323
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 75%"></div>
324
- <span class="text-xs mt-2 text-slate-400">Fri</span>
325
- </div>
326
- <div class="flex-1 flex flex-col items-center">
327
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 95%"></div>
328
- <span class="text-xs mt-2 text-slate-400">Sat</span>
329
- </div>
330
- <div class="flex-1 flex flex-col items-center">
331
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 80%"></div>
332
- <span class="text-xs mt-2 text-slate-400">Sun</span>
333
- </div>
334
- </div>
335
  </div>
336
  </div>
337
-
338
- <div class="glass-panel p-5 rounded-xl">
339
- <div class="flex justify-between items-center mb-4">
340
- <h3 class="font-semibold">Sentiment Analysis</h3>
341
- <div class="flex gap-2">
342
- <button class="text-xs px-2 py-1 rounded bg-slate-800">Week</button>
343
- <button class="text-xs px-2 py-1 rounded bg-primary text-white">Month</button>
344
- <button class="text-xs px-2 py-1 rounded bg-slate-800">Year</button>
345
- </div>
346
- </div>
347
- <div class="flex items-center justify-center h-64">
348
- <div class="relative w-48 h-48">
349
- <div class="absolute inset-0 rounded-full border-8 border-slate-700"></div>
350
- <div class="absolute inset-0 rounded-full border-8 border-primary border-t-transparent border-r-transparent transform -rotate-45" style="clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);"></div>
351
- <div class="absolute inset-0 rounded-full border-8 border-secondary border-b-transparent border-l-transparent transform rotate-45" style="clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);"></div>
352
- <div class="absolute inset-0 flex flex-col items-center justify-center">
353
- <span class="text-2xl font-bold">78%</span>
354
- <span class="text-xs text-slate-400">Positive</span>
355
- </div>
356
- </div>
357
- <div class="ml-8">
358
- <div class="flex items-center mb-3">
359
- <div class="w-3 h-3 rounded-full bg-primary mr-2"></div>
360
- <span class="text-sm">Positive: 78%</span>
361
- </div>
362
- <div class="flex items-center mb-3">
363
- <div class="w-3 h-3 rounded-full bg-secondary mr-2"></div>
364
- <span class="text-sm">Neutral: 15%</span>
365
- </div>
366
- <div class="flex items-center">
367
- <div class="w-3 h-3 rounded-full bg-rose-500 mr-2"></div>
368
- <span class="text-sm">Negative: 7%</span>
369
- </div>
370
- </div>
371
  </div>
 
372
  </div>
373
  </div>
374
-
375
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
376
- <div class="glass-panel p-5 rounded-xl">
377
- <h3 class="font-semibold mb-4">Recent Activity</h3>
378
- <div class="space-y-4">
379
- <div class="flex">
380
- <div class="mr-3">
381
- <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
382
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
383
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
384
- </svg>
385
- </div>
386
- </div>
387
- <div>
388
- <p class="text-sm font-medium">New blog post published</p>
389
- <p class="text-xs text-slate-400">2 hours ago</p>
390
- </div>
391
- </div>
392
- <div class="flex">
393
- <div class="mr-3">
394
- <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center">
395
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
396
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
397
- </svg>
398
- </div>
399
- </div>
400
- <div>
401
- <p class="text-sm font-medium">Content scheduled</p>
402
- <p class="text-xs text-slate-400">5 hours ago</p>
403
- </div>
404
- </div>
405
- <div class="flex">
406
- <div class="mr-3">
407
- <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center">
408
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
409
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
410
- </svg>
411
- </div>
412
- </div>
413
- <div>
414
- <p class="text-sm font-medium">AI content generated</p>
415
- <p class="text-xs text-slate-400">Yesterday</p>
416
- </div>
417
- </div>
418
  </div>
419
  </div>
420
-
421
- <div class="glass-panel p-5 rounded-xl lg:col-span-2">
422
- <h3 class="font-semibold mb-4">Top Trending Topics</h3>
423
- <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
424
- <div class="gradient-border p-4 rounded-xl">
425
- <div class="text-lg font-bold">#AI</div>
426
- <div class="text-xs text-slate-400 mt-1">12.5K mentions</div>
427
- </div>
428
- <div class="gradient-border p-4 rounded-xl">
429
- <div class="text-lg font-bold">#Web3</div>
430
- <div class="text-xs text-slate-400 mt-1">8.2K mentions</div>
431
- </div>
432
- <div class="gradient-border p-4 rounded-xl">
433
- <div class="text-lg font-bold">#Metaverse</div>
434
- <div class="text-xs text-slate-400 mt-1">7.9K mentions</div>
435
- </div>
436
- <div class="gradient-border p-4 rounded-xl">
437
- <div class="text-lg font-bold">#SaaS</div>
438
- <div class="text-xs text-slate-400 mt-1">6.7K mentions</div>
439
- </div>
440
- <div class="gradient-border p-4 rounded-xl">
441
- <div class="text-lg font-bold">#Blockchain</div>
442
- <div class="text-xs text-slate-400 mt-1">5.8K mentions</div>
443
- </div>
444
- <div class="gradient-border p-4 rounded-xl">
445
- <div class="text-lg font-bold">#UXDesign</div>
446
- <div class="text-xs text-slate-400 mt-1">5.3K mentions</div>
447
- </div>
448
  </div>
 
449
  </div>
450
  </div>
451
  </div>
452
-
453
- <!-- AI Content Creation Page -->
454
- <div id="content" class="page page-transition hidden">
455
- <div class="glass-panel p-6 rounded-xl mb-6">
456
- <h2 class="text-xl font-bold mb-4">AI Content Generator</h2>
457
-
458
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
459
- <div>
460
- <div class="mb-4">
461
- <label class="block text-sm font-medium mb-2">Content Type</label>
462
- <select class="w-full bg-slate-800 border border-slate-700 rounded-lg py-2 px-3 focus:outline-none focus:ring-1 focus:ring-primary">
463
- <option>Blog Post</option>
464
- <option>Social Media Post</option>
465
- <option>Email Newsletter</option>
466
- <option>Product Description</option>
467
- <option>Press Release</option>
468
- </select>
469
- </div>
470
-
471
- <div class="mb-4">
472
- <label class="block text-sm font-medium mb-2">Topic</label>
473
- <input type="text" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-2 px-3 focus:outline-none focus:ring-1 focus:ring-primary" placeholder="Enter topic...">
474
- </div>
475
-
476
- <div class="mb-4">
477
- <label class="block text-sm font-medium mb-2">Keywords</label>
478
- <input type="text" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-2 px-3 focus:outline-none focus:ring-1 focus:ring-primary" placeholder="Enter keywords (comma separated)...">
479
- </div>
480
-
481
- <div class="mb-4">
482
- <label class="block text-sm font-medium mb-2">Tone</label>
483
- <div class="flex flex-wrap gap-2">
484
- <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Professional</button>
485
- <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Casual</button>
486
- <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Enthusiastic</button>
487
- <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Informative</button>
488
- <button class="px-3 py-1 rounded-full bg-primary text-white text-sm">Persuasive</button>
489
- </div>
490
- </div>
491
-
492
- <div class="mb-4">
493
- <label class="block text-sm font-medium mb-2">Length</label>
494
- <div class="flex items-center">
495
- <span class="text-sm mr-2">Short</span>
496
- <input type="range" class="w-full" min="1" max="3" value="2">
497
- <span class="text-sm ml-2">Long</span>
498
- </div>
499
- </div>
500
-
501
- <button class="w-full py-3 bg-gradient-to-r from-primary to-secondary rounded-lg font-medium flex items-center justify-center">
502
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
503
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
504
- </svg>
505
- Generate Content
506
- </button>
507
- </div>
508
-
509
- <div class="bg-slate-900 rounded-xl p-4">
510
- <div class="flex justify-between items-center mb-4">
511
- <h3 class="font-medium">Generated Content Preview</h3>
512
- <div class="flex gap-2">
513
- <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700">
514
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
515
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
516
- </svg>
517
- </button>
518
- <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700">
519
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
520
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
521
- </svg>
522
- </button>
523
- </div>
524
- </div>
525
-
526
- <div class="bg-slate-800 rounded-lg p-4 h-80 overflow-auto">
527
- <div class="animate-pulse">
528
- <div class="h-4 bg-slate-700 rounded w-3/4 mb-3"></div>
529
- <div class="h-4 bg-slate-700 rounded w-full mb-3"></div>
530
- <div class="h-4 bg-slate-700 rounded w-5/6 mb-3"></div>
531
- <div class="h-4 bg-slate-700 rounded w-4/5 mb-4"></div>
532
-
533
- <div class="h-4 bg-slate-700 rounded w-2/3 mb-3"></div>
534
- <div class="h-4 bg-slate-700 rounded w-full mb-3"></div>
535
- <div class="h-4 bg-slate-700 rounded w-3/4 mb-3"></div>
536
- </div>
537
- </div>
538
-
539
- <div class="flex gap-2 mt-4">
540
- <button class="flex-1 py-2 rounded-lg bg-slate-800 hover:bg-slate-700">Regenerate</button>
541
- <button class="flex-1 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary">Save & Schedule</button>
542
- </div>
543
  </div>
 
544
  </div>
545
  </div>
546
-
547
- <div class="glass-panel p-6 rounded-xl">
548
- <h2 class="text-xl font-bold mb-4">Sentiment & Trend Analysis</h2>
549
-
550
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
551
- <div class="gradient-border p-4 rounded-xl">
552
- <div class="text-2xl font-bold text-green-400">84%</div>
553
- <div class="text-sm text-slate-400 mt-1">Positive Sentiment</div>
554
- </div>
555
- <div class="gradient-border p-4 rounded-xl">
556
- <div class="text-2xl font-bold">12.4K</div>
557
- <div class="text-sm text-slate-400 mt-1">Estimated Reach</div>
558
- </div>
559
- <div class="gradient-border p-4 rounded-xl">
560
- <div class="text-2xl font-bold text-amber-400">Medium</div>
561
- <div class="text-sm text-slate-400 mt-1">Competition Level</div>
562
- </div>
563
  </div>
564
-
565
- <div class="bg-slate-900 rounded-xl p-4">
566
- <h3 class="font-medium mb-4">Topic Performance Over Time</h3>
567
- <div class="h-64">
568
- <div class="flex items-end h-5/6 gap-4 mt-6">
569
- <div class="flex-1 flex flex-col items-center">
570
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 40%"></div>
571
- <span class="text-xs mt-2 text-slate-400">Jan</span>
572
- </div>
573
- <div class="flex-1 flex flex-col items-center">
574
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 55%"></div>
575
- <span class="text-xs mt-2 text-slate-400">Feb</span>
576
- </div>
577
- <div class="flex-1 flex flex-col items-center">
578
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 65%"></div>
579
- <span class="text-xs mt-2 text-slate-400">Mar</span>
580
- </div>
581
- <div class="flex-1 flex flex-col items-center">
582
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 75%"></div>
583
- <span class="text-xs mt-2 text-slate-400">Apr</span>
584
- </div>
585
- <div class="flex-1 flex flex-col items-center">
586
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 90%"></div>
587
- <span class="text-xs mt-2 text-slate-400">May</span>
588
- </div>
589
- <div class="flex-1 flex flex-col items-center">
590
- <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 95%"></div>
591
- <span class="text-xs mt-2 text-slate-400">Jun</span>
592
- </div>
593
- </div>
594
  </div>
 
595
  </div>
596
  </div>
597
- </div>
598
-
599
- <!-- 3D Analytics Page -->
600
- <div id="analytics" class="page page-transition hidden">
601
- <div class="glass-panel p-6 rounded-xl mb-6">
602
- <h2 class="text-xl font-bold mb-4">3D Analytics Dashboard</h2>
603
-
604
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
605
- <div class="gradient-border p-5 rounded-xl flex flex-col items-center justify-center">
606
- <div class="relative w-32 h-32 mb-4">
607
- <div class="cube">
608
- <div class="cube-face front"></div>
609
- <div class="cube-face back"></div>
610
- <div class="cube-face right"></div>
611
- <div class="cube-face left"></div>
612
- <div class="cube-face top"></div>
613
- <div class="cube-face bottom"></div>
614
- </div>
615
- </div>
616
- <h3 class="text-lg font-bold mb-1">Engagement</h3>
617
- <p class="text-slate-400">3D Visualization</p>
618
- </div>
619
-
620
- <div class="gradient-border p-5 rounded-xl">
621
- <h3 class="text-lg font-bold mb-4">Performance Metrics</h3>
622
- <div class="space-y-4">
623
- <div>
624
- <div class="flex justify-between text-sm mb-1">
625
- <span>Impressions</span>
626
- <span>12.4K</span>
627
- </div>
628
- <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
629
- <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 85%"></div>
630
- </div>
631
- </div>
632
- <div>
633
- <div class="flex justify-between text-sm mb-1">
634
- <span>Engagement</span>
635
- <span>8.7K</span>
636
- </div>
637
- <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
638
- <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 72%"></div>
639
- </div>
640
- </div>
641
- <div>
642
- <div class="flex justify-between text-sm mb-1">
643
- <span>Click-through</span>
644
- <span>3.2K</span>
645
- </div>
646
- <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
647
- <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 45%"></div>
648
- </div>
649
- </div>
650
- <div>
651
- <div class="flex justify-between text-sm mb-1">
652
- <span>Conversions</span>
653
- <span>1.1K</span>
654
- </div>
655
- <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
656
- <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 32%"></div>
657
- </div>
658
- </div>
659
- </div>
660
- </div>
661
-
662
- <div class="gradient-border p-5 rounded-xl">
663
- <h3 class="text-lg font-bold mb-4">Audience Insights</h3>
664
- <div class="space-y-4">
665
- <div class="flex items-center">
666
- <div class="mr-3 w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
667
- <span class="text-white text-xs">18-24</span>
668
- </div>
669
- <div class="flex-1">
670
- <div class="flex justify-between text-sm">
671
- <span>18-24 years</span>
672
- <span>32%</span>
673
- </div>
674
- <div class="h-2 bg-slate-700 rounded-full overflow-hidden mt-1">
675
- <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 32%"></div>
676
- </div>
677
- </div>
678
- </div>
679
- <div class="flex items-center">
680
- <div class="mr-3 w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
681
- <span class="text-white text-xs">25-34</span>
682
- </div>
683
- <div class="flex-1">
684
- <div class="flex justify-between text-sm">
685
- <span>25-34 years</span>
686
- <span>45%</span>
687
- </div>
688
- <div class="h-2 bg-slate-700 rounded-full overflow-hidden mt-1">
689
- <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 45%"></div>
690
- </div>
691
- </div>
692
- </div>
693
- <div class="flex items-center">
694
- <div class="mr-3 w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
695
- <span class="text-white text-xs">35-44</span>
696
- </div>
697
- <div class="flex-1">
698
- <div class="flex justify-between text-sm">
699
- <span>35-44 years</span>
700
- <span>18%</span>
701
- </div>
702
- <div class="h-2 bg-slate-700 rounded-full overflow-hidden mt-1">
703
- <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 18%"></div>
704
- </div>
705
- </div>
706
- </div>
707
- </div>
708
- </div>
709
  </div>
710
-
711
- <div class="bg-slate-900 rounded-xl p-4">
712
- <h3 class="font-medium mb-4">3D Engagement Map</h3>
713
- <div class="h-96 flex items-center justify-center relative">
714
- <div class="absolute w-64 h-64 rounded-full border-2 border-primary/30"></div>
715
- <div class="absolute w-48 h-48 rounded-full border-2 border-secondary/30"></div>
716
- <div class="absolute w-32 h-32 rounded-full border-2 border-accent/30"></div>
717
-
718
- <div class="absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-primary pulse"></div>
719
- <div class="absolute top-1/3 right-1/3 w-6 h-6 rounded-full bg-secondary pulse"></div>
720
- <div class="absolute bottom-1/4 left-1/3 w-10 h-10 rounded-full bg-accent pulse"></div>
721
- <div class="absolute bottom-1/3 right-1/4 w-7 h-7 rounded-full bg-primary pulse"></div>
722
- <div class="absolute top-1/2 left-1/2 w-5 h-5 rounded-full bg-secondary pulse"></div>
723
-
724
- <div class="text-center z-10 bg-slate-900/80 p-4 rounded-xl">
725
- <h4 class="font-bold">Interactive Engagement Map</h4>
726
- <p class="text-sm text-slate-400 mt-1">Visualize audience interactions in 3D space</p>
727
- </div>
728
  </div>
 
729
  </div>
730
  </div>
731
  </div>
732
-
733
- <!-- Other pages would go here -->
734
-
735
- <!-- Placeholder for other pages -->
736
- <div id="scheduling" class="page page-transition hidden">
737
- <div class="glass-panel p-6 rounded-xl text-center py-12">
738
- <div class="text-5xl mb-4">⏱️</div>
739
- <h2 class="text-2xl font-bold mb-2">Advanced Scheduling</h2>
740
- <p class="text-slate-400">Schedule your content across multiple platforms</p>
741
- </div>
742
  </div>
743
-
744
- <div id="preview" class="page page-transition hidden">
745
- <div class="glass-panel p-6 rounded-xl text-center py-12">
746
- <div class="text-5xl mb-4">👁️</div>
747
- <h2 class="text-2xl font-bold mb-2">3D Content Preview</h2>
748
- <p class="text-slate-400">Preview your content in immersive 3D environments</p>
 
 
 
 
 
 
749
  </div>
750
  </div>
751
-
752
- <div id="team" class="page page-transition hidden">
753
- <div class="glass-panel p-6 rounded-xl text-center py-12">
754
- <div class="text-5xl mb-4">👥</div>
755
- <h2 class="text-2xl font-bold mb-2">Team Management</h2>
756
- <p class="text-slate-400">Collaborate with your team members</p>
 
 
 
 
 
 
 
757
  </div>
758
  </div>
759
-
760
- <div id="history" class="page page-transition hidden">
761
- <div class="glass-panel p-6 rounded-xl text-center py-12">
762
- <div class="text-5xl mb-4">🕒</div>
763
- <h2 class="text-2xl font-bold mb-2">Post History</h2>
764
- <p class="text-slate-400">Review your historical content performance</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
765
  </div>
766
  </div>
 
 
 
 
767
  </div>
768
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
769
  </div>
770
-
771
- <!-- Mobile Navigation -->
772
- <div class="mobile-menu md:hidden fixed bottom-0 left-0 right-0 bg-dark border-t border-slate-800">
773
- <div class="flex justify-around p-3">
774
- <a href="#" data-page="dashboard" class="p-3 rounded-lg">
775
- <span class="text-xl">📊</span>
776
- </a>
777
- <a href="#" data-page="content" class="p-3 rounded-lg">
778
- <span class="text-xl">🧠</span>
779
- </a>
780
- <a href="#" data-page="analytics" class="p-3 rounded-lg">
781
- <span class="text-xl">📈</span>
782
- </a>
783
- <a href="#" data-page="team" class="p-3 rounded-lg">
784
- <span class="text-xl">👥</span>
785
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
786
  </div>
787
  </div>
788
-
789
  <script>
790
- // Page navigation
791
- document.querySelectorAll('.nav-link, .mobile-menu a').forEach(link => {
792
- link.addEventListener('click', function(e) {
793
- e.preventDefault();
794
-
795
- // Get target page
796
  const targetPage = this.getAttribute('data-page');
797
 
798
  // Hide all pages
799
- document.querySelectorAll('.page').forEach(page => {
800
  page.classList.add('hidden');
801
  });
802
 
803
  // Show target page
804
  document.getElementById(targetPage).classList.remove('hidden');
805
 
806
- // Update page title
807
- const pageTitles = {
808
- 'dashboard': 'Dashboard',
809
- 'content': 'AI Content Creation',
810
- 'scheduling': 'Advanced Scheduling',
811
- 'analytics': '3D Analytics',
812
- 'preview': '3D Content Preview',
813
- 'team': 'Team Management',
814
- 'history': 'Post History'
815
- };
816
- document.getElementById('page-title').textContent = pageTitles[targetPage];
817
-
818
- // Update active tab
819
- document.querySelectorAll('.nav-link').forEach(tab => {
820
- tab.classList.remove('active-tab');
821
  });
822
- this.classList.add('active-tab');
 
 
823
  });
824
  });
825
 
826
- // Initialize animations for charts
827
- document.querySelectorAll('.chart-bar').forEach(bar => {
828
- // Store original height
829
- const originalHeight = bar.style.height;
830
-
831
- // Reset to 0 for animation
832
- bar.style.height = '0';
833
-
834
- // Animate after a short delay
835
- setTimeout(() => {
836
- bar.style.height = originalHeight;
837
- }, 300);
 
 
 
 
 
 
 
 
 
838
  });
839
  </script>
840
  <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=kritsanan/instructa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ThaiHarmony - Thai Dating App</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
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
  colors: {
15
+ 'thai-gold': '#F4C20D',
16
+ 'thai-red': '#BD2A2A',
17
+ 'thai-green': '#2A623D',
18
+ 'thai-blue': '#1E5F8C',
19
+ 'thai-purple': '#5D3F6A',
20
  },
21
  fontFamily: {
22
+ 'sans': ['Poppins', 'sans-serif']
23
  }
24
  }
25
  }
26
  }
27
  </script>
28
  <style>
29
+ .profile-card {
30
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
31
+ background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(245,245,245,0.9) 100%);
 
32
  }
33
+ .profile-card:hover {
34
+ transform: translateY(-5px);
35
+ box-shadow: 0 15px 30px rgba(0,0,0,0.15);
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
+ .chat-bubble {
38
+ max-width: 70%;
39
+ border-radius: 18px;
40
+ position: relative;
41
+ padding: 12px 16px;
42
+ margin-bottom: 8px;
43
+ word-wrap: break-word;
 
 
 
 
 
44
  }
45
+ .chat-bubble:after {
46
+ content: '';
47
  position: absolute;
48
+ bottom: 0;
49
+ width: 20px;
50
+ height: 16px;
 
 
 
 
51
  }
52
+ .chat-bubble.sent {
53
+ background-color: #1E5F8C;
54
+ color: white;
55
+ align-self: flex-end;
56
+ border-bottom-right-radius: 4px;
 
 
 
 
 
 
57
  }
58
+ .chat-bubble.received {
59
+ background-color: #f1f1f1;
60
+ color: #333;
61
+ align-self: flex-start;
62
+ border-bottom-left-radius: 4px;
63
+ }
64
+ .active-nav {
65
+ color: #BD2A2A;
66
  position: relative;
 
 
67
  }
68
+ .active-nav:after {
 
69
  content: '';
70
  position: absolute;
71
+ bottom: -5px;
72
+ left: 50%;
73
+ transform: translateX(-50%);
74
+ width: 6px;
75
+ height: 6px;
76
+ background: #BD2A2A;
77
+ border-radius: 50%;
78
  }
79
+ .like-animation {
80
+ animation: like 0.6s ease;
 
81
  }
82
+ @keyframes like {
83
+ 0% { transform: scale(1); }
84
+ 50% { transform: scale(1.2); }
85
+ 100% { transform: scale(1); }
86
  }
87
+ .sakura-pattern {
88
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23f4c20d' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
 
89
  }
90
+ .gold-border {
91
+ border: 2px solid #F4C20D;
 
92
  }
93
+ .thai-pattern {
94
+ background: linear-gradient(135deg, #BD2A2A 0%, #1E5F8C 100%);
95
+ opacity: 0.9;
 
 
96
  }
97
+ .message-input:focus {
98
+ outline: none;
99
+ box-shadow: 0 0 0 2px #BD2A2A;
 
 
 
 
 
 
100
  }
101
  </style>
102
  </head>
103
+ <body class="bg-gray-50 font-sans relative overflow-x-hidden sakura-pattern">
104
+ <!-- Main Container -->
105
+ <div class="max-w-md mx-auto min-h-screen bg-white shadow-lg flex flex-col">
106
+ <!-- App Header -->
107
+ <header class="bg-white py-4 px-6 flex items-center justify-between border-b border-gray-200">
108
+ <div class="flex items-center">
109
+ <div class="w-10 h-10 rounded-full bg-thai-red flex items-center justify-center">
110
+ <span class="text-white font-bold text-xl">TH</span>
111
+ </div>
112
+ <h1 class="ml-3 text-xl font-bold text-thai-purple">Thai<span class="text-thai-red">Harmony</span></h1>
113
  </div>
114
+ <div class="flex space-x-4">
115
+ <button class="text-thai-purple hover:text-thai-red">
116
+ <i class="fas fa-search"></i>
117
+ </button>
118
+ <button class="text-thai-purple hover:text-thai-red">
119
+ <i class="fas fa-bell"></i>
120
+ </button>
121
+ </div>
122
+ </header>
123
+
124
+ <!-- Main Content Area -->
125
+ <main class="flex-1 overflow-y-auto p-4 pb-20">
126
+ <!-- Home/Discovery Page -->
127
+ <div id="home-page">
128
+ <div class="mb-6">
129
+ <h2 class="text-2xl font-bold text-thai-purple mb-2">Discover Matches</h2>
130
+ <p class="text-gray-600">Find your perfect Thai match</p>
131
+ </div>
132
+
133
+ <!-- Match Finder Filter -->
134
+ <div class="bg-white rounded-xl shadow-md p-4 mb-6">
135
+ <div class="flex justify-between items-center mb-4">
136
+ <h3 class="font-semibold text-thai-purple">Match Finder</h3>
137
+ <button class="text-thai-blue">
138
+ <i class="fas fa-sliders-h"></i>
139
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  </div>
141
+ <div class="grid grid-cols-4 gap-2">
142
+ <button class="bg-thai-gold text-white py-2 rounded-lg text-sm font-medium">All</button>
143
+ <button class="bg-gray-100 text-gray-700 py-2 rounded-lg text-sm font-medium">Nearby</button>
144
+ <button class="bg-gray-100 text-gray-700 py-2 rounded-lg text-sm font-medium">Online</button>
145
+ <button class="bg-gray-100 text-gray-700 py-2 rounded-lg text-sm font-medium">New</button>
146
  </div>
147
  </div>
148
+
149
+ <!-- Profile Cards -->
150
+ <div class="grid grid-cols-2 gap-4">
151
+ <!-- Profile Card 1 -->
152
+ <div class="profile-card rounded-xl shadow-md overflow-hidden">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
153
  <div class="relative">
154
+ <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=300&q=80"
155
+ alt="Profile" class="w-full h-48 object-cover">
156
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
157
+ <i class="fas fa-heart text-thai-red"></i>
 
 
 
 
 
 
158
  </div>
159
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
160
+ <h3 class="text-white font-bold text-lg">Naree, 26</h3>
161
+ <p class="text-white text-sm flex items-center">
162
+ <i class="fas fa-map-marker-alt mr-1"></i> Bangkok
163
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
+ </div>
166
+ <div class="p-3">
167
+ <div class="flex flex-wrap gap-1 mb-2">
168
+ <span class="bg-thai-green text-white text-xs px-2 py-1 rounded">Travel</span>
169
+ <span class="bg-thai-blue text-white text-xs px-2 py-1 rounded">Foodie</span>
170
+ <span class="bg-thai-red text-white text-xs px-2 py-1 rounded">Art</span>
171
  </div>
172
+ <p class="text-gray-600 text-sm line-clamp-2">Love to explore new places and try different cuisines. Looking for someone to share adventures with.</p>
173
  </div>
174
+ </div>
175
+
176
+ <!-- Profile Card 2 -->
177
+ <div class="profile-card rounded-xl shadow-md overflow-hidden">
178
+ <div class="relative">
179
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=300&q=80"
180
+ alt="Profile" class="w-full h-48 object-cover">
181
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
182
+ <i class="far fa-heart text-thai-purple"></i>
 
 
 
183
  </div>
184
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
185
+ <h3 class="text-white font-bold text-lg">Krit, 29</h3>
186
+ <p class="text-white text-sm flex items-center">
187
+ <i class="fas fa-map-marker-alt mr-1"></i> Chiang Mai
188
+ </p>
189
  </div>
190
  </div>
191
+ <div class="p-3">
192
+ <div class="flex flex-wrap gap-1 mb-2">
193
+ <span class="bg-thai-blue text-white text-xs px-2 py-1 rounded">Music</span>
194
+ <span class="bg-thai-red text-white text-xs px-2 py-1 rounded">Fitness</span>
195
+ <span class="bg-thai-gold text-gray-800 text-xs px-2 py-1 rounded">Movies</span>
 
 
 
 
 
 
 
 
 
 
196
  </div>
197
+ <p class="text-gray-600 text-sm line-clamp-2">Musician and fitness enthusiast. Enjoy hiking and exploring nature in my free time.</p>
198
  </div>
199
  </div>
200
+
201
+ <!-- Profile Card 3 -->
202
+ <div class="profile-card rounded-xl shadow-md overflow-hidden">
203
+ <div class="relative">
204
+ <img src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=300&q=80"
205
+ alt="Profile" class="w-full h-48 object-cover">
206
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
207
+ <i class="fas fa-heart text-thai-red"></i>
208
  </div>
209
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
210
+ <h3 class="text-white font-bold text-lg">Sasi, 24</h3>
211
+ <p class="text-white text-sm flex items-center">
212
+ <i class="fas fa-map-marker-alt mr-1"></i> Phuket
213
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  </div>
215
  </div>
216
+ <div class="p-3">
217
+ <div class="flex flex-wrap gap-1 mb-2">
218
+ <span class="bg-thai-green text-white text-xs px-2 py-1 rounded">Beach</span>
219
+ <span class="bg-thai-red text-white text-xs px-2 py-1 rounded">Dancing</span>
220
+ <span class="bg-thai-purple text-white text-xs px-2 py-1 rounded">Photography</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
  </div>
222
+ <p class="text-gray-600 text-sm line-clamp-2">Professional dancer who loves the ocean. Looking for someone with a positive outlook on life.</p>
223
  </div>
224
  </div>
225
+
226
+ <!-- Profile Card 4 -->
227
+ <div class="profile-card rounded-xl shadow-md overflow-hidden">
228
+ <div class="relative">
229
+ <img src="https://images.unsplash.com/photo-1504593811423-6dd665756598?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=300&q=80"
230
+ alt="Profile" class="w-full h-48 object-cover">
231
+ <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
232
+ <i class="far fa-heart text-thai-purple"></i>
233
+ </div>
234
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
235
+ <h3 class="text-white font-bold text-lg">Anong, 31</h3>
236
+ <p class="text-white text-sm flex items-center">
237
+ <i class="fas fa-map-marker-alt mr-1"></i> Pattaya
238
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
  </div>
240
  </div>
241
+ <div class="p-3">
242
+ <div class="flex flex-wrap gap-1 mb-2">
243
+ <span class="bg-thai-gold text-gray-800 text-xs px-2 py-1 rounded">Reading</span>
244
+ <span class="bg-thai-blue text-white text-xs px-2 py-1 rounded">Cooking</span>
245
+ <span class="bg-thai-red text-white text-xs px-2 py-1 rounded">Yoga</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  </div>
247
+ <p class="text-gray-600 text-sm line-clamp-2">Chef by profession, love experimenting with Thai fusion cuisine. Enjoy quiet evenings with a good book.</p>
248
  </div>
249
  </div>
250
  </div>
251
+ </div>
252
+
253
+ <!-- Messages Page (Hidden by default) -->
254
+ <div id="messages-page" class="hidden">
255
+ <div class="mb-6">
256
+ <h2 class="text-2xl font-bold text-thai-purple mb-2">Messages</h2>
257
+ <p class="text-gray-600">Connect with your matches</p>
258
+ </div>
259
+
260
+ <!-- Chat List -->
261
+ <div class="space-y-4">
262
+ <!-- Chat Item 1 -->
263
+ <div class="flex items-center p-3 bg-white rounded-xl shadow-md">
264
+ <div class="relative">
265
+ <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=60&h=60&q=80"
266
+ alt="Naree" class="w-14 h-14 rounded-full object-cover">
267
+ <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
268
+ </div>
269
+ <div class="ml-4 flex-1">
270
+ <div class="flex justify-between">
271
+ <h3 class="font-bold text-thai-purple">Naree</h3>
272
+ <span class="text-xs text-gray-500">2:30 PM</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
+ <p class="text-gray-600 text-sm truncate">Looking forward to our date tomorrow!</p>
275
  </div>
276
  </div>
277
+
278
+ <!-- Chat Item 2 -->
279
+ <div class="flex items-center p-3 bg-white rounded-xl shadow-md">
280
+ <div class="relative">
281
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=60&h=60&q=80"
282
+ alt="Krit" class="w-14 h-14 rounded-full object-cover">
283
+ <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
 
 
 
 
 
 
 
 
 
 
284
  </div>
285
+ <div class="ml-4 flex-1">
286
+ <div class="flex justify-between">
287
+ <h3 class="font-bold text-thai-purple">Krit</h3>
288
+ <span class="text-xs text-gray-500">11:15 AM</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
289
  </div>
290
+ <p class="text-gray-600 text-sm truncate">Thanks for the song recommendation!</p>
291
  </div>
292
  </div>
293
+
294
+ <!-- Chat Item 3 -->
295
+ <div class="flex items-center p-3 bg-white rounded-xl shadow-md">
296
+ <div class="relative">
297
+ <img src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=60&h=60&q=80"
298
+ alt="Sasi" class="w-14 h-14 rounded-full object-cover">
299
+ <div class="absolute bottom-0 right-0 w-3 h-3 bg-gray-400 rounded-full border-2 border-white"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
  </div>
301
+ <div class="ml-4 flex-1">
302
+ <div class="flex justify-between">
303
+ <h3 class="font-bold text-thai-purple">Sasi</h3>
304
+ <span class="text-xs text-gray-500">Yesterday</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
305
  </div>
306
+ <p class="text-gray-600 text-sm truncate">Want to go to the beach this weekend?</p>
307
  </div>
308
  </div>
309
  </div>
310
+ </div>
311
+
312
+ <!-- Profile Page (Hidden by default) -->
313
+ <div id="profile-page" class="hidden">
314
+ <div class="mb-6 text-center">
315
+ <h2 class="text-2xl font-bold text-thai-purple mb-2">Your Profile</h2>
316
+ <p class="text-gray-600">Make a great impression</p>
 
 
 
317
  </div>
318
+
319
+ <!-- Profile Header -->
320
+ <div class="relative mb-8">
321
+ <div class="bg-thai-red h-32 rounded-t-xl"></div>
322
+ <div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2">
323
+ <div class="relative">
324
+ <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=120&h=120&q=80"
325
+ alt="Your Profile" class="w-24 h-24 rounded-full border-4 border-white shadow-lg">
326
+ <button class="absolute bottom-0 right-0 bg-thai-gold text-white rounded-full p-2">
327
+ <i class="fas fa-camera"></i>
328
+ </button>
329
+ </div>
330
  </div>
331
  </div>
332
+
333
+ <!-- Profile Info -->
334
+ <div class="text-center mt-16 mb-6">
335
+ <h2 class="text-xl font-bold text-thai-purple">Supaporn, 28</h2>
336
+ <p class="text-gray-600 flex items-center justify-center">
337
+ <i class="fas fa-map-marker-alt mr-1 text-thai-red"></i> Bangkok, Thailand
338
+ </p>
339
+ <div class="mt-2 flex justify-center space-x-2">
340
+ <i class="fas fa-star text-thai-gold"></i>
341
+ <i class="fas fa-star text-thai-gold"></i>
342
+ <i class="fas fa-star text-thai-gold"></i>
343
+ <i class="fas fa-star text-thai-gold"></i>
344
+ <i class="fas fa-star text-gray-300"></i>
345
  </div>
346
  </div>
347
+
348
+ <!-- Profile Details -->
349
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
350
+ <div class="mb-6">
351
+ <h3 class="text-lg font-semibold text-thai-purple mb-3">About Me</h3>
352
+ <p class="text-gray-600">I'm a graphic designer who loves Thai traditional art. I enjoy exploring street food markets and taking weekend trips to the mountains. Looking for someone who appreciates Thai culture as much as I do.</p>
353
+ </div>
354
+
355
+ <div class="mb-6">
356
+ <h3 class="text-lg font-semibold text-thai-purple mb-3">Interests</h3>
357
+ <div class="flex flex-wrap gap-2">
358
+ <span class="bg-thai-green text-white px-3 py-1 rounded-full text-sm">Art</span>
359
+ <span class="bg-thai-blue text-white px-3 py-1 rounded-full text-sm">Food</span>
360
+ <span class="bg-thai-red text-white px-3 py-1 rounded-full text-sm">Travel</span>
361
+ <span class="bg-thai-purple text-white px-3 py-1 rounded-full text-sm">Photography</span>
362
+ <span class="bg-thai-gold text-gray-800 px-3 py-1 rounded-full text-sm">Movies</span>
363
+ </div>
364
+ </div>
365
+
366
+ <div>
367
+ <h3 class="text-lg font-semibold text-thai-purple mb-3">Photos</h3>
368
+ <div class="grid grid-cols-3 gap-2">
369
+ <div class="aspect-square bg-gray-200 rounded-lg"></div>
370
+ <div class="aspect-square bg-gray-200 rounded-lg"></div>
371
+ <div class="aspect-square bg-gray-200 rounded-lg"></div>
372
+ <div class="aspect-square bg-gray-200 rounded-lg"></div>
373
+ <div class="aspect-square bg-gray-200 rounded-lg"></div>
374
+ <div class="aspect-square bg-gray-200 rounded-lg flex items-center justify-center text-thai-purple">
375
+ <i class="fas fa-plus text-2xl"></i>
376
+ </div>
377
+ </div>
378
  </div>
379
  </div>
380
+
381
+ <button class="w-full bg-thai-red text-white py-3 rounded-xl font-semibold shadow-md">
382
+ Edit Profile
383
+ </button>
384
  </div>
385
+ </main>
386
+
387
+ <!-- Bottom Navigation -->
388
+ <nav class="bg-white border-t border-gray-200 fixed bottom-0 w-full max-w-md py-3 px-8 flex justify-between">
389
+ <button class="nav-item active-nav text-center" data-page="home-page">
390
+ <i class="fas fa-home text-xl"></i>
391
+ <span class="text-xs mt-1 block">Home</span>
392
+ </button>
393
+ <button class="nav-item text-center text-gray-500 hover:text-thai-purple" data-page="messages-page">
394
+ <i class="fas fa-comment-alt text-xl"></i>
395
+ <span class="text-xs mt-1 block">Messages</span>
396
+ </button>
397
+ <button class="nav-item text-center text-gray-500 hover:text-thai-purple" data-page="profile-page">
398
+ <i class="fas fa-user text-xl"></i>
399
+ <span class="text-xs mt-1 block">Profile</span>
400
+ </button>
401
+ <button class="nav-item text-center text-gray-500 hover:text-thai-purple" data-page="subscription-page">
402
+ <i class="fas fa-crown text-xl"></i>
403
+ <span class="text-xs mt-1 block">Premium</span>
404
+ </button>
405
+ <button class="nav-item text-center text-gray-500 hover:text-thai-purple" data-page="settings-page">
406
+ <i class="fas fa-cog text-xl"></i>
407
+ <span class="text-xs mt-1 block">Settings</span>
408
+ </button>
409
+ </nav>
410
  </div>
411
+
412
+ <!-- Subscription Modal -->
413
+ <div id="subscription-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
414
+ <div class="bg-white rounded-xl w-full max-w-md overflow-hidden">
415
+ <div class="thai-pattern p-6 text-center">
416
+ <h2 class="text-2xl font-bold text-white">Go Premium</h2>
417
+ <p class="text-white opacity-90 mt-2">Unlock all features</p>
418
+ </div>
419
+
420
+ <div class="p-6">
421
+ <div class="gold-border rounded-xl p-6 mb-6">
422
+ <h3 class="text-xl font-bold text-thai-purple text-center">Premium Membership</h3>
423
+ <div class="flex justify-center items-baseline my-4">
424
+ <span class="text-3xl font-bold text-thai-purple">฿299</span>
425
+ <span class="text-gray-600 ml-1">/month</span>
426
+ </div>
427
+
428
+ <ul class="space-y-3 mb-6">
429
+ <li class="flex items-center">
430
+ <i class="fas fa-check-circle text-thai-green mr-2"></i>
431
+ <span>Unlimited likes</span>
432
+ </li>
433
+ <li class="flex items-center">
434
+ <i class="fas fa-check-circle text-thai-green mr-2"></i>
435
+ <span>See who likes you</span>
436
+ </li>
437
+ <li class="flex items-center">
438
+ <i class="fas fa-check-circle text-thai-green mr-2"></i>
439
+ <span>Advanced filters</span>
440
+ </li>
441
+ <li class="flex items-center">
442
+ <i class="fas fa-check-circle text-thai-green mr-2"></i>
443
+ <span>Priority messaging</span>
444
+ </li>
445
+ </ul>
446
+
447
+ <button class="w-full bg-thai-gold text-gray-900 font-bold py-3 rounded-lg">
448
+ Get Premium
449
+ </button>
450
+ </div>
451
+
452
+ <button id="close-modal" class="w-full text-gray-600 py-2 font-medium">
453
+ Not Now
454
+ </button>
455
+ </div>
456
  </div>
457
  </div>
458
+
459
  <script>
460
+ // Navigation functionality
461
+ document.querySelectorAll('.nav-item').forEach(button => {
462
+ button.addEventListener('click', function() {
 
 
 
463
  const targetPage = this.getAttribute('data-page');
464
 
465
  // Hide all pages
466
+ document.querySelectorAll('main > div').forEach(page => {
467
  page.classList.add('hidden');
468
  });
469
 
470
  // Show target page
471
  document.getElementById(targetPage).classList.remove('hidden');
472
 
473
+ // Update active nav
474
+ document.querySelectorAll('.nav-item').forEach(item => {
475
+ item.classList.remove('active-nav');
476
+ item.classList.add('text-gray-500');
 
 
 
 
 
 
 
 
 
 
 
477
  });
478
+
479
+ this.classList.add('active-nav');
480
+ this.classList.remove('text-gray-500');
481
  });
482
  });
483
 
484
+ // Like button functionality
485
+ document.querySelectorAll('.fa-heart, .fa-heart').forEach(heart => {
486
+ heart.addEventListener('click', function(e) {
487
+ e.stopPropagation();
488
+ if(this.classList.contains('far')) {
489
+ this.classList.remove('far');
490
+ this.classList.add('fas', 'text-thai-red', 'like-animation');
491
+ } else {
492
+ this.classList.remove('fas', 'text-thai-red');
493
+ this.classList.add('far');
494
+ }
495
+ });
496
+ });
497
+
498
+ // Subscription modal
499
+ document.querySelector('[data-page="subscription-page"]').addEventListener('click', function() {
500
+ document.getElementById('subscription-modal').classList.remove('hidden');
501
+ });
502
+
503
+ document.getElementById('close-modal').addEventListener('click', function() {
504
+ document.getElementById('subscription-modal').classList.add('hidden');
505
  });
506
  </script>
507
  <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=kritsanan/instructa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>