Spaces:

aarnal80
/

GDPSalgoritmo

Running

App Files Files Community

aarnal80 commited on May 4

Commit

a2ec728

verified ·

1 Parent(s): 1825e9b

Update index.html

Browse files

Files changed (1) hide show

index.html +182 -18

index.html CHANGED Viewed

@@ -1,19 +1,183 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Algoritmo DM2 – Guía Clínica</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"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet"
+  />
+  <style>
+    body {
+      background-color: #f8fafc;
+      font-family: "Montserrat", sans-serif;
+    }
+    .custom-select {
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+      background-position: right 0.5rem center;
+      background-repeat: no-repeat;
+      background-size: 1.5em 1.5em;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      padding-right: 2.5rem;
+      width: 100%;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      padding-left: 0.75rem;
+      border-radius: 0.375rem;
+      border: 1px solid #d1d5db;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      transition: border-color 0.2s, box-shadow 0.2s;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+    .custom-select:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+    }
+    #algo-display {
+      background-color: white;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.5rem;
+      padding: 1.5rem;
+      margin-top: 1rem;
+      min-height: 300px;
+      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+      overflow-y: auto;
+      line-height: 1.6;
+    }
+  </style>
+</head>
+<body class="min-h-screen bg-gray-50">
+  <div class="mx-auto max-w-2xl p-6 my-8 bg-white rounded-xl shadow-md">
+    <div class="text-center mb-6">
+      <h1 class="text-xl font-bold text-pink-800 flex items-center justify-center">
+        <i class="fas fa-syringe mr-3 text-teal-600"></i>Algoritmo Tratamiento DM2
+      </h1>
+      <p class="text-gray-600 mt-2 text-sm leading-relaxed">
+        Basado en redGDPS 2023 | Hospital de Alcañiz
+      </p>
+    </div>
+    <div
+      class="bg-pink-50 p-6 rounded-lg mb-6 border border-pink-100 shadow-inner space-y-4"
+    >
+      <!-- Condición clínica predominante -->
+      <div>
+        <label
+          for="conditionSelector"
+          class="block text-xs font-medium text-gray-600 mb-1"
+          >Condición clínica predominante (prioritario)</label
+        >
+        <select id="conditionSelector" class="custom-select text-sm">
+          <option value="">-- Ninguna / No aplica --</option>
+          <option value="ECV">Enfermedad cardiovascular (ASCVD)</option>
+          <option value="IC">Insuficiencia cardiaca</option>
+          <option value="ERC">Enfermedad renal crónica</option>
+          <option value="RCV">Elevado riesgo cardiovascular (&ge;3 FRCV)</option>
+          <option value="OB">Obesidad (IMC &gt;35 kg/m<sup>2</sup>)</option>
+          <option value="FR">Fragilidad geriátrica</option>
+        </select>
+      </div>
+      <!-- Control glucémico -->
+      <div>
+        <label
+          for="controlSelector"
+          class="block text-xs font-medium text-gray-600 mb-1"
+          >Grado de control glucémico (HbA1c&nbsp;/ GME)</label
+        >
+        <select id="controlSelector" class="custom-select text-sm">
+          <option value="<7">HbA1c &lt;7 % (&lt;154 mg/dl)</option>
+          <option value="7-9">HbA1c 7–9 % (154‑212 mg/dl)</option>
+          <option value=">9">HbA1c &gt;9 % (&gt;212 mg/dl)</option>
+          <option value="SYM">Hiperglucemia sintomática</option>
+        </select>
+      </div>
+    </div>
+    <!-- Resultado -->
+    <div id="algo-display" class="text-gray-800">
+      <div class="text-center py-10 text-gray-400">
+        <i class="fas fa-notes-medical text-4xl mb-3"></i>
+        <p>Seleccione una situación clínica y el grado de control.</p>
+      </div>
+    </div>
+    <!-- Enlace al PDF completo -->
+    <div class="text-center mt-6">
+      <a
+        href="./Algoritmo_DM2_ESP_2023.pdf"
+        target="_blank"
+        class="text-sm text-pink-700 hover:underline"
+        ><i class="fas fa-file-pdf mr-1"></i>Ver algoritmo completo (PDF)</a
+      >
+    </div>
+  </div>
+  <script type="module">
+    // Mapas simplificados basados en redGDPS 2023
+    const conditionMap = {
+      "ECV":
+        "Añada <span class=\"font-semibold\">iSGLT2</span> y/o <span class=\"font-semibold\">arGLP‑1</span> con evidencia en reducción de eventos cardiovasculares, independientemente de HbA1c. Considere mantener metformina si se tolera.",
+      "IC":
+        "Priorice <span class=\"font-semibold\">iSGLT2</span> (dapagliflozina, empagliflozina) con o sin metformina. Evite tiazolidinedionas si IC avanzada. Valore añadir arGLP‑1 si HbA1c fuera de objetivo.",
+      "ERC":
+        "Indique <span class=\"font-semibold\">iSGLT2</span> (FG ≥20 ml/min) y/o <span class=\"font-semibold\">arGLP‑1</span> (FG ≥15 ml/min). Ajuste/retire metformina si FG &lt;45 ml/min.",
+      "RCV":
+        "Si riesgo cardiovascular elevado, utilice <span class=\"font-semibold\">iSGLT2</span> y/o <span class=\"font-semibold\">arGLP‑1</span> con metformina como base.",
+      "OB":
+        "Para IMC &gt;35 kg/m<sup>2</sup> prefiera <span class=\"font-semibold\">arGLP‑1</span>; considere cirugía bariátrica. Valore iSGLT2 si esteatosis hepática.",
+      "FR":
+        "Desintensifique o simplifique. Evite hipoglucemias. Prefiera <span class=\"font-semibold\">iDPP‑4</span>; considere retirar SU y repaglinida."
+    };
+    const controlMap = {
+      "<7":
+        "Refuerce medidas no farmacológicas (alimentación, ejercicio, sueño) y mantenga <span class=\"font-semibold\">metformina</span> si se tolera. Reevaluar en 3–6 meses.",
+      "7-9":
+        "Inicie <span class=\"font-semibold\">terapia dual</span>: Metformina + otro ADNI según perfil (iSGLT2, arGLP‑1, iDPP‑4, pioglitazona o SU).",
+      ">9":
+        "Considere <span class=\"font-semibold\">terapia triple</span> o <span class=\"font-semibold\">insulinización basal</span> si HbA1c &gt;9 % pese a doble terapia.",
+      "SYM":
+        "Ante síntomas cardinales (poliuria, polidipsia, pérdida de peso), inicie <span class=\"font-semibold\">insulina</span> ± metformina y añada arGLP‑1 o iSGLT2 según tolerancia."
+    };
+    const conditionSelector = document.getElementById("conditionSelector");
+    const controlSelector = document.getElementById("controlSelector");
+    const display = document.getElementById("algo-display");
+    function updateDisplay() {
+      const cond = conditionSelector.value;
+      const ctrl = controlSelector.value;
+      let html = "";
+      if (cond && conditionMap[cond]) {
+        html += `<h2 class='text-base font-bold mb-2 text-pink-700'><i class='fas fa-stethoscope mr-2'></i>Manejo según condición clínica</h2><p class='mb-4'>${conditionMap[cond]}</p>`;
+      }
+      if (ctrl && controlMap[ctrl]) {
+        html += `<h2 class='text-base font-bold mb-2 text-pink-700'><i class='fas fa-vials mr-2'></i>Manejo según HbA1c / GME</h2><p>${controlMap[ctrl]}</p>`;
+      }
+      if (!html) {
+        html =
+          "<div class='text-center py-10 text-gray-400'><i class='fas fa-notes-medical text-4xl mb-3'></i><p>Seleccione una situación clínica y el grado de control.</p></div>";
+      }
+      display.innerHTML = html;
+    }
+    conditionSelector.addEventListener("change", updateDisplay);
+    controlSelector.addEventListener("change", updateDisplay);
+  </script>
+</body>
 </html>