|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Tour Der Wang - AI Assistant</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@font-face { |
|
|
font-family: 'Sukhumvit Set'; |
|
|
src: url('https://fonts.cdnfonts.com/css/sukhumvit-set') format('truetype'); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #FFF9F0; |
|
|
} |
|
|
|
|
|
.thai-font { |
|
|
font-family: 'Sukhumvit Set', sans-serif; |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.chat-bubble:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.typing-indicator span { |
|
|
display: inline-block; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background-color: #8B4513; |
|
|
margin: 0 2px; |
|
|
animation: bounce 1.5s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-5px); } |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover { |
|
|
transform: scale(1.03); |
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.map-container { |
|
|
height: 300px; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.booking-step { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.booking-step.active { |
|
|
border-left: 4px solid #8B4513; |
|
|
} |
|
|
|
|
|
.language-toggle { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.language-toggle:hover { |
|
|
background-color: rgba(255, 222, 173, 0.3); |
|
|
} |
|
|
|
|
|
.quick-reply { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.quick-reply:hover { |
|
|
background-color: #FFDEAD; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.skeleton { |
|
|
animation: skeleton-loading 1.5s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes skeleton-loading { |
|
|
0% { opacity: 0.5; } |
|
|
50% { opacity: 0.8; } |
|
|
100% { opacity: 0.5; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative max-w-md mx-auto bg-[#FFF9F0] min-h-screen overflow-x-hidden"> |
|
|
|
|
|
<header class="sticky top-0 z-10 bg-[#FFDEAD] shadow-md px-4 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" |
|
|
alt="Tour Der Wang Logo" class="h-14 object-contain"> |
|
|
<h1 class="ml-2 text-xl font-bold text-[#8B4513] thai-font">ทัวร์ เดอ วังฯ</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button id="languageToggle" class="language-toggle px-3 py-1 rounded-full bg-white text-[#8B4513] text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-globe mr-1"></i> |
|
|
<span class="thai-font">ไทย</span> |
|
|
</button> |
|
|
<button class="p-2 text-[#8B4513]"> |
|
|
<i class="fas fa-user-circle text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="pb-24 px-4"> |
|
|
|
|
|
<section class="mt-6 mb-8 bg-white rounded-xl p-6 shadow-sm"> |
|
|
<h2 class="text-2xl font-bold text-[#8B4513] mb-2 thai-font">ยินดีต้อนรับสู่ทัวร์ เดอ วังฯ</h2> |
|
|
<p class="text-gray-700 mb-4">Your personal AI guide to explore the beauty of Wang Sam Mo. How can I assist you today?</p> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-map-marker-alt mr-1"></i> Nearby Attractions |
|
|
</button> |
|
|
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> Book a Tour |
|
|
</button> |
|
|
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-images mr-1"></i> View Gallery |
|
|
</button> |
|
|
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-question-circle mr-1"></i> Help |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-bold text-[#8B4513] thai-font">ทัวร์แนะนำ</h3> |
|
|
<button class="text-sm text-[#8B4513] font-medium">See All</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="overflow-x-auto pb-4"> |
|
|
<div class="flex space-x-4" style="min-width: max-content;"> |
|
|
|
|
|
<div class="flex-shrink-0 w-48 bg-white rounded-xl overflow-hidden shadow-sm"> |
|
|
<div class="h-32 bg-[#8B4513] relative overflow-hidden"> |
|
|
<img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Royal Palace" class="w-full h-full object-cover"> |
|
|
<div class="absolute bottom-2 left-2 bg-[#FFDEAD] text-[#8B4513] text-xs px-2 py-1 rounded-full font-bold">POPULAR</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h4 class="font-bold text-[#8B4513] text-sm thai-font">พระราชวังสมมง</h4> |
|
|
<div class="flex items-center mt-1"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<span class="text-xs text-gray-600">4.8 (120)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2"> |
|
|
<span class="text-xs font-bold text-[#8B4513]">฿1,200</span> |
|
|
<button class="text-[#8B4513] text-xs font-medium">Details</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-shrink-0 w-48 bg-white rounded-xl overflow-hidden shadow-sm"> |
|
|
<div class="h-32 bg-[#8B4513] relative overflow-hidden"> |
|
|
<img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Temple" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h4 class="font-bold text-[#8B4513] text-sm thai-font">วัดสมมง</h4> |
|
|
<div class="flex items-center mt-1"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<span class="text-xs text-gray-600">4.7 (95)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mt-2"> |
|
|
<span class="text-xs font-bold text-[#8B4513]">฿850</span> |
|
|
<button class="text-[#8B4513] text-xs font-medium">Details</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-bold text-[#8B4513] thai-font">แผนที่</h3> |
|
|
<button class="text-sm text-[#8B4513] font-medium">View Full Map</button> |
|
|
</div> |
|
|
<div class="map-container bg-gray-200 relative"> |
|
|
|
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-map-marked-alt text-4xl text-[#8B4513] opacity-30"></i> |
|
|
</div> |
|
|
<div class="absolute bottom-4 left-4 bg-white p-2 rounded-lg shadow-md"> |
|
|
<button class="flex items-center text-[#8B4513] text-sm font-medium"> |
|
|
<i class="fas fa-location-arrow mr-1"></i> My Location |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 grid grid-cols-3 gap-2"> |
|
|
<button class="bg-white py-2 px-3 rounded-lg text-sm font-medium text-[#8B4513] flex items-center justify-center"> |
|
|
<i class="fas fa-utensils mr-1"></i> Food |
|
|
</button> |
|
|
<button class="bg-white py-2 px-3 rounded-lg text-sm font-medium text-[#8B4513] flex items-center justify-center"> |
|
|
<i class="fas fa-landmark mr-1"></i> Heritage |
|
|
</button> |
|
|
<button class="bg-white py-2 px-3 rounded-lg text-sm font-medium text-[#8B4513] flex items-center justify-center"> |
|
|
<i class="fas fa-shopping-bag mr-1"></i> Shopping |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="chatHistory" class="hidden bg-white rounded-xl p-4 shadow-sm mb-8"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<h3 class="text-lg font-bold text-[#8B4513]">Recent Chats</h3> |
|
|
<button class="text-sm text-[#8B4513] font-medium">Clear All</button> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start p-2 rounded-lg hover:bg-[#FFF9F0] cursor-pointer"> |
|
|
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-search text-[#8B4513] text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-800">Best time to visit the palace</p> |
|
|
<p class="text-xs text-gray-500">Yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start p-2 rounded-lg hover:bg-[#FFF9F0] cursor-pointer"> |
|
|
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-ticket-alt text-[#8B4513] text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-800">Ticket prices for students</p> |
|
|
<p class="text-xs text-gray-500">2 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="chatBubble" class="fixed bottom-6 right-6 w-14 h-14 bg-[#8B4513] rounded-full flex items-center justify-center shadow-xl chat-bubble cursor-pointer"> |
|
|
<i class="fas fa-comment-dots text-white text-2xl"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-20 flex items-end"> |
|
|
<div class="w-full bg-white rounded-t-3xl shadow-xl" style="height: 80vh;"> |
|
|
|
|
|
<div class="bg-[#FFDEAD] px-4 py-3 rounded-t-3xl flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-[#8B4513] rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-robot text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-[#8B4513]">Tour Der Wang Assistant</h3> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button class="text-[#8B4513]"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
<button id="closeChat" class="text-[#8B4513]"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-[calc(100%-120px)] overflow-y-auto p-4 space-y-4"> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-2 flex-shrink-0"> |
|
|
<i class="fas fa-robot text-[#8B4513]"></i> |
|
|
</div> |
|
|
<div class="bg-[#FFF9F0] rounded-xl p-3 max-w-[80%]"> |
|
|
<p class="text-gray-800">สวัสดีค่ะ! Welcome to Tour Der Wang. I'm your AI assistant. How can I help you explore Wang Sam Mo today?</p> |
|
|
<div class="mt-2 flex space-x-2"> |
|
|
<button class="quick-reply bg-white text-[#8B4513] py-1 px-2 rounded-lg text-xs font-medium"> |
|
|
Tours |
|
|
</button> |
|
|
<button class="quick-reply bg-white text-[#8B4513] py-1 px-2 rounded-lg text-xs font-medium"> |
|
|
Tickets |
|
|
</button> |
|
|
<button class="quick-reply bg-white text-[#8B4513] py-1 px-2 rounded-lg text-xs font-medium"> |
|
|
Directions |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">2:45 PM</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="typingIndicator" class="hidden flex items-start"> |
|
|
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-2 flex-shrink-0"> |
|
|
<i class="fas fa-robot text-[#8B4513]"></i> |
|
|
</div> |
|
|
<div class="bg-[#FFF9F0] rounded-xl p-3"> |
|
|
<div class="typing-indicator"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-3"> |
|
|
<div class="flex items-center"> |
|
|
<button class="text-[#8B4513] p-2"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
<div class="flex-1 mx-2"> |
|
|
<input type="text" placeholder="Type your message..." class="w-full bg-[#FFF9F0] rounded-full px-4 py-2 text-gray-800 focus:outline-none"> |
|
|
</div> |
|
|
<button class="text-[#8B4513] p-2"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
<button class="bg-[#8B4513] text-white rounded-full w-10 h-10 flex items-center justify-center ml-1"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const chatBubble = document.getElementById('chatBubble'); |
|
|
const chatModal = document.getElementById('chatModal'); |
|
|
const closeChat = document.getElementById('closeChat'); |
|
|
const typingIndicator = document.getElementById('typingIndicator'); |
|
|
|
|
|
chatBubble.addEventListener('click', () => { |
|
|
chatModal.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
typingIndicator.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
typingIndicator.classList.add('hidden'); |
|
|
|
|
|
}, 2000); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
closeChat.addEventListener('click', () => { |
|
|
chatModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const languageToggle = document.getElementById('languageToggle'); |
|
|
let currentLanguage = 'th'; |
|
|
|
|
|
languageToggle.addEventListener('click', () => { |
|
|
if (currentLanguage === 'th') { |
|
|
currentLanguage = 'en'; |
|
|
languageToggle.innerHTML = '<i class="fas fa-globe mr-1"></i><span>EN</span>'; |
|
|
|
|
|
} else { |
|
|
currentLanguage = 'th'; |
|
|
languageToggle.innerHTML = '<i class="fas fa-globe mr-1"></i><span class="thai-font">ไทย</span>'; |
|
|
|
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const quickReplies = document.querySelectorAll('.quick-reply'); |
|
|
quickReplies.forEach(reply => { |
|
|
reply.addEventListener('click', () => { |
|
|
|
|
|
if (!chatModal.classList.contains('hidden')) { |
|
|
typingIndicator.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
typingIndicator.classList.add('hidden'); |
|
|
}, 2000); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const galleryItems = document.querySelectorAll('.gallery-item'); |
|
|
galleryItems.forEach(item => { |
|
|
item.addEventListener('mouseenter', () => { |
|
|
item.style.transform = 'scale(1.03)'; |
|
|
item.style.boxShadow = '0 6px 15px rgba(0, 0, 0, 0.1)'; |
|
|
}); |
|
|
item.addEventListener('mouseleave', () => { |
|
|
item.style.transform = 'scale(1)'; |
|
|
item.style.boxShadow = 'none'; |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kritsanan/chat8" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
