Hugging Face's logo

Spaces:
luigi12345
/
autoslides
Running

App Files Community
Sami commited on
Commit
5269745
·
1 Parent(s): 444791c

works

Browse files
Files changed (5) hide show
  1. .history/index_20250131185409.html +405 -0
  2. .history/index_20250131185615.html +531 -0
  3. .history/index_20250131185947.html +588 -0
  4. .history/index_20250131185948.html +588 -0
  5. index.html +196 -13
.history/index_20250131185409.html ADDED
@@ -0,0 +1,405 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Glaucoma: A Comprehensive Overview</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --r-main-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
12
+ --r-heading-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
13
+ --r-main-color: #2d3436;
14
+ --r-heading-color: #0984e3;
15
+ }
16
+
17
+ .reveal .slides {
18
+ text-align: left;
19
+ font-family: var(--r-main-font);
20
+ }
21
+
22
+ .reveal .slides section {
23
+ padding: 40px;
24
+ transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
25
+ opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
26
+ }
27
+
28
+ .reveal h1, .reveal h2 {
29
+ color: var(--r-heading-color);
30
+ font-weight: 600;
31
+ letter-spacing: -0.02em;
32
+ margin-bottom: 1em;
33
+ }
34
+
35
+ .reveal p, .reveal li {
36
+ font-size: 1.1em;
37
+ line-height: 1.6;
38
+ color: var(--r-main-color);
39
+ }
40
+
41
+ .reveal ul, .reveal ol {
42
+ background: #f8f9fa;
43
+ border-radius: 8px;
44
+ padding: 20px 40px;
45
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
46
+ }
47
+
48
+ .image-container {
49
+ background: white;
50
+ padding: 20px;
51
+ border-radius: 12px;
52
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
53
+ margin: 20px 0;
54
+ }
55
+
56
+ .image-container img {
57
+ max-width: 100%;
58
+ border-radius: 8px;
59
+ display: block;
60
+ margin: 0 auto;
61
+ }
62
+
63
+ .image-caption {
64
+ text-align: center;
65
+ color: #636e72;
66
+ font-size: 0.8em;
67
+ margin-top: 10px;
68
+ }
69
+
70
+ /* Navigation buttons styling */
71
+ .reveal .controls {
72
+ color: var(--r-heading-color);
73
+ }
74
+
75
+ .reveal .controls button {
76
+ padding: 12px;
77
+ background: rgba(255, 255, 255, 0.9);
78
+ border-radius: 50%;
79
+ transition: all 0.3s ease;
80
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
81
+ }
82
+
83
+ .reveal .controls button:hover {
84
+ background: var(--r-heading-color);
85
+ color: white;
86
+ transform: scale(1.1);
87
+ }
88
+
89
+ /* Progress bar enhancement */
90
+ .reveal .progress {
91
+ height: 4px;
92
+ background: rgba(9, 132, 227, 0.2);
93
+ }
94
+
95
+ .reveal .progress span {
96
+ background: var(--r-heading-color);
97
+ transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
98
+ }
99
+
100
+ /* Enhanced image handling */
101
+ .slide-image {
102
+ max-height: 50vh;
103
+ width: auto;
104
+ margin: 20px auto;
105
+ border-radius: 12px;
106
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
107
+ transition: transform 0.3s ease;
108
+ }
109
+
110
+ .slide-image:hover {
111
+ transform: scale(1.02);
112
+ }
113
+
114
+ /* Two-column layout */
115
+ .columns {
116
+ display: flex;
117
+ justify-content: space-between;
118
+ gap: 40px;
119
+ margin: 20px 0;
120
+ }
121
+
122
+ .column {
123
+ flex: 1;
124
+ }
125
+
126
+ /* Visual elements */
127
+ .highlight-box {
128
+ background: linear-gradient(135deg, rgba(9, 132, 227, 0.1), rgba(9, 132, 227, 0.05));
129
+ border-left: 4px solid var(--r-heading-color);
130
+ padding: 20px;
131
+ border-radius: 8px;
132
+ margin: 20px 0;
133
+ }
134
+
135
+ .icon-text {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 15px;
139
+ margin: 10px 0;
140
+ }
141
+
142
+ .icon-text i {
143
+ color: var(--r-heading-color);
144
+ font-size: 1.5em;
145
+ }
146
+ </style>
147
+ </head>
148
+ <body>
149
+ <div class="reveal">
150
+ <div class="slides">
151
+
152
+ <section>
153
+ <h1>Glaucoma: Understanding and Protecting Your Vision</h1>
154
+ <div class="columns">
155
+ <div class="column">
156
+ <p class="highlight-box">A comprehensive guide to understanding, preventing, and treating glaucoma</p>
157
+ <div class="icon-text">
158
+ <i class="fas fa-eye"></i>
159
+ <p>Leading cause of irreversible blindness worldwide</p>
160
+ </div>
161
+ <div class="icon-text">
162
+ <i class="fas fa-clock"></i>
163
+ <p>Early detection is crucial for prevention</p>
164
+ </div>
165
+ </div>
166
+ <div class="column">
167
+
168
+ </div>
169
+ </div>
170
+ </section>
171
+
172
+ <section>
173
+ <h2>What is Glaucoma?</h2>
174
+ <div class="columns">
175
+ <div class="column">
176
+ <div class="highlight-box">
177
+ <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
178
+ </div>
179
+ <div class="icon-text">
180
+ <i class="fas fa-exclamation-triangle"></i>
181
+ <p>Often called the "silent thief of sight"</p>
182
+ </div>
183
+ </div>
184
+ <div class="column">
185
+ <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80"
186
+ alt="Eye Close-up" class="slide-image">
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <section>
192
+ <h2>Types of Glaucoma</h2>
193
+ <div class="columns">
194
+ <div class="column">
195
+ <ul>
196
+ <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li>
197
+ <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li>
198
+ <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li>
199
+ </ul>
200
+ </div>
201
+ <div class="column">
202
+ <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80"
203
+ alt="Eye Diagram" class="slide-image">
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)">
209
+ <h2>Risk Factors</h2>
210
+ <div class="columns">
211
+ <div class="column">
212
+ <div class="highlight-box">
213
+ <h3>Primary Risk Factors</h3>
214
+ <ul>
215
+ <li><i class="fas fa-user"></i> Age over 60</li>
216
+ <li><i class="fas fa-dna"></i> Family history</li>
217
+ <li><i class="fas fa-globe"></i> Ethnicity</li>
218
+ </ul>
219
+ </div>
220
+ </div>
221
+ <div class="column">
222
+ <div class="highlight-box">
223
+ <h3>Medical Risk Factors</h3>
224
+ <ul>
225
+ <li><i class="fas fa-heartbeat"></i> High blood pressure</li>
226
+ <li><i class="fas fa-prescription"></i> Diabetes</li>
227
+ <li><i class="fas fa-pills"></i> Long-term steroid use</li>
228
+ </ul>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <section>
235
+ <h2>Symptoms of Glaucoma</h2>
236
+ <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>
237
+ <ul>
238
+ <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li>
239
+ <li><strong>Tunnel vision in advanced stages</strong></li>
240
+ <li><strong>Severe eye pain (Angle-closure)</strong></li>
241
+ <li><strong>Nausea and vomiting (Angle-closure)</strong></li>
242
+ <li><strong>Blurred vision</strong></li>
243
+ <li><strong>Halos around lights</strong></li>
244
+ <li><strong>Redness of the eye</strong></li>
245
+ </ul>
246
+ <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;">
247
+ <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p>
248
+ </section>
249
+
250
+ <section>
251
+ <h2>Diagnosis</h2>
252
+ <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p>
253
+ <ol>
254
+ <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li>
255
+ <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li>
256
+ <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li>
257
+ <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li>
258
+ <li><strong>Pachymetry:</strong> Measures corneal thickness.</li>
259
+ <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li>
260
+ </ol>
261
+ <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;">
262
+ <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p>
263
+ </section>
264
+
265
+ <section>
266
+ <h2>Treatment: Eye Drops</h2>
267
+ <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p>
268
+ <ul>
269
+ <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li>
270
+ <li><strong>Beta-blockers:</strong> Reduce fluid production.</li>
271
+ <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li>
272
+ <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li>
273
+ <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li>
274
+ </ul>
275
+ <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;">
276
+ <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p>
277
+ </section>
278
+
279
+ <section>
280
+ <h2>Treatment: Laser Therapy</h2>
281
+ <p>Laser procedures can help increase fluid drainage in the eye.</p>
282
+ <ul>
283
+ <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li>
284
+ <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li>
285
+ <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li>
286
+ </ul>
287
+ <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;">
288
+ <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p>
289
+ </section>
290
+
291
+ <section>
292
+ <h2>Treatment: Surgery</h2>
293
+ <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p>
294
+ <ul>
295
+ <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li>
296
+ <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li>
297
+ <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li>
298
+ </ul>
299
+ <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;">
300
+ <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p>
301
+ </section>
302
+
303
+ <section>
304
+ <h2>Living with Glaucoma</h2>
305
+ <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p>
306
+ <ul>
307
+ <li><strong>Regular eye exams are vital.</strong></li>
308
+ <li><strong>Adhere to prescribed treatments.</strong></li>
309
+ <li><strong>Maintain a healthy lifestyle.</strong></li>
310
+ <li><strong>Support groups and resources are available.</strong></li>
311
+ </ul>
312
+ <p><strong>Protect your vision. Get regular eye checks!</strong></p>
313
+ <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;">
314
+ <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p>
315
+ </section>
316
+
317
+ </div>
318
+ </div>
319
+
320
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
321
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script>
322
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
323
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
324
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
325
+
326
+ <script>
327
+ Reveal.initialize({
328
+ // Modern configuration
329
+ hash: true,
330
+ mouseWheel: false,
331
+ transition: 'slide',
332
+ transitionSpeed: 'default',
333
+ backgroundTransition: 'fade',
334
+ autoPlayMedia: true,
335
+
336
+ // Enhanced animation settings
337
+ viewDistance: 3,
338
+ autoSlide: 0,
339
+ autoSlideStoppable: true,
340
+
341
+ // Improved navigation
342
+ controls: true,
343
+ controlsTutorial: true,
344
+ controlsLayout: 'bottom-right',
345
+ controlsBackArrows: 'faded',
346
+ progress: true,
347
+ center: true,
348
+
349
+ // Modern responsive design
350
+ width: 1200,
351
+ height: 700,
352
+ margin: 0.04,
353
+ minScale: 0.2,
354
+ maxScale: 2.0,
355
+
356
+ // Keyboard navigation
357
+ keyboard: {
358
+ 13: 'next', // Enter
359
+ 27: () => { }, // Escape (disable default ESC behavior)
360
+ 32: 'next', // Space
361
+ 37: 'prev', // Left arrow
362
+ 38: 'prev', // Up arrow
363
+ 39: 'next', // Right arrow
364
+ 40: 'next' // Down arrow
365
+ },
366
+
367
+ // Plugins
368
+ plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ],
369
+
370
+ // Progress bar styling
371
+ progress: {
372
+ color: '#0984e3',
373
+ height: '4px'
374
+ }
375
+ });
376
+
377
+ // Add keyboard shortcut for overview mode
378
+ document.addEventListener('keydown', function(event) {
379
+ if (event.key === 'o') {
380
+ Reveal.toggleOverview();
381
+ }
382
+ });
383
+
384
+ // Add smooth scroll behavior
385
+ Reveal.configure({
386
+ slideNumber: 'c/t',
387
+ touch: true,
388
+ hideInactiveCursor: true,
389
+ hideCursorTime: 3000
390
+ });
391
+
392
+ // Add animation on slide change
393
+ Reveal.on('slidechanged', event => {
394
+ const currentSlide = event.currentSlide;
395
+ const images = currentSlide.querySelectorAll('.slide-image');
396
+ images.forEach(img => {
397
+ img.style.opacity = 0;
398
+ setTimeout(() => {
399
+ img.style.opacity = 1;
400
+ }, 200);
401
+ });
402
+ });
403
+ </script>
404
+ </body>
405
+ </html>
.history/index_20250131185615.html ADDED
@@ -0,0 +1,531 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Glaucoma: A Comprehensive Overview</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --r-main-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
12
+ --r-heading-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
13
+ --r-main-color: #2d3436;
14
+ --r-heading-color: #0984e3;
15
+ }
16
+
17
+ .reveal .slides {
18
+ text-align: left;
19
+ font-family: var(--r-main-font);
20
+ }
21
+
22
+ .reveal .slides section {
23
+ padding: 40px;
24
+ transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
25
+ opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
26
+ }
27
+
28
+ .reveal h1, .reveal h2 {
29
+ color: var(--r-heading-color);
30
+ font-weight: 600;
31
+ letter-spacing: -0.02em;
32
+ margin-bottom: 1em;
33
+ }
34
+
35
+ .reveal p, .reveal li {
36
+ font-size: 1.1em;
37
+ line-height: 1.6;
38
+ color: var(--r-main-color);
39
+ }
40
+
41
+ .reveal ul, .reveal ol {
42
+ background: #f8f9fa;
43
+ border-radius: 8px;
44
+ padding: 20px 40px;
45
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
46
+ }
47
+
48
+ .image-container {
49
+ background: white;
50
+ padding: 20px;
51
+ border-radius: 12px;
52
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
53
+ margin: 20px 0;
54
+ }
55
+
56
+ .image-container img {
57
+ max-width: 100%;
58
+ border-radius: 8px;
59
+ display: block;
60
+ margin: 0 auto;
61
+ }
62
+
63
+ .image-caption {
64
+ text-align: center;
65
+ color: #636e72;
66
+ font-size: 0.8em;
67
+ margin-top: 10px;
68
+ }
69
+
70
+ /* Navigation buttons styling */
71
+ .reveal .controls {
72
+ color: var(--r-heading-color);
73
+ }
74
+
75
+ .reveal .controls button {
76
+ padding: 12px;
77
+ background: rgba(255, 255, 255, 0.9);
78
+ border-radius: 50%;
79
+ transition: all 0.3s ease;
80
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
81
+ }
82
+
83
+ .reveal .controls button:hover {
84
+ background: var(--r-heading-color);
85
+ color: white;
86
+ transform: scale(1.1);
87
+ }
88
+
89
+ /* Progress bar enhancement */
90
+ .reveal .progress {
91
+ height: 4px;
92
+ background: rgba(9, 132, 227, 0.2);
93
+ }
94
+
95
+ .reveal .progress span {
96
+ background: var(--r-heading-color);
97
+ transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
98
+ }
99
+
100
+ /* Enhanced image handling */
101
+ .slide-image {
102
+ max-height: 50vh;
103
+ width: auto;
104
+ margin: 20px auto;
105
+ border-radius: 12px;
106
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
107
+ transition: transform 0.3s ease;
108
+ }
109
+
110
+ .slide-image:hover {
111
+ transform: scale(1.02);
112
+ }
113
+
114
+ /* Two-column layout */
115
+ .columns {
116
+ display: flex;
117
+ justify-content: space-between;
118
+ gap: 40px;
119
+ margin: 20px 0;
120
+ }
121
+
122
+ .column {
123
+ flex: 1;
124
+ }
125
+
126
+ /* Visual elements */
127
+ .highlight-box {
128
+ background: linear-gradient(135deg, rgba(9, 132, 227, 0.1), rgba(9, 132, 227, 0.05));
129
+ border-left: 4px solid var(--r-heading-color);
130
+ padding: 20px;
131
+ border-radius: 8px;
132
+ margin: 20px 0;
133
+ }
134
+
135
+ .icon-text {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 15px;
139
+ margin: 10px 0;
140
+ }
141
+
142
+ .icon-text i {
143
+ color: var(--r-heading-color);
144
+ font-size: 1.5em;
145
+ }
146
+
147
+ .stats-grid {
148
+ display: grid;
149
+ grid-template-columns: repeat(2, 1fr);
150
+ gap: 20px;
151
+ margin-top: 20px;
152
+ }
153
+
154
+ .stat-item {
155
+ text-align: center;
156
+ padding: 15px;
157
+ background: rgba(255, 255, 255, 0.9);
158
+ border-radius: 8px;
159
+ }
160
+
161
+ .stat-number {
162
+ display: block;
163
+ font-size: 2em;
164
+ font-weight: bold;
165
+ color: var(--r-heading-color);
166
+ }
167
+
168
+ .stat-label {
169
+ font-size: 0.9em;
170
+ color: #666;
171
+ }
172
+
173
+ .chart-container {
174
+ background: white;
175
+ padding: 20px;
176
+ border-radius: 12px;
177
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
178
+ }
179
+
180
+ .chart-caption {
181
+ text-align: center;
182
+ font-size: 0.9em;
183
+ color: #666;
184
+ margin-top: 10px;
185
+ }
186
+
187
+ .interactive-eye {
188
+ position: relative;
189
+ }
190
+
191
+ .eye-hotspots .hotspot {
192
+ position: absolute;
193
+ width: 20px;
194
+ height: 20px;
195
+ background: rgba(9, 132, 227, 0.5);
196
+ border-radius: 50%;
197
+ cursor: pointer;
198
+ transition: all 0.3s ease;
199
+ }
200
+
201
+ .eye-hotspots .hotspot:hover {
202
+ background: rgba(9, 132, 227, 0.8);
203
+ transform: scale(1.2);
204
+ }
205
+
206
+ .eye-hotspots .hotspot:hover::after {
207
+ content: attr(data-tooltip);
208
+ position: absolute;
209
+ bottom: 100%;
210
+ left: 50%;
211
+ transform: translateX(-50%);
212
+ background: rgba(0, 0, 0, 0.8);
213
+ color: white;
214
+ padding: 5px 10px;
215
+ border-radius: 4px;
216
+ font-size: 0.8em;
217
+ white-space: nowrap;
218
+ }
219
+ </style>
220
+ </head>
221
+ <body>
222
+ <div class="reveal">
223
+ <div class="slides">
224
+
225
+ <section>
226
+ <h1>Glaucoma: Understanding and Protecting Your Vision</h1>
227
+ <div class="columns">
228
+ <div class="column">
229
+ <p class="highlight-box">A comprehensive guide to understanding, preventing, and treating glaucoma</p>
230
+ <div class="icon-text">
231
+ <i class="fas fa-eye"></i>
232
+ <p>Leading cause of irreversible blindness worldwide</p>
233
+ </div>
234
+ <div class="icon-text">
235
+ <i class="fas fa-clock"></i>
236
+ <p>Early detection is crucial for prevention</p>
237
+ </div>
238
+ <div class="icon-text">
239
+ <i class="fas fa-chart-line"></i>
240
+ <p>Affects over 80 million people globally</p>
241
+ </div>
242
+ </div>
243
+ <div class="column">
244
+ <div class="chart-container">
245
+ <canvas id="globalPrevalenceChart"></canvas>
246
+ <p class="chart-caption">Global Glaucoma Prevalence by Region (2020)</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <section>
253
+ <h2>What is Glaucoma?</h2>
254
+ <div class="columns">
255
+ <div class="column">
256
+ <div class="highlight-box">
257
+ <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
258
+ <div class="stats-grid">
259
+ <div class="stat-item">
260
+ <span class="stat-number">50%</span>
261
+ <span class="stat-label">of cases are undiagnosed</span>
262
+ </div>
263
+ <div class="stat-item">
264
+ <span class="stat-number">2040</span>
265
+ <span class="stat-label">111.8M projected cases</span>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ <div class="icon-text">
270
+ <i class="fas fa-exclamation-triangle"></i>
271
+ <p>Often called the "silent thief of sight"</p>
272
+ </div>
273
+ </div>
274
+ <div class="column">
275
+ <div class="interactive-eye">
276
+ <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg"
277
+ alt="Eye Anatomy" class="slide-image">
278
+ <div class="eye-hotspots">
279
+ <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div>
280
+ <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div>
281
+ <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+
288
+ <section>
289
+ <h2>Types of Glaucoma</h2>
290
+ <div class="columns">
291
+ <div class="column">
292
+ <ul>
293
+ <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li>
294
+ <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li>
295
+ <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li>
296
+ </ul>
297
+ </div>
298
+ <div class="column">
299
+ <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80"
300
+ alt="Eye Diagram" class="slide-image">
301
+ </div>
302
+ </div>
303
+ </section>
304
+
305
+ <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)">
306
+ <h2>Risk Factors</h2>
307
+ <div class="columns">
308
+ <div class="column">
309
+ <div class="highlight-box">
310
+ <h3>Primary Risk Factors</h3>
311
+ <ul>
312
+ <li><i class="fas fa-user"></i> Age over 60</li>
313
+ <li><i class="fas fa-dna"></i> Family history</li>
314
+ <li><i class="fas fa-globe"></i> Ethnicity</li>
315
+ </ul>
316
+ </div>
317
+ </div>
318
+ <div class="column">
319
+ <div class="highlight-box">
320
+ <h3>Medical Risk Factors</h3>
321
+ <ul>
322
+ <li><i class="fas fa-heartbeat"></i> High blood pressure</li>
323
+ <li><i class="fas fa-prescription"></i> Diabetes</li>
324
+ <li><i class="fas fa-pills"></i> Long-term steroid use</li>
325
+ </ul>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <section>
332
+ <h2>Symptoms of Glaucoma</h2>
333
+ <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>
334
+ <ul>
335
+ <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li>
336
+ <li><strong>Tunnel vision in advanced stages</strong></li>
337
+ <li><strong>Severe eye pain (Angle-closure)</strong></li>
338
+ <li><strong>Nausea and vomiting (Angle-closure)</strong></li>
339
+ <li><strong>Blurred vision</strong></li>
340
+ <li><strong>Halos around lights</strong></li>
341
+ <li><strong>Redness of the eye</strong></li>
342
+ </ul>
343
+ <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;">
344
+ <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p>
345
+ </section>
346
+
347
+ <section>
348
+ <h2>Diagnosis</h2>
349
+ <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p>
350
+ <ol>
351
+ <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li>
352
+ <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li>
353
+ <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li>
354
+ <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li>
355
+ <li><strong>Pachymetry:</strong> Measures corneal thickness.</li>
356
+ <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li>
357
+ </ol>
358
+ <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;">
359
+ <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p>
360
+ </section>
361
+
362
+ <section>
363
+ <h2>Treatment: Eye Drops</h2>
364
+ <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p>
365
+ <ul>
366
+ <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li>
367
+ <li><strong>Beta-blockers:</strong> Reduce fluid production.</li>
368
+ <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li>
369
+ <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li>
370
+ <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li>
371
+ </ul>
372
+ <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;">
373
+ <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p>
374
+ </section>
375
+
376
+ <section>
377
+ <h2>Treatment: Laser Therapy</h2>
378
+ <p>Laser procedures can help increase fluid drainage in the eye.</p>
379
+ <ul>
380
+ <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li>
381
+ <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li>
382
+ <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li>
383
+ </ul>
384
+ <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;">
385
+ <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p>
386
+ </section>
387
+
388
+ <section>
389
+ <h2>Treatment: Surgery</h2>
390
+ <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p>
391
+ <ul>
392
+ <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li>
393
+ <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li>
394
+ <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li>
395
+ </ul>
396
+ <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;">
397
+ <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p>
398
+ </section>
399
+
400
+ <section>
401
+ <h2>Living with Glaucoma</h2>
402
+ <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p>
403
+ <ul>
404
+ <li><strong>Regular eye exams are vital.</strong></li>
405
+ <li><strong>Adhere to prescribed treatments.</strong></li>
406
+ <li><strong>Maintain a healthy lifestyle.</strong></li>
407
+ <li><strong>Support groups and resources are available.</strong></li>
408
+ </ul>
409
+ <p><strong>Protect your vision. Get regular eye checks!</strong></p>
410
+ <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;">
411
+ <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p>
412
+ </section>
413
+
414
+ </div>
415
+ </div>
416
+
417
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
418
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script>
419
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
420
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
421
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
422
+
423
+ <script>
424
+ Reveal.initialize({
425
+ // Modern configuration
426
+ hash: true,
427
+ mouseWheel: false,
428
+ transition: 'slide',
429
+ transitionSpeed: 'default',
430
+ backgroundTransition: 'fade',
431
+ autoPlayMedia: true,
432
+
433
+ // Enhanced animation settings
434
+ viewDistance: 3,
435
+ autoSlide: 0,
436
+ autoSlideStoppable: true,
437
+
438
+ // Improved navigation
439
+ controls: true,
440
+ controlsTutorial: true,
441
+ controlsLayout: 'bottom-right',
442
+ controlsBackArrows: 'faded',
443
+ progress: true,
444
+ center: true,
445
+
446
+ // Modern responsive design
447
+ width: 1200,
448
+ height: 700,
449
+ margin: 0.04,
450
+ minScale: 0.2,
451
+ maxScale: 2.0,
452
+
453
+ // Keyboard navigation
454
+ keyboard: {
455
+ 13: 'next', // Enter
456
+ 27: () => { }, // Escape (disable default ESC behavior)
457
+ 32: 'next', // Space
458
+ 37: 'prev', // Left arrow
459
+ 38: 'prev', // Up arrow
460
+ 39: 'next', // Right arrow
461
+ 40: 'next' // Down arrow
462
+ },
463
+
464
+ // Plugins
465
+ plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ],
466
+
467
+ // Progress bar styling
468
+ progress: {
469
+ color: '#0984e3',
470
+ height: '4px'
471
+ }
472
+ });
473
+
474
+ // Add keyboard shortcut for overview mode
475
+ document.addEventListener('keydown', function(event) {
476
+ if (event.key === 'o') {
477
+ Reveal.toggleOverview();
478
+ }
479
+ });
480
+
481
+ // Add smooth scroll behavior
482
+ Reveal.configure({
483
+ slideNumber: 'c/t',
484
+ touch: true,
485
+ hideInactiveCursor: true,
486
+ hideCursorTime: 3000
487
+ });
488
+
489
+ // Add animation on slide change
490
+ Reveal.on('slidechanged', event => {
491
+ const currentSlide = event.currentSlide;
492
+ const images = currentSlide.querySelectorAll('.slide-image');
493
+ images.forEach(img => {
494
+ img.style.opacity = 0;
495
+ setTimeout(() => {
496
+ img.style.opacity = 1;
497
+ }, 200);
498
+ });
499
+ });
500
+
501
+ // Initialize charts
502
+ document.addEventListener('DOMContentLoaded', function() {
503
+ const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
504
+ new Chart(ctx, {
505
+ type: 'doughnut',
506
+ data: {
507
+ labels: ['Asia', 'Africa', 'Europe', 'Americas', 'Oceania'],
508
+ datasets: [{
509
+ data: [45, 20, 15, 15, 5],
510
+ backgroundColor: [
511
+ '#0984e3',
512
+ '#00b894',
513
+ '#6c5ce7',
514
+ '#fdcb6e',
515
+ '#e17055'
516
+ ]
517
+ }]
518
+ },
519
+ options: {
520
+ responsive: true,
521
+ plugins: {
522
+ legend: {
523
+ position: 'bottom'
524
+ }
525
+ }
526
+ }
527
+ });
528
+ });
529
+ </script>
530
+ </body>
531
+ </html>
.history/index_20250131185947.html ADDED
@@ -0,0 +1,588 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Glaucoma: A Comprehensive Overview</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.min.css">
10
+ <style>
11
+ :root {
12
+ --r-main-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
13
+ --r-heading-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
14
+ --r-main-color: #2d3436;
15
+ --r-heading-color: #0984e3;
16
+ }
17
+
18
+ .reveal .slides {
19
+ text-align: left;
20
+ font-family: var(--r-main-font);
21
+ }
22
+
23
+ .reveal .slides section {
24
+ width: 100%;
25
+ height: 100%;
26
+ padding: 40px;
27
+ box-sizing: border-box;
28
+ display: flex;
29
+ flex-direction: column;
30
+ justify-content: center;
31
+ transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
32
+ opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
33
+ }
34
+
35
+ .reveal h1, .reveal h2 {
36
+ color: var(--r-heading-color);
37
+ font-weight: 600;
38
+ letter-spacing: -0.02em;
39
+ margin-bottom: 1em;
40
+ }
41
+
42
+ .reveal p, .reveal li {
43
+ font-size: 1.1em;
44
+ line-height: 1.6;
45
+ color: var(--r-main-color);
46
+ }
47
+
48
+ .reveal ul, .reveal ol {
49
+ background: #f8f9fa;
50
+ border-radius: 8px;
51
+ padding: 20px 40px;
52
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
53
+ }
54
+
55
+ .image-container {
56
+ background: white;
57
+ padding: 20px;
58
+ border-radius: 12px;
59
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
60
+ margin: 20px 0;
61
+ }
62
+
63
+ .image-container img {
64
+ max-width: 100%;
65
+ border-radius: 8px;
66
+ display: block;
67
+ margin: 0 auto;
68
+ }
69
+
70
+ .image-caption {
71
+ text-align: center;
72
+ color: #636e72;
73
+ font-size: 0.8em;
74
+ margin-top: 10px;
75
+ }
76
+
77
+ /* Navigation buttons styling */
78
+ .reveal .controls {
79
+ color: var(--r-heading-color);
80
+ }
81
+
82
+ .reveal .controls button {
83
+ padding: 12px;
84
+ background: rgba(255, 255, 255, 0.9);
85
+ border-radius: 50%;
86
+ transition: all 0.3s ease;
87
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
88
+ }
89
+
90
+ .reveal .controls button:hover {
91
+ background: var(--r-heading-color);
92
+ color: white;
93
+ transform: scale(1.1);
94
+ }
95
+
96
+ /* Progress bar enhancement */
97
+ .reveal .progress {
98
+ height: 4px;
99
+ background: rgba(9, 132, 227, 0.2);
100
+ }
101
+
102
+ .reveal .progress span {
103
+ background: var(--r-heading-color);
104
+ transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
105
+ }
106
+
107
+ /* Enhanced image handling */
108
+ .slide-image {
109
+ max-height: 50vh;
110
+ width: auto;
111
+ margin: 20px auto;
112
+ border-radius: 12px;
113
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
114
+ transition: transform 0.3s ease;
115
+ }
116
+
117
+ .slide-image:hover {
118
+ transform: scale(1.02);
119
+ }
120
+
121
+ /* Two-column layout */
122
+ .columns {
123
+ display: flex;
124
+ justify-content: space-between;
125
+ gap: 40px;
126
+ margin: 20px 0;
127
+ }
128
+
129
+ .column {
130
+ flex: 1;
131
+ }
132
+
133
+ /* Visual elements */
134
+ .highlight-box {
135
+ background: linear-gradient(135deg, rgba(9, 132, 227, 0.1), rgba(9, 132, 227, 0.05));
136
+ border-left: 4px solid var(--r-heading-color);
137
+ padding: 20px;
138
+ border-radius: 8px;
139
+ margin: 20px 0;
140
+ }
141
+
142
+ .icon-text {
143
+ display: flex;
144
+ align-items: center;
145
+ gap: 15px;
146
+ margin: 10px 0;
147
+ }
148
+
149
+ .icon-text i {
150
+ color: var(--r-heading-color);
151
+ font-size: 1.5em;
152
+ }
153
+
154
+ .stats-grid {
155
+ display: grid;
156
+ grid-template-columns: repeat(3, 1fr);
157
+ gap: 20px;
158
+ margin: 20px 0;
159
+ }
160
+
161
+ .stat-card {
162
+ background: white;
163
+ padding: 20px;
164
+ border-radius: 12px;
165
+ text-align: center;
166
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
167
+ transition: transform 0.3s ease;
168
+ }
169
+
170
+ .stat-card:hover {
171
+ transform: translateY(-5px);
172
+ }
173
+
174
+ .stat-number {
175
+ font-size: 2.5em;
176
+ font-weight: bold;
177
+ color: var(--r-heading-color);
178
+ margin-bottom: 10px;
179
+ }
180
+
181
+ .progress-bar {
182
+ height: 8px;
183
+ background: rgba(9, 132, 227, 0.1);
184
+ border-radius: 4px;
185
+ overflow: hidden;
186
+ margin: 10px 0;
187
+ }
188
+
189
+ .progress-bar .fill {
190
+ height: 100%;
191
+ background: var(--r-heading-color);
192
+ transition: width 1s ease;
193
+ }
194
+
195
+ .chart-container {
196
+ position: relative;
197
+ width: 100%;
198
+ height: 300px;
199
+ background: rgba(255, 255, 255, 0.95);
200
+ padding: 20px;
201
+ border-radius: 12px;
202
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
203
+ }
204
+
205
+ .chart-caption {
206
+ text-align: center;
207
+ font-size: 0.9em;
208
+ color: #666;
209
+ margin-top: 10px;
210
+ }
211
+
212
+ .interactive-eye {
213
+ position: relative;
214
+ }
215
+
216
+ .eye-hotspots .hotspot {
217
+ position: absolute;
218
+ width: 20px;
219
+ height: 20px;
220
+ background: rgba(9, 132, 227, 0.5);
221
+ border-radius: 50%;
222
+ cursor: pointer;
223
+ transition: all 0.3s ease;
224
+ }
225
+
226
+ .eye-hotspots .hotspot:hover {
227
+ background: rgba(9, 132, 227, 0.8);
228
+ transform: scale(1.2);
229
+ }
230
+
231
+ .eye-hotspots .hotspot:hover::after {
232
+ content: attr(data-tooltip);
233
+ position: absolute;
234
+ bottom: 100%;
235
+ left: 50%;
236
+ transform: translateX(-50%);
237
+ background: rgba(0, 0, 0, 0.8);
238
+ color: white;
239
+ padding: 5px 10px;
240
+ border-radius: 4px;
241
+ font-size: 0.8em;
242
+ white-space: nowrap;
243
+ }
244
+ </style>
245
+ </head>
246
+ <body>
247
+ <div class="reveal">
248
+ <div class="slides">
249
+
250
+ <section class="title-slide">
251
+ <h1>Glaucoma: Understanding and Protecting Your Vision</h1>
252
+ <div class="columns">
253
+ <div class="column">
254
+ <div class="stat-grid">
255
+ <div class="stat-card">
256
+ <i class="fas fa-eye fa-2x" style="color: var(--r-heading-color)"></i>
257
+ <div class="stat-number">80M+</div>
258
+ <p>People Affected Globally</p>
259
+ </div>
260
+ <div class="stat-card">
261
+ <i class="fas fa-chart-line fa-2x" style="color: var(--r-heading-color)"></i>
262
+ <div class="stat-number">111.8M</div>
263
+ <p>Projected by 2040</p>
264
+ </div>
265
+ <div class="stat-card">
266
+ <i class="fas fa-clock fa-2x" style="color: var(--r-heading-color)"></i>
267
+ <div class="stat-number">50%</div>
268
+ <p>Cases Undiagnosed</p>
269
+ </div>
270
+ </div>
271
+ <div class="highlight-box">
272
+ <h3>Global Impact</h3>
273
+ <div class="progress-bar">
274
+ <div class="fill" style="width: 75%"></div>
275
+ </div>
276
+ <p>Leading cause of irreversible blindness worldwide</p>
277
+ </div>
278
+ </div>
279
+ <div class="column">
280
+ <div class="chart-container">
281
+ <canvas id="globalPrevalenceChart"></canvas>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <section>
288
+ <h2>What is Glaucoma?</h2>
289
+ <div class="columns">
290
+ <div class="column">
291
+ <div class="highlight-box">
292
+ <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
293
+ <div class="stats-grid">
294
+ <div class="stat-item">
295
+ <span class="stat-number">50%</span>
296
+ <span class="stat-label">of cases are undiagnosed</span>
297
+ </div>
298
+ <div class="stat-item">
299
+ <span class="stat-number">2040</span>
300
+ <span class="stat-label">111.8M projected cases</span>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ <div class="icon-text">
305
+ <i class="fas fa-exclamation-triangle"></i>
306
+ <p>Often called the "silent thief of sight"</p>
307
+ </div>
308
+ </div>
309
+ <div class="column">
310
+ <div class="interactive-eye">
311
+ <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg"
312
+ alt="Eye Anatomy" class="slide-image">
313
+ <div class="eye-hotspots">
314
+ <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div>
315
+ <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div>
316
+ <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </section>
322
+
323
+ <section>
324
+ <h2>Types of Glaucoma</h2>
325
+ <div class="columns">
326
+ <div class="column">
327
+ <ul>
328
+ <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li>
329
+ <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li>
330
+ <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li>
331
+ </ul>
332
+ </div>
333
+ <div class="column">
334
+ <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80"
335
+ alt="Eye Diagram" class="slide-image">
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)">
341
+ <h2>Risk Factors</h2>
342
+ <div class="columns">
343
+ <div class="column">
344
+ <div class="highlight-box">
345
+ <h3>Primary Risk Factors</h3>
346
+ <ul>
347
+ <li><i class="fas fa-user"></i> Age over 60</li>
348
+ <li><i class="fas fa-dna"></i> Family history</li>
349
+ <li><i class="fas fa-globe"></i> Ethnicity</li>
350
+ </ul>
351
+ </div>
352
+ </div>
353
+ <div class="column">
354
+ <div class="highlight-box">
355
+ <h3>Medical Risk Factors</h3>
356
+ <ul>
357
+ <li><i class="fas fa-heartbeat"></i> High blood pressure</li>
358
+ <li><i class="fas fa-prescription"></i> Diabetes</li>
359
+ <li><i class="fas fa-pills"></i> Long-term steroid use</li>
360
+ </ul>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+ <section>
367
+ <h2>Symptoms of Glaucoma</h2>
368
+ <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>
369
+ <ul>
370
+ <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li>
371
+ <li><strong>Tunnel vision in advanced stages</strong></li>
372
+ <li><strong>Severe eye pain (Angle-closure)</strong></li>
373
+ <li><strong>Nausea and vomiting (Angle-closure)</strong></li>
374
+ <li><strong>Blurred vision</strong></li>
375
+ <li><strong>Halos around lights</strong></li>
376
+ <li><strong>Redness of the eye</strong></li>
377
+ </ul>
378
+ <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;">
379
+ <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p>
380
+ </section>
381
+
382
+ <section>
383
+ <h2>Diagnosis</h2>
384
+ <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p>
385
+ <ol>
386
+ <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li>
387
+ <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li>
388
+ <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li>
389
+ <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li>
390
+ <li><strong>Pachymetry:</strong> Measures corneal thickness.</li>
391
+ <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li>
392
+ </ol>
393
+ <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;">
394
+ <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p>
395
+ </section>
396
+
397
+ <section>
398
+ <h2>Treatment: Eye Drops</h2>
399
+ <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p>
400
+ <ul>
401
+ <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li>
402
+ <li><strong>Beta-blockers:</strong> Reduce fluid production.</li>
403
+ <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li>
404
+ <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li>
405
+ <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li>
406
+ </ul>
407
+ <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;">
408
+ <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p>
409
+ </section>
410
+
411
+ <section>
412
+ <h2>Treatment: Laser Therapy</h2>
413
+ <p>Laser procedures can help increase fluid drainage in the eye.</p>
414
+ <ul>
415
+ <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li>
416
+ <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li>
417
+ <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li>
418
+ </ul>
419
+ <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;">
420
+ <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p>
421
+ </section>
422
+
423
+ <section>
424
+ <h2>Treatment: Surgery</h2>
425
+ <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p>
426
+ <ul>
427
+ <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li>
428
+ <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li>
429
+ <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li>
430
+ </ul>
431
+ <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;">
432
+ <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p>
433
+ </section>
434
+
435
+ <section>
436
+ <h2>Living with Glaucoma</h2>
437
+ <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p>
438
+ <ul>
439
+ <li><strong>Regular eye exams are vital.</strong></li>
440
+ <li><strong>Adhere to prescribed treatments.</strong></li>
441
+ <li><strong>Maintain a healthy lifestyle.</strong></li>
442
+ <li><strong>Support groups and resources are available.</strong></li>
443
+ </ul>
444
+ <p><strong>Protect your vision. Get regular eye checks!</strong></p>
445
+ <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;">
446
+ <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p>
447
+ </section>
448
+
449
+ </div>
450
+ </div>
451
+
452
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
453
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script>
454
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
455
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
456
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
457
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
458
+
459
+ <script>
460
+ Reveal.initialize({
461
+ // Modern configuration
462
+ hash: true,
463
+ mouseWheel: false,
464
+ transition: 'slide',
465
+ transitionSpeed: 'default',
466
+ backgroundTransition: 'fade',
467
+ autoPlayMedia: true,
468
+
469
+ // Enhanced animation settings
470
+ viewDistance: 3,
471
+ autoSlide: 0,
472
+ autoSlideStoppable: true,
473
+
474
+ // Improved navigation
475
+ controls: true,
476
+ controlsTutorial: true,
477
+ controlsLayout: 'bottom-right',
478
+ controlsBackArrows: 'faded',
479
+ progress: true,
480
+ center: true,
481
+
482
+ // Modern responsive design
483
+ width: 1920,
484
+ height: 1080,
485
+ margin: 0.04,
486
+ minScale: 0.2,
487
+ maxScale: 2.0,
488
+
489
+ // Keyboard navigation
490
+ keyboard: {
491
+ 13: 'next', // Enter
492
+ 27: () => { }, // Escape (disable default ESC behavior)
493
+ 32: 'next', // Space
494
+ 37: 'prev', // Left arrow
495
+ 38: 'prev', // Up arrow
496
+ 39: 'next', // Right arrow
497
+ 40: 'next' // Down arrow
498
+ },
499
+
500
+ // Plugins
501
+ plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ],
502
+
503
+ // Progress bar styling
504
+ progress: {
505
+ color: '#0984e3',
506
+ height: '4px'
507
+ }
508
+ });
509
+
510
+ // Add keyboard shortcut for overview mode
511
+ document.addEventListener('keydown', function(event) {
512
+ if (event.key === 'o') {
513
+ Reveal.toggleOverview();
514
+ }
515
+ });
516
+
517
+ // Add smooth scroll behavior
518
+ Reveal.configure({
519
+ slideNumber: 'c/t',
520
+ touch: true,
521
+ hideInactiveCursor: true,
522
+ hideCursorTime: 3000
523
+ });
524
+
525
+ // Add animation on slide change
526
+ Reveal.on('slidechanged', event => {
527
+ const currentSlide = event.currentSlide;
528
+ const images = currentSlide.querySelectorAll('.slide-image');
529
+ images.forEach(img => {
530
+ img.style.opacity = 0;
531
+ setTimeout(() => {
532
+ img.style.opacity = 1;
533
+ }, 200);
534
+ });
535
+ });
536
+
537
+ // Enhanced chart initialization
538
+ document.addEventListener('DOMContentLoaded', function() {
539
+ const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
540
+ new Chart(ctx, {
541
+ type: 'doughnut',
542
+ data: {
543
+ labels: ['Asia Pacific', 'Africa', 'Europe', 'Americas', 'Middle East'],
544
+ datasets: [{
545
+ data: [45, 20, 15, 15, 5],
546
+ backgroundColor: [
547
+ '#0984e3',
548
+ '#00b894',
549
+ '#6c5ce7',
550
+ '#fdcb6e',
551
+ '#e17055'
552
+ ],
553
+ borderWidth: 2,
554
+ borderColor: 'white'
555
+ }]
556
+ },
557
+ options: {
558
+ responsive: true,
559
+ maintainAspectRatio: false,
560
+ plugins: {
561
+ legend: {
562
+ position: 'right',
563
+ labels: {
564
+ padding: 20,
565
+ font: {
566
+ size: 14
567
+ }
568
+ }
569
+ },
570
+ title: {
571
+ display: true,
572
+ text: 'Global Glaucoma Distribution (2023)',
573
+ font: {
574
+ size: 16,
575
+ weight: 'bold'
576
+ }
577
+ }
578
+ },
579
+ animation: {
580
+ animateScale: true,
581
+ animateRotate: true
582
+ }
583
+ }
584
+ });
585
+ });
586
+ </script>
587
+ </body>
588
+ </html>
.history/index_20250131185948.html ADDED
@@ -0,0 +1,588 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Glaucoma: A Comprehensive Overview</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.min.css">
10
+ <style>
11
+ :root {
12
+ --r-main-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
13
+ --r-heading-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
14
+ --r-main-color: #2d3436;
15
+ --r-heading-color: #0984e3;
16
+ }
17
+
18
+ .reveal .slides {
19
+ text-align: left;
20
+ font-family: var(--r-main-font);
21
+ }
22
+
23
+ .reveal .slides section {
24
+ width: 100%;
25
+ height: 100%;
26
+ padding: 40px;
27
+ box-sizing: border-box;
28
+ display: flex;
29
+ flex-direction: column;
30
+ justify-content: center;
31
+ transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
32
+ opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
33
+ }
34
+
35
+ .reveal h1, .reveal h2 {
36
+ color: var(--r-heading-color);
37
+ font-weight: 600;
38
+ letter-spacing: -0.02em;
39
+ margin-bottom: 1em;
40
+ }
41
+
42
+ .reveal p, .reveal li {
43
+ font-size: 1.1em;
44
+ line-height: 1.6;
45
+ color: var(--r-main-color);
46
+ }
47
+
48
+ .reveal ul, .reveal ol {
49
+ background: #f8f9fa;
50
+ border-radius: 8px;
51
+ padding: 20px 40px;
52
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
53
+ }
54
+
55
+ .image-container {
56
+ background: white;
57
+ padding: 20px;
58
+ border-radius: 12px;
59
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
60
+ margin: 20px 0;
61
+ }
62
+
63
+ .image-container img {
64
+ max-width: 100%;
65
+ border-radius: 8px;
66
+ display: block;
67
+ margin: 0 auto;
68
+ }
69
+
70
+ .image-caption {
71
+ text-align: center;
72
+ color: #636e72;
73
+ font-size: 0.8em;
74
+ margin-top: 10px;
75
+ }
76
+
77
+ /* Navigation buttons styling */
78
+ .reveal .controls {
79
+ color: var(--r-heading-color);
80
+ }
81
+
82
+ .reveal .controls button {
83
+ padding: 12px;
84
+ background: rgba(255, 255, 255, 0.9);
85
+ border-radius: 50%;
86
+ transition: all 0.3s ease;
87
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
88
+ }
89
+
90
+ .reveal .controls button:hover {
91
+ background: var(--r-heading-color);
92
+ color: white;
93
+ transform: scale(1.1);
94
+ }
95
+
96
+ /* Progress bar enhancement */
97
+ .reveal .progress {
98
+ height: 4px;
99
+ background: rgba(9, 132, 227, 0.2);
100
+ }
101
+
102
+ .reveal .progress span {
103
+ background: var(--r-heading-color);
104
+ transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
105
+ }
106
+
107
+ /* Enhanced image handling */
108
+ .slide-image {
109
+ max-height: 50vh;
110
+ width: auto;
111
+ margin: 20px auto;
112
+ border-radius: 12px;
113
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
114
+ transition: transform 0.3s ease;
115
+ }
116
+
117
+ .slide-image:hover {
118
+ transform: scale(1.02);
119
+ }
120
+
121
+ /* Two-column layout */
122
+ .columns {
123
+ display: flex;
124
+ justify-content: space-between;
125
+ gap: 40px;
126
+ margin: 20px 0;
127
+ }
128
+
129
+ .column {
130
+ flex: 1;
131
+ }
132
+
133
+ /* Visual elements */
134
+ .highlight-box {
135
+ background: linear-gradient(135deg, rgba(9, 132, 227, 0.1), rgba(9, 132, 227, 0.05));
136
+ border-left: 4px solid var(--r-heading-color);
137
+ padding: 20px;
138
+ border-radius: 8px;
139
+ margin: 20px 0;
140
+ }
141
+
142
+ .icon-text {
143
+ display: flex;
144
+ align-items: center;
145
+ gap: 15px;
146
+ margin: 10px 0;
147
+ }
148
+
149
+ .icon-text i {
150
+ color: var(--r-heading-color);
151
+ font-size: 1.5em;
152
+ }
153
+
154
+ .stats-grid {
155
+ display: grid;
156
+ grid-template-columns: repeat(3, 1fr);
157
+ gap: 20px;
158
+ margin: 20px 0;
159
+ }
160
+
161
+ .stat-card {
162
+ background: white;
163
+ padding: 20px;
164
+ border-radius: 12px;
165
+ text-align: center;
166
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
167
+ transition: transform 0.3s ease;
168
+ }
169
+
170
+ .stat-card:hover {
171
+ transform: translateY(-5px);
172
+ }
173
+
174
+ .stat-number {
175
+ font-size: 2.5em;
176
+ font-weight: bold;
177
+ color: var(--r-heading-color);
178
+ margin-bottom: 10px;
179
+ }
180
+
181
+ .progress-bar {
182
+ height: 8px;
183
+ background: rgba(9, 132, 227, 0.1);
184
+ border-radius: 4px;
185
+ overflow: hidden;
186
+ margin: 10px 0;
187
+ }
188
+
189
+ .progress-bar .fill {
190
+ height: 100%;
191
+ background: var(--r-heading-color);
192
+ transition: width 1s ease;
193
+ }
194
+
195
+ .chart-container {
196
+ position: relative;
197
+ width: 100%;
198
+ height: 300px;
199
+ background: rgba(255, 255, 255, 0.95);
200
+ padding: 20px;
201
+ border-radius: 12px;
202
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
203
+ }
204
+
205
+ .chart-caption {
206
+ text-align: center;
207
+ font-size: 0.9em;
208
+ color: #666;
209
+ margin-top: 10px;
210
+ }
211
+
212
+ .interactive-eye {
213
+ position: relative;
214
+ }
215
+
216
+ .eye-hotspots .hotspot {
217
+ position: absolute;
218
+ width: 20px;
219
+ height: 20px;
220
+ background: rgba(9, 132, 227, 0.5);
221
+ border-radius: 50%;
222
+ cursor: pointer;
223
+ transition: all 0.3s ease;
224
+ }
225
+
226
+ .eye-hotspots .hotspot:hover {
227
+ background: rgba(9, 132, 227, 0.8);
228
+ transform: scale(1.2);
229
+ }
230
+
231
+ .eye-hotspots .hotspot:hover::after {
232
+ content: attr(data-tooltip);
233
+ position: absolute;
234
+ bottom: 100%;
235
+ left: 50%;
236
+ transform: translateX(-50%);
237
+ background: rgba(0, 0, 0, 0.8);
238
+ color: white;
239
+ padding: 5px 10px;
240
+ border-radius: 4px;
241
+ font-size: 0.8em;
242
+ white-space: nowrap;
243
+ }
244
+ </style>
245
+ </head>
246
+ <body>
247
+ <div class="reveal">
248
+ <div class="slides">
249
+
250
+ <section class="title-slide">
251
+ <h1>Glaucoma: Understanding and Protecting Your Vision</h1>
252
+ <div class="columns">
253
+ <div class="column">
254
+ <div class="stat-grid">
255
+ <div class="stat-card">
256
+ <i class="fas fa-eye fa-2x" style="color: var(--r-heading-color)"></i>
257
+ <div class="stat-number">80M+</div>
258
+ <p>People Affected Globally</p>
259
+ </div>
260
+ <div class="stat-card">
261
+ <i class="fas fa-chart-line fa-2x" style="color: var(--r-heading-color)"></i>
262
+ <div class="stat-number">111.8M</div>
263
+ <p>Projected by 2040</p>
264
+ </div>
265
+ <div class="stat-card">
266
+ <i class="fas fa-clock fa-2x" style="color: var(--r-heading-color)"></i>
267
+ <div class="stat-number">50%</div>
268
+ <p>Cases Undiagnosed</p>
269
+ </div>
270
+ </div>
271
+ <div class="highlight-box">
272
+ <h3>Global Impact</h3>
273
+ <div class="progress-bar">
274
+ <div class="fill" style="width: 75%"></div>
275
+ </div>
276
+ <p>Leading cause of irreversible blindness worldwide</p>
277
+ </div>
278
+ </div>
279
+ <div class="column">
280
+ <div class="chart-container">
281
+ <canvas id="globalPrevalenceChart"></canvas>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <section>
288
+ <h2>What is Glaucoma?</h2>
289
+ <div class="columns">
290
+ <div class="column">
291
+ <div class="highlight-box">
292
+ <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
293
+ <div class="stats-grid">
294
+ <div class="stat-item">
295
+ <span class="stat-number">50%</span>
296
+ <span class="stat-label">of cases are undiagnosed</span>
297
+ </div>
298
+ <div class="stat-item">
299
+ <span class="stat-number">2040</span>
300
+ <span class="stat-label">111.8M projected cases</span>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ <div class="icon-text">
305
+ <i class="fas fa-exclamation-triangle"></i>
306
+ <p>Often called the "silent thief of sight"</p>
307
+ </div>
308
+ </div>
309
+ <div class="column">
310
+ <div class="interactive-eye">
311
+ <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg"
312
+ alt="Eye Anatomy" class="slide-image">
313
+ <div class="eye-hotspots">
314
+ <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div>
315
+ <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div>
316
+ <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </section>
322
+
323
+ <section>
324
+ <h2>Types of Glaucoma</h2>
325
+ <div class="columns">
326
+ <div class="column">
327
+ <ul>
328
+ <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li>
329
+ <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li>
330
+ <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li>
331
+ </ul>
332
+ </div>
333
+ <div class="column">
334
+ <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80"
335
+ alt="Eye Diagram" class="slide-image">
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)">
341
+ <h2>Risk Factors</h2>
342
+ <div class="columns">
343
+ <div class="column">
344
+ <div class="highlight-box">
345
+ <h3>Primary Risk Factors</h3>
346
+ <ul>
347
+ <li><i class="fas fa-user"></i> Age over 60</li>
348
+ <li><i class="fas fa-dna"></i> Family history</li>
349
+ <li><i class="fas fa-globe"></i> Ethnicity</li>
350
+ </ul>
351
+ </div>
352
+ </div>
353
+ <div class="column">
354
+ <div class="highlight-box">
355
+ <h3>Medical Risk Factors</h3>
356
+ <ul>
357
+ <li><i class="fas fa-heartbeat"></i> High blood pressure</li>
358
+ <li><i class="fas fa-prescription"></i> Diabetes</li>
359
+ <li><i class="fas fa-pills"></i> Long-term steroid use</li>
360
+ </ul>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+ <section>
367
+ <h2>Symptoms of Glaucoma</h2>
368
+ <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>
369
+ <ul>
370
+ <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li>
371
+ <li><strong>Tunnel vision in advanced stages</strong></li>
372
+ <li><strong>Severe eye pain (Angle-closure)</strong></li>
373
+ <li><strong>Nausea and vomiting (Angle-closure)</strong></li>
374
+ <li><strong>Blurred vision</strong></li>
375
+ <li><strong>Halos around lights</strong></li>
376
+ <li><strong>Redness of the eye</strong></li>
377
+ </ul>
378
+ <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;">
379
+ <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p>
380
+ </section>
381
+
382
+ <section>
383
+ <h2>Diagnosis</h2>
384
+ <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p>
385
+ <ol>
386
+ <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li>
387
+ <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li>
388
+ <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li>
389
+ <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li>
390
+ <li><strong>Pachymetry:</strong> Measures corneal thickness.</li>
391
+ <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li>
392
+ </ol>
393
+ <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;">
394
+ <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p>
395
+ </section>
396
+
397
+ <section>
398
+ <h2>Treatment: Eye Drops</h2>
399
+ <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p>
400
+ <ul>
401
+ <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li>
402
+ <li><strong>Beta-blockers:</strong> Reduce fluid production.</li>
403
+ <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li>
404
+ <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li>
405
+ <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li>
406
+ </ul>
407
+ <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;">
408
+ <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p>
409
+ </section>
410
+
411
+ <section>
412
+ <h2>Treatment: Laser Therapy</h2>
413
+ <p>Laser procedures can help increase fluid drainage in the eye.</p>
414
+ <ul>
415
+ <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li>
416
+ <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li>
417
+ <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li>
418
+ </ul>
419
+ <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;">
420
+ <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p>
421
+ </section>
422
+
423
+ <section>
424
+ <h2>Treatment: Surgery</h2>
425
+ <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p>
426
+ <ul>
427
+ <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li>
428
+ <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li>
429
+ <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li>
430
+ </ul>
431
+ <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;">
432
+ <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p>
433
+ </section>
434
+
435
+ <section>
436
+ <h2>Living with Glaucoma</h2>
437
+ <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p>
438
+ <ul>
439
+ <li><strong>Regular eye exams are vital.</strong></li>
440
+ <li><strong>Adhere to prescribed treatments.</strong></li>
441
+ <li><strong>Maintain a healthy lifestyle.</strong></li>
442
+ <li><strong>Support groups and resources are available.</strong></li>
443
+ </ul>
444
+ <p><strong>Protect your vision. Get regular eye checks!</strong></p>
445
+ <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;">
446
+ <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p>
447
+ </section>
448
+
449
+ </div>
450
+ </div>
451
+
452
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
453
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script>
454
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
455
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
456
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
457
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
458
+
459
+ <script>
460
+ Reveal.initialize({
461
+ // Modern configuration
462
+ hash: true,
463
+ mouseWheel: false,
464
+ transition: 'slide',
465
+ transitionSpeed: 'default',
466
+ backgroundTransition: 'fade',
467
+ autoPlayMedia: true,
468
+
469
+ // Enhanced animation settings
470
+ viewDistance: 3,
471
+ autoSlide: 0,
472
+ autoSlideStoppable: true,
473
+
474
+ // Improved navigation
475
+ controls: true,
476
+ controlsTutorial: true,
477
+ controlsLayout: 'bottom-right',
478
+ controlsBackArrows: 'faded',
479
+ progress: true,
480
+ center: true,
481
+
482
+ // Modern responsive design
483
+ width: 1920,
484
+ height: 1080,
485
+ margin: 0.04,
486
+ minScale: 0.2,
487
+ maxScale: 2.0,
488
+
489
+ // Keyboard navigation
490
+ keyboard: {
491
+ 13: 'next', // Enter
492
+ 27: () => { }, // Escape (disable default ESC behavior)
493
+ 32: 'next', // Space
494
+ 37: 'prev', // Left arrow
495
+ 38: 'prev', // Up arrow
496
+ 39: 'next', // Right arrow
497
+ 40: 'next' // Down arrow
498
+ },
499
+
500
+ // Plugins
501
+ plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ],
502
+
503
+ // Progress bar styling
504
+ progress: {
505
+ color: '#0984e3',
506
+ height: '4px'
507
+ }
508
+ });
509
+
510
+ // Add keyboard shortcut for overview mode
511
+ document.addEventListener('keydown', function(event) {
512
+ if (event.key === 'o') {
513
+ Reveal.toggleOverview();
514
+ }
515
+ });
516
+
517
+ // Add smooth scroll behavior
518
+ Reveal.configure({
519
+ slideNumber: 'c/t',
520
+ touch: true,
521
+ hideInactiveCursor: true,
522
+ hideCursorTime: 3000
523
+ });
524
+
525
+ // Add animation on slide change
526
+ Reveal.on('slidechanged', event => {
527
+ const currentSlide = event.currentSlide;
528
+ const images = currentSlide.querySelectorAll('.slide-image');
529
+ images.forEach(img => {
530
+ img.style.opacity = 0;
531
+ setTimeout(() => {
532
+ img.style.opacity = 1;
533
+ }, 200);
534
+ });
535
+ });
536
+
537
+ // Enhanced chart initialization
538
+ document.addEventListener('DOMContentLoaded', function() {
539
+ const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
540
+ new Chart(ctx, {
541
+ type: 'doughnut',
542
+ data: {
543
+ labels: ['Asia Pacific', 'Africa', 'Europe', 'Americas', 'Middle East'],
544
+ datasets: [{
545
+ data: [45, 20, 15, 15, 5],
546
+ backgroundColor: [
547
+ '#0984e3',
548
+ '#00b894',
549
+ '#6c5ce7',
550
+ '#fdcb6e',
551
+ '#e17055'
552
+ ],
553
+ borderWidth: 2,
554
+ borderColor: 'white'
555
+ }]
556
+ },
557
+ options: {
558
+ responsive: true,
559
+ maintainAspectRatio: false,
560
+ plugins: {
561
+ legend: {
562
+ position: 'right',
563
+ labels: {
564
+ padding: 20,
565
+ font: {
566
+ size: 14
567
+ }
568
+ }
569
+ },
570
+ title: {
571
+ display: true,
572
+ text: 'Global Glaucoma Distribution (2023)',
573
+ font: {
574
+ size: 16,
575
+ weight: 'bold'
576
+ }
577
+ }
578
+ },
579
+ animation: {
580
+ animateScale: true,
581
+ animateRotate: true
582
+ }
583
+ }
584
+ });
585
+ });
586
+ </script>
587
+ </body>
588
+ </html>
index.html CHANGED
@@ -6,6 +6,7 @@
6
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css">
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
9
  <style>
10
  :root {
11
  --r-main-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -20,7 +21,13 @@
20
  }
21
 
22
  .reveal .slides section {
 
 
23
  padding: 40px;
 
 
 
 
24
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
25
  opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
26
  }
@@ -143,28 +150,136 @@
143
  color: var(--r-heading-color);
144
  font-size: 1.5em;
145
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </style>
147
  </head>
148
  <body>
149
  <div class="reveal">
150
  <div class="slides">
151
 
152
- <section>
153
  <h1>Glaucoma: Understanding and Protecting Your Vision</h1>
154
  <div class="columns">
155
  <div class="column">
156
- <p class="highlight-box">A comprehensive guide to understanding, preventing, and treating glaucoma</p>
157
- <div class="icon-text">
158
- <i class="fas fa-eye"></i>
159
- <p>Leading cause of irreversible blindness worldwide</p>
 
 
 
 
 
 
 
 
 
 
 
 
160
  </div>
161
- <div class="icon-text">
162
- <i class="fas fa-clock"></i>
163
- <p>Early detection is crucial for prevention</p>
 
 
 
164
  </div>
165
  </div>
166
  <div class="column">
167
-
 
 
168
  </div>
169
  </div>
170
  </section>
@@ -175,6 +290,16 @@
175
  <div class="column">
