Spaces:
Running
Running
File size: 10,638 Bytes
aeea67c 0f506f1 389ee42 0f506f1 aeea67c 0f506f1 389ee42 0f506f1 389ee42 0f506f1 389ee42 0f506f1 a643f45 aeea67c 0f506f1 a643f45 0f506f1 389ee42 0f506f1 389ee42 0f506f1 389ee42 a643f45 389ee42 0f506f1 389ee42 a643f45 389ee42 0f506f1 389ee42 a643f45 389ee42 0f506f1 389ee42 0f506f1 389ee42 0f506f1 389ee42 0f506f1 389ee42 0f506f1 389ee42 0f506f1 389ee42 0f506f1 389ee42 a643f45 389ee42 a643f45 0f506f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 |
<!DOCTYPE html>
<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> |