Hugging Face's logo

Spaces:
kritsanan
/
chat2
Running

App Files Community
kritsanan commited on
Commit
a856e6f
·
verified ·
1 Parent(s): adb0a5d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +561 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chat2
3
- emoji: 🐢
4
  colorFrom: pink
5
- colorTo: purple
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: chat2
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: blue
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,561 @@
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>Tour Der Wang - AI Travel Assistant</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=Sarabun:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary-color: #FFDEAD;
14
+ --secondary-color: #8B4513;
15
+ }
16
+
17
+ body {
18
+ font-family: 'Sarabun', sans-serif;
19
+ background-color: #FFF8F0;
20
+ }
21
+
22
+ .chat-container {
23
+ background-color: var(--primary-color);
24
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .message-bubble {
28
+ max-width: 80%;
29
+ border-radius: 1.5rem;
30
+ }
31
+
32
+ .user-message {
33
+ background-color: #FFFFFF;
34
+ border-top-right-radius: 0.5rem;
35
+ }
36
+
37
+ .bot-message {
38
+ background-color: #FFE8CC;
39
+ border-top-left-radius: 0.5rem;
40
+ }
41
+
42
+ .typing-indicator span {
43
+ display: inline-block;
44
+ width: 8px;
45
+ height: 8px;
46
+ border-radius: 50%;
47
+ background-color: var(--secondary-color);
48
+ margin: 0 2px;
49
+ }
50
+
51
+ .typing-indicator span:nth-child(1) {
52
+ animation: bounce 1s infinite;
53
+ }
54
+
55
+ .typing-indicator span:nth-child(2) {
56
+ animation: bounce 1s infinite 0.2s;
57
+ }
58
+
59
+ .typing-indicator span:nth-child(3) {
60
+ animation: bounce 1s infinite 0.4s;
61
+ }
62
+
63
+ @keyframes bounce {
64
+ 0%, 100% { transform: translateY(0); }
65
+ 50% { transform: translateY(-5px); }
66
+ }
67
+
68
+ .gallery-item {
69
+ transition: all 0.3s ease;
70
+ }
71
+
72
+ .gallery-item:hover {
73
+ transform: scale(1.03);
74
+ }
75
+
76
+ .tour-card {
77
+ transition: all 0.3s ease;
78
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
79
+ }
80
+
81
+ .tour-card:hover {
82
+ transform: translateY(-5px);
83
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
84
+ }
85
+
86
+ .language-selector {
87
+ transition: all 0.3s ease;
88
+ }
89
+
90
+ .language-selector:hover {
91
+ transform: scale(1.05);
92
+ }
93
+
94
+ .nav-tab {
95
+ transition: all 0.3s ease;
96
+ }
97
+
98
+ .nav-tab.active {
99
+ border-bottom: 3px solid var(--secondary-color);
100
+ }
101
+
102
+ .booking-form input:focus, .booking-form select:focus {
103
+ outline: none;
104
+ box-shadow: 0 0 0 2px var(--secondary-color);
105
+ }
106
+ </style>
107
+ </head>
108
+ <body class="min-h-screen flex flex-col items-center justify-start p-0 bg-amber-50">
109
+ <!-- Mobile App Container -->
110
+ <div class="w-full max-w-md mx-auto h-screen flex flex-col overflow-hidden bg-white shadow-lg">
111
+ <!-- Header -->
112
+ <div class="bg-amber-700 text-white p-4 flex items-center justify-between">
113
+ <div class="flex items-center">
114
+ <img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Tour Der Wang Logo" class="h-10 mr-3">
115
+ <div>
116
+ <h1 class="font-bold">Tour Der Wang</h1>
117
+ <p class="text-xs opacity-90">ที่นี่ วังสามหมอ</p>
118
+ </div>
119
+ </div>
120
+ <div class="flex items-center space-x-3">
121
+ <button id="language-btn" class="language-selector w-8 h-8 rounded-full bg-amber-600 flex items-center justify-center hover:bg-amber-500">
122
+ <span class="text-sm font-bold">EN</span>
123
+ </button>
124
+ <button class="w-8 h-8 rounded-full bg-amber-600 flex items-center justify-center hover:bg-amber-500">
125
+ <i class="fas fa-user text-sm"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Navigation Tabs -->
131
+ <div class="flex border-b border-amber-200 bg-amber-100">
132
+ <button class="nav-tab active flex-1 py-3 text-center font-medium text-amber-900">
133
+ <i class="fas fa-comments mr-2"></i>Chat
134
+ </button>
135
+ <button class="nav-tab flex-1 py-3 text-center font-medium text-amber-700 hover:text-amber-900">
136
+ <i class="fas fa-map-marked-alt mr-2"></i>Explore
137
+ </button>
138
+ <button class="nav-tab flex-1 py-3 text-center font-medium text-amber-700 hover:text-amber-900">
139
+ <i class="fas fa-suitcase mr-2"></i>Tours
140
+ </button>
141
+ <button class="nav-tab flex-1 py-3 text-center font-medium text-amber-700 hover:text-amber-900">
142
+ <i class="fas fa-cog mr-2"></i>More
143
+ </button>
144
+ </div>
145
+
146
+ <!-- Main Content Area -->
147
+ <div class="flex-1 overflow-y-auto p-4 bg-amber-50" id="chat-area">
148
+ <!-- Welcome Message -->
149
+ <div class="flex mb-4">
150
+ <div class="message-bubble bot-message p-4 relative">
151
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
152
+ <p class="text-amber-900">สวัสดีค่ะ! ยินดีต้อนรับสู่ Tour Der Wang AI Assistant</p>
153
+ <p class="text-amber-800 mt-2">ฉันพร้อมที่จะช่วยคุณวางแผนทริปที่น่าจดจำที่วังสามหมอ!</p>
154
+
155
+ <!-- Gallery of images -->
156
+ <div class="mt-3 grid grid-cols-2 gap-2">
157
+ <div class="gallery-item rounded-lg overflow-hidden">
158
+ <img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Tour Der Wang" class="w-full h-24 object-cover">
159
+ </div>
160
+ <div class="gallery-item rounded-lg overflow-hidden">
161
+ <img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Tour Der Wang" class="w-full h-24 object-cover">
162
+ </div>
163
+ </div>
164
+
165
+ <div class="mt-3 pt-3 border-t border-amber-200">
166
+ <p class="text-sm text-amber-700">คุณต้องการความช่วยเหลือเรื่องอะไรคะ?</p>
167
+ <div class="flex flex-wrap gap-2 mt-2">
168
+ <button class="quick-reply-btn px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm hover:bg-amber-200 transition">
169
+ แพ็คเกจทัวร์
170
+ </button>
171
+ <button class="quick-reply-btn px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm hover:bg-amber-200 transition">
172
+ ที่พักแนะนำ
173
+ </button>
174
+ <button class="quick-reply-btn px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm hover:bg-amber-200 transition">
175
+ กิจกรรมน่าสนใจ
176
+ </button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Connection Status -->
183
+ <div class="flex justify-center mb-4">
184
+ <div class="bg-amber-100 text-amber-800 px-4 py-2 rounded-full text-sm flex items-center">
185
+ <i class="fas fa-plug mr-2"></i>
186
+ <span>กำลังเชื่อมต่อกับระบบ... กรุณารอสักครู่</span>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Typing Indicator -->
191
+ <div class="flex mb-4">
192
+ <div class="message-bubble bot-message p-4 relative w-auto">
193
+ <div class="typing-indicator flex items-center px-4 py-2">
194
+ <span></span>
195
+ <span></span>
196
+ <span></span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Input Area -->
203
+ <div class="bg-amber-100 p-3 border-t border-amber-200">
204
+ <div class="flex items-center">
205
+ <button class="w-10 h-10 rounded-full bg-amber-200 text-amber-700 flex items-center justify-center mr-2 hover:bg-amber-300 transition">
206
+ <i class="fas fa-camera"></i>
207
+ </button>
208
+ <div class="flex-1 relative">
209
+ <input type="text" placeholder="พิมพ์ข้อความที่นี่..." class="w-full bg-white rounded-full py-2 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-amber-300 text-amber-900">
210
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-amber-500 hover:text-amber-700">
211
+ <i class="far fa-smile text-xl"></i>
212
+ </button>
213
+ </div>
214
+ <button class="w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center ml-2 hover:bg-amber-700 transition">
215
+ <i class="fas fa-paper-plane"></i>
216
+ </button>
217
+ </div>
218
+
219
+ <div class="mt-2 flex justify-between text-xs text-amber-600">
220
+ <div>
221
+ <i class="fas fa-shield-alt mr-1"></i>
222
+ <span>การคุยของคุณปลอดภัย</span>
223
+ </div>
224
+ <div>
225
+ <span>Tour Der Wang AI Assistant</span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Tour Packages Modal -->
232
+ <div id="tour-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
233
+ <div class="bg-white rounded-lg w-full max-w-md max-h-[80vh] overflow-y-auto">
234
+ <div class="p-4 border-b border-amber-200 flex justify-between items-center">
235
+ <h3 class="text-lg font-bold text-amber-900">Tour Packages</h3>
236
+ <button id="close-tour-modal" class="text-amber-700 hover:text-amber-900">
237
+ <i class="fas fa-times"></i>
238
+ </button>
239
+ </div>
240
+ <div class="p-4">
241
+ <div class="tour-card bg-white rounded-lg overflow-hidden mb-4 border border-amber-200">
242
+ <img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Tour Package" class="w-full h-40 object-cover">
243
+ <div class="p-4">
244
+ <h4 class="font-bold text-amber-900">Wang Sam Mo Heritage Tour</h4>
245
+ <p class="text-sm text-amber-700 mt-1">Explore the rich cultural heritage of Wang Sam Mo</p>
246
+ <div class="flex justify-between items-center mt-3">
247
+ <span class="font-bold text-amber-800">฿1,200/person</span>
248
+ <button class="book-btn px-3 py-1 bg-amber-600 text-white rounded-full text-sm hover:bg-amber-700 transition">
249
+ Book Now
250
+ </button>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="tour-card bg-white rounded-lg overflow-hidden mb-4 border border-amber-200">
256
+ <img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Tour Package" class="w-full h-40 object-cover">
257
+ <div class="p-4">
258
+ <h4 class="font-bold text-amber-900">Nature Adventure Package</h4>
259
+ <p class="text-sm text-amber-700 mt-1">Experience the beautiful nature around Wang Sam Mo</p>
260
+ <div class="flex justify-between items-center mt-3">
261
+ <span class="font-bold text-amber-800">฿1,500/person</span>
262
+ <button class="book-btn px-3 py-1 bg-amber-600 text-white rounded-full text-sm hover:bg-amber-700 transition">
263
+ Book Now
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Booking Modal -->
273
+ <div id="booking-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
274
+ <div class="bg-white rounded-lg w-full max-w-md max-h-[80vh] overflow-y-auto">
275
+ <div class="p-4 border-b border-amber-200 flex justify-between items-center">
276
+ <h3 class="text-lg font-bold text-amber-900">Book Your Tour</h3>
277
+ <button id="close-booking-modal" class="text-amber-700 hover:text-amber-900">
278
+ <i class="fas fa-times"></i>
279
+ </button>
280
+ </div>
281
+ <div class="p-4 booking-form">
282
+ <div class="mb-4">
283
+ <label class="block text-amber-800 mb-1">Tour Package</label>
284
+ <select class="w-full p-2 border border-amber-300 rounded-lg">
285
+ <option>Wang Sam Mo Heritage Tour</option>
286
+ <option>Nature Adventure Package</option>
287
+ </select>
288
+ </div>
289
+
290
+ <div class="mb-4">
291
+ <label class="block text-amber-800 mb-1">Date</label>
292
+ <input type="date" class="w-full p-2 border border-amber-300 rounded-lg">
293
+ </div>
294
+
295
+ <div class="mb-4">
296
+ <label class="block text-amber-800 mb-1">Number of People</label>
297
+ <input type="number" min="1" class="w-full p-2 border border-amber-300 rounded-lg" value="1">
298
+ </div>
299
+
300
+ <div class="mb-4">
301
+ <label class="block text-amber-800 mb-1">Payment Method</label>
302
+ <select class="w-full p-2 border border-amber-300 rounded-lg">
303
+ <option>Credit Card</option>
304
+ <option>Bank Transfer</option>
305
+ <option>PromptPay</option>
306
+ </select>
307
+ </div>
308
+
309
+ <button class="w-full py-3 bg-amber-600 text-white rounded-lg font-bold hover:bg-amber-700 transition">
310
+ Confirm Booking
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <script>
317
+ // Initialize the app
318
+ document.addEventListener('DOMContentLoaded', function() {
319
+ const chatArea = document.getElementById('chat-area');
320
+ const languageBtn = document.getElementById('language-btn');
321
+ let currentLanguage = 'en';
322
+
323
+ // Simulate API connection
324
+ setTimeout(() => {
325
+ const typingIndicator = document.querySelector('.typing-indicator').parentNode.parentNode;
326
+ const connectionStatus = document.querySelector('.bg-amber-100.text-amber-800');
327
+
328
+ // Remove typing indicator
329
+ typingIndicator.remove();
330
+
331
+ // Update connection status
332
+ if (connectionStatus) {
333
+ connectionStatus.innerHTML = '<i class="fas fa-check-circle mr-2 text-green-500"></i><span>เชื่อมต่อกับระบบเรียบร้อยแล้ว!</span>';
334
+ connectionStatus.classList.remove('bg-amber-100', 'text-amber-800');
335
+ connectionStatus.classList.add('bg-green-100', 'text-green-800');
336
+ }
337
+
338
+ // Add connected message
339
+ const connectedMessage = document.createElement('div');
340
+ connectedMessage.className = 'flex mb-4';
341
+ connectedMessage.innerHTML = `
342
+ <div class="message-bubble bot-message p-4 relative">
343
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
344
+ <p class="text-amber-900">ตอนนี้ฉันพร้อมให้บริการแล้วค่ะ! มีอะไรให้ช่วยเหลือไหมคะ?</p>
345
+ </div>
346
+ `;
347
+ chatArea.appendChild(connectedMessage);
348
+ chatArea.scrollTop = chatArea.scrollHeight;
349
+ }, 3000);
350
+
351
+ // Language toggle functionality
352
+ languageBtn.addEventListener('click', function() {
353
+ currentLanguage = currentLanguage === 'en' ? 'th' : 'en';
354
+ this.innerHTML = currentLanguage === 'en' ? '<span class="text-sm font-bold">EN</span>' : '<span class="text-sm font-bold">TH</span>';
355
+
356
+ // In a real app, we would update all text content based on language
357
+ console.log('Language changed to:', currentLanguage);
358
+ });
359
+
360
+ // Quick reply buttons functionality
361
+ document.querySelectorAll('.quick-reply-btn').forEach(button => {
362
+ button.addEventListener('click', function() {
363
+ const userMessage = document.createElement('div');
364
+ userMessage.className = 'flex mb-4 justify-end';
365
+ userMessage.innerHTML = `
366
+ <div class="message-bubble user-message p-4 relative">
367
+ <div class="absolute -right-2 top-0 w-4 h-4 bg-white transform -skew-x-12"></div>
368
+ <p>${this.textContent}</p>
369
+ </div>
370
+ `;
371
+ chatArea.appendChild(userMessage);
372
+ chatArea.scrollTop = chatArea.scrollHeight;
373
+
374
+ // Show typing indicator
375
+ const typing = document.createElement('div');
376
+ typing.className = 'flex mb-4';
377
+ typing.innerHTML = `
378
+ <div class="message-bubble bot-message p-4 relative w-auto">
379
+ <div class="typing-indicator flex items-center px-4 py-2">
380
+ <span></span>
381
+ <span></span>
382
+ <span></span>
383
+ </div>
384
+ </div>
385
+ `;
386
+ chatArea.appendChild(typing);
387
+ chatArea.scrollTop = chatArea.scrollHeight;
388
+
389
+ // Simulate bot response after delay
390
+ setTimeout(() => {
391
+ typing.remove();
392
+
393
+ let botResponse;
394
+
395
+ if (this.textContent.includes('แพ็คเกจทัวร์')) {
396
+ // Show tour packages
397
+ botResponse = document.createElement('div');
398
+ botResponse.className = 'flex mb-4';
399
+ botResponse.innerHTML = `
400
+ <div class="message-bubble bot-message p-4 relative">
401
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
402
+ <p class="text-amber-900">นี่คือแพ็คเกจทัวร์ยอดนิยมของเราค่ะ:</p>
403
+
404
+ <div class="mt-3">
405
+ <div class="tour-card bg-white rounded-lg overflow-hidden mb-3 border border-amber-200">
406
+ <img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Tour Package" class="w-full h-32 object-cover">
407
+ <div class="p-3">
408
+ <h4 class="font-bold text-amber-900 text-sm">Wang Sam Mo Heritage Tour</h4>
409
+ <div class="flex justify-between items-center mt-2">
410
+ <span class="font-bold text-amber-800 text-xs">฿1,200/person</span>
411
+ <button class="view-tour-btn px-2 py-1 bg-amber-600 text-white rounded-full text-xs hover:bg-amber-700 transition">
412
+ View
413
+ </button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="tour-card bg-white rounded-lg overflow-hidden border border-amber-200">
419
+ <img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Tour Package" class="w-full h-32 object-cover">
420
+ <div class="p-3">
421
+ <h4 class="font-bold text-amber-900 text-sm">Nature Adventure Package</h4>
422
+ <div class="flex justify-between items-center mt-2">
423
+ <span class="font-bold text-amber-800 text-xs">฿1,500/person</span>
424
+ <button class="view-tour-btn px-2 py-1 bg-amber-600 text-white rounded-full text-xs hover:bg-amber-700 transition">
425
+ View
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="mt-3 pt-3 border-t border-amber-200">
433
+ <button class="w-full py-2 bg-amber-600 text-white rounded-lg text-sm font-medium hover:bg-amber-700 transition">
434
+ ดูแพ็คเกจทัวร์ทั้งหมด
435
+ </button>
436
+ </div>
437
+ </div>
438
+ `;
439
+
440
+ // Add event listeners to view buttons
441
+ setTimeout(() => {
442
+ document.querySelectorAll('.view-tour-btn').forEach(btn => {
443
+ btn.addEventListener('click', function() {
444
+ document.getElementById('tour-modal').classList.remove('hidden');
445
+ });
446
+ });
447
+ }, 100);
448
+ } else {
449
+ // Generic response for other buttons
450
+ botResponse = document.createElement('div');
451
+ botResponse.className = 'flex mb-4';
452
+ botResponse.innerHTML = `
453
+ <div class="message-bubble bot-message p-4 relative">
454
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
455
+ <p class="text-amber-900">ฉันกำลังค้นหาข้อมูลเกี่ยวกับ "${this.textContent}" ให้คุณค่ะ...</p>
456
+ <p class="text-sm text-amber-700 mt-2">กรุณารอสักครู่นะคะ</p>
457
+ </div>
458
+ `;
459
+ }
460
+
461
+ chatArea.appendChild(botResponse);
462
+ chatArea.scrollTop = chatArea.scrollHeight;
463
+ }, 1500);
464
+ });
465
+ });
466
+
467
+ // Modal functionality
468
+ const tourModal = document.getElementById('tour-modal');
469
+ const bookingModal = document.getElementById('booking-modal');
470
+ const closeTourModal = document.getElementById('close-tour-modal');
471
+ const closeBookingModal = document.getElementById('close-booking-modal');
472
+ const bookButtons = document.querySelectorAll('.book-btn');
473
+
474
+ closeTourModal.addEventListener('click', function() {
475
+ tourModal.classList.add('hidden');
476
+ });
477
+
478
+ closeBookingModal.addEventListener('click', function() {
479
+ bookingModal.classList.add('hidden');
480
+ });
481
+
482
+ bookButtons.forEach(button => {
483
+ button.addEventListener('click', function() {
484
+ tourModal.classList.add('hidden');
485
+ bookingModal.classList.remove('hidden');
486
+ });
487
+ });
488
+
489
+ // Close modals when clicking outside
490
+ [tourModal, bookingModal].forEach(modal => {
491
+ modal.addEventListener('click', function(e) {
492
+ if (e.target === modal) {
493
+ modal.classList.add('hidden');
494
+ }
495
+ });
496
+ });
497
+
498
+ // Input message functionality
499
+ const inputField = document.querySelector('input[type="text"]');
500
+ const sendButton = document.querySelector('.fa-paper-plane').parentNode;
501
+
502
+ function sendMessage() {
503
+ const message = inputField.value.trim();
504
+ if (message) {
505
+ const userMessage = document.createElement('div');
506
+ userMessage.className = 'flex mb-4 justify-end';
507
+ userMessage.innerHTML = `
508
+ <div class="message-bubble user-message p-4 relative">
509
+ <div class="absolute -right-2 top-0 w-4 h-4 bg-white transform -skew-x-12"></div>
510
+ <p>${message}</p>
511
+ </div>
512
+ `;
513
+ chatArea.appendChild(userMessage);
514
+ chatArea.scrollTop = chatArea.scrollHeight;
515
+ inputField.value = '';
516
+
517
+ // Show typing indicator
518
+ const typing = document.createElement('div');
519
+ typing.className = 'flex mb-4';
520
+ typing.innerHTML = `
521
+ <div class="message-bubble bot-message p-4 relative w-auto">
522
+ <div class="typing-indicator flex items-center px-4 py-2">
523
+ <span></span>
524
+ <span></span>
525
+ <span></span>
526
+ </div>
527
+ </div>
528
+ `;
529
+ chatArea.appendChild(typing);
530
+ chatArea.scrollTop = chatArea.scrollHeight;
531
+
532
+ // Simulate bot response after delay
533
+ setTimeout(() => {
534
+ typing.remove();
535
+
536
+ const botResponse = document.createElement('div');
537
+ botResponse.className = 'flex mb-4';
538
+ botResponse.innerHTML = `
539
+ <div class="message-bubble bot-message p-4 relative">
540
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
541
+ <p class="text-amber-900">ฉันได้รับข้อความของคุณแล้วค่ะ ฉันจะพยายามช่วยเหลือคุณให้ดีที่สุด</p>
542
+ <p class="text-sm text-amber-700 mt-2">หากคุณต้องการข้อมูลเฉพาะเจาะจงมากขึ้น โปรดแจ้งให้ฉันทราบนะคะ</p>
543
+ </div>
544
+ `;
545
+ chatArea.appendChild(botResponse);
546
+ chatArea.scrollTop = chatArea.scrollHeight;
547
+ }, 1500);
548
+ }
549
+ }
550
+
551
+ sendButton.addEventListener('click', sendMessage);
552
+
553
+ inputField.addEventListener('keypress', function(e) {
554
+ if (e.key === 'Enter') {
555
+ sendMessage();
556
+ }
557
+ });
558
+ });
559
+ </script>
560
+ <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/chat2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
561
+ </html>
prompts.txt ADDED
File without changes