Hugging Face's logo

Spaces:
luigi12345
/
autoslides
Running

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

Enhance presentation with global glaucoma statistics, interactive chart, and responsive design

Browse files
Files changed (4) hide show
  1. .history/index_20250131190129.html +796 -0
  2. .history/index_20250131190133.html +796 -0
  3. .history/index_20250131190140.html +797 -0
  4. index.html +240 -31
.history/index_20250131190129.html ADDED
@@ -0,0 +1,796 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
245
+ /* Enhanced Title Slide Styles */
246
+ .glass-effect {
247
+ background: rgba(255, 255, 255, 0.7);
248
+ backdrop-filter: blur(10px);
249
+ border: 1px solid rgba(255, 255, 255, 0.2);
250
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
251
+ }
252
+
253
+ .stat-card {
254
+ padding: 25px;
255
+ border-radius: 16px;
256
+ text-align: center;
257
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
258
+ }
259
+
260
+ .stat-card:hover {
261
+ transform: translateY(-8px);
262
+ box-shadow: 0 12px 24px rgba(0,0,0,0.1);
263
+ }
264
+
265
+ .stat-icon-wrapper {
266
+ width: 60px;
267
+ height: 60px;
268
+ margin: 0 auto 15px;
269
+ display: flex;
270
+ align-items: center;
271
+ justify-content: center;
272
+ border-radius: 50%;
273
+ background: linear-gradient(135deg, var(--r-heading-color), #74b9ff);
274
+ }
275
+
276
+ .stat-icon-wrapper i {
277
+ color: white;
278
+ }
279
+
280
+ .stat-number {
281
+ font-size: 3em;
282
+ font-weight: 700;
283
+ color: var(--r-heading-color);
284
+ margin: 10px 0;
285
+ font-family: 'Inter', sans-serif;
286
+ }
287
+
288
+ .stat-trend {
289
+ font-size: 0.9em;
290
+ color: #38d39f;
291
+ margin-top: 10px;
292
+ }
293
+
294
+ .stat-trend.warning {
295
+ color: #ff7675;
296
+ }
297
+
298
+ .progress-bar-wrapper {
299
+ margin: 15px 0;
300
+ }
301
+
302
+ .progress-label {
303
+ display: flex;
304
+ justify-content: space-between;
305
+ margin-bottom: 5px;
306
+ font-weight: 500;
307
+ }
308
+
309
+ .progress-stats {
310
+ font-size: 0.8em;
311
+ color: #636e72;
312
+ margin-top: 5px;
313
+ text-align: right;
314
+ }
315
+
316
+ .impact-statement {
317
+ font-size: 1.2em;
318
+ font-weight: 500;
319
+ color: #e17055;
320
+ margin-top: 15px;
321
+ text-align: center;
322
+ }
323
+
324
+ .chart-header {
325
+ display: flex;
326
+ justify-content: space-between;
327
+ align-items: center;
328
+ margin-bottom: 15px;
329
+ }
330
+
331
+ .chart-footer {
332
+ margin-top: 15px;
333
+ text-align: right;
334
+ font-size: 0.8em;
335
+ color: #636e72;
336
+ }
337
+
338
+ /* Animations */
339
+ .pulse-animation {
340
+ animation: pulse 2s infinite;
341
+ }
342
+
343
+ @keyframes pulse {
344
+ 0% {
345
+ transform: scale(1);
346
+ }
347
+ 50% {
348
+ transform: scale(1.1);
349
+ }
350
+ 100% {
351
+ transform: scale(1);
352
+ }
353
+ }
354
+
355
+ .animate-width {
356
+ animation: fillWidth 1.5s ease-out forwards;
357
+ }
358
+
359
+ @keyframes fillWidth {
360
+ from { width: 0; }
361
+ to { width: var(--target-width); }
362
+ }
363
+
364
+ /* Counter Animation */
365
+ .counter {
366
+ transition: all 1s ease;
367
+ }
368
+ </style>
369
+ </head>
370
+ <body>
371
+ <div class="reveal">
372
+ <div class="slides">
373
+
374
+ <section class="title-slide" data-background-gradient="linear-gradient(45deg, #f6f8fa 30%, #e3f2fd 100%)">
375
+ <h1 class="animate__animated animate__fadeInDown">Glaucoma: Understanding and Protecting Your Vision</h1>
376
+ <div class="columns">
377
+ <div class="column">
378
+ <div class="stat-grid animate__animated animate__fadeInLeft">
379
+ <div class="stat-card glass-effect">
380
+ <div class="stat-icon-wrapper">
381
+ <i class="fas fa-eye fa-2x pulse-animation"></i>
382
+ </div>
383
+ <div class="stat-number counter" data-target="80">0</div>
384
+ <p>Million+ People<br>Affected Globally</p>
385
+ <div class="stat-trend">
386
+ <i class="fas fa-arrow-up"></i> 12% yearly
387
+ </div>
388
+ </div>
389
+ <div class="stat-card glass-effect">
390
+ <div class="stat-icon-wrapper">
391
+ <i class="fas fa-chart-line fa-2x pulse-animation"></i>
392
+ </div>
393
+ <div class="stat-number counter" data-target="111">0</div>
394
+ <p>Million+ Projected<br>by 2040</p>
395
+ <div class="stat-trend">
396
+ <i class="fas fa-arrow-up"></i> 39% increase
397
+ </div>
398
+ </div>
399
+ <div class="stat-card glass-effect">
400
+ <div class="stat-icon-wrapper">
401
+ <i class="fas fa-clock fa-2x pulse-animation"></i>
402
+ </div>
403
+ <div class="stat-number counter" data-target="50">0</div>
404
+ <p>Percent Cases<br>Undiagnosed</p>
405
+ <div class="stat-trend warning">
406
+ <i class="fas fa-exclamation-triangle"></i> Critical
407
+ </div>
408
+ </div>
409
+ </div>
410
+ <div class="highlight-box glass-effect animate__animated animate__fadeInUp">
411
+ <h3><i class="fas fa-globe-americas"></i> Global Impact</h3>
412
+ <div class="progress-bar-wrapper">
413
+ <div class="progress-label">Global Burden</div>
414
+ <div class="progress-bar">
415
+ <div class="fill animate-width" data-width="75"></div>
416
+ </div>
417
+ <div class="progress-stats">
418
+ <span>75% of cases in developing countries</span>
419
+ </div>
420
+ </div>
421
+ <p class="impact-statement">Leading cause of irreversible blindness worldwide</p>
422
+ </div>
423
+ </div>
424
+ <div class="column animate__animated animate__fadeInRight">
425
+ <div class="chart-container glass-effect">
426
+ <div class="chart-header">
427
+ <h3><i class="fas fa-chart-pie"></i> Global Distribution</h3>
428
+ <div class="chart-legend-toggle">
429
+ <i class="fas fa-list"></i>
430
+ </div>
431
+ </div>
432
+ <canvas id="globalPrevalenceChart"></canvas>
433
+ <div class="chart-footer">
434
+ <div class="chart-note">
435
+ <i class="fas fa-info-circle"></i> Data from WHO 2023 Report
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <section>
444
+ <h2>What is Glaucoma?</h2>
445
+ <div class="columns">
446
+ <div class="column">
447
+ <div class="highlight-box">
448
+ <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
449
+ <div class="stats-grid">
450
+ <div class="stat-item">
451
+ <span class="stat-number">50%</span>
452
+ <span class="stat-label">of cases are undiagnosed</span>
453
+ </div>
454
+ <div class="stat-item">
455
+ <span class="stat-number">2040</span>
456
+ <span class="stat-label">111.8M projected cases</span>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ <div class="icon-text">
461
+ <i class="fas fa-exclamation-triangle"></i>
462
+ <p>Often called the "silent thief of sight"</p>
463
+ </div>
464
+ </div>
465
+ <div class="column">
466
+ <div class="interactive-eye">
467
+ <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg"
468
+ alt="Eye Anatomy" class="slide-image">
469
+ <div class="eye-hotspots">
470
+ <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div>
471
+ <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div>
472
+ <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <section>
480
+ <h2>Types of Glaucoma</h2>
481
+ <div class="columns">
482
+ <div class="column">
483
+ <ul>
484
+ <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li>
485
+ <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li>
486
+ <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li>
487
+ </ul>
488
+ </div>
489
+ <div class="column">
490
+ <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80"
491
+ alt="Eye Diagram" class="slide-image">
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)">
497
+ <h2>Risk Factors</h2>
498
+ <div class="columns">
499
+ <div class="column">
500
+ <div class="highlight-box">
501
+ <h3>Primary Risk Factors</h3>
502
+ <ul>
503
+ <li><i class="fas fa-user"></i> Age over 60</li>
504
+ <li><i class="fas fa-dna"></i> Family history</li>
505
+ <li><i class="fas fa-globe"></i> Ethnicity</li>
506
+ </ul>
507
+ </div>
508
+ </div>
509
+ <div class="column">
510
+ <div class="highlight-box">
511
+ <h3>Medical Risk Factors</h3>
512
+ <ul>
513
+ <li><i class="fas fa-heartbeat"></i> High blood pressure</li>
514
+ <li><i class="fas fa-prescription"></i> Diabetes</li>
515
+ <li><i class="fas fa-pills"></i> Long-term steroid use</li>
516
+ </ul>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </section>
521
+
522
+ <section>
523
+ <h2>Symptoms of Glaucoma</h2>
524
+ <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>
525
+ <ul>
526
+ <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li>
527
+ <li><strong>Tunnel vision in advanced stages</strong></li>
528
+ <li><strong>Severe eye pain (Angle-closure)</strong></li>
529
+ <li><strong>Nausea and vomiting (Angle-closure)</strong></li>
530
+ <li><strong>Blurred vision</strong></li>
531
+ <li><strong>Halos around lights</strong></li>
532
+ <li><strong>Redness of the eye</strong></li>
533
+ </ul>
534
+ <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;">
535
+ <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p>
536
+ </section>
537
+
538
+ <section>
539
+ <h2>Diagnosis</h2>
540
+ <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p>
541
+ <ol>
542
+ <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li>
543
+ <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li>
544
+ <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li>
545
+ <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li>
546
+ <li><strong>Pachymetry:</strong> Measures corneal thickness.</li>
547
+ <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li>
548
+ </ol>
549
+ <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;">
550
+ <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p>
551
+ </section>
552
+
553
+ <section>
554
+ <h2>Treatment: Eye Drops</h2>
555
+ <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p>
556
+ <ul>
557
+ <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li>
558
+ <li><strong>Beta-blockers:</strong> Reduce fluid production.</li>
559
+ <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li>
560
+ <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li>
561
+ <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li>
562
+ </ul>
563
+ <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;">
564
+ <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p>
565
+ </section>
566
+
567
+ <section>
568
+ <h2>Treatment: Laser Therapy</h2>
569
+ <p>Laser procedures can help increase fluid drainage in the eye.</p>
570
+ <ul>
571
+ <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li>
572
+ <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li>
573
+ <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li>
574
+ </ul>
575
+ <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;">
576
+ <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p>
577
+ </section>
578
+
579
+ <section>
580
+ <h2>Treatment: Surgery</h2>
581
+ <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p>
582
+ <ul>
583
+ <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li>
584
+ <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li>
585
+ <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li>
586
+ </ul>
587
+ <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;">
588
+ <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p>
589
+ </section>
590
+
591
+ <section>
592
+ <h2>Living with Glaucoma</h2>
593
+ <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p>
594
+ <ul>
595
+ <li><strong>Regular eye exams are vital.</strong></li>
596
+ <li><strong>Adhere to prescribed treatments.</strong></li>
597
+ <li><strong>Maintain a healthy lifestyle.</strong></li>
598
+ <li><strong>Support groups and resources are available.</strong></li>
599
+ </ul>
600
+ <p><strong>Protect your vision. Get regular eye checks!</strong></p>
601
+ <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;">
602
+ <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p>
603
+ </section>
604
+
605
+ </div>
606
+ </div>
607
+
608
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
609
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script>
610
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
611
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
612
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
613
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
614
+
615
+ <script>
616
+ Reveal.initialize({
617
+ // Modern configuration
618
+ hash: true,
619
+ mouseWheel: false,
620
+ transition: 'slide',
621
+ transitionSpeed: 'default',
622
+ backgroundTransition: 'fade',
623
+ autoPlayMedia: true,
624
+
625
+ // Enhanced animation settings
626
+ viewDistance: 3,
627
+ autoSlide: 0,
628
+ autoSlideStoppable: true,
629
+
630
+ // Improved navigation
631
+ controls: true,
632
+ controlsTutorial: true,
633
+ controlsLayout: 'bottom-right',
634
+ controlsBackArrows: 'faded',
635
+ progress: true,
636
+ center: true,
637
+
638
+ // Modern responsive design
639
+ width: 1920,
640
+ height: 1080,
641
+ margin: 0.04,
642
+ minScale: 0.2,
643
+ maxScale: 2.0,
644
+
645
+ // Keyboard navigation
646
+ keyboard: {
647
+ 13: 'next', // Enter
648
+ 27: () => { }, // Escape (disable default ESC behavior)
649
+ 32: 'next', // Space
650
+ 37: 'prev', // Left arrow
651
+ 38: 'prev', // Up arrow
652
+ 39: 'next', // Right arrow
653
+ 40: 'next' // Down arrow
654
+ },
655
+
656
+ // Plugins
657
+ plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ],
658
+
659
+ // Progress bar styling
660
+ progress: {
661
+ color: '#0984e3',
662
+ height: '4px'
663
+ }
664
+ });
665
+
666
+ // Add keyboard shortcut for overview mode
667
+ document.addEventListener('keydown', function(event) {
668
+ if (event.key === 'o') {
669
+ Reveal.toggleOverview();
670
+ }
671
+ });
672
+
673
+ // Add smooth scroll behavior
674
+ Reveal.configure({
675
+ slideNumber: 'c/t',
676
+ touch: true,
677
+ hideInactiveCursor: true,
678
+ hideCursorTime: 3000
679
+ });
680
+
681
+ // Add animation on slide change
682
+ Reveal.on('slidechanged', event => {
683
+ const currentSlide = event.currentSlide;
684
+ const images = currentSlide.querySelectorAll('.slide-image');
685
+ images.forEach(img => {
686
+ img.style.opacity = 0;
687
+ setTimeout(() => {
688
+ img.style.opacity = 1;
689
+ }, 200);
690
+ });
691
+ });
692
+
693
+ // Enhanced chart initialization with animation
694
+ document.addEventListener('DOMContentLoaded', function() {
695
+ const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
696
+ new Chart(ctx, {
697
+ type: 'doughnut',
698
+ data: {
699
+ labels: ['Asia Pacific', 'Africa', 'Europe', 'Americas', 'Middle East'],
700
+ datasets: [{
701
+ data: [45, 20, 15, 15, 5],
702
+ backgroundColor: [
703
+ 'rgba(9, 132, 227, 0.8)',
704
+ 'rgba(0, 184, 148, 0.8)',
705
+ 'rgba(108, 92, 231, 0.8)',
706
+ 'rgba(253, 203, 110, 0.8)',
707
+ 'rgba(225, 112, 85, 0.8)'
708
+ ],
709
+ borderWidth: 2,
710
+ borderColor: 'white'
711
+ }]
712
+ },
713
+ options: {
714
+ responsive: true,
715
+ maintainAspectRatio: false,
716
+ plugins: {
717
+ legend: {
718
+ position: 'right',
719
+ labels: {
720
+ padding: 20,
721
+ font: {
722
+ size: 14,
723
+ family: 'Inter'
724
+ },
725
+ generateLabels: function(chart) {
726
+ const data = chart.data;
727
+ return data.labels.map((label, i) => ({
728
+ text: `${label} (${data.datasets[0].data[i]}%)`,
729
+ fillStyle: data.datasets[0].backgroundColor[i],
730
+ strokeStyle: data.datasets[0].borderColor,
731
+ lineWidth: data.datasets[0].borderWidth,
732
+ hidden: false,
733
+ index: i
734
+ }));
735
+ }
736
+ }
737
+ },
738
+ title: {
739
+ display: true,
740
+ text: 'Global Glaucoma Distribution (2023)',
741
+ font: {
742
+ size: 16,
743
+ weight: 'bold',
744
+ family: 'Inter'
745
+ },
746
+ padding: {
747
+ top: 10,
748
+ bottom: 30
749
+ }
750
+ }
751
+ },
752
+ animation: {
753
+ animateScale: true,
754
+ animateRotate: true,
755
+ duration: 2000,
756
+ easing: 'easeInOutQuart'
757
+ },
758
+ hover: {
759
+ mode: 'nearest',
760
+ intersect: true,
761
+ animationDuration: 200
762
+ }
763
+ }
764
+ });
765
+
766
+ // Counter Animation
767
+ const counters = document.querySelectorAll('.counter');
768
+ counters.forEach(counter => {
769
+ const target = parseInt(counter.getAttribute('data-target'));
770
+ const duration = 2000; // 2 seconds
771
+ const step = target / (duration / 16); // 60fps
772
+ let current = 0;
773
+
774
+ const updateCounter = () => {
775
+ current += step;
776
+ if (current < target) {
777
+ counter.textContent = Math.round(current);
778
+ requestAnimationFrame(updateCounter);
779
+ } else {
780
+ counter.textContent = target;
781
+ }
782
+ };
783
+
784
+ updateCounter();
785
+ });
786
+
787
+ // Progress bar animation
788
+ const progressBars = document.querySelectorAll('.animate-width');
789
+ progressBars.forEach(bar => {
790
+ const width = bar.getAttribute('data-width');
791
+ bar.style.setProperty('--target-width', `${width}%`);
792
+ });
793
+ });
794
+ </script>
795
+ </body>
796
+ </html>
.history/index_20250131190133.html ADDED
@@ -0,0 +1,796 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
245
+ /* Enhanced Title Slide Styles */
246
+ .glass-effect {
247
+ background: rgba(255, 255, 255, 0.7);
248
+ backdrop-filter: blur(10px);
249
+ border: 1px solid rgba(255, 255, 255, 0.2);
250
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
251
+ }
252
+
253
+ .stat-card {
254
+ padding: 25px;
255
+ border-radius: 16px;
256
+ text-align: center;
257
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
258
+ }
259
+
260
+ .stat-card:hover {
261
+ transform: translateY(-8px);
262
+ box-shadow: 0 12px 24px rgba(0,0,0,0.1);
263
+ }
264
+
265
+ .stat-icon-wrapper {
266
+ width: 60px;
267
+ height: 60px;
268
+ margin: 0 auto 15px;
269
+ display: flex;
270
+ align-items: center;
271
+ justify-content: center;
272
+ border-radius: 50%;
273
+ background: linear-gradient(135deg, var(--r-heading-color), #74b9ff);
274
+ }
275
+
276
+ .stat-icon-wrapper i {
277
+ color: white;
278
+ }
279
+
280
+ .stat-number {
281
+ font-size: 3em;
282
+ font-weight: 700;
283
+ color: var(--r-heading-color);
284
+ margin: 10px 0;
285
+ font-family: 'Inter', sans-serif;
286
+ }
287
+
288
+ .stat-trend {
289
+ font-size: 0.9em;
290
+ color: #38d39f;
291
+ margin-top: 10px;
292
+ }
293
+
294
+ .stat-trend.warning {
295
+ color: #ff7675;
296
+ }
297
+
298
+ .progress-bar-wrapper {
299
+ margin: 15px 0;
300
+ }
301
+
302
+ .progress-label {
303
+ display: flex;
304
+ justify-content: space-between;
305
+ margin-bottom: 5px;
306
+ font-weight: 500;
307
+ }
308
+
309
+ .progress-stats {
310
+ font-size: 0.8em;
311
+ color: #636e72;
312
+ margin-top: 5px;
313
+ text-align: right;
314
+ }
315
+
316
+ .impact-statement {
317
+ font-size: 1.2em;
318
+ font-weight: 500;
319
+ color: #e17055;
320
+ margin-top: 15px;
321
+ text-align: center;
322
+ }
323
+
324
+ .chart-header {
325
+ display: flex;
326
+ justify-content: space-between;
327
+ align-items: center;
328
+ margin-bottom: 15px;
329
+ }
330
+
331
+ .chart-footer {
332
+ margin-top: 15px;
333
+ text-align: right;
334
+ font-size: 0.8em;
335
+ color: #636e72;
336
+ }
337
+
338
+ /* Animations */
339
+ .pulse-animation {
340
+ animation: pulse 2s infinite;
341
+ }
342
+
343
+ @keyframes pulse {
344
+ 0% {
345
+ transform: scale(1);
346
+ }
347
+ 50% {
348
+ transform: scale(1.1);
349
+ }
350
+ 100% {
351
+ transform: scale(1);
352
+ }
353
+ }
354
+
355
+ .animate-width {
356
+ animation: fillWidth 1.5s ease-out forwards;
357
+ }
358
+
359
+ @keyframes fillWidth {
360
+ from { width: 0; }
361
+ to { width: var(--target-width); }
362
+ }
363
+
364
+ /* Counter Animation */
365
+ .counter {
366
+ transition: all 1s ease;
367
+ }
368
+ </style>
369
+ </head>
370
+ <body>
371
+ <div class="reveal">
372
+ <div class="slides">
373
+
374
+ <section class="title-slide" data-background-gradient="linear-gradient(45deg, #f6f8fa 30%, #e3f2fd 100%)">
375
+ <h1 class="animate__animated animate__fadeInDown">Glaucoma: Understanding and Protecting Your Vision</h1>
376
+ <div class="columns">
377
+ <div class="column">
378
+ <div class="stat-grid animate__animated animate__fadeInLeft">
379
+ <div class="stat-card glass-effect">
380
+ <div class="stat-icon-wrapper">
381
+ <i class="fas fa-eye fa-2x pulse-animation"></i>
382
+ </div>
383
+ <div class="stat-number counter" data-target="80">0</div>
384
+ <p>Million+ People<br>Affected Globally</p>
385
+ <div class="stat-trend">
386
+ <i class="fas fa-arrow-up"></i> 12% yearly
387
+ </div>
388
+ </div>
389
+ <div class="stat-card glass-effect">
390
+ <div class="stat-icon-wrapper">
391
+ <i class="fas fa-chart-line fa-2x pulse-animation"></i>
392
+ </div>
393
+ <div class="stat-number counter" data-target="111">0</div>
394
+ <p>Million+ Projected<br>by 2040</p>
395
+ <div class="stat-trend">
396
+ <i class="fas fa-arrow-up"></i> 39% increase
397
+ </div>
398
+ </div>
399
+ <div class="stat-card glass-effect">
400
+ <div class="stat-icon-wrapper">
401
+ <i class="fas fa-clock fa-2x pulse-animation"></i>
402
+ </div>
403
+ <div class="stat-number counter" data-target="50">0</div>
404
+ <p>Percent Cases<br>Undiagnosed</p>
405
+ <div class="stat-trend warning">
406
+ <i class="fas fa-exclamation-triangle"></i> Critical
407
+ </div>
408
+ </div>
409
+ </div>
410
+ <div class="highlight-box glass-effect animate__animated animate__fadeInUp">
411
+ <h3><i class="fas fa-globe-americas"></i> Global Impact</h3>
412
+ <div class="progress-bar-wrapper">
413
+ <div class="progress-label">Global Burden</div>
414
+ <div class="progress-bar">
415
+ <div class="fill animate-width" data-width="75"></div>
416
+ </div>
417
+ <div class="progress-stats">
418
+ <span>75% of cases in developing countries</span>
419
+ </div>
420
+ </div>
421
+ <p class="impact-statement">Leading cause of irreversible blindness worldwide</p>
422
+ </div>
423
+ </div>
424
+ <div class="column animate__animated animate__fadeInRight">
425
+ <div class="chart-container glass-effect">
426
+ <div class="chart-header">
427
+ <h3><i class="fas fa-chart-pie"></i> Global Distribution</h3>
428
+ <div class="chart-legend-toggle">
429
+ <i class="fas fa-list"></i>
430
+ </div>
431
+ </div>
432
+ <canvas id="globalPrevalenceChart"></canvas>
433
+ <div class="chart-footer">
434
+ <div class="chart-note">
435
+ <i class="fas fa-info-circle"></i> Data from WHO 2023 Report
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <section>
444
+ <h2>What is Glaucoma?</h2>
445
+ <div class="columns">
446
+ <div class="column">
447
+ <div class="highlight-box">
448
+ <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
449
+ <div class="stats-grid">
450
+ <div class="stat-item">
451
+ <span class="stat-number">50%</span>
452
+ <span class="stat-label">of cases are undiagnosed</span>
453
+ </div>
454
+ <div class="stat-item">
455
+ <span class="stat-number">2040</span>
456
+ <span class="stat-label">111.8M projected cases</span>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ <div class="icon-text">
461
+ <i class="fas fa-exclamation-triangle"></i>
462
+ <p>Often called the "silent thief of sight"</p>
463
+ </div>
464
+ </div>
465
+ <div class="column">
466
+ <div class="interactive-eye">
467
+ <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg"
468
+ alt="Eye Anatomy" class="slide-image">
469
+ <div class="eye-hotspots">
470
+ <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div>
471
+ <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div>
472
+ <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <section>
480
+ <h2>Types of Glaucoma</h2>
481
+ <div class="columns">
482
+ <div class="column">
483
+ <ul>
484
+ <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li>
485
+ <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li>
486
+ <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li>
487
+ </ul>
488
+ </div>
489
+ <div class="column">
490
+ <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80"
491
+ alt="Eye Diagram" class="slide-image">
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)">
497
+ <h2>Risk Factors</h2>
498
+ <div class="columns">
499
+ <div class="column">
500
+ <div class="highlight-box">
501
+ <h3>Primary Risk Factors</h3>
502
+ <ul>
503
+ <li><i class="fas fa-user"></i> Age over 60</li>
504
+ <li><i class="fas fa-dna"></i> Family history</li>
505
+ <li><i class="fas fa-globe"></i> Ethnicity</li>
506
+ </ul>
507
+ </div>
508
+ </div>
509
+ <div class="column">
510
+ <div class="highlight-box">
511
+ <h3>Medical Risk Factors</h3>
512
+ <ul>
513
+ <li><i class="fas fa-heartbeat"></i> High blood pressure</li>
514
+ <li><i class="fas fa-prescription"></i> Diabetes</li>
515
+ <li><i class="fas fa-pills"></i> Long-term steroid use</li>
516
+ </ul>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </section>
521
+
522
+ <section>
523
+ <h2>Symptoms of Glaucoma</h2>
524
+ <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>
525
+ <ul>
526
+ <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li>
527
+ <li><strong>Tunnel vision in advanced stages</strong></li>
528
+ <li><strong>Severe eye pain (Angle-closure)</strong></li>
529
+ <li><strong>Nausea and vomiting (Angle-closure)</strong></li>
530
+ <li><strong>Blurred vision</strong></li>
531
+ <li><strong>Halos around lights</strong></li>
532
+ <li><strong>Redness of the eye</strong></li>
533
+ </ul>
534
+ <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;">
535
+ <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p>
536
+ </section>
537
+
538
+ <section>
539
+ <h2>Diagnosis</h2>
540
+ <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p>
541
+ <ol>
542
+ <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li>
543
+ <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li>
544
+ <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li>
545
+ <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li>
546
+ <li><strong>Pachymetry:</strong> Measures corneal thickness.</li>
547
+ <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li>
548
+ </ol>
549
+ <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;">
550
+ <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p>
551
+ </section>
552
+
553
+ <section>
554
+ <h2>Treatment: Eye Drops</h2>
555
+ <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p>
556
+ <ul>
557
+ <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li>
558
+ <li><strong>Beta-blockers:</strong> Reduce fluid production.</li>
559
+ <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li>
560
+ <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li>
561
+ <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li>
562
+ </ul>
563
+ <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;">
564
+ <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p>
565
+ </section>
566
+
567
+ <section>
568
+ <h2>Treatment: Laser Therapy</h2>
569
+ <p>Laser procedures can help increase fluid drainage in the eye.</p>
570
+ <ul>
571
+ <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li>
572
+ <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li>
573
+ <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li>
574
+ </ul>
575
+ <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;">
576
+ <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p>
577
+ </section>
578
+
579
+ <section>
580
+ <h2>Treatment: Surgery</h2>
581
+ <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p>
582
+ <ul>
583
+ <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li>
584
+ <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li>
585
+ <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li>
586
+ </ul>
587
+ <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;">
588
+ <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p>
589
+ </section>
590
+
591
+ <section>
592
+ <h2>Living with Glaucoma</h2>
593
+ <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p>
594
+ <ul>
595
+ <li><strong>Regular eye exams are vital.</strong></li>
596
+ <li><strong>Adhere to prescribed treatments.</strong></li>
597
+ <li><strong>Maintain a healthy lifestyle.</strong></li>
598
+ <li><strong>Support groups and resources are available.</strong></li>
599
+ </ul>
600
+ <p><strong>Protect your vision. Get regular eye checks!</strong></p>
601
+ <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;">
602
+ <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p>
603
+ </section>
604
+
605
+ </div>
606
+ </div>
607
+
608
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
609
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script>
610
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
611
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
612
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
613
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
614
+
615
+ <script>
616
+ Reveal.initialize({
617
+ // Modern configuration
618
+ hash: true,
619
+ mouseWheel: false,
620
+ transition: 'slide',
621
+ transitionSpeed: 'default',
622
+ backgroundTransition: 'fade',
623
+ autoPlayMedia: true,
624
+
625
+ // Enhanced animation settings
626
+ viewDistance: 3,
627
+ autoSlide: 0,
628
+ autoSlideStoppable: true,
629
+
630
+ // Improved navigation
631
+ controls: true,
632
+ controlsTutorial: true,
633
+ controlsLayout: 'bottom-right',
634
+ controlsBackArrows: 'faded',
635
+ progress: true,
636
+ center: true,
637
+
638
+ // Modern responsive design
639
+ width: 1920,
640
+ height: 1080,
641
+ margin: 0.04,
642
+ minScale: 0.2,
643
+ maxScale: 2.0,
644
+
645
+ // Keyboard navigation
646
+ keyboard: {
647
+ 13: 'next', // Enter
648
+ 27: () => { }, // Escape (disable default ESC behavior)
649
+ 32: 'next', // Space
650
+ 37: 'prev', // Left arrow
651
+ 38: 'prev', // Up arrow
652
+ 39: 'next', // Right arrow
653
+ 40: 'next' // Down arrow
654
+ },
655
+
656
+ // Plugins
657
+ plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ],
658
+
659
+ // Progress bar styling
660
+ progress: {
661
+ color: '#0984e3',
662
+ height: '4px'
663
+ }
664
+ });
665
+
666
+ // Add keyboard shortcut for overview mode
667
+ document.addEventListener('keydown', function(event) {
668
+ if (event.key === 'o') {
669
+ Reveal.toggleOverview();
670
+ }
671
+ });
672
+
673
+ // Add smooth scroll behavior
674
+ Reveal.configure({
675
+ slideNumber: 'c/t',
676
+ touch: true,
677
+ hideInactiveCursor: true,
678
+ hideCursorTime: 3000
679
+ });
680
+
681
+ // Add animation on slide change
682
+ Reveal.on('slidechanged', event => {
683
+ const currentSlide = event.currentSlide;
684
+ const images = currentSlide.querySelectorAll('.slide-image');
685
+ images.forEach(img => {
686
+ img.style.opacity = 0;
687
+ setTimeout(() => {
688
+ img.style.opacity = 1;
689
+ }, 200);
690
+ });
691
+ });
692
+
693
+ // Enhanced chart initialization with animation
694
+ document.addEventListener('DOMContentLoaded', function() {
695
+ const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
696
+ new Chart(ctx, {
697
+ type: 'doughnut',
698
+ data: {
699
+ labels: ['Asia Pacific', 'Africa', 'Europe', 'Americas', 'Middle East'],
700
+ datasets: [{
701
+ data: [45, 20, 15, 15, 5],
702
+ backgroundColor: [
703
+ 'rgba(9, 132, 227, 0.8)',
704
+ 'rgba(0, 184, 148, 0.8)',
705
+ 'rgba(108, 92, 231, 0.8)',
706
+ 'rgba(253, 203, 110, 0.8)',
707
+ 'rgba(225, 112, 85, 0.8)'
708
+ ],
709
+ borderWidth: 2,
710
+ borderColor: 'white'
711
+ }]
712
+ },
713
+ options: {
714
+ responsive: true,
715
+ maintainAspectRatio: false,
716
+ plugins: {
717
+ legend: {
718
+ position: 'right',
719
+ labels: {
720
+ padding: 20,
721
+ font: {
722
+ size: 14,
723
+ family: 'Inter'
724
+ },
725
+ generateLabels: function(chart) {
726
+ const data = chart.data;
727
+ return data.labels.map((label, i) => ({
728
+ text: `${label} (${data.datasets[0].data[i]}%)`,
729
+ fillStyle: data.datasets[0].backgroundColor[i],
730
+ strokeStyle: data.datasets[0].borderColor,
731
+ lineWidth: data.datasets[0].borderWidth,
732
+ hidden: false,
733
+ index: i
734
+ }));
735
+ }
736
+ }
737
+ },
738
+ title: {
739
+ display: true,
740
+ text: 'Global Glaucoma Distribution (2023)',
741
+ font: {
742
+ size: 16,
743
+ weight: 'bold',
744
+ family: 'Inter'
745
+ },
746
+ padding: {
747
+ top: 10,
748
+ bottom: 30
749
+ }
750
+ }
751
+ },
752
+ animation: {
753
+ animateScale: true,
754
+ animateRotate: true,
755
+ duration: 2000,
756
+ easing: 'easeInOutQuart'
757
+ },
758
+ hover: {
759
+ mode: 'nearest',
760
+ intersect: true,
761
+ animationDuration: 200
762
+ }
763
+ }
764
+ });
765
+
766
+ // Counter Animation
767
+ const counters = document.querySelectorAll('.counter');
768
+ counters.forEach(counter => {
769
+ const target = parseInt(counter.getAttribute('data-target'));
770
+ const duration = 2000; // 2 seconds
771
+ const step = target / (duration / 16); // 60fps
772
+ let current = 0;
773
+
774
+ const updateCounter = () => {
775
+ current += step;
776
+ if (current < target) {
777
+ counter.textContent = Math.round(current);
778
+ requestAnimationFrame(updateCounter);
779
+ } else {
780
+ counter.textContent = target;
781
+ }
782
+ };
783
+
784
+ updateCounter();
785
+ });
786
+
787
+ // Progress bar animation
788
+ const progressBars = document.querySelectorAll('.animate-width');
789
+ progressBars.forEach(bar => {
790
+ const width = bar.getAttribute('data-width');
791
+ bar.style.setProperty('--target-width', `${width}%`);
792
+ });
793
+ });
794
+ </script>
795
+ </body>
796
+ </html>
.history/index_20250131190140.html ADDED
@@ -0,0 +1,797 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
245
+ /* Enhanced Title Slide Styles */
246
+ .glass-effect {
247
+ background: rgba(255, 255, 255, 0.7);
248
+ -webkit-backdrop-filter: blur(10px);
249
+ backdrop-filter: blur(10px);
250
+ border: 1px solid rgba(255, 255, 255, 0.2);
251
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
252
+ }
253
+
254
+ .stat-card {
255
+ padding: 25px;
256
+ border-radius: 16px;
257
+ text-align: center;
258
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
259
+ }
260
+
261
+ .stat-card:hover {
262
+ transform: translateY(-8px);
263
+ box-shadow: 0 12px 24px rgba(0,0,0,0.1);
264
+ }
265
+
266
+ .stat-icon-wrapper {
267
+ width: 60px;
268
+ height: 60px;
269
+ margin: 0 auto 15px;
270
+ display: flex;
271
+ align-items: center;
272
+ justify-content: center;
273
+ border-radius: 50%;
274
+ background: linear-gradient(135deg, var(--r-heading-color), #74b9ff);
275
+ }
276
+
277
+ .stat-icon-wrapper i {
278
+ color: white;
279
+ }
280
+
281
+ .stat-number {
282
+ font-size: 3em;
283
+ font-weight: 700;
284
+ color: var(--r-heading-color);
285
+ margin: 10px 0;
286
+ font-family: 'Inter', sans-serif;
287
+ }
288
+
289
+ .stat-trend {
290
+ font-size: 0.9em;
291
+ color: #38d39f;
292
+ margin-top: 10px;
293
+ }
294
+
295
+ .stat-trend.warning {
296
+ color: #ff7675;
297
+ }
298
+
299
+ .progress-bar-wrapper {
300
+ margin: 15px 0;
301
+ }
302
+
303
+ .progress-label {
304
+ display: flex;
305
+ justify-content: space-between;
306
+ margin-bottom: 5px;
307
+ font-weight: 500;
308
+ }
309
+
310
+ .progress-stats {
311
+ font-size: 0.8em;
312
+ color: #636e72;
313
+ margin-top: 5px;
314
+ text-align: right;
315
+ }
316
+
317
+ .impact-statement {
318
+ font-size: 1.2em;
319
+ font-weight: 500;
320
+ color: #e17055;
321
+ margin-top: 15px;
322
+ text-align: center;
323
+ }
324
+
325
+ .chart-header {
326
+ display: flex;
327
+ justify-content: space-between;
328
+ align-items: center;
329
+ margin-bottom: 15px;
330
+ }
331
+
332
+ .chart-footer {
333
+ margin-top: 15px;
334
+ text-align: right;
335
+ font-size: 0.8em;
336
+ color: #636e72;
337
+ }
338
+
339
+ /* Animations */
340
+ .pulse-animation {
341
+ animation: pulse 2s infinite;
342
+ }
343
+
344
+ @keyframes pulse {
345
+ 0% {
346
+ transform: scale(1);
347
+ }
348
+ 50% {
349
+ transform: scale(1.1);
350
+ }
351
+ 100% {
352
+ transform: scale(1);
353
+ }
354
+ }
355
+
356
+ .animate-width {
357
+ animation: fillWidth 1.5s ease-out forwards;
358
+ }
359
+
360
+ @keyframes fillWidth {
361
+ from { width: 0; }
362
+ to { width: var(--target-width); }
363
+ }
364
+
365
+ /* Counter Animation */
366
+ .counter {
367
+ transition: all 1s ease;
368
+ }
369
+ </style>
370
+ </head>
371
+ <body>
372
+ <div class="reveal">
373
+ <div class="slides">
374
+
375
+ <section class="title-slide" data-background-gradient="linear-gradient(45deg, #f6f8fa 30%, #e3f2fd 100%)">
376
+ <h1 class="animate__animated animate__fadeInDown">Glaucoma: Understanding and Protecting Your Vision</h1>
377
+ <div class="columns">
378
+ <div class="column">
379
+ <div class="stat-grid animate__animated animate__fadeInLeft">
380
+ <div class="stat-card glass-effect">
381
+ <div class="stat-icon-wrapper">
382
+ <i class="fas fa-eye fa-2x pulse-animation"></i>
383
+ </div>
384
+ <div class="stat-number counter" data-target="80">0</div>
385
+ <p>Million+ People<br>Affected Globally</p>
386
+ <div class="stat-trend">
387
+ <i class="fas fa-arrow-up"></i> 12% yearly
388
+ </div>
389
+ </div>
390
+ <div class="stat-card glass-effect">
391
+ <div class="stat-icon-wrapper">
392
+ <i class="fas fa-chart-line fa-2x pulse-animation"></i>
393
+ </div>
394
+ <div class="stat-number counter" data-target="111">0</div>
395
+ <p>Million+ Projected<br>by 2040</p>
396
+ <div class="stat-trend">
397
+ <i class="fas fa-arrow-up"></i> 39% increase
398
+ </div>
399
+ </div>
400
+ <div class="stat-card glass-effect">
401
+ <div class="stat-icon-wrapper">
402
+ <i class="fas fa-clock fa-2x pulse-animation"></i>
403
+ </div>
404
+ <div class="stat-number counter" data-target="50">0</div>
405
+ <p>Percent Cases<br>Undiagnosed</p>
406
+ <div class="stat-trend warning">
407
+ <i class="fas fa-exclamation-triangle"></i> Critical
408
+ </div>
409
+ </div>
410
+ </div>
411
+ <div class="highlight-box glass-effect animate__animated animate__fadeInUp">
412
+ <h3><i class="fas fa-globe-americas"></i> Global Impact</h3>
413
+ <div class="progress-bar-wrapper">
414
+ <div class="progress-label">Global Burden</div>
415
+ <div class="progress-bar">
416
+ <div class="fill animate-width" data-width="75"></div>
417
+ </div>
418
+ <div class="progress-stats">
419
+ <span>75% of cases in developing countries</span>
420
+ </div>
421
+ </div>
422
+ <p class="impact-statement">Leading cause of irreversible blindness worldwide</p>
423
+ </div>
424
+ </div>
425
+ <div class="column animate__animated animate__fadeInRight">
426
+ <div class="chart-container glass-effect">
427
+ <div class="chart-header">
428
+ <h3><i class="fas fa-chart-pie"></i> Global Distribution</h3>
429
+ <div class="chart-legend-toggle">
430
+ <i class="fas fa-list"></i>
431
+ </div>
432
+ </div>
433
+ <canvas id="globalPrevalenceChart"></canvas>
434
+ <div class="chart-footer">
435
+ <div class="chart-note">
436
+ <i class="fas fa-info-circle"></i> Data from WHO 2023 Report
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </section>
443
+
444
+ <section>
445
+ <h2>What is Glaucoma?</h2>
446
+ <div class="columns">
447
+ <div class="column">
448
+ <div class="highlight-box">
449
+ <p>Glaucoma is a group of eye diseases that damage the optic nerve, often due to high intraocular pressure.</p>
450
+ <div class="stats-grid">
451
+ <div class="stat-item">
452
+ <span class="stat-number">50%</span>
453
+ <span class="stat-label">of cases are undiagnosed</span>
454
+ </div>
455
+ <div class="stat-item">
456
+ <span class="stat-number">2040</span>
457
+ <span class="stat-label">111.8M projected cases</span>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ <div class="icon-text">
462
+ <i class="fas fa-exclamation-triangle"></i>
463
+ <p>Often called the "silent thief of sight"</p>
464
+ </div>
465
+ </div>
466
+ <div class="column">
467
+ <div class="interactive-eye">
468
+ <img src="https://www.nei.nih.gov/sites/default/files/2019-06/eye-anatomy_1.jpg"
469
+ alt="Eye Anatomy" class="slide-image">
470
+ <div class="eye-hotspots">
471
+ <div class="hotspot" style="top: 40%; left: 30%;" data-tooltip="Optic Nerve"></div>
472
+ <div class="hotspot" style="top: 35%; left: 60%;" data-tooltip="Trabecular Meshwork"></div>
473
+ <div class="hotspot" style="top: 45%; left: 45%;" data-tooltip="Anterior Chamber"></div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </section>
479
+
480
+ <section>
481
+ <h2>Types of Glaucoma</h2>
482
+ <div class="columns">
483
+ <div class="column">
484
+ <ul>
485
+ <li><i class="fas fa-angle-right"></i> <strong>Open-Angle Glaucoma:</strong> Most common form</li>
486
+ <li><i class="fas fa-angle-right"></i> <strong>Angle-Closure Glaucoma:</strong> Medical emergency</li>
487
+ <li><i class="fas fa-angle-right"></i> <strong>Normal-Tension Glaucoma:</strong> Damage despite normal pressure</li>
488
+ </ul>
489
+ </div>
490
+ <div class="column">
491
+ <img src="https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?auto=format&fit=crop&w=800&q=80"
492
+ alt="Eye Diagram" class="slide-image">
493
+ </div>
494
+ </div>
495
+ </section>
496
+
497
+ <section data-background-gradient="linear-gradient(to bottom right, #ffffff, #f0f9ff)">
498
+ <h2>Risk Factors</h2>
499
+ <div class="columns">
500
+ <div class="column">
501
+ <div class="highlight-box">
502
+ <h3>Primary Risk Factors</h3>
503
+ <ul>
504
+ <li><i class="fas fa-user"></i> Age over 60</li>
505
+ <li><i class="fas fa-dna"></i> Family history</li>
506
+ <li><i class="fas fa-globe"></i> Ethnicity</li>
507
+ </ul>
508
+ </div>
509
+ </div>
510
+ <div class="column">
511
+ <div class="highlight-box">
512
+ <h3>Medical Risk Factors</h3>
513
+ <ul>
514
+ <li><i class="fas fa-heartbeat"></i> High blood pressure</li>
515
+ <li><i class="fas fa-prescription"></i> Diabetes</li>
516
+ <li><i class="fas fa-pills"></i> Long-term steroid use</li>
517
+ </ul>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </section>
522
+
523
+ <section>
524
+ <h2>Symptoms of Glaucoma</h2>
525
+ <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>
526
+ <ul>
527
+ <li><strong>Gradual peripheral vision loss (Open-angle)</strong></li>
528
+ <li><strong>Tunnel vision in advanced stages</strong></li>
529
+ <li><strong>Severe eye pain (Angle-closure)</strong></li>
530
+ <li><strong>Nausea and vomiting (Angle-closure)</strong></li>
531
+ <li><strong>Blurred vision</strong></li>
532
+ <li><strong>Halos around lights</strong></li>
533
+ <li><strong>Redness of the eye</strong></li>
534
+ </ul>
535
+ <img src="https://www.aao.org/asset.axd?id=48445490-a773-4181-889d-194a1989993b&t=637848477549500000" alt="Glaucoma Symptoms" style="max-height: 350px;">
536
+ <p style="font-size: 0.7em; color: #777;">Image source: aao.org</p>
537
+ </section>
538
+
539
+ <section>
540
+ <h2>Diagnosis</h2>
541
+ <p>Regular eye exams are crucial for early detection. Glaucoma can be diagnosed through various tests:</p>
542
+ <ol>
543
+ <li><strong>Tonometry:</strong> Measures intraocular pressure (IOP).</li>
544
+ <li><strong>Ophthalmoscopy:</strong> Examines the optic nerve for damage.</li>
545
+ <li><strong>Perimetry (Visual Field Test):</strong> Checks for peripheral vision loss.</li>
546
+ <li><strong>Gonioscopy:</strong> Inspects the drainage angle of the eye.</li>
547
+ <li><strong>Pachymetry:</strong> Measures corneal thickness.</li>
548
+ <li><strong>Optical Coherence Tomography (OCT):</strong> Imaging of the optic nerve and retina.</li>
549
+ </ol>
550
+ <img src="https://www.glaucoma.org/wp-content/uploads/2023/08/glaucoma-diagnosis-tests.jpg" alt="Glaucoma Diagnosis Tests" style="max-height: 300px;">
551
+ <p style="font-size: 0.7em; color: #777;">Image source: glaucoma.org</p>
552
+ </section>
553
+
554
+ <section>
555
+ <h2>Treatment: Eye Drops</h2>
556
+ <p>Medicated eye drops are the most common initial treatment. They help to lower eye pressure.</p>
557
+ <ul>
558
+ <li><strong>Prostaglandins:</strong> Increase fluid outflow.</li>
559
+ <li><strong>Beta-blockers:</strong> Reduce fluid production.</li>
560
+ <li><strong>Alpha-adrenergic agonists:</strong> Reduce fluid production and increase outflow.</li>
561
+ <li><strong>Carbonic anhydrase inhibitors:</strong> Reduce fluid production.</li>
562
+ <li><strong>Rho kinase inhibitors:</strong> Increase fluid outflow.</li>
563
+ </ul>
564
+ <img src="https://www.rxsafe.com/wp-content/uploads/2020/07/iStock-1142459298-1024x683.jpg" alt="Eye Drops for Glaucoma" style="max-height: 350px;">
565
+ <p style="font-size: 0.7em; color: #777;">Image source: rxsafe.com</p>
566
+ </section>
567
+
568
+ <section>
569
+ <h2>Treatment: Laser Therapy</h2>
570
+ <p>Laser procedures can help increase fluid drainage in the eye.</p>
571
+ <ul>
572
+ <li><strong>Trabeculoplasty (SLT/ALT):</strong> For open-angle glaucoma, to improve drainage.</li>
573
+ <li><strong>Iridotomy:</strong> For angle-closure glaucoma, to create a hole in the iris for fluid flow.</li>
574
+ <li><strong>Cyclophotocoagulation:</strong> To reduce fluid production in severe cases.</li>
575
+ </ul>
576
+ <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;">
577
+ <p style="font-size: 0.7em; color: #777;">Image source: researchgate.net</p>
578
+ </section>
579
+
580
+ <section>
581
+ <h2>Treatment: Surgery</h2>
582
+ <p>Surgical options are considered when eye drops and laser therapy are not sufficient.</p>
583
+ <ul>
584
+ <li><strong>Trabeculectomy:</strong> Creates a new drainage channel.</li>
585
+ <li><strong>Drainage Implants (Tube Shunts):</strong> Insert a tube to drain fluid.</li>
586
+ <li><strong>Minimally Invasive Glaucoma Surgery (MIGS):</strong> Less invasive procedures with faster recovery.</li>
587
+ </ul>
588
+ <img src="https://eyecareassociates.net/wp-content/uploads/2020/12/MIGS-surgery-options-for-glaucoma.png" alt="Glaucoma Surgery" style="max-height: 350px;">
589
+ <p style="font-size: 0.7em; color: #777;">Image source: eyecareassociates.net</p>
590
+ </section>
591
+
592
+ <section>
593
+ <h2>Living with Glaucoma</h2>
594
+ <p>Glaucoma is a chronic condition requiring ongoing management. Early detection and consistent treatment are key to preserving vision.</p>
595
+ <ul>
596
+ <li><strong>Regular eye exams are vital.</strong></li>
597
+ <li><strong>Adhere to prescribed treatments.</strong></li>
598
+ <li><strong>Maintain a healthy lifestyle.</strong></li>
599
+ <li><strong>Support groups and resources are available.</strong></li>
600
+ </ul>
601
+ <p><strong>Protect your vision. Get regular eye checks!</strong></p>
602
+ <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;">
603
+ <p style="font-size: 0.7em; color: #777;">Image source: brightfocus.org</p>
604
+ </section>
605
+
606
+ </div>
607
+ </div>
608
+
609
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
610
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/zoom/zoom.min.js"></script>
611
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
612
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/search/search.min.js"></script>
613
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
614
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
615
+
616
+ <script>
617
+ Reveal.initialize({
618
+ // Modern configuration
619
+ hash: true,
620
+ mouseWheel: false,
621
+ transition: 'slide',
622
+ transitionSpeed: 'default',
623
+ backgroundTransition: 'fade',
624
+ autoPlayMedia: true,
625
+
626
+ // Enhanced animation settings
627
+ viewDistance: 3,
628
+ autoSlide: 0,
629
+ autoSlideStoppable: true,
630
+
631
+ // Improved navigation
632
+ controls: true,
633
+ controlsTutorial: true,
634
+ controlsLayout: 'bottom-right',
635
+ controlsBackArrows: 'faded',
636
+ progress: true,
637
+ center: true,
638
+
639
+ // Modern responsive design
640
+ width: 1920,
641
+ height: 1080,
642
+ margin: 0.04,
643
+ minScale: 0.2,
644
+ maxScale: 2.0,
645
+
646
+ // Keyboard navigation
647
+ keyboard: {
648
+ 13: 'next', // Enter
649
+ 27: () => { }, // Escape (disable default ESC behavior)
650
+ 32: 'next', // Space
651
+ 37: 'prev', // Left arrow
652
+ 38: 'prev', // Up arrow
653
+ 39: 'next', // Right arrow
654
+ 40: 'next' // Down arrow
655
+ },
656
+
657
+ // Plugins
658
+ plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown ],
659
+
660
+ // Progress bar styling
661
+ progress: {
662
+ color: '#0984e3',
663
+ height: '4px'
664
+ }
665
+ });
666
+
667
+ // Add keyboard shortcut for overview mode
668
+ document.addEventListener('keydown', function(event) {
669
+ if (event.key === 'o') {
670
+ Reveal.toggleOverview();
671
+ }
672
+ });
673
+
674
+ // Add smooth scroll behavior
675
+ Reveal.configure({
676
+ slideNumber: 'c/t',
677
+ touch: true,
678
+ hideInactiveCursor: true,
679
+ hideCursorTime: 3000
680
+ });
681
+
682
+ // Add animation on slide change
683
+ Reveal.on('slidechanged', event => {
684
+ const currentSlide = event.currentSlide;
685
+ const images = currentSlide.querySelectorAll('.slide-image');
686
+ images.forEach(img => {
687
+ img.style.opacity = 0;
688
+ setTimeout(() => {
689
+ img.style.opacity = 1;
690
+ }, 200);
691
+ });
692
+ });
693
+
694
+ // Enhanced chart initialization with animation
695
+ document.addEventListener('DOMContentLoaded', function() {
696
+ const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
697
+ new Chart(ctx, {
698
+ type: 'doughnut',
699
+ data: {
700
+ labels: ['Asia Pacific', 'Africa', 'Europe', 'Americas', 'Middle East'],
701
+ datasets: [{
702
+ data: [45, 20, 15, 15, 5],
703
+ backgroundColor: [
704
+ 'rgba(9, 132, 227, 0.8)',
705
+ 'rgba(0, 184, 148, 0.8)',
706
+ 'rgba(108, 92, 231, 0.8)',
707
+ 'rgba(253, 203, 110, 0.8)',
708
+ 'rgba(225, 112, 85, 0.8)'
709
+ ],
710
+ borderWidth: 2,
711
+ borderColor: 'white'
712
+ }]
713
+ },
714
+ options: {
715
+ responsive: true,
716
+ maintainAspectRatio: false,
717
+ plugins: {
718
+ legend: {
719
+ position: 'right',
720
+ labels: {
721
+ padding: 20,
722
+ font: {
723
+ size: 14,
724
+ family: 'Inter'
725
+ },
726
+ generateLabels: function(chart) {
727
+ const data = chart.data;
728
+ return data.labels.map((label, i) => ({
729
+ text: `${label} (${data.datasets[0].data[i]}%)`,
730
+ fillStyle: data.datasets[0].backgroundColor[i],
731
+ strokeStyle: data.datasets[0].borderColor,
732
+ lineWidth: data.datasets[0].borderWidth,
733
+ hidden: false,
734
+ index: i
735
+ }));
736
+ }
737
+ }
738
+ },
739
+ title: {
740
+ display: true,
741
+ text: 'Global Glaucoma Distribution (2023)',
742
+ font: {
743
+ size: 16,
744
+ weight: 'bold',
745
+ family: 'Inter'
746
+ },
747
+ padding: {
748
+ top: 10,
749
+ bottom: 30
750
+ }
751
+ }
752
+ },
753
+ animation: {
754
+ animateScale: true,
755
+ animateRotate: true,
756
+ duration: 2000,
757
+ easing: 'easeInOutQuart'
758
+ },
759
+ hover: {
760
+ mode: 'nearest',
761
+ intersect: true,
762
+ animationDuration: 200
763
+ }
764
+ }
765
+ });
766
+
767
+ // Counter Animation
768
+ const counters = document.querySelectorAll('.counter');
769
+ counters.forEach(counter => {
770
+ const target = parseInt(counter.getAttribute('data-target'));
771
+ const duration = 2000; // 2 seconds
772
+ const step = target / (duration / 16); // 60fps
773
+ let current = 0;
774
+
775
+ const updateCounter = () => {
776
+ current += step;
777
+ if (current < target) {
778
+ counter.textContent = Math.round(current);
779
+ requestAnimationFrame(updateCounter);
780
+ } else {
781
+ counter.textContent = target;
782
+ }
783
+ };
784
+
785
+ updateCounter();
786
+ });
787
+
788
+ // Progress bar animation
789
+ const progressBars = document.querySelectorAll('.animate-width');
790
+ progressBars.forEach(bar => {
791
+ const width = bar.getAttribute('data-width');
792
+ bar.style.setProperty('--target-width', `${width}%`);
793
+ });
794
+ });
795
+ </script>
796
+ </body>
797
+ </html>
index.html CHANGED
@@ -241,44 +241,201 @@
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>
@@ -534,7 +691,7 @@
534
  });