176
  <div class="highlight-box">
177
  <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
 
 
 
 
 
 
 
 
 
 
178
  </div>
179
  <div class="icon-text">
180
  <i class="fas fa-exclamation-triangle"></i>
@@ -182,8 +307,15 @@
182
  </div>
183
  </div>
184
  <div class="column">
185
- <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80"
186
- alt="Eye Close-up" class="slide-image">
 
 
 
 
 
 
 
187
  </div>
188
  </div>
189
  </section>
@@ -322,6 +454,7 @@
322
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
323
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
324
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
 
325
 
326
  <script>
327
  Reveal.initialize({
@@ -347,8 +480,8 @@
347
  center: true,
348
 
349
  // Modern responsive design
350
- width: 1200,
351
- height: 700,
352
  margin: 0.04,
353
  minScale: 0.2,
354
  maxScale: 2.0,
@@ -400,6 +533,56 @@
400
  }, 200);
401
  });
402
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
  </script>
404
  </body>
405
  </html>
 
6
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css">
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.min.css">
10
  <style>
11
  :root {
12
  --r-main-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
21
  }
22
 
23
  .reveal .slides section {
24
+ width: 100%;
25
+ height: 100%;
26
  padding: 40px;
27
+ box-sizing: border-box;
28
+ display: flex;
29
+ flex-direction: column;
30
+ justify-content: center;
31
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
32
  opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
33
  }
 
