| | <!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> |
