| <!DOCTYPE html> |
| <html lang="th"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ผู้ช่วยหาเสียงดิจิทัล (AI Powered) - ธนอนันต์ เมนะสวัสดิ์</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <link href="https://fonts.googleapis.com/css2?family=Sarabun: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"> |
| |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> |
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| kla: { |
| main: '#15803d', |
| light: '#22c55e', |
| gold: '#FBBF24', |
| yellow: '#F59E0B', |
| dark: '#052e16', |
| } |
| }, |
| fontFamily: { |
| sans: ['Sarabun', 'sans-serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { font-family: 'Sarabun', sans-serif; } |
| .animate-fade-in { animation: fadeIn 0.5s ease-in-out; } |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } |
| |
| |
| .chat-scroll::-webkit-scrollbar { width: 6px; } |
| .chat-scroll::-webkit-scrollbar-track { background: #f0fdf4; } |
| .chat-scroll::-webkit-scrollbar-thumb { background: #15803d; border-radius: 10px; } |
| .chat-scroll::-webkit-scrollbar-thumb:hover { background: #166534; } |
| |
| |
| .bg-pattern { |
| background-image: radial-gradient(#FBBF24 1px, transparent 1px); |
| background-size: 20px 20px; |
| } |
| |
| |
| .typing-indicator span { |
| animation: blink 1.4s infinite both; |
| height: 5px; |
| width: 5px; |
| background-color: #15803d; |
| border-radius: 50%; |
| display: inline-block; |
| margin: 0 1px; |
| } |
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } |
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } |
| @keyframes blink { 0% { opacity: 0.1; } 20% { opacity: 1; } 100% { opacity: 0.1; } } |
| |
| |
| .audio-wave span { |
| display: inline-block; |
| width: 3px; |
| height: 10px; |
| background-color: white; |
| animation: wave 1s infinite ease-in-out; |
| margin: 0 1px; |
| } |
| .audio-wave span:nth-child(1) { animation-delay: 0.1s; } |
| .audio-wave span:nth-child(2) { animation-delay: 0.2s; } |
| .audio-wave span:nth-child(3) { animation-delay: 0.3s; } |
| .audio-wave span:nth-child(4) { animation-delay: 0.4s; } |
| @keyframes wave { |
| 0%, 100% { height: 5px; } |
| 50% { height: 15px; } |
| } |
| |
| |
| #map { |
| z-index: 1; |
| border-radius: 1.5rem; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .leaflet-popup-content-wrapper { |
| border-radius: 1rem; |
| padding: 0; |
| overflow: hidden; |
| } |
| .leaflet-popup-content { |
| margin: 0; |
| width: 280px !important; |
| } |
| .custom-div-icon { |
| background: transparent; |
| border: none; |
| } |
| .map-pin { |
| width: 40px; |
| height: 40px; |
| border-radius: 50% 50% 50% 0; |
| background: #15803d; |
| position: absolute; |
| transform: rotate(-45deg); |
| left: 50%; |
| top: 50%; |
| margin: -20px 0 0 -20px; |
| box-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border: 3px solid white; |
| } |
| .map-pin i { |
| transform: rotate(45deg); |
| color: white; |
| font-size: 18px; |
| } |
| .map-pin.market { background: #F59E0B; } |
| .map-pin.temple { background: #d97706; } |
| .map-pin:hover { transform: rotate(-45deg) scale(1.1); transition: all 0.2s; } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col font-sans"> |
|
|
| |
| <div class="bg-white shadow-md p-3 flex justify-between items-center sticky top-0 z-50 md:hidden border-b-2 border-kla-main"> |
| <div class="font-bold text-lg text-kla-main flex items-center gap-2"> |
| <div class="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden border-2 border-kla-gold bg-green-100"> |
| <img src="https://i.postimg.cc/tTWq33tF/ดาวน_โหลด.png" alt="ทนายโตโต้" class="w-full h-full object-cover object-top scale-110 translate-y-1"> |
| </div> |
| <div class="leading-none"> |
| <span class="block">ทนายโตโต้</span> |
| <span class="text-[10px] font-normal text-gray-500">เบอร์ 1 พรรคกล้าธรรม</span> |
| </div> |
| </div> |
| <button onclick="toggleMobileMenu()" class="text-kla-main focus:outline-none p-2 rounded-md hover:bg-green-50"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="mobile-menu" class="hidden fixed inset-0 bg-white z-40 pt-20 px-6 space-y-3 md:hidden animate-fade-in"> |
| <button onclick="switchTab('home'); toggleMobileMenu()" class="block w-full text-left py-4 px-4 rounded-xl font-bold text-white bg-gradient-to-r from-kla-main to-kla-light shadow-lg"> |
| <i class="fas fa-home mr-2"></i> หน้าหลัก (ประวัติ) |
| </button> |
| <button onclick="switchTab('policies'); toggleMobileMenu()" class="block w-full text-left py-4 px-4 rounded-xl font-medium text-kla-main bg-green-50 hover:bg-green-100 border border-green-100"> |
| <i class="fas fa-scroll mr-2"></i> นโยบายรายอำเภอ |
| </button> |
| <button onclick="switchTab('map'); toggleMobileMenu()" class="block w-full text-left py-4 px-4 rounded-xl font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 border border-blue-100"> |
| <i class="fas fa-map-marked-alt mr-2"></i> แผนที่ยุทธศาสตร์ |
| </button> |
| <button onclick="switchTab('fun'); toggleMobileMenu()" class="block w-full text-left py-4 px-4 rounded-xl font-medium text-purple-600 bg-purple-50 hover:bg-purple-100 border border-purple-100"> |
| <i class="fas fa-magic mr-2"></i> กิจกรรม AI |
| </button> |
| <button onclick="switchTab('chat'); toggleMobileMenu()" class="block w-full text-left py-4 px-4 rounded-xl font-medium text-kla-main bg-green-50 hover:bg-green-100 border border-green-100"> |
| <i class="fas fa-comments mr-2"></i> คุยกับน้องกล้า (AI) |
| </button> |
| <button onclick="switchTab('complaint'); toggleMobileMenu()" class="block w-full text-left py-4 px-4 rounded-xl font-medium text-red-600 bg-red-50 hover:bg-red-100 border border-red-100"> |
| <i class="fas fa-exclamation-triangle mr-2"></i> แจ้งเรื่องด่วน |
| </button> |
| </div> |
|
|
| |
| <div class="max-w-6xl mx-auto w-full md:py-10 flex flex-col md:flex-row gap-8 p-4 md:p-6 flex-1"> |
| |
| |
| <div class="hidden md:block w-72 flex-shrink-0 relative"> |
| <div class="bg-white rounded-3xl shadow-xl p-6 sticky top-10 border-t-4 border-kla-main"> |
| <div class="text-center mb-8 relative"> |
| <div class="w-32 h-32 mx-auto mb-4 flex items-center justify-center bg-white rounded-full p-2 shadow-sm border border-gray-100 relative z-10 overflow-hidden"> |
| |
| <img src="https://i.postimg.cc/Y9Yr66fh/image_removebg_preview.png" alt="โลโก้พรรคกล้าธรรม" class="w-full h-full object-contain"> |
| </div> |
| <h2 class="font-bold text-2xl text-kla-main leading-tight mt-2">ทนายโตโต้</h2> |
| <p class="text-sm text-gray-500 font-medium">ธนอนันต์ เมนะสวัสดิ์</p> |
| <div class="mt-3 inline-block bg-kla-gold/20 text-yellow-800 text-sm px-4 py-1 rounded-full font-bold border border-kla-gold"> |
| เบอร์ 1 ✅ เขต 6 |
| </div> |
| </div> |
|
|
| <nav class="space-y-3" id="desktop-nav"> |
| <button onclick="switchTab('home')" id="nav-home" class="w-full flex items-center gap-3 px-5 py-4 rounded-2xl transition-all duration-300 bg-gradient-to-r from-kla-main to-kla-light text-white shadow-lg font-bold text-lg ring-2 ring-green-200"> |
| <i class="fas fa-home w-6"></i> หน้าหลัก |
| </button> |
| <button onclick="switchTab('policies')" id="nav-policies" class="w-full flex items-center gap-3 px-5 py-4 rounded-2xl transition-all duration-300 hover:bg-green-50 text-gray-600 font-medium border border-transparent hover:border-green-100"> |
| <i class="fas fa-scroll w-6"></i> นโยบาย |
| </button> |
| <button onclick="switchTab('map')" id="nav-map" class="w-full flex items-center gap-3 px-5 py-4 rounded-2xl transition-all duration-300 hover:bg-blue-50 text-blue-600 font-medium border border-transparent hover:border-blue-100"> |
| <i class="fas fa-map-marked-alt w-6"></i> แผนที่ยุทธศาสตร์ |
| </button> |
| <button onclick="switchTab('fun')" id="nav-fun" class="w-full flex items-center gap-3 px-5 py-4 rounded-2xl transition-all duration-300 hover:bg-purple-50 text-purple-600 font-medium border border-transparent hover:border-purple-100 group"> |
| <i class="fas fa-magic w-6"></i> กิจกรรม AI <span class="bg-purple-500 text-white text-[10px] px-1.5 py-0.5 rounded ml-auto">ใหม่!</span> |
| </button> |
| <button onclick="switchTab('chat')" id="nav-chat" class="w-full flex items-center gap-3 px-5 py-4 rounded-2xl transition-all duration-300 hover:bg-green-50 text-gray-600 font-medium border border-transparent hover:border-green-100 group"> |
| <i class="fas fa-comments w-6"></i> ถามน้องกล้า |
| </button> |
| <button onclick="switchTab('complaint')" id="nav-complaint" class="w-full flex items-center gap-3 px-5 py-4 rounded-2xl transition-all duration-300 hover:bg-red-50 text-red-500 font-medium border border-transparent hover:border-red-100"> |
| <i class="fas fa-exclamation-circle w-6"></i> ร้องเรียน |
| </button> |
| </nav> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 min-h-[600px]"> |
| |
| |
| <div id="tab-home" class="animate-fade-in block"> |
| |
| <div class="bg-gradient-to-br from-kla-main via-green-800 to-green-900 rounded-3xl overflow-hidden shadow-2xl text-white relative mb-10 min-h-[300px] flex items-center"> |
| <div class="absolute inset-0 opacity-10 bg-pattern"></div> |
| |
| <div class="p-6 md:p-10 flex flex-col md:flex-row items-center gap-8 md:gap-12 relative z-10 w-full"> |
| |
| <div class="w-48 h-48 md:w-64 md:h-64 rounded-full border-[6px] border-kla-gold shadow-2xl overflow-hidden flex-shrink-0 bg-gradient-to-b from-green-400 to-white relative z-20 ring-4 ring-green-900/50 group flex items-center justify-center"> |
| <img src="https://i.postimg.cc/tTWq33tF/ดาวน_โหลด.png" |
| onerror="this.src='https://ui-avatars.com/api/?name=Thanonan+Menasawat&background=15803d&color=fff&size=256'" |
| alt="ธนอนันต์ เมนะสวัสดิ์" |
| class="w-full h-full object-contain object-bottom scale-110 translate-y-2 transition-transform duration-500 group-hover:scale-115"> |
| </div> |
| |
| <div class="text-center md:text-left flex-1"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 bg-kla-gold text-green-900 font-extrabold rounded-full text-base mb-4 shadow-lg animate-pulse"> |
| <span class="text-xl">🗳️</span> เบอร์ 1 ✅ เขต 6 อุดรธานี |
| </div> |
| <h1 class="text-3xl md:text-5xl font-extrabold mb-2 tracking-tight">ธนอนันต์ เมนะสวัสดิ์</h1> |
| <h2 class="text-xl md:text-3xl text-kla-gold mb-4 font-bold drop-shadow-sm">(ทนายโตโต้)</h2> |
| <div class="space-y-2 mb-6"> |
| <p class="text-lg md:text-xl font-medium italic opacity-95 leading-relaxed text-green-100"> |
| "ทนายความของประชาชน... คนรุ่นใหม่ หัวใจดั้งเดิม" |
| </p> |
| <p class="text-sm bg-white/10 inline-block px-3 py-1 rounded-lg backdrop-blur-sm border border-white/20"> |
| <i class="fas fa-user-tie mr-1"></i> บุตรชาย <strong class="text-yellow-300">นายเกียรติอุดม เมนะสวัสดิ์</strong> (อดีต ส.ส. อุดรธานี) |
| </p> |
| </div> |
| |
| <div class="flex flex-wrap gap-4 justify-center md:justify-start"> |
| <button onclick="switchTab('map')" class="bg-white text-kla-main px-8 py-3 rounded-full font-extrabold hover:bg-gray-100 transition shadow-lg transform hover:-translate-y-1 flex items-center gap-2 border-2 border-white"> |
| ดูแผนที่เขต 6 <i class="fas fa-map-marked-alt"></i> |
| </button> |
| <button onclick="switchTab('complaint')" class="bg-transparent border-2 border-kla-gold text-kla-gold px-8 py-3 rounded-full font-bold hover:bg-kla-gold/20 transition transform hover:-translate-y-1 flex items-center gap-2"> |
| ร้องทุกข์ <i class="fas fa-bullhorn"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid md:grid-cols-3 gap-6 mb-10"> |
| <div class="bg-white p-6 rounded-3xl shadow-md border-l-4 border-kla-main col-span-2"> |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2"> |
| <i class="fas fa-history text-kla-main"></i> สานต่ออุดมการณ์ พ่อเกียรติอุดม |
| </h3> |
| <p class="text-gray-600 leading-relaxed mb-4"> |
| ทนายโตโต้ เป็นบุตรชายของ <strong>นายเกียรติอุดม เมนะสวัสดิ์</strong> อดีต ส.ส. อุดรธานี ผู้เป็นที่รักของพี่น้องชาวอุดรฯ |
| ซึมซับการทำงานเพื่อประชาชนมาตั้งแต่เด็ก "เดินตามพ่อไปหาเสียง เรียนรู้งานสภา" |
| วันนี้พร้อมแล้วที่จะนำความรู้ด้านกฎหมายมาช่วยเหลือพี่น้อง สืบสานเจตนารมณ์ของคุณพ่อ |
| </p> |
| <div class="flex gap-2 flex-wrap"> |
| <span class="bg-green-50 text-kla-main text-xs px-3 py-1 rounded-full font-bold">#ลูกไม้ใต้ต้น</span> |
| <span class="bg-green-50 text-kla-main text-xs px-3 py-1 rounded-full font-bold">#คนอุดรแท้</span> |
| <span class="bg-green-50 text-kla-main text-xs px-3 py-1 rounded-full font-bold">#ทนายความจิตอาสา</span> |
| </div> |
| </div> |
| <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-3xl shadow-md border-l-4 border-blue-500"> |
| <h3 class="text-xl font-bold text-blue-800 mb-4 flex items-center gap-2"> |
| <i class="fas fa-gavel"></i> ทำไมต้อง "ทนาย"? |
| </h3> |
| <p class="text-blue-900 text-sm leading-relaxed"> |
| "เพราะกฎหมายคือเครื่องมือที่คนตัวเล็กๆ เข้าไม่ถึง" ทนายโตโต้จึงอาสาเป็นทนายแก้ต่างให้คนจนฟรี |
| เปิดศูนย์ปรึกษากฎหมายประจำตำบล เพื่อให้ความยุติธรรมจับต้องได้จริง |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-3xl shadow-lg overflow-hidden mb-10 border border-green-100"> |
| <div class="bg-green-50 p-4 border-b border-green-100 flex items-center gap-3"> |
| <div class="w-10 h-10 bg-kla-main rounded-full flex items-center justify-center text-white text-lg"> |
| <i class="fas fa-video"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">แนะนำตัว ทนายโตโต้</h3> |
| </div> |
| <div class="aspect-video w-full bg-black relative"> |
| <iframe |
| src="https://share.zight.com/Jru98vEz?embed=true&title=true&branding=true" |
| width="100%" |
| height="100%" |
| style="border:none" |
| frameborder="0" |
| class="absolute inset-0 w-full h-full" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| allowtransparency="true" |
| allowfullscreen="true"> |
| </iframe> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="tab-policies" class="animate-fade-in hidden"> |
| <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8 pb-4 border-b border-gray-200"> |
| <div class="flex items-center gap-4"> |
| <div class="w-16 h-16 flex-shrink-0 bg-green-100 rounded-full flex items-center justify-center text-2xl text-kla-main shadow-sm border border-gray-100"> |
| <i class="fas fa-file-alt"></i> |
| </div> |
| <div> |
| <h2 class="text-3xl font-extrabold text-kla-main">นโยบายเพื่อพี่น้องเขต 6</h2> |
| <p class="text-gray-500 font-medium">ทำจริง ทำไว กล้าคิด กล้าทำ</p> |
| </div> |
| </div> |
| |
| <button onclick="playPolicyAudio()" id="tts-btn" class="bg-kla-main text-white px-5 py-3 rounded-full font-bold shadow-lg hover:bg-green-700 transition flex items-center gap-2 min-w-[180px] justify-center"> |
| <i class="fas fa-volume-up"></i> |
| <span>ฟังเสียงนโยบาย (AI)</span> |
| <div id="tts-loading" class="hidden audio-wave flex gap-0.5 h-3 items-end"> |
| <span></span><span></span><span></span><span></span> |
| </div> |
| </button> |
| <audio id="policy-audio" class="hidden"></audio> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6 mb-8"> |
| |
| <div class="bg-white p-6 rounded-2xl shadow-md border-t-4 border-kla-gold hover:shadow-xl transition-all group"> |
| <div class="flex items-center gap-4 mb-4"> |
| <div class="w-14 h-14 bg-yellow-50 text-kla-gold rounded-full flex items-center justify-center text-3xl shadow-sm group-hover:scale-110 transition border border-yellow-100"> |
| <i class="fas fa-certificate"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800">เปลี่ยน ส.ป.ก. เป็นโฉนด</h3> |
| <span class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full font-bold">ทำทันที</span> |
| </div> |
| </div> |
| <p class="text-gray-600 leading-relaxed">สานต่อนโยบายหลักของพรรค เปลี่ยน ส.ป.ก. 4-01 ให้เป็นโฉนดเพื่อการเกษตร เพื่อให้พี่น้องใช้ค้ำประกันเงินกู้ได้จริง เพิ่มมูลค่าทรัพย์สินทันที</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-2xl shadow-md border-t-4 border-kla-main hover:shadow-xl transition-all group"> |
| <div class="flex items-center gap-4 mb-4"> |
| <div class="w-14 h-14 bg-green-50 text-kla-main rounded-full flex items-center justify-center text-3xl shadow-sm group-hover:scale-110 transition border border-green-100"> |
| <i class="fas fa-hand-holding-usd"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">กองทุนแก้หนี้สิน</h3> |
| </div> |
| <p class="text-gray-600 leading-relaxed">ใช้ความรู้ทนายช่วยไกล่เกลี่ยหนี้นอกระบบ และจัดตั้งกองทุนหมุนเวียนเพื่อลดต้นทุนการผลิต ปุ๋ยยาต้องราคาเป็นธรรม</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-2xl shadow-md border-t-4 border-blue-500 hover:shadow-xl transition-all group"> |
| <div class="flex items-center gap-4 mb-4"> |
| <div class="w-14 h-14 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center text-3xl shadow-sm group-hover:scale-110 transition border border-blue-100"> |
| <i class="fas fa-road"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800">ถนน 4 เลน</h3> |
| <div class="text-xs text-gray-500">ศรีธาตุ - วังสามหมอ</div> |
| </div> |
| </div> |
| <p class="text-gray-600 leading-relaxed">ผลักดันการขยายถนนเป็น 4 เลน เส้นทางหลัก "ศรีธาตุ-วังสามหมอ" เพื่อรองรับการขนส่งพืชผลการเกษตรและลดอุบัติเหตุ</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-2xl shadow-md border-t-4 border-green-500 hover:shadow-xl transition-all group"> |
| <div class="flex items-center gap-4 mb-4"> |
| <div class="w-14 h-14 bg-green-50 text-green-600 rounded-full flex items-center justify-center text-3xl shadow-sm group-hover:scale-110 transition border border-green-100"> |
| <i class="fas fa-gavel"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">ทนายความประจำบ้าน</h3> |
| </div> |
| <p class="text-gray-600 leading-relaxed">ศูนย์ปรึกษากฎหมายฟรีทุกอำเภอ ดูแลคดีที่ดิน คดีมรดก คดีไม่ได้รับความเป็นธรรม โดยทีมงานทนายมืออาชีพ</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="tab-map" class="animate-fade-in hidden"> |
| <div class="mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> |
| <div> |
| <h2 class="text-3xl font-bold text-gray-800 flex items-center gap-3"> |
| <span class="bg-blue-100 text-blue-600 p-2 rounded-xl"><i class="fas fa-map-marked-alt"></i></span> แผนที่ยุทธศาสตร์ เขต 6 |
| </h2> |
| <p class="text-gray-600 mt-2">แสดงจุดยุทธศาสตร์สำคัญ และพื้นที่เป้าหมายการพัฒนาตามนโยบายพรรค</p> |
| </div> |
| <div class="text-sm bg-yellow-50 text-yellow-800 px-4 py-2 rounded-lg border border-yellow-200"> |
| <i class="fas fa-info-circle"></i> กดที่หมุดเพื่อดูนโยบายเฉพาะจุด และมุมมอง 3D |
| </div> |
| </div> |
|
|
| <div class="bg-white p-2 rounded-3xl shadow-xl border border-gray-200"> |
| <div id="map" class="w-full h-[500px] z-10 relative"></div> |
| </div> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6"> |
| <div class="flex items-center gap-2 text-sm text-gray-600"> |
| <div class="w-4 h-4 bg-kla-main rounded-full"></div> ที่ว่าการอำเภอ/ศูนย์กลาง |
| </div> |
| <div class="flex items-center gap-2 text-sm text-gray-600"> |
| <div class="w-4 h-4 bg-yellow-500 rounded-full"></div> ตลาดชุมชน/เศรษฐกิจ |
| </div> |
| <div class="flex items-center gap-2 text-sm text-gray-600"> |
| <div class="w-4 h-4 bg-orange-600 rounded-full"></div> ศาสนสถาน/ศูนย์รวมใจ |
| </div> |
| <div class="flex items-center gap-2 text-sm text-gray-600"> |
| <div class="w-4 h-4 bg-blue-500 rounded-full"></div> โครงการพัฒนา (ถนน/น้ำ) |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="tab-fun" class="animate-fade-in hidden"> |
| <div class="mb-8"> |
| <h2 class="text-3xl font-bold text-gray-800 flex items-center gap-3"> |
| <span class="bg-purple-100 text-purple-600 p-2 rounded-xl"><i class="fas fa-magic"></i></span> กิจกรรมสนุกๆ กับ AI |
| </h2> |
| <p class="text-gray-600 mt-2">สัมผัสอนาคตไปกับทนายโตโต้ ด้วยพลังของ Gemini AI และ Imagen</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-2 gap-8"> |
| |
| <div class="bg-white p-6 rounded-3xl shadow-xl border-t-4 border-purple-500"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-xl"> |
| <i class="fas fa-eye"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">🔮 ภาพอนาคต 2573 (Vision 2573)</h3> |
| </div> |
| <p class="text-sm text-gray-500 mb-4">พิมพ์ชื่อหมู่บ้านและอาชีพของคุณ AI จะฉายภาพชีวิตในอีก 4 ปีข้างหน้า เมื่อนโยบายทนายโตโต้สำเร็จ!</p> |
| |
| <div class="space-y-3"> |
| <input type="text" id="vision-village" placeholder="ชื่อหมู่บ้าน (เช่น บ้านหนองหาน)" class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 outline-none"> |
| <input type="text" id="vision-job" placeholder="อาชีพ (เช่น ชาวนา, ค้าขาย)" class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 outline-none"> |
| <button onclick="generateVision()" id="vision-btn" class="w-full bg-purple-600 text-white py-3 rounded-xl font-bold hover:bg-purple-700 transition flex items-center justify-center gap-2"> |
| ✨ ฉายภาพอนาคต |
| </button> |
| </div> |
| |
| <div id="vision-result" class="mt-6 p-4 bg-purple-50 rounded-xl border border-purple-100 hidden text-purple-900 leading-relaxed italic relative"> |
| |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-6 rounded-3xl shadow-xl border-t-4 border-kla-gold"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center text-xl"> |
| <i class="fas fa-image"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">🎨 สร้างโปสเตอร์เชียร์ (AI Poster)</h3> |
| </div> |
| <p class="text-sm text-gray-500 mb-4">อยากได้โปสเตอร์เชียร์แบบไหน? บอก AI ได้เลย (เช่น "ชาวนาเชียร์ทนายโตโต้", "พัฒนาถนน")</p> |
| |
| <div class="space-y-3"> |
| <input type="text" id="poster-prompt" placeholder="แนวคิดโปสเตอร์ (เช่น ทุ่งนาสีทอง, ถนน 4 เลนสวยๆ)" class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-yellow-500 outline-none"> |
| <button onclick="generatePoster()" id="poster-btn" class="w-full bg-gradient-to-r from-kla-gold to-yellow-500 text-white py-3 rounded-xl font-bold hover:shadow-lg transition flex items-center justify-center gap-2"> |
| 🎨 วาดโปสเตอร์ |
| </button> |
| </div> |
|
|
| <div id="poster-result-container" class="mt-6 hidden flex justify-center items-center bg-gray-100 rounded-xl min-h-[250px] relative overflow-hidden"> |
| <img id="poster-img" src="" class="w-full h-full object-cover rounded-xl" alt="AI Generated Poster"> |
| <div id="poster-loading" class="absolute inset-0 bg-white/80 flex flex-col items-center justify-center hidden"> |
| <i class="fas fa-spinner fa-spin text-3xl text-yellow-500 mb-2"></i> |
| <span class="text-sm font-bold text-gray-500">AI กำลังวาดภาพ...</span> |
| </div> |
| </div> |
| <p class="text-xs text-center text-gray-400 mt-2">*สร้างโดย Imagen 3 (AI)</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="tab-chat" class="animate-fade-in hidden"> |
| <div class="mb-6"> |
| <h2 class="text-3xl font-bold text-gray-800 flex items-center gap-3"> |
| <span class="bg-green-100 text-kla-main p-2 rounded-xl"><i class="fas fa-robot"></i></span> แชทกับน้องกล้า |
| </h2> |
| <p class="text-gray-600 mt-2 pl-12 flex items-center gap-2"> |
| <span>ผู้ช่วย AI อัจฉริยะ รู้จริงเรื่องพื้นที่และนโยบาย</span> |
| <span class="bg-gradient-to-r from-pink-500 to-green-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm">✨ Powered by Gemini</span> |
| </p> |
| </div> |
| |
| <div class="flex flex-col h-[600px] bg-white rounded-3xl overflow-hidden shadow-xl border border-green-100"> |
| |
| <div class="bg-gradient-to-r from-kla-main to-green-700 text-white p-4 px-6 flex items-center justify-between shadow-md relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-10 bg-pattern"></div> |
| <div class="flex items-center gap-4 relative z-10"> |
| <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center text-kla-main font-extrabold border-2 border-kla-gold text-xl shadow-sm"> |
| ก |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">น้องกล้า (AI ทนายโตโต้)</h3> |
| <p class="text-xs text-green-200 flex items-center gap-1.5"> |
| <span class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse ring-2 ring-green-200"></span> Online (Gemini 2.5 Flash) |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="chat-messages" class="flex-1 overflow-y-auto p-6 space-y-6 chat-scroll bg-gray-50"> |
| <div class="flex justify-start"> |
| <div class="flex items-end gap-2"> |
| <div class="w-8 h-8 bg-kla-main rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold text-sm border border-kla-gold mb-1 shadow-sm">ก</div> |
| <div class="max-w-[85%] p-4 rounded-2xl shadow-sm text-sm bg-white text-gray-800 border border-gray-200 rounded-bl-none"> |
| <p class="font-bold text-kla-main mb-1">สวัสดีครับพี่น้องชาวอุดรเขต 6! 🙏</p> |
| ผม <strong>'น้องกล้า'</strong> ผู้ช่วย AI ของทนายโตโต้ครับ <br> |
| <ul class="list-disc list-inside mt-2 text-gray-600 space-y-1"> |
| <li>ถามเรื่องนโยบายเปลี่ยน ส.ป.ก. เป็นโฉนด</li> |
| <li>สอบถามเส้นทางถนน 4 เลน</li> |
| <li>ปรึกษากฎหมายเบื้องต้น</li> |
| <li>ให้ผมช่วยร่างหนังสือร้องเรียนก็ได้นะครับ!</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="p-4 bg-white border-t border-gray-100"> |
| <form onsubmit="sendMessage(event)" class="flex gap-3 relative"> |
| <input id="chat-input" type="text" placeholder="พิมพ์คำถาม... (เช่น 'พ่อทนายโตโต้คือใคร?', 'สปก.ทำยังไง?')" |
| class="flex-1 p-4 pr-16 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-kla-main focus:border-transparent shadow-sm bg-gray-50" autocomplete="off"> |
| <button type="submit" id="send-btn" class="absolute right-2 top-2 bottom-2 bg-kla-main text-white p-2 md:px-6 rounded-xl hover:bg-green-800 transition-all font-bold shadow-md flex items-center justify-center gap-1 group disabled:opacity-50 disabled:cursor-not-allowed"> |
| <span class="hidden md:inline">ส่ง</span> |
| <i class="fas fa-paper-plane md:hidden"></i> |
| </button> |
| </form> |
| <div class="mt-3 flex flex-wrap gap-2 text-xs text-gray-500 justify-center"> |
| <span class="bg-gray-100 px-3 py-1 rounded-full cursor-pointer hover:bg-green-100 hover:text-kla-main transition" onclick="document.getElementById('chat-input').value='ทนายโตโต้เป็นลูกใคร?'; sendMessage(event);">👨👩👦 ครอบครัว?</span> |
| <span class="bg-gray-100 px-3 py-1 rounded-full cursor-pointer hover:bg-green-100 hover:text-kla-main transition" onclick="document.getElementById('chat-input').value='สปก. เปลี่ยนเป็นโฉนดได้จริงไหม?'; sendMessage(event);">📜 สปก. เป็นโฉนด?</span> |
| <span class="bg-gray-100 px-3 py-1 rounded-full cursor-pointer hover:bg-green-100 hover:text-kla-main transition" onclick="document.getElementById('chat-input').value='ช่วยร่างหนังสือร้องเรียนเรื่องถนนเป็นหลุมบ่อหน่อย'; sendMessage(event);">✍️ ช่วยเขียนร้องเรียน</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="tab-complaint" class="animate-fade-in hidden"> |
| <div class="mb-8"> |
| <h2 class="text-3xl font-bold text-gray-800 flex items-center gap-3"> |
| <span class="bg-red-100 text-red-600 p-2 rounded-xl animate-pulse"><i class="fas fa-exclamation-triangle"></i></span> แจ้งปัญหาในพื้นที่ |
| </h2> |
| <p class="text-gray-600 mt-3 text-lg leading-relaxed max-w-2xl">ทนายโตโต้พร้อมรับฟังทุกปัญหา และใช้ความรู้ทางกฎหมายเข้าช่วยเหลือ แจ้งเรื่องได้เลยครับ</p> |
| </div> |
| |
| <div id="complaint-form-view" class="flex flex-col md:flex-row gap-8 items-start"> |
| <div class="bg-white p-8 rounded-3xl shadow-xl border-t-8 border-red-500 flex-1 w-full"> |
| <h3 class="font-bold text-xl mb-6 text-gray-800">แบบฟอร์มรับเรื่องร้องทุกข์</h3> |
| <form onsubmit="submitComplaint(event)" class="space-y-5"> |
| <div class="grid md:grid-cols-2 gap-5"> |
| <div> |
| <label class="block text-sm font-bold text-gray-700 mb-2">ชื่อ-นามสกุล <span class="text-red-500">*</span></label> |
| <input required type="text" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none transition" placeholder="ระบุชื่อของท่าน"> |
| </div> |
| <div> |
| <label class="block text-sm font-bold text-gray-700 mb-2">เบอร์โทรศัพท์ติดต่อ <span class="text-red-500">*</span></label> |
| <input required type="tel" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none transition" placeholder="เพื่อให้ทีมงานติดต่อกลับ"> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-bold text-gray-700 mb-2">พื้นที่ (อำเภอ/ตำบล) <span class="text-red-500">*</span></label> |
| <select class="w-full p-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none transition pr-10"> |
| <option value="">-- กรุณาเลือกอำเภอ --</option> |
| <option>อำเภอศรีธาตุ</option> |
| <option>อำเภอวังสามหมอ</option> |
| <option>อำเภอไชยวาน</option> |
| <option>อำเภอกู่แก้ว</option> |
| <option>อื่นๆ ในเขต 6</option> |
| </select> |
| </div> |
| <div> |
| <div class="flex justify-between items-end mb-2"> |
| <label class="block text-sm font-bold text-gray-700">รายละเอียดปัญหา <span class="text-red-500">*</span></label> |
| <button type="button" onclick="magicDraft()" id="magic-btn" class="text-xs bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-3 py-1.5 rounded-full hover:shadow-lg transition flex items-center gap-1"> |
| ✨ ให้ AI ช่วยเรียบเรียง |
| </button> |
| </div> |
| <textarea id="complaint-detail" required rows="6" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none transition resize-none" placeholder="เช่น ถนนเป็นหลุมบ่อสายไหน, น้ำประปาไม่ไหลที่หมู่บ้านใด..."></textarea> |
| <p class="text-xs text-gray-400 mt-1">*เคล็ดลับ: พิมพ์สั้นๆ แล้วกดปุ่ม ✨ เพื่อให้ AI เขียนภาษาทางการให้ครับ</p> |
| </div> |
| <button type="submit" class="w-full bg-gradient-to-r from-red-600 to-red-500 text-white py-4 rounded-xl font-bold hover:from-red-700 hover:to-red-600 transition-all shadow-lg text-lg flex items-center justify-center gap-2"> |
| ส่งเรื่องถึงทนายโตโต้ <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| |
| |
| <div class="md:w-80 bg-green-50 p-6 rounded-3xl border border-green-100 shadow-inner"> |
| <h4 class="font-bold text-kla-main text-lg mb-4 flex items-center gap-2"> |
| <i class="fas fa-info-circle"></i> |
| ศูนย์ประสานงาน |
| </h4> |
| <ul class="space-y-4 text-sm text-gray-700"> |
| <li class="flex items-start gap-3"> |
| <span class="bg-white p-2 rounded-full shadow-sm text-kla-main"><i class="fas fa-map-marker-alt"></i></span> |
| <span>ที่ทำการพรรคกล้าธรรม เขต 6 จ.อุดรธานี</span> |
| </li> |
| <li class="flex items-center gap-3"> |
| <span class="bg-white p-2 rounded-full shadow-sm text-green-600"><i class="fas fa-phone"></i></span> |
| <span class="font-bold">08X-XXXXXXX</span> (สายด่วนทีมงาน) |
| </li> |
| <li class="flex items-center gap-3"> |
| <span class="bg-white p-2 rounded-full shadow-sm text-blue-600"><i class="fab fa-facebook"></i></span> |
| <a href="https://www.facebook.com/thanaana.menasahwat" target="_blank" class="hover:text-blue-800 transition underline font-bold">Facebook: ทนายโตโต้</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div id="complaint-success-view" class="hidden bg-white border-2 border-green-400 p-12 rounded-3xl text-center mt-8 shadow-xl max-w-2xl mx-auto animate-fade-in"> |
| <div class="w-24 h-24 bg-green-100 text-green-500 rounded-full flex items-center justify-center mx-auto mb-6 text-5xl shadow-sm ring-4 ring-green-50"> |
| <i class="fas fa-check"></i> |
| </div> |
| <h3 class="text-3xl font-extrabold text-gray-800 mb-4">ได้รับเรื่องแล้วครับ!</h3> |
| <p class="text-gray-600 text-lg mb-8">ทีมงานทนายโตโต้จะรีบตรวจสอบและประสานงานแก้ไขให้พี่น้องโดยเร็วที่สุดครับ</p> |
| <button onclick="resetComplaint()" class="bg-gray-100 text-gray-700 px-8 py-3 rounded-full font-bold hover:bg-gray-200 transition">ส่งเรื่องอื่นเพิ่มเติม</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-gray-400 py-10 mt-12 text-center text-sm border-t-4 border-kla-gold"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="mb-6 flex items-center justify-center gap-3 opacity-50 hover:opacity-100 transition"> |
| <div class="text-left"> |
| <h4 class="font-bold text-white text-base">พรรคกล้าธรรม</h4> |
| <p class="text-xs">Kla Tham Party</p> |
| </div> |
| <a href="https://www.facebook.com/thanaana.menasahwat" target="_blank" class="text-white hover:text-blue-400 transition"><i class="fab fa-facebook text-2xl"></i></a> |
| </div> |
| <p class="font-medium text-gray-300">© 2025 ทีมงานทนายโตโต้ ธนอนันต์ เมนะสวัสดิ์</p> |
| <p>ผู้สมัคร ส.ส. เขต 6 จ.อุดรธานี พรรคกล้าธรรม</p> |
| </div> |
| </footer> |
|
|
| |
| <script> |
| |
| const apiKey = "AIzaSyCfVQrOUMsYk3VjV88QJqNOlUZkrvFdOz8"; |
| |
| |
| function switchTab(tabId) { |
| ['home', 'policies', 'map', 'fun', 'chat', 'complaint'].forEach(id => { |
| const tab = document.getElementById('tab-' + id); |
| if (tab) tab.classList.add('hidden'); |
| |
| const navItem = document.getElementById('nav-' + id); |
| if (navItem) { |
| navItem.classList.remove('bg-gradient-to-r', 'from-kla-main', 'to-kla-light', 'text-white', 'shadow-lg', 'ring-2', 'ring-green-200'); |
| navItem.classList.add('hover:bg-green-50', 'text-gray-600', 'font-medium', 'border', 'border-transparent'); |
| if(id === 'complaint') navItem.classList.add('text-red-500', 'hover:bg-red-50'); |
| if(id === 'map') navItem.classList.add('text-blue-600', 'hover:bg-blue-50'); |
| if(id === 'fun') navItem.classList.add('text-purple-600', 'hover:bg-purple-50'); |
| } |
| }); |
| |
| const activeTab = document.getElementById('tab-' + tabId); |
| if (activeTab) { |
| activeTab.classList.remove('hidden'); |
| if (tabId === 'map' && mapInstance) { |
| setTimeout(() => mapInstance.invalidateSize(), 100); |
| } |
| } |
| |
| const activeNav = document.getElementById('nav-' + tabId); |
| if (activeNav) { |
| activeNav.classList.remove('hover:bg-green-50', 'text-gray-600', 'font-medium', 'border', 'border-transparent', 'text-red-500', 'hover:bg-red-50', 'text-blue-600', 'hover:bg-blue-50', 'text-purple-600', 'hover:bg-purple-50'); |
| activeNav.classList.add('bg-gradient-to-r', 'from-kla-main', 'to-kla-light', 'text-white', 'shadow-lg', 'ring-2', 'ring-green-200'); |
| } |
| |
| if(window.innerWidth < 768) { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| } |
| |
| function toggleMobileMenu() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| } |
| |
| |
| let mapInstance = null; |
| |
| const mapData = [ |
| { name: "ที่ว่าการอำเภอศรีธาตุ", lat: 16.9958, lng: 103.2111, type: "district", policy: "ขยายถนน 4 เลน (Logistics)", link3d: "https://www.google.com/maps/@16.97278,103.21667,500m/data=!3m1!1e3" }, |
| { name: "ตลาดสดศรีธาตุ", lat: 16.9965, lng: 103.2125, type: "market", policy: "ตลาดชุมชนเข้มแข็ง", link3d: "https://www.google.com/maps/@16.9965,103.2125,500m/data=!3m1!1e3" }, |
| { name: "ที่ว่าการอำเภอวังสามหมอ", lat: 16.9654, lng: 103.4452, type: "district", policy: "ราคายางพาราเป็นธรรม", link3d: "https://www.google.com/maps/@16.94972,103.42861,500m/data=!3m1!1e3" }, |
| { name: "ตลาดสดวังสามหมอ", lat: 16.9662, lng: 103.4468, type: "market", policy: "กระตุ้นเศรษฐกิจฐานราก", link3d: "https://www.google.com/maps/@16.9662,103.4468,500m/data=!3m1!1e3" }, |
| { name: "ที่ว่าการอำเภอไชยวาน", lat: 17.2845, lng: 103.2145, type: "district", policy: "ส่งเสริมการท่องเที่ยววิถีธรรม", link3d: "https://www.google.com/maps/@17.28667,103.22333,500m/data=!3m1!1e3" }, |
| { name: "ทต.โนนทองอินทร์ (กู่แก้ว)", lat: 17.1542, lng: 103.0541, type: "subdistrict", policy: "แหล่งน้ำเพื่อการเกษตร", link3d: "https://www.google.com/maps/@17.14500,103.05500,500m/data=!3m1!1e3" }, |
| { name: "วัดป่าศรีคุณาราม", lat: 17.0012, lng: 103.2085, type: "temple", policy: "ทำนุบำรุงศาสนา", link3d: "https://www.google.com/maps/@17.0012,103.2085,500m/data=!3m1!1e3" } |
| ]; |
| |
| function initMap() { |
| if (mapInstance) return; |
| |
| mapInstance = L.map('map').setView([17.12, 103.25], 10); |
| |
| L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>', |
| subdomains: 'abcd', |
| maxZoom: 19 |
| }).addTo(mapInstance); |
| |
| const createIcon = (type) => { |
| let iconClass = 'fa-map-marker-alt'; |
| let colorClass = 'bg-green-700'; |
| |
| if (type === 'market') { iconClass = 'fa-shopping-basket'; colorClass = 'market'; } |
| if (type === 'temple') { iconClass = 'fa-vihara'; colorClass = 'temple'; } |
| |
| return L.divIcon({ |
| className: 'custom-div-icon', |
| html: `<div class="map-pin ${colorClass}"><i class="fas ${iconClass}"></i></div>`, |
| iconSize: [40, 42], |
| iconAnchor: [20, 42], |
| popupAnchor: [0, -45] |
| }); |
| }; |
| |
| mapData.forEach(point => { |
| const marker = L.marker([point.lat, point.lng], { icon: createIcon(point.type) }).addTo(mapInstance); |
| |
| const popupContent = ` |
| <div class="font-sans text-center"> |
| <h3 class="font-bold text-lg text-green-800 mb-1">${point.name}</h3> |
| <p class="text-xs text-gray-500 mb-2">📌 นโยบายที่เกี่ยวข้อง:</p> |
| <div class="bg-green-50 border border-green-200 rounded-lg p-2 mb-3 text-sm font-medium text-green-700"> |
| ${point.policy} |
| </div> |
| <a href="${point.link3d}" target="_blank" class="block w-full bg-blue-600 text-white text-xs font-bold py-2 rounded-lg hover:bg-blue-700 transition shadow-sm"> |
| <i class="fas fa-cube mr-1"></i> ดูมุมมอง 3D (ของจริง) |
| </a> |
| </div> |
| `; |
| marker.bindPopup(popupContent); |
| }); |
| } |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| initMap(); |
| }); |
| |
| |
| |
| async function generateVision() { |
| const village = document.getElementById('vision-village').value; |
| const job = document.getElementById('vision-job').value; |
| const resultDiv = document.getElementById('vision-result'); |
| const btn = document.getElementById('vision-btn'); |
| |
| if (!village || !job) { alert('กรุณากรอกข้อมูลให้ครบก่อนนะครับ'); return; } |
| |
| const originalText = btn.innerHTML; |
| btn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> กำลังสร้างภาพอนาคต...`; |
| btn.disabled = true; |
| resultDiv.classList.add('hidden'); |
| |
| const prompt = `Write a short, inspiring narrative (4-5 sentences, Thai language, mixed with Isan dialect) about a person living in "${village}" working as "${job}" in the year 2029 (end of Lawyer Toto's term). Describe how Lawyer Toto's policies (Land titles, 4-lane roads, debt relief) have specifically improved their life. Tone: Hopeful, Warm, Realistic.`; |
| |
| try { |
| const text = await callGemini(prompt); |
| resultDiv.innerHTML = `<i class="fas fa-quote-left text-purple-300 text-4xl absolute -top-4 -left-2 opacity-50"></i>` + marked.parse(text); |
| resultDiv.classList.remove('hidden'); |
| } catch (e) { |
| alert('เกิดข้อผิดพลาด กรุณาลองใหม่ครับ'); |
| } |
| |
| btn.innerHTML = originalText; |
| btn.disabled = false; |
| } |
| |
| async function generatePoster() { |
| if (!apiKey) { alert("ขออภัยครับ ฟีเจอร์นี้ต้องใช้ API Key"); return; } |
| |
| const promptInput = document.getElementById('poster-prompt').value; |
| const container = document.getElementById('poster-result-container'); |
| const img = document.getElementById('poster-img'); |
| const loading = document.getElementById('poster-loading'); |
| const btn = document.getElementById('poster-btn'); |
| |
| if (!promptInput) { alert('กรุณาบอกแนวคิดโปสเตอร์ก่อนนะครับ'); return; } |
| |
| const originalText = btn.innerHTML; |
| btn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> กำลังวาด...`; |
| btn.disabled = true; |
| container.classList.remove('hidden'); |
| loading.classList.remove('hidden'); |
| |
| |
| const fullPrompt = `A high quality political campaign poster for Lawyer Toto, a Thai politician in Udon Thani. Theme: ${promptInput}. Green and Gold color scheme. Friendly, professional, hopeful atmosphere. Thai rural background context. High resolution, photorealistic or high quality illustration style.`; |
| |
| try { |
| const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| instances: [{ prompt: fullPrompt }], |
| parameters: { sampleCount: 1 } |
| }) |
| }); |
| |
| if (!response.ok) throw new Error('Image Gen Error'); |
| |
| const data = await response.json(); |
| const base64Image = data.predictions[0].bytesBase64Encoded; |
| img.src = `data:image/png;base64,${base64Image}`; |
| |
| } catch (error) { |
| console.error(error); |
| alert("ขออภัยครับ ไม่สามารถสร้างรูปภาพได้ในขณะนี้"); |
| container.classList.add('hidden'); |
| } |
| |
| loading.classList.add('hidden'); |
| btn.innerHTML = originalText; |
| btn.disabled = false; |
| } |
| |
| |
| const systemInstruction = ` |
| You are 'Nong Kla' (น้องกล้า), an AI digital campaign assistant for Thanonan Menasawat (Lawyer Toto), Candidate No. 1, Kla Tham Party, District 6 Udon Thani. |
| Tone: Polite Thai (ends with Krub), helpful, sincere. Can use a bit of Isan dialect. |
| Key Info: Lawyer Toto is the son of former MP Kiatudom Menasawat. |
| Policies: Convert SPK to Title Deed, Debt Relief Fund, 4-Lane Road (Sri That-Wang Sam Mo), Home Lawyer. |
| `; |
| |
| async function callGemini(userPrompt, specificInstruction = null) { |
| if (!apiKey) { return "ขออภัยครับ ระบบ AI กำลังปรับปรุง (กรุณาใส่ API Key)"; } |
| |
| try { |
| const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| contents: [{ parts: [{ text: userPrompt }] }], |
| systemInstruction: { parts: [{ text: specificInstruction || systemInstruction }] } |
| }) |
| }); |
| |
| if (!response.ok) throw new Error('API Error'); |
| const data = await response.json(); |
| return data.candidates[0].content.parts[0].text; |
| } catch (error) { |
| console.error(error); |
| return "ขออภัยครับ มีข้อผิดพลาดในการเชื่อมต่อ"; |
| } |
| } |
| |
| async function sendMessage(e) { |
| e.preventDefault(); |
| const input = document.getElementById('chat-input'); |
| const message = input.value.trim(); |
| if (!message) return; |
| |
| addMessage(message, 'user'); |
| input.value = ''; |
| document.getElementById('send-btn').disabled = true; |
| const loadingId = addLoadingBubble(); |
| const aiResponse = await callGemini(message); |
| removeLoadingBubble(loadingId); |
| addMessage(aiResponse, 'bot'); |
| document.getElementById('send-btn').disabled = false; |
| } |
| |
| function addMessage(text, sender) { |
| const container = document.getElementById('chat-messages'); |
| const msgDiv = document.createElement('div'); |
| msgDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in`; |
| |
| if (sender === 'bot') { |
| const iconDiv = document.createElement('div'); |
| iconDiv.className = "w-8 h-8 bg-kla-main rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold text-sm border border-kla-gold mb-1 shadow-sm mr-2 self-end"; |
| iconDiv.innerHTML = "ก"; |
| msgDiv.appendChild(iconDiv); |
| } |
| |
| const bubble = document.createElement('div'); |
| bubble.className = `max-w-[85%] p-4 rounded-2xl shadow-sm text-sm leading-relaxed ${ |
| sender === 'user' |
| ? 'bg-gradient-to-r from-kla-main to-green-700 text-white rounded-br-none font-medium' |
| : 'bg-white text-gray-800 border border-gray-200 rounded-bl-none' |
| }`; |
| bubble.innerHTML = sender === 'bot' ? marked.parse(text) : text; |
| msgDiv.appendChild(bubble); |
| container.appendChild(msgDiv); |
| container.scrollTop = container.scrollHeight; |
| } |
| |
| function addLoadingBubble() { |
| const container = document.getElementById('chat-messages'); |
| const id = 'loading-' + Date.now(); |
| const msgDiv = document.createElement('div'); |
| msgDiv.id = id; |
| msgDiv.className = "flex justify-start animate-fade-in"; |
| msgDiv.innerHTML = `<div class="w-8 h-8 bg-kla-main rounded-full flex-shrink-0 flex items-center justify-center text-white font-bold text-sm border border-kla-gold mb-1 shadow-sm mr-2 self-end">ก</div><div class="bg-white text-gray-800 border border-gray-200 rounded-2xl rounded-bl-none p-4 shadow-sm"><div class="typing-indicator"><span></span><span></span><span></span></div></div>`; |
| container.appendChild(msgDiv); |
| container.scrollTop = container.scrollHeight; |
| return id; |
| } |
| function removeLoadingBubble(id) { const el = document.getElementById(id); if(el) el.remove(); } |
| |
| async function magicDraft() { |
| const textarea = document.getElementById('complaint-detail'); |
| const userText = textarea.value.trim(); |
| const btn = document.getElementById('magic-btn'); |
| |
| if (!userText) { alert("กรุณาพิมพ์รายละเอียดปัญหาสั้นๆ ก่อนครับ"); return; } |
| |
| const originalBtnText = btn.innerHTML; |
| btn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> กำลังเรียบเรียง...`; |
| btn.disabled = true; |
| |
| const prompt = `Rewrite the following complaint text to be formal, polite, and official (Thai language) suitable for submitting to a lawyer/MP candidate: "${userText}"`; |
| const refinedText = await callGemini(prompt, "You are a professional legal secretary."); |
| |
| if (refinedText) textarea.value = refinedText.replace(/['"]/g, ''); |
| btn.innerHTML = originalBtnText; |
| btn.disabled = false; |
| } |
| |
| |
| function base64ToArrayBuffer(base64) { |
| const binaryString = window.atob(base64); |
| const len = binaryString.length; |
| const bytes = new Uint8Array(len); |
| for (let i = 0; i < len; i++) { |
| bytes[i] = binaryString.charCodeAt(i); |
| } |
| return bytes.buffer; |
| } |
| |
| function createWavHeader(dataLength, sampleRate = 24000) { |
| const buffer = new ArrayBuffer(44); |
| const view = new DataView(buffer); |
| view.setUint8(0, 'R'.charCodeAt(0)); view.setUint8(1, 'I'.charCodeAt(0)); view.setUint8(2, 'F'.charCodeAt(0)); view.setUint8(3, 'F'.charCodeAt(0)); |
| view.setUint32(4, 36 + dataLength, true); |
| view.setUint8(8, 'W'.charCodeAt(0)); view.setUint8(9, 'A'.charCodeAt(0)); view.setUint8(10, 'V'.charCodeAt(0)); view.setUint8(11, 'E'.charCodeAt(0)); |
| view.setUint8(12, 'f'.charCodeAt(0)); view.setUint8(13, 'm'.charCodeAt(0)); view.setUint8(14, 't'.charCodeAt(0)); view.setUint8(15, ' '.charCodeAt(0)); |
| view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true); |
| view.setUint32(24, sampleRate, true); view.setUint32(28, sampleRate * 2, true); |
| view.setUint16(32, 2, true); view.setUint16(34, 16, true); |
| view.setUint8(36, 'd'.charCodeAt(0)); view.setUint8(37, 'a'.charCodeAt(0)); view.setUint8(38, 't'.charCodeAt(0)); view.setUint8(39, 'a'.charCodeAt(0)); |
| view.setUint32(40, dataLength, true); |
| return buffer; |
| } |
| |
| async function playPolicyAudio() { |
| if (!apiKey) { alert("ขออภัยครับ ฟีเจอร์นี้ต้องใช้ API Key"); return; } |
| |
| const btn = document.getElementById('tts-btn'); |
| const loading = document.getElementById('tts-loading'); |
| const audio = document.getElementById('policy-audio'); |
| |
| if (!audio.paused) { |
| audio.pause(); audio.currentTime = 0; |
| btn.querySelector('span').innerText = "ฟังเสียงนโยบาย (AI)"; |
| loading.classList.add('hidden'); |
| return; |
| } |
| |
| btn.disabled = true; |
| loading.classList.remove('hidden'); |
| btn.querySelector('span').innerText = "กำลังสร้างเสียง..."; |
| |
| const policyText = "นโยบายพรรคกล้าธรรม... เปลี่ยน ส.ป.ก. เป็นโฉนดเพื่อการเกษตร ให้พี่น้องใช้ค้ำประกันเงินกู้ได้... แก้หนี้สินเกษตรกร... ขยายถนน 4 เลน เส้นศรีธาตุ-วังสามหมอ... เลือกเบอร์ 1 ธนอนันต์ เมนะสวัสดิ์ ทนายโตโต้"; |
| |
| try { |
| const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| contents: [{ parts: [{ text: policyText }] }], |
| generationConfig: { |
| responseModalities: ["AUDIO"], |
| speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: "Puck" } } } |
| } |
| }) |
| }); |
| |
| if (!response.ok) throw new Error('TTS API Error'); |
| const data = await response.json(); |
| const audioBase64 = data.candidates[0].content.parts[0].inlineData.data; |
| const pcmBuffer = base64ToArrayBuffer(audioBase64); |
| const wavHeader = createWavHeader(pcmBuffer.byteLength); |
| const wavBlob = new Blob([wavHeader, pcmBuffer], { type: 'audio/wav' }); |
| const audioUrl = URL.createObjectURL(wavBlob); |
| |
| audio.src = audioUrl; |
| audio.play(); |
| btn.disabled = false; |
| btn.querySelector('span').innerText = "หยุดฟัง"; |
| audio.onended = () => { |
| btn.querySelector('span').innerText = "ฟังเสียงนโยบาย (AI)"; |
| loading.classList.add('hidden'); |
| }; |
| } catch (error) { |
| console.error(error); |
| alert("เกิดข้อผิดพลาดในการสร้างเสียง"); |
| btn.disabled = false; |
| loading.classList.add('hidden'); |
| } |
| } |
| |
| |
| function submitComplaint(e) { |
| e.preventDefault(); |
| document.getElementById('complaint-form-view').classList.add('hidden'); |
| document.getElementById('complaint-success-view').classList.remove('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| function resetComplaint() { |
| document.getElementById('complaint-form-view').classList.remove('hidden'); |
| document.getElementById('complaint-success-view').classList.add('hidden'); |
| document.querySelector('#complaint-form-view form').reset(); |
| } |
| </script> |
| </body> |
| </html> |
