Hugging Face's logo

Spaces:
aarnal80
/
Proa
Running

App Files Community
aarnal80 commited on
Commit
4ed2d74
·
verified ·
1 Parent(s): ec1f80b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +132 -18
index.html CHANGED
@@ -1,19 +1,133 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
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
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ /* Estilos base */
12
+ body { background-color: #f8fafc; font-family: 'Montserrat', sans-serif; }
13
+
14
+ /* Estilo Selectores */
15
+ .custom-select {
16
+ 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");
17
+ background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em;
18
+ -webkit-appearance: none; -moz-appearance: none; appearance: none;
19
+ padding-right: 2.5rem;
20
+ width: 100%;
21
+ padding-top: 0.5rem;
22
+ padding-bottom: 0.5rem;
23
+ padding-left: 0.75rem;
24
+ border-radius: 0.375rem;
25
+ border: 1px solid #d1d5db;
26
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
27
+ transition: border-color 0.2s, box-shadow 0.2s;
28
+ font-size: 0.875rem;
29
+ line-height: 1.25rem;
30
+ }
31
+ .custom-select:focus {
32
+ outline: none;
33
+ border-color: #3b82f6;
34
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
35
+ }
36
+ /* Estilo Checkbox */
37
+ .form-checkbox {
38
+ height: 1.25rem;
39
+ width: 1.25rem;
40
+ border-radius: 0.25rem;
41
+ border-color: #d1d5db;
42
+ color: #db2777;
43
+ transition: background-color 0.2s, border-color 0.2s;
44
+ flex-shrink: 0;
45
+ }
46
+ .form-checkbox:focus {
47
+ outline: none;
48
+ border-color: #f9a8d4;
49
+ box-shadow: 0 0 0 3px rgba(249, 168, 212, 0.4);
50
+ }
51
+ .form-checkbox:checked {
52
+ border-color: transparent;
53
+ background-color: currentColor;
54
+ }
55
+
56
+ /* Area de contenido */
57
+ #guide-content-display {
58
+ background-color: white;
59
+ border: 1px solid #e5e7eb;
60
+ border-radius: 0.5rem;
61
+ padding: 1.5rem;
62
+ margin-top: 1rem;
63
+ min-height: 400px;
64
+ box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
65
+ overflow-y: auto;
66
+ line-height: 1.6;
67
+ }
68
+ /* Ajustes finos para tamaños de fuente dentro del contenido cargado */
69
+ #guide-content-display .text-base { font-size: 0.875rem; line-height: 1.25rem; }
70
+ #guide-content-display .text-sm { font-size: 0.75rem; line-height: 1rem; }
71
+ #guide-content-display .text-xs { font-size: 0.65rem; line-height: 0.9rem; }
72
+
73
+ .hidden { display: none; }
74
+ </style>
75
+ </head>
76
+ <body class="bg-gray-50 min-h-screen">
77
+
78
+ <div class="mx-auto max-w-2xl p-6 my-8 bg-white rounded-xl shadow-md">
79
+
80
+ <div class="text-center mb-6"> <h1 class="text-xl font-bold text-blue-800 flex items-center justify-center">
81
+ <i class="fas fa-book-medical mr-3 text-teal-600"></i>Guías Clínicas PROA
82
+ </h1>
83
+ <p class="text-gray-600 mt-1 text-sm">Consulta de Guías Clínicas Hospital de Alcañiz</p>
84
+ </div>
85
+
86
+ <div class="bg-teal-50 p-6 rounded-lg mb-6 border border-teal-100 shadow-inner space-y-4">
87
+
88
+ <div class="flex justify-between items-center mb-3">
89
+ <h2 class="text-base font-semibold text-teal-700 flex items-center">
90
+ <i class="fas fa-filter mr-2"></i>Seleccionar Guía
91
+ </h2>
92
+ <label class="flex items-center cursor-pointer text-sm whitespace-nowrap">
93
+ <input type="checkbox" id="togglePediatric" class="form-checkbox mr-2">
94
+ <span class="font-medium text-gray-700">Guías Pediátricas</span>
95
+ </label>
96
+ </div>
97
+
98
+ <div>
99
+ <label for="guideSelector" class="block text-xs font-medium text-gray-600 mb-1 sr-only">Guía PROA:</label>
100
+ <select id="guideSelector" class="custom-select block w-full text-sm">
101
+ <option value="">Cargando guías...</option>
102
+ </select>
103
+ </div>
104
+
105
+ <div id="diagnosis-selector-container" class="hidden pt-4 border-t border-teal-200">
106
+ <label for="diagnosisSelector" class="block text-xs font-medium text-gray-600 mb-1">Diagnóstico Específico:</label>
107
+ <select id="diagnosisSelector" class="custom-select block w-full text-sm">
108
+ <option value="">-- Seleccione Diagnóstico --</option>
109
+ </select>
110
+ </div>
111
+
112
+ </div>
113
+
114
+ <div id="guide-content-display">
115
+ <div class="text-center py-16 text-gray-400">
116
+ <i class="fas fa-file-alt text-5xl mb-4"></i>
117
+ <p>Selecciona una guía del desplegable.</p>
118
+ </div>
119
+ </div>
120
+
121
+ </div>
122
+
123
+ <div class="text-center mt-8 pt-6 border-t border-gray-200">
124
+ <p class="text-gray-600 text-sm">
125
+ Desarrollado por el Dr. Antonio J. Arnal Meinhardt<br>
126
+ <span class="text-xs">Médico de Urgencias | Atención Primaria</span>
127
+ </p>
128
+ <p class="text-xs text-gray-500 mt-1">Guías PROA basadas en documentación del Hospital de Alcañiz.</p>
129
+ </div>
130
+
131
+ <script type="module" src="./js/proa.js"></script>
132
+ </body>
133
  </html>