| <!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> |
|
|
