Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Glaucoma: A Comprehensive Overview</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.min.css"> | |
| <style> | |
| :root { | |
| --r-main-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --r-heading-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --r-main-color: #2d3436; | |
| --r-heading-color: #0984e3; | |
| } | |
| .reveal .slides { | |
| text-align: left; | |
| font-family: var(--r-main-font); | |
| } | |
| .reveal .slides section { | |
| width: 100%; | |
| height: 100%; | |
| padding: 40px; | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), | |
| opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .reveal h1, .reveal h2 { | |
| color: var(--r-heading-color); | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 1em; | |
| } | |
| .reveal p, .reveal li { | |
| font-size: 1.1em; | |
| line-height: 1.6; | |
| color: var(--r-main-color); | |
| } | |
| .reveal ul, .reveal ol { | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| padding: 20px 40px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.05); | |
| } | |
| .image-container { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| margin: 20px 0; | |
| } | |
| .image-container img { | |
| max-width: 100%; | |
| border-radius: 8px; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .image-caption { | |
| text-align: center; | |
| color: #636e72; | |
| font-size: 0.8em; | |
| margin-top: 10px; | |
| } | |
| /* Navigation buttons styling */ | |
| .reveal .controls { | |
| color: var(--r-heading-color); | |
| } | |
| .reveal .controls button { | |
| padding: 12px; | |
| background: rgba(255, 255, 255, 0.9); | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.1); | |
| } | |
| .reveal .controls button:hover { | |
| background: var(--r-heading-color); | |
| color: white; | |
| transform: scale(1.1); | |
| } | |
| /* Progress bar enhancement */ | |
| .reveal .progress { | |
| height: 4px; | |
| background: rgba(9, 132, 227, 0.2); | |
| } | |
| .reveal .progress span { | |
| background: var(--r-heading-color); | |
| transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Enhanced image handling */ | |
| .slide-image { | |
| max-height: 50vh; | |
| width: auto; | |
| margin: 20px auto; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .slide-image:hover { | |
| transform: scale(1.02); | |
| } | |
| /* Two-column layout */ | |
| .columns { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 40px; | |
| margin: 20px 0; | |
| } | |
| .column { | |
| flex: 1; | |
| } | |
| /* Visual elements */ | |
| .highlight-box { | |
| background: linear-gradient(135deg, rgba(9, 132, 227, 0.1), rgba(9, 132, 227, 0.05)); | |
| border-left: 4px solid var(--r-heading-color); | |
| padding: 20px; | |
| border-radius: 8px; | |
| margin: 20px 0; | |
| } | |
| .icon-text { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin: 10px 0; | |
| } | |
| .icon-text i { | |
| color: var(--r-heading-color); | |
| font-size: 1.5em; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| .stat-card { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 12px; | |
| text-align: center; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| transition: transform 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .stat-number { | |
| font-size: 2.5em; | |
| font-weight: bold; | |
| color: var(--r-heading-color); | |
| margin-bottom: 10px; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| background: rgba(9, 132, 227, 0.1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin: 10px 0; | |
| } | |
| .progress-bar .fill { | |
| height: 100%; | |
| background: var(--r-heading-color); | |
| transition: width 1s ease; | |
| } | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| height: 300px; | |
| background: rgba(255, 255, 255, 0.95); | |
| padding: 20px; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| } | |
| .chart-caption { | |
| text-align: center; | |
| font-size: 0.9em; | |
| color: #666; | |
| margin-top: 10px; | |
| } | |
| .interactive-eye { | |
| position: relative; | |
| } | |
| .eye-hotspots .hotspot { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(9, 132, 227, 0.5); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .eye-hotspots .hotspot:hover { | |
| background: rgba(9, 132, 227, 0.8); | |
| transform: scale(1.2); | |
| } | |
| .eye-hotspots .hotspot:hover::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| white-space: nowrap; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <div class="slides"> | |
| <section class="title-slide"> | |
| <h1>Glaucoma: Understanding and Protecting Your Vision</h1> | |
| <div class="columns"> | |
| <div class="column"> | |
| <div class="stat-grid"> | |
| <div class="stat-card"> | |
| <i class="fas fa-eye fa-2x" style="color: var(--r-heading-color)"></i> | |
| <div class="stat-number">80M+</div> | |
| <p>People Affected Globally</p> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-chart-line fa-2x" style="color: var(--r-heading-color)"></i> | |
| <div class="stat-number">111.8M</div> | |
| <p>Projected by 2040</p> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-clock fa-2x" style="color: var(--r-heading-color)"></i> | |
| <div class="stat-number">50%</div> | |
| <p>Cases Undiagnosed</p> | |
| </div> | |
| </div> | |
| <div class="highlight-box"> | |
| <h3>Global Impact</h3> | |
| <div class="progress-bar"> | |
| <div class="fill" style="width: 75%"></div> | |
| </div> | |
| <p>Leading cause of irreversible blindness worldwide</p> | |
| </div> | |
| </div> | |
| <div class="column"> | |
| <div class="chart-container"> | |
| <canvas id="globalPrevalenceChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2>What is Glaucoma?</h2> | |
| <div class="columns"> | |
| <div class="column"> | |
| <div class="highlight-box"> | |
| <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <span class="stat-number">50%</span> | |
| <span class="stat-label">of cases are undiagnosed</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">2040</span> | |
| <span class="stat-label">111.8M projected cases</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="icon-text"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <p>Often called the "silent thief of sight"</p> | |
| </div> | |
| </div> | |
| <div class="column"> | |
| <div class="interactive-eye"> | |
| <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg" | |
| alt="Eye Anatomy" class="slide-image"> | |
| <div class="eye-hotspots"> | |
| <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div> | |
| <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div> | |
| <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2>Types of Glaucoma</h2> | |
| <div class="columns"> | |
| <div class="column"> | |
| <ul> | |
| <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li> | |
| <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li> | |
| <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li> | |
| </ul> | |
| </div> | |
| <div class="column"> | |
| <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80" | |
| alt="Eye Diagram" class="slide-image"> | |
| </div> | |
| </div> | |
| </section> | |
| <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)"> | |
| <h2>Risk Factors</h2> | |
| <div class="columns"> | |
| <div class="column"> | |
| <div class="highlight-box"> | |
| <h3>Primary Risk Factors</h3> | |
| <ul> | |
| <li><i class="fas fa-user"></i> Age over 60</li> | |
| <li><i class="fas fa-dna"></i> Family history</li> | |
| <li><i class="fas fa-globe"></i> Ethnicity</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="column"> | |
| <div class="highlight-box"> | |
| <h3>Medical Risk Factors</h3> | |
| <ul> | |
| <li><i class="fas fa-heartbeat"></i> High blood pressure</li> | |
| <li><i class="fas fa-prescription"></i> Diabetes</li> | |
| <li><i class="fas fa-pills"></i> Long-term steroid use</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2>Symptoms of Glaucoma</h2> | |
| <p>Often, there are no early symptoms in open-angle glaucoma. Vision loss is slow and gradual. Angle-closure glaucoma can present with sudden symptoms.</p> | |
| <ul> | |
| <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li> | |
| <li><strong>Tunnel vision in advanced stages</strong></li> | |
| <li><strong>Severe eye pain (Angle-closure)</strong></li> | |
| <li><strong>Nausea and vomiting (Angle-closure)</strong></li> | |
| <li><strong>Blurred vision</strong></li> | |
| <li><strong>Halos around lights</strong></li> | |
| <li><strong>Redness of the eye</strong></li> | |
| </ul> | |
| <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;"> | |
| <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p> | |
| </section> | |
| <section> | |
| <h2>Diagnosis</h2> | |
| <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p> | |
| <ol> | |
| <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li> | |
| <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li> | |
| <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li> | |
| <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li> | |
| <li><strong>Pachymetry:</strong> Measures corneal thickness.</li> | |
| <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li> | |
| </ol> | |
| <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;"> | |
| <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p> | |
| </section> | |
| <section> | |
| <h2>Treatment: Eye Drops</h2> | |
| <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p> | |
| <ul> | |
| <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li> | |
| <li><strong>Beta-blockers:</strong> Reduce fluid production.</li> | |
| <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li> | |
| <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li> | |
| <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li> | |
| </ul> | |
| <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;"> | |
| <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p> | |
| </section> | |
| <section> | |
| <h2>Treatment: Laser Therapy</h2> | |
| <p>Laser procedures can help increase fluid drainage in the eye.</p> | |
| <ul> | |
| <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li> | |
| <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li> | |
| <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li> | |
| </ul> | |
| <img src="https://www.researchgate.net/publication/344019914/figure/fig1/AS:933628888879104@1599185878481/Selective-laser-trabeculoplasty-SLT-procedure-A-SLT-laser-delivery-system-B-SLT.png" alt="Laser Therapy for Glaucoma" style="max-height: 300px;"> | |
| <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p> | |
| </section> | |
| <section> | |
| <h2>Treatment: Surgery</h2> | |
| <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p> | |
| <ul> | |
| <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li> | |
| <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li> | |
| <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li> | |
| </ul> | |
| <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;"> | |
| <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p> | |
| </section> | |
| <section> | |
| <h2>Living with Glaucoma</h2> | |
| <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p> | |
| <ul> | |
| <li><strong>Regular eye exams are vital.</strong></li> | |
| <li><strong>Adhere to prescribed treatments.</strong></li> | |
| <li><strong>Maintain a healthy lifestyle.</strong></li> | |
| <li><strong>Support groups and resources are available.</strong></li> | |
| </ul> | |
| <p><strong>Protect your vision. Get regular eye checks!</strong></p> | |
| <img src="https://www.brightfocus.org/sites/default/files/styles/hero_image_1200x400/public/BrightFocus-Glaucoma-Hero-1200x400.jpg?itok=TsW_bDmz" alt="Living with Glaucoma" style="max-height: 300px;"> | |
| <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p> | |
| </section> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| Reveal.initialize({ | |
| // Modern configuration | |
| hash: true, | |
| mouseWheel: false, | |
| transition: 'slide', | |
| transitionSpeed: 'default', | |
| backgroundTransition: 'fade', | |
| autoPlayMedia: true, | |
| // Enhanced animation settings | |
| viewDistance: 3, | |
| autoSlide: 0, | |
| autoSlideStoppable: true, | |
| // Improved navigation | |
| controls: true, | |
| controlsTutorial: true, | |
| controlsLayout: 'bottom-right', | |
| controlsBackArrows: 'faded', | |
| progress: true, | |
| center: true, | |
| // Modern responsive design | |
| width: 1920, | |
| height: 1080, | |
| margin: 0.04, | |
| minScale: 0.2, | |
| maxScale: 2.0, | |
| // Keyboard navigation | |
| keyboard: { | |
| 13: 'next', // Enter | |
| 27: () => { }, // Escape (disable default ESC behavior) | |
| 32: 'next', // Space | |
| 37: 'prev', // Left arrow | |
| 38: 'prev', // Up arrow | |
| 39: 'next', // Right arrow | |
| 40: 'next' // Down arrow | |
| }, | |
| // Plugins | |
| plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ], | |
| // Progress bar styling | |
| progress: { | |
| color: '#0984e3', | |
| height: '4px' | |
| } | |
| }); | |
| // Add keyboard shortcut for overview mode | |
| document.addEventListener('keydown', function(event) { | |
| if (event.key === 'o') { | |
| Reveal.toggleOverview(); | |
| } | |
| }); | |
| // Add smooth scroll behavior | |
| Reveal.configure({ | |
| slideNumber: 'c/t', | |
| touch: true, | |
| hideInactiveCursor: true, | |
| hideCursorTime: 3000 | |
| }); | |
| // Add animation on slide change | |
| Reveal.on('slidechanged', event => { | |
| const currentSlide = event.currentSlide; | |
| const images = currentSlide.querySelectorAll('.slide-image'); | |
| images.forEach(img => { | |
| img.style.opacity = 0; | |
| setTimeout(() => { | |
| img.style.opacity = 1; | |
| }, 200); | |
| }); | |
| }); | |
| // Enhanced chart initialization | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctx = document.getElementById('globalPrevalenceChart').getContext('2d'); | |
| new Chart(ctx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Asia Pacific', 'Africa', 'Europe', 'Americas', 'Middle East'], | |
| datasets: [{ | |
| data: [45, 20, 15, 15, 5], | |
| backgroundColor: [ | |
| '#0984e3', | |
| '#00b894', | |
| '#6c5ce7', | |
| '#fdcb6e', | |
| '#e17055' | |
| ], | |
| borderWidth: 2, | |
| borderColor: 'white' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| padding: 20, | |
| font: { | |
| size: 14 | |
| } | |
| } | |
| }, | |
| title: { | |
| display: true, | |
| text: 'Global Glaucoma Distribution (2023)', | |
| font: { | |
| size: 16, | |
| weight: 'bold' | |
| } | |
| } | |
| }, | |
| animation: { | |
| animateScale: true, | |
| animateRotate: true | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |