|
|
<!DOCTYPE html> |
|
|
<html lang="th"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ThaiGov AI Assistant</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@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> |
|
|
:root { |
|
|
--primary-color: #2c7be5; |
|
|
--secondary-color: #00d97e; |
|
|
--danger-color: #e63757; |
|
|
--warning-color: #f6c343; |
|
|
--dark-color: #12263f; |
|
|
--light-color: #f9fafd; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Noto Sans Thai', sans-serif; |
|
|
background-color: #f5f7fa; |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
border-radius: 18px; |
|
|
max-width: 80%; |
|
|
} |
|
|
|
|
|
.user-bubble { |
|
|
border-bottom-right-radius: 4px; |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.bot-bubble { |
|
|
border-bottom-left-radius: 4px; |
|
|
background-color: white; |
|
|
color: var(--dark-color); |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.quick-reply { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.quick-reply:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.high-contrast { |
|
|
background-color: black !important; |
|
|
color: white !important; |
|
|
} |
|
|
|
|
|
.high-contrast .bot-bubble { |
|
|
background-color: black !important; |
|
|
color: yellow !important; |
|
|
border: 2px solid yellow !important; |
|
|
} |
|
|
|
|
|
.high-contrast .user-bubble { |
|
|
background-color: yellow !important; |
|
|
color: black !important; |
|
|
} |
|
|
|
|
|
.text-xxs { |
|
|
font-size: 0.65rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="relative h-screen overflow-hidden bg-gray-50" style="max-width: 360px; margin: 0 auto;"> |
|
|
|
|
|
<header class="bg-blue-600 text-white p-4 shadow-md"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<button id="backBtn" class="text-white"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="ThaiGov Logo" class="h-8"> |
|
|
<h1 class="font-bold text-lg">ThaiGov AI</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button id="languageToggle" class="text-white text-sm">EN</button> |
|
|
<button id="settingsBtn" class="text-white"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="h-[calc(100vh-120px)] overflow-y-auto pb-4 px-3 pt-2" id="chatContainer"> |
|
|
|
|
|
<div class="flex mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-robot text-blue-600"></i> |
|
|
</div> |
|
|
<div class="bot-bubble chat-bubble px-4 py-3"> |
|
|
<p class="font-medium">สวัสดีค่ะ! ยินดีต้อนรับสู่ ThaiGov AI Assistant</p> |
|
|
<p class="text-sm mt-1">ฉันสามารถช่วยเหลือคุณในเรื่องบริการของรัฐบาลท้องถิ่นได้ทุกเวลา</p> |
|
|
|
|
|
<div class="mt-3 grid grid-cols-2 gap-2"> |
|
|
<button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium"> |
|
|
<i class="fas fa-file-alt mr-1"></i> ยื่นเอกสาร |
|
|
</button> |
|
|
<button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium"> |
|
|
<i class="fas fa-calendar-alt mr-1"></i> นัดหมาย |
|
|
</button> |
|
|
<button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium"> |
|
|
<i class="fas fa-money-bill-wave mr-1"></i> ชำระเงิน |
|
|
</button> |
|
|
<button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium"> |
|
|
<i class="fas fa-question-circle mr-1"></i> คำถามทั่วไป |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-center mb-4"> |
|
|
<button class="bg-red-100 text-red-600 rounded-full px-4 py-2 text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> เบอร์ฉุกเฉิน |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex mb-4 justify-end"> |
|
|
<div class="user-bubble chat-bubble px-4 py-2"> |
|
|
<p>ฉันต้องการยื่นเอกสารสำหรับการแจ้งเกิด</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-robot text-blue-600"></i> |
|
|
</div> |
|
|
<div class="bot-bubble chat-bubble px-4 py-3"> |
|
|
<p>สำหรับการแจ้งเกิด คุณสามารถ:</p> |
|
|
<div class="mt-2 space-y-2"> |
|
|
<button class="quick-reply w-full text-left bg-blue-50 text-blue-600 rounded-lg px-3 py-2 text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-file-pdf mr-2 text-red-500"></i> ดาวน์โหลดแบบฟอร์ม |
|
|
</button> |
|
|
<button class="quick-reply w-full text-left bg-blue-50 text-blue-600 rounded-lg px-3 py-2 text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-upload mr-2 text-green-500"></i> อัปโหลดเอกสาร |
|
|
</button> |
|
|
<button class="quick-reply w-full text-left bg-blue-50 text-blue-600 rounded-lg px-3 py-2 text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-map-marker-alt mr-2 text-orange-500"></i> สถานที่ยื่นเอกสาร |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex mb-4 justify-end"> |
|
|
<div class="user-bubble chat-bubble px-4 py-2"> |
|
|
<p>ฉันต้องการอัปโหลดเอกสาร</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-robot text-blue-600"></i> |
|
|
</div> |
|
|
<div class="bot-bubble chat-bubble px-4 py-3"> |
|
|
<p class="font-medium">ระบบอัปโหลดเอกสาร</p> |
|
|
<p class="text-sm mt-1">กรุณาเลือกไฟล์ที่ต้องการอัปโหลด (PDF, JPG ไม่เกิน 5MB)</p> |
|
|
|
|
|
<div class="mt-3 border-2 border-dashed border-blue-200 rounded-lg p-4 text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-blue-400 text-3xl mb-2"></i> |
|
|
<p class="text-sm text-gray-500">ลากไฟล์มาวางที่นี่หรือคลิกเพื่อเลือกไฟล์</p> |
|
|
<button class="mt-2 bg-blue-600 text-white rounded-full px-4 py-1 text-sm"> |
|
|
เลือกไฟล์ |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-3 text-xs text-gray-500"> |
|
|
<i class="fas fa-lock"></i> ข้อมูลของคุณจะถูกเก็บเป็นความลับตาม พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="absolute bottom-0 w-full bg-white border-t border-gray-200 p-3"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="text-blue-600 p-2 rounded-full hover:bg-blue-50"> |
|
|
<i class="fas fa-paperclip"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 p-2 rounded-full hover:bg-blue-50"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
<div class="flex-1 relative"> |
|
|
<input type="text" placeholder="พิมพ์ข้อความ..." class="w-full bg-gray-100 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-2 flex justify-between text-xs text-center"> |
|
|
<button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100"> |
|
|
<i class="fas fa-home block mx-auto mb-1"></i> |
|
|
หน้าหลัก |
|
|
</button> |
|
|
<button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100"> |
|
|
<i class="fas fa-file-alt block mx-auto mb-1"></i> |
|
|
เอกสาร |
|
|
</button> |
|
|
<button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100"> |
|
|
<i class="fas fa-calendar block mx-auto mb-1"></i> |
|
|
นัดหมาย |
|
|
</button> |
|
|
<button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100"> |
|
|
<i class="fas fa-wallet block mx-auto mb-1"></i> |
|
|
ชำระเงิน |
|
|
</button> |
|
|
<button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100"> |
|
|
<i class="fas fa-user block mx-auto mb-1"></i> |
|
|
บัญชี |
|
|
</button> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center"> |
|
|
<div class="bg-white rounded-lg w-full max-w-xs mx-4"> |
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<h3 class="font-bold text-lg">การตั้งค่า</h3> |
|
|
<button id="closeSettings" class="text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">ภาษา</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">ไทย</button> |
|
|
<button class="bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">English</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">ขนาดตัวอักษร</label> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="text-gray-500"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<div class="flex-1 bg-gray-100 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full w-3/4"></div> |
|
|
</div> |
|
|
<button class="text-gray-500"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="text-sm font-medium">โหมดความคมชัดสูง</label> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="text-sm font-medium">การตอบสนองสัมผัส</label> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-200"> |
|
|
<button class="w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium"> |
|
|
บันทึกการตั้งค่า |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="emergencyModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center"> |
|
|
<div class="bg-white rounded-lg w-full max-w-xs mx-4"> |
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<h3 class="font-bold text-lg">เบอร์ฉุกเฉิน</h3> |
|
|
<button id="closeEmergency" class="text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 space-y-3"> |
|
|
<div class="flex items-center p-3 bg-red-50 rounded-lg"> |
|
|
<div class="bg-red-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-ambulance text-red-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">รถพยาบาล</p> |
|
|
<p class="text-sm text-gray-600">1669</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-3 bg-blue-50 rounded-lg"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-shield-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">ตำรวจ</p> |
|
|
<p class="text-sm text-gray-600">191</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-3 bg-orange-50 rounded-lg"> |
|
|
<div class="bg-orange-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-fire-extinguisher text-orange-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">ดับเพลิง</p> |
|
|
<p class="text-sm text-gray-600">199</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center p-3 bg-purple-50 rounded-lg"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-life-ring text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">ภัยพิบัติ</p> |
|
|
<p class="text-sm text-gray-600">1784</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button class="w-full border border-blue-600 text-blue-600 py-2 rounded-lg text-sm font-medium"> |
|
|
โทรออก |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const settingsBtn = document.getElementById('settingsBtn'); |
|
|
const closeSettings = document.getElementById('closeSettings'); |
|
|
const settingsModal = document.getElementById('settingsModal'); |
|
|
const emergencyModal = document.getElementById('emergencyModal'); |
|
|
const closeEmergency = document.getElementById('closeEmergency'); |
|
|
const emergencyBtn = document.querySelector('.bg-red-100'); |
|
|
const languageToggle = document.getElementById('languageToggle'); |
|
|
const highContrastToggle = document.querySelector('input[type="checkbox"]'); |
|
|
const chatContainer = document.getElementById('chatContainer'); |
|
|
|
|
|
|
|
|
settingsBtn.addEventListener('click', () => { |
|
|
settingsModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeSettings.addEventListener('click', () => { |
|
|
settingsModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
emergencyBtn.addEventListener('click', () => { |
|
|
emergencyModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeEmergency.addEventListener('click', () => { |
|
|
emergencyModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
languageToggle.addEventListener('click', () => { |
|
|
const currentLang = languageToggle.textContent; |
|
|
languageToggle.textContent = currentLang === 'EN' ? 'TH' : 'EN'; |
|
|
|
|
|
}); |
|
|
|
|
|
highContrastToggle.addEventListener('change', (e) => { |
|
|
if(e.target.checked) { |
|
|
document.body.classList.add('high-contrast'); |
|
|
} else { |
|
|
document.body.classList.remove('high-contrast'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
|
|
|
console.log("Haptic feedback triggered"); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function scrollToBottom() { |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
scrollToBottom(); |
|
|
</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/chatbot2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
