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; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .reveal { | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .reveal .slides { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| margin: auto; | |
| text-align: left; | |
| font-family: var(--r-main-font); | |
| } | |
| .reveal .slides section { | |
| padding: 2vw; | |
| width: 100%; | |
| height: 100%; | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: stretch; | |
| overflow-y: auto; | |
| } | |
| .reveal h1, .reveal h2 { | |
| color: var(--r-heading-color); | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 1em; | |
| } | |
| .reveal h1 { | |
| font-size: calc(2vw + 1.5rem); | |
| line-height: 1.2; | |
| } | |
| .reveal h2 { | |
| font-size: calc(1.5vw + 1.2rem); | |
| } | |
| .reveal p, .reveal li { | |
| font-size: calc(0.8vw + 0.9rem); | |
| 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-width: 100%; | |
| max-height: 60vh; | |
| width: auto; | |
| height: auto; | |
| object-fit: contain; | |
| margin: 20px auto; | |
| } | |
| .slide-image:hover { | |
| transform: scale(1.02); | |
| } | |
| /* Two-column layout */ | |
| .columns { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 2vw; | |
| margin: 2vh 0; | |
| flex-wrap: wrap; | |
| } | |
| .column { | |
| flex: 1; | |
| min-width: 300px; | |
| margin-bottom: 2vh; | |
| } | |
| /* 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(auto-fit, minmax(250px, 1fr)); | |
| gap: 2vw; | |
| margin: 2vh 0; | |
| } | |
| .stat-card { | |
| background: white; | |
| padding: 2vh 2vw; | |
| border-radius: 12px; | |
| text-align: center; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| transition: transform 0.3s ease; | |
| margin: 1vh 0; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .stat-number { | |
| font-size: calc(2vw + 1.5rem); | |
| 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: 50vh; | |
| min-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; | |
| } | |
| /* Enhanced Title Slide Styles */ | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.7); | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15); | |
| } | |
| .stat-card { | |
| padding: 25px; | |
| border-radius: 16px; | |
| text-align: center; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 24px rgba(0,0,0,0.1); | |
| } | |
| .stat-icon-wrapper { | |
| width: 60px; | |
| height: 60px; | |
| margin: 0 auto 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--r-heading-color), #74b9ff); | |
| } | |
| .stat-icon-wrapper i { | |
| color: white; | |
| } | |
| .stat-trend { | |
| font-size: 0.9em; | |
| color: #38d39f; | |
| margin-top: 10px; | |
| } | |
| .stat-trend.warning { | |
| color: #ff7675; | |
| } | |
| .progress-bar-wrapper { | |
| margin: 15px 0; | |
| } | |
| .progress-label { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 5px; | |
| font-weight: 500; | |
| } | |
| .progress-stats { | |
| font-size: 0.8em; | |
| color: #636e72; | |
| margin-top: 5px; | |
| text-align: right; | |
| } | |
| .impact-statement { | |
| font-size: 1.2em; | |
| font-weight: 500; | |
| color: #e17055; | |
| margin-top: 15px; | |
| text-align: center; | |
| } | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .chart-footer { | |
| margin-top: 15px; | |
| text-align: right; | |
| font-size: 0.8em; | |
| color: #636e72; | |
| } | |
| /* Animations */ | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .animate-width { | |
| animation: fillWidth 1.5s ease-out forwards; | |
| } | |
| @keyframes fillWidth { | |
| from { width: 0; } | |
| to { width: var(--target-width); } | |
| } | |
| /* Counter Animation */ | |
| .counter { | |
| transition: all 1s ease; | |
| } | |
| /* Enhanced What is Glaucoma Slide Styles */ | |
| .definition-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .definition-header i { | |
| font-size: 1.8em; | |
| color: var(--r-heading-color); | |
| } | |
| .definition-text { | |
| font-size: 1.2em; | |
| line-height: 1.6; | |
| margin-bottom: 25px; | |
| color: #2d3436; | |
| } | |
| .key-points-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| margin: 25px 0; | |
| } | |
| .key-point { | |
| padding: 20px; | |
| border-radius: 12px; | |
| text-align: center; | |
| } | |
| .key-point-icon { | |
| width: 50px; | |
| height: 50px; | |
| margin: 0 auto 15px; | |
| background: linear-gradient(135deg, var(--r-heading-color), #74b9ff); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .key-point-icon i { | |
| color: white; | |
| font-size: 1.5em; | |
| } | |
| .key-point h4 { | |
| color: var(--r-heading-color); | |
| margin-bottom: 10px; | |
| } | |
| .stats-container { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-top: 30px; | |
| } | |
| .circular-progress { | |
| position: relative; | |
| width: 120px; | |
| height: 120px; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 1s ease-in-out; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .progress-text { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| } | |
| .progress-text .percentage { | |
| font-size: 1.8em; | |
| font-weight: bold; | |
| color: var(--r-heading-color); | |
| display: block; | |
| } | |
| .progress-text .label { | |
| font-size: 0.9em; | |
| color: #636e72; | |
| } | |
| .eye-visualization { | |
| position: relative; | |
| margin-top: 20px; | |
| } | |
| .eye-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .eye-header .instruction { | |
| font-size: 0.9em; | |
| color: #636e72; | |
| } | |
| .eye-image { | |
| width: 100%; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .hotspot { | |
| position: absolute; | |
| width: 24px; | |
| height: 24px; | |
| cursor: pointer; | |
| } | |
| .hotspot-pulse { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(9, 132, 227, 0.6); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| animation: pulse 2s infinite; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 8px; | |
| padding: 15px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| width: 200px; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| z-index: 100; | |
| } | |
| .tooltip-title { | |
| color: var(--r-heading-color); | |
| margin-bottom: 8px; | |
| } | |
| .tooltip-description { | |
| font-size: 0.9em; | |
| line-height: 1.4; | |
| color: #2d3436; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(9, 132, 227, 0.4); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 10px rgba(9, 132, 227, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(9, 132, 227, 0); | |
| } | |
| } | |
| /* Types of Glaucoma Slide Styles */ | |
| .types-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .type-card { | |
| padding: 25px; | |
| border-radius: 16px; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .type-card:hover { | |
| transform: translateX(10px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.12); | |
| } | |
| .type-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .type-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--r-heading-color), #74b9ff); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .type-icon i { | |
| color: white; | |
| font-size: 1.2em; | |
| } | |
| .type-icon.emergency { | |
| background: linear-gradient(135deg, #e17055, #fab1a0); | |
| } | |
| .type-icon.special { | |
| background: linear-gradient(135deg, #6c5ce7, #a29bfe); | |
| } | |
| .type-badge { | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 0.8em; | |
| background: rgba(9, 132, 227, 0.1); | |
| color: var(--r-heading-color); | |
| } | |
| .type-badge.emergency { | |
| background: rgba(225, 112, 85, 0.1); | |
| color: #e17055; | |
| } | |
| .type-badge.special { | |
| background: rgba(108, 92, 231, 0.1); | |
| color: #6c5ce7; | |
| } | |
| .feature-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 15px 0; | |
| } | |
| .feature-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 8px 0; | |
| font-size: 0.95em; | |
| } | |
| .feature-list li i { | |
| color: var(--r-heading-color); | |
| width: 20px; | |
| } | |
| .risk-meter { | |
| margin-top: 15px; | |
| } | |
| .risk-label { | |
| font-size: 0.9em; | |
| margin-bottom: 5px; | |
| color: #636e72; | |
| } | |
| .risk-bar { | |
| height: 6px; | |
| background: rgba(9, 132, 227, 0.1); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .risk-bar.emergency { | |
| background: rgba(225, 112, 85, 0.1); | |
| } | |
| .risk-bar.special { | |
| background: rgba(108, 92, 231, 0.1); | |
| } | |
| .risk-fill { | |
| height: 100%; | |
| background: var(--r-heading-color); | |
| border-radius: 3px; | |
| transition: width 1s ease-out; | |
| } | |
| .risk-bar.emergency .risk-fill { | |
| background: #e17055; | |
| } | |
| .risk-bar.special .risk-fill { | |
| background: #6c5ce7; | |
| } | |
| .comparison-container { | |
| padding: 25px; | |
| border-radius: 16px; | |
| height: 100%; | |
| } | |
| .comparison-header { | |
| margin-bottom: 20px; | |
| } | |
| .comparison-header h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--r-heading-color); | |
| } | |
| .chart-legend { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.9em; | |
| } | |
| .legend-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 3px; | |
| } | |
| /* Media queries for different screen sizes */ | |
| @media screen and (max-width: 768px) { | |
| .columns { | |
| flex-direction: column; | |
| } | |
| .column { | |
| width: 100%; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .reveal h1 { | |
| font-size: calc(3vw + 1.2rem); | |
| } | |
| .reveal h2 { | |
| font-size: calc(2.5vw + 1rem); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <div class="slides"> | |
| <section class="title-slide" data-background-gradient="linear-gradient(45deg, #f6f8fa 30%, #e3f2fd 100%)"> | |
| <h1 class="animate__animated animate__fadeInDown">Glaucoma: Understanding and Protecting Your Vision</h1> | |
| <div class="columns"> | |
| <div class="column"> | |
| <div class="stat-grid animate__animated animate__fadeInLeft"> | |
| <div class="stat-card glass-effect"> | |
| <div class="stat-icon-wrapper"> | |
| <i class="fas fa-eye fa-2x pulse-animation"></i> | |
| </div> | |
| <div class="stat-number counter" data-target="80">0</div> | |
| <p>Million+ People<br>Affected Globally</p> | |
| <div class="stat-trend"> | |
| <i class="fas fa-arrow-up"></i> 12% yearly | |
| </div> | |
| </div> | |
| <div class="stat-card glass-effect"> | |
| <div class="stat-icon-wrapper"> | |
| <i class="fas fa-chart-line fa-2x pulse-animation"></i> | |
| </div> | |
| <div class="stat-number counter" data-target="111">0</div> | |
| <p>Million+ Projected<br>by 2040</p> | |
| <div class="stat-trend"> | |
| <i class="fas fa-arrow-up"></i> 39% increase | |
| </div> | |
| </div> | |
| <div class="stat-card glass-effect"> | |
| <div class="stat-icon-wrapper"> | |
| <i class="fas fa-clock fa-2x pulse-animation"></i> | |
| </div> | |
| <div class="stat-number counter" data-target="50">0</div> | |
| <p>Percent Cases<br>Undiagnosed</p> | |
| <div class="stat-trend warning"> | |
| <i class="fas fa-exclamation-triangle"></i> Critical | |
| </div> | |
| </div> | |
| </div> | |
| <div class="highlight-box glass-effect animate__animated animate__fadeInUp"> | |
| <h3><i class="fas fa-globe-americas"></i> Global Impact</h3> | |
| <div class="progress-bar-wrapper"> | |
| <div class="progress-label">Global Burden</div> | |
| <div class="progress-bar"> | |
| <div class="fill animate-width" data-width="75"></div> | |
| </div> | |
| <div class="progress-stats"> | |
| <span>75% of cases in developing countries</span> | |
| </div> | |
| </div> | |
| <p class="impact-statement">Leading cause of irreversible blindness worldwide</p> | |
| </div> | |
| </div> | |
| <div class="column animate__animated animate__fadeInRight"> | |
| <div class="chart-container glass-effect"> | |
| <div class="chart-header"> | |
| <h3><i class="fas fa-chart-pie"></i> Global Distribution</h3> | |
| <div class="chart-legend-toggle"> | |
| <i class="fas fa-list"></i> | |
| </div> | |
| </div> | |
| <canvas id="globalPrevalenceChart"></canvas> | |
| <div class="chart-footer"> | |
| <div class="chart-note"> | |
| <i class="fas fa-info-circle"></i> Data from WHO 2023 Report | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section data-background-gradient="linear-gradient(45deg, #ffffff 30%, #f0f9ff 100%)"> | |
| <h2 class="animate__animated animate__fadeInDown">What is Glaucoma?</h2> | |
| <div class="columns"> | |
| <div class="column animate__animated animate__fadeInLeft"> | |
| <div class="highlight-box glass-effect"> | |
| <div class="definition-header"> | |
| <i class="fas fa-info-circle pulse-animation"></i> | |
| <h3>Definition & Impact</h3> | |
| </div> | |
| <p class="definition-text">Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p> | |
| <div class="key-points-grid"> | |
| <div class="key-point glass-effect"> | |
| <div class="key-point-icon"> | |
| <i class="fas fa-eye-slash"></i> | |
| </div> | |
| <h4>Silent Progression</h4> | |
| <p>Often symptomless until significant damage occurs</p> | |
| </div> | |
| <div class="key-point glass-effect"> | |
| <div class="key-point-icon"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <h4>Early Detection</h4> | |
| <p>Critical for preventing vision loss</p> | |
| </div> | |
| </div> | |
| <div class="stats-container"> | |
| <div class="circular-progress" data-percentage="50"> | |
| <svg class="progress-ring" width="120" height="120"> | |
| <circle class="progress-ring__circle" stroke="#0984e3" stroke-width="8" fill="transparent" r="52" cx="60" cy="60"/> | |
| </svg> | |
| <div class="progress-text"> | |
| <span class="percentage">50%</span> | |
| <span class="label">Undiagnosed</span> | |
| </div> | |
| </div> | |
| <div class="circular-progress" data-percentage="75"> | |
| <svg class="progress-ring" width="120" height="120"> | |
| <circle class="progress-ring__circle" stroke="#00b894" stroke-width="8" fill="transparent" r="52" cx="60" cy="60"/> | |
| </svg> | |
| <div class="progress-text"> | |
| <span class="percentage">75%</span> | |
| <span class="label">Preventable</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column animate__animated animate__fadeInRight"> | |
| <div class="interactive-eye glass-effect"> | |
| <div class="eye-header"> | |
| <h3><i class="fas fa-eye"></i> Interactive Eye Anatomy</h3> | |
| <span class="instruction">Hover over points to learn more</span> | |
| </div> | |
| <div class="eye-visualization"> | |
| <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg" | |
| alt="Eye Anatomy" class="eye-image"> | |
| <div class="eye-hotspots"> | |
| <div class="hotspot" style="top: 40%; left: 30%;" | |
| data-title="Optic Nerve" | |
| data-description="Carries visual information from the eye to the brain. Damage here causes permanent vision loss."> | |
| <div class="hotspot-pulse"></div> | |
| </div> | |
| <div class="hotspot" style="top: 35%; left: 60%;" | |
| data-title="Trabecular Meshwork" | |
| data-description="Drainage system for eye fluid. Blockage here increases eye pressure."> | |
| <div class="hotspot-pulse"></div> | |
| </div> | |
| <div class="hotspot" style="top: 45%; left: 45%;" | |
| data-title="Anterior Chamber" | |
| data-description="Contains aqueous humor fluid. Pressure here affects the optic nerve."> | |
| <div class="hotspot-pulse"></div> | |
| </div> | |
| </div> | |
| <div class="tooltip"> | |
| <h4 class="tooltip-title"></h4> | |
| <p class="tooltip-description"></p> | |
| </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: '100%', | |
| height: '100%', | |
| margin: 0.04, | |
| minScale: 0.2, | |
| maxScale: 2.0, | |
| disableLayout: false, | |
| display: 'flex', | |
| center: true, | |
| // Make sure content fits | |
| embedded: false, | |
| stretch: false, | |
| // Responsive breakpoints | |
| width: '100%', | |
| height: '100%', | |
| margin: 0, | |
| minScale: 0.2, | |
| maxScale: 2.0, | |
| // Improved slide sizing | |
| size: { | |
| width: '100%', | |
| height: '100%', | |
| maxWidth: 1600, | |
| maxHeight: 900 | |
| }, | |
| // 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 with animation | |
| 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: [ | |
| 'rgba(9, 132, 227, 0.8)', | |
| 'rgba(0, 184, 148, 0.8)', | |
| 'rgba(108, 92, 231, 0.8)', | |
| 'rgba(253, 203, 110, 0.8)', | |
| 'rgba(225, 112, 85, 0.8)' | |
| ], | |
| borderWidth: 2, | |
| borderColor: 'white' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| padding: 20, | |
| font: { | |
| size: 14, | |
| family: 'Inter' | |
| }, | |
| generateLabels: function(chart) { | |
| const data = chart.data; | |
| return data.labels.map((label, i) => ({ | |
| text: `${label} (${data.datasets[0].data[i]}%)`, | |
| fillStyle: data.datasets[0].backgroundColor[i], | |
| strokeStyle: data.datasets[0].borderColor, | |
| lineWidth: data.datasets[0].borderWidth, | |
| hidden: false, | |
| index: i | |
| })); | |
| } | |
| } | |
| }, | |
| title: { | |
| display: true, | |
| text: 'Global Glaucoma Distribution (2023)', | |
| font: { | |
| size: 16, | |
| weight: 'bold', | |
| family: 'Inter' | |
| }, | |
| padding: { | |
| top: 10, | |
| bottom: 30 | |
| } | |
| } | |
| }, | |
| animation: { | |
| animateScale: true, | |
| animateRotate: true, | |
| duration: 2000, | |
| easing: 'easeInOutQuart' | |
| }, | |
| hover: { | |
| mode: 'nearest', | |
| intersect: true, | |
| animationDuration: 200 | |
| } | |
| } | |
| }); | |
| // Counter Animation | |
| const counters = document.querySelectorAll('.counter'); | |
| counters.forEach(counter => { | |
| const target = parseInt(counter.getAttribute('data-target')); | |
| const duration = 2000; // 2 seconds | |
| const step = target / (duration / 16); // 60fps | |
| let current = 0; | |
| const updateCounter = () => { | |
| current += step; | |
| if (current < target) { | |
| counter.textContent = Math.round(current); | |
| requestAnimationFrame(updateCounter); | |
| } else { | |
| counter.textContent = target; | |
| } | |
| }; | |
| updateCounter(); | |
| }); | |
| // Progress bar animation | |
| const progressBars = document.querySelectorAll('.animate-width'); | |
| progressBars.forEach(bar => { | |
| const width = bar.getAttribute('data-width'); | |
| bar.style.setProperty('--target-width', `${width}%`); | |
| }); | |
| // Initialize circular progress | |
| const circles = document.querySelectorAll('.progress-ring__circle'); | |
| circles.forEach(circle => { | |
| const radius = circle.r.baseVal.value; | |
| const circumference = radius * 2 * Math.PI; | |
| circle.style.strokeDasharray = `${circumference} ${circumference}`; | |
| circle.style.strokeDashoffset = circumference; | |
| const progress = circle.closest('.circular-progress').dataset.percentage; | |
| const offset = circumference - (progress / 100 * circumference); | |
| // Animate the progress | |
| setTimeout(() => { | |
| circle.style.strokeDashoffset = offset; | |
| }, 500); | |
| }); | |
| // Initialize eye hotspots | |
| const hotspots = document.querySelectorAll('.hotspot'); | |
| const tooltip = document.querySelector('.tooltip'); | |
| const tooltipTitle = document.querySelector('.tooltip-title'); | |
| const tooltipDescription = document.querySelector('.tooltip-description'); | |
| hotspots.forEach(hotspot => { | |
| hotspot.addEventListener('mouseenter', (e) => { | |
| const rect = hotspot.getBoundingClientRect(); | |
| const title = hotspot.dataset.title; | |
| const description = hotspot.dataset.description; | |
| tooltipTitle.textContent = title; | |
| tooltipDescription.textContent = description; | |
| tooltip.style.visibility = 'visible'; | |
| tooltip.style.opacity = '1'; | |
| // Position tooltip | |
| const tooltipRect = tooltip.getBoundingClientRect(); | |
| const left = rect.left - (tooltipRect.width / 2) + (rect.width / 2); | |
| const top = rect.top - tooltipRect.height - 10; | |
| tooltip.style.left = `${left}px`; | |
| tooltip.style.top = `${top}px`; | |
| }); | |
| hotspot.addEventListener('mouseleave', () => { | |
| tooltip.style.visibility = 'hidden'; | |
| tooltip.style.opacity = '0'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |