Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Preserflo™ MicroShunt - Advanced Glaucoma Treatment</title> | |
| <!-- Reveal.js --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/white.min.css"> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .reveal section { | |
| height: 100%; | |
| } | |
| .reveal h1 { | |
| font-size: 2.5em; | |
| color: #1a365d; | |
| } | |
| .reveal h2 { | |
| font-size: 1.8em; | |
| color: #2c5282; | |
| } | |
| .reveal p { | |
| font-size: 1.2em; | |
| line-height: 1.6; | |
| } | |
| .reveal ul { | |
| list-style-type: none; | |
| margin-left: 1em; | |
| } | |
| .reveal li { | |
| margin: 0.8em 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .reveal li i { | |
| margin-right: 0.5em; | |
| color: #2c5282; | |
| } | |
| .custom-bg { | |
| background-color: rgba(255, 255, 255, 0.95); | |
| padding: 2rem; | |
| border-radius: 1rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .medical-icon { | |
| font-size: 1.2em; | |
| color: #2c5282; | |
| } | |
| .img-container { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| aspect-ratio: 4/3; | |
| background: white; | |
| } | |
| .img-container img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| padding: 1rem; | |
| } | |
| .chart-container { | |
| background: white; | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| margin: 1rem 0; | |
| } | |
| .comparison-chart { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .bar { | |
| background: linear-gradient(to right, #3b82f6, #60a5fa); | |
| height: 2rem; | |
| border-radius: 0.25rem; | |
| transition: width 0.3s ease; | |
| position: relative; | |
| } | |
| .bar::after { | |
| content: attr(data-value); | |
| position: absolute; | |
| right: 8px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: white; | |
| font-weight: bold; | |
| } | |
| .stat-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| .stat-card { | |
| background: white; | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| transition: transform 0.2s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| .stat-number { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: #2563eb; | |
| margin-bottom: 0.5rem; | |
| } | |
| .chart-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: #1e40af; | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| .line-chart { | |
| width: 100%; | |
| height: 200px; | |
| margin-top: 1rem; | |
| } | |
| .axis-label { | |
| font-size: 0.875rem; | |
| fill: #64748b; | |
| } | |
| .data-point { | |
| fill: #3b82f6; | |
| r: 4; | |
| } | |
| .data-line { | |
| stroke: #3b82f6; | |
| stroke-width: 2; | |
| fill: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <div class="slides"> | |
| <!-- Title Slide --> | |
| <section class="bg-gradient-to-r from-blue-100 to-blue-200"> | |
| <div class="custom-bg"> | |
| <i class="fas fa-eye medical-icon text-5xl mb-6"></i> | |
| <h1 class="text-4xl font-bold mb-6">Preserflo™ MicroShunt</h1> | |
| <h2 class="text-2xl text-gray-700 mb-4">Advanced Glaucoma Treatment Solution</h2> | |
| <p class="text-lg text-gray-600">A Revolutionary Approach to IOP Management</p> | |
| </div> | |
| </section> | |
| <!-- What is Glaucoma? --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Understanding Glaucoma</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left"> | |
| <li><i class="fas fa-exclamation-triangle"></i>Progressive optic nerve damage</li> | |
| <li><i class="fas fa-arrow-up"></i>Often associated with elevated intraocular pressure (IOP)</li> | |
| <li><i class="fas fa-eye-slash"></i>Leading cause of irreversible blindness worldwide</li> | |
| <li><i class="fas fa-users"></i>Affects over 80 million people globally</li> | |
| </ul> | |
| <div class="chart-container mt-4"> | |
| <div class="chart-title">Global Impact of Glaucoma</div> | |
| <div class="stat-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-number">80M+</div> | |
| <div>Global Cases</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">2nd</div> | |
| <div>Leading Cause of Blindness</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Eye_diagram-en.svg/1280px-Eye_diagram-en.svg.png" alt="Eye Anatomy Diagram" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What is Preserflo? --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">The Preserflo™ MicroShunt</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left mb-4"> | |
| <li><i class="fas fa-microscope"></i>Ultra-stable, biocompatible SIBS material</li> | |
| <li><i class="fas fa-ruler-combined"></i>Dimensions: 8.5mm long, 350μm external diameter</li> | |
| <li><i class="fas fa-lock"></i>Planar fins prevent rotation and migration</li> | |
| <li><i class="fas fa-drafting-compass"></i>Precisely engineered internal lumen (70μm)</li> | |
| </ul> | |
| <div class="chart-container"> | |
| <div class="chart-title">Device Specifications</div> | |
| <svg width="100%" height="160" class="device-diagram"> | |
| <defs> | |
| <linearGradient id="deviceGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:1" /> | |
| </linearGradient> | |
| </defs> | |
| <rect x="10%" y="40" width="80%" height="40" fill="url(#deviceGradient)" rx="20"/> | |
| <text x="50%" y="65" text-anchor="middle" fill="white" font-weight="bold">8.5mm length</text> | |
| <line x1="10%" y1="100" x2="90%" y2="100" stroke="#2563eb" stroke-width="2"/> | |
| <text x="50%" y="115" text-anchor="middle" fill="#2563eb">350μm external diameter</text> | |
| <circle cx="25%" cy="60" r="5" fill="#fff"/> | |
| <circle cx="75%" cy="60" r="5" fill="#fff"/> | |
| <text x="50%" y="140" text-anchor="middle" fill="#64748b" font-size="12">Internal lumen: 70μm</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Glaucoma_drainage_device.jpg/1280px-Glaucoma_drainage_device.jpg" alt="Medical Device" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it Works --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Mechanism of Action</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left mb-4"> | |
| <li><i class="fas fa-route"></i>Creates controlled aqueous outflow pathway</li> | |
| <li><i class="fas fa-exchange-alt"></i>Diverts fluid from anterior chamber to subconjunctival space</li> | |
| <li><i class="fas fa-filter"></i>Forms a posterior filtration bleb</li> | |
| <li><i class="fas fa-cogs"></i>Maintains optimal IOP through precise engineering</li> | |
| </ul> | |
| <div class="chart-container"> | |
| <div class="chart-title">Aqueous Flow Pathway</div> | |
| <svg width="100%" height="180"> | |
| <defs> | |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> | |
| <polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/> | |
| </marker> | |
| <linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.2" /> | |
| <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.2" /> | |
| </linearGradient> | |
| </defs> | |
| <rect x="10%" y="20" width="80%" height="140" fill="url(#flowGradient)" rx="10"/> | |
| <path d="M50,90 Q150,40 250,90" stroke="#3b82f6" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/> | |
| <circle cx="50" cy="90" r="8" fill="#3b82f6"/> | |
| <circle cx="250" cy="90" r="8" fill="#60a5fa"/> | |
| <text x="50" y="120" text-anchor="middle" fill="#2563eb" font-weight="bold">Anterior Chamber</text> | |
| <text x="250" y="120" text-anchor="middle" fill="#2563eb" font-weight="bold">Subconjunctival Space</text> | |
| <text x="150" y="40" text-anchor="middle" fill="#64748b">Controlled Flow</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Glaucoma_Types.png/1280px-Glaucoma_Types.png" alt="Glaucoma Mechanism" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Indications --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Clinical Indications</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left"> | |
| <li><i class="fas fa-clipboard-check"></i>Primary Open-Angle Glaucoma (POAG)</li> | |
| <li><i class="fas fa-chart-line"></i>Uncontrolled IOP despite maximum medical therapy</li> | |
| <li><i class="fas fa-history"></i>Failed previous glaucoma surgeries</li> | |
| <li><i class="fas fa-allergies"></i>Patients intolerant to medication</li> | |
| </ul> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://images.unsplash.com/photo-1576091160291-31957ab2724d?auto=format&fit=crop&w=800" alt="Patient Consultation" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- The Procedure --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Surgical Procedure</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left"> | |
| <li><i class="fas fa-hospital-user"></i>Outpatient procedure under local anesthesia</li> | |
| <li><i class="fas fa-vial"></i>MMC application for bleb modulation</li> | |
| <li><i class="fas fa-crosshairs"></i>Precise placement in anterior chamber</li> | |
| <li><i class="fas fa-hand-holding-medical"></i>Minimal tissue disruption</li> | |
| </ul> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://images.unsplash.com/photo-1576091160702-a1607572684d?auto=format&fit=crop&w=800" alt="Surgical Environment" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Clinical Benefits</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left mb-4"> | |
| <li><i class="fas fa-chart-bar"></i>Significant and sustained IOP reduction</li> | |
| <li><i class="fas fa-pills"></i>Reduced dependency on medications</li> | |
| <li><i class="fas fa-check-circle"></i>Standardized surgical technique</li> | |
| <li><i class="fas fa-running"></i>Faster recovery compared to traditional surgery</li> | |
| </ul> | |
| <div class="chart-container"> | |
| <div class="chart-title">IOP Reduction Results</div> | |
| <div class="comparison-chart"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-semibold">Baseline IOP</span> | |
| <span class="font-semibold">24.8 mmHg</span> | |
| </div> | |
| <div class="bar" style="width: 100%" data-value="24.8 mmHg"></div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-semibold">6 Months Post-Op</span> | |
| <span class="font-semibold">13.7 mmHg</span> | |
| </div> | |
| <div class="bar" style="width: 55%" data-value="13.7 mmHg"></div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-semibold">12 Months Post-Op</span> | |
| <span class="font-semibold">12.9 mmHg</span> | |
| </div> | |
| <div class="bar" style="width: 52%" data-value="12.9 mmHg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Fundus_photograph_of_normal_right_eye.jpg/1280px-Fundus_photograph_of_normal_right_eye.jpg" alt="Clinical Benefits" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Comparison with Trabeculectomy --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Preserflo™ vs. Trabeculectomy</h2> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-3"><i class="fas fa-star mr-2"></i>Preserflo™ MicroShunt</h3> | |
| <ul class="text-left text-sm"> | |
| <li><i class="fas fa-check text-green-500"></i>Standardized procedure</li> | |
| <li><i class="fas fa-check text-green-500"></i>Lower risk of hypotony</li> | |
| <li><i class="fas fa-check text-green-500"></i>Faster visual recovery</li> | |
| <li><i class="fas fa-check text-green-500"></i>Fewer post-op interventions</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-3"><i class="fas fa-hospital mr-2"></i>Trabeculectomy</h3> | |
| <ul class="text-left text-sm"> | |
| <li><i class="fas fa-exclamation-circle text-red-500"></i>More surgeon dependent</li> | |
| <li><i class="fas fa-exclamation-circle text-red-500"></i>Higher risk of complications</li> | |
| <li><i class="fas fa-exclamation-circle text-red-500"></i>Longer recovery period</li> | |
| <li><i class="fas fa-exclamation-circle text-red-500"></i>More frequent follow-up needed</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Safety Considerations --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Safety Profile</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left"> | |
| <li><i class="fas fa-shield-alt"></i>Lower risk of hypotony compared to trabeculectomy</li> | |
| <li><i class="fas fa-check-shield"></i>Minimal risk of device erosion</li> | |
| <li><i class="fas fa-virus-slash"></i>Reduced risk of infection</li> | |
| <li><i class="fas fa-user-nurse"></i>Manageable post-operative care</li> | |
| </ul> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Ophthalmology_symbol.svg/1280px-Ophthalmology_symbol.svg.png" alt="Safety Measures" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clinical Evidence --> | |
| <section> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Clinical Evidence</h2> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <ul class="text-left mb-4"> | |
| <li><i class="fas fa-chart-pie"></i>High success rates in clinical trials</li> | |
| <li><i class="fas fa-percent"></i>Significant IOP reduction (40-50%)</li> | |
| <li><i class="fas fa-prescription"></i>Medication reduction in most patients</li> | |
| <li><i class="fas fa-clock"></i>Sustained effectiveness over time</li> | |
| </ul> | |
| <div class="chart-container"> | |
| <div class="chart-title">Success Rates at 12 Months</div> | |
| <div class="stat-grid"> | |
| <div class="stat-card"> | |
| <i class="fas fa-check-double text-3xl text-green-600 mb-2"></i> | |
| <div class="stat-number">83.3%</div> | |
| <div>Complete Success</div> | |
| <div class="text-sm text-gray-600">No Medications</div> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-star text-3xl text-blue-600 mb-2"></i> | |
| <div class="stat-number">94.8%</div> | |
| <div>Qualified Success</div> | |
| <div class="text-sm text-gray-600">≤ 2 Medications</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="img-container"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/DNA_orbit_animated.gif/1280px-DNA_orbit_animated.gif" alt="Clinical Research" class="rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Conclusion --> | |
| <section class="bg-gradient-to-r from-blue-100 to-blue-200"> | |
| <div class="custom-bg"> | |
| <h2 class="text-3xl font-bold mb-6">Conclusion</h2> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div class="text-left"> | |
| <p class="mb-4"><i class="fas fa-award text-2xl mr-3"></i>The Preserflo™ MicroShunt represents a significant advancement in glaucoma surgery:</p> | |
| <ul class="text-left"> | |
| <li><i class="fas fa-lightbulb"></i>Innovative design with proven effectiveness</li> | |
| <li><i class="fas fa-tasks"></i>Standardized surgical technique</li> | |
| <li><i class="fas fa-shield-check"></i>Excellent safety profile</li> | |
| <li><i class="fas fa-star"></i>Potential to become the new standard of care</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <!-- Reveal.js Scripts --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script> | |
| <script> | |
| Reveal.initialize({ | |
| hash: true, | |
| center: true, | |
| progress: true, | |
| controls: true, | |
| transition: 'slide', | |
| width: 1200, | |
| height: 800 | |
| }); | |
| </script> | |
| </body> | |
| </html> |