150
  color: var(--r-heading-color);
151
  font-size: 1.5em;
152
  }
153
+
154
+ .stats-grid {
155
+ display: grid;
156
+ grid-template-columns: repeat(3, 1fr);
157
+ gap: 20px;
158
+ margin: 20px 0;
159
+ }
160
+
161
+ .stat-card {
162
+ background: white;
163
+ padding: 20px;
164
+ border-radius: 12px;
165
+ text-align: center;
166
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
167
+ transition: transform 0.3s ease;
168
+ }
169
+
170
+ .stat-card:hover {
171
+ transform: translateY(-5px);
172
+ }
173
+
174
+ .stat-number {
175
+ font-size: 2.5em;
176
+ font-weight: bold;
177
+ color: var(--r-heading-color);
178
+ margin-bottom: 10px;
179
+ }
180
+
181
+ .progress-bar {
182
+ height: 8px;
183
+ background: rgba(9, 132, 227, 0.1);
184
+ border-radius: 4px;
185
+ overflow: hidden;
186
+ margin: 10px 0;
187
+ }
188
+
189
+ .progress-bar .fill {
190
+ height: 100%;
191
+ background: var(--r-heading-color);
192
+ transition: width 1s ease;
193
+ }
194
+
195
+ .chart-container {
196
+ position: relative;
197
+ width: 100%;
198
+ height: 300px;
199
+ background: rgba(255, 255, 255, 0.95);
200
+ padding: 20px;
201
+ border-radius: 12px;
202
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
203
+ }
204
+
205
+ .chart-caption {
206
+ text-align: center;
207
+ font-size: 0.9em;
208
+ color: #666;
209
+ margin-top: 10px;
210
+ }
211
+
212
+ .interactive-eye {
213
+ position: relative;
214
+ }
215
+
216
+ .eye-hotspots .hotspot {
217
+ position: absolute;
218
+ width: 20px;
219
+ height: 20px;
220
+ background: rgba(9, 132, 227, 0.5);
221
+ border-radius: 50%;
222
+ cursor: pointer;
223
+ transition: all 0.3s ease;
224
+ }
225
+
226
+ .eye-hotspots .hotspot:hover {
227
+ background: rgba(9, 132, 227, 0.8);
228
+ transform: scale(1.2);
229
+ }
230
+
231
+ .eye-hotspots .hotspot:hover::after {
232
+ content: attr(data-tooltip);
233
+ position: absolute;
234
+ bottom: 100%;
235
+ left: 50%;
236
+ transform: translateX(-50%);
237
+ background: rgba(0, 0, 0, 0.8);
238
+ color: white;
239
+ padding: 5px 10px;
240
+ border-radius: 4px;
241
+ font-size: 0.8em;
242
+ white-space: nowrap;
243
+ }
244
  </style>
245
  </head>
246
  <body>
247
  <div class="reveal">
248
  <div class="slides">
249
 
250
+ <section class="title-slide">
251
  <h1>Glaucoma: Understanding and Protecting Your Vision</h1>
252
  <div class="columns">
253
  <div class="column">
254
+ <div class="stat-grid">
255
+ <div class="stat-card">
256
+ <i class="fas fa-eye fa-2x" style="color: var(--r-heading-color)"></i>
257
+ <div class="stat-number">80M+</div>
258
+ <p>People Affected Globally</p>
259
+ </div>
260
+ <div class="stat-card">
261
+ <i class="fas fa-chart-line fa-2x" style="color: var(--r-heading-color)"></i>
262
+ <div class="stat-number">111.8M</div>
263
+ <p>Projected by 2040</p>
264
+ </div>
265
+ <div class="stat-card">
266
+ <i class="fas fa-clock fa-2x" style="color: var(--r-heading-color)"></i>
267
+ <div class="stat-number">50%</div>
268
+ <p>Cases Undiagnosed</p>
269
+ </div>
270
  </div>
271
+ <div class="highlight-box">
272
+ <h3>Global Impact</h3>
273
+ <div class="progress-bar">
274
+ <div class="fill" style="width: 75%"></div>
275
+ </div>
276
+ <p>Leading cause of irreversible blindness worldwide</p>
277
  </div>
278
  </div>
279
  <div class="column">
280
+ <div class="chart-container">
281
+ <canvas id="globalPrevalenceChart"></canvas>
282
+ </div>
283
  </div>
284
  </div>
285
  </section>
 
290
  <div class="column">
291
  <div class="highlight-box">
292
  <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
293
+ <div class="stats-grid">
294
+ <div class="stat-item">
295
+ <span class="stat-number">50%</span>
296
+ <span class="stat-label">of cases are undiagnosed</span>
297
+ </div>
298
+ <div class="stat-item">
299
+ <span class="stat-number">2040</span>
300
+ <span class="stat-label">111.8M projected cases</span>
301
+ </div>
302
+ </div>
303
  </div>
304
  <div class="icon-text">
305
  <i class="fas fa-exclamation-triangle"></i>
 
307
  </div>
308
  </div>
309
  <div class="column">
310
+ <div class="interactive-eye">
311
+ <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg"
312
+ alt="Eye Anatomy" class="slide-image">
313
+ <div class="eye-hotspots">
314
+ <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div>
315
+ <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div>
316
+ <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div>
317
+ </div>
318
+ </div>
319
  </div>
320
  </div>
321
  </section>
 
454
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
455
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
456
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
457
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
458
 
459
  <script>
460
  Reveal.initialize({
 
480
  center: true,
481
 
482
  // Modern responsive design
483
+ width: 1920,
484
+ height: 1080,
485
  margin: 0.04,
486
  minScale: 0.2,
487
  maxScale: 2.0,
 
533
  }, 200);
