Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dr Shafi Anesthesia Dosage Calculator</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> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .calculator { | |
| animation: fadeIn 0.5s ease-out; | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .btn { | |
| transition: all 0.2s ease; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .striped-table tr:nth-child(even) { | |
| background-color: #f8fafc; | |
| } | |
| .striped-table tr:nth-child(odd) { | |
| background-color: #ffffff; | |
| } | |
| .striped-table tr:hover { | |
| background-color: #f1f5f9; | |
| } | |
| .dosage-cell { | |
| min-width: 120px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> | |
| <div class="calculator bg-white rounded-2xl overflow-hidden w-full max-w-6xl"> | |
| <!-- Header --> | |
| <div class="bg-blue-600 p-4 text-white"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-2xl font-bold">Dr Shafi Anesthesia Dosage Calculator</h1> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <p class="text-sm opacity-80">Anesthesia drug dosage calculator based on patient weight</p> | |
| </div> | |
| <!-- Input Section --> | |
| <div class="p-6 bg-gray-50 border-b"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-3">Patient Information</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label> | |
| <input type="number" id="weight" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter weight in kg"> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Age (years)</label> | |
| <input type="number" id="years" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Years"> | |
| </div> | |
| <div class="flex-1 ml-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Months</label> | |
| <input type="number" id="months" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Months"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-3">Options</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Calculation Method</label> | |
| <select id="method" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="both">Show Both Min & Max</option> | |
| <option value="min">Minimum Dose Only</option> | |
| <option value="max">Maximum Dose Only</option> | |
| <option value="avg">Average Dose</option> | |
| </select> | |
| </div> | |
| <button onclick="calculateDosages()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out"> | |
| <i class="fas fa-calculator mr-2"></i> Calculate Dosages | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="p-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Anesthesia Drug Dosages</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full striped-table border-collapse"> | |
| <thead> | |
| <tr class="bg-gray-100"> | |
| <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">Drug</th> | |
| <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">Dosage Range (mg/kg)</th> | |
| <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b dosage-cell">Minimum Dosage (mg)</th> | |
| <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b dosage-cell">Maximum Dosage (mg)</th> | |
| </tr> | |
| </thead> | |
| <tbody id="results-table"> | |
| <!-- Results will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-8"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Paracetamol Dosage</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full striped-table border-collapse"> | |
| <thead> | |
| <tr class="bg-gray-100"> | |
| <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">Drug</th> | |
| <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">Dosage Method</th> | |
| <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b dosage-cell">Dosage (mg)</th> | |
| </tr> | |
| </thead> | |
| <tbody id="paracetamol-table"> | |
| <!-- Results will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="bg-gray-100 p-3 text-center text-sm text-gray-600"> | |
| <p>© 2023 Dr Shafi Anesthesia Dosage Calculator | For medical professionals only</p> | |
| </div> | |
| </div> | |
| <script> | |
| const drugs = [ | |
| { name: "Glycopyrrolate", min: 0.005, max: 0.01 }, | |
| { name: "Ondansetron", min: 0.05, max: 0.1 }, | |
| { name: "Midazolam", min: 0.05, max: 0.1 }, | |
| { name: "Atropine", min: 0.01, max: 0.02 }, | |
| { name: "Fentanyl", min: 1, max: 2 }, | |
| { name: "Propofol", min: 2, max: 3 }, | |
| { name: "Atracurium", min: 0.5, max: 0.5 }, | |
| { name: "Rocuronium", min: 0.6, max: 1.2 }, | |
| { name: "Ketamine Sedation", min: 0.2, max: 0.8 }, | |
| { name: "Ketamine Induction", min: 0.5, max: 2 }, | |
| { name: "Ketamine IM Sedation", min: 2, max: 4 }, | |
| { name: "Neostigmine", min: 0.05, max: 0.05 }, | |
| { name: "Lidocaine", min: 1, max: 2 }, | |
| { name: "Dexamethasone", min: 0.15, max: 15 }, | |
| { name: "Succinylcholine", min: 1, max: 2 } | |
| ]; | |
| function calculateDosages() { | |
| const weightInput = document.getElementById('weight'); | |
| const yearsInput = document.getElementById('years'); | |
| const monthsInput = document.getElementById('months'); | |
| const methodSelect = document.getElementById('method'); | |
| let weight = parseFloat(weightInput.value); | |
| // If weight is not provided, try to estimate from age | |
| if (isNaN(weight) || weight <= 0) { | |
| const years = parseFloat(yearsInput.value) || 0; | |
| const months = parseFloat(monthsInput.value) || 0; | |
| const ageInMonths = years * 12 + months; | |
| if (ageInMonths > 0) { | |
| // Simple pediatric weight estimation formula | |
| if (years >= 1) { | |
| weight = years * 2 + 8; // For children 1-10 years: weight = (age in years × 2) + 8 | |
| } else { | |
| weight = (ageInMonths + 9) / 2; // For infants: weight = (age in months + 9) / 2 | |
| } | |
| weightInput.value = weight.toFixed(1); | |
| } else { | |
| alert("Please enter either weight or age"); | |
| return; | |
| } | |
| } | |
| const method = methodSelect.value; | |
| const resultsTable = document.getElementById('results-table'); | |
| const paracetamolTable = document.getElementById('paracetamol-table'); | |
| // Clear previous results | |
| resultsTable.innerHTML = ''; | |
| paracetamolTable.innerHTML = ''; | |
| // Calculate and display drug dosages | |
| drugs.forEach(drug => { | |
| const minDosage = drug.min * weight; | |
| const maxDosage = drug.max * weight; | |
| const avgDosage = ((drug.min + drug.max) / 2) * weight; | |
| // Create table row | |
| const row = document.createElement('tr'); | |
| row.className = 'border-b border-gray-200'; | |
| if | |
| </html> |