Hugging Face's logo

Spaces:
kritsanan
/
chatbot44
Running

App Files Community
chatbot44 / index.html
kritsanan's picture
kritsanan
Add 3 files
9889d86 verified
raw
history blame contribute delete
59.7 kB
 <!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');
}
:root {
--primary: #FFDEAD;
--secondary: #8B4513;
--accent-1: #D2B48C;
--accent-2: #CD853F;
--text-dark: #5A3921;
--text-light: #FFF9F0;
}
body {
font-family: 'Roboto', sans-serif;
background-color: var(--text-light);
color: var(--text-dark);
}
.thai-font {
font-family: 'Sukhumvit Set', sans-serif;
}
/* Chat bubble animation */
.chat-bubble {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.chat-bubble:hover {
transform: scale(1.05);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}
/* Typing indicator animation */
.typing-indicator span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--secondary);
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 hover effect */
.gallery-item {
transition: all 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 */
.map-container {
height: 300px;
border-radius: 12px;
overflow: hidden;
}
/* Booking steps */
.booking-step {
transition: all 0.3s ease;
}
.booking-step.active {
border-left: 4px solid var(--secondary);
background-color: rgba(255, 222, 173, 0.2);
}
/* Language toggle animation */
.language-toggle {
transition: all 0.3s ease;
}
.language-toggle:hover {
background-color: rgba(255, 222, 173, 0.3);
}
/* Quick reply buttons */
.quick-reply {
transition: all 0.2s ease;
}
.quick-reply:hover {
background-color: var(--primary);
transform: translateY(-2px);
}
/* Skeleton loading */
.skeleton {
animation: skeleton-loading 1.5s infinite ease-in-out;
background-color: #eee;
background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
background-size: 200px 100%;
background-repeat: no-repeat;
}
@keyframes skeleton-loading {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--text-light);
}
::-webkit-scrollbar-thumb {
background: var(--accent-1);
border-radius: 3px;
}
/* Custom calendar */
.calendar-day {
transition: all 0.2s ease;
}
.calendar-day:hover {
background-color: var(--primary);
}
.calendar-day.selected {
background-color: var(--secondary);
color: white;
}
/* Payment card */
.payment-card {
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.payment-card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Custom checkbox */
.custom-checkbox {
position: relative;
width: 20px;
height: 20px;
border: 2px solid var(--accent-2);
border-radius: 4px;
transition: all 0.2s ease;
}
.custom-checkbox.checked {
background-color: var(--secondary);
border-color: var(--secondary);
}
.custom-checkbox.checked::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Image modal */
.image-modal {
transition: opacity 0.3s ease;
}
/* Watermark */
.watermark {
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0.7;
}
</style>
</head>
<body class="relative max-w-md mx-auto min-h-screen overflow-x-hidden">
<!-- Header -->
<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 Content - Dynamic based on active tab -->
<main class="pb-24 px-4" id="mainContent">
<!-- Home Tab Content (default) -->
<div id="homeTab">
<!-- Welcome Section -->
<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>
<!-- Featured Tours -->
<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;">
<!-- Tour Card 1 -->
<div class="flex-shrink-0 w-48 bg-white rounded-xl overflow-hidden shadow-sm gallery-item">
<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>
<!-- Tour Card 2 -->
<div class="flex-shrink-0 w-48 bg-white rounded-xl overflow-hidden shadow-sm gallery-item">
<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>
<!-- Map 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">
<!-- Map placeholder - in a real app this would be a map component -->
<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>
</div>
<!-- Tours Tab Content -->
<div id="toursTab" class="hidden">
<section class="mt-6 mb-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-[#8B4513] thai-font">ทัวร์ทั้งหมด</h3>
<div class="relative">
<select class="bg-white border border-[#FFDEAD] text-[#8B4513] text-sm rounded-lg px-3 py-1 focus:outline-none">
<option>เรียงตาม</option>
<option>ความนิยม</option>
<option>ราคา: ต่ำ-สูง</option>
<option>ราคา: สูง-ต่ำ</option>
</select>
</div>
</div>
<!-- Tour List -->
<div class="space-y-4">
<!-- Tour Item 1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm flex">
<div class="w-24 h-24 bg-[#8B4513] relative overflow-hidden">
<img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Tour" class="w-full h-full object-cover">
</div>
<div class="flex-1 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="bg-[#8B4513] text-white text-xs px-3 py-1 rounded-full">Book Now</button>
</div>
</div>
</div>
<!-- Tour Item 2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm flex">
<div class="w-24 h-24 bg-[#8B4513] relative overflow-hidden">
<img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Tour" class="w-full h-full object-cover">
</div>
<div class="flex-1 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="bg-[#8B4513] text-white text-xs px-3 py-1 rounded-full">Book Now</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Gallery Tab Content -->
<div id="galleryTab" class="hidden">
<section class="mt-6 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>
<!-- Gallery Grid -->
<div class="grid grid-cols-3 gap-2">
<!-- Gallery Items -->
<div class="gallery-item aspect-square bg-gray-200 rounded-lg overflow-hidden relative cursor-pointer">
<img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Gallery" class="w-full h-full object-cover">
<div class="watermark">
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Watermark" class="h-6">
</div>
</div>
<div class="gallery-item aspect-square bg-gray-200 rounded-lg overflow-hidden relative cursor-pointer">
<img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Gallery" class="w-full h-full object-cover">
<div class="watermark">
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Watermark" class="h-6">
</div>
</div>
<div class="gallery-item aspect-square bg-gray-200 rounded-lg overflow-hidden relative cursor-pointer">
<img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Gallery" class="w-full h-full object-cover">
<div class="watermark">
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Watermark" class="h-6">
</div>
</div>
<div class="gallery-item aspect-square bg-gray-200 rounded-lg overflow-hidden relative cursor-pointer">
<img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Gallery" class="w-full h-full object-cover">
<div class="watermark">
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Watermark" class="h-6">
</div>
</div>
<div class="gallery-item aspect-square bg-gray-200 rounded-lg overflow-hidden relative cursor-pointer">
<img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Gallery" class="w-full h-full object-cover">
<div class="watermark">
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Watermark" class="h-6">
</div>
</div>
<div class="gallery-item aspect-square bg-gray-200 rounded-lg overflow-hidden relative cursor-pointer">
<img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Gallery" class="w-full h-full object-cover">
<div class="watermark">
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Watermark" class="h-6">
</div>
</div>
</div>
</section>
</div>
<!-- Profile Tab Content -->
<div id="profileTab" class="hidden">
<section class="mt-6 mb-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center mb-4">
<div class="w-16 h-16 rounded-full bg-[#FFDEAD] flex items-center justify-center mr-4">
<i class="fas fa-user text-2xl text-[#8B4513]"></i>
</div>
<div>
<h3 class="font-bold text-[#8B4513]">John Doe</h3>
<p class="text-sm text-gray-600">john.doe@example.com</p>
</div>
</div>
<div class="space-y-4">
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-[#FFF9F0]">
<div class="flex items-center">
<i class="fas fa-history text-[#8B4513] mr-3"></i>
<span class="text-gray-700">Booking History</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-[#FFF9F0]">
<div class="flex items-center">
<i class="fas fa-heart text-[#8B4513] mr-3"></i>
<span class="text-gray-700">Saved Tours</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-[#FFF9F0]">
<div class="flex items-center">
<i class="fas fa-cog text-[#8B4513] mr-3"></i>
<span class="text-gray-700">Settings</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-[#FFF9F0]">
<div class="flex items-center">
<i class="fas fa-question-circle text-[#8B4513] mr-3"></i>
<span class="text-gray-700">Help Center</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-[#FFF9F0] text-red-500">
<div class="flex items-center">
<i class="fas fa-sign-out-alt mr-3"></i>
<span>Log Out</span>
</div>
</button>
</div>
</div>
</section>
</div>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around items-center h-16 px-2 z-10">
<button class="tab-button active flex flex-col items-center justify-center text-[#8B4513]" data-tab="homeTab">
<i class="fas fa-home text-xl"></i>
<span class="text-xs mt-1 thai-font">หน้าหลัก</span>
</button>
<button class="tab-button flex flex-col items-center justify-center text-gray-500" data-tab="toursTab">
<i class="fas fa-map-marked-alt text-xl"></i>
<span class="text-xs mt-1 thai-font">ทัวร์</span>
</button>
<button class="tab-button flex flex-col items-center justify-center text-gray-500" data-tab="galleryTab">
<i class="fas fa-images text-xl"></i>
<span class="text-xs mt-1 thai-font">แกลเลอรี่</span>
</button>
<button class="tab-button flex flex-col items-center justify-center text-gray-500" data-tab="profileTab">
<i class="fas fa-user text-xl"></i>
<span class="text-xs mt-1 thai-font">โปรไฟล์</span>
</button>
</nav>
<!-- Chat Bubble -->
<div id="chatBubble" class="fixed bottom-20 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>
<!-- Chat Modal -->
<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;">
<!-- Chat Header -->
<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>
<!-- Chat Messages -->
<div class="h-[calc(100%-120px)] overflow-y-auto p-4 space-y-4">
<!-- AI Message -->
<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>
<!-- User Message -->
<div class="flex items-start justify-end">
<div class="bg-[#8B4513] rounded-xl p-3 max-w-[80%]">
<p class="text-white">What are the opening hours for the palace?</p>
<p class="text-xs text-white text-opacity-70 mt-1 text-right">2:46 PM</p>
</div>
</div>
<!-- AI Message -->
<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">The Royal Palace is open daily from 8:30 AM to 3:30 PM. Last admission is at 3:00 PM. It's closed on certain royal ceremonies.</p>
<p class="text-xs text-gray-500 mt-1">2:46 PM</p>
</div>
</div>
<!-- Typing Indicator -->
<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>
<!-- Chat Input -->
<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>
<!-- Booking Modal -->
<div id="bookingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-20 flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white rounded-xl shadow-xl max-h-[90vh] overflow-y-auto">
<!-- Booking Header -->
<div class="bg-[#FFDEAD] px-4 py-3 rounded-t-xl flex items-center justify-between sticky top-0 z-10">
<h3 class="font-bold text-[#8B4513] thai-font">จองทัวร์</h3>
<button id="closeBooking" class="text-[#8B4513]">
<i class="fas fa-times"></i>
</button>
</div>
<!-- Booking Steps -->
<div class="p-4">
<div class="flex mb-6">
<div class="booking-step active w-1/4 p-2 text-center border-b-2 border-[#8B4513]">
<div class="w-8 h-8 bg-[#8B4513] text-white rounded-full flex items-center justify-center mx-auto mb-1">1</div>
<span class="text-xs text-[#8B4513] font-medium">Select Tour</span>
</div>
<div class="booking-step w-1/4 p-2 text-center border-b-2 border-gray-300">
<div class="w-8 h-8 bg-gray-300 text-white rounded-full flex items-center justify-center mx-auto mb-1">2</div>
<span class="text-xs text-gray-500 font-medium">Date & Time</span>
</div>
<div class="booking-step w-1/4 p-2 text-center border-b-2 border-gray-300">
<div class="w-8 h-8 bg-gray-300 text-white rounded-full flex items-center justify-center mx-auto mb-1">3</div>
<span class="text-xs text-gray-500 font-medium">Details</span>
</div>
<div class="booking-step w-1/4 p-2 text-center border-b-2 border-gray-300">
<div class="w-8 h-8 bg-gray-300 text-white rounded-full flex items-center justify-center mx-auto mb-1">4</div>
<span class="text-xs text-gray-500 font-medium">Payment</span>
</div>
</div>
<!-- Step 1: Select Tour -->
<div id="bookingStep1">
<h4 class="font-bold text-[#8B4513] mb-3 thai-font">เลือกทัวร์</h4>
<div class="space-y-3">
<!-- Tour Option 1 -->
<div class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-[#8B4513]">
<div class="custom-checkbox mr-3"></div>
<div>
<h5 class="font-medium text-[#8B4513] thai-font">พระราชวังสมมง</h5>
<p class="text-xs text-gray-600">3 hours • ฿1,200 per person</p>
</div>
</div>
<!-- Tour Option 2 -->
<div class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-[#8B4513]">
<div class="custom-checkbox mr-3"></div>
<div>
<h5 class="font-medium text-[#8B4513] thai-font">วัดสมมง</h5>
<p class="text-xs text-gray-600">2 hours • ฿850 per person</p>
</div>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="next-step bg-[#8B4513] text-white px-6 py-2 rounded-full text-sm font-medium">
Next <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!-- Step 2: Date & Time (hidden by default) -->
<div id="bookingStep2" class="hidden">
<h4 class="font-bold text-[#8B4513] mb-3 thai-font">วันที่และเวลา</h4>
<!-- Calendar -->
<div class="bg-white rounded-lg shadow-sm p-3 mb-4">
<div class="flex justify-between items-center mb-3">
<button class="text-[#8B4513]">
<i class="fas fa-chevron-left"></i>
</button>
<h5 class="font-medium text-[#8B4513]">November 2023</h5>
<button class="text-[#8B4513]">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="grid grid-cols-7 gap-1 text-center text-xs mb-2">
<div class="text-[#8B4513] font-medium">S</div>
<div class="text-[#8B4513] font-medium">M</div>
<div class="text-[#8B4513] font-medium">T</div>
<div class="text-[#8B4513] font-medium">W</div>
<div class="text-[#8B4513] font-medium">T</div>
<div class="text-[#8B4513] font-medium">F</div>
<div class="text-[#8B4513] font-medium">S</div>
</div>
<div class="grid grid-cols-7 gap-1 text-center text-sm">
<!-- Calendar days would be generated dynamically in a real app -->
<div class="calendar-day py-1 rounded-full opacity-50">29</div>
<div class="calendar-day py-1 rounded-full opacity-50">30</div>
<div class="calendar-day py-1 rounded-full opacity-50">31</div>
<div class="calendar-day py-1 rounded-full">1</div>
<div class="calendar-day py-1 rounded-full">2</div>
<div class="calendar-day py-1 rounded-full">3</div>
<div class="calendar-day py-1 rounded-full">4</div>
<div class="calendar-day py-1 rounded-full">5</div>
<div class="calendar-day py-1 rounded-full">6</div>
<div class="calendar-day py-1 rounded-full">7</div>
<div class="calendar-day py-1 rounded-full">8</div>
<div class="calendar-day py-1 rounded-full">9</div>
<div class="calendar-day py-1 rounded-full">10</div>
<div class="calendar-day py-1 rounded-full">11</div>
<div class="calendar-day py-1 rounded-full">12</div>
<div class="calendar-day py-1 rounded-full">13</div>
<div class="calendar-day py-1 rounded-full">14</div>
<div class="calendar-day py-1 rounded-full">15</div>
<div class="calendar-day py-1 rounded-full selected">16</div>
<div class="calendar-day py-1 rounded-full">17</div>
<div class="calendar-day py-1 rounded-full">18</div>
<div class="calendar-day py-1 rounded-full">19</div>
<div class="calendar-day py-1 rounded-full">20</div>
<div class="calendar-day py-1 rounded-full">21</div>
<div class="calendar-day py-1 rounded-full">22</div>
<div class="calendar-day py-1 rounded-full">23</div>
<div class="calendar-day py-1 rounded-full">24</div>
<div class="calendar-day py-1 rounded-full">25</div>
<div class="calendar-day py-1 rounded-full">26</div>
<div class="calendar-day py-1 rounded-full">27</div>
<div class="calendar-day py-1 rounded-full">28</div>
<div class="calendar-day py-1 rounded-full">29</div>
<div class="calendar-day py-1 rounded-full">30</div>
<div class="calendar-day py-1 rounded-full opacity-50">1</div>
<div class="calendar-day py-1 rounded-full opacity-50">2</div>
</div>
</div>
<!-- Time Slots -->
<h5 class="font-medium text-[#8B4513] mb-2">Available Time Slots</h5>
<div class="grid grid-cols-3 gap-2 mb-4">
<button class="bg-white border border-[#FFDEAD] py-2 rounded-lg text-sm font-medium text-[#8B4513]">8:30 AM</button>
<button class="bg-white border border-[#FFDEAD] py-2 rounded-lg text-sm font-medium text-[#8B4513]">10:00 AM</button>
<button class="bg-white border border-[#FFDEAD] py-2 rounded-lg text-sm font-medium text-[#8B4513]">11:30 AM</button>
<button class="bg-[#8B4513] text-white py-2 rounded-lg text-sm font-medium">1:00 PM</button>
<button class="bg-white border border-[#FFDEAD] py-2 rounded-lg text-sm font-medium text-[#8B4513]">2:30 PM</button>
</div>
<div class="flex justify-between mt-6">
<button class="prev-step text-[#8B4513] px-6 py-2 rounded-full text-sm font-medium border border-[#8B4513]">
<i class="fas fa-arrow-left mr-1"></i> Back
</button>
<button class="next-step bg-[#8B4513] text-white px-6 py-2 rounded-full text-sm font-medium">
Next <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!-- Step 3: Details (hidden by default) -->
<div id="bookingStep3" class="hidden">
<h4 class="font-bold text-[#8B4513] mb-3 thai-font">รายละเอียด</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-[#8B4513] mb-1">Full Name</label>
<input type="text" class="w-full bg-[#FFF9F0] border border-[#FFDEAD] rounded-lg px-4 py-2 text-gray-800 focus:outline-none focus:border-[#8B4513]">
</div>
<div>
<label class="block text-sm font-medium text-[#8B4513] mb-1">Email</label>
<input type="email" class="w-full bg-[#FFF9F0] border border-[#FFDEAD] rounded-lg px-4 py-2 text-gray-800 focus:outline-none focus:border-[#8B4513]">
</div>
<div>
<label class="block text-sm font-medium text-[#8B4513] mb-1">Phone Number</label>
<input type="tel" class="w-full bg-[#FFF9F0] border border-[#FFDEAD] rounded-lg px-4 py-2 text-gray-800 focus:outline-none focus:border-[#8B4513]">
</div>
<div>
<label class="block text-sm font-medium text-[#8B4513] mb-1">Number of Guests</label>
<div class="flex items-center">
<button class="bg-[#FFDEAD] text-[#8B4513] w-8 h-8 rounded-full flex items-center justify-center">
<i class="fas fa-minus"></i>
</button>
<span class="mx-4 font-medium">2</span>
<button class="bg-[#FFDEAD] text-[#8B4513] w-8 h-8 rounded-full flex items-center justify-center">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-[#8B4513] mb-1">Special Requests</label>
<textarea class="w-full bg-[#FFF9F0] border border-[#FFDEAD] rounded-lg px-4 py-2 text-gray-800 focus:outline-none focus:border-[#8B4513] h-24"></textarea>
</div>
</div>
<div class="flex justify-between mt-6">
<button class="prev-step text-[#8B4513] px-6 py-2 rounded-full text-sm font-medium border border-[#8B4513]">
<i class="fas fa-arrow-left mr-1"></i> Back
</button>
<button class="next-step bg-[#8B4513] text-white px-6 py-2 rounded-full text-sm font-medium">
Next <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!-- Step 4: Payment (hidden by default) -->
<div id="bookingStep4" class="hidden">
<h4 class="font-bold text-[#8B4513] mb-3 thai-font">การชำระเงิน</h4>
<div class="bg-[#FFF9F0] rounded-lg p-4 mb-4">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Tour:</span>
<span class="font-medium text-[#8B4513]">พระราชวังสมมง</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Date:</span>
<span class="font-medium text-[#8B4513]">November 16, 2023</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Time:</span>
<span class="font-medium text-[#8B4513]">1:00 PM</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Guests:</span>
<span class="font-medium text-[#8B4513]">2</span>
</div>
<div class="border-t border-[#FFDEAD] my-2"></div>
<div class="flex justify-between font-bold text-lg">
<span>Total:</span>
<span class="text-[#8B4513]">฿2,400</span>
</div>
</div>
<h5 class="font-medium text-[#8B4513] mb-2">Payment Method</h5>
<div class="space-y-2 mb-4">
<div class="payment-card flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-[#8B4513]">
<div class="w-8 h-8 bg-[#FFDEAD] rounded-full flex items-center justify-center mr-3">
<i class="fas fa-credit-card text-[#8B4513]"></i>
</div>
<span class="font-medium">Credit/Debit Card</span>
</div>
<div class="payment-card flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-[#8B4513]">
<div class="w-8 h-8 bg-[#FFDEAD] rounded-full flex items-center justify-center mr-3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/PromptPay.svg/1200px-PromptPay.svg.png" alt="PromptPay" class="h-5">
</div>
<span class="font-medium">PromptPay</span>
</div>
<div class="payment-card flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-[#8B4513]">
<div class="w-8 h-8 bg-[#FFDEAD] rounded-full flex items-center justify-center mr-3">
<i class="fab fa-cc-paypal text-[#8B4513]"></i>
</div>
<span class="font-medium">PayPal</span>
</div>
</div>
<div class="flex items-center mb-4">
<div class="custom-checkbox mr-3"></div>
<span class="text-xs text-gray-600">I agree to the <a href="#" class="text-[#8B4513]">terms and conditions</a></span>
</div>
<div class="flex justify-between">
<button class="prev-step text-[#8B4513] px-6 py-2 rounded-full text-sm font-medium border border-[#8B4513]">
<i class="fas fa-arrow-left mr-1"></i> Back
</button>
<button class="bg-[#8B4513] text-white px-6 py-2 rounded-full text-sm font-medium">
Confirm Booking <i class="fas fa-check ml-1"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Image Modal -->
<div id="imageModal" class="hidden fixed inset-0 bg-black bg-opacity-90 z-30 flex items-center justify-center p-4">
<div class="relative w-full h-full flex items-center justify-center">
<img id="modalImage" src="" alt="Full Screen" class="max-w-full max-h-full object-contain">
<button id="closeImageModal" class="absolute top-4 right-4 text-white text-2xl">
<i class="fas fa-times"></i>
</button>
<div class="absolute bottom-4 left-0 right-0 flex justify-center">
<button class="bg-white bg-opacity-20 text-white px-4 py-2 rounded-full backdrop-blur-sm">
<i class="fas fa-map-marker-alt mr-1"></i> View Location
</button>
</div>
</div>
</div>
<script>
// Tab Navigation
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('#mainContent > div');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons
tabButtons.forEach(btn => {
btn.classList.remove('active', 'text-[#8B4513]');
btn.classList.add('text-gray-500');
});
// Add active class to clicked button
button.classList.add('active', 'text-[#8B4513]');
button.classList.remove('text-gray-500');
// Hide all tab contents
tabContents.forEach(content => {
content.classList.add('hidden');
});
// Show selected tab content
const tabId = button.getAttribute('data-tab');
document.getElementById(tabId).classList.remove('hidden');
});
});
// Chat Modal
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');
// Simulate AI response after 1 second
setTimeout(() => {
typingIndicator.classList.remove('hidden');
// Hide typing indicator after 2 seconds and show response
setTimeout(() => {
typingIndicator.classList.add('hidden');
// Here you would add the AI response to the chat
}, 2000);
}, 1000);
});
closeChat.addEventListener('click', () => {
chatModal.classList.add('hidden');
});
// Language toggle
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>';
// In a real app, you would change all text to English
} else {
currentLanguage = 'th';
languageToggle.innerHTML = '<i class="fas fa-globe mr-1"></i><span class="thai-font">ไทย</span>';
// In a real app, you would change all text to Thai
}
});
// Quick reply buttons
const quickReplies = document.querySelectorAll('.quick-reply');
quickReplies.forEach(reply => {
reply.addEventListener('click', () => {
// In a real app, this would send the quick reply text to the chat
if (!chatModal.classList.contains('hidden')) {
typingIndicator.classList.remove('hidden');
// Simulate AI response
setTimeout(() => {
typingIndicator.classList.add('hidden');
}, 2000);
}
});
});
// Gallery item click to open modal
const galleryItems = document.querySelectorAll('.gallery-item');
const imageModal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const closeImageModal = document.getElementById('closeImageModal');
galleryItems.forEach(item => {
item.addEventListener('click', () => {
const imgSrc = item.querySelector('img').src;
modalImage.src = imgSrc;
imageModal.classList.remove('hidden');
});
});
closeImageModal.addEventListener('click', () => {
imageModal.classList.add('hidden');
});
// Booking Modal
const bookingModal = document.getElementById('bookingModal');
const closeBooking = document.getElementById('closeBooking');
const bookingSteps = document.querySelectorAll('.booking-step');
const stepContents = document.querySelectorAll('#bookingModal > div > div > div[id^="bookingStep"]');
const nextButtons = document.querySelectorAll('.next-step');
const prevButtons = document.querySelectorAll('.prev-step');
const checkboxes = document.querySelectorAll('.custom-checkbox');
// Show booking modal when clicking on a book now button
document.querySelectorAll('[data-book]').forEach(button => {
button.addEventListener('click', () => {
bookingModal.classList.remove('hidden');
});
});
closeBooking.addEventListener('click', () => {
bookingModal.classList.add('hidden');
});
// Booking steps navigation
let currentStep = 1;
nextButtons.forEach(button => {
button.addEventListener('click', () => {
if (currentStep < 4) {
// Update step indicator
bookingSteps[currentStep - 1].classList.remove('active', 'border-[#8B4513]');
bookingSteps[currentStep - 1].classList.add('border-gray-300');
bookingSteps[currentStep - 1].querySelector('div').classList.remove('bg-[#8B4513]');
bookingSteps[currentStep - 1].querySelector('div').classList.add('bg-gray-300');
currentStep++;
bookingSteps[currentStep - 1].classList.add('active', 'border-[#8B4513]');
bookingSteps[currentStep - 1].classList.remove('border-gray-300');
bookingSteps[currentStep - 1].querySelector('div').classList.add('bg-[#8B4513]');
bookingSteps[currentStep - 1].querySelector('div').classList.remove('bg-gray-300');
// Update content
stepContents.forEach(content => {
content.classList.add('hidden');
});
document.getElementById(`bookingStep${currentStep}`).classList.remove('hidden');
}
});
});
prevButtons.forEach(button => {
button.addEventListener('click', () => {
if (currentStep > 1) {
// Update step indicator
bookingSteps[currentStep - 1].classList.remove('active', 'border-[#8B4513]');
bookingSteps[currentStep - 1].classList.add('border-gray-300');
bookingSteps[currentStep - 1].querySelector('div').classList.remove('bg-[#8B4513]');
bookingSteps[currentStep - 1].querySelector('div').classList.add('bg-gray-300');
currentStep--;
bookingSteps[currentStep - 1].classList.add('active', 'border-[#8B4513]');
bookingSteps[currentStep - 1].classList.remove('border-gray-300');
bookingSteps[currentStep - 1].querySelector('div').classList.add('bg-[#8B4513]');
bookingSteps[currentStep - 1].querySelector('div').classList.remove('bg-gray-300');
// Update content
stepContents.forEach(content => {
content.classList.add('hidden');
});
document.getElementById(`bookingStep${currentStep}`).classList.remove('hidden');
}
});
});
// Custom checkbox
checkboxes.forEach(checkbox => {
checkbox.addEventListener('click', () => {
checkbox.classList.toggle('checked');
});
});
// Calendar day selection
const calendarDays = document.querySelectorAll('.calendar-day:not(.opacity-50)');
calendarDays.forEach(day => {
day.addEventListener('click', () => {
calendarDays.forEach(d => d.classList.remove('selected', 'bg-[#8B4513]', 'text-white'));
day.classList.add('selected', 'bg-[#8B4513]', 'text-white');
});
});
</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/chatbot44" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>