Add 3 files
Browse files- README.md +6 -4
- index.html +412 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
colorFrom: blue
|
| 5 |
-
colorTo:
|
| 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: chat8
|
| 3 |
+
emoji: 🐳
|
| 4 |
colorFrom: blue
|
| 5 |
+
colorTo: purple
|
| 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,412 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 Assistant</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
| 9 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 10 |
+
<style>
|
| 11 |
+
@font-face {
|
| 12 |
+
font-family: 'Sukhumvit Set';
|
| 13 |
+
src: url('https://fonts.cdnfonts.com/css/sukhumvit-set') format('truetype');
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
+
body {
|
| 17 |
+
font-family: 'Roboto', sans-serif;
|
| 18 |
+
background-color: #FFF9F0;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
.thai-font {
|
| 22 |
+
font-family: 'Sukhumvit Set', sans-serif;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
.chat-bubble {
|
| 26 |
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
| 27 |
+
transition: all 0.3s ease;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.chat-bubble:hover {
|
| 31 |
+
transform: scale(1.05);
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.typing-indicator span {
|
| 35 |
+
display: inline-block;
|
| 36 |
+
width: 8px;
|
| 37 |
+
height: 8px;
|
| 38 |
+
border-radius: 50%;
|
| 39 |
+
background-color: #8B4513;
|
| 40 |
+
margin: 0 2px;
|
| 41 |
+
animation: bounce 1.5s infinite ease-in-out;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.typing-indicator span:nth-child(2) {
|
| 45 |
+
animation-delay: 0.2s;
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
.typing-indicator span:nth-child(3) {
|
| 49 |
+
animation-delay: 0.4s;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
@keyframes bounce {
|
| 53 |
+
0%, 100% { transform: translateY(0); }
|
| 54 |
+
50% { transform: translateY(-5px); }
|
| 55 |
+
}
|
| 56 |
+
|
| 57 |
+
.gallery-item {
|
| 58 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
| 59 |
+
}
|
| 60 |
+
|
| 61 |
+
.gallery-item:hover {
|
| 62 |
+
transform: scale(1.03);
|
| 63 |
+
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.map-container {
|
| 67 |
+
height: 300px;
|
| 68 |
+
border-radius: 12px;
|
| 69 |
+
overflow: hidden;
|
| 70 |
+
}
|
| 71 |
+
|
| 72 |
+
.booking-step {
|
| 73 |
+
transition: all 0.3s ease;
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
.booking-step.active {
|
| 77 |
+
border-left: 4px solid #8B4513;
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.language-toggle {
|
| 81 |
+
transition: all 0.3s ease;
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
.language-toggle:hover {
|
| 85 |
+
background-color: rgba(255, 222, 173, 0.3);
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
.quick-reply {
|
| 89 |
+
transition: all 0.2s ease;
|
| 90 |
+
}
|
| 91 |
+
|
| 92 |
+
.quick-reply:hover {
|
| 93 |
+
background-color: #FFDEAD;
|
| 94 |
+
transform: translateY(-2px);
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
.skeleton {
|
| 98 |
+
animation: skeleton-loading 1.5s infinite ease-in-out;
|
| 99 |
+
}
|
| 100 |
+
|
| 101 |
+
@keyframes skeleton-loading {
|
| 102 |
+
0% { opacity: 0.5; }
|
| 103 |
+
50% { opacity: 0.8; }
|
| 104 |
+
100% { opacity: 0.5; }
|
| 105 |
+
}
|
| 106 |
+
</style>
|
| 107 |
+
</head>
|
| 108 |
+
<body class="relative max-w-md mx-auto bg-[#FFF9F0] min-h-screen overflow-x-hidden">
|
| 109 |
+
<!-- Header -->
|
| 110 |
+
<header class="sticky top-0 z-10 bg-[#FFDEAD] shadow-md px-4 py-3 flex items-center justify-between">
|
| 111 |
+
<div class="flex items-center">
|
| 112 |
+
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png"
|
| 113 |
+
alt="Tour Der Wang Logo" class="h-14 object-contain">
|
| 114 |
+
<h1 class="ml-2 text-xl font-bold text-[#8B4513] thai-font">ทัวร์ เดอ วังฯ</h1>
|
| 115 |
+
</div>
|
| 116 |
+
<div class="flex items-center space-x-2">
|
| 117 |
+
<button id="languageToggle" class="language-toggle px-3 py-1 rounded-full bg-white text-[#8B4513] text-sm font-medium flex items-center">
|
| 118 |
+
<i class="fas fa-globe mr-1"></i>
|
| 119 |
+
<span class="thai-font">ไทย</span>
|
| 120 |
+
</button>
|
| 121 |
+
<button class="p-2 text-[#8B4513]">
|
| 122 |
+
<i class="fas fa-user-circle text-xl"></i>
|
| 123 |
+
</button>
|
| 124 |
+
</div>
|
| 125 |
+
</header>
|
| 126 |
+
|
| 127 |
+
<!-- Main Content -->
|
| 128 |
+
<main class="pb-24 px-4">
|
| 129 |
+
<!-- Welcome Section -->
|
| 130 |
+
<section class="mt-6 mb-8 bg-white rounded-xl p-6 shadow-sm">
|
| 131 |
+
<h2 class="text-2xl font-bold text-[#8B4513] mb-2 thai-font">ยินดีต้อนรับสู่ทัวร์ เดอ วังฯ</h2>
|
| 132 |
+
<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>
|
| 133 |
+
<div class="grid grid-cols-2 gap-3">
|
| 134 |
+
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium">
|
| 135 |
+
<i class="fas fa-map-marker-alt mr-1"></i> Nearby Attractions
|
| 136 |
+
</button>
|
| 137 |
+
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium">
|
| 138 |
+
<i class="fas fa-calendar-alt mr-1"></i> Book a Tour
|
| 139 |
+
</button>
|
| 140 |
+
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium">
|
| 141 |
+
<i class="fas fa-images mr-1"></i> View Gallery
|
| 142 |
+
</button>
|
| 143 |
+
<button class="quick-reply bg-[#FFDEAD] text-[#8B4513] py-2 px-3 rounded-lg text-sm font-medium">
|
| 144 |
+
<i class="fas fa-question-circle mr-1"></i> Help
|
| 145 |
+
</button>
|
| 146 |
+
</div>
|
| 147 |
+
</section>
|
| 148 |
+
|
| 149 |
+
<!-- Featured Tours -->
|
| 150 |
+
<section class="mb-8">
|
| 151 |
+
<div class="flex items-center justify-between mb-4">
|
| 152 |
+
<h3 class="text-lg font-bold text-[#8B4513] thai-font">ทัวร์แนะนำ</h3>
|
| 153 |
+
<button class="text-sm text-[#8B4513] font-medium">See All</button>
|
| 154 |
+
</div>
|
| 155 |
+
<div class="relative">
|
| 156 |
+
<div class="overflow-x-auto pb-4">
|
| 157 |
+
<div class="flex space-x-4" style="min-width: max-content;">
|
| 158 |
+
<!-- Tour Card 1 -->
|
| 159 |
+
<div class="flex-shrink-0 w-48 bg-white rounded-xl overflow-hidden shadow-sm">
|
| 160 |
+
<div class="h-32 bg-[#8B4513] relative overflow-hidden">
|
| 161 |
+
<img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Royal Palace" class="w-full h-full object-cover">
|
| 162 |
+
<div class="absolute bottom-2 left-2 bg-[#FFDEAD] text-[#8B4513] text-xs px-2 py-1 rounded-full font-bold">POPULAR</div>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="p-3">
|
| 165 |
+
<h4 class="font-bold text-[#8B4513] text-sm thai-font">พระราชวังสมมง</h4>
|
| 166 |
+
<div class="flex items-center mt-1">
|
| 167 |
+
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
|
| 168 |
+
<span class="text-xs text-gray-600">4.8 (120)</span>
|
| 169 |
+
</div>
|
| 170 |
+
<div class="flex justify-between items-center mt-2">
|
| 171 |
+
<span class="text-xs font-bold text-[#8B4513]">฿1,200</span>
|
| 172 |
+
<button class="text-[#8B4513] text-xs font-medium">Details</button>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
|
| 177 |
+
<!-- Tour Card 2 -->
|
| 178 |
+
<div class="flex-shrink-0 w-48 bg-white rounded-xl overflow-hidden shadow-sm">
|
| 179 |
+
<div class="h-32 bg-[#8B4513] relative overflow-hidden">
|
| 180 |
+
<img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Temple" class="w-full h-full object-cover">
|
| 181 |
+
</div>
|
| 182 |
+
<div class="p-3">
|
| 183 |
+
<h4 class="font-bold text-[#8B4513] text-sm thai-font">วัดสมมง</h4>
|
| 184 |
+
<div class="flex items-center mt-1">
|
| 185 |
+
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
|
| 186 |
+
<span class="text-xs text-gray-600">4.7 (95)</span>
|
| 187 |
+
</div>
|
| 188 |
+
<div class="flex justify-between items-center mt-2">
|
| 189 |
+
<span class="text-xs font-bold text-[#8B4513]">฿850</span>
|
| 190 |
+
<button class="text-[#8B4513] text-xs font-medium">Details</button>
|
| 191 |
+
</div>
|
| 192 |
+
</div>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
</section>
|
| 198 |
+
|
| 199 |
+
<!-- Map Section -->
|
| 200 |
+
<section class="mb-8">
|
| 201 |
+
<div class="flex items-center justify-between mb-4">
|
| 202 |
+
<h3 class="text-lg font-bold text-[#8B4513] thai-font">แผนที่</h3>
|
| 203 |
+
<button class="text-sm text-[#8B4513] font-medium">View Full Map</button>
|
| 204 |
+
</div>
|
| 205 |
+
<div class="map-container bg-gray-200 relative">
|
| 206 |
+
<!-- Map placeholder - in a real app this would be a map component -->
|
| 207 |
+
<div class="absolute inset-0 flex items-center justify-center">
|
| 208 |
+
<i class="fas fa-map-marked-alt text-4xl text-[#8B4513] opacity-30"></i>
|
| 209 |
+
</div>
|
| 210 |
+
<div class="absolute bottom-4 left-4 bg-white p-2 rounded-lg shadow-md">
|
| 211 |
+
<button class="flex items-center text-[#8B4513] text-sm font-medium">
|
| 212 |
+
<i class="fas fa-location-arrow mr-1"></i> My Location
|
| 213 |
+
</button>
|
| 214 |
+
</div>
|
| 215 |
+
</div>
|
| 216 |
+
<div class="mt-3 grid grid-cols-3 gap-2">
|
| 217 |
+
<button class="bg-white py-2 px-3 rounded-lg text-sm font-medium text-[#8B4513] flex items-center justify-center">
|
| 218 |
+
<i class="fas fa-utensils mr-1"></i> Food
|
| 219 |
+
</button>
|
| 220 |
+
<button class="bg-white py-2 px-3 rounded-lg text-sm font-medium text-[#8B4513] flex items-center justify-center">
|
| 221 |
+
<i class="fas fa-landmark mr-1"></i> Heritage
|
| 222 |
+
</button>
|
| 223 |
+
<button class="bg-white py-2 px-3 rounded-lg text-sm font-medium text-[#8B4513] flex items-center justify-center">
|
| 224 |
+
<i class="fas fa-shopping-bag mr-1"></i> Shopping
|
| 225 |
+
</button>
|
| 226 |
+
</div>
|
| 227 |
+
</section>
|
| 228 |
+
|
| 229 |
+
<!-- Chat History (Collapsed by default) -->
|
| 230 |
+
<section id="chatHistory" class="hidden bg-white rounded-xl p-4 shadow-sm mb-8">
|
| 231 |
+
<div class="flex items-center justify-between mb-3">
|
| 232 |
+
<h3 class="text-lg font-bold text-[#8B4513]">Recent Chats</h3>
|
| 233 |
+
<button class="text-sm text-[#8B4513] font-medium">Clear All</button>
|
| 234 |
+
</div>
|
| 235 |
+
<div class="space-y-3">
|
| 236 |
+
<div class="flex items-start p-2 rounded-lg hover:bg-[#FFF9F0] cursor-pointer">
|
| 237 |
+
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-3">
|
| 238 |
+
<i class="fas fa-search text-[#8B4513] text-sm"></i>
|
| 239 |
+
</div>
|
| 240 |
+
<div>
|
| 241 |
+
<p class="text-sm font-medium text-gray-800">Best time to visit the palace</p>
|
| 242 |
+
<p class="text-xs text-gray-500">Yesterday</p>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
<div class="flex items-start p-2 rounded-lg hover:bg-[#FFF9F0] cursor-pointer">
|
| 246 |
+
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-3">
|
| 247 |
+
<i class="fas fa-ticket-alt text-[#8B4513] text-sm"></i>
|
| 248 |
+
</div>
|
| 249 |
+
<div>
|
| 250 |
+
<p class="text-sm font-medium text-gray-800">Ticket prices for students</p>
|
| 251 |
+
<p class="text-xs text-gray-500">2 days ago</p>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
</div>
|
| 255 |
+
</section>
|
| 256 |
+
</main>
|
| 257 |
+
|
| 258 |
+
<!-- Chat Bubble -->
|
| 259 |
+
<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">
|
| 260 |
+
<i class="fas fa-comment-dots text-white text-2xl"></i>
|
| 261 |
+
</div>
|
| 262 |
+
|
| 263 |
+
<!-- Chat Modal -->
|
| 264 |
+
<div id="chatModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-20 flex items-end">
|
| 265 |
+
<div class="w-full bg-white rounded-t-3xl shadow-xl" style="height: 80vh;">
|
| 266 |
+
<!-- Chat Header -->
|
| 267 |
+
<div class="bg-[#FFDEAD] px-4 py-3 rounded-t-3xl flex items-center justify-between">
|
| 268 |
+
<div class="flex items-center">
|
| 269 |
+
<div class="bg-[#8B4513] rounded-full w-8 h-8 flex items-center justify-center mr-2">
|
| 270 |
+
<i class="fas fa-robot text-white"></i>
|
| 271 |
+
</div>
|
| 272 |
+
<h3 class="font-bold text-[#8B4513]">Tour Der Wang Assistant</h3>
|
| 273 |
+
</div>
|
| 274 |
+
<div class="flex items-center space-x-3">
|
| 275 |
+
<button class="text-[#8B4513]">
|
| 276 |
+
<i class="fas fa-ellipsis-v"></i>
|
| 277 |
+
</button>
|
| 278 |
+
<button id="closeChat" class="text-[#8B4513]">
|
| 279 |
+
<i class="fas fa-times"></i>
|
| 280 |
+
</button>
|
| 281 |
+
</div>
|
| 282 |
+
</div>
|
| 283 |
+
|
| 284 |
+
<!-- Chat Messages -->
|
| 285 |
+
<div class="h-[calc(100%-120px)] overflow-y-auto p-4 space-y-4">
|
| 286 |
+
<!-- AI Message -->
|
| 287 |
+
<div class="flex items-start">
|
| 288 |
+
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-2 flex-shrink-0">
|
| 289 |
+
<i class="fas fa-robot text-[#8B4513]"></i>
|
| 290 |
+
</div>
|
| 291 |
+
<div class="bg-[#FFF9F0] rounded-xl p-3 max-w-[80%]">
|
| 292 |
+
<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>
|
| 293 |
+
<div class="mt-2 flex space-x-2">
|
| 294 |
+
<button class="quick-reply bg-white text-[#8B4513] py-1 px-2 rounded-lg text-xs font-medium">
|
| 295 |
+
Tours
|
| 296 |
+
</button>
|
| 297 |
+
<button class="quick-reply bg-white text-[#8B4513] py-1 px-2 rounded-lg text-xs font-medium">
|
| 298 |
+
Tickets
|
| 299 |
+
</button>
|
| 300 |
+
<button class="quick-reply bg-white text-[#8B4513] py-1 px-2 rounded-lg text-xs font-medium">
|
| 301 |
+
Directions
|
| 302 |
+
</button>
|
| 303 |
+
</div>
|
| 304 |
+
<p class="text-xs text-gray-500 mt-1">2:45 PM</p>
|
| 305 |
+
</div>
|
| 306 |
+
</div>
|
| 307 |
+
|
| 308 |
+
<!-- Typing Indicator -->
|
| 309 |
+
<div id="typingIndicator" class="hidden flex items-start">
|
| 310 |
+
<div class="bg-[#FFDEAD] rounded-full w-8 h-8 flex items-center justify-center mr-2 flex-shrink-0">
|
| 311 |
+
<i class="fas fa-robot text-[#8B4513]"></i>
|
| 312 |
+
</div>
|
| 313 |
+
<div class="bg-[#FFF9F0] rounded-xl p-3">
|
| 314 |
+
<div class="typing-indicator">
|
| 315 |
+
<span></span>
|
| 316 |
+
<span></span>
|
| 317 |
+
<span></span>
|
| 318 |
+
</div>
|
| 319 |
+
</div>
|
| 320 |
+
</div>
|
| 321 |
+
</div>
|
| 322 |
+
|
| 323 |
+
<!-- Chat Input -->
|
| 324 |
+
<div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-3">
|
| 325 |
+
<div class="flex items-center">
|
| 326 |
+
<button class="text-[#8B4513] p-2">
|
| 327 |
+
<i class="fas fa-plus"></i>
|
| 328 |
+
</button>
|
| 329 |
+
<div class="flex-1 mx-2">
|
| 330 |
+
<input type="text" placeholder="Type your message..." class="w-full bg-[#FFF9F0] rounded-full px-4 py-2 text-gray-800 focus:outline-none">
|
| 331 |
+
</div>
|
| 332 |
+
<button class="text-[#8B4513] p-2">
|
| 333 |
+
<i class="fas fa-microphone"></i>
|
| 334 |
+
</button>
|
| 335 |
+
<button class="bg-[#8B4513] text-white rounded-full w-10 h-10 flex items-center justify-center ml-1">
|
| 336 |
+
<i class="fas fa-paper-plane"></i>
|
| 337 |
+
</button>
|
| 338 |
+
</div>
|
| 339 |
+
</div>
|
| 340 |
+
</div>
|
| 341 |
+
</div>
|
| 342 |
+
|
| 343 |
+
<script>
|
| 344 |
+
// Toggle chat modal
|
| 345 |
+
const chatBubble = document.getElementById('chatBubble');
|
| 346 |
+
const chatModal = document.getElementById('chatModal');
|
| 347 |
+
const closeChat = document.getElementById('closeChat');
|
| 348 |
+
const typingIndicator = document.getElementById('typingIndicator');
|
| 349 |
+
|
| 350 |
+
chatBubble.addEventListener('click', () => {
|
| 351 |
+
chatModal.classList.remove('hidden');
|
| 352 |
+
// Simulate AI response after 1 second
|
| 353 |
+
setTimeout(() => {
|
| 354 |
+
typingIndicator.classList.remove('hidden');
|
| 355 |
+
// Hide typing indicator after 2 seconds and show response
|
| 356 |
+
setTimeout(() => {
|
| 357 |
+
typingIndicator.classList.add('hidden');
|
| 358 |
+
// Here you would add the AI response to the chat
|
| 359 |
+
}, 2000);
|
| 360 |
+
}, 1000);
|
| 361 |
+
});
|
| 362 |
+
|
| 363 |
+
closeChat.addEventListener('click', () => {
|
| 364 |
+
chatModal.classList.add('hidden');
|
| 365 |
+
});
|
| 366 |
+
|
| 367 |
+
// Language toggle
|
| 368 |
+
const languageToggle = document.getElementById('languageToggle');
|
| 369 |
+
let currentLanguage = 'th';
|
| 370 |
+
|
| 371 |
+
languageToggle.addEventListener('click', () => {
|
| 372 |
+
if (currentLanguage === 'th') {
|
| 373 |
+
currentLanguage = 'en';
|
| 374 |
+
languageToggle.innerHTML = '<i class="fas fa-globe mr-1"></i><span>EN</span>';
|
| 375 |
+
// In a real app, you would change all text to English
|
| 376 |
+
} else {
|
| 377 |
+
currentLanguage = 'th';
|
| 378 |
+
languageToggle.innerHTML = '<i class="fas fa-globe mr-1"></i><span class="thai-font">ไทย</span>';
|
| 379 |
+
// In a real app, you would change all text to Thai
|
| 380 |
+
}
|
| 381 |
+
});
|
| 382 |
+
|
| 383 |
+
// Quick reply buttons
|
| 384 |
+
const quickReplies = document.querySelectorAll('.quick-reply');
|
| 385 |
+
quickReplies.forEach(reply => {
|
| 386 |
+
reply.addEventListener('click', () => {
|
| 387 |
+
// In a real app, this would send the quick reply text to the chat
|
| 388 |
+
if (!chatModal.classList.contains('hidden')) {
|
| 389 |
+
typingIndicator.classList.remove('hidden');
|
| 390 |
+
// Simulate AI response
|
| 391 |
+
setTimeout(() => {
|
| 392 |
+
typingIndicator.classList.add('hidden');
|
| 393 |
+
}, 2000);
|
| 394 |
+
}
|
| 395 |
+
});
|
| 396 |
+
});
|
| 397 |
+
|
| 398 |
+
// Gallery item hover effect
|
| 399 |
+
const galleryItems = document.querySelectorAll('.gallery-item');
|
| 400 |
+
galleryItems.forEach(item => {
|
| 401 |
+
item.addEventListener('mouseenter', () => {
|
| 402 |
+
item.style.transform = 'scale(1.03)';
|
| 403 |
+
item.style.boxShadow = '0 6px 15px rgba(0, 0, 0, 0.1)';
|
| 404 |
+
});
|
| 405 |
+
item.addEventListener('mouseleave', () => {
|
| 406 |
+
item.style.transform = 'scale(1)';
|
| 407 |
+
item.style.boxShadow = 'none';
|
| 408 |
+
});
|
| 409 |
+
});
|
| 410 |
+
</script>
|
| 411 |
+
<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>
|
| 412 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
Design a mobile AI chatbot assistant interface for Tour Der Wang (ทัวร์ เดอ วังฯ) tourism service that embodies Thai cultural elegance while delivering modern functionality. Create detailed mockups and specifications for the following: Interface Design: - Primary color: #FFDEAD (Navajo White) with complementary Thai-inspired accent colors - Typography: Use Sukhumvit Set for Thai text and Roboto for English - Maintain consistent 16px spacing and rounded corners (12px radius) throughout - Implement a floating chat bubble that's always accessible - Design all UI elements following iOS and Material Design guidelines Core Features (detail exact placement and interaction): 1. Chat Interface: - Persistent chat window with expandable/collapsible behavior - AI response indicators with typing animations - Quick-reply buttons for common queries - Voice input support with language detection 2. Location Services: - Interactive map centered on Wang Sam Mo - Points of interest markers with custom Thai-styled icons - Real-time location tracking with permission handling - Distance calculator from user's location 3. Gallery Component: - Grid layout with 3x3 thumbnail preview - Full-screen image viewer with pinch-to-zoom - Auto-loading carousel for featured locations - Photo tagging system for tour locations 4. Booking System: - Step-by-step booking wizard - Calendar view with Thai Buddhist calendar support - Real-time availability checker - Secure payment integration interface 5. Language Toggle: - Prominent language switch in header - Auto-detection of device language - Smooth transition animations between languages - Maintain layout consistency across languages Technical Specifications: 1. API Integration: - RESTful API architecture - WebSocket implementation for real-time chat - JWT authentication system - Rate limiting and error handling 2. Responsive Behaviors: - Breakpoints at 320px, 375px, 414px, and 428px - Dynamic font scaling - Flexible grid system - Touch-optimized interaction areas (minimum 44x44px) 3. Loading States: - Skeleton screens for content loading - Progressive image loading - Optimistic UI updates - Custom branded loading animations 4. Brand Implementation: - Logo placement in header (56px height) - Consistent brand color application - Custom iconography matching brand style - Watermark on gallery images Provide detailed wireframes and interaction specifications for each component, including exact measurements, color codes, and animation timings. <img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="307460108 387435583599238 6386334495691428178 n removebg preview" border="0"> <img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="image (15)" border="0"> <img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="image (19)" border="0">
|