534
  });
535
  });
536
+
537
+ // Enhanced chart initialization
538
+ document.addEventListener('DOMContentLoaded', function() {
539
+ const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
540
+ new Chart(ctx, {
541
+ type: 'doughnut',
542
+ data: {
543
+ labels: ['Asia Pacific', 'Africa', 'Europe', 'Americas', 'Middle East'],
544
+ datasets: [{
545
+ data: [45, 20, 15, 15, 5],
546
+ backgroundColor: [
547
+ '#0984e3',
548
+ '#00b894',
549
+ '#6c5ce7',
550
+ '#fdcb6e',
551
+ '#e17055'
552
+ ],
553
+ borderWidth: 2,
554
+ borderColor: 'white'
555
+ }]
556
+ },
557
+ options: {
558
+ responsive: true,
559
+ maintainAspectRatio: false,
560
+ plugins: {
561
+ legend: {
562
+ position: 'right',
563
+ labels: {
564
+ padding: 20,
565
+ font: {
566
+ size: 14
567
+ }
568
+ }
569
+ },
570
+ title: {
571
+ display: true,
572
+ text: 'Global Glaucoma Distribution (2023)',
573
+ font: {
574
+ size: 16,
575
+ weight: 'bold'
576
+ }
577
+ }
578
+ },
579
+ animation: {
580
+ animateScale: true,
581
+ animateRotate: true
582
+ }
583
+ }
584
+ });
585
+ });
586
  </script>
587
  </body>
588
  </html>