| | <!DOCTYPE html> |
| | <html lang="th"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>ยุทธศาสตร์เลือกตั้ง 2569: ธนอนันต์ เมนะสวัสดิ์ (อุดรฯ เขต 6)</title> |
| | |
| | |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | |
| | |
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| |
|
| | |
| | <script type="importmap"> |
| | { |
| | "imports": { |
| | "@google/generative-ai": "https://esm.run/@google/generative-ai" |
| | } |
| | } |
| | </script> |
| |
|
| | |
| | <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; |
| | } |
| | |
| | .chart-container { |
| | position: relative; |
| | width: 100%; |
| | max-width: 600px; |
| | margin-left: auto; |
| | margin-right: auto; |
| | height: 350px; |
| | max-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; |
| | } |
| | |
| | .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); } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-100"> |
| |
|
| | |
| | <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"> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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"> |
| | |
| | <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-red-500 shadow-lg"> |
| | <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 shadow-md"> |
| | ✨ สร้างแคปชั่น (Safe Mode) |
| | </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 max-h-40 overflow-y-auto"></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-blue-500 shadow-lg"> |
| | <h4 class="text-xl font-bold text-blue-800 mb-1">💬 ผู้ช่วยตอบคอมเมนต์</h4> |
| | <p class="text-xs text-blue-500 mb-4 font-bold">ตอบเร็ว ตรงประเด็น ได้ใจชาวบ้าน</p> |
| | |
| | <textarea id="commentInput" rows="3" class="w-full border p-2 rounded mb-3 text-sm" placeholder="วางคอมเมนต์จากชาวเน็ตที่นี่..."></textarea> |
| | |
| | <select id="replyTone" class="w-full border p-2 rounded mb-4 text-sm"> |
| | <option value="Friendly">เป็นกันเอง + ภาษาอีสาน (สำหรับ FC)</option> |
| | <option value="Polite">สุภาพทางการ (สำหรับผู้ใหญ่/ข้าราชการ)</option> |
| | <option value="Clarify">ชี้แจงข้อเท็จจริง (สำหรับคำถามนโยบาย)</option> |
| | <option value="Deescalate">ลดอุณหภูมิ (สำหรับคอมเมนต์ลบ)</option> |
| | </select> |
| |
|
| | <button id="btnGenerateReply" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all shadow-md"> |
| | ✨ ร่างคำตอบ |
| | </button> |
| | <div id="replyOutputArea" class="hidden mt-4"> |
| | <div id="replyOutput" class="p-4 bg-blue-50 rounded-lg border border-blue-200 text-sm whitespace-pre-line relative group"></div> |
| | <p class="text-[10px] text-gray-400 mt-1 text-right">คลิกที่ข้อความเพื่อคัดลอก</p> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-green-500 shadow-lg"> |
| | <h4 class="text-xl font-bold text-green-700 mb-1">🎤 ผู้ช่วยร่างคำปราศรัย</h4> |
| | <p class="text-xs text-green-600 mb-4 font-bold">สคริปต์พูดหน้างาน มัดใจคนฟัง</p> |
| | |
| | <div class="grid grid-cols-2 gap-2 mb-3"> |
| | <select id="speechOccasion" class="border p-2 rounded text-sm w-full"> |
| | <option value="ประชุมหมู่บ้าน">ประชุมหมู่บ้าน</option> |
| | <option value="งานแต่งงาน">งานแต่งงาน</option> |
| | <option value="งานศพ">งานขาวดำ (งานศพ)</option> |
| | <option value="ขึ้นบ้านใหม่">ขึ้นบ้านใหม่</option> |
| | <option value="เวทีปราศรัยใหญ่">เวทีปราศรัยใหญ่</option> |
| | </select> |
| | <input type="text" id="speechLocation" class="border p-2 rounded text-sm w-full" placeholder="สถานที่ (เช่น บ้านหนองกุง)"> |
| | </div> |
| | <input type="text" id="speechTheme" class="w-full border p-2 rounded mb-4 text-sm" placeholder="ประเด็นที่จะเน้น (เช่น แก้หนี้, น้ำประปา)"> |
| |
|
| | <button id="btnGenerateSpeech" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-all shadow-md"> |
| | ✨ ร่างสคริปต์พูด (3 นาที) |
| | </button> |
| | <div id="speechOutputArea" class="hidden mt-4"> |
| | <div id="speechOutput" class="p-4 bg-green-50 rounded-lg border border-green-200 text-sm whitespace-pre-line max-h-48 overflow-y-auto"></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-gray-800 shadow-lg"> |
| | <h4 class="text-xl font-bold text-gray-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 shadow-md"> |
| | ✨ วิเคราะห์แนวทางแก้เกม |
| | </button> |
| | <div id="strategyOutput" class="mt-4 p-4 bg-gray-50 rounded-lg hidden text-sm border-l-4 border-gray-400 max-h-40 overflow-y-auto"></div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <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 = "AIzaSyBZl-6U8PaTWAVOd-sd1E9TxYOpUG4okZQ"; |
| | const genAI = new GoogleGenerativeAI(apiKey); |
| | const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" }); |
| | |
| | |
| | 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); |
| | const defaultText = { |
| | 'btnGenerateCaption': '✨ สร้างแคปชั่น (Safe Mode)', |
| | 'btnGenerateReply': '✨ ร่างคำตอบ', |
| | 'btnGenerateStrategy': '✨ วิเคราะห์แนวทางแก้เกม', |
| | 'btnGenerateSpeech': '✨ ร่างสคริปต์พูด (3 นาที)' |
| | }; |
| | |
| | if (isLoading) { |
| | btn.disabled = true; |
| | btn.innerHTML = '<span class="loader"></span> กำลังคิด...'; |
| | if(area) area.classList.remove('hidden'); |
| | } else { |
| | btn.disabled = false; |
| | btn.innerHTML = defaultText[btnId]; |
| | } |
| | } |
| | |
| | |
| | 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) { |
| | console.error(err); |
| | output.innerHTML = "ขออภัย เกิดข้อผิดพลาดในระบบ AI"; |
| | } finally { |
| | setLoading('btnGenerateCaption', null, false); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('btnGenerateReply').addEventListener('click', async () => { |
| | const comment = document.getElementById('commentInput').value; |
| | const tone = document.getElementById('replyTone').value; |
| | if(!comment) return; |
| | |
| | setLoading('btnGenerateReply', 'replyOutputArea', true); |
| | const output = document.getElementById('replyOutput'); |
| | output.innerHTML = "กำลังร่างคำตอบ..."; |
| | |
| | try { |
| | const prompt = ` |
| | ${complianceInstruction} |
| | คอมเมนต์จากประชาชน: "${comment}" |
| | โทนการตอบ: "${tone}" |
| | |
| | TASK: เขียนคำตอบกลับคอมเมนต์ (Reply) ในนาม "คุณธนอนันต์" (ผู้สมัคร) ตอบด้วยตนเอง |
| | - ใช้สรรพนามแทนตัวว่า "ผม" หรือ "อ้าย" (ตามความเหมาะสมกับโทน) เพื่อความจริงใจและใกล้ชิด |
| | - สั้น กระชับ ได้ใจความ เหมือนคุยกับพี่น้อง |
| | - หากเป็นคำถามเชิงลบ ให้ตอบด้วยความสุภาพ พลิกวิกฤตเป็นโอกาสในการชี้แจง |
| | - ใช้ภาษาถิ่นอีสานได้ตามความเหมาะสมกับโทนที่เลือก |
| | - ห้ามสัญญาว่าจะให้ผลตอบแทนเด็ดขาด (Safe 100%) |
| | `; |
| | |
| | const result = await model.generateContent(prompt); |
| | output.innerHTML = result.response.text().trim(); |
| | |
| | output.onclick = () => { |
| | navigator.clipboard.writeText(output.innerText); |
| | alert("คัดลอกข้อความแล้ว!"); |
| | }; |
| | } catch (err) { |
| | console.error(err); |
| | output.innerHTML = "ไม่สามารถสร้างคำตอบได้ในขณะนี้"; |
| | } finally { |
| | setLoading('btnGenerateReply', null, false); |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('btnGenerateSpeech').addEventListener('click', async () => { |
| | const occasion = document.getElementById('speechOccasion').value; |
| | const location = document.getElementById('speechLocation').value; |
| | const theme = document.getElementById('speechTheme').value; |
| | |
| | if(!location && !theme) return; |
| | |
| | setLoading('btnGenerateSpeech', 'speechOutputArea', true); |
| | const output = document.getElementById('speechOutput'); |
| | output.innerHTML = "กำลังร่างสคริปต์ปราศรัย..."; |
| | |
| | try { |
| | const prompt = ` |
| | ${complianceInstruction} |
| | โอกาส/งาน: "${occasion}" |
| | สถานที่: "${location}" |
| | ประเด็นหลักที่ต้องการเน้น: "${theme}" |
| | |
| | TASK: ร่างสคริปต์คำพูด (Speech Script) สั้นๆ สำหรับคุณธนอนันต์พูดหน้างาน |
| | - เริ่มต้นด้วยการทักทายพี่น้องชาว "${location}" อย่างเป็นกันเอง (ภาษาอีสาน) |
| | - แสดงความยินดี/เสียใจ ให้เหมาะสมกับ "${occasion}" |
| | - เชื่อมโยงเข้าสู่ประเด็น "${theme}" อย่างแนบเนียน ไม่ดูเป็นการหาเสียงที่แข็งกระด้างเกินไป |
| | - จบด้วยการให้กำลังใจและการฝากเนื้อฝากตัว |
| | - ใช้เวลาพูดประมาณ 2-3 นาที |
| | `; |
| | |
| | const result = await model.generateContent(prompt); |
| | output.innerHTML = result.response.text().trim(); |
| | } catch (err) { |
| | console.error(err); |
| | output.innerHTML = "เกิดข้อผิดพลาดในการร่างสคริปต์"; |
| | } finally { |
| | setLoading('btnGenerateSpeech', null, false); |
| | } |
| | }); |
| | |
| | |
| | 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) { |
| | console.error(err); |
| | output.innerHTML = "ไม่สามารถวิเคราะห์ได้ในขณะนี้"; |
| | } finally { |
| | setLoading('btnGenerateStrategy', null, false); |
| | } |
| | }); |
| | |
| | |
| | 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> |