535
  });
536
 
537
- // Enhanced chart initialization
538
  document.addEventListener('DOMContentLoaded', function() {
539
  const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
540
  new Chart(ctx, {
@@ -544,11 +701,11 @@
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'
@@ -563,7 +720,19 @@
563
  labels: {
564
  padding: 20,
565
  font: {
566
- size: 14
 
 
 
 
 
 
 
 
 
 
 
 
567
  }
568
  }
569
  },
@@ -572,16 +741,56 @@
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>
 
241
  font-size: 0.8em;
242
  white-space: nowrap;
243
  }
244
+
245
+ /* Enhanced Title Slide Styles */
246
+ .glass-effect {
247
+ background: rgba(255, 255, 255, 0.7);
248
+ -webkit-backdrop-filter: blur(10px);
249
+ backdrop-filter: blur(10px);
250
+ border: 1px solid rgba(255, 255, 255, 0.2);
251
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
252
+ }
253
+
254
+ .stat-card {
255
+ padding: 25px;
256
+ border-radius: 16px;
257
+ text-align: center;
258
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
259
+ }
260
+
261
+ .stat-card:hover {
262
+ transform: translateY(-8px);
263
+ box-shadow: 0 12px 24px rgba(0,0,0,0.1);
264
+ }
265
+
266
+ .stat-icon-wrapper {
267
+ width: 60px;
268
+ height: 60px;
269
+ margin: 0 auto 15px;
270
+ display: flex;
271
+ align-items: center;
272
+ justify-content: center;
273
+ border-radius: 50%;
274
+ background: linear-gradient(135deg, var(--r-heading-color), #74b9ff);
275
+ }
276
+
277
+ .stat-icon-wrapper i {
278
+ color: white;
279
+ }
280
+
281
+ .stat-number {
282
+ font-size: 3em;
283
+ font-weight: 700;
284
+ color: var(--r-heading-color);
285
+ margin: 10px 0;
286
+ font-family: 'Inter', sans-serif;
287
+ }
288
+
289
+ .stat-trend {
290
+ font-size: 0.9em;
291
+ color: #38d39f;
292
+ margin-top: 10px;
293
+ }
294
+
295
+ .stat-trend.warning {
296
+ color: #ff7675;
297
+ }
298
+
299
+ .progress-bar-wrapper {
300
+ margin: 15px 0;
301
+ }
302
+
303
+ .progress-label {
304
+ display: flex;
305
+ justify-content: space-between;
306
+ margin-bottom: 5px;
307
+ font-weight: 500;
308
+ }
309
+
310
+ .progress-stats {
311
+ font-size: 0.8em;
312
+ color: #636e72;
313
+ margin-top: 5px;
314
+ text-align: right;
315
+ }
316
+
317
+ .impact-statement {
318
+ font-size: 1.2em;
319
+ font-weight: 500;
320
+ color: #e17055;
321
+ margin-top: 15px;
322
+ text-align: center;
323
+ }
324
+
325
+ .chart-header {
326
+ display: flex;
327
+ justify-content: space-between;
328
+ align-items: center;
329
+ margin-bottom: 15px;
330
+ }
331
+
332
+ .chart-footer {
333
+ margin-top: 15px;
334
+ text-align: right;
335
+ font-size: 0.8em;
336
+ color: #636e72;
337
+ }
338
+
339
+ /* Animations */
340
+ .pulse-animation {
341
+ animation: pulse 2s infinite;
342
+ }
343
+
344
+ @keyframes pulse {
345
+ 0% {
346
+ transform: scale(1);
347
+ }
348
+ 50% {
349
+ transform: scale(1.1);
350
+ }
351
+ 100% {
352
+ transform: scale(1);
353
+ }
354
+ }
355
+
356
+ .animate-width {
357
+ animation: fillWidth 1.5s ease-out forwards;
358
+ }
359
+
360
+ @keyframes fillWidth {
361
+ from { width: 0; }
362
+ to { width: var(--target-width); }
363
+ }
364
+
365
+ /* Counter Animation */
366
+ .counter {
367
+ transition: all 1s ease;
368
+ }
369
  </style>
370
  </head>
371
  <body>
372
  <div class="reveal">
373
  <div class="slides">
374
 
375
+ <section class="title-slide" data-background-gradient="linear-gradient(45deg, #f6f8fa 30%, #e3f2fd 100%)">
376
+ <h1 class="animate__animated animate__fadeInDown">Glaucoma: Understanding and Protecting Your Vision</h1>
377
  <div class="columns">
378
  <div class="column">
379
+ <div class="stat-grid animate__animated animate__fadeInLeft">
380
+ <div class="stat-card glass-effect">
381
+ <div class="stat-icon-wrapper">
382
+ <i class="fas fa-eye fa-2x pulse-animation"></i>
383
+ </div>
384
+ <div class="stat-number counter" data-target="80">0</div>
385
+ <p>Million+ People<br>Affected Globally</p>
386
+ <div class="stat-trend">
387
+ <i class="fas fa-arrow-up"></i> 12% yearly
388
+ </div>
389
  </div>
390
+ <div class="stat-card glass-effect">
391
+ <div class="stat-icon-wrapper">
392
+ <i class="fas fa-chart-line fa-2x pulse-animation"></i>
393
+ </div>
394
+ <div class="stat-number counter" data-target="111">0</div>
395
+ <p>Million+ Projected<br>by 2040</p>
396
+ <div class="stat-trend">
397
+ <i class="fas fa-arrow-up"></i> 39% increase
398
+ </div>
399
  </div>
400
+ <div class="stat-card glass-effect">
401
+ <div class="stat-icon-wrapper">
402
+ <i class="fas fa-clock fa-2x pulse-animation"></i>
403
+ </div>
404
+ <div class="stat-number counter" data-target="50">0</div>
405
+ <p>Percent Cases<br>Undiagnosed</p>
406
+ <div class="stat-trend warning">
407
+ <i class="fas fa-exclamation-triangle"></i> Critical
408
+ </div>
409
  </div>
410
  </div>
411
+ <div class="highlight-box glass-effect animate__animated animate__fadeInUp">
412
+ <h3><i class="fas fa-globe-americas"></i> Global Impact</h3>
413
+ <div class="progress-bar-wrapper">
414
+ <div class="progress-label">Global Burden</div>
415
+ <div class="progress-bar">
416
+ <div class="fill animate-width" data-width="75"></div>
417
+ </div>
418
+ <div class="progress-stats">
419
+ <span>75% of cases in developing countries</span>
420
+ </div>
421
  </div>
422
+ <p class="impact-statement">Leading cause of irreversible blindness worldwide</p>
423
  </div>
424
  </div>
425
+ <div class="column animate__animated animate__fadeInRight">
426
+ <div class="chart-container glass-effect">
427
+ <div class="chart-header">
428
+ <h3><i class="fas fa-chart-pie"></i> Global Distribution</h3>
429
+ <div class="chart-legend-toggle">
430
+ <i class="fas fa-list"></i>
431
+ </div>
432
+ </div>
433
  <canvas id="globalPrevalenceChart"></canvas>
434
+ <div class="chart-footer">
435
+ <div class="chart-note">
436
+ <i class="fas fa-info-circle"></i> Data from WHO 2023 Report
437
+ </div>
438
+ </div>
439
  </div>
440
  </div>
441
  </div>
 
691
  });
692
  });
