Hugging Face's logo

Spaces:
aarnal80
/
AppConsulta360
Running

App Files Community
aarnal80 commited on
Commit
28a54b7
·
verified ·
1 Parent(s): 6f71e4c

Update farmadosis/farmadosis.html

Browse files
Files changed (1) hide show
  1. farmadosis/farmadosis.html +50 -85
farmadosis/farmadosis.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Calculadora de Urgencias Médicas</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
9
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
@@ -12,14 +12,13 @@
12
  background-color: #f8fafc;
13
  font-family: "Montserrat", sans-serif;
14
  }
15
- /* Estilos para las pestañas */
16
  .tab-btn {
17
- transition: background-color 0.2s, color 0.2s;
 
18
  }
19
  .tab-btn.active {
20
- background-color: #0d9488; /* teal-600 */
21
- color: white;
22
- border-color: #0d9488;
23
  }
24
  .input-field {
25
  width: 100%;
@@ -32,8 +31,8 @@
32
  }
33
  .input-field:focus {
34
  outline: none;
35
- border-color: #3b82f6;
36
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
37
  }
38
  .result-card {
39
  background-color: white;
@@ -46,20 +45,18 @@
46
  }
47
  .drug-calculation span {
48
  font-weight: 600;
49
- color: #c026d3; /* fuchsia-700 */
50
  }
51
  </style>
52
  </head>
53
  <body class="min-h-screen bg-gray-50 p-4 sm:p-6">
54
- <div class="mx-auto max-w-3xl p-6 my-8 bg-white rounded-xl shadow-lg">
55
 
56
  <div class="text-center mb-4">
57
- <h1 class="text-2xl font-bold text-teal-700 flex items-center justify-center">
58
- <i class="fas fa-calculator mr-3"></i>Calculadora de Urgencias
59
  </h1>
60
- <p class="text-gray-600 mt-2 text-sm leading-relaxed">
61
- Herramienta para Secuencia de Intubación y Bombas de Perfusión.
62
- </p>
63
  </div>
64
 
65
  <div class="flex justify-end mb-4">
@@ -73,16 +70,18 @@
73
  <strong>Atención:</strong> Esta es una herramienta de ayuda y no reemplaza el juicio clínico. Verifique siempre los cálculos.
74
  </div>
75
 
76
- <div class="flex border-b border-gray-200 mb-6">
77
- <button id="tab-sri" class="tab-btn active flex-1 py-2 px-4 text-sm font-semibold text-gray-600 border-b-2 border-transparent hover:bg-teal-50">
78
- <i class="fas fa-lungs mr-2"></i>Secuencia Rápida Intubación
79
- </button>
80
- <button id="tab-bombas" class="tab-btn flex-1 py-2 px-4 text-sm font-semibold text-gray-600 border-b-2 border-transparent hover:bg-teal-50">
81
- <i class="fas fa-syringe mr-2"></i>Bombas de Perfusión
82
- </button>
 
 
83
  </div>
84
 
85
- <div class="bg-teal-50 p-4 rounded-lg border border-teal-100 shadow-inner space-y-4 mb-6">
86
  <div>
87
  <label for="patientWeight" class="block text-sm font-medium text-gray-700 mb-2">
88
  <i class="fas fa-weight-scale mr-2"></i>Peso del paciente (kg)
@@ -114,11 +113,10 @@
114
  </div>
115
  </div>
116
  </main>
117
-
118
  </div>
119
 
120
  <script type="module">
121
- // --- DATOS MÉDICOS (ACTUALIZADOS) ---
122
  const rsiDrugs = {
123
  premedicacion: [
124
  { name: 'Fentanilo', dose: '1-3 mcg/kg', presentation: { value: 50, unit: 'mcg/ml' } },
@@ -163,7 +161,7 @@
163
  }
164
  };
165
 
166
- // --- REFERENCIAS AL DOM ---
167
  const patientWeightInput = document.getElementById('patientWeight');
168
  const tabSri = document.getElementById('tab-sri');
169
  const tabBombas = document.getElementById('tab-bombas');
@@ -174,25 +172,13 @@
174
  const doseUnitSpan = document.getElementById('doseUnit');
175
  const pumpResultsDisplay = document.getElementById('pump-results');
176
 
