Spaces:

kritsanan
/

instructa

Running

App Files Files Community

kritsanan commited on 28 days ago

Commit

4d5f225

verified ·

1 Parent(s): 03991c0

Update index.html

Browse files

Files changed (1) hide show

index.html +155 -511

index.html CHANGED Viewed

@@ -23,16 +23,10 @@
     <!-- 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;
         }
@@ -46,12 +40,6 @@
             max-height: 400px;
         }
-        @media (min-width: 768px) {
-            .chart-container {
-                height: 400px;
-            }
-        }
         .info-card {
             background-color: white;
             border-radius: 0.75rem;
@@ -64,16 +52,6 @@
         .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 {
@@ -90,586 +68,252 @@
             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 = "AIzaSyB8VwyTzgru8TrD13z2HaU1354UBpBKhtw";
         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>

     <!-- Font: Noto Sans Thai -->
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;600;800&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Noto Sans Thai', sans-serif;
+            background-color: #F8F7FF;
             color: #1F2937;
         }
             max-height: 400px;
         }
         .info-card {
             background-color: white;
             border-radius: 0.75rem;
         .info-card:hover {
             transform: translateY(-2px);
             border-top-color: #6A0DAD;
         }
         .loader {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
     </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 text-center">
+        <div class="max-w-6xl mx-auto">
+            <div class="inline-block bg-white text-purple-900 px-4 py-1 rounded-full text-sm font-bold mb-4 shadow-md">
                 ROADMAP TO VICTORY 2026 (2569)
             </div>
+            <h1 class="text-4xl md:text-6xl font-extrabold mb-2">ธนอนันต์ เมนะสวัสดิ์</h1>
             <h2 class="text-2xl md:text-3xl font-light opacity-90">พรรคกล้าธรรม | อุดรธานี เขต 6</h2>
         </div>
     </header>
+    <main class="max-w-7xl mx-auto p-4 md:p-8 space-y-8">
+        <!-- Intro Stats -->
         <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">เป้าหมายคะแนน</div>
                 <div class="text-4xl font-extrabold text-purple-700 mt-2">42,000+</div>
             </div>
             <div class="info-card border-l-8 border-yellow-500 text-center">
+                <div class="text-gray-500 font-bold uppercase text-xs">กลุ่มเป้าหมายหลัก</div>
                 <div class="text-4xl font-extrabold text-yellow-600 mt-2">New Gen</div>
             </div>
             <div class="info-card border-l-8 border-indigo-500 text-center">
+                <div class="text-gray-500 font-bold uppercase text-xs">ฐานเสียงเดิม</div>
                 <div class="text-4xl font-extrabold text-indigo-600 mt-2">Family</div>
             </div>
+            <div class="info-card border-l-8 border-pink-500 text-center">
+                <div class="text-gray-500 font-bold uppercase text-xs">งบดิจิทัล</div>
                 <div class="text-4xl font-extrabold text-pink-600 mt-2">40%</div>
             </div>
         </section>
+        <!-- ECT Compliance Section -->
+        <section class="bg-red-50 border-2 border-red-200 rounded-2xl p-6 shadow-sm">
+            <h3 class="text-xl font-bold text-red-700 flex items-center gap-2 mb-4">
+                ⚖️ ศูนย์เฝ้าระวังระเบียบ กกต. (ECT Compliance Monitor)
+            </h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                <div class="bg-white p-3 rounded-lg border border-red-100">
+                    <h4 class="font-bold text-red-600 mb-1">🚫 มาตรา 73 (ข้อห้ามหาเสียง)</h4>
+                    <ul class="list-disc list-inside text-gray-600 space-y-1">
+                        <li>ห้ามสัญญาว่าจะให้เงิน/ทรัพย์สิน</li>
+                        <li>ห้ามจัดเลี้ยงหรือรับจัดเลี้ยง</li>
+                        <li>ห้ามใส่ร้ายด้วยความเท็จ</li>
+                    </ul>
                 </div>
+                <div class="bg-white p-3 rounded-lg border border-red-100">
+                    <h4 class="font-bold text-red-600 mb-1">📱 ระเบียบโซเชียลมิเดีย</h4>
+                    <ul class="list-disc list-inside text-gray-600 space-y-1">
+                        <li>แจ้งบัญชีโซเชียลต่อ กกต. ก่อนโพสต์</li>
+                        <li>บันทึกค่า Ads เป็นงบเลือกตั้ง</li>
+                        <li>ห้ามใช้ AI บิดเบือนภาพเพื่อโจมตี</li>
+                    </ul>
                 </div>
+                <div class="bg-white p-3 rounded-lg border border-red-100">
+                    <h4 class="font-bold text-red-600 mb-1">🛡️ การป้องกันส่วนบุคคล</h4>
+                    <ul class="list-disc list-inside text-gray-600 space-y-1">
+                        <li>ห้ามพาดพิงสถาบันพระมหากษัตริย์</li>
+                        <li>ห้ามโพสต์หาเสียงหลัง 18:00 น. ก่อนวันเลือกตั้ง</li>
+                        <li>ห้ามเผยแพร่ผล Poll 7 วันสุดท้าย</li>
+                    </ul>
                 </div>
             </div>
         </section>
+        <!-- AI Tools Section -->
+        <section class="bg-gradient-to-br from-indigo-900 to-purple-800 rounded-2xl p-8 text-white shadow-xl">
+            <h3 class="text-3xl font-bold mb-8 border-b border-purple-400 pb-4">🤖 AI Strategic Partner</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Caption Gen -->
+                <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-red-500">
+                    <h4 class="text-xl font-bold text-purple-800 mb-1">✍️ ผู้ช่วยเขียนแคปชั่น</h4>
+                    <p class="text-xs text-red-500 mb-4 font-bold flex items-center gap-1">
+                        <span class="w-2 h-2 bg-red-500 rounded-full animate-ping"></span>
+                        ระบบตรวจสอบระเบียบ กกต. ทำงานอยู่
+                    </p>
+                    <input type="text" id="captionTopic" class="w-full border p-2 rounded mb-4" placeholder="หัวข้อคอนเทนต์ หรือ นโยบายที่จะสื่อสาร...">
+                    <select id="captionPlatform" class="w-full border p-2 rounded mb-4">
+                        <option value="TikTok">TikTok (เน้นสั้น/ภาษาอีสาน)</option>
+                        <option value="Facebook">Facebook (เน้นข้อมูล/ผลงาน)</option>
+                        <option value="Line OA">Line OA (เน้นความใกล้ชิด)</option>
+                    </select>
+                    <button id="btnGenerateCaption" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg transition-all">
+                        สร้างแคปชั่นแบบปลอดภัย (ECT Safe)
+                    </button>
+                    <div id="captionOutputArea" class="hidden mt-4">
+                        <div id="captionOutput" class="p-4 bg-gray-50 rounded-lg border border-gray-200 text-sm whitespace-pre-line"></div>
+                        <div class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-[10px] text-red-700 font-bold italic">
+                            ⚠️ คำเตือน: ตรวจสอบบัญชีโซเชียลที่ใช้โพสต์ว่า "แจ้ง กกต. แล้ว" และเก็บภาพหน้าจอไว้รายงานค่าใช้จ่าย
                         </div>
                     </div>
                 </div>
+                <!-- Crisis Advisor -->
+                <div class="bg-white text-gray-800 rounded-xl p-6">
+                    <h4 class="text-xl font-bold text-purple-800 mb-4">🛡️ ที่ปรึกษาแก้เกมดราม่า</h4>
+                    <textarea id="crisisInput" rows="3" class="w-full border p-2 rounded mb-4" placeholder="ระบุสถานการณ์หรือข้อกล่าวหาจากคู่แข่ง..."></textarea>
+                    <button id="btnGenerateStrategy" class="w-full bg-gray-800 hover:bg-black text-white font-bold py-3 rounded-lg transition-all">วิเคราะห์แนวทางแก้เกม</button>
+                    <div id="strategyOutput" class="mt-4 p-4 bg-gray-50 rounded-lg hidden text-sm border-l-4 border-gray-400"></div>
                 </div>
             </div>
         </section>
+        <!-- Digital War Room Charts -->
+        <section class="bg-white rounded-2xl shadow-xl p-8 border border-purple-100">
+            <h3 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">📊 Digital Landscape: อุดรฯ เขต 6</h3>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                <div class="chart-container">
+                    <canvas id="socialChart"></canvas>
                 </div>
+                <div class="space-y-4">
+                    <div class="p-4 bg-purple-50 rounded-xl border border-purple-100">
+                        <h5 class="font-bold text-purple-800">🎯 First Voters & New Gen</h5>
+                        <p class="text-sm text-gray-600 mt-1">กลุ่ม TikTok อายุ 18-35 ปี คือกุญแจสำคัญในการทำลายฐานเสียงเดิม</p>
+                    </div>
+                    <div class="p-4 bg-blue-50 rounded-xl border border-blue-100">
+                        <h5 class="font-bold text-blue-800">💬 Local Communities</h5>
+                        <p class="text-sm text-gray-600 mt-1">เน้นการทำคอนเทนต์ "บ้านเฮา" โดยใช้ภาษาอีสานและวิถีชีวิตจริง</p>
+                    </div>
                 </div>
             </div>
         </section>
     </main>
     <script type="module">
         import { GoogleGenerativeAI } from "@google/generative-ai";
+        const apiKey = "AIzaSyB8VwyTzgru8TrD13z2HaU1354UBpBKhtw"; // API Key will be injected at runtime
         const genAI = new GoogleGenerativeAI(apiKey);
         const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" });
+        // --- ENHANCED ECT COMPLIANCE SYSTEM PROMPT ---
+        const complianceInstruction = `
+            [SYSTEM ROLE]: คุณคือ "ผู้เชี่ยวชาญด้านยุทธศาสตร์ดิจิทัล" ประจำทีมคุณธนอนันต์ เมนะสวัสดิ์ (พรรคกล้าธรรม อุดรธานี เขต 6)
+            [ECT COMPLIANCE GUARDRAILS - กฎเหล็ก กกต.]:
+            1. (มาตรา 73) ห้ามเขียนข้อความเชิงสัญญาว่าจะให้เงิน ทรัพย์สิน หรือประโยชน์อื่นใดทั้งทางตรงและทางอ้อม
+            2. (นโยบาย) หากพูดถึงนโยบาย ให้ใช้คำว่า "นโยบายที่เราจะทำจริง" หรือ "วิสัยทัศน์เพื่อชาวเขต 6" แทนการรับปากส่วนตัว
+            3. (ความเท็จ) ห้ามโจมตีบุคคลอื่นด้วยข้อมูลที่อาจเป็นเท็จ หรือใช้ภาษาที่รุนแรงใส่ร้าย
+            4. (สถาบันฯ) ห้ามพาดพิงสถาบันพระมหากษัตริย์ไม่ว่ากรณีใดๆ
+            5. (ภาษา) ใช้ภาษาอีสานผสมผสานอย่างลงตัว ดูจริงใจ เป็นกันเอง แต่สุภาพและมีความเป็นมืออาชีพ
+            6. (ระเบียบโซเชียล) หากเป็นโพสต์ที่มีค่าใช้จ่าย ให้เน้นว่าเป็นการนำเสนอนโยบายเพื่อประโยชน์ส่วนรวม
+        `;
+        function setLoading(btnId, outputAreaId, isLoading) {
             const btn = document.getElementById(btnId);
+            const area = document.getElementById(outputAreaId);
             if (isLoading) {
                 btn.disabled = true;
+                btn.innerHTML = '<span class="loader"></span> กำลังประมวลผล...';
+                if(area) area.classList.remove('hidden');
             } else {
                 btn.disabled = false;
+                btn.innerHTML = btnId === 'btnGenerateCaption' ? 'สร้างแคปชั่นแบบปลอดภัย (ECT Safe)' : 'วิเคราะห์แนวทางแก้เกม';
             }
         }
+        // --- Feature: Caption Generator (With Compliance) ---
         document.getElementById('btnGenerateCaption').addEventListener('click', async () => {
             const topic = document.getElementById('captionTopic').value;
             const platform = document.getElementById('captionPlatform').value;
+            if(!topic) return;
+            setLoading('btnGenerateCaption', 'captionOutputArea', true);
+            const output = document.getElementById('captionOutput');
+            output.innerHTML = "กำลังตรวจสอบกฎ กกต. และสร้างเนื้อหา...";
             try {
                 const prompt = `
+                    ${complianceInstruction}
+                    หัวข้อคอนเทนต์: "${topic}"
+                    แพลตฟอร์ม: "${platform}"
+                    TASK: เขียนแคปชั่นที่น่าสนใจ ดึงดูดชาวอุดรธานี เขต 6 ให้เข้าถึงนโยบายและวิสัยทัศน์ของคุณธนอนันต์
+                    - หากเป็น TikTok ให้เน้น Hook 3 วินาทีแรก และคำคมอีสาน
+                    - หากเป็น Facebook ให้เน้นรายละเอียดที่จับต้องได้
+                    - ทุกคำต้องผ่านกฎการหาเสียง กกต. 100%
                 `;
                 const result = await model.generateContent(prompt);
+                output.innerHTML = result.response.text().trim();
+            } catch (err) {
+                output.innerHTML = "ขออภัย เกิดข้อผิดพลาดในระบบ AI กรุณาลองใหม่";
             } finally {
+                setLoading('btnGenerateCaption', null, false);
             }
         });
+        // --- Feature: Crisis Advisor ---
         document.getElementById('btnGenerateStrategy').addEventListener('click', async () => {
             const situation = document.getElementById('crisisInput').value;
+            if(!situation) return;
+            setLoading('btnGenerateStrategy', 'strategyOutput', true);
+            const output = document.getElementById('strategyOutput');
+            output.innerHTML = "กำลังวิเคราะห์สถานการณ์...";
             try {
                 const prompt = `
+                    ${complianceInstruction}
+                    สถานการณ์: "${situation}"
+                    TASK: แนะนำวิธีรับมือในเชิงยุทธศาสตร์การสื่อสาร (Crisis Management)
+                    - ต้องไม่ใช่วิธีที่ผิดกฎหมายเลือกตั้ง
+                    - เน้นการชี้แจงด้วยข้อเท็จจริง
+                    - รักษาภาพลักษณ์ความ "กล้าธรรม" ของคุณธนอนันต์
                 `;
                 const result = await model.generateContent(prompt);
+                output.innerHTML = result.response.text().replace(/\n/g, '<br>');
+            } catch (err) {
+                output.innerHTML = "ไม่สามารถวิเคราะห์ได้ในขณะนี้";
             } finally {
+                setLoading('btnGenerateStrategy', null, false);
             }
         });
+        // Initialize Charts
+        window.onload = () => {
+            const ctxSocial = document.getElementById('socialChart').getContext('2d');
+            new Chart(ctxSocial, {
+                type: 'doughnut',
+                data: {
+                    labels: ['TikTok (New Gen)', 'Facebook (Mass)', 'Line OA (Direct)', 'อื่นๆ'],
+                    datasets: [{
+                        data: [50, 25, 20, 5],
+                        backgroundColor: ['#000000', '#1877F2', '#00B900', '#9333EA'],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: { position: 'bottom' },
+                        title: { display: true, text: 'สัดส่วนเป้าหมายช่องทางดิจิทัล' }
+                    }
+                }
+            });
         };
     </script>
 </body>
 </html>