693
 
694
+ // Enhanced chart initialization with animation
695
  document.addEventListener('DOMContentLoaded', function() {
696
  const ctx = document.getElementById('globalPrevalenceChart').getContext('2d');
697
  new Chart(ctx, {
 
701
  datasets: [{
702
  data: [45, 20, 15, 15, 5],
703
  backgroundColor: [
704
+ 'rgba(9, 132, 227, 0.8)',
705
+ 'rgba(0, 184, 148, 0.8)',
706
+ 'rgba(108, 92, 231, 0.8)',
707
+ 'rgba(253, 203, 110, 0.8)',
708
+ 'rgba(225, 112, 85, 0.8)'
709
  ],
710
  borderWidth: 2,
711
  borderColor: 'white'
 
720
  labels: {
721
  padding: 20,
722
  font: {
723
+ size: 14,
724
+ family: 'Inter'
725
+ },
726
+ generateLabels: function(chart) {
727
+ const data = chart.data;
728
+ return data.labels.map((label, i) => ({
729
+ text: `${label} (${data.datasets[0].data[i]}%)`,
730
+ fillStyle: data.datasets[0].backgroundColor[i],
731
+ strokeStyle: data.datasets[0].borderColor,
732
+ lineWidth: data.datasets[0].borderWidth,
733
+ hidden: false,
734
+ index: i
735
+ }));
736
  }
737
  }
738
  },
 
741
  text: 'Global Glaucoma Distribution (2023)',
742
  font: {
743
  size: 16,
744
+ weight: 'bold',
745
+ family: 'Inter'
746
+ },
747
+ padding: {
748
+ top: 10,
749
+ bottom: 30
750
  }
751
  }
752
  },
753
  animation: {
754
  animateScale: true,
755
+ animateRotate: true,
756
+ duration: 2000,
757
+ easing: 'easeInOutQuart'
758
+ },
759
+ hover: {
760
+ mode: 'nearest',
761
+ intersect: true,
762
+ animationDuration: 200
763
  }
764
  }
765
  });
766
+
767
+ // Counter Animation
768
+ const counters = document.querySelectorAll('.counter');
769
+ counters.forEach(counter => {
770
+ const target = parseInt(counter.getAttribute('data-target'));
771
+ const duration = 2000; // 2 seconds
772
+ const step = target / (duration / 16); // 60fps
773
+ let current = 0;
774
+
775
+ const updateCounter = () => {
776
+ current += step;
777
+ if (current < target) {
778
+ counter.textContent = Math.round(current);
779
+ requestAnimationFrame(updateCounter);
780
+ } else {
781
+ counter.textContent = target;
782
+ }
783
+ };
784
+
785
+ updateCounter();
786
+ });
787
+
788
+ // Progress bar animation
789
+ const progressBars = document.querySelectorAll('.animate-width');
790
+ progressBars.forEach(bar => {
791
+ const width = bar.getAttribute('data-width');
792
+ bar.style.setProperty('--target-width', `${width}%`);
793
+ });
794
  });
795
  </script>
796
  </body>