Created
June 23, 2025 03:12
-
-
Save phrairat/fe5307f23cef5b4ceab5fc48180bc8cd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="th"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ความเข้าใจเชิงลึก: ภาวะจอประสาทตาบวมน้ำ (Macular Edema)</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Chosen Palette: Calm Clarity --> | |
| <!-- Application Structure Plan: The application is designed as a guided journey for a user (patient or caregiver) to understand Macular Edema. It's structured into four logical, user-centric sections instead of mirroring the report's chapters. 1) 'Getting Started': A high-level, engaging introduction to what the condition is and its key symptoms. 2) 'Exploring Causes': An interactive section with clickable cards for each cause, allowing users to explore specific conditions at their own pace. 3) 'Diagnosis & Treatment': A visual journey explaining diagnostic tools and an interactive comparison chart for treatments, empowering users with knowledge about their options. 4) 'Prognosis & Self-Care': Forward-looking information on outcomes and actionable self-care tips. This structure prioritizes user understanding and empathy, moving from basic knowledge to in-depth exploration and finally to empowerment and proactive care. --> | |
| <!-- Visualization & Content Choices: 1) Symptoms: Goal: Inform/Engage. Method: Interactive Amsler Grid simulation (HTML/CSS/JS) to demonstrate distortion. Justification: More impactful than static text. 2) Causes: Goal: Organize/Compare. Method: Clickable HTML/Tailwind cards that reveal detailed information. Justification: Breaks down complex information into digestible, user-controlled chunks. 3) Treatments: Goal: Compare. Method: A dynamic Chart.js horizontal bar chart to compare effectiveness, burden, and risk. A visual comparison is easier to grasp than a table. Justification: Leverages Chart.js (Canvas) for clear, interactive data visualization. 4) Prognosis: Goal: Inform. Method: Interactive spectrum diagram (HTML/CSS/JS) to visualize outcomes for different conditions. Justification: Simplifies the complex concept of prognosis. All diagrams and layouts are built with HTML/CSS/Tailwind and JS, with Chart.js for the chart. --> | |
| <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --> | |
| <style> | |
| body { | |
| font-family: 'Sarabun', sans-serif; | |
| background-color: #fdfcf9; | |
| color: #3f3f46; | |
| } | |
| .nav-link { | |
| transition: color 0.3s, border-color 0.3s; | |
| } | |
| .nav-link.active, .nav-link:hover { | |
| color: #2563eb; | |
| border-bottom-color: #2563eb; | |
| } | |
| .amsler-grid-container { | |
| width: 300px; | |
| height: 300px; | |
| background-image: | |
| linear-gradient(#a0aec0 1px, transparent 1px), | |
| linear-gradient(to right, #a0aec0 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| border: 1px solid #a0aec0; | |
| position: relative; | |
| cursor: pointer; | |
| transition: all 0.5s ease-in-out; | |
| } | |
| .amsler-grid-container.distorted { | |
| transform: perspective(500px) rotateX(10deg) rotateY(-5deg) scale(1.05); | |
| filter: url(#warp); | |
| } | |
| .amsler-grid-container .dot { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #1a202c; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: 400px; | |
| max-height: 50vh; | |
| } | |
| .cause-card, .treatment-btn, .prognosis-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .cause-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .treatment-btn.active, .prognosis-btn.active { | |
| background-color: #1d4ed8; | |
| color: white; | |
| } | |
| .section-fade-in { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; | |
| } | |
| .section-fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <header class="bg-white/80 backdrop-blur-sm sticky top-0 z-50 shadow-sm"> | |
| <nav class="container mx-auto px-6 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-xl font-bold text-blue-700">EyeHealth Hub</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#intro" class="nav-link text-gray-600 font-medium border-b-2 border-transparent">บทนำ</a> | |
| <a href="#causes" class="nav-link text-gray-600 font-medium border-b-2 border-transparent">สาเหตุ</a> | |
| <a href="#journey" class="nav-link text-gray-600 font-medium border-b-2 border-transparent">การตรวจและรักษา</a> | |
| <a href="#prognosis" class="nav-link text-gray-600 font-medium border-b-2 border-transparent">การดูแลตนเอง</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden focus:outline-none"> | |
| <svg class="w-6 h-6 text-gray-700" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path d="M4 6h16M4 12h16m-7 6h7"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4"> | |
| <a href="#intro" class="block py-2 px-4 text-sm text-gray-700 hover:bg-blue-50 rounded">บทนำ</a> | |
| <a href="#causes" class="block py-2 px-4 text-sm text-gray-700 hover:bg-blue-50 rounded">สาเหตุ</a> | |
| <a href="#journey" class="block py-2 px-4 text-sm text-gray-700 hover:bg-blue-50 rounded">การตรวจและรักษา</a> | |
| <a href="#prognosis" class="block py-2 px-4 text-sm text-gray-700 hover:bg-blue-50 rounded">การดูแลตนเอง</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id="intro" class="py-16 md:py-24 section-fade-in"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">ภาวะจอประสาทตาบวมน้ำ (Macular Edema)</h1> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">ภาวะนี้ไม่ใช่โรค แต่เป็น "อาการแสดง" ที่สำคัญซึ่งเกิดจากการสะสมของเหลวในจุดรับภาพ ทำให้การมองเห็นส่วนกลางมัวและบิดเบี้ยว มาทำความเข้าใจภาวะนี้ให้ลึกซึ้งยิ่งขึ้น</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <h2 class="text-2xl font-semibold text-gray-700 mb-4">คุณเห็นความผิดปกติหรือไม่?</h2> | |
| <p class="text-gray-600 mb-4">อาการที่พบบ่อยที่สุดคือการมองเห็นภาพบิดเบี้ยว (Metamorphopsia) เส้นตรงจะดูเป็นคลื่นหรือคดงอ ซึ่งเป็นสัญญาณเตือนสำคัญ</p> | |
| <p class="text-gray-600 mb-6">ลองทดสอบโดยการจ้องที่จุดดำตรงกลางตารางด้านล่าง หากคุณเห็นเส้นตารางบิดเบี้ยวหรือมีส่วนที่ขาดหายไป ควรปรึกษาจักษุแพทย์</p> | |
| <div id="amsler-grid-instruction" class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 rounded-r-lg mb-6"> | |
| <p class="font-bold">วิธีทดสอบ:</p> | |
| <ol class="list-decimal list-inside text-sm"> | |
| <li>สวมแว่นสายตา (หากใช้) และนั่งในที่ที่มีแสงสว่างเพียงพอ</li> | |
| <li>ปิดตาทีละข้าง แล้วใช้ตาข้างที่เปิดมองจ้องที่จุดตรงกลาง</li> | |
| <li>สังเกตว่าเส้นตารางยังคงตรงหรือไม่ มีส่วนใดบิดเบี้ยว, มืด, หรือขาดหายไปหรือไม่</li> | |
| </ol> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-700 mb-3">อาการสำคัญอื่นๆ:</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><span class="text-blue-500 mr-3">🎨</span> สีสันดูซีดจางหรือไม่สดใส</li> | |
| <li class="flex items-center"><span class="text-blue-500 mr-3">⚫️</span> เห็นจุดดำหรือเงาดำบังตรงกลางภาพ</li> | |
| <li class="flex items-center"><span class="text-blue-500 mr-3">📖</span> อ่านหนังสือหรือจดจำใบหน้าได้ลำบาก</li> | |
| </ul> | |
| </div> | |
| <div class="order-1 md:order-2 flex flex-col items-center justify-center"> | |
| <div id="amsler-grid" class="amsler-grid-container shadow-lg rounded-lg"> | |
| <div class="dot"></div> | |
| </div> | |
| <p id="amsler-hover-text" class="text-sm text-gray-500 mt-4 text-center">ลองวางเมาส์หรือแตะบนตารางเพื่อจำลองอาการภาพบิดเบี้ยว</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
| <defs> | |
| <filter id="warp"> | |
| <feTurbulence type="fractalNoise" baseFrequency="0.02 0.03" numOctaves="1" result="turbulence" seed="5"/> | |
| <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"/> | |
| </filter> | |
| </defs> | |
| </svg> | |
| <section id="causes" class="py-16 md:py-24 bg-gray-50 section-fade-in"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">ต้นตอของปัญหามาจากไหน?</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">ภาวะจอประสาทตาบวมน้ำมีสาเหตุได้หลากหลาย ทั้งจากโรคทางกายและปัญหาที่เกิดในดวงตาโดยตรง การเข้าใจสาเหตุที่ถูกต้องคือกุญแจสำคัญสู่การรักษาที่เหมาะสม</p> | |
| </div> | |
| <div id="cause-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| </div> | |
| <div id="cause-details" class="mt-12 p-8 bg-white rounded-lg shadow-lg" style="display: none;"> | |
| <button id="close-details" class="float-right font-bold text-2xl text-gray-500 hover:text-gray-800">×</button> | |
| <h3 id="detail-title" class="text-2xl font-bold text-blue-700 mb-4"></h3> | |
| <p id="detail-desc" class="text-gray-700 mb-4"></p> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-2">กลไกการเกิดโรค:</h4> | |
| <p id="detail-mechanism" class="text-sm text-gray-600"></p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-2">ปัจจัยเสี่ยงสำคัญ:</h4> | |
| <ul id="detail-risks" class="list-disc list-inside text-sm text-gray-600 space-y-1"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="journey" class="py-16 md:py-24 section-fade-in"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">เส้นทางการตรวจวินิจฉัยและรักษา</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">เทคโนโลยีทางการแพทย์สมัยใหม่ช่วยให้แพทย์สามารถวินิจฉัยและวางแผนการรักษาได้อย่างแม่นยำ ทำให้มีทางเลือกในการจัดการภาวะนี้อย่างมีประสิทธิภาพ</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 mb-16"> | |
| <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200"> | |
| <h3 class="text-2xl font-semibold text-gray-700 mb-3">การวินิจฉัยที่แม่นยำ</h3> | |
| <p class="text-gray-600 mb-4">แพทย์จะใช้เครื่องมือขั้นสูงเพื่อดูโครงสร้างของจอประสาทตาอย่างละเอียด</p> | |
| <ul class="space-y-3"> | |
| <li><strong class="text-blue-600">OCT (Optical Coherence Tomography):</strong> มาตรฐานทองคำในการวินิจฉัย เปรียบเสมือน "อัลตราซาวนด์ด้วยแสง" ที่สร้างภาพตัดขวางของจอประสาทตา ทำให้วัดความหนาและประเมินความรุนแรงของการบวมได้อย่างแม่นยำ</li> | |
| <li><strong class="text-blue-600">FA (Fluorescein Angiography):</strong> การฉีดสีเพื่อสร้าง "แผนที่" การรั่วซึมของหลอดเลือด ช่วยชี้เป้าตำแหน่งที่ต้องทำการรักษาด้วยเลเซอร์</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200"> | |
| <h3 class="text-2xl font-semibold text-gray-700 mb-3">เป้าหมายการรักษา</h3> | |
| <p class="text-gray-600 mb-4">การรักษาจะมุ่งเน้นไปที่สาเหตุ โดยมีเป้าหมายหลักคือ:</p> | |
| <ul class="space-y-3"> | |
| <li><span class="font-bold text-green-600">ลดอาการบวม:</span> เพื่อฟื้นฟูโครงสร้างของจุดรับภาพ</li> | |
| <li><span class="font-bold text-green-600">หยุดการรั่วซึม:</span> เพื่อป้องกันไม่ให้ของเหลวสะสมเพิ่ม</li> | |
| <li><span class="font-bold text-green-600">รักษาระดับการมองเห็น:</span> เพื่อคงคุณภาพชีวิตของผู้ป่วยไว้ให้ดีที่สุด</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center text-gray-800 mb-4">เปรียบเทียบกลยุทธ์การรักษาสมัยใหม่</h3> | |
| <p class="text-center text-gray-600 mb-8">เลือกวิธีการรักษาเพื่อดูข้อมูลเปรียบเทียบในด้านต่างๆ</p> | |
| <div id="treatment-buttons" class="flex flex-wrap justify-center gap-2 md:gap-4 mb-8"> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="treatmentChart"></canvas> | |
| </div> | |
| <div id="treatment-details" class="mt-8 bg-gray-50 p-6 rounded-lg max-w-4xl mx-auto"> | |
| <h4 id="treatment-title" class="text-xl font-bold text-gray-800 mb-2"></h4> | |
| <p id="treatment-desc" class="text-gray-600 mb-4"></p> | |
| <div class="grid sm:grid-cols-2 gap-4 text-sm"> | |
| <div > | |
| <h5 class="font-semibold text-green-700 mb-1">ข้อดี:</h5> | |
| <p id="treatment-pros"></p> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-red-700 mb-1">ข้อเสีย/ความเสี่ยง:</h5> | |
| <p id="treatment-cons"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="prognosis" class="py-16 md:py-24 bg-gray-50 section-fade-in"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">การฟื้นตัวและการดูแลตนเองเชิงรุก</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">ผลลัพธ์การรักษาขึ้นอยู่กับหลายปัจจัย แต่การดูแลตนเองอย่างสม่ำเสมอคือส่วนสำคัญที่จะช่วยให้ผลการรักษาดีที่สุด</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12 mb-16 items-start"> | |
| <div> | |
| <h3 class="text-2xl font-semibold text-gray-700 mb-4">แนวโน้มการฟื้นตัว (Prognosis)</h3> | |
| <p class="text-gray-600 mb-6">การพยากรณ์โรคจะแตกต่างกันไปตามสาเหตุต้นตอ คลิกเพื่อดูแนวโน้มของแต่ละภาวะ</p> | |
| <div id="prognosis-buttons" class="flex flex-wrap gap-3 mb-6"> | |
| </div> | |
| <div id="prognosis-details" class="bg-white p-6 rounded-lg shadow-md border border-gray-200 min-h-[150px]"> | |
| <h4 id="prognosis-title" class="text-xl font-bold text-blue-700 mb-2">เลือกภาวะเพื่อดูข้อมูล</h4> | |
| <p id="prognosis-desc" class="text-gray-600"></p> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold text-gray-700 mb-4">หัวใจสำคัญของการดูแลตนเอง</h3> | |
| <p class="text-gray-600 mb-6">บทบาทของผู้ป่วยมีความสำคัญอย่างยิ่งในการป้องกันและชะลอโรค</p> | |
| <div class="space-y-4"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"><span class="text-2xl mr-4">🩺</span><div><strong class="text-gray-800">ควบคุมโรคประจำตัว:</strong> การคุมเบาหวาน ความดันโลหิต และไขมันให้ดี เป็นรากฐานที่สำคัญที่สุด</div></div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"><span class="text-2xl mr-4">🚭</span><div><strong class="text-gray-800">งดสูบบุหรี่:</strong> เพื่อลดความเสี่ยงของโรคจอประสาทตาเสื่อมและดูแลสุขภาพหลอดเลือด</div></div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"><span class="text-2xl mr-4">🥗</span><div><strong class="text-gray-800">โภชนาการที่ดี:</strong> ทานผักใบเขียวที่อุดมไปด้วยลูทีนและซีแซนทีน เพื่อบำรุงจุดรับภาพ</div></div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"><span class="text-2xl mr-4">😎</span><div><strong class="text-gray-800">ป้องกันรังสียูวี:</strong> สวมแว่นกันแดดเมื่ออยู่กลางแจ้ง เพื่อปกป้องดวงตา</div></div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"><span class="text-2xl mr-4">🗓️</span><div><strong class="text-gray-800">ตรวจตาสม่ำเสมอ:</strong> การคัดกรองในกลุ่มเสี่ยงเป็นประจำคือเกราะป้องกันที่ดีที่สุด แม้ยังไม่มีอาการ</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-800 text-white"> | |
| <div class="container mx-auto px-6 py-8 text-center"> | |
| <p class="font-semibold text-lg">EyeHealth Hub</p> | |
| <p class="text-sm text-gray-400 mt-2">ข้อมูลในเว็บไซต์นี้จัดทำขึ้นเพื่อการศึกษาเท่านั้น ไม่สามารถใช้ทดแทนคำแนะนำ การวินิจฉัย หรือการรักษาจากแพทย์ผู้เชี่ยวชาญได้ โปรดปรึกษาจักษุแพทย์ของท่านสำหรับข้อกังวลเกี่ยวกับสุขภาพตา</p> | |
| <p class="text-xs text-gray-500 mt-4">© 2025. สร้างสรรค์เพื่อการให้ความรู้ด้านสุขภาพตา</p> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const causeData = [ | |
| { | |
| id: 'dme', | |
| title: 'เบาหวานขึ้นจอตา (DME)', | |
| desc: 'สาเหตุที่พบบ่อยที่สุดของการสูญเสียการมองเห็นในผู้ป่วยเบาหวาน', | |
| mechanism: 'ภาวะน้ำตาลในเลือดสูงเรื้อรังทำลายหลอดเลือดฝอย ทำให้ปราการเลือด-จอตาพังทลายและเกิดการรั่วซึม', | |
| risks: ['ควบคุมระดับน้ำตาลไม่ดี', 'ระยะเวลาที่เป็นเบาหวานนาน', 'ความดันโลหิตสูง', 'โรคไต'] | |
| }, | |
| { | |
| id: 'wet-amd', | |
| title: 'จอประสาทตาเสื่อมชนิดเปียก (Wet AMD)', | |
| desc: 'เกิดการงอกของหลอดเลือดผิดปกติใต้จอประสาทตา ซึ่งเปราะบางและรั่วซึมง่าย', | |
| mechanism: 'การงอกใหม่ของหลอดเลือดผิดปกติจากชั้นคอรอยด์ (Choroidal Neovascularization) ที่รั่วซึมง่ายมาก', | |
| risks: ['อายุมากกว่า 50 ปี', 'การสูบบุหรี่', 'พันธุกรรม'] | |
| }, | |
| { | |
| id: 'rvo', | |
| title: 'หลอดเลือดดำจอประสาทตาอุดตัน (RVO)', | |
| desc: 'เกิดการอุดตันในหลอดเลือดดำ ทำให้แรงดันย้อนกลับและเกิดการรั่วซึมของของเหลว', | |
| mechanism: 'การอุดตันของหลอดเลือดดำทำให้เกิดแรงดันย้อนกลับในหลอดเลือดฝอยจนเกิดการรั่วซึมของของเหลวและเลือด', | |
| risks: ['ความดันโลหิตสูง', 'ไขมันในเลือดสูง', 'เบาหวาน', 'ต้อหิน'] | |
| }, | |
| { | |
| id: 'csc', | |
| title: 'ศูนย์กลางจอประสาทตาบวมน้ำ (CSC)', | |
| desc: 'ของเหลวรั่วซึมจากชั้นคอรอยด์ผ่านจุดอ่อนเข้าสะสมใต้จุดรับภาพ มักสัมพันธ์กับความเครียด', | |
| mechanism: 'การรั่วซึมของของเหลวจากชั้นคอรอยด์ผ่านจุดบกพร่องของชั้นเซลล์เม็ดสี (RPE)', | |
| risks: ['ความเครียด', 'การใช้ยาสเตียรอยด์ทุกรูปแบบ', 'บุคลิกภาพชนิด A', 'เพศชายวัยทำงาน'] | |
| }, | |
| { | |
| id: 'uveitis', | |
| title: 'ม่านตาอักเสบ (Uveitis)', | |
| desc: 'การอักเสบภายในลูกตาทำให้หลอดเลือดรั่วซึมจากสารสื่อกลางการอักเสบ', | |
| mechanism: 'การหลั่งสารสื่อกลางการอักเสบ (Inflammatory mediators) ทำให้หลอดเลือดจอประสาทตาขยายตัวและรั่วซึม', | |
| risks: ['โรคเกี่ยวกับการอักเสบทั่วร่างกาย', 'โรคภูมิคุ้มกันทำลายตนเอง'] | |
| }, | |
| { | |
| id: 'post-op', | |
| title: 'การอักเสบหลังผ่าตัดตา', | |
| desc: 'ภาวะแทรกซ้อนหลังการผ่าตัดในลูกตา เช่น การผ่าตัดต้อกระจก', | |
| mechanism: 'ปฏิกิริยาการอักเสบที่เกิดจากการผ่าตัดทำให้หลอดเลือดที่จุดรับภาพรั่วซึมได้', | |
| risks: ['เพิ่งได้รับการผ่าตัดในลูกตา (เช่น ต้อกระจก)'] | |
| } | |
| ]; | |
| const treatmentData = { | |
| 'anti-vegf': { | |
| title: 'ยาฉีด Anti-VEGF', | |
| description: 'การรักษามาตรฐานอันดับแรกสำหรับ DME, Wet AMD และ RVO โดยยับยั้งโปรตีนที่กระตุ้นการรั่วซึมของหลอดเลือด', | |
| pros: 'ประสิทธิภาพสูงสำหรับสาเหตุส่วนใหญ่, การมองเห็นอาจดีขึ้นเร็ว', | |
| cons: 'ต้องฉีดซ้ำหลายครั้ง, ค่าใช้จ่ายสูง, มีความเสี่ยง (น้อยมาก) จากการฉีดยา เช่น การติดเชื้อ', | |
| scores: { effectiveness: 9, burden: 7, risk: 2 } | |
| }, | |
| 'steroids': { | |
| title: 'ยาฉีดสเตียรอยด์', | |
| description: 'ใช้เพื่อลดการอักเสบอย่างครอบคลุม เหมาะสำหรับภาวะที่เกิดจากการอักเสบโดยตรง หรือเป็นทางเลือกที่สอง', | |
| pros: 'ฤทธิ์ต้านการอักเสบแรง, อาจออกฤทธิ์ได้นานกว่ายาบางชนิด', | |
| cons: 'ความเสี่ยงสูงในการเกิดต้อหินและความดันตาสูง, เร่งการเกิดต้อกระจก', | |
| scores: { effectiveness: 7, burden: 5, risk: 6 } | |
| }, | |
| 'laser': { | |
| title: 'เลเซอร์เฉพาะจุด', | |
| description: 'ใช้ความร้อนพลังงานต่ำ "ปิดผนึก" หลอดเลือดที่มีรอยรั่วเฉพาะจุด ตามแผนที่ที่ได้จากการฉีดสี (FA)', | |
| pros: 'อาจแก้ไขจุดรั่วได้ถาวร, ทำครั้งเดียวสำหรับจุดนั้นๆ', | |
| cons: 'ทำให้เกิดจุดบอดถาวรขนาดเล็กบริเวณที่ยิง, ไม่เหมาะกับการรั่วแบบกระจาย', | |
| scores: { effectiveness: 6, burden: 2, risk: 3 } | |
| }, | |
| 'ppv': { | |
| title: 'การผ่าตัดตัดวุ้นตา (PPV)', | |
| description: 'สงวนไว้สำหรับกรณีซับซ้อน เช่น มีแรงดึงรั้งทางกายภาพที่จุดรับภาพ หรือมีเลือดออกในวุ้นตามาก', | |
| pros: 'เป็นการรักษาที่ต้นเหตุสำหรับปัญหาเชิงกลไกโดยตรง', | |
| cons: 'เป็นการผ่าตัดใหญ่, มีความเสี่ยงสูงกว่าวิธีอื่น เช่น การติดเชื้อ, จอประสาทตาลอก, ต้อกระจก', | |
| scores: { effectiveness: 8, burden: 9, risk: 8 } | |
| } | |
| }; | |
| const prognosisData = { | |
| 'csc': { | |
| title: 'CSC (ศูนย์กลางจอประสาทตาบวมน้ำ)', | |
| description: 'การพยากรณ์โรคดีเยี่ยม ส่วนใหญ่ (80-90%) อาการบวมจะยุบไปเองภายใน 1-4 เดือน และการมองเห็นกลับมาใกล้เคียงปกติ แต่อาจกลับมาเป็นซ้ำได้' | |
| }, | |
| 'rvo-post-op': { | |
| title: 'RVO และหลังผ่าตัด', | |
| description: 'การพยากรณ์โรคมีแนวโน้มดีหากได้รับการรักษาทันท่วงที การมองเห็นสามารถดีขึ้นหรือคงที่ได้ ผลลัพธ์ขึ้นอยู่กับความรุนแรงเริ่มต้นและภาวะขาดเลือด' | |
| }, | |
| 'dme-wet-amd': { | |
| title: 'DME และ Wet AMD', | |
| description: 'เป็นภาวะเรื้อรังที่ต้องควบคุม การรักษาเป็นการ "จัดการ" ไม่ใช่ "รักษาให้หายขาด" เป้าหมายคือการควบคุมอาการและป้องกันการสูญเสียการมองเห็นถาวรในระยะยาว' | |
| } | |
| }; | |
| const amslerGrid = document.getElementById('amsler-grid'); | |
| amslerGrid.addEventListener('mouseenter', () => amslerGrid.classList.add('distorted')); | |
| amslerGrid.addEventListener('mouseleave', () => amslerGrid.classList.remove('distorted')); | |
| amslerGrid.addEventListener('touchstart', () => amslerGrid.classList.add('distorted'), { passive: true }); | |
| amslerGrid.addEventListener('touchend', () => amslerGrid.classList.remove('distorted')); | |
| const causeGrid = document.getElementById('cause-grid'); | |
| const causeDetailsSection = document.getElementById('cause-details'); | |
| causeData.forEach(cause => { | |
| const card = document.createElement('div'); | |
| card.className = 'cause-card bg-white p-6 rounded-lg shadow-md cursor-pointer border-t-4 border-blue-500'; | |
| card.innerHTML = ` | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">${cause.title}</h3> | |
| <p class="text-gray-600 text-sm">${cause.desc}</p> | |
| `; | |
| card.addEventListener('click', () => showCauseDetails(cause.id)); | |
| causeGrid.appendChild(card); | |
| }); | |
| function showCauseDetails(causeId) { | |
| const data = causeData.find(c => c.id === causeId); | |
| if (!data) return; | |
| document.getElementById('detail-title').textContent = data.title; | |
| document.getElementById('detail-desc').textContent = data.desc; | |
| document.getElementById('detail-mechanism').textContent = data.mechanism; | |
| const risksList = document.getElementById('detail-risks'); | |
| risksList.innerHTML = ''; | |
| data.risks.forEach(risk => { | |
| const li = document.createElement('li'); | |
| li.textContent = risk; | |
| risksList.appendChild(li); | |
| }); | |
| causeDetailsSection.style.display = 'block'; | |
| causeDetailsSection.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| } | |
| document.getElementById('close-details').addEventListener('click', () => { | |
| causeDetailsSection.style.display = 'none'; | |
| }); | |
| const treatmentButtonsContainer = document.getElementById('treatment-buttons'); | |
| let treatmentChart; | |
| const ctx = document.getElementById('treatmentChart').getContext('2d'); | |
| Object.keys(treatmentData).forEach(key => { | |
| const button = document.createElement('button'); | |
| button.className = 'treatment-btn px-4 py-2 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded-full hover:bg-gray-100'; | |
| button.textContent = treatmentData[key].title; | |
| button.dataset.treatment = key; | |
| button.addEventListener('click', () => updateTreatmentView(key)); | |
| treatmentButtonsContainer.appendChild(button); | |
| }); | |
| function updateTreatmentView(treatmentKey) { | |
| const data = treatmentData[treatmentKey]; | |
| if (!data) return; | |
| document.querySelectorAll('.treatment-btn').forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.treatment === treatmentKey); | |
| }); | |
| updateTreatmentChart(data); | |
| document.getElementById('treatment-title').textContent = data.title; | |
| document.getElementById('treatment-desc').textContent = data.description; | |
| document.getElementById('treatment-pros').textContent = data.pros; | |
| document.getElementById('treatment-cons').textContent = data.cons; | |
| } | |
| function updateTreatmentChart(data) { | |
| const { effectiveness, burden, risk } = data.scores; | |
| const chartData = { | |
| labels: ['ประสิทธิภาพ', 'ภาระการรักษา (ความถี่/ความซับซ้อน)', 'ระดับความเสี่ยง'], | |
| datasets: [{ | |
| label: data.title, | |
| data: [effectiveness, burden, risk], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.6)', | |
| 'rgba(249, 115, 22, 0.6)', | |
| 'rgba(239, 68, 68, 0.6)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(239, 68, 68, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }; | |
| if (treatmentChart) { | |
| treatmentChart.data = chartData; | |
| treatmentChart.options.plugins.title.text = `การประเมิน: ${data.title}`; | |
| treatmentChart.update(); | |
| } else { | |
| treatmentChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: chartData, | |
| options: { | |
| indexAxis: 'y', | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| x: { | |
| beginAtZero: true, | |
| max: 10, | |
| grid: { | |
| color: 'rgba(200, 200, 200, 0.2)' | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| title: { | |
| display: true, | |
| text: `การประเมิน: ${data.title}`, | |
| font: { | |
| size: 16 | |
| } | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| if (context.parsed.x !== null) { | |
| let score_text = "ต่ำ"; | |
| if (context.parsed.x > 3 && context.parsed.x <= 7) score_text = "ปานกลาง"; | |
| if (context.parsed.x > 7) score_text = "สูง"; | |
| label += `${score_text} (${context.parsed.x}/10)`; | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| } | |
| updateTreatmentView('anti-vegf'); | |
| const prognosisButtonsContainer = document.getElementById('prognosis-buttons'); | |
| Object.keys(prognosisData).forEach(key => { | |
| const button = document.createElement('button'); | |
| button.className = 'prognosis-btn px-4 py-2 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100'; | |
| button.textContent = prognosisData[key].title; | |
| button.dataset.prognosis = key; | |
| button.addEventListener('click', () => updatePrognosisView(key)); | |
| prognosisButtonsContainer.appendChild(button); | |
| }); | |
| function updatePrognosisView(prognosisKey) { | |
| const data = prognosisData[prognosisKey]; | |
| if (!data) return; | |
| document.querySelectorAll('.prognosis-btn').forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.prognosis === prognosisKey); | |
| }); | |
| document.getElementById('prognosis-title').textContent = data.title; | |
| document.getElementById('prognosis-desc').textContent = data.description; | |
| } | |
| updatePrognosisView('csc'); | |
| const sections = document.querySelectorAll('.section-fade-in'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| navLinks.forEach(link => { | |
| link.classList.toggle('active', link.getAttribute('href').substring(1) === entry.target.id); | |
| }); | |
| } | |
| }); | |
| }, { rootMargin: '-50% 0px -50% 0px' }); | |
| sections.forEach(section => { | |
| observer.observe(section); | |
| }); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| mobileMenu.querySelectorAll('a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| document.querySelector(link.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment