Spaces:

kritsanan
/

instructa

Running

App Files Files Community

kritsanan commited on Dec 8, 2025

Commit

718c240

verified ·

1 Parent(s): 123fa34

Update index.html

Browse files

Files changed (1) hide show

index.html +555 -339

index.html CHANGED Viewed

@@ -2,8 +2,8 @@
 <html lang="th">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Mobile War Room: ธนอนันต์ (เขต 6)</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -23,437 +23,653 @@
     <!-- Font: Noto Sans Thai -->
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;600;800&display=swap" rel="stylesheet">
-    <!-- Icons -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body {
             font-family: 'Noto Sans Thai', sans-serif;
-            background-color: #F3F4F6;
             color: #1F2937;
-            padding-bottom: 80px; /* Space for bottom nav */
-            overscroll-behavior-y: none; /* Prevent pull-to-refresh on mobile if desired */
         }
-        /* Hide scrollbar for clean UI */
-        ::-webkit-scrollbar {
-            width: 0px;
-            background: transparent;
         }
-        .tab-content {
-            display: none;
-            animation: fadeIn 0.3s ease-in-out;
-        }
-        .tab-content.active {
-            display: block;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        .nav-item.active {
-            color: #6A0DAD;
-            font-weight: bold;
         }
-        .nav-item.active i {
-            transform: scale(1.2);
-            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        .card {
-            background: white;
-            border-radius: 1rem;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-            padding: 1rem;
-            margin-bottom: 1rem;
         }
-        .ai-tool-header {
-            cursor: pointer;
-            user-select: none;
         }
-        /* Custom Loader */
         .loader {
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #6A0DAD;
             border-radius: 50%;
-            width: 20px;
-            height: 20px;
             animation: spin 1s linear infinite;
         }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
-<body>
-    <!-- Top Bar -->
-    <header class="fixed top-0 left-0 right-0 bg-gradient-to-r from-purple-800 to-indigo-900 text-white z-50 shadow-md rounded-b-xl">
-        <div class="flex justify-between items-center px-4 py-3">
-            <div class="flex items-center gap-3">
-                <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-purple-800 font-bold border-2 border-yellow-400">
-                    ธ.
-                </div>
-                <div>
-                    <h1 class="text-lg font-bold leading-tight">ธนอนันต์ เมนะสวัสดิ์</h1>
-                    <p class="text-xs text-purple-200">อุดรธานี เขต 6 | พรรคกล้าธรรม</p>
-                </div>
-            </div>
-            <div class="bg-yellow-400 text-purple-900 text-xs font-bold px-2 py-1 rounded">
-                D-90
             </div>
         </div>
     </header>
-    <!-- Spacer for Top Bar -->
-    <div class="h-20"></div>
-    <!-- MAIN CONTENT -->
-    <main class="px-4">
-        <!-- TAB 1: DASHBOARD (HOME) -->
-        <div id="tab-home" class="tab-content active">
-            <!-- Quick Stats -->
-            <div class="grid grid-cols-2 gap-3 mb-4">
-                <div class="card bg-purple-50 border-l-4 border-purple-600 !mb-0">
-                    <p class="text-xs text-gray-500 uppercase">เป้าหมาย</p>
-                    <p class="text-2xl font-bold text-purple-800">42k</p>
-                </div>
-                <div class="card bg-yellow-50 border-l-4 border-yellow-500 !mb-0">
-                    <p class="text-xs text-gray-500 uppercase">New Gen</p>
-                    <p class="text-2xl font-bold text-yellow-600">35%</p>
                 </div>
             </div>
-            <!-- Roadmap -->
-            <div class="card">
-                <h3 class="font-bold text-gray-800 mb-3 flex items-center gap-2">
-                    <i class="fas fa-map-signs text-purple-600"></i> Roadmap 90 วัน
-                </h3>
-                <div class="relative pl-4 border-l-2 border-gray-200 space-y-6">
-                    <div class="relative">
-                        <div class="absolute -left-[21px] top-1 w-3 h-3 bg-gray-400 rounded-full border-2 border-white"></div>
-                        <h4 class="text-sm font-bold text-gray-700">เดือนที่ 1: ปลุกยักษ์</h4>
-                        <p class="text-xs text-gray-500">เปิดตัวเพจ, ยิง Ads, ตั้งศูนย์ประสานงาน</p>
                     </div>
-                    <div class="relative">
-                        <div class="absolute -left-[21px] top-1 w-3 h-3 bg-purple-500 rounded-full border-2 border-white"></div>
-                        <h4 class="text-sm font-bold text-purple-700">เดือนที่ 2: กล้าชน</h4>
-                        <p class="text-xs text-gray-500">ปราศรัยย่อย 20 จุด, TikTok Challenge</p>
                     </div>
-                    <div class="relative">
-                        <div class="absolute -left-[21px] top-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white animate-pulse"></div>
-                        <h4 class="text-sm font-bold text-red-600">เดือนที่ 3: ปิดกล่อง</h4>
-                        <p class="text-xs text-gray-500">ปราศรัยใหญ่, คลิปไวรัลโค้งสุดท้าย</p>
                     </div>
                 </div>
             </div>
-            <!-- Recent Activity / News Feed Mockup -->
-            <div class="card">
-                <h3 class="font-bold text-gray-800 mb-3">📢 อัปเดตล่าสุด</h3>
-                <div class="space-y-3">
-                    <div class="flex gap-3 items-center border-b pb-2 last:border-0">
-                        <div class="w-8 h-8 rounded bg-blue-100 text-blue-600 flex items-center justify-center text-xs"><i class="fab fa-facebook-f"></i></div>
-                        <div class="flex-1">
-                            <p class="text-xs font-semibold">โพสต์: "ลงพื้นที่หนองหาน..."</p>
-                            <p class="text-[10px] text-gray-400">2 ชม. ที่แล้ว • 1.2k Likes</p>
                         </div>
                     </div>
-                    <div class="flex gap-3 items-center border-b pb-2 last:border-0">
-                        <div class="w-8 h-8 rounded bg-black text-white flex items-center justify-center text-xs"><i class="fab fa-tiktok"></i></div>
-                        <div class="flex-1">
-                            <p class="text-xs font-semibold">คลิป: "แก้ท่อแตกไว..."</p>
-                            <p class="text-[10px] text-gray-400">5 ชม. ที่แล้ว • 5.4k Views</p>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- TAB 2: WAR ROOM (STRATEGY) -->
-        <div id="tab-warroom" class="tab-content">
-            <h2 class="text-xl font-bold text-gray-800 mb-4 px-1">📊 ยุทธศาสตร์ดิจิทัล</h2>
-            <!-- Voice Share Chart -->
-            <div class="card">
-                <h4 class="text-sm font-bold text-gray-600 mb-2 text-center">ส่วนแบ่ง Voice Share</h4>
-                <div style="height: 200px;">
-                    <canvas id="mobileSocialChart"></canvas>
                 </div>
             </div>
-            <!-- Platform Strategy Carousel-like -->
-            <div class="space-y-3">
-                <div class="bg-black text-white p-4 rounded-xl flex items-center gap-4 shadow-lg">
-                    <i class="fab fa-tiktok text-3xl"></i>
-                    <div>
-                        <h5 class="font-bold">TikTok: The Real Udon</h5>
-                        <p class="text-xs text-gray-300">คลิปสั้น 30 วิ, ภาษาอีสาน, #ธนอนันต์จัดให้</p>
-                    </div>
-                </div>
-                <div class="bg-green-600 text-white p-4 rounded-xl flex items-center gap-4 shadow-lg">
-                    <i class="fab fa-line text-3xl"></i>
-                    <div>
-                        <h5 class="font-bold">Line OA: Connect</h5>
-                        <p class="text-xs text-green-100">แจ้งข่าวชาวบ้าน, CRM หัวคะแนน</p>
                     </div>
                 </div>
-                <div class="bg-blue-600 text-white p-4 rounded-xl flex items-center gap-4 shadow-lg">
-                    <i class="fab fa-facebook text-3xl"></i>
-                    <div>
-                        <h5 class="font-bold">Facebook: Official</h5>
-                        <p class="text-xs text-blue-100">Live งานบุญ, โชว์ผลงาน ก่อน/หลัง</p>
                     </div>
                 </div>
-            </div>
-            <!-- Competitor Radar -->
-            <div class="card mt-4">
-                <h4 class="text-sm font-bold text-gray-600 mb-2 text-center">เทียบฟอร์มคู่แข่ง (SWOT)</h4>
-                <div style="height: 250px;">
-                    <canvas id="mobileRadarChart"></canvas>
-                </div>
             </div>
-        </div>
-        <!-- TAB 3: AI ASSISTANT (TOOLS) -->
-        <div id="tab-ai" class="tab-content">
-            <div class="flex items-center justify-between mb-4 px-1">
-                <h2 class="text-xl font-bold text-gray-800">🤖 AI Partner</h2>
-                <span class="text-[10px] bg-purple-100 text-purple-700 px-2 py-1 rounded-full border border-purple-200">Gemini Inside</span>
             </div>
-            <!-- Tool 1: Caption -->
-            <div class="card group">
-                <div class="ai-tool-header flex justify-between items-center" onclick="toggleTool('tool-caption')">
-                    <div class="flex items-center gap-3">
-                        <div class="w-8 h-8 rounded bg-gradient-to-br from-pink-500 to-orange-400 text-white flex items-center justify-center"><i class="fas fa-pen-nib"></i></div>
-                        <h3 class="font-bold text-gray-700">เขียนแคปชั่น</h3>
                     </div>
-                    <i class="fas fa-chevron-down text-gray-400 transition-transform group-open:rotate-180"></i>
                 </div>
-                <div id="tool-caption" class="hidden mt-4 pt-4 border-t">
-                    <input type="text" id="mCaptionTopic" class="w-full text-sm border-gray-300 border rounded-lg p-2 bg-gray-50 mb-2" placeholder="หัวข้อ (เช่น น้ำท่วม)...">
-                    <select id="mCaptionPlatform" class="w-full text-sm border-gray-300 border rounded-lg p-2 bg-gray-50 mb-3">
-                        <option value="TikTok">TikTok (วัยรุ่น)</option>
-                        <option value="Facebook">Facebook (ทางการ)</option>
-                        <option value="Line">Line (ชาวบ้าน)</option>
-                    </select>
-                    <button id="btnMCaption" class="w-full bg-purple-600 text-white rounded-lg py-2 text-sm font-bold shadow hover:bg-purple-700 transition">✨ สร้างทันที</button>
-                    <div id="outMCaption" class="mt-3 p-3 bg-purple-50 rounded-lg text-xs text-gray-700 hidden"></div>
                 </div>
             </div>
-            <!-- Tool 2: Crisis -->
-            <div class="card group">
-                <div class="ai-tool-header flex justify-between items-center" onclick="toggleTool('tool-crisis')">
-                    <div class="flex items-center gap-3">
-                        <div class="w-8 h-8 rounded bg-gradient-to-br from-red-600 to-red-400 text-white flex items-center justify-center"><i class="fas fa-shield-alt"></i></div>
-                        <h3 class="font-bold text-gray-700">แก้เกม/ดราม่า</h3>
-                    </div>
-                    <i class="fas fa-chevron-down text-gray-400"></i>
                 </div>
-                <div id="tool-crisis" class="hidden mt-4 pt-4 border-t">
-                    <textarea id="mCrisisInput" rows="2" class="w-full text-sm border-gray-300 border rounded-lg p-2 bg-gray-50 mb-3" placeholder="เกิดเรื่องอะไรขึ้น?"></textarea>
-                    <button id="btnMCrisis" class="w-full bg-gray-800 text-white rounded-lg py-2 text-sm font-bold shadow hover:bg-gray-900 transition">🛡️ ขอแผนรับมือ</button>
-                    <div id="outMCrisis" class="mt-3 p-3 bg-gray-100 rounded-lg text-xs text-gray-700 hidden"></div>
                 </div>
-            </div>
-            <!-- Tool 3: Policy Translator -->
-            <div class="card group">
-                <div class="ai-tool-header flex justify-between items-center" onclick="toggleTool('tool-policy')">
-                    <div class="flex items-center gap-3">
-                        <div class="w-8 h-8 rounded bg-gradient-to-br from-yellow-500 to-yellow-300 text-white flex items-center justify-center"><i class="fas fa-language"></i></div>
-                        <h3 class="font-bold text-gray-700">แปลนโยบาย</h3>
-                    </div>
-                    <i class="fas fa-chevron-down text-gray-400"></i>
-                </div>
-                <div id="tool-policy" class="hidden mt-4 pt-4 border-t">
-                    <textarea id="mPolicyInput" rows="2" class="w-full text-sm border-gray-300 border rounded-lg p-2 bg-gray-50 mb-2" placeholder="นโยบายภาษาราชการ..."></textarea>
-                    <select id="mPolicyTarget" class="w-full text-sm border-gray-300 border rounded-lg p-2 bg-gray-50 mb-3">
-                        <option value="ผู้เฒ่าผู้แก่">คนเฒ่าคนแก่ (อีสาน)</option>
-                        <option value="วัยรุ่น">วัยรุ่น (สั้นๆ)</option>
-                    </select>
-                    <button id="btnMPolicy" class="w-full bg-yellow-500 text-white rounded-lg py-2 text-sm font-bold shadow hover:bg-yellow-600 transition">🗣️ แปลงภาษา</button>
-                    <div id="outMPolicy" class="mt-3 p-3 bg-yellow-50 rounded-lg text-xs text-gray-800 hidden border border-yellow-200"></div>
                 </div>
             </div>
-        </div>
     </main>
-    <!-- Bottom Navigation -->
-    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 pb-safe pt-2 px-6 flex justify-between items-center z-50 h-[70px]">
-        <button onclick="switchTab('tab-home')" class="nav-item active flex flex-col items-center gap-1 text-gray-400 w-16">
-            <i class="fas fa-home text-xl"></i>
-            <span class="text-[10px]">หน้าหลัก</span>
-        </button>
-        <button onclick="switchTab('tab-warroom')" class="nav-item flex flex-col items-center gap-1 text-gray-400 w-16">
-            <i class="fas fa-chess-knight text-xl"></i>
-            <span class="text-[10px]">กลยุทธ์</span>
-        </button>
-        <button onclick="switchTab('tab-ai')" class="nav-item flex flex-col items-center gap-1 text-gray-400 w-16">
-            <div class="bg-gradient-to-tr from-purple-600 to-indigo-600 w-10 h-10 rounded-full flex items-center justify-center text-white shadow-lg -mt-6 border-4 border-gray-100">
-                <i class="fas fa-robot text-lg"></i>
-            </div>
-            <span class="text-[10px] mt-1 text-purple-700 font-bold">AI Helper</span>
-        </button>
-        <button onclick="alert('Coming Soon: ข้อมูลคู่แข่งและพื้นที่')" class="nav-item flex flex-col items-center gap-1 text-gray-400 w-16">
-            <i class="fas fa-map-marked-alt text-xl"></i>
-            <span class="text-[10px]">พื้นที่</span>
-        </button>
-    </nav>
-    <!-- JAVASCRIPT -->
     <script type="module">
         import { GoogleGenerativeAI } from "@google/generative-ai";
-        // --- API KEY ---
-        const apiKey = "AIzaSyBlvdz3wUNm2PtiuYnN2al9L7krngami-E";
         const genAI = new GoogleGenerativeAI(apiKey);
         const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" });
-        // --- UI UTILS ---
-        window.switchTab = function(tabId) {
-            // Hide all tabs
-            document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
-            // Show target tab
-            document.getElementById(tabId).classList.add('active');
-            // Update Nav Icons
-            document.querySelectorAll('.nav-item').forEach(el => {
-                el.classList.remove('active', 'text-purple-800');
-                el.classList.add('text-gray-400');
-            });
-            // Find the button that triggered this (rough approximation based on onclick)
-            const activeBtn = Array.from(document.querySelectorAll('.nav-item')).find(btn => btn.getAttribute('onclick').includes(tabId));
-            if(activeBtn) {
-                activeBtn.classList.remove('text-gray-400');
-                activeBtn.classList.add('active', 'text-purple-800');
             }
         }
-        window.toggleTool = function(toolId) {
-            const el = document.getElementById(toolId);
-            el.classList.toggle('hidden');
-        }
-        async function runAI(btnId, outId, prompt, loadingText="กำลังคิด...") {
-            const btn = document.getElementById(btnId);
-            const out = document.getElementById(outId);
-            const originalText = btn.innerHTML;
-            btn.disabled = true;
-            btn.innerHTML = `<span class="loader inline-block border-white/50 border-t-white" style="width:14px;height:14px;"></span> ${loadingText}`;
-            out.classList.remove('hidden');
-            out.innerText = "Waiting for AI...";
             try {
                 const result = await model.generateContent(prompt);
-                out.innerHTML = result.response.text().replace(/\n/g, '<br>');
             } catch (error) {
-                out.innerText = "Error: " + error.message;
             } finally {
-                btn.disabled = false;
-                btn.innerHTML = originalText;
             }
-        }
-        // --- AI FEATURES ---
-        // 1. Caption
-        document.getElementById('btnMCaption').addEventListener('click', () => {
-            const topic = document.getElementById('mCaptionTopic').value;
-            const platform = document.getElementById('mCaptionPlatform').value;
-            if(!topic) return alert('ใส่หัวข้อก่อนครับ');
-            const prompt = `Write a political campaign caption for ${platform}.
-            Candidate: Thanon Anant (Kla Tham Party, Udon Thani).
-            Topic: ${topic}.
-            Style: Sincere, Local (Thai Isan if appropriate), Action-oriented.
-            Include hashtags.`;
-            runAI('btnMCaption', 'outMCaption', prompt);
         });
-        // 2. Crisis
-        document.getElementById('btnMCrisis').addEventListener('click', () => {
-            const input = document.getElementById('mCrisisInput').value;
-            if(!input) return alert('เกิดเรื่องอะไรครับ?');
-            const prompt = `Crisis Management Strategy for Candidate Thanon Anant.
-            Incident: ${input}.
-            Provide 3 bullet points on how to respond immediately to protect vote base.`;
-            runAI('btnMCrisis', 'outMCrisis', prompt, "กำลังวางแผน...");
         });
-        // 3. Policy
-        document.getElementById('btnMPolicy').addEventListener('click', () => {
-            const input = document.getElementById('mPolicyInput').value;
-            const target = document.getElementById('mPolicyTarget').value;
-            if(!input) return alert('ใส่นโยบายครับ');
-            const prompt = `Translate this formal policy into simple Thai spoken language for ${target}: "${input}".
-            Make it catchy and emotional.`;
-            runAI('btnMPolicy', 'outMPolicy', prompt, "กำลังแปล...");
         });
-        // --- CHARTS (Init when page loads) ---
-        // We delay slightly to ensure DOM is ready or Tab is rendered (though Chart.js works in hidden tabs usually)
-        setTimeout(() => {
-            // Social Chart
-            new Chart(document.getElementById('mobileSocialChart'), {
-                type: 'doughnut',
-                data: {
-                    labels: ['TikTok', 'FB', 'Line', 'Other'],
-                    datasets: [{
-                        data: [45, 30, 20, 5],
-                        backgroundColor: ['#000000', '#1877F2', '#00B900', '#FF0000'],
-                        borderWidth: 0
-                    }]
-                },
-                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { boxWidth: 10, font: { size: 10 } } } } }
-            });
-            // Radar Chart
-            new Chart(document.getElementById('mobileRadarChart'), {
-                type: 'radar',
-                data: {
-                    labels: ['ความนิยม', 'นโยบาย', 'กระแส', 'ทีมงาน', 'งบ'],
-                    datasets: [{
-                        label: 'เรา (ธนอนันต์)',
-                        data: [75, 95, 70, 85, 90],
-                        borderColor: '#6A0DAD',
-                        backgroundColor: 'rgba(106, 13, 173, 0.2)',
-                        pointRadius: 2
-                    }, {
-                        label: 'คู่แข่ง',
-                        data: [90, 70, 85, 80, 80],
-                        borderColor: '#FF0000',
-                        backgroundColor: 'rgba(255, 0, 0, 0.05)',
-                        borderDash: [5, 5],
-                        pointRadius: 0
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: { r: { suggestedMin: 0, ticks: { display: false } } },
-                    plugins: { legend: { position: 'bottom' } }
-                }
-            });
-        }, 500);
     </script>
 </body>
 </html>

 <html lang="th">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ยุทธศาสตร์เลือกตั้ง 2569: ธนอนันต์ เมนะสวัสดิ์ (อุดรฯ เขต 6)</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- Font: Noto Sans Thai -->
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <!-- Palette: Kla Tham Party Theme (Purple/Gold/Bold)
+         Primary: #6A0DAD (Purple)
+         Secondary: #FFD700 (Gold)
+         Accent: #FF4500 (Orange Red - Action)
+    -->
     <style>
         body {
             font-family: 'Noto Sans Thai', sans-serif;
+            background-color: #F8F7FF; /* Light Purple Tint */
             color: #1F2937;
         }
+        .chart-container {
+            position: relative;
+            width: 100%;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            height: 350px;
+            max-height: 400px;
         }
+        @media (min-width: 768px) {
+            .chart-container {
+                height: 400px;
+            }
         }
+        .info-card {
+            background-color: white;
+            border-radius: 0.75rem;
+            box-shadow: 0 4px 6px -1px rgba(106, 13, 173, 0.1), 0 2px 4px -1px rgba(106, 13, 173, 0.06);
+            padding: 1.5rem;
+            transition: transform 0.2s;
+            border-top: 4px solid transparent;
         }
+        .info-card:hover {
+            transform: translateY(-2px);
+            border-top-color: #6A0DAD;
+            box-shadow: 0 10px 15px -3px rgba(106, 13, 173, 0.15), 0 4px 6px -2px rgba(106, 13, 173, 0.1);
         }
+        .timeline-dot {
+            width: 16px;
+            height: 16px;
+            background-color: #6A0DAD;
+            border-radius: 50%;
+            border: 3px solid #fff;
+            box-shadow: 0 0 0 2px #6A0DAD;
         }
         .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #6A0DAD;
             border-radius: 50%;
+            width: 24px;
+            height: 24px;
             animation: spin 1s linear infinite;
+            display: inline-block;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        /* Platform Icons */
+        .icon-tiktok { color: #000000; }
+        .icon-line { color: #00B900; }
+        .icon-fb { color: #1877F2; }
     </style>
 </head>
+<body class="bg-gray-100">
+    <!-- Header Section -->
+    <header class="bg-gradient-to-r from-purple-800 via-purple-700 to-indigo-900 text-white py-12 px-4 shadow-xl">
+        <div class="max-w-6xl mx-auto text-center">
+            <div class="inline-block bg-white text-purple-900 px-4 py-1 rounded-full text-sm font-bold mb-4 tracking-wide shadow-md">
+                ROADMAP TO VICTORY 2026 (2569)
             </div>
+            <h1 class="text-4xl md:text-6xl font-extrabold mb-2 tracking-tight">ธนอนันต์ เมนะสวัสดิ์</h1>
+            <h2 class="text-2xl md:text-3xl font-light opacity-90">พรรคกล้าธรรม | อุดรธานี เขต 6</h2>
+            <p class="mt-6 text-lg max-w-3xl mx-auto text-purple-100">
+                "สานต่อตำนาน เมนะสวัสดิ์ - กล้าทำจริง เพื่อพี่น้องอุดรฯ" <br>
+                ยุทธศาสตร์ผสมผสานฐานเสียงดั้งเดิม + พลังโซเชียลมีเดียยุคใหม่
+            </p>
         </div>
     </header>
+    <main class="max-w-7xl mx-auto p-4 md:p-8 space-y-12">
+        <!-- Intro Stats Row -->
+        <section class="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <div class="info-card border-l-8 border-purple-600 text-center">
+                <div class="text-gray-500 font-bold uppercase text-xs tracking-wider">เป้าหมายคะแนน</div>
+                <div class="text-4xl font-extrabold text-purple-700 mt-2">42,000+</div>
+                <div class="text-gray-600 text-sm mt-1">คะแนนเสียง</div>
+            </div>
+            <div class="info-card border-l-8 border-yellow-500 text-center">
+                <div class="text-gray-500 font-bold uppercase text-xs tracking-wider">กลุ่มเป้าหมายหลัก</div>
+                <div class="text-4xl font-extrabold text-yellow-600 mt-2">New Gen</div>
+                <div class="text-gray-600 text-sm mt-1">อายุ 18-35 ปี (35%)</div>
+            </div>
+            <div class="info-card border-l-8 border-indigo-500 text-center">
+                <div class="text-gray-500 font-bold uppercase text-xs tracking-wider">ฐานเสียงเดิม</div>
+                <div class="text-4xl font-extrabold text-indigo-600 mt-2">Family</div>
+                <div class="text-gray-600 text-sm mt-1">ตระกูลเมนะสวัสดิ์</div>
+            </div>
+             <div class="info-card border-l-8 border-pink-500 text-center">
+                <div class="text-gray-500 font-bold uppercase text-xs tracking-wider">งบดิจิทัล</div>
+                <div class="text-4xl font-extrabold text-pink-600 mt-2">40%</div>
+                <div class="text-gray-600 text-sm mt-1">ของงบทั้งหมด</div>
+            </div>
+        </section>
+        <!-- Digital War Room Strategy -->
+        <section id="digital-war-room" class="bg-white rounded-2xl shadow-xl overflow-hidden border border-purple-100">
+            <div class="bg-gray-900 text-white p-6 border-b-4 border-purple-500 flex justify-between items-center flex-wrap gap-4">
+                <div>
+                    <h3 class="text-2xl font-bold flex items-center gap-2">
+                        📱 Digital War Room 2026
+                    </h3>
+                    <p class="text-gray-400 text-sm mt-1">ยุทธศาสตร์เจาะลึกโซเชียลมีเดียรายแพลตฟอร์ม สำหรับ "ธนอนันต์"</p>
                 </div>
+                <span class="bg-purple-600 px-3 py-1 rounded text-xs font-bold animate-pulse">LIVE MONITORING</span>
             </div>
+            <div class="p-6 md:p-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Left: Platform Strategy -->
+                <div class="space-y-6">
+                    <h4 class="font-bold text-gray-800 text-lg border-b pb-2">🎯 กลยุทธ์แยกแพลตฟอร์ม (Platform Specifics)</h4>
+                    <!-- TikTok -->
+                    <div class="flex gap-4 items-start p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition">
+                        <div class="bg-black text-white p-3 rounded-lg text-2xl">🎵</div>
+                        <div>
+                            <h5 class="font-bold text-gray-900">TikTok: "The Real Udon"</h5>
+                            <p class="text-sm text-gray-600 mt-1">
+                                <strong>Target:</strong> First Voters & วัยทำงาน<br>
+                                <strong>Concept:</strong> "เข้าถึงง่าย ไม่ถือตัว"<br>
+                                <strong>Action:</strong> คลิปสั้น 30 วิฯ โชว์แก้ปัญหาหน้างานจริง (เช่น ท่อแตก ถนนพัง ไปดูทันที) ใช้ภาษาอีสาน 100% ดันแฮชแท็ก #ธนอนันต์จัดให้ #กล้าธรรมอุดร
+                            </p>
+                        </div>
                     </div>
+                    <!-- Line OA -->
+                    <div class="flex gap-4 items-start p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition">
+                        <div class="bg-green-500 text-white p-3 rounded-lg text-2xl">💬</div>
+                        <div>
+                            <h5 class="font-bold text-gray-900">Line OA: "Menasawat Connect"</h5>
+                            <p class="text-sm text-gray-600 mt-1">
+                                <strong>Target:</strong> หัวคะแนนธรรมชาติ & ผู้นำชุมชน<br>
+                                <strong>Concept:</strong> "สายตรง แก้ไว"<br>
+                                <strong>Action:</strong> ระบบ CRM แจ้งข่าวนโยบายพรรคกล้าธรรม แบ่งกลุ่มบรอดแคสต์ (ชาวนา/ค้าขาย/ข้าราชการ) ส่งสวัสดีตอนเช้าพร้อมรูปภารกิจจริง
+                            </p>
+                        </div>
                     </div>
+                    <!-- Facebook -->
+                    <div class="flex gap-4 items-start p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition">
+                        <div class="bg-blue-600 text-white p-3 rounded-lg text-2xl">f</div>
+                        <div>
+                            <h5 class="font-bold text-gray-900">Facebook Page: "Official Voice"</h5>
+                            <p class="text-sm text-gray-600 mt-1">
+                                <strong>Target:</strong> ฐานเสียงเดิม & ผู้ใหญ่บ้าน<br>
+                                <strong>Concept:</strong> "งานหนัก งานจริง"<br>
+                                <strong>Action:</strong> Live Stream งานบุญประเพณี โชว์วิสัยทัศน์ยาวๆ และอัลบั้มรูป "ก่อนทำ-หลังทำ" เน้นผลงานพรรคกล้าธรรม
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Right: Chart & Timeline -->
+                <div class="space-y-6">
+                    <h4 class="font-bold text-gray-800 text-lg border-b pb-2">📊 ส่วนแบ่งการสื่อสาร (Voice Share Targets)</h4>
+                    <div class="chart-container" style="height: 250px;">
+                        <canvas id="socialChart"></canvas>
+                    </div>
+                    <div class="bg-purple-50 p-4 rounded-xl border border-purple-200 mt-4">
+                        <h5 class="font-bold text-purple-800 text-sm mb-2">💡 Insight ปี 2569:</h5>
+                        <p class="text-xs text-purple-700">
+                            "การเลือกตั้งปี 69 AI จะมีบทบาทสูงในการสร้างเฟคนิวส์ (Deepfake) ทีมงานต้องมีหน่วย 'Fact Check' ที่ตอบโต้ได้ภายใน 1 ชม. ผ่าน Line OA และ TikTok Reply"
+                        </p>
                     </div>
                 </div>
             </div>
+        </section>
+        <!-- AI Strategic Partner Section 1 -->
+        <section class="bg-gradient-to-br from-indigo-900 to-purple-800 rounded-2xl p-8 text-white shadow-xl relative overflow-hidden">
+            <div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 rounded-full bg-white opacity-5"></div>
+            <div class="mb-8 border-b border-purple-400 pb-4 relative z-10">
+                <h3 class="text-3xl font-bold text-white flex items-center gap-3">
+                    🤖 AI Strategic Partner <span class="text-sm bg-yellow-500 text-black px-2 py-1 rounded font-bold">GEMINI INTEGRATED</span>
+                </h3>
+                <p class="text-purple-200 mt-2">
+                    ผู้ช่วยวางแผนสำหรับ "ธนอนันต์" โดยเฉพาะ: เขียนแคปชั่นและแก้เกมการเมือง
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
+                <!-- Feature 1: Social Media Caption Creator -->
+                <div class="bg-white text-gray-800 rounded-xl p-6 shadow-lg">
+                    <h4 class="text-xl font-bold text-purple-800 mb-4 flex items-center">
+                        ✍️ ผู้ช่วยเขียนแคปชั่น (Caption Generator)
+                    </h4>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-semibold text-gray-700 mb-1">หัวข้อคอนเทนต์ (Topic)</label>
+                            <input type="text" id="captionTopic" class="w-full border-gray-300 border rounded-md p-2 bg-gray-50" placeholder="เช่น ลงพื้นที่น้ำท่วม, งานบุญบั้งไฟ...">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-semibold text-gray-700 mb-1">แพลตฟอร์ม (Platform)</label>
+                            <select id="captionPlatform" class="w-full border-gray-300 border rounded-md p-2 bg-gray-50">
+                                <option value="TikTok">TikTok (สั้น สนุก กันเอง)</option>
+                                <option value="Facebook">Facebook (ทางการ น่าเชื่อถือ)</option>
+                                <option value="Line Official">Line OA (ใส่ใจ แจ้งข่าว)</option>
+                            </select>
                         </div>
+                        <button id="btnGenerateCaption" class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-bold py-2 px-4 rounded-md transition flex justify-center items-center gap-2">
+                            <span>✨ สร้างแคปชั่นสไตล์ "กล้าธรรม"</span>
+                        </button>
                     </div>
+                    <div id="captionOutput" class="mt-4 p-4 bg-purple-50 rounded-md border border-purple-200 min-h-[100px] text-sm text-gray-700 whitespace-pre-wrap hidden"></div>
+                </div>
+                <!-- Feature 2: Crisis Strategy -->
+                <div class="bg-white text-gray-800 rounded-xl p-6 shadow-lg">
+                    <h4 class="text-xl font-bold text-purple-800 mb-4 flex items-center">
+                        🛡️ ที่ปรึกษาแก้เกม (Crisis Advisor)
+                    </h4>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-semibold text-gray-700 mb-1">ประเด็นโจมตี/ดราม่า</label>
+                            <textarea id="crisisInput" rows="3" class="w-full border-gray-300 border rounded-md p-2 bg-gray-50" placeholder="เช่น โดนกล่าวหาว่าซื้อเสียง, นโยบายพรรคทำไม่ได้จริง..."></textarea>
                         </div>
+                        <button id="btnGenerateStrategy" class="w-full bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-md transition flex justify-center items-center gap-2">
+                            <span>✨ ขอคำแนะนำแก้เกม</span>
+                        </button>
                     </div>
+                    <div id="strategyOutput" class="mt-4 p-4 bg-gray-50 rounded-md border border-gray-200 min-h-[100px] text-sm text-gray-700 whitespace-pre-wrap hidden"></div>
                 </div>
             </div>
+        </section>
+        <!-- New Section: AI Debate & Policy Lab -->
+        <section class="bg-gray-800 rounded-2xl p-8 text-white shadow-xl relative border-t-4 border-yellow-500">
+            <div class="mb-8 relative z-10 flex justify-between items-center">
+                <div>
+                    <h3 class="text-3xl font-bold text-yellow-400 flex items-center gap-3">
+                        🗳️ AI Debate & Policy Lab
+                    </h3>
+                    <p class="text-gray-300 mt-2">
+                        ห้องปฏิบัติการนโยบายและฝึกซ้อมดีเบต: เตรียมพร้อมรับมือทุกคำถามและเข้าถึงทุกกลุ่มเป้าหมาย
+                    </p>
                 </div>
+                <div class="hidden md:block text-5xl opacity-20">🎙️</div>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Feature 3: Debate Simulator -->
+                <div class="bg-gray-700 rounded-xl p-6 border border-gray-600">
+                    <h4 class="text-xl font-bold text-white mb-4 flex items-center">
+                        🗣️ ห้องซ้อมดีเบต (Debate Simulator)
+                    </h4>
+                    <p class="text-xs text-gray-400 mb-4">AI จะสวมบทเป็นฝ่ายค้านเพื่อตั้งคำถามเจาะใจดำคุณ</p>
+                    <div class="space-y-4">
+                        <select id="debateTopic" class="w-full bg-gray-800 border border-gray-600 rounded p-2 text-white">
+                            <option value="ราคาพืชผลการเกษตร">ราคาพืชผลการเกษตร</option>
+                            <option value="ปัญหาที่ดิน ส.ป.ก.">ปัญหาที่ดิน ส.ป.ก.</option>
+                            <option value="ยาเสพติดในชุมชน">ยาเสพติดในชุมชน</option>
+                            <option value="การพัฒนาแหล่งน้ำ">การพัฒนาแหล่งน้ำ</option>
+                        </select>
+                        <button id="btnStartDebate" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition">
+                            👊 เริ่มการท้าดวล (ให้ AI ตั้งคำถาม)
+                        </button>
+                        <div id="debateQuestionSection" class="hidden animate-in fade-in slide-in-from-top-4 duration-300">
+                            <div class="p-3 bg-red-900/50 border-l-4 border-red-500 text-red-100 italic mb-2" id="debateQuestionText">
+                                <!-- Question goes here -->
+                            </div>
+                            <textarea id="debateAnswer" rows="3" class="w-full bg-gray-800 border border-gray-600 rounded p-2 text-white" placeholder="พิมพ์คำตอบของคุณที่นี่..."></textarea>
+                            <button id="btnGradeAnswer" class="mt-2 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition">
+                                ✅ ตรวจคำตอบ
+                            </button>
+                        </div>
+                        <div id="debateFeedback" class="hidden p-4 bg-gray-900 rounded border border-gray-700 text-sm whitespace-pre-wrap text-gray-300"></div>
                     </div>
                 </div>
+                <!-- Feature 4: Policy Localizer -->
+                <div class="bg-gray-700 rounded-xl p-6 border border-gray-600">
+                    <h4 class="text-xl font-bold text-white mb-4 flex items-center">
+                        📢 เครื่องแปลนโยบายฉบับชาวบ้าน (Policy Localizer)
+                    </h4>
+                    <p class="text-xs text-gray-400 mb-4">แปลงภาษาราชการยากๆ ให้เป็นภาษาพูดที่กินใจตามกลุ่มเป้าหมาย</p>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="text-sm text-gray-300">ใส่นโยบาย (ภาษาราชการ/ทางการ)</label>
+                            <textarea id="policyInput" rows="2" class="w-full bg-gray-800 border border-gray-600 rounded p-2 text-white" placeholder="เช่น จัดตั้งกองทุนพัฒนาหมู่บ้านละ 2 ล้านบาท เพื่อส่งเสริมวิสาหกิจชุมชน..."></textarea>
+                        </div>
+                        <div>
+                            <label class="text-sm text-gray-300">แปลงสารให้ใครฟัง?</label>
+                            <select id="policyTarget" class="w-full bg-gray-800 border border-gray-600 rounded p-2 text-white">
+                                <option value="ผู้เฒ่าผู้แก่ (ภาษาอีสาน จริงใจ)">ผู้เฒ่าผู้แก่ (ภาษาอีสาน)</option>
+                                <option value="วัยรุ่น (สั้น กระชับ ทันสมัย)">วัยรุ่น First Voter</option>
+                                <option value="พ่อค้าแม่ค้า (เน้นกำไร ปากท้อง)">พ่อค้าแม่ค้า</option>
+                            </select>
+                        </div>
+                        <button id="btnTranslatePolicy" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded transition">
+                            ✨ แปลงเป็นภาษาโดนใจ
+                        </button>
                     </div>
+                     <div id="policyOutput" class="hidden mt-4 p-4 bg-gray-900 rounded border border-gray-700 text-sm whitespace-pre-wrap text-yellow-100 font-medium"></div>
                 </div>
             </div>
+        </section>
+        <!-- Competitor Analysis -->
+        <section>
+            <div class="mb-6 border-b-2 border-purple-200 pb-4">
+                <h3 class="text-3xl font-bold text-gray-800">⚡ วิเคราะห์จุดแข็ง-จุดอ่อน (SWOT)</h3>
+                <p class="text-gray-600 mt-2">
+                    เปรียบเทียบศักยภาพ "ธนอนันต์ (กล้าธรรม)" vs "เจ้าของพื้นที่เดิม" vs "กระแสพรรคประชาชน"
+                </p>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="info-card">
+                    <h4 class="text-xl font-bold text-gray-700 mb-4 text-center">สมรภูมิความนิยม (Radar Chart)</h4>
+                    <div class="chart-container">
+                        <canvas id="radarChart"></canvas>
                     </div>
                 </div>
+                <div class="info-card flex flex-col justify-center bg-purple-50">
+                    <h4 class="text-xl font-bold text-purple-800 mb-4">จุดยุทธศาสตร์ของ ธนอนันต์:</h4>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <span class="text-2xl mr-3">🏛️</span>
+                            <div>
+                                <strong class="text-gray-900">ฐานเสียงตระกูล (Legacy):</strong>
+                                <span class="text-gray-600 text-sm block">ชื่อชั้น "เมนะสวัสดิ์" ยังขลังในกลุ่มผู้สูงอายุ ต้องรักษาไว้ห้ามหลุด</span>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-2xl mr-3">🚜</span>
+                            <div>
+                                <strong class="text-gray-900">นโยบายกล้าธรรม (Policy):</strong>
+                                <span class="text-gray-600 text-sm block">ชูจุดขาย "เปลี่ยนที่ ส.ป.ก. เป็นโฉนด" และ "น้ำแก้จน" ซึ่งโดนใจคนพื้นที่อุดรฯ เขต 6 มากที่สุด</span>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-2xl mr-3">📲</span>
+                            <div>
+                                <strong class="text-gray-900">Digital Gap (ช่องว่าง):</strong>
+                                <span class="text-gray-600 text-sm block">คู่แข่งแชมป์เก่ายังอ่อนเรื่อง TikTok นี่คือโอกาสเจาะกลุ่ม Young Voter 18-25 ปี</span>
+                            </div>
+                        </li>
+                    </ul>
                 </div>
             </div>
+        </section>
+        <!-- Timeline Roadmap -->
+         <section class="bg-white p-6 rounded-2xl shadow-lg border-t-4 border-purple-600">
+            <h3 class="text-2xl font-bold text-gray-800 mb-6">📅 ปฏิทินปฏิบัติการ 90 วันก่อนเลือกตั้ง (2569)</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- Phase 1 -->
+                <div class="relative pl-6 border-l-4 border-gray-200">
+                    <div class="absolute -left-[10px] top-0 timeline-dot bg-gray-300"></div>
+                    <h4 class="font-bold text-lg text-gray-700">เดือนที่ 1: "ปลุกยักษ์"</h4>
+                    <span class="text-xs font-semibold bg-gray-200 text-gray-600 px-2 py-1 rounded">Awareness</span>
+                    <ul class="mt-3 text-sm text-gray-600 space-y-2 list-disc list-inside">
+                        <li>เปิดตัวเพจ "ธนอนันต์ อุดรยุคใหม่"</li>
+                        <li>ยิง Ads แนะนำตัวเจาะรายตำบล</li>
+                        <li>เปิดศูนย์ประสานงานพรรคกล้าธรรม</li>
+                    </ul>
                 </div>
+                <!-- Phase 2 -->
+                <div class="relative pl-6 border-l-4 border-purple-300">
+                    <div class="absolute -left-[10px] top-0 timeline-dot bg-purple-400"></div>
+                    <h4 class="font-bold text-lg text-purple-800">เดือนที่ 2: "กล้าชน"</h4>
+                    <span class="text-xs font-semibold bg-purple-100 text-purple-600 px-2 py-1 rounded">Engagement</span>
+                    <ul class="mt-3 text-sm text-gray-600 space-y-2 list-disc list-inside">
+                        <li>เปิดเวทีปราศรัยย่อย 20 จุด</li>
+                        <li>Challenge TikTok "ปัญหาบ้านเฮา"</li>
+                        <li>ระดม อสม. เคาะประตูบ้าน</li>
+                    </ul>
                 </div>
+                <!-- Phase 3 -->
+                <div class="relative pl-6 border-l-4 border-purple-600">
+                    <div class="absolute -left-[10px] top-0 timeline-dot bg-purple-700 animate-pulse"></div>
+                    <h4 class="font-bold text-lg text-purple-900">เดือนที่ 3: "ปิดกล่อง"</h4>
+                    <span class="text-xs font-semibold bg-purple-600 text-white px-2 py-1 rounded">Conversion</span>
+                    <ul class="mt-3 text-sm text-gray-600 space-y-2 list-disc list-inside">
+                        <li>ปราศรัยใหญ่ นำโดยหัวหน้าพรรค</li>
+                        <li>ปล่อยคลิปไวรัลโค้งสุดท้าย</li>
+                        <li>SMS/Line ย้ำเบอร์เช้าวันเลือกตั้ง</li>
+                    </ul>
                 </div>
             </div>
+        </section>
+        <!-- Footer -->
+        <footer class="text-center py-8 text-gray-500 text-sm mt-8 border-t">
+            <p>© 2026 Kla Tham Party Strategic Center (Udon Thani D6). All Rights Reserved.</p>
+            <p>ระบบจำลองยุทธศาสตร์การเลือกตั้ง | Powered by Google Gemini</p>
+        </footer>
     </main>
+    <!-- JS Logic -->
     <script type="module">
         import { GoogleGenerativeAI } from "@google/generative-ai";
+        // --- GEMINI API SETUP ---
+        const apiKey = "AIzaSyBlvdz3wUNm2PtiuYnN2al9L7krngami-E";
         const genAI = new GoogleGenerativeAI(apiKey);
         const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" });
+        function setLoading(btnId, outputId, isLoading, loadingText = "AI กำลังคิด...") {
+            const btn = document.getElementById(btnId);
+            const output = document.getElementById(outputId);
+            if (isLoading) {
+                btn.disabled = true;
+                btn.classList.add('opacity-70', 'cursor-not-allowed');
+                if (!btn.dataset.originalText) btn.dataset.originalText = btn.innerHTML;
+                btn.innerHTML = `<span class="loader border-white/50 border-t-white mr-2" style="width:16px;height:16px;"></span> ${loadingText}`;
+                if(output) {
+                    output.classList.remove('hidden');
+                    // Only set text if output is empty or needs reset, otherwise keep structure
+                    if(output.innerText === "") output.textContent = '... กำลังประมวลผล ...';
+                }
+            } else {
+                btn.disabled = false;
+                btn.classList.remove('opacity-70', 'cursor-not-allowed');
+                btn.innerHTML = btn.dataset.originalText;
             }
         }
+        // Feature 1: Social Caption Generator
+        document.getElementById('btnGenerateCaption').addEventListener('click', async () => {
+            const topic = document.getElementById('captionTopic').value;
+            const platform = document.getElementById('captionPlatform').value;
+            const outputDiv = document.getElementById('captionOutput');
+            if (!topic.trim()) { alert("กรุณาใส่หัวข้อคอนเทนต์ครับ"); return; }
+            setLoading('btnGenerateCaption', 'captionOutput', true);
             try {
+                const prompt = `
+                    คุณคือทีมสื่อสารของ 'ธนอนันต์ เมนะสวัสดิ์' ผู้สมัคร ส.ส. อุดรธานี เขต 6 พรรคกล้าธรรม
+                    Identity: ลูกหลานคนอุดร, จริงใจ, กล้าทำจริง (สไตล์พรรคกล้าธรรม), เข้าถึงง่าย
+                    เขียน Caption สำหรับแพลตฟอร์ม: ${platform}
+                    หัวข้อ: "${topic}"
+                    ข้อกำหนด:
+                    - ถ้าเป็น TikTok: ขอสั้นๆ กระชับ ภาษาอีสานวัยรุ่น ติดแฮชแท็กฮิต
+                    - ถ้าเป็น Facebook: ขอแบบเล่าเรื่อง เห็นภาพความทุ่มเท ภาษาทางการกึ่งกันเอง
+                    - ถ้าเป็น Line OA: ขอแบบสั้นๆ เหมือนทักทายญาติพี่น้อง แจ้งข่าวสารชัดเจน
+                    - ต้องมีคำว่า "กล้าธรรม" หรือ "ธนอนันต์" ในข้อความ
+                `;
                 const result = await model.generateContent(prompt);
+                const response = await result.response;
+                outputDiv.innerHTML = `<strong>📲 Draft Caption (${platform}):</strong><br><br>${response.text().replace(/\n/g, '<br>')}`;
             } catch (error) {
+                outputDiv.textContent = "AI Error: " + error.message;
             } finally {
+                setLoading('btnGenerateCaption', 'captionOutput', false);
             }
+        });
+        // Feature 2: Crisis Strategy
+        document.getElementById('btnGenerateStrategy').addEventListener('click', async () => {
+            const situation = document.getElementById('crisisInput').value;
+            const outputDiv = document.getElementById('strategyOutput');
+            if (!situation.trim()) { alert("ระบุสถานการณ์ก่อนครับ"); return; }
+            setLoading('btnGenerateStrategy', 'strategyOutput', true);
+            try {
+                const prompt = `
+                    สถานการณ์ด่วน! ผู้สมัคร 'ธนอนันต์ พรรคกล้าธรรม' เจอเรื่อง: "${situation}"
+                    ขอแผนรับมือ 3 ขั้นตอนด่วน (Immediate Action, Message, Follow-up)
+                    สไตล์: กล้าชนแต่ไม่ก้าวร้าว, ใช้ความจริงสู้, รักษาฐานเสียง
+                `;
+                const result = await model.generateContent(prompt);
+                outputDiv.innerHTML = `<strong>🛡️ แผนแก้เกมด่วน:</strong><br><br>${result.response.text().replace(/\n/g, '<br>')}`;
+            } catch (error) {
+                outputDiv.textContent = "Error: " + error.message;
+            } finally {
+                setLoading('btnGenerateStrategy', 'strategyOutput', false);
+            }
         });
+        // Feature 3: Debate Simulator - Step 1: Generate Question
+        document.getElementById('btnStartDebate').addEventListener('click', async () => {
+            const topic = document.getElementById('debateTopic').value;
+            const questionDiv = document.getElementById('debateQuestionText');
+            const section = document.getElementById('debateQuestionSection');
+            // Reset previous state
+            section.classList.remove('hidden');
+            questionDiv.innerHTML = "กำลังคิดคำถามโหดๆ...";
+            document.getElementById('debateAnswer').value = "";
+            document.getElementById('debateFeedback').classList.add('hidden');
+            setLoading('btnStartDebate', null, true, "กำลังลับฝีปาก...");
+            try {
+                const prompt = `
+                    Act as a tough political debate moderator or an aggressive opponent.
+                    Target: Thanon Anant (Kla Tham Party candidate in Udon Thani).
+                    Topic: ${topic}.
+                    Generate ONE tough, provocative question in Thai (ภาษาไทย).
+                    The question should attack the party's weak points or challenge the feasibility of the policy.
+                    Make it short and sharp (max 2 sentences).
+                `;
+                const result = await model.generateContent(prompt);
+                questionDiv.innerText = result.response.text();
+            } catch (error) {
+                questionDiv.innerText = "Error generating question.";
+            } finally {
+                setLoading('btnStartDebate', null, false);
+            }
         });
+        // Feature 3: Debate Simulator - Step 2: Grade Answer
+        document.getElementById('btnGradeAnswer').addEventListener('click', async () => {
+            const question = document.getElementById('debateQuestionText').innerText;
+            const answer = document.getElementById('debateAnswer').value;
+            const feedbackDiv = document.getElementById('debateFeedback');
+            if (!answer.trim()) { alert("ตอบคำถามก่อนครับท่าน!"); return; }
+            setLoading('btnGradeAnswer', 'debateFeedback', true, "กรรมการกำลังให้คะแนน...");
+            try {
+                const prompt = `
+                    Context: Political Debate Training for Thanon Anant (Kla Tham Party).
+                    Question: "${question}"
+                    Candidate's Answer: "${answer}"
+                    Please evaluate this answer in Thai:
+                    1. Score (out of 10).
+                    2. Strengths (จุดดี).
+                    3. Weaknesses (จุดด้อย).
+                    4. Suggested Improvement (แนะนำวิธีตอบให้คมขึ้น/ดีขึ้น).
+                `;
+                const result = await model.generateContent(prompt);
+                feedbackDiv.innerHTML = `<strong>📝 ผลการประเมิน:</strong><br><br>${result.response.text().replace(/\n/g, '<br>')}`;
+            } catch (error) {
+                feedbackDiv.textContent = "Error: " + error.message;
+            } finally {
+                setLoading('btnGradeAnswer', 'debateFeedback', false);
+            }
         });
+        // Feature 4: Policy Localizer
+        document.getElementById('btnTranslatePolicy').addEventListener('click', async () => {
+            const policy = document.getElementById('policyInput').value;
+            const target = document.getElementById('policyTarget').value;
+            const outputDiv = document.getElementById('policyOutput');
+            if (!policy.trim()) { alert("ใส่นโยบายมาก่อนครับ"); return; }
+            setLoading('btnTranslatePolicy', 'policyOutput', true);
+            try {
+                const prompt = `
+                    คุณคือผู้เชี่ยวชาญด้านการสื่อสารการเมืองท้องถิ่นอุดรธานี
+                    จงแปลงนโยบายภาษาราชการนี้: "${policy}"
+                    ให้เป็นภาษาพูดที่โดนใจกลุ่มเป้าหมาย: "${target}"
+                    Guideline:
+                    - ถ้าเป็นผู้เฒ่าผู้แก่: ใช้ภาษาอีสาน คำผญา เปรียบเปรยให้เห็นภาพ
+                    - ถ้าเป็นวัยรุ่น: ใช้ภาษาทันสมัย สั้นๆ เหมือน Twitter/TikTok
+                    - ถ้าเป็นพ่อค้าแม่ค้า: เน้นตัวเลข กำไร ความคุ้มค่า
+                    ขอผลลัพธ์สั้นๆ (ไม่เกิน 3 บรรทัด) แต่ทรงพลัง
+                `;
+                const result = await model.generateContent(prompt);
+                outputDiv.innerHTML = `"${result.response.text()}"`;
+            } catch (error) {
+                outputDiv.textContent = "Error: " + error.message;
+            } finally {
+                setLoading('btnTranslatePolicy', 'policyOutput', false);
+            }
+        });
+    </script>
+    <!-- CHART JS -->
+    <script>
+        const commonTooltip = {
+            callbacks: {
+                title: function(tooltipItems) { return tooltipItems[0].chart.data.labels[tooltipItems[0].dataIndex]; }
+            }
+        };
+        // 1. Social Media Share of Voice
+        const ctxSocial = document.getElementById('socialChart').getContext('2d');
+        new Chart(ctxSocial, {
+            type: 'doughnut',
+            data: {
+                labels: ['TikTok (Gen Z/Y)', 'Facebook (Gen X/Boomer)', 'Line OA (Community Leaders)', 'YouTube/Others'],
+                datasets: [{
+                    data: [45, 30, 20, 5],
+                    backgroundColor: ['#000000', '#1877F2', '#00B900', '#FF0000'],
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { position: 'right' } }
+            }
+        });
+        // 2. Competitor Radar
+        const ctxRadar = document.getElementById('radarChart').getContext('2d');
+        new Chart(ctxRadar, {
+            type: 'radar',
+            data: {
+                labels: ['ความนิยมส่วนตัว', 'นโยบาย (ที่ดิน/น้ำ)', 'กระแสพรรค', 'ทีมงานพื้นที่', 'งบ/ทรัพยากร'],
+                datasets: [{
+                    label: 'ธนอนันต์ (กล้าธรรม)',
+                    data: [75, 95, 70, 85, 90],
+                    borderColor: '#6A0DAD',
+                    backgroundColor: 'rgba(106, 13, 173, 0.2)',
+                    pointBackgroundColor: '#6A0DAD'
+                }, {
+                    label: 'คู่แข่ง (เพื่อไทยเดิม)',
+                    data: [90, 70, 85, 80, 80],
+                    borderColor: '#FF0000',
+                    backgroundColor: 'rgba(255, 0, 0, 0.1)',
+                    borderDash: [5, 5]
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: { r: { suggestedMin: 0, suggestedMax: 100 } }
+            }
+        });
     </script>
 </body>
 </html>