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