Hugging Face's logo

Spaces:
aarnal80
/
AppConsulta360
Running

App Files Community
aarnal80 commited on
Commit
f5603d6
·
verified ·
1 Parent(s): f4e87be

Update proa/proa.html

Browse files
Files changed (1) hide show
  1. proa/proa.html +71 -15
proa/proa.html CHANGED
@@ -3,26 +3,82 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>PROA - Asistente Médico Modular</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
  <style>
10
  body { background-color: #f8fafc; font-family: 'Montserrat', sans-serif; }
11
- /* Estilos para la lista de guías generada por JS */
12
- .dynamic-guide-item { display: block; padding: 0.65rem 1rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; margin-bottom: 0.5rem; background-color: white; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; font-weight: 500; color: #374151; }
13
- .dynamic-guide-item:hover { background-color: #f0f9ff; border-color: #7dd3fc; } /* Azul claro hover */
14
- .dynamic-guide-item.active { background-color: #e0f2fe; border-color: #38bdf8; font-weight: 600; color: #075985; } /* Azul más oscuro activo */
15
- .pediatric-tag-inline { font-size: 0.75rem; font-weight: 500; color: #db2777; background-color: #fce7f3; padding: 0.125rem 0.5rem; border-radius: 9999px; margin-left: 0.5rem; display: inline-block; vertical-align: middle; }
16
- #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: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); overflow-y: auto; }
17
- #guide-index-container { max-height: 60vh; overflow-y: auto; padding-right: 0.5rem; } /* Scroll para la lista si es muy larga */
18
- /* Estilos para el área de contenido cargado (heredados de las guías, pero podemos añadir overrides) */
19
- #guide-content-display .treatment-card { margin-bottom: 1.5rem; } /* Más espacio entre cards */
20
- #guide-content-display h2 { margin-bottom: 1rem; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  </style>
22
  </head>
23
  <body class="bg-gray-100 min-h-screen">
24
 
25
- <div class="container mx-auto px-4 py-8 max-w-7xl"> <div class="flex justify-between items-center mb-6 border-b pb-4">
 
 
26
  <div class="flex items-center gap-3">
27
  <i class="fas fa-book-medical text-3xl text-teal-600"></i>
28
  <div>
@@ -41,11 +97,11 @@
41
  <div class="mb-4 pb-4 border-b">
42
  <label class="flex items-center cursor-pointer">
43
  <input type="checkbox" id="togglePediatric" class="form-checkbox h-5 w-5 text-pink-600 rounded focus:ring-pink-500 border-gray-300 mr-2">
44
- <span class="text-sm font-medium text-gray-700">Incluir Guías Pediátricas</span>
45
- </label>
46
  </div>
47
 
48
- <h3 class="text-lg font-semibold text-gray-700 mb-2">Índice de Guías</h3>
49
  <div id="guide-index-container">
50
  <p class="text-gray-500 text-sm">Cargando guías...</p>
51
  </div>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Guías PROA - 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
  <style>
10
  body { background-color: #f8fafc; font-family: 'Montserrat', sans-serif; }
11
+ /* Estilos para botones/tarjetas de guía */
12
+ .guide-item-button {
13
+ display: flex;
14
+ align-items: center;
15
+ width: 100%;
16
+ text-align: left;
17
+ padding: 0.6rem 0.8rem; /* Más compacto */
18
+ margin-bottom: 0.35rem;
19
+ border-radius: 0.375rem; /* rounded-md */
20
+ background-color: white;
21
+ border: 1px solid #e5e7eb; /* slate-200 */
22
+ color: #334155; /* slate-700 */
23
+ font-weight: 500;
24
+ transition: all 0.2s ease-in-out;
25
+ cursor: pointer;
26
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
27
+ }
28
+ .guide-item-button:hover {
29
+ background-color: #f0f9ff; /* sky-50 */
30
+ border-color: #bae6fd; /* sky-200 */
31
+ transform: translateY(-1px);
32
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
33
+ }
34
+ .guide-item-button.active {
35
+ background-color: #0ea5e9; /* sky-500 */
36
+ color: white;
37
+ border-color: #0284c7; /* sky-600 */
38
+ font-weight: 600;
39
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
40
+ }
41
+ .guide-item-button.active .guide-icon { color: white; } /* Icono blanco si activo */
42
+ .guide-icon {
43
+ margin-right: 0.6rem;
44
+ font-size: 1rem; /* Tamaño icono */
45
+ width: 20px; /* Ancho fijo */
46
+ text-align: center;
47
+ color: #0ea5e9; /* sky-500 */
48
+ transition: color 0.2s;
49
+ }
50
+ /* Etiqueta Pediátrica (si se muestra junto al nombre) */
51
+ .pediatric-tag-inline { font-size: 0.7rem; font-weight: 600; color: #db2777; background-color: #fce7f3; padding: 0.1rem 0.4rem; border-radius: 9999px; margin-left: 0.4rem; display: inline-block; vertical-align: middle; border: 1px solid #f9a8d4; }
52
+ /* Cabecera de Categoría (visual) */
53
+ .category-header {
54
+ font-size: 0.8rem;
55
+ font-weight: 700;
56
+ color: #475569; /* slate-600 */
57
+ text-transform: uppercase;
58
+ padding: 0.75rem 0 0.25rem 0;
59
+ margin-top: 0.75rem;
60
+ border-bottom: 1px solid #e2e8f0; /* slate-200 */
61
+ position: sticky; /* Para que se quede fija al hacer scroll */
62
+ top: 0;
63
+ background-color: #f8fafc; /* Mismo fondo que el body */
64
+ z-index: 10;
65
+ }
66
+ .category-header:first-child { margin-top: 0; } /* Sin margen superior para la primera */
67
+ /* Área de contenido */
68
+ #guide-content-display { background-color: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; margin-top: 1rem; min-height: 400px; max-height: 75vh; /* Altura máxima con scroll */ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); overflow-y: auto; }
69
+ #guide-content-display .treatment-card { margin-bottom: 1.5rem; }
70
+ #guide-content-display h2 { margin-bottom: 1rem; font-size: 1.5rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem;}
71
+ #guide-content-display h3 { font-size: 1.1rem; margin-top: 1.25rem; margin-bottom: 0.75rem; }
72
+ .hidden { display: none; }
73
+ /* Contenedor de la lista con scroll */
74
+ #guide-index-container { max-height: 70vh; overflow-y: auto; padding-right: 0.5rem; /* Espacio para scrollbar */ }
75
  </style>
76
  </head>
77
  <body class="bg-gray-100 min-h-screen">
78
 
79
+ <div class="container mx-auto px-4 py-6 max-w-6xl">
80
+
81
+ <div class="flex justify-between items-center mb-5 border-b pb-3">
82
  <div class="flex items-center gap-3">
83
  <i class="fas fa-book-medical text-3xl text-teal-600"></i>
84
  <div>
 
97
  <div class="mb-4 pb-4 border-b">
98
  <label class="flex items-center cursor-pointer">
99
  <input type="checkbox" id="togglePediatric" class="form-checkbox h-5 w-5 text-pink-600 rounded focus:ring-pink-500 border-gray-300 mr-2">
100
+ <span class="text-sm font-medium text-gray-700">Mostrar Solo Pediátricas</span>
101
+ </label>
102
  </div>
103
 
104
+ <h3 class="text-base font-semibold text-gray-700 mb-2">Guías Disponibles:</h3>
105
  <div id="guide-index-container">
106
  <p class="text-gray-500 text-sm">Cargando guías...</p>
107
  </div>