177
- // --- LÓGICA DE LA APP ---
178
-
179
  function calculateDose(weight, doseString, presentation) {
180
  const doseValues = doseString.match(/[\d.]+/g).map(Number);
181
  const unit = doseString.includes('mcg') ? 'mcg' : 'mg';
182
-
183
- let doseRange = [];
184
- if (doseValues.length === 1) {
185
- doseRange.push(weight * doseValues[0]);
186
- } else {
187
- doseRange.push(weight * doseValues[0]);
188
- doseRange.push(weight * doseValues[1]);
189
- }
190
-
191
  let doseMg = doseRange.map(d => (unit === 'mcg' ? d / 1000 : d));
192
  let volumeMl = doseMg.map(d => d / presentation.value * (presentation.unit.includes('mcg') ? 1000 : 1));
193
-
194
  const format = (arr) => arr.length === 1 ? arr[0].toFixed(1) : `${arr[0].toFixed(1)} - ${arr[1].toFixed(1)}`;
195
-
196
  return `Dosis: <span>${format(doseRange)} ${unit}</span> / Total: <span>${format(volumeMl)} ml</span>`;
197
  }
198
 
@@ -202,35 +188,26 @@
202
  contentSri.innerHTML = `<div class="text-center py-10 text-gray-400"><i class="fas fa-notes-medical text-4xl mb-3"></i><p>Introduzca un peso válido.</p></div>`;
203
  return;
204
  }
205
-
206
- let html = `
207
- <h2 class="text-lg font-bold text-teal-700 mb-4"><i class="fas fa-list-ol mr-2"></i>Las 7 P's de la Intubación</h2>
208
  <div class="space-y-4 text-sm">
209
- <p><strong>1. Preparación:</strong> Monitorización, material listo (tubos, laringo, aspirador), fármacos cargados.</p>
210
- <p><strong>2. Preoxigenación:</strong> FiO₂ 100% durante 3-5 minutos con mascarilla reservorio o VMNI.</p>
211
  <div>
212
  <p><strong>3. Premedicación:</strong> (Atenuar respuesta simpática)</p>
213
- <ul class="list-disc ml-6 mt-1 space-y-1">
214
- ${rsiDrugs.premedicacion.map(drug => `<li class="drug-calculation"><strong>${drug.name}</strong> (${drug.presentation.value} ${drug.presentation.unit}): ${calculateDose(weight, drug.dose, drug.presentation)}</li>`).join('')}
215
- </ul>
216
  </div>
217
  <div>
218
- <p><strong>4. Parálisis con Inducción:</strong> Administrar inductor seguido inmediatamente del paralizante.</p>
219
  <p class="text-xs text-gray-500 mt-1"><u>Inductores:</u></p>
220
- <ul class="list-disc ml-6 mt-1 space-y-1">
221
- ${rsiDrugs.induccion.map(drug => `<li class="drug-calculation"><strong>${drug.name}</strong> (${drug.presentation.value} ${drug.presentation.unit}): ${calculateDose(weight, drug.dose, drug.presentation)}</li>`).join('')}
222
- </ul>
223
- <p class="text-xs text-gray-500 mt-2"><u>Paralizantes:</u></p>
224
- <ul class="list-disc ml-6 mt-1 space-y-1">
225
- ${rsiDrugs.paralisis.map(drug => `<li class="drug-calculation"><strong>${drug.name}</strong> (${drug.presentation.value} ${drug.presentation.unit}): ${calculateDose(weight, drug.dose, drug.presentation)}</li>`).join('')}
226
- </ul>
227
  </div>
228
- <p><strong>5. Posicionamiento:</strong> Alineación de ejes oral, faríngeo y laríngeo (posición de olfateo).</p>
229
- <p><strong>6. Progresión del tubo:</strong> Laringoscopia, visualización de cuerdas vocales e inserción del tubo.</p>
230
- <p><strong>7. Post-intubación:</strong> Comprobación (capnografía, auscultación), fijación del tubo, conexión a ventilador e inicio de sedoanalgesia.</p>
231
- </div>
232
- `;
233
- contentSri.innerHTML = html;
234
  }
235
 
236
  function updatePumps() {
@@ -238,20 +215,15 @@
238
  const selectedDrugKey = drugSelector.value;
239
  const desiredDose = parseFloat(doseInput.value) || 0;
240
  const drug = perfusionDrugs[selectedDrugKey];
241
-
242
  if (weight <= 0 || !drug) {
243
  pumpResultsDisplay.innerHTML = `<div class="text-center py-10 text-gray-400"><i class="fas fa-notes-medical text-4xl mb-3"></i><p>Introduzca un peso y dosis válidos.</p></div>`;
244
  return;
245
  }
246
-
247
  const totalDrugMcg = drug.totalDrugMg * 1000;
248
  const concentrationMcgMl = totalDrugMcg / drug.totalVolumeMl;
249
- const doseMcgMin = desiredDose * weight;
250
- const doseMcgHour = doseMcgMin * 60;
251
- const infusionRateMlH = doseMcgHour / concentrationMcgMl;
252
-
253
- let html = `
254
- <h3 class="text-base font-bold mb-3 text-teal-700"><i class="fas fa-prescription-bottle-alt mr-2"></i>Cálculo para ${drug.name}</h3>
255
  <div class="space-y-3 text-sm">
256
  <div>
257
  <p class="font-semibold text-gray-600">1. Preparación:</p>
@@ -259,16 +231,14 @@
259
  </div>
260
  <div>
261
  <p class="font-semibold text-gray-600">2. Concentración:</p>
262
- <p class="pl-4">La concentración de la mezcla es <strong>${concentrationMcgMl.toFixed(2)} mcg/ml</strong>.</p>
263
  </div>
264
- <div class="mt-4 p-4 bg-teal-50 rounded-lg border border-teal-200">
265
  <p class="font-semibold text-gray-800 text-base">3. Velocidad de Perfusión:</p>
266
  <p class="text-center text-2xl font-bold text-fuchsia-700 my-2">${infusionRateMlH.toFixed(1)} ml/h</p>
267
- <p class="text-xs text-center text-gray-500">Para una dosis de ${desiredDose} ${drug.doseUnit} en un paciente de ${weight} kg.</p>
268
  </div>
269
- </div>
270
- `;
271
- pumpResultsDisplay.innerHTML = html;
272
  doseUnitSpan.textContent = drug.doseUnit;
273
  }
274
 
@@ -284,7 +254,6 @@
284
  contentBombas.classList.remove('hidden');
285
  contentSri.classList.add('hidden');
286
  }
287
- updateAllCalculations();
288
  }
289
 
290
  function updateAllCalculations() {
@@ -292,21 +261,17 @@
292
  updatePumps();
293
  }
294
 
295
- function onDrugSelectionChange() {
296
- const drug = perfusionDrugs[drugSelector.value];
297
- doseInput.value = drug.defaultDose;
298
- updatePumps();
299
- }
300
-
301
- // --- EVENT LISTENERS ---
302
  tabSri.addEventListener('click', () => handleTabClick('sri'));
303
  tabBombas.addEventListener('click', () => handleTabClick('bombas'));
304
  patientWeightInput.addEventListener('input', updateAllCalculations);
305
- drugSelector.addEventListener('change', onDrugSelectionChange);
 
 
 
306
  doseInput.addEventListener('input', updatePumps);
307
 
308
- // --- INICIALIZACIÓN ---
309
  handleTabClick('sri');
 
310
  </script>
311
  </body>
312
  </html>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Calculadora de Dosis - Asistente Médico</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
9
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 
12
  background-color: #f8fafc;
13
  font-family: "Montserrat", sans-serif;
14
  }
 
15
  .tab-btn {
16
+ transition: all 0.2s ease-in-out;
17
+ border-bottom-width: 2px;
18
  }
19
  .tab-btn.active {
20
+ color: #c026d3; /* fuchsia-700 */
21
+ border-color: #c026d3; /* fuchsia-700 */
 
22
  }
23
  .input-field {
24
  width: 100%;
 
31
  }
32
  .input-field:focus {
33
  outline: none;
34
+ border-color: #a21caf; /* fuchsia-800 */
35
+ box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.25);
36
  }
37
  .result-card {
38
  background-color: white;
 
45
  }
46
  .drug-calculation span {
47
  font-weight: 600;
48
+ color: #a21caf; /* fuchsia-800 */
49
  }
50
  </style>
51
  </head>
52
  <body class="min-h-screen bg-gray-50 p-4 sm:p-6">
53
+ <div class="mx-auto max-w-2xl p-6 my-8 bg-white rounded-xl shadow-md">
54
 
55
  <div class="text-center mb-4">
56
+ <h1 class="text-2xl font-bold text-fuchsia-800 flex items-center justify-center">
57
+ <i class="fas fa-syringe mr-3 text-fuchsia-600"></i>Calculadora de Dosis
58
  </h1>
59
+ <p class="text-gray-600 mt-1 text-sm">Secuencia de Intubación y Bombas de Perfusión</p>
 
 
60
  </div>
61
 
62
  <div class="flex justify-end mb-4">
 
70
  <strong>Atención:</strong> Esta es una herramienta de ayuda y no reemplaza el juicio clínico. Verifique siempre los cálculos.
71
  </div>
72
 
73
+ <div class="border-b border-gray-200 mb-6">
74
+ <nav class="-mb-px flex space-x-6" aria-label="Tabs">
75
+ <button id="tab-sri" class="tab-btn active shrink-0 pb-4 px-1 text-sm font-medium text-gray-500 hover:text-fuchsia-700 hover:border-fuchsia-300">
76
+ <i class="fas fa-lungs mr-2"></i>Intubación
77
+ </button>
78
+ <button id="tab-bombas" class="tab-btn shrink-0 pb-4 px-1 text-sm font-medium text-gray-500 hover:text-fuchsia-700 hover:border-fuchsia-300">
79
+ <i class="fas fa-syringe mr-2"></i>Bombas
80
+ </button>
81
+ </nav>
82
  </div>
83
 
84
+ <div class="bg-fuchsia-50 p-4 rounded-lg border border-fuchsia-100 shadow-inner space-y-4 mb-6">
85
  <div>
86
  <label for="patientWeight" class="block text-sm font-medium text-gray-700 mb-2">
87
  <i class="fas fa-weight-scale mr-2"></i>Peso del paciente (kg)
 
113
  </div>
114
  </div>
115
  </main>
 
116
  </div>
117
 
118
  <script type="module">
119
+ // --- DATOS MÉDICOS ---
120
  const rsiDrugs = {
121
  premedicacion: [
122
  { name: 'Fentanilo', dose: '1-3 mcg/kg', presentation: { value: 50, unit: 'mcg/ml' } },
 
161
  }
162
  };
163
 
164
+ // --- LÓGICA Y DOM ---
165
  const patientWeightInput = document.getElementById('patientWeight');
166
  const tabSri = document.getElementById('tab-sri');
167
  const tabBombas = document.getElementById('tab-bombas');
 
172
  const doseUnitSpan = document.getElementById('doseUnit');
173
  const pumpResultsDisplay = document.getElementById('pump-results');
174
 
 
 
175
  function calculateDose(weight, doseString, presentation) {
176
  const doseValues = doseString.match(/[\d.]+/g).map(Number);
177
  const unit = doseString.includes('mcg') ? 'mcg' : 'mg';
178
+ let doseRange = doseValues.length === 1 ? [weight * doseValues[0]] : [weight * doseValues[0], weight * doseValues[1]];
 
 
 
 
 
 
 
 
179
  let doseMg = doseRange.map(d => (unit === 'mcg' ? d / 1000 : d));
180
  let volumeMl = doseMg.map(d => d / presentation.value * (presentation.unit.includes('mcg') ? 1000 : 1));
 
181
  const format = (arr) => arr.length === 1 ? arr[0].toFixed(1) : `${arr[0].toFixed(1)} - ${arr[1].toFixed(1)}`;
 
182
  return `Dosis: <span>${format(doseRange)} ${unit}</span> / Total: <span>${format(volumeMl)} ml</span>`;
183
  }
184
 
 
188
  contentSri.innerHTML = `<div class="text-center py-10 text-gray-400"><i class="fas fa-notes-medical text-4xl mb-3"></i><p>Introduzca un peso válido.</p></div>`;
189
  return;
190
  }
