|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Guías PROA - Hospital de Alcañiz</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); |
|
|
} |
|
|
|
|
|
.form-checkbox { |
|
|
height: 1.25rem; |
|
|
width: 1.25rem; |
|
|
border-radius: 0.25rem; |
|
|
border-color: #d1d5db; |
|
|
color: #db2777; |
|
|
transition: background-color 0.2s, border-color 0.2s; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
.form-checkbox:focus { |
|
|
outline: none; |
|
|
border-color: #f9a8d4; |
|
|
box-shadow: 0 0 0 3px rgba(249, 168, 212, 0.4); |
|
|
} |
|
|
.form-checkbox:checked { |
|
|
border-color: transparent; |
|
|
background-color: currentColor; |
|
|
} |
|
|
|
|
|
|
|
|
#guide-content-display { |
|
|
background-color: white; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1.5rem; |
|
|
margin-top: 1rem; |
|
|
min-height: 400px; |
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); |
|
|
overflow-y: auto; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
#guide-content-display .text-base { font-size: 0.875rem; line-height: 1.25rem; } |
|
|
#guide-content-display .text-sm { font-size: 0.75rem; line-height: 1rem; } |
|
|
#guide-content-display .text-xs { font-size: 0.65rem; line-height: 0.9rem; } |
|
|
|
|
|
.hidden { display: none; } |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
<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-blue-800 flex items-center justify-center"> |
|
|
<i class="fas fa-book-medical mr-3 text-teal-600"></i>Guías Clínicas PROA |
|
|
</h1> |
|
|
<p class="text-gray-600 mt-2 text-sm leading-relaxed"> Programa de Uso de Antibióticos<br> |
|
|
Hospital de Alcañiz | Aragón |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-teal-50 p-6 rounded-lg mb-6 border border-teal-100 shadow-inner space-y-4"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h2 class="text-base font-semibold text-teal-700 flex items-center"> |
|
|
<i class="fas fa-filter mr-2"></i>Seleccionar Guía |
|
|
</h2> |
|
|
<label class="flex items-center cursor-pointer text-sm whitespace-nowrap"> |
|
|
<input type="checkbox" id="togglePediatric" class="form-checkbox mr-2"> |
|
|
<span class="font-medium text-gray-700">Guías Pediátricas</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="guideSelector" class="block text-xs font-medium text-gray-600 mb-1 sr-only">Guía PROA:</label> |
|
|
<select id="guideSelector" class="custom-select block w-full text-sm"> |
|
|
<option value="">Cargando guías...</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div id="diagnosis-selector-container" class="hidden pt-4 border-t border-teal-200"> |
|
|
<label for="diagnosisSelector" class="block text-xs font-medium text-gray-600 mb-1">Diagnóstico Específico:</label> |
|
|
<select id="diagnosisSelector" class="custom-select block w-full text-sm"> |
|
|
<option value="">-- Seleccione Diagnóstico --</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="guide-content-display"> |
|
|
<div class="text-center py-16 text-gray-400"> |
|
|
<i class="fas fa-file-alt text-5xl mb-4"></i> |
|
|
<p>Selecciona una guía del desplegable.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-8 pt-6 border-t border-gray-200"> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
Desarrollado por el Dr. Antonio J. Arnal Meinhardt<br> |
|
|
<span class="text-xs">Médico de Urgencias | Atención Primaria</span> |
|
|
</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Guías PROA basadas en documentación del Hospital de Alcañiz.</p> |
|
|
</div> |
|
|
|
|
|
<script type="module" src="./js/proa.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
