| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Patient-Centered Asthma Management</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
| body { |
| font-family: 'Poppins', sans-serif; |
| } |
| .tab-content { |
| display: none; |
| } |
| .tab-content.active { |
| display: block; |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .checklist-item { |
| transition: all 0.3s ease; |
| } |
| .checklist-item:hover { |
| transform: translateX(5px); |
| } |
| .severity-indicator { |
| height: 8px; |
| border-radius: 4px; |
| transition: width 0.5s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="max-w-6xl mx-auto p-4 md:p-8"> |
| |
| <div class="bg-gradient-to-r from-blue-600 to-cyan-500 rounded-xl shadow-lg p-6 mb-8 text-white"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/4 flex justify-center mb-4 md:mb-0"> |
| <i class="fas fa-lungs text-6xl opacity-80"></i> |
| </div> |
| <div class="md:w-3/4 text-center md:text-left"> |
| <h1 class="text-3xl md:text-4xl font-bold mb-2">Patient-Centered Asthma Assessment & Management</h1> |
| <p class="text-lg opacity-90">A comprehensive approach to asthma care focusing on individual patient needs</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex flex-wrap border-b border-gray-200 mb-6"> |
| <button class="tab-btn active px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600 bg-blue-50 rounded-t-lg" data-tab="assessment"> |
| <i class="fas fa-clipboard-check mr-2"></i>Assessment |
| </button> |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-blue-600" data-tab="management"> |
| <i class="fas fa-procedures mr-2"></i>Management |
| </button> |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-blue-600" data-tab="education"> |
| <i class="fas fa-graduation-cap mr-2"></i>Patient Education |
| </button> |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-blue-600" data-tab="action-plan"> |
| <i class="fas fa-file-medical mr-2"></i>Action Plan |
| </button> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| |
| <div id="assessment" class="tab-content active p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-clipboard-check text-blue-500 mr-3"></i>Comprehensive Asthma Assessment |
| </h2> |
| |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="bg-blue-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-blue-800 mb-3 flex items-center"> |
| <i class="fas fa-check-circle text-blue-600 mr-2"></i>Key Symptoms |
| </h3> |
| <ul class="space-y-2"> |
| <li class="checklist-item flex items-start"> |
| <span class="bg-white p-1 rounded-full mr-2 mt-1"> |
| <i class="fas fa-check text-blue-500 text-xs"></i> |
| </span> |
| <span>Wheezing (expiratory or inspiratory)</span> |
| </li> |
| <li class="checklist-item flex items-start"> |
| <span class="bg-white p-1 rounded-full mr-2 mt-1"> |
| <i class="fas fa-check text-blue-500 text-xs"></i> |
| </span> |
| <span>Shortness of breath (at rest or with exertion)</span> |
| </li> |
| <li class="checklist-item flex items-start"> |
| <span class="bg-white p-1 rounded-full mr-2 mt-1"> |
| <i class="fas fa-check text-blue-500 text-xs"></i> |
| </span> |
| <span>Chest tightness or discomfort</span> |
| </li> |
| <li class="checklist-item flex items-start"> |
| <span class="bg-white p-1 rounded-full mr-2 mt-1"> |
| <i class="fas fa-check text-blue-500 text-xs"></i> |
| </span> |
| <span>Nocturnal symptoms or early morning waking</span> |
| </li> |
| <li class="checklist-item flex items-start"> |
| <span class="bg-white p-1 rounded-full mr-2 mt-1"> |
| <i class="fas fa-check text-blue-500 text-xs"></i> |
| </span> |
| <span>Exercise-induced symptoms</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-orange-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-orange-800 mb-3 flex items-center"> |
| <i class="fas fa-exclamation-triangle text-orange-600 mr-2"></i>Severity Indicators |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Respiratory Rate</span> |
| <span class="text-sm font-medium">>30/min = severe</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="severity-indicator bg-yellow-400 w-3/4 rounded-full"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Heart Rate</span> |
| <span class="text-sm font-medium">>120/min = severe</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="severity-indicator bg-orange-500 w-2/3 rounded-full"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Oxygen Saturation</span> |
| <span class="text-sm font-medium"><92% = severe</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="severity-indicator bg-red-500 w-1/4 rounded-full"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Peak Flow</span> |
| <span class="text-sm font-medium"><50% predicted = severe</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="severity-indicator bg-red-500 w-1/3 rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-purple-50 p-5 rounded-lg mb-6"> |
| <h3 class="text-lg font-semibold text-purple-800 mb-3 flex items-center"> |
| <i class="fas fa-user-circle text-purple-600 mr-2"></i>Patient-Centered Assessment Questions |
| </h3> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="font-medium text-purple-700 mb-2">"Can you describe how asthma affects your daily life?"</p> |
| <p class="text-sm text-gray-600">Assesses impact on quality of life and activities</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="font-medium text-purple-700 mb-2">"What concerns you most about your asthma?"</p> |
| <p class="text-sm text-gray-600">Identifies patient priorities and fears</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="font-medium text-purple-700 mb-2">"What usually triggers your asthma symptoms?"</p> |
| <p class="text-sm text-gray-600">Helps identify environmental/behavioral triggers</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="font-medium text-purple-700 mb-2">"How confident are you in managing your asthma?"</p> |
| <p class="text-sm text-gray-600">Evaluates self-efficacy and education needs</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-100 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-diagnoses text-gray-600 mr-2"></i>Differential Diagnosis |
| </h3> |
| <div class="grid md:grid-cols-3 gap-3"> |
| <div class="bg-white p-3 rounded-lg border-l-4 border-red-400 shadow-xs"> |
| <p class="font-medium">COPD</p> |
| <p class="text-xs text-gray-500">Chronic productive cough, smoking history</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg border-l-4 border-blue-400 shadow-xs"> |
| <p class="font-medium">Heart Failure</p> |
| <p class="text-xs text-gray-500">Orthopnea, PND, cardiac history</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg border-l-4 border-green-400 shadow-xs"> |
| <p class="font-medium">GERD</p> |
| <p class="text-xs text-gray-500">Heartburn, symptoms after meals</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg border-l-4 border-yellow-400 shadow-xs"> |
| <p class="font-medium">Vocal Cord Dysfunction</p> |
| <p class="text-xs text-gray-500">Inspiratory stridor, sudden onset</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg border-l-4 border-purple-400 shadow-xs"> |
| <p class="font-medium">Anxiety/Panic Attacks</p> |
| <p class="text-xs text-gray-500">Hyperventilation, tingling</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg border-l-4 border-indigo-400 shadow-xs"> |
| <p class="font-medium">Pulmonary Embolism</p> |
| <p class="text-xs text-gray-500">Sudden onset, pleuritic pain</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="management" class="tab-content p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-procedures text-blue-500 mr-3"></i>Asthma Management Strategies |
| </h2> |
| |
| |
| <div class="bg-blue-50 p-5 rounded-lg mb-6"> |
| <h3 class="text-lg font-semibold text-blue-800 mb-3 flex items-center"> |
| <i class="fas fa-stairs text-blue-600 mr-2"></i>Stepwise Pharmacological Management |
| </h3> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-sm text-left text-gray-700"> |
| <thead class="text-xs text-blue-700 uppercase bg-blue-100"> |
| <tr> |
| <th class="px-4 py-3">Step</th> |
| <th class="px-4 py-3">Preferred Controller</th> |
| <th class="px-4 py-3">Add-on Therapies</th> |
| <th class="px-4 py-3">Reliever</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="bg-white border-b"> |
| <td class="px-4 py-3 font-medium">Step 1</td> |
| <td class="px-4 py-3">None</td> |
| <td class="px-4 py-3">Consider low-dose ICS if risk factors</td> |
| <td class="px-4 py-3">SABA as needed</td> |
| </tr> |
| <tr class="bg-white border-b"> |
| <td class="px-4 py-3 font-medium">Step 2</td> |
| <td class="px-4 py-3">Low-dose ICS</td> |
| <td class="px-4 py-3">LTRA as alternative</td> |
| <td class="px-4 py-3">SABA as needed</td> |
| </tr> |
| <tr class="bg-white border-b"> |
| <td class="px-4 py-3 font-medium">Step 3</td> |
| <td class="px-4 py-3">Low-dose ICS + LABA</td> |
| <td class="px-4 py-3">Medium-dose ICS or add LTRA</td> |
| <td class="px-4 py-3">SABA as needed</td> |
| </tr> |
| <tr class="bg-white border-b"> |
| <td class="px-4 py-3 font-medium">Step 4</td> |
| <td class="px-4 py-3">Medium-dose ICS + LABA</td> |
| <td class="px-4 py-3">Consider tiotropium, anti-IgE</td> |
| <td class="px-4 py-3">SABA as needed</td> |
| </tr> |
| <tr class="bg-white"> |
| <td class="px-4 py-3 font-medium">Step 5</td> |
| <td class="px-4 py-3">High-dose ICS + LABA</td> |
| <td class="px-4 py-3">Anti-IgE, anti-IL5, consider oral steroids</td> |
| <td class="px-4 py-3">SABA as needed</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <p class="text-xs text-gray-600 mt-2">ICS = Inhaled Corticosteroids, LABA = Long-acting Beta Agonists, LTRA = Leukotriene Receptor Antagonists, SABA = Short-acting Beta Agonists</p> |
| </div> |
| |
| |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-green-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-green-800 mb-3 flex items-center"> |
| <i class="fas fa-leaf text-green-600 mr-2"></i>Non-Pharmacological Management |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex items-start"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-ban text-green-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Trigger Avoidance</p> |
| <p class="text-sm text-gray-600">Allergen reduction, smoking cessation, air pollution awareness</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-running text-green-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Physical Activity</p> |
| <p class="text-sm text-gray-600">Tailored exercise programs with proper warm-up</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-utensils text-green-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Nutrition</p> |
| <p class="text-sm text-gray-600">Anti-inflammatory diet, weight management if obese</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-brain text-green-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Stress Management</p> |
| <p class="text-sm text-gray-600">Breathing exercises, mindfulness, CBT if anxiety is a trigger</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-purple-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-purple-800 mb-3 flex items-center"> |
| <i class="fas fa-spray-can text-purple-600 mr-2"></i>Inhaler Technique Checklist |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="step1" class="mr-3 h-5 w-5 text-purple-600"> |
| <label for="step1" class="text-gray-700">Shake inhaler well before use (MDI)</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="step2" class="mr-3 h-5 w-5 text-purple-600"> |
| <label for="step2" class="text-gray-700">Exhale fully before inhalation</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="step3" class="mr-3 h-5 w-5 text-purple-600"> |
| <label for="step3" class="text-gray-700">Start inhaling just before activating device</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="step4" class="mr-3 h-5 w-5 text-purple-600"> |
| <label for="step4" class="text-gray-700">Slow, deep inhalation (3-5 seconds)</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="step5" class="mr-3 h-5 w-5 text-purple-600"> |
| <label for="step5" class="text-gray-700">Hold breath for 10 seconds after inhalation</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="step6" class="mr-3 h-5 w-5 text-purple-600"> |
| <label for="step6" class="text-gray-700">Wait 30-60 seconds between puffs</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="step7" class="mr-3 h-5 w-5 text-purple-600"> |
| <label for="step7" class="text-gray-700">Rinse mouth after ICS use (prevents thrush)</label> |
| </div> |
| </div> |
| <div class="mt-4 text-center"> |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"> |
| <i class="fas fa-video mr-2"></i>Watch Demonstration |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-red-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-red-800 mb-3 flex items-center"> |
| <i class="fas fa-first-aid text-red-600 mr-2"></i>Acute Exacerbation Management |
| </h3> |
| <div class="grid md:grid-cols-3 gap-4"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-red-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-1 text-red-600"></i> |
| </div> |
| <h4 class="font-medium text-red-700">Immediate Actions</h4> |
| </div> |
| <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
| <li>Administer high-dose SABA via spacer (4-10 puffs)</li> |
| <li>Give oxygen if SpO2 <92% (target 94-98%)</li> |
| <li>Oral prednisolone (40-50mg daily for 5-7 days)</li> |
| </ul> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-red-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-2 text-red-600"></i> |
| </div> |
| <h4 class="font-medium text-red-700">Moderate-Severe</h4> |
| </div> |
| <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
| <li>Add ipratropium bromide to SABA</li> |
| <li>Consider IV magnesium sulfate (severe cases)</li> |
| <li>Monitor response (peak flow, symptoms)</li> |
| </ul> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-red-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-3 text-red-600"></i> |
| </div> |
| <h4 class="font-medium text-red-700">Life-Threatening</h4> |
| </div> |
| <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
| <li>Immediate ICU referral</li> |
| <li>IV hydrocortisone</li> |
| <li>Consider IV aminophylline (with caution)</li> |
| <li>Possible mechanical ventilation</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="education" class="tab-content p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-graduation-cap text-blue-500 mr-3"></i>Patient Education Strategies |
| </h2> |
| |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="bg-blue-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-blue-800 mb-3 flex items-center"> |
| <i class="fas fa-book-open text-blue-600 mr-2"></i>Key Education Topics |
| </h3> |
| <div class="space-y-4"> |
| <div class="bg-white p-3 rounded-lg shadow-xs flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-prescription-bottle-alt text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Medication Understanding</p> |
| <p class="text-sm text-gray-600">Difference between preventers and relievers, proper use, side effects</p> |
| </div> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-xs flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-exclamation-triangle text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Trigger Identification</p> |
| <p class="text-sm text-gray-600">Recognizing and avoiding personal asthma triggers</p> |
| </div> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-xs flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-chart-line text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Symptom Monitoring</p> |
| <p class="text-sm text-gray-600">Recognizing worsening symptoms, peak flow monitoring</p> |
| </div> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-xs flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-phone-alt text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Emergency Preparedness</p> |
| <p class="text-sm text-gray-600">When to seek urgent help, emergency contacts</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-green-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-green-800 mb-3 flex items-center"> |
| <i class="fas fa-chalkboard-teacher text-green-600 mr-2"></i>Effective Teaching Methods |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-comment-dots text-green-600"></i> |
| </div> |
| <p class="text-gray-700">Teach-back method: "Can you show me how you use your inhaler?"</p> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-video text-green-600"></i> |
| </div> |
| <p class="text-gray-700">Video demonstrations of proper techniques</p> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-mobile-alt text-green-600"></i> |
| </div> |
| <p class="text-gray-700">Mobile apps for medication reminders and tracking</p> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-people-arrows text-green-600"></i> |
| </div> |
| <p class="text-gray-700">Group education sessions for peer support</p> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-green-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-home text-green-600"></i> |
| </div> |
| <p class="text-gray-700">Home environment assessment for triggers</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-purple-50 p-5 rounded-lg mb-6"> |
| <h3 class="text-lg font-semibold text-purple-800 mb-3 flex items-center"> |
| <i class="fas fa-globe-americas text-purple-600 mr-2"></i>Cultural Considerations |
| </h3> |
| <div class="grid md:grid-cols-3 gap-4"> |
| <div class="bg-white p-3 rounded-lg shadow-xs"> |
| <p class="font-medium text-purple-700">Health Beliefs</p> |
| <p class="text-sm text-gray-600">Address concerns about steroid use, preference for alternative therapies</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-xs"> |
| <p class="font-medium text-purple-700">Language Barriers</p> |
| <p class="text-sm text-gray-600">Use professional interpreters, visual aids, translated materials</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-xs"> |
| <p class="font-medium text-purple-700">Health Literacy</p> |
| <p class="text-sm text-gray-600">Assess understanding, avoid jargon, use simple analogies</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-orange-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-orange-800 mb-3 flex items-center"> |
| <i class="fas fa-clipboard-list text-orange-600 mr-2"></i>Education Evaluation |
| </h3> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div> |
| <p class="font-medium text-orange-700 mb-2">Knowledge Assessment Questions:</p> |
| <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
| <li>"Can you name your preventer and reliever medications?"</li> |
| <li>"What would you do if your symptoms got worse at night?"</li> |
| <li>"How often should you use your preventer inhaler?"</li> |
| <li>"When would you call for emergency help?"</li> |
| </ul> |
| </div> |
| <div> |
| <p class="font-medium text-orange-700 mb-2">Skill Assessment:</p> |
| <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1"> |
| <li>Demonstrate inhaler technique with placebo device</li> |
| <li>Show how to clean/maintain inhaler devices</li> |
| <li>Demonstrate peak flow meter use</li> |
| <li>Explain action plan steps</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="action-plan" class="tab-content p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-file-medical text-blue-500 mr-3"></i>Personalized Asthma Action Plan |
| </h2> |
| |
| <div class="bg-white border border-blue-200 rounded-lg shadow-sm mb-6"> |
| <div class="bg-blue-600 text-white p-4 rounded-t-lg"> |
| <h3 class="text-lg font-semibold">Sample Asthma Action Plan</h3> |
| </div> |
| <div class="p-5"> |
| <div class="grid md:grid-cols-3 gap-4 mb-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Patient Name</label> |
| <div class="border-b border-gray-300 pb-1">[Patient Name]</div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Date Created</label> |
| <div class="border-b border-gray-300 pb-1">[Date]</div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Clinician</label> |
| <div class="border-b border-gray-300 pb-1">[Your Name]</div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-green-50 p-4 rounded-lg mb-4 border-l-4 border-green-500"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-green-500 text-white p-1 rounded-full mr-3"> |
| <i class="fas fa-check-circle text-xs"></i> |
| </div> |
| <h4 class="font-semibold text-green-800">Green Zone (Good Control)</h4> |
| </div> |
| <p class="text-sm text-gray-700 mb-2">No daytime symptoms, no night waking, normal activities</p> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div> |
| <p class="text-xs font-medium text-gray-600 mb-1">PEAK FLOW</p> |
| <p class="text-sm">>80% of personal best</p> |
| </div> |
| <div> |
| <p class="text-xs font-medium text-gray-600 mb-1">ACTION</p> |
| <p class="text-sm">Continue regular controller medication</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-yellow-50 p-4 rounded-lg mb-4 border-l-4 border-yellow-500"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-yellow-500 text-white p-1 rounded-full mr-3"> |
| <i class="fas fa-exclamation-triangle text-xs"></i> |
| </div> |
| <h4 class="font-semibold text-yellow-800">Yellow Zone (Caution)</h4> |
| </div> |
| <p class="text-sm text-gray-700 mb-2">Cough, wheeze, chest tightness, night symptoms, limited activity</p> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div> |
| <p class="text-xs font-medium text-gray-600 mb-1">PEAK FLOW</p> |
| <p class="text-sm">50-80% of personal best</p> |
| </div> |
| <div> |
| <p class="text-xs font-medium text-gray-600 mb-1">ACTION</p> |
| <ul class="list-disc pl-5 text-sm space-y-1"> |
| <li>Take reliever inhaler (2-4 puffs)</li> |
| <li>Double controller dose (as prescribed)</li> |
| <li>Monitor closely</li> |
| <li>Contact clinician if no improvement</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-red-50 p-4 rounded-lg mb-6 border-l-4 border-red-500"> |
| <div class="flex items-center mb-2"> |
| <div class="bg-red-500 text-white p-1 rounded-full mr-3"> |
| <i class="fas fa-times-circle text-xs"></i> |
| </div> |
| <h4 class="font-semibold text-red-800">Red Zone (Medical Alert)</h4> |
| </div> |
| <p class="text-sm text-gray-700 mb-2">Severe symptoms at rest, difficulty speaking, reliever not helping</p> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div> |
| <p class="text-xs font-medium text-gray-600 mb-1">PEAK FLOW</p> |
| <p class="text-sm"><50% of personal best</p> |
| </div> |
| <div> |
| <p class="text-xs font-medium text-gray-600 mb-1">ACTION</p> |
| <ul class="list-disc pl-5 text-sm space-y-1"> |
| <li>Take reliever inhaler (6-10 puffs)</li> |
| <li>Take oral steroids if prescribed</li> |
| <li>Call ambulance if no improvement</li> |
| <li>Continue reliever every 15-20 minutes</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Emergency Contacts</label> |
| <div class="border-b border-gray-300 pb-1">GP: [Number]</div> |
| <div class="border-b border-gray-300 pb-1 mt-2">Asthma Nurse: [Number]</div> |
| <div class="border-b border-gray-300 pb-1 mt-2">Emergency: 999</div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Personal Triggers</label> |
| <div class="border-b border-gray-300 pb-1">1. [Trigger]</div> |
| <div class="border-b border-gray-300 pb-1 mt-2">2. [Trigger]</div> |
| <div class="border-b border-gray-300 pb-1 mt-2">3. [Trigger]</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div class="bg-blue-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-blue-800 mb-3 flex items-center"> |
| <i class="fas fa-lightbulb text-blue-600 mr-2"></i>Action Plan Tips |
| </h3> |
| <ul class="list-disc pl-5 text-gray-700 space-y-2"> |
| <li>Personalize with patient's actual medications and peak flow numbers</li> |
| <li>Use simple, clear language appropriate to health literacy level</li> |
| <li>Include both written and visual components (traffic light system)</li> |
| <li>Review and update at every clinical encounter</li> |
| <li>Provide copies for home, work/school, and emergency contacts</li> |
| <li>Consider digital versions for smartphone access</li> |
| </ul> |
| </div> |
| |
| <div class="bg-purple-50 p-5 rounded-lg"> |
| <h3 class="text-lg font-semibold text-purple-800 mb-3 flex items-center"> |
| <i class="fas fa-chart-pie text-purple-600 mr-2"></i>Action Plan Outcomes |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Reduced Hospitalizations</span> |
| <span class="text-sm font-medium">40-50% decrease</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="severity-indicator bg-green-500 w-2/3 rounded-full"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Improved Control</span> |
| <span class="text-sm font-medium">60% better adherence</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="severity-indicator bg-blue-500 w-3/4 rounded-full"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Patient Confidence</span> |
| <span class="text-sm font-medium">75% feel more in control</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="severity-indicator bg-purple-500 w-4/5 rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| <p class="text-xs text-gray-600 mt-3">*Based on studies of written asthma action plan effectiveness</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 text-white p-6 rounded-xl mt-8"> |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div> |
| <h3 class="text-lg font-semibold mb-3">Key Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-blue-300 hover:text-white">BTS/SIGN Asthma Guidelines</a></li> |
| <li><a href="#" class="text-blue-300 hover:text-white">Asthma UK Patient Materials</a></li> |
| <li><a href="#" class="text-blue-300 hover:text-white">Inhaler Technique Videos</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-3">Teaching Tools</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-blue-300 hover:text-white">Printable Action Plans</a></li> |
| <li><a href="#" class="text-blue-300 hover:text-white">Peak Flow Diary</a></li> |
| <li><a href="#" class="text-blue-300 hover:text-white">Symptom Tracker</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-3">References</h3> |
| <p class="text-sm text-gray-300">Global Initiative for Asthma (GINA) 2023</p> |
| <p class="text-sm text-gray-300">NICE Guidelines [NG80]</p> |
| <p class="text-sm text-gray-300">British Thoracic Society 2019</p> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-gray-700 text-center text-sm text-gray-400"> |
| <p>© 2023 Patient-Centered Asthma Education Toolkit</p> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('.tab-btn').forEach(button => { |
| button.addEventListener('click', () => { |
| const tabId = button.getAttribute('data-tab'); |
| |
| |
| document.querySelectorAll('.tab-btn').forEach(btn => { |
| btn.classList.remove('active', 'text-blue-600', 'border-blue-600', 'bg-blue-50'); |
| btn.classList.add('text-gray-500'); |
| }); |
| document.querySelectorAll('.tab-content').forEach(tab => { |
| tab.classList.remove('active'); |
| }); |
| |
| |
| button.classList.add('active', 'text-blue-600', 'border-blue-600', 'bg-blue-50'); |
| button.classList.remove('text-gray-500'); |
| document.getElementById(tabId).classList.add('active'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { |
| checkbox.addEventListener('change', function() { |
| const label = this.nextElementSibling; |
| if(this.checked) { |
| label.classList.add('line-through', 'text-gray-400'); |
| } else { |
| label.classList.remove('line-through', 'text-gray-400'); |
| } |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wayner372/wayner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