191
+ contentSri.innerHTML = `
192
+ <h2 class="text-lg font-bold text-fuchsia-800 mb-4"><i class="fas fa-list-ol mr-2"></i>Las 7 P's de la Intubación</h2>
 
193
  <div class="space-y-4 text-sm">
194
+ <p><strong>1. Preparación:</strong> Monitorización, material y fármacos listos.</p>
195
+ <p><strong>2. Preoxigenación:</strong> FiO₂ 100% durante 3-5 minutos.</p>
196
  <div>
197
  <p><strong>3. Premedicación:</strong> (Atenuar respuesta simpática)</p>
198
+ <ul class="list-disc ml-6 mt-1 space-y-1">${rsiDrugs.premedicacion.map(d => `<li class="drug-calculation"><strong>${d.name}</strong> (${d.presentation.value} ${d.presentation.unit}): ${calculateDose(weight, d.dose, d.presentation)}</li>`).join('')}</ul>
 
 
199
  </div>
200
  <div>
201
+ <p><strong>4. Parálisis con Inducción:</strong> Administrar inductor seguido del paralizante.</p>
202
  <p class="text-xs text-gray-500 mt-1"><u>Inductores:</u></p>
203
+ <ul class="list-disc ml-6 mt-1 space-y-1">${rsiDrugs.induccion.map(d => `<li class="drug-calculation"><strong>${d.name}</strong> (${d.presentation.value} ${d.presentation.unit}): ${calculateDose(weight, d.dose, d.presentation)}</li>`).join('')}</ul>
204
+ <p class="text-xs text-gray-500 mt-2"><u>Paralizantes:</u></p>
205
+ <ul class="list-disc ml-6 mt-1 space-y-1">${rsiDrugs.paralisis.map(d => `<li class="drug-calculation"><strong>${d.name}</strong> (${d.presentation.value} ${d.presentation.unit}): ${calculateDose(weight, d.dose, d.presentation)}</li>`).join('')}</ul>
 
 
 
 
206
  </div>
207
+ <p><strong>5. Posicionamiento:</strong> Alineación de ejes (posición de olfateo).</p>
208
+ <p><strong>6. Progresión del tubo:</strong> Laringoscopia e inserción.</p>
209
+ <p><strong>7. Post-intubación:</strong> Comprobación (capnografía), fijación y sedoanalgesia.</p>
210
+ </div>`;
 
 
211
  }
212
 
213
  function updatePumps() {
 
215
  const selectedDrugKey = drugSelector.value;
216
  const desiredDose = parseFloat(doseInput.value) || 0;
217
  const drug = perfusionDrugs[selectedDrugKey];
 
218
  if (weight <= 0 || !drug) {
219
  pumpResultsDisplay.innerHTML = `<div class="text-center py-10 text-gray-400"><i class="fas fa-notes-medical text-4xl mb-3"></i><p>Introduzca un peso y dosis válidos.</p></div>`;
220
  return;
221
  }
 
222
  const totalDrugMcg = drug.totalDrugMg * 1000;
223
  const concentrationMcgMl = totalDrugMcg / drug.totalVolumeMl;
224
+ const infusionRateMlH = (desiredDose * weight * 60) / concentrationMcgMl;
225
+ pumpResultsDisplay.innerHTML = `
226
+ <h3 class="text-base font-bold mb-3 text-fuchsia-800"><i class="fas fa-prescription-bottle-alt mr-2"></i>Cálculo para ${drug.name}</h3>
 
 
 
227
  <div class="space-y-3 text-sm">
228
  <div>
229
  <p class="font-semibold text-gray-600">1. Preparación:</p>
 
231
  </div>
232
  <div>
233
  <p class="font-semibold text-gray-600">2. Concentración:</p>
234
+ <p class="pl-4">La concentración final es <strong>${concentrationMcgMl.toFixed(2)} mcg/ml</strong>.</p>
235
  </div>
236
+ <div class="mt-4 p-4 bg-fuchsia-50 rounded-lg border border-fuchsia-200">
237
  <p class="font-semibold text-gray-800 text-base">3. Velocidad de Perfusión:</p>
238
  <p class="text-center text-2xl font-bold text-fuchsia-700 my-2">${infusionRateMlH.toFixed(1)} ml/h</p>
239
+ <p class="text-xs text-center text-gray-500">Para ${desiredDose} ${drug.doseUnit} en un paciente de ${weight} kg.</p>
240
  </div>
241
+ </div>`;
 
 
242
  doseUnitSpan.textContent = drug.doseUnit;
243
  }
244
 
 
254
  contentBombas.classList.remove('hidden');
255
  contentSri.classList.add('hidden');
256
  }
 
257
  }
258
 
259
  function updateAllCalculations() {
 
261
  updatePumps();
262
  }
263
 
 
 
 
 
 
 
 
264
  tabSri.addEventListener('click', () => handleTabClick('sri'));
265
  tabBombas.addEventListener('click', () => handleTabClick('bombas'));
266
  patientWeightInput.addEventListener('input', updateAllCalculations);
267
+ drugSelector.addEventListener('change', () => {
268
+ doseInput.value = perfusionDrugs[drugSelector.value].defaultDose;
269
+ updatePumps();
270
+ });
271
  doseInput.addEventListener('input', updatePumps);
272
 
 
273
  handleTabClick('sri');
274
+ updateAllCalculations();
275
  </script>
276
  </body>
277
  </html>