Hugging Face's logo

Spaces:
luigi12345
/
Hospital_AI_Proposal
Running

App Files Community
Sami commited on
Commit
872dce5
·
1 Parent(s): 477c9c3

Revamp index.html with enhanced styling and new features. Added a personal brand section, improved card designs, and implemented smooth scrolling for navigation. Updated footer with project links and contact information. Enhanced loading indicators and mobile responsiveness for better user experience.

Browse files
Files changed (7) hide show
  1. README.md +37 -28
  2. automedical-demo-1/Screenshot 2025-01-17 at 14.08.24.png +0 -0
  3. automedical-demo-1/automedicalai copy.html +1245 -0
  4. automedical-demo-1/automedicalai.html +617 -0
  5. docs/REFERENCE_example-propuesta-12-octubre-report copy.pdf +0 -0
  6. docs/fernandoli-cv.html +0 -0
  7. index.html +232 -9
README.md CHANGED
@@ -1,34 +1,43 @@
1
- # Hospital AI Proposals
2
-
3
- A bilingual (Spanish/English) web platform for AI implementation proposals in healthcare systems.
4
-
5
- ## Project Structure
6
-
7
- ```
8
- .
9
- ├── index.html # Main landing page
10
- ├── proposals/ # Proposal documents
11
- │ ├── 12-octubre-proposal.html
12
- │ ├── spanish-hospital-proposal.html
13
- │ ├── nhs-detailed-proposal.html
14
- │ └── nhs-formal-proposal.html
15
- ├── docs/ # Documentation
16
- │ ├── spanish-hospital-context.txt
17
- │ ├── requirements-conversation.txt
18
- │ └── requirements-conversation.py
19
- └── assets/ # Static assets (images, etc.)
20
- ```
21
 
22
  ## Features
23
 
24
- - Bilingual support (Spanish/English)
 
 
 
25
  - Responsive design with Tailwind CSS
26
- - Interactive language switching
27
- - Search functionality
28
- - Modern UI with hover effects and animations
29
 
30
- ## Setup
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
- 1. Clone the repository
33
- 2. Open index.html in a modern web browser
34
- 3. No build process required - uses CDN for dependencies
 
1
+ ---
2
+ title: AutoMedical AI Demo
3
+ emoji: 🏥
4
+ colorFrom: blue
5
+ colorTo: green
6
+ sdk: static
7
+ pinned: false
8
+ ---
9
+
10
+ # AutoMedical AI Demo
11
+
12
+ A static demo showcasing AI-powered medical analysis capabilities with an elegant UI.
 
 
 
 
 
 
 
 
13
 
14
  ## Features
15
 
16
+ - Medical image analysis and diagnosis assistance
17
+ - Confidence scoring visualization
18
+ - Interactive charts and data visualization
19
+ - Toast notifications for user feedback
20
  - Responsive design with Tailwind CSS
 
 
 
21
 
22
+ ## Usage
23
+
24
+ Simply open the `automedicalai.html` file in your browser to use the demo. No server setup required.
25
+
26
+ ## UI Components
27
+
28
+ - AI confidence indicators with gradient visualization
29
+ - Enhanced charts with hover overlays
30
+ - Toast notifications for success/error states
31
+ - Clean, medical-themed interface
32
+
33
+ ## Development
34
+
35
+ Built using:
36
+ - HTML/CSS/JavaScript
37
+ - Tailwind CSS for styling
38
+ - Chart.js for data visualization
39
+
40
+ ## License
41
+
42
+ MIT License
43
 
 
 
 
automedical-demo-1/Screenshot 2025-01-17 at 14.08.24.png ADDED
automedical-demo-1/automedicalai copy.html ADDED
@@ -0,0 +1,1245 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AutomedicalAI | Advanced Medical Reports</title>
7
+
8
+ <!-- Enhanced UI Libraries -->
9
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
10
+ <link href="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]/dist/typography.min.css" rel="stylesheet">
11
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet">
12
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
15
+
16
+ <style>
17
+ :root {
18
+ --primary-gradient: linear-gradient(135deg, #2563eb, #7c3aed);
19
+ --surface-gradient: linear-gradient(135deg, #1e293b, #0f172a);
20
+ --accent-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6);
21
+ --glass-bg: rgba(30, 41, 59, 0.7);
22
+ }
23
+
24
+ body {
25
+ background: linear-gradient(135deg, #0f172a, #1e293b);
26
+ background-attachment: fixed;
27
+ min-height: 100vh;
28
+ }
29
+
30
+ /* Modern Glass Morphism */
31
+ .glass-panel {
32
+ @apply backdrop-blur-xl bg-white/5 border border-white/10
33
+ shadow-2xl rounded-3xl transition-all duration-500;
34
+ }
35
+
36
+ .glass-panel:hover {
37
+ @apply border-white/20 shadow-blue-500/10;
38
+ backdrop-filter: blur(20px);
39
+ }
40
+
41
+ /* AI Visual Elements */
42
+ .ai-particles {
43
+ position: fixed;
44
+ inset: 0;
45
+ z-index: -1;
46
+ opacity: 0.4;
47
+ pointer-events: none;
48
+ background-image:
49
+ radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
50
+ radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
51
+ }
52
+
53
+ .neural-grid {
54
+ background-image:
55
+ linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
56
+ linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
57
+ background-size: 30px 30px;
58
+ position: fixed;
59
+ inset: 0;
60
+ z-index: -1;
61
+ opacity: 0.2;
62
+ pointer-events: none;
63
+ }
64
+
65
+ /* Enhanced Form Elements */
66
+ .ai-input {
67
+ @apply w-full px-6 py-4 bg-white/5 border border-white/10
68
+ rounded-2xl text-white placeholder-white/50
69
+ focus:ring-2 focus:ring-blue-500/50 focus:border-transparent
70
+ transition-all duration-300;
71
+ backdrop-filter: blur(10px);
72
+ }
73
+
74
+ .ai-input:hover {
75
+ @apply border-white/20 bg-white/10;
76
+ }
77
+
78
+ /* AI Action Buttons */
79
+ .ai-button {
80
+ @apply relative overflow-hidden px-8 py-4 rounded-2xl
81
+ text-white font-medium transition-all duration-500
82
+ flex items-center gap-3 group;
83
+ background: var(--primary-gradient);
84
+ }
85
+
86
+ .ai-button::before {
87
+ content: '';
88
+ @apply absolute inset-0 opacity-0 transition-opacity duration-500;
89
+ background: var(--accent-gradient);
90
+ }
91
+
92
+ .ai-button:hover::before {
93
+ @apply opacity-100;
94
+ }
95
+
96
+ /* AI Dashboard Cards */
97
+ .ai-card {
98
+ @apply relative p-6 rounded-3xl transition-all duration-500
99
+ hover:transform hover:scale-102 cursor-pointer;
100
+ background: var(--glass-bg);
101
+ backdrop-filter: blur(10px);
102
+ }
103
+
104
+ .ai-card::before {
105
+ content: '';
106
+ @apply absolute inset-0 rounded-3xl opacity-0 transition-opacity duration-500;
107
+ background: var(--accent-gradient);
108
+ z-index: -1;
109
+ }
110
+
111
+ .ai-card:hover::before {
112
+ @apply opacity-20;
113
+ }
114
+
115
+ /* AI Stats Display */
116
+ .ai-stat {
117
+ @apply flex flex-col items-center p-4 rounded-2xl bg-white/5
118
+ backdrop-blur-lg border border-white/10;
119
+ }
120
+
121
+ .ai-stat-value {
122
+ @apply text-3xl font-bold bg-clip-text text-transparent;
123
+ background: var(--primary-gradient);
124
+ }
125
+
126
+ /* AI Analysis Section */
127
+ .analysis-grid {
128
+ @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
129
+ }
130
+
131
+ .analysis-card {
132
+ @apply p-6 rounded-3xl transition-all duration-500;
133
+ background: var(--glass-bg);
134
+ }
135
+
136
+ /* AI Visualization Components */
137
+ .ai-chart {
138
+ @apply rounded-2xl overflow-hidden bg-white/5 p-4;
139
+ height: 200px;
140
+ }
141
+
142
+ /* AI Report Comparison */
143
+ .report-comparison {
144
+ @apply grid grid-cols-2 gap-4 p-4 rounded-2xl bg-white/5;
145
+ }
146
+
147
+ .comparison-item {
148
+ @apply p-4 rounded-xl bg-white/5 border border-white/10;
149
+ }
150
+
151
+ /* Cost Analysis Section */
152
+ .cost-analysis {
153
+ @apply grid grid-cols-1 md:grid-cols-3 gap-4 mb-8;
154
+ }
155
+
156
+ .cost-card {
157
+ @apply p-6 rounded-2xl bg-white/5 border border-white/10;
158
+ }
159
+
160
+ .cost-trend {
161
+ @apply flex items-center gap-2 text-sm;
162
+ }
163
+
164
+ .trend-up { @apply text-green-400; }
165
+ .trend-down { @apply text-red-400; }
166
+ </style>
167
+ </head>
168
+ <body class="min-h-screen bg-gradient-to-br from-gray-900 to-black text-white" data-language="es">
169
+ <!-- Navigation Bar -->
170
+ <nav class="sticky top-0 z-50 backdrop-blur-lg border-b border-white/10 px-6 py-4">
171
+ <div class="container mx-auto flex justify-between items-center">
172
+ <div class="flex items-center gap-2">
173
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
174
+ alt="Hospital Logo" class="h-8 w-auto">
175
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
176
+ AutomedicalAI
177
+ </h1>
178
+ </div>
179
+ <button onclick="toggleLanguage()"
180
+ class="px-4 py-2 rounded-full border border-blue-500 text-blue-400
181
+ hover:bg-blue-500 hover:text-white transition-all duration-300">
182
+ <span lang="es">EN</span>
183
+ <span lang="en">ES</span>
184
+ </button>
185
+ </div>
186
+ </nav>
187
+
188
+ <main class="container mx-auto px-4 py-8">
189
+ <!-- AI Stats Overview -->
190
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
191
+ <div class="ai-stat">
192
+ <span class="ai-stat-value">2,847</span>
193
+ <span class="text-sm text-white/70">Informes Generados</span>
194
+ </div>
195
+ <div class="ai-stat">
196
+ <span class="ai-stat-value">94%</span>
197
+ <span class="text-sm text-white/70">Precisión IA</span>
198
+ </div>
199
+ <div class="ai-stat">
200
+ <span class="ai-stat-value">-32%</span>
201
+ <span class="text-sm text-white/70">Reducción de Costes</span>
202
+ </div>
203
+ <div class="ai-stat">
204
+ <span class="ai-stat-value">+45%</span>
205
+ <span class="text-sm text-white/70">Eficiencia</span>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Enhanced Patient Form -->
210
+ <div class="glass-panel p-8 mb-12">
211
+ <h2 class="section-title">
212
+ <span lang="es">Información del Paciente</span>
213
+ <span lang="en">Patient Information</span>
214
+ </h2>
215
+ <form id="patientForm" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
216
+ <div class="space-y-2">
217
+ <label class="text-sm text-gray-300">
218
+ <span lang="es">Nombre del Paciente</span>
219
+ <span lang="en">Patient Name</span>
220
+ </label>
221
+ <input type="text" id="patientName" class="ai-input" required>
222
+ </div>
223
+
224
+ <div class="space-y-2">
225
+ <label class="text-sm text-gray-300">
226
+ <span lang="es">Edad</span>
227
+ <span lang="en">Age</span>
228
+ </label>
229
+ <input type="number" id="patientAge" class="ai-input" required>
230
+ </div>
231
+
232
+ <div class="space-y-2">
233
+ <label class="text-sm text-gray-300">
234
+ <span lang="es">Diagnóstico</span>
235
+ <span lang="en">Diagnosis</span>
236
+ </label>
237
+ <select id="diagnosis" class="ai-input" required>
238
+ <option value="" disabled selected>
239
+ <span lang="es">Seleccionar Diagnóstico</span>
240
+ <span lang="en">Select Diagnosis</span>
241
+ </option>
242
+ <option value="glaucoma">Glaucoma</option>
243
+ <option value="diabetic_retinopathy">
244
+ <span lang="es">Retinopatía Diabética</span>
245
+ <span lang="en">Diabetic Retinopathy</span>
246
+ </option>
247
+ <option value="amd">
248
+ <span lang="es">DMAE</span>
249
+ <span lang="en">AMD</span>
250
+ </option>
251
+ </select>
252
+ </div>
253
+
254
+ <div class="col-span-full">
255
+ <button type="submit" class="ai-button group">
256
+ <i class="fas fa-file-medical text-xl group-hover:scale-110 transition-transform"></i>
257
+ <span class="inline-block ml-2">
258
+ <span lang="es">Generar Informe</span>
259
+ <span lang="en">Generate Report</span>
260
+ </span>
261
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20
262
+ group-hover:opacity-100 opacity-0 transition-opacity"></div>
263
+ </button>
264
+ </div>
265
+ </form>
266
+ </div>
267
+
268
+ <!-- AI Analysis Grid -->
269
+ <div class="analysis-grid mb-12">
270
+ <div class="analysis-card">
271
+ <h3 class="text-xl font-semibold mb-4">Análisis Histórico</h3>
272
+ <div class="ai-chart">
273
+ <!-- Add Chart.js visualization here -->
274
+ </div>
275
+ </div>
276
+
277
+ <div class="analysis-card">
278
+ <h3 class="text-xl font-semibold mb-4">Comparativa de Costes</h3>
279
+ <div class="cost-analysis">
280
+ <div class="cost-card">
281
+ <h4 class="text-lg mb-2">Antes de IA</h4>
282
+ <p class="text-2xl font-bold">€245.00</p>
283
+ <div class="cost-trend">
284
+ <i class="fas fa-arrow-down text-red-400"></i>
285
+ <span>Por informe</span>
286
+ </div>
287
+ </div>
288
+ <div class="cost-card">
289
+ <h4 class="text-lg mb-2">Con IA</h4>
290
+ <p class="text-2xl font-bold">€82.00</p>
291
+ <div class="cost-trend">
292
+ <i class="fas fa-arrow-up text-green-400"></i>
293
+ <span>Ahorro 67%</span>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="analysis-card">
300
+ <h3 class="text-xl font-semibold mb-4">Eficiencia Temporal</h3>
301
+ <div class="ai-chart">
302
+ <!-- Add Chart.js visualization here -->
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Report Comparison Section -->
308
+ <div class="glass-panel p-8 mb-12">
309
+ <h3 class="text-2xl font-semibold mb-6">Comparativa de Informes</h3>
310
+ <div class="report-comparison">
311
+ <div class="comparison-item">
312
+ <h4 class="text-lg mb-2">Informe Anterior</h4>
313
+ <!-- Add comparison content -->
314
+ </div>
315
+ <div class="comparison-item">
316
+ <h4 class="text-lg mb-2">Informe Actual</h4>
317
+ <!-- Add comparison content -->
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Report Types Grid with enhanced styling -->
323
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
324
+ <button class="ai-card" onclick="showReport('glaucomaReport')">
325
+ <div class="flex flex-col items-center">
326
+ <i class="fas fa-eye text-blue-400"></i>
327
+ <span lang="es">Informe de Glaucoma</span>
328
+ <span lang="en">Glaucoma Report</span>
329
+ </div>
330
+ </button>
331
+
332
+ <button class="ai-card" onclick="showReport('diabeticRetinopathyReport')">
333
+ <div class="flex flex-col items-center">
334
+ <i class="fas fa-syringe text-green-400"></i>
335
+ <span lang="es">Retinopatía Diabética</span>
336
+ <span lang="en">Diabetic Retinopathy</span>
337
+ </div>
338
+ </button>
339
+
340
+ <button class="ai-card" onclick="showReport('amdReport')">
341
+ <div class="flex flex-col items-center">
342
+ <i class="fas fa-eye-slash text-yellow-400"></i>
343
+ <span lang="es">Informe de DMAE</span>
344
+ <span lang="en">AMD Report</span>
345
+ </div>
346
+ </button>
347
+
348
+ <button class="ai-card" onclick="showReport('treatmentPlan')">
349
+ <div class="flex flex-col items-center">
350
+ <i class="fas fa-notes-medical text-cyan-400"></i>
351
+ <span lang="es">Plan de Tratamiento</span>
352
+ <span lang="en">Treatment Plan</span>
353
+ </div>
354
+ </button>
355
+
356
+ <button class="ai-card" onclick="showReport('followUpReport')">
357
+ <div class="flex flex-col items-center">
358
+ <i class="fas fa-calendar-check text-red-400"></i>
359
+ <span lang="es">Informe de Seguimiento</span>
360
+ <span lang="en">Follow-up Report</span>
361
+ </div>
362
+ </button>
363
+
364
+ <button class="ai-card" onclick="showReport('generalSummaryReport')">
365
+ <div class="flex flex-col items-center">
366
+ <i class="fas fa-file-medical-alt text-purple-400"></i>
367
+ <span lang="es">Resumen General</span>
368
+ <span lang="en">General Summary</span>
369
+ </div>
370
+ </button>
371
+ </div>
372
+ </main>
373
+
374
+ <!-- Enhanced Report Viewer -->
375
+ <div class="report-viewer fixed inset-0 hidden" id="reportViewer">
376
+ <div class="absolute inset-0 flex items-center justify-center p-8">
377
+ <div class="report-content w-full max-w-4xl p-8">
378
+ <div id="reportContent" class="prose prose-invert"></div>
379
+ </div>
380
+ </div>
381
+ <button class="absolute top-4 right-4 text-4xl text-white hover:text-gray-300 transition-colors"
382
+ onclick="closeReport()">
383
+ <i class="fas fa-times"></i>
384
+ </button>
385
+ </div>
386
+
387
+ <!-- Floating Action Button -->
388
+ <div class="floating-action">
389
+ <button class="btn btn-circle btn-lg btn-primary" onclick="toggleHelp()">
390
+ <i class="fas fa-question-circle text-2xl"></i>
391
+ </button>
392
+ </div>
393
+
394
+ <!-- Scripts -->
395
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
396
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
397
+ <script>
398
+ // Initialize animations
399
+ AOS.init();
400
+
401
+ // Report templates with complete content
402
+ const reports = {
403
+ glaucomaReport: {
404
+ es: `
405
+ <div class="report-document">
406
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
407
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
408
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
409
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe Oftalmológico: Glaucoma</h1>
410
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
411
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
412
+ <p>Ref: GLM-${Math.random().toString(36).substr(2, 9)}</p>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="patient-info mb-6">
417
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
418
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
419
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
420
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
421
+ </div>
422
+
423
+ <div class="clinical-findings mb-6">
424
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
425
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
426
+ <ul class="list-disc pl-5 mb-4">
427
+ <li>OD: 24 mmHg</li>
428
+ <li>OI: 26 mmHg</li>
429
+ </ul>
430
+
431
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
432
+ <ul class="list-disc pl-5 mb-4">
433
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
434
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
435
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
436
+ </ul>
437
+
438
+ <h3 class="font-medium mb-2">Campo Visual</h3>
439
+ <ul class="list-disc pl-5 mb-4">
440
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
441
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
442
+ </ul>
443
+ </div>
444
+
445
+ <div class="diagnosis-plan mb-6">
446
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
447
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
448
+
449
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
450
+ <ul class="list-disc pl-5">
451
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
452
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
453
+ <li>Control de PIO en 2 semanas</li>
454
+ <li>OCT y Campo Visual de control en 4 meses</li>
455
+ </ul>
456
+ </div>
457
+
458
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
459
+ <p class="text-sm text-gray-600 dark:text-gray-400">
460
+ Dr. Antonio García Rodríguez<br>
461
+ Servicio de Oftalmología<br>
462
+ Hospital Universitario 12 de Octubre<br>
463
+ Nº Colegiado: 28/12345
464
+ </p>
465
+ </div>
466
+ </div>
467
+ `,
468
+ en: `
469
+ <div class="report-document">
470
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
471
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
472
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
473
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe Oftalmológico: Glaucoma</h1>
474
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
475
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
476
+ <p>Ref: GLM-${Math.random().toString(36).substr(2, 9)}</p>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="patient-info mb-6">
481
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
482
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
483
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
484
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
485
+ </div>
486
+
487
+ <div class="clinical-findings mb-6">
488
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
489
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
490
+ <ul class="list-disc pl-5 mb-4">
491
+ <li>OD: 24 mmHg</li>
492
+ <li>OI: 26 mmHg</li>
493
+ </ul>
494
+
495
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
496
+ <ul class="list-disc pl-5 mb-4">
497
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
498
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
499
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
500
+ </ul>
501
+
502
+ <h3 class="font-medium mb-2">Campo Visual</h3>
503
+ <ul class="list-disc pl-5 mb-4">
504
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
505
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
506
+ </ul>
507
+ </div>
508
+
509
+ <div class="diagnosis-plan mb-6">
510
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
511
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
512
+
513
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
514
+ <ul class="list-disc pl-5">
515
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
516
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
517
+ <li>Control de PIO en 2 semanas</li>
518
+ <li>OCT y Campo Visual de control en 4 meses</li>
519
+ </ul>
520
+ </div>
521
+
522
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
523
+ <p class="text-sm text-gray-600 dark:text-gray-400">
524
+ Dr. Antonio García Rodríguez<br>
525
+ Servicio de Oftalmología<br>
526
+ Hospital Universitario 12 de Octubre<br>
527
+ Nº Colegiado: 28/12345
528
+ </p>
529
+ </div>
530
+ </div>
531
+ `
532
+ },
533
+ diabeticRetinopathyReport: {
534
+ es: `
535
+ <div class="report-document">
536
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
537
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
538
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
539
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe Oftalmológico: Retinopatía Diabética</h1>
540
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
541
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
542
+ <p>Ref: RD-${Math.random().toString(36).substr(2, 9)}</p>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="patient-info mb-6">
547
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
548
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
549
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
550
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
551
+ </div>
552
+
553
+ <div class="clinical-findings mb-6">
554
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
555
+ <h3 class="font-medium mb-2">Fondo de Ojo</h3>
556
+ <ul class="list-disc pl-5 mb-4">
557
+ <li>Microaneurismas múltiples en ambos ojos</li>
558
+ <li>Hemorragias intrarretinianas en cuadrantes temporales</li>
559
+ <li>Exudados duros en área macular</li>
560
+ </ul>
561
+
562
+ <h3 class="font-medium mb-2">OCT Macular</h3>
563
+ <ul class="list-disc pl-5 mb-4">
564
+ <li>Edema macular diabético con espesor central de 385μm en OD</li>
565
+ <li>Espesor macular normal en OI (245μm)</li>
566
+ </ul>
567
+ </div>
568
+
569
+ <div class="diagnosis-plan mb-6">
570
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
571
+ <p class="mb-4">Retinopatía Diabética No Proliferativa Moderada</p>
572
+
573
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
574
+ <ul class="list-disc pl-5">
575
+ <li>Inyecciones anti-VEGF</li>
576
+ </ul>
577
+ </div>
578
+
579
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
580
+ <p class="text-sm text-gray-600 dark:text-gray-400">
581
+ Dr. Antonio García Rodríguez<br>
582
+ Servicio de Oftalmología<br>
583
+ Hospital Universitario 12 de Octubre<br>
584
+ Nº Colegiado: 28/12345
585
+ </p>
586
+ </div>
587
+ </div>
588
+ `,
589
+ en: `
590
+ <div class="report-document">
591
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
592
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
593
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
594
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe Oftalmológico: Retinopatía Diabética</h1>
595
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
596
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
597
+ <p>Ref: RD-${Math.random().toString(36).substr(2, 9)}</p>
598
+ </div>
599
+ </div>
600
+
601
+ <div class="patient-info mb-6">
602
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
603
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
604
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
605
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
606
+ </div>
607
+
608
+ <div class="clinical-findings mb-6">
609
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
610
+ <h3 class="font-medium mb-2">Fondo de Ojo</h3>
611
+ <ul class="list-disc pl-5 mb-4">
612
+ <li>Microaneurismas múltiples en ambos ojos</li>
613
+ <li>Hemorragias intrarretinianas en cuadrantes temporales</li>
614
+ <li>Exudados duros en área macular</li>
615
+ </ul>
616
+
617
+ <h3 class="font-medium mb-2">OCT Macular</h3>
618
+ <ul class="list-disc pl-5 mb-4">
619
+ <li>Edema macular diabético con espesor central de 385μm en OD</li>
620
+ <li>Espesor macular normal en OI (245μm)</li>
621
+ </ul>
622
+ </div>
623
+
624
+ <div class="diagnosis-plan mb-6">
625
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
626
+ <p class="mb-4">Retinopatía Diabética No Proliferativa Moderada</p>
627
+
628
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
629
+ <ul class="list-disc pl-5">
630
+ <li>Inyecciones anti-VEGF</li>
631
+ </ul>
632
+ </div>
633
+
634
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
635
+ <p class="text-sm text-gray-600 dark:text-gray-400">
636
+ Dr. Antonio García Rodríguez<br>
637
+ Servicio de Oftalmología<br>
638
+ Hospital Universitario 12 de Octubre<br>
639
+ Nº Colegiado: 28/12345
640
+ </p>
641
+ </div>
642
+ </div>
643
+ `
644
+ },
645
+ amdReport: {
646
+ es: `
647
+ <div class="report-document">
648
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
649
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
650
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
651
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe Oftalmológico: DMAE</h1>
652
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
653
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
654
+ <p>Ref: AMD-${Math.random().toString(36).substr(2, 9)}</p>
655
+ </div>
656
+ </div>
657
+
658
+ <div class="patient-info mb-6">
659
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
660
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
661
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
662
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
663
+ </div>
664
+
665
+ <div class="clinical-findings mb-6">
666
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
667
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
668
+ <ul class="list-disc pl-5 mb-4">
669
+ <li>OD: 24 mmHg</li>
670
+ <li>OI: 26 mmHg</li>
671
+ </ul>
672
+
673
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
674
+ <ul class="list-disc pl-5 mb-4">
675
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
676
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
677
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
678
+ </ul>
679
+
680
+ <h3 class="font-medium mb-2">Campo Visual</h3>
681
+ <ul class="list-disc pl-5 mb-4">
682
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
683
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
684
+ </ul>
685
+ </div>
686
+
687
+ <div class="diagnosis-plan mb-6">
688
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
689
+ <p class="mb-4">DMAE</p>
690
+
691
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
692
+ <ul class="list-disc pl-5">
693
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
694
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
695
+ <li>Control de PIO en 2 semanas</li>
696
+ <li>OCT y Campo Visual de control en 4 meses</li>
697
+ </ul>
698
+ </div>
699
+
700
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
701
+ <p class="text-sm text-gray-600 dark:text-gray-400">
702
+ Dr. Antonio García Rodríguez<br>
703
+ Servicio de Oftalmología<br>
704
+ Hospital Universitario 12 de Octubre<br>
705
+ Nº Colegiado: 28/12345
706
+ </p>
707
+ </div>
708
+ </div>
709
+ `,
710
+ en: `
711
+ <div class="report-document">
712
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
713
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
714
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
715
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe Oftalmológico: DMAE</h1>
716
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
717
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
718
+ <p>Ref: AMD-${Math.random().toString(36).substr(2, 9)}</p>
719
+ </div>
720
+ </div>
721
+
722
+ <div class="patient-info mb-6">
723
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
724
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
725
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
726
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
727
+ </div>
728
+
729
+ <div class="clinical-findings mb-6">
730
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
731
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
732
+ <ul class="list-disc pl-5 mb-4">
733
+ <li>OD: 24 mmHg</li>
734
+ <li>OI: 26 mmHg</li>
735
+ </ul>
736
+
737
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
738
+ <ul class="list-disc pl-5 mb-4">
739
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
740
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
741
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
742
+ </ul>
743
+
744
+ <h3 class="font-medium mb-2">Campo Visual</h3>
745
+ <ul class="list-disc pl-5 mb-4">
746
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
747
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
748
+ </ul>
749
+ </div>
750
+
751
+ <div class="diagnosis-plan mb-6">
752
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
753
+ <p class="mb-4">DMAE</p>
754
+
755
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
756
+ <ul class="list-disc pl-5">
757
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
758
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
759
+ <li>Control de PIO en 2 semanas</li>
760
+ <li>OCT y Campo Visual de control en 4 meses</li>
761
+ </ul>
762
+ </div>
763
+
764
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
765
+ <p class="text-sm text-gray-600 dark:text-gray-400">
766
+ Dr. Antonio García Rodríguez<br>
767
+ Servicio de Oftalmología<br>
768
+ Hospital Universitario 12 de Octubre<br>
769
+ Nº Colegiado: 28/12345
770
+ </p>
771
+ </div>
772
+ </div>
773
+ `
774
+ },
775
+ treatmentPlan: {
776
+ es: `
777
+ <div class="report-document">
778
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
779
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
780
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
781
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Plan de Tratamiento</h1>
782
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
783
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
784
+ <p>Ref: TP-${Math.random().toString(36).substr(2, 9)}</p>
785
+ </div>
786
+ </div>
787
+
788
+ <div class="patient-info mb-6">
789
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
790
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
791
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
792
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
793
+ </div>
794
+
795
+ <div class="clinical-findings mb-6">
796
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
797
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
798
+ <ul class="list-disc pl-5 mb-4">
799
+ <li>OD: 24 mmHg</li>
800
+ <li>OI: 26 mmHg</li>
801
+ </ul>
802
+
803
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
804
+ <ul class="list-disc pl-5 mb-4">
805
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
806
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
807
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
808
+ </ul>
809
+
810
+ <h3 class="font-medium mb-2">Campo Visual</h3>
811
+ <ul class="list-disc pl-5 mb-4">
812
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
813
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
814
+ </ul>
815
+ </div>
816
+
817
+ <div class="diagnosis-plan mb-6">
818
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
819
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
820
+
821
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
822
+ <ul class="list-disc pl-5">
823
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
824
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
825
+ <li>Control de PIO en 2 semanas</li>
826
+ <li>OCT y Campo Visual de control en 4 meses</li>
827
+ </ul>
828
+ </div>
829
+
830
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
831
+ <p class="text-sm text-gray-600 dark:text-gray-400">
832
+ Dr. Antonio García Rodríguez<br>
833
+ Servicio de Oftalmología<br>
834
+ Hospital Universitario 12 de Octubre<br>
835
+ Nº Colegiado: 28/12345
836
+ </p>
837
+ </div>
838
+ </div>
839
+ `,
840
+ en: `
841
+ <div class="report-document">
842
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
843
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
844
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
845
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Plan de Tratamiento</h1>
846
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
847
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
848
+ <p>Ref: TP-${Math.random().toString(36).substr(2, 9)}</p>
849
+ </div>
850
+ </div>
851
+
852
+ <div class="patient-info mb-6">
853
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
854
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
855
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
856
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
857
+ </div>
858
+
859
+ <div class="clinical-findings mb-6">
860
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
861
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
862
+ <ul class="list-disc pl-5 mb-4">
863
+ <li>OD: 24 mmHg</li>
864
+ <li>OI: 26 mmHg</li>
865
+ </ul>
866
+
867
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
868
+ <ul class="list-disc pl-5 mb-4">
869
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
870
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
871
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
872
+ </ul>
873
+
874
+ <h3 class="font-medium mb-2">Campo Visual</h3>
875
+ <ul class="list-disc pl-5 mb-4">
876
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
877
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
878
+ </ul>
879
+ </div>
880
+
881
+ <div class="diagnosis-plan mb-6">
882
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
883
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
884
+
885
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
886
+ <ul class="list-disc pl-5">
887
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
888
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
889
+ <li>Control de PIO en 2 semanas</li>
890
+ <li>OCT y Campo Visual de control en 4 meses</li>
891
+ </ul>
892
+ </div>
893
+
894
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
895
+ <p class="text-sm text-gray-600 dark:text-gray-400">
896
+ Dr. Antonio García Rodríguez<br>
897
+ Servicio de Oftalmología<br>
898
+ Hospital Universitario 12 de Octubre<br>
899
+ Nº Colegiado: 28/12345
900
+ </p>
901
+ </div>
902
+ </div>
903
+ `
904
+ },
905
+ followUpReport: {
906
+ es: `
907
+ <div class="report-document">
908
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
909
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
910
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
911
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe de Seguimiento</h1>
912
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
913
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
914
+ <p>Ref: FU-${Math.random().toString(36).substr(2, 9)}</p>
915
+ </div>
916
+ </div>
917
+
918
+ <div class="patient-info mb-6">
919
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
920
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
921
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
922
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
923
+ </div>
924
+
925
+ <div class="clinical-findings mb-6">
926
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
927
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
928
+ <ul class="list-disc pl-5 mb-4">
929
+ <li>OD: 24 mmHg</li>
930
+ <li>OI: 26 mmHg</li>
931
+ </ul>
932
+
933
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
934
+ <ul class="list-disc pl-5 mb-4">
935
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
936
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
937
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
938
+ </ul>
939
+
940
+ <h3 class="font-medium mb-2">Campo Visual</h3>
941
+ <ul class="list-disc pl-5 mb-4">
942
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
943
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
944
+ </ul>
945
+ </div>
946
+
947
+ <div class="diagnosis-plan mb-6">
948
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
949
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
950
+
951
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
952
+ <ul class="list-disc pl-5">
953
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
954
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
955
+ <li>Control de PIO en 2 semanas</li>
956
+ <li>OCT y Campo Visual de control en 4 meses</li>
957
+ </ul>
958
+ </div>
959
+
960
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
961
+ <p class="text-sm text-gray-600 dark:text-gray-400">
962
+ Dr. Antonio García Rodríguez<br>
963
+ Servicio de Oftalmología<br>
964
+ Hospital Universitario 12 de Octubre<br>
965
+ Nº Colegiado: 28/12345
966
+ </p>
967
+ </div>
968
+ </div>
969
+ `,
970
+ en: `
971
+ <div class="report-document">
972
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
973
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
974
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
975
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Informe de Seguimiento</h1>
976
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
977
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
978
+ <p>Ref: FU-${Math.random().toString(36).substr(2, 9)}</p>
979
+ </div>
980
+ </div>
981
+
982
+ <div class="patient-info mb-6">
983
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
984
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
985
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
986
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
987
+ </div>
988
+
989
+ <div class="clinical-findings mb-6">
990
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
991
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
992
+ <ul class="list-disc pl-5 mb-4">
993
+ <li>OD: 24 mmHg</li>
994
+ <li>OI: 26 mmHg</li>
995
+ </ul>
996
+
997
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
998
+ <ul class="list-disc pl-5 mb-4">
999
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
1000
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
1001
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
1002
+ </ul>
1003
+
1004
+ <h3 class="font-medium mb-2">Campo Visual</h3>
1005
+ <ul class="list-disc pl-5 mb-4">
1006
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
1007
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
1008
+ </ul>
1009
+ </div>
1010
+
1011
+ <div class="diagnosis-plan mb-6">
1012
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
1013
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
1014
+
1015
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
1016
+ <ul class="list-disc pl-5">
1017
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
1018
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
1019
+ <li>Control de PIO en 2 semanas</li>
1020
+ <li>OCT y Campo Visual de control en 4 meses</li>
1021
+ </ul>
1022
+ </div>
1023
+
1024
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
1025
+ <p class="text-sm text-gray-600 dark:text-gray-400">
1026
+ Dr. Antonio García Rodríguez<br>
1027
+ Servicio de Oftalmología<br>
1028
+ Hospital Universitario 12 de Octubre<br>
1029
+ Nº Colegiado: 28/12345
1030
+ </p>
1031
+ </div>
1032
+ </div>
1033
+ `
1034
+ },
1035
+ generalSummaryReport: {
1036
+ es: `
1037
+ <div class="report-document">
1038
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
1039
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
1040
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
1041
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Resumen General</h1>
1042
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
1043
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
1044
+ <p>Ref: GS-${Math.random().toString(36).substr(2, 9)}</p>
1045
+ </div>
1046
+ </div>
1047
+
1048
+ <div class="patient-info mb-6">
1049
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
1050
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
1051
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
1052
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
1053
+ </div>
1054
+
1055
+ <div class="clinical-findings mb-6">
1056
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
1057
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
1058
+ <ul class="list-disc pl-5 mb-4">
1059
+ <li>OD: 24 mmHg</li>
1060
+ <li>OI: 26 mmHg</li>
1061
+ </ul>
1062
+
1063
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
1064
+ <ul class="list-disc pl-5 mb-4">
1065
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
1066
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
1067
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
1068
+ </ul>
1069
+
1070
+ <h3 class="font-medium mb-2">Campo Visual</h3>
1071
+ <ul class="list-disc pl-5 mb-4">
1072
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
1073
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
1074
+ </ul>
1075
+ </div>
1076
+
1077
+ <div class="diagnosis-plan mb-6">
1078
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
1079
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
1080
+
1081
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
1082
+ <ul class="list-disc pl-5">
1083
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
1084
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
1085
+ <li>Control de PIO en 2 semanas</li>
1086
+ <li>OCT y Campo Visual de control en 4 meses</li>
1087
+ </ul>
1088
+ </div>
1089
+
1090
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
1091
+ <p class="text-sm text-gray-600 dark:text-gray-400">
1092
+ Dr. Antonio García Rodríguez<br>
1093
+ Servicio de Oftalmología<br>
1094
+ Hospital Universitario 12 de Octubre<br>
1095
+ Nº Colegiado: 28/12345
1096
+ </p>
1097
+ </div>
1098
+ </div>
1099
+ `,
1100
+ en: `
1101
+ <div class="report-document">
1102
+ <div class="report-header border-b-2 border-gray-200 mb-6 pb-4">
1103
+ <img src="https://ern-euro-nmd.eu/wp-content/uploads/2024/02/logo_12-de-octubre.jpeg"
1104
+ alt="Hospital 12 de Octubre" class="hospital-logo mb-4">
1105
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Resumen General</h1>
1106
+ <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
1107
+ <p>Fecha: ${new Date().toLocaleDateString()}</p>
1108
+ <p>Ref: GS-${Math.random().toString(36).substr(2, 9)}</p>
1109
+ </div>
1110
+ </div>
1111
+
1112
+ <div class="patient-info mb-6">
1113
+ <h2 class="text-lg font-semibold mb-2">Información del Paciente</h2>
1114
+ <p><strong>Nombre:</strong> <span id="patientNameDisplay"></span></p>
1115
+ <p><strong>Edad:</strong> <span id="patientAgeDisplay"></span> años</p>
1116
+ <p><strong>Nº Historia Clínica:</strong> HC-${Math.random().toString().slice(2,11)}</p>
1117
+ </div>
1118
+
1119
+ <div class="clinical-findings mb-6">
1120
+ <h2 class="text-lg font-semibold mb-2">Hallazgos Clínicos</h2>
1121
+ <h3 class="font-medium mb-2">Presión Intraocular (PIO)</h3>
1122
+ <ul class="list-disc pl-5 mb-4">
1123
+ <li>OD: 24 mmHg</li>
1124
+ <li>OI: 26 mmHg</li>
1125
+ </ul>
1126
+
1127
+ <h3 class="font-medium mb-2">Tomografía de Coherencia Óptica (OCT)</h3>
1128
+ <ul class="list-disc pl-5 mb-4">
1129
+ <li>Adelgazamiento severo del RNFL inferior en OD (52μm)</li>
1130
+ <li>Adelgazamiento moderado del RNFL inferior en OI (65μm)</li>
1131
+ <li>Análisis de células ganglionares: Pérdida significativa en sector inferior</li>
1132
+ </ul>
1133
+
1134
+ <h3 class="font-medium mb-2">Campo Visual</h3>
1135
+ <ul class="list-disc pl-5 mb-4">
1136
+ <li>OD: Defecto arqueado superior, MD -8.5 dB</li>
1137
+ <li>OI: Escotoma paracentral, MD -6.2 dB</li>
1138
+ </ul>
1139
+ </div>
1140
+
1141
+ <div class="diagnosis-plan mb-6">
1142
+ <h2 class="text-lg font-semibold mb-2">Diagnóstico</h2>
1143
+ <p class="mb-4">Glaucoma Primario de Ángulo Abierto, estadio moderado-avanzado</p>
1144
+
1145
+ <h2 class="text-lg font-semibold mb-2">Plan de Tratamiento</h2>
1146
+ <ul class="list-disc pl-5">
1147
+ <li>Latanoprost 0.005% - 1 gota en cada ojo por la noche</li>
1148
+ <li>Timolol 0.5% - 1 gota en cada ojo cada 12 horas</li>
1149
+ <li>Control de PIO en 2 semanas</li>
1150
+ <li>OCT y Campo Visual de control en 4 meses</li>
1151
+ </ul>
1152
+ </div>
1153
+
1154
+ <div class="report-footer mt-8 pt-4 border-t-2 border-gray-200">
1155
+ <p class="text-sm text-gray-600 dark:text-gray-400">
1156
+ Dr. Antonio García Rodríguez<br>
1157
+ Servicio de Oftalmología<br>
1158
+ Hospital Universitario 12 de Octubre<br>
1159
+ Nº Colegiado: 28/12345
1160
+ </p>
1161
+ </div>
1162
+ </div>
1163
+ `
1164
+ }
1165
+ };
1166
+
1167
+ // Form handling
1168
+ document.getElementById('patientForm').addEventListener('submit', function(e) {
1169
+ e.preventDefault();
1170
+ const patientName = document.getElementById('patientName').value;
1171
+ const patientAge = document.getElementById('patientAge').value;
1172
+ const diagnosis = document.getElementById('diagnosis').value;
1173
+
1174
+ // Generate appropriate report based on diagnosis
1175
+ showReport(diagnosis + 'Report');
1176
+
1177
+ // Update patient name in report
1178
+ document.querySelectorAll('#patientNameDisplay').forEach(el => {
1179
+ el.textContent = patientName;
1180
+ });
1181
+ });
1182
+
1183
+ // Enhanced report viewer with animations and language support
1184
+ function showReport(reportId) {
1185
+ const viewer = document.getElementById('reportViewer');
1186
+ const content = document.getElementById('reportContent');
1187
+ const currentLang = document.body.getAttribute('data-language');
1188
+
1189
+ // Add loading state
1190
+ content.classList.add('loading');
1191
+
1192
+ // Smooth transition
1193
+ viewer.classList.add('active');
1194
+ document.body.style.overflow = 'hidden';
1195
+
1196
+ // Simulate loading for smoother transition
1197
+ setTimeout(() => {
1198
+ content.innerHTML = reports[reportId][currentLang];
1199
+ content.classList.remove('loading');
1200
+
1201
+ // Initialize any dynamic content
1202
+ initializeReportContent();
1203
+ }, 300);
1204
+ }
1205
+
1206
+ function initializeReportContent() {
1207
+ // Add any initialization needed for report content
1208
+ // For example, charts, interactive elements, etc.
1209
+ }
1210
+
1211
+ function closeReport() {
1212
+ const viewer = document.getElementById('reportViewer');
1213
+ viewer.classList.add('animate__fadeOut');
1214
+
1215
+ setTimeout(() => {
1216
+ viewer.classList.add('hidden');
1217
+ viewer.classList.remove('animate__fadeOut');
1218
+ document.body.style.overflow = 'auto';
1219
+ }, 300);
1220
+ }
1221
+
1222
+ function toggleLanguage() {
1223
+ const body = document.body;
1224
+ const currentLang = body.getAttribute('data-language');
1225
+ const newLang = currentLang === 'es' ? 'en' : 'es';
1226
+ body.setAttribute('data-language', newLang);
1227
+ body.classList.toggle('lang-en');
1228
+ }
1229
+
1230
+ function toggleHelp() {
1231
+ // Implement help modal
1232
+ }
1233
+
1234
+ // Add smooth scroll for navigation
1235
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1236
+ anchor.addEventListener('click', function (e) {
1237
+ e.preventDefault();
1238
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1239
+ behavior: 'smooth'
1240
+ });
1241
+ });
1242
+ });
1243
+ </script>
1244
+ </body>
1245
+ </html>
automedical-demo-1/automedicalai.html ADDED
@@ -0,0 +1,617 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <meta name="apple-mobile-web-app-capable" content="yes">
7
+ <meta name="theme-color" content="#1e293b">
8
+ <title>AutomedicalAI</title>
9
+
10
+ <!-- Core libraries -->
11
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
13
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
14
+
15
+ <!-- Add Hammer.js for gestures -->
16
+ <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
17
+
18
+ <style>
19
+ /* Core app styles */
20
+ :root {
21
+ --app-bg: #1e293b;
22
+ --card-bg: rgba(255,255,255,0.05);
23
+ --primary: #3b82f6;
24
+ --success: #22c55e;
25
+ --danger: #ef4444;
26
+ }
27
+
28
+ body {
29
+ @apply bg-slate-900 text-white antialiased touch-manipulation;
30
+ -webkit-tap-highlight-color: transparent;
31
+ }
32
+
33
+ /* App Shell */
34
+ .app-shell {
35
+ @apply fixed inset-0 flex flex-col;
36
+ height: 100dvh;
37
+ }
38
+
39
+ .app-header {
40
+ @apply flex items-center justify-between px-6 py-4
41
+ bg-slate-800/90 backdrop-blur-lg border-b border-white/10;
42
+ height: 70px;
43
+ }
44
+
45
+ .app-content {
46
+ @apply flex-1 overflow-y-auto px-6 py-4 pb-24;
47
+ height: calc(100dvh - 70px);
48
+ }
49
+
50
+ .app-nav {
51
+ @apply fixed bottom-0 inset-x-0 flex justify-around items-center
52
+ bg-slate-800/90 backdrop-blur-lg border-t border-white/10 px-4 py-3;
53
+ }
54
+
55
+ /* Cards & Components */
56
+ .ai-card {
57
+ @apply bg-white/5 backdrop-blur-md rounded-2xl p-5 mb-5
58
+ border border-white/10 transition-all duration-200
59
+ active:scale-[0.98] flex flex-col justify-center items-center;
60
+ }
61
+ .ai-card i {
62
+ @apply text-3xl mb-3;
63
+ }
64
+
65
+ .stat-card {
66
+ @apply flex flex-col items-center justify-center p-4
67
+ bg-gradient-to-br from-white/5 to-white/10
68
+ rounded-xl border border-white/10;
69
+ }
70
+
71
+ .stat-value {
72
+ @apply text-3xl font-bold bg-clip-text text-transparent
73
+ bg-gradient-to-r from-blue-400 to-purple-400;
74
+ }
75
+
76
+ /* Navigation */
77
+ .nav-item {
78
+ @apply flex flex-col items-center gap-1 px-4 py-2
79
+ text-white/60 transition-colors;
80
+ }
81
+
82
+ .nav-item.active {
83
+ @apply text-primary;
84
+ }
85
+
86
+ /* Charts */
87
+ .chart-container {
88
+ @apply relative rounded-xl overflow-hidden;
89
+ aspect-ratio: 16/9;
90
+ min-height: 250px;
91
+ }
92
+
93
+ /* Modals & Overlays */
94
+ .modal {
95
+ @apply fixed inset-0 z-50 flex items-center justify-center p-6
96
+ bg-black/80 backdrop-blur-sm opacity-0 pointer-events-none
97
+ transition-opacity duration-200;
98
+ }
99
+
100
+ .modal.active {
101
+ @apply opacity-100 pointer-events-auto;
102
+ }
103
+
104
+ .modal-content {
105
+ @apply w-full max-w-xl bg-slate-800 rounded-3xl p-8
106
+ border border-white/10 shadow-2xl;
107
+ }
108
+
109
+ /* AI Processing Animation */
110
+ .ai-processing {
111
+ @apply relative overflow-hidden;
112
+ &::before {
113
+ content: '';
114
+ @apply absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20;
115
+ animation: shimmer 2s infinite linear;
116
+ }
117
+ }
118
+
119
+ @keyframes shimmer {
120
+ 0% { transform: translateX(-100%); }
121
+ 100% { transform: translateX(100%); }
122
+ }
123
+
124
+ /* Skeleton Loading */
125
+ .skeleton {
126
+ @apply animate-pulse bg-white/10 rounded;
127
+ }
128
+
129
+ /* Enhanced Modal */
130
+ .modal-content {
131
+ @apply w-full max-w-xl bg-slate-800/95 backdrop-blur-xl
132
+ rounded-3xl p-8 shadow-2xl border border-white/10
133
+ transform transition-all duration-300;
134
+ &.active {
135
+ @apply scale-100 opacity-100;
136
+ }
137
+ &:not(.active) {
138
+ @apply scale-95 opacity-0;
139
+ }
140
+ }
141
+
142
+ /* Enhanced Form Elements */
143
+ .form-input {
144
+ @apply w-full px-5 py-4 bg-white/5 border border-white/10
145
+ rounded-xl text-white placeholder-white/40
146
+ focus:ring-2 focus:ring-blue-500/50 focus:border-transparent
147
+ transition-all duration-200;
148
+ }
149
+
150
+ /* Toast Notifications */
151
+ .toast {
152
+ @apply fixed bottom-24 left-1/2 -translate-x-1/2
153
+ px-7 py-4 rounded-full bg-slate-800/95
154
+ backdrop-blur-xl border border-white/10
155
+ transform transition-all duration-300
156
+ flex items-center gap-3 text-lg;
157
+ &.success { @apply border-green-500/30 text-green-400; }
158
+ &.error { @apply border-red-500/30 text-red-400; }
159
+ }
160
+
161
+ /* AI Confidence Indicator */
162
+ .ai-confidence {
163
+ @apply flex items-center gap-2 text-sm;
164
+ .indicator {
165
+ @apply h-2 rounded-full bg-gradient-to-r from-yellow-500 to-green-500;
166
+ }
167
+ }
168
+
169
+ /* Enhanced Charts */
170
+ .chart-wrapper {
171
+ @apply relative rounded-xl overflow-hidden;
172
+ aspect-ratio: 16/9;
173
+
174
+ .chart-overlay {
175
+ @apply absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent
176
+ opacity-0 transition-opacity duration-200
177
+ flex items-end justify-center p-5;
178
+ &:hover {
179
+ @apply opacity-100;
180
+ }
181
+ }
182
+ }
183
+ </style>
184
+ </head>
185
+
186
+ <body>
187
+ <div class="app-shell">
188
+ <!-- App Header -->
189
+ <header class="app-header">
190
+ <div class="flex items-center gap-4">
191
+ <img src="logo.png" alt="AutomedicalAI" class="w-10 h-10">
192
+ <h1 class="text-xl font-semibold">AutomedicalAI</h1>
193
+ </div>
194
+ <button class="p-3 hover:bg-white/5 rounded-full">
195
+ <i class="fas fa-ellipsis-v text-xl"></i>
196
+ </button>
197
+ </header>
198
+
199
+ <!-- Main Content -->
200
+ <main class="app-content">
201
+ <!-- Quick Actions -->
202
+ <div class="grid grid-cols-2 gap-5 mb-8">
203
+ <button class="ai-card" onclick="showNewReport()">
204
+ <i class="fas fa-plus-circle text-primary"></i>
205
+ <span class="block text-base mt-2">Nuevo Informe</span>
206
+ </button>
207
+ <button class="ai-card" onclick="showHistory()">
208
+ <i class="fas fa-history text-purple-400"></i>
209
+ <span class="block text-base mt-2">Historial</span>
210
+ </button>
211
+ </div>
212
+
213
+ <!-- Key Stats -->
214
+ <div class="grid grid-cols-2 gap-5 mb-8">
215
+ <div class="stat-card">
216
+ <span class="stat-value">94%</span>
217
+ <span class="text-sm text-white/60">Precisión IA</span>
218
+ </div>
219
+ <div class="stat-card">
220
+ <span class="stat-value">-32%</span>
221
+ <span class="text-sm text-white/60">Costes</span>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Recent Reports -->
226
+ <section class="mb-8">
227
+ <h2 class="text-xl font-semibold mb-4">Informes Recientes</h2>
228
+ <div class="space-y-4">
229
+ <button class="ai-card w-full text-left p-5 flex justify-between items-center" onclick="showReport('glaucoma-123')">
230
+ <div>
231
+ <h3 class="font-medium text-lg">Informe Glaucoma</h3>
232
+ <p class="text-sm text-white/60">Juan Pérez, 54 años</p>
233
+ </div>
234
+ <div class="flex items-center gap-3">
235
+ <span class="text-xs text-white/40">Hace 2h</span>
236
+ <i class="fas fa-chevron-right text-white/40"></i>
237
+ </div>
238
+
239
+ </button>
240
+ <button class="ai-card w-full text-left p-5 flex justify-between items-center" onclick="showReport('retinopathy-456')">
241
+ <div>
242
+ <h3 class="font-medium text-lg">Informe Retinopatía</h3>
243
+ <p class="text-sm text-white/60">Maria López, 62 años</p>
244
+ </div>
245
+ <div class="flex items-center gap-3">
246
+ <span class="text-xs text-white/40">Ayer</span>
247
+ <i class="fas fa-chevron-right text-white/40"></i>
248
+ </div>
249
+ </button>
250
+ <button class="ai-card w-full text-left p-5 flex justify-between items-center" onclick="showReport('amd-789')">
251
+ <div>
252
+ <h3 class="font-medium text-lg">Informe DMAE</h3>
253
+ <p class="text-sm text-white/60">Carlos García, 78 años</p>
254
+ </div>
255
+ <div class="flex items-center gap-3">
256
+ <span class="text-xs text-white/40">Hace 3 días</span>
257
+ <i class="fas fa-chevron-right text-white/40"></i>
258
+ </div>
259
+ </button>
260
+ <!-- More reports... -->
261
+ </div>
262
+ </section>
263
+
264
+ <!-- Analysis Section -->
265
+ <section class="mb-8">
266
+ <h2 class="text-xl font-semibold mb-4">Análisis</h2>
267
+ <div class="snap-x snap-mandatory overflow-x-auto flex gap-5 -mx-6 px-6 pb-5">
268
+ <div class="snap-center shrink-0 w-[350px]">
269
+ <div class="ai-card h-full">
270
+ <h3 class="text-base font-medium mb-3">Precisión Histórica</h3>
271
+ <div class="chart-container">
272
+ <canvas id="accuracyChart"></canvas>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ <div class="snap-center shrink-0 w-[350px]">
277
+ <div class="ai-card h-full">
278
+ <h3 class="text-base font-medium mb-3">Costes</h3>
279
+ <div class="chart-container">
280
+ <canvas id="costsChart"></canvas>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+ </main>
287
+
288
+ <!-- Bottom Navigation -->
289
+ <nav class="app-nav">
290
+ <a href="#home" class="nav-item active">
291
+ <i class="fas fa-home text-2xl"></i>
292
+ <span class="text-xs">Inicio</span>
293
+ </a>
294
+ <a href="#reports" class="nav-item">
295
+ <i class="fas fa-file-medical text-2xl"></i>
296
+ <span class="text-xs">Informes</span>
297
+ </a>
298
+ <a href="#analysis" class="nav-item">
299
+ <i class="fas fa-chart-line text-2xl"></i>
300
+ <span class="text-xs">Análisis</span>
301
+ </a>
302
+ <a href="#settings" class="nav-item">
303
+ <i class="fas fa-cog text-2xl"></i>
304
+ <span class="text-xs">Ajustes</span>
305
+ </a>
306
+ </nav>
307
+ </div>
308
+
309
+ <!-- New Report Modal -->
310
+ <div id="newReportModal" class="modal">
311
+ <div class="modal-content">
312
+ <div class="flex justify-between items-center mb-8">
313
+ <h2 class="text-xl font-semibold">Nuevo Informe</h2>
314
+ <button onclick="closeModal('newReportModal')"
315
+ class="p-3 hover:bg-white/5 rounded-full transition-colors">
316
+ <i class="fas fa-times text-xl"></i>
317
+ </button>
318
+ </div>
319
+
320
+ <form id="newReportForm" class="space-y-8">
321
+ <div>
322
+ <label class="block text-sm text-white/60 mb-3">Paciente</label>
323
+ <input type="text" class="form-input"
324
+ placeholder="Nombre del paciente" required>
325
+ </div>
326
+
327
+ <div>
328
+ <label class="block text-sm text-white/60 mb-3">Edad</label>
329
+ <input type="number" class="form-input"
330
+ placeholder="Edad" required min="0" max="120">
331
+ </div>
332
+
333
+ <div>
334
+ <label class="block text-sm text-white/60 mb-3">Diagnóstico</label>
335
+ <select class="form-input" required>
336
+ <option value="">Seleccionar diagnóstico</option>
337
+ <option value="glaucoma">Glaucoma</option>
338
+ <option value="retinopathy">Retinopatía Diabética</option>
339
+ <option value="amd">DMAE</option>
340
+ </select>
341
+ </div>
342
+
343
+ <div>
344
+ <label class="block text-sm text-white/60 mb-3">Notas</label>
345
+ <textarea class="form-input min-h-[120px]"
346
+ placeholder="Notas adicionales"></textarea>
347
+ </div>
348
+
349
+ <div class="flex justify-end gap-4 mt-4">
350
+ <button type="button" onclick="closeModal('newReportModal')"
351
+ class="px-5 py-3 rounded-xl border border-white/10
352
+ hover:bg-white/5 transition-colors">
353
+ Cancelar
354
+ </button>
355
+ <button type="submit"
356
+ class="px-5 py-3 rounded-xl bg-blue-500
357
+ hover:bg-blue-600 transition-colors">
358
+ Generar Informe
359
+ </button>
360
+ </div>
361
+ </form>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- History Modal -->
366
+ <div id="historyModal" class="modal">
367
+ <div class="modal-content">
368
+ <div class="flex justify-between items-center mb-8">
369
+ <h2 class="text-xl font-semibold">Historial de Informes</h2>
370
+ <button onclick="closeModal('historyModal')"
371
+ class="p-3 hover:bg-white/5 rounded-full transition-colors">
372
+ <i class="fas fa-times text-xl"></i>
373
+ </button>
374
+ </div>
375
+
376
+ <div class="space-y-4">
377
+ <div class="ai-card w-full text-left p-5 flex justify-between items-center">
378
+ <div>
379
+ <h3 class="font-medium text-lg">Informe Glaucoma</h3>
380
+ <p class="text-sm text-white/60">Juan Pérez, 54 años</p>
381
+ </div>
382
+ <div class="flex items-center gap-3">
383
+ <span class="text-xs text-white/40">Hace 2h</span>
384
+ <i class="fas fa-chevron-right text-white/40"></i>
385
+ </div>
386
+ </div>
387
+ <div class="ai-card w-full text-left p-5 flex justify-between items-center">
388
+ <div>
389
+ <h3 class="font-medium text-lg">Informe Retinopatía</h3>
390
+ <p class="text-sm text-white/60">Maria López, 62 años</p>
391
+ </div>
392
+ <div class="flex items-center gap-3">
393
+ <span class="text-xs text-white/40">Ayer</span>
394
+ <i class="fas fa-chevron-right text-white/40"></i>
395
+ </div>
396
+ </div>
397
+ <div class="ai-card w-full text-left p-5 flex justify-between items-center">
398
+ <div>
399
+ <h3 class="font-medium text-lg">Informe DMAE</h3>
400
+ <p class="text-sm text-white/60">Carlos García, 78 años</p>
401
+ </div>
402
+ <div class="flex items-center gap-3">
403
+ <span class="text-xs text-white/40">Hace 3 días</span>
404
+ <i class="fas fa-chevron-right text-white/40"></i>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Add toast container -->
412
+ <div id="toastContainer" class="fixed bottom-24 left-0 right-0 flex flex-col items-center gap-3 z-50">
413
+ <!-- Toasts will be inserted here -->
414
+ </div>
415
+
416
+ <script>
417
+ // Initialize Hammer.js
418
+ const main = document.querySelector('main');
419
+ const hammer = new Hammer(main);
420
+
421
+ // Add pull to refresh
422
+ let startY = 0;
423
+ main.addEventListener('touchstart', e => {
424
+ startY = e.touches[0].pageY;
425
+ });
426
+
427
+ main.addEventListener('touchmove', e => {
428
+ const y = e.touches[0].pageY;
429
+ const diff = y - startY;
430
+
431
+ if (diff > 50 && main.scrollTop === 0) {
432
+ // Show refresh indicator
433
+ showToast('Actualizando...', 'info');
434
+ // Refresh data
435
+ refreshData();
436
+ }
437
+ });
438
+
439
+ // Toast system
440
+ function showToast(message, type = 'info', duration = 3000) {
441
+ const toast = document.createElement('div');
442
+ toast.className = `toast ${type}`;
443
+ toast.innerHTML = `
444
+ <i class="fas fa-${type === 'success' ? 'check-circle' :
445
+ type === 'error' ? 'exclamation-circle' :
446
+ 'info-circle'}"></i>
447
+ <span>${message}</span>
448
+ `;
449
+
450
+ document.getElementById('toastContainer').appendChild(toast);
451
+
452
+ // Animate in
453
+ requestAnimationFrame(() => {
454
+ toast.style.transform = 'translateY(0)';
455
+ toast.style.opacity = '1';
456
+ });
457
+
458
+ // Remove after duration
459
+ setTimeout(() => {
460
+ toast.style.transform = 'translateY(20px)';
461
+ toast.style.opacity = '0';
462
+ setTimeout(() => toast.remove(), 300);
463
+ }, duration);
464
+ }
465
+
466
+ // Enhanced chart initialization
467
+ function initCharts() {
468
+ // Accuracy Chart
469
+ new Chart(document.getElementById('accuracyChart'), {
470
+ type: 'line',
471
+ data: {
472
+ labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
473
+ datasets: [{
474
+ label: 'Precisión',
475
+ data: [85, 88, 90, 92, 93, 94],
476
+ borderColor: '#3b82f6',
477
+ tension: 0.4,
478
+ fill: true,
479
+ backgroundColor: 'rgba(59, 130, 246, 0.1)'
480
+ }]
481
+ },
482
+ options: {
483
+ responsive: true,
484
+ maintainAspectRatio: false,
485
+ plugins: {
486
+ legend: { display: false }
487
+ },
488
+ scales: {
489
+ y: {
490
+ beginAtZero: true,
491
+ grid: {
492
+ color: 'rgba(255,255,255,0.1)'
493
+ },
494
+ ticks: { color: 'rgba(255,255,255,0.7)' }
495
+ },
496
+ x: {
497
+ grid: { display: false },
498
+ ticks: { color: 'rgba(255,255,255,0.7)' }
499
+ }
500
+ }
501
+ }
502
+ });
503
+
504
+ // Costs Chart
505
+ new Chart(document.getElementById('costsChart'), {
506
+ type: 'bar',
507
+ data: {
508
+ labels: ['Sin IA', 'Con IA'],
509
+ datasets: [{
510
+ data: [245, 82],
511
+ backgroundColor: ['#ef4444', '#22c55e']
512
+ }]
513
+ },
514
+ options: {
515
+ responsive: true,
516
+ maintainAspectRatio: false,
517
+ plugins: {
518
+ legend: { display: false }
519
+ },
520
+ scales: {
521
+ y: {
522
+ beginAtZero: true,
523
+ grid: {
524
+ color: 'rgba(255,255,255,0.1)'
525
+ },
526
+ ticks: {
527
+ color: 'rgba(255,255,255,0.7)',
528
+ callback: value => '€' + value
529
+ }
530
+ },
531
+ x: {
532
+ grid: { display: false },
533
+ ticks: { color: 'rgba(255,255,255,0.7)' }
534
+ }
535
+ }
536
+ }
537
+ });
538
+
539
+ // Add interactivity
540
+ Chart.defaults.plugins.tooltip.enabled = true;
541
+ Chart.defaults.plugins.tooltip.mode = 'index';
542
+ Chart.defaults.plugins.tooltip.intersect = false;
543
+ Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 23, 42, 0.9)';
544
+ Chart.defaults.plugins.tooltip.titleColor = '#fff';
545
+ Chart.defaults.plugins.tooltip.bodyColor = '#cbd5e1';
546
+ Chart.defaults.plugins.tooltip.borderColor = 'rgba(148, 163, 184, 0.1)';
547
+ Chart.defaults.plugins.tooltip.borderWidth = 1;
548
+ Chart.defaults.plugins.tooltip.padding = 12;
549
+ Chart.defaults.plugins.tooltip.cornerRadius = 8;
550
+ }
551
+
552
+ // Form handling with validation
553
+ document.getElementById('newReportForm').addEventListener('submit', async (e) => {
554
+ e.preventDefault();
555
+
556
+ // Show processing state
557
+ showToast('Procesando con IA...', 'info');
558
+
559
+ try {
560
+ // Simulate AI processing
561
+ await new Promise(resolve => setTimeout(resolve, 2000));
562
+
563
+ showToast('Informe generado correctamente', 'success');
564
+ closeModal('newReportModal');
565
+
566
+ // Update UI with new report
567
+ addNewReport();
568
+ } catch (error) {
569
+ showToast('Error al generar el informe', 'error');
570
+ }
571
+ });
572
+
573
+ // Add haptic feedback
574
+ function vibrate(pattern = [10]) {
575
+ if ('vibrate' in navigator) {
576
+ navigator.vibrate(pattern);
577
+ }
578
+ }
579
+
580
+ // Initialize
581
+ document.addEventListener('DOMContentLoaded', () => {
582
+ initCharts();
583
+
584
+ // Add touch feedback
585
+ document.querySelectorAll('button, .ai-card').forEach(el => {
586
+ el.addEventListener('click', () => vibrate());
587
+ });
588
+ });
589
+
590
+ // Modal handlers
591
+ function showModal(id) {
592
+ document.getElementById(id).classList.add('active');
593
+ }
594
+
595
+ function closeModal(id) {
596
+ document.getElementById(id).classList.remove('active');
597
+ }
598
+
599
+ function showNewReport() {
600
+ showModal('newReportModal');
601
+ }
602
+
603
+ function showHistory() {
604
+ showModal('historyModal');
605
+ }
606
+
607
+ // Navigation
608
+ document.querySelectorAll('.nav-item').forEach(item => {
609
+ item.addEventListener('click', e => {
610
+ e.preventDefault();
611
+ document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
612
+ item.classList.add('active');
613
+ });
614
+ });
615
+ </script>
616
+ </body>
617
+ </html>
docs/REFERENCE_example-propuesta-12-octubre-report copy.pdf ADDED
Binary file (249 kB). View file
 
docs/fernandoli-cv.html ADDED
File without changes
index.html CHANGED
@@ -32,10 +32,13 @@
32
  }
33
  .card {
34
  transition: all 0.3s ease;
 
 
35
  }
36
  .card:hover {
37
  transform: translateY(-4px);
38
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
 
39
  }
40
  [lang="en"] { display: none; }
41
  .lang-en [lang="en"] { display: block; }
@@ -100,6 +103,139 @@
100
  font-size: 2rem;
101
  cursor: pointer;
102
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </style>
104
  </head>
105
  <body class="bg-gradient-to-br from-gray-900 to-gray-800 text-white min-h-screen" data-language="es">
@@ -114,11 +250,11 @@
114
  <span lang="es">EN</span>
115
  <span lang="en">ES</span>
116
  </button>
117
- <a href="#proposals" class="nav-link hover:text-blue-400">
118
  <span lang="es">Propuestas</span>
119
  <span lang="en">Proposals</span>
120
  </a>
121
- <a href="#docs" class="nav-link hover:text-blue-400">
122
  <span lang="es">Documentación</span>
123
  <span lang="en">Documentation</span>
124
  </a>
@@ -143,6 +279,37 @@
143
  </p>
144
  </div>
145
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  <!-- Main Content -->
147
  <div class="grid gap-8">
148
  <!-- Spanish Proposals Section -->
@@ -260,11 +427,36 @@
260
  <iframe id="docFrame" src=""></iframe>
261
  </div>
262
 
263
- <footer class="bg-gray-800 bg-opacity-90 mt-12 py-8 text-center text-gray-400">
264
- <p>
265
- <span lang="es">IA Hospital Hub - Transformando la Sanidad con IA</span>
266
- <span lang="en">Hospital AI Hub - Transforming Healthcare with AI</span>
267
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  </footer>
269
 
270
  <script>
@@ -288,9 +480,19 @@
288
 
289
  // Document viewer functions
290
  function openDoc(url) {
291
- document.getElementById('docFrame').src = url;
292
- document.getElementById('docViewer').classList.add('active');
 
 
 
 
293
  document.body.style.overflow = 'hidden';
 
 
 
 
 
 
294
  }
295
 
296
  function closeDoc() {
@@ -303,6 +505,27 @@
303
  document.addEventListener('keydown', (e) => {
304
  if (e.key === 'Escape') closeDoc();
305
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
306
  </script>
307
  </body>
308
  </html>
 
32
  }
33
  .card {
34
  transition: all 0.3s ease;
35
+ background: linear-gradient(135deg, rgba(31, 41, 55, 0.98), rgba(17, 24, 39, 0.98));
36
+ border: 1px solid rgba(255, 255, 255, 0.1);
37
  }
38
  .card:hover {
39
  transform: translateY(-4px);
40
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
41
+ border-color: rgba(59, 130, 246, 0.5);
42
  }
43
  [lang="en"] { display: none; }
44
  .lang-en [lang="en"] { display: block; }
 
103
  font-size: 2rem;
104
  cursor: pointer;
105
  }
106
+
107
+ /* Enhanced Readability */
108
+ .readable-text {
109
+ @apply text-lg leading-relaxed text-gray-100;
110
+ }
111
+
112
+ .glass-card {
113
+ background: linear-gradient(135deg, rgba(31, 41, 55, 0.98), rgba(17, 24, 39, 0.98));
114
+ backdrop-filter: blur(16px);
115
+ border: 1px solid rgba(255, 255, 255, 0.15);
116
+ }
117
+
118
+ /* Personal Brand Section */
119
+ .personal-intro {
120
+ @apply relative overflow-hidden rounded-2xl p-8 mb-12;
121
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
122
+ }
123
+
124
+ .personal-intro::before {
125
+ content: '';
126
+ position: absolute;
127
+ inset: 0;
128
+ background: url('/assets/neural-pattern.svg') center/cover;
129
+ opacity: 0.1;
130
+ }
131
+
132
+ /* Cost Benefits Display */
133
+ .metric-card {
134
+ @apply p-6 rounded-xl glass-card relative overflow-hidden;
135
+ border: 1px solid rgba(59, 130, 246, 0.2);
136
+ }
137
+
138
+ .metric-value {
139
+ @apply text-4xl font-bold bg-clip-text text-transparent;
140
+ background-image: linear-gradient(135deg, #3b82f6, #8b5cf6);
141
+ }
142
+
143
+ .metric-label {
144
+ @apply text-sm text-blue-300 uppercase tracking-wider;
145
+ }
146
+
147
+ /* Improve text contrast in cards */
148
+ .card p {
149
+ @apply text-gray-100;
150
+ }
151
+
152
+ /* Enhance link visibility */
153
+ .nav-link {
154
+ @apply text-gray-100 hover:text-blue-400 transition-colors;
155
+ font-weight: 500;
156
+ }
157
+
158
+ /* Improve section spacing */
159
+ .section {
160
+ @apply mb-12;
161
+ }
162
+
163
+ /* Better mobile responsiveness */
164
+ @media (max-width: 768px) {
165
+ .nav-link {
166
+ @apply text-sm;
167
+ }
168
+
169
+ h1 {
170
+ @apply text-4xl;
171
+ }
172
+
173
+ .card {
174
+ @apply p-4;
175
+ }
176
+ }
177
+
178
+ /* Add loading indicator */
179
+ .loading {
180
+ position: relative;
181
+ }
182
+
183
+ .loading::after {
184
+ content: 'Cargando...';
185
+ position: absolute;
186
+ top: 50%;
187
+ left: 50%;
188
+ transform: translate(-50%, -50%);
189
+ color: white;
190
+ background: rgba(0,0,0,0.7);
191
+ padding: 1rem 2rem;
192
+ border-radius: 9999px;
193
+ }
194
+
195
+ /* Make headings more visible */
196
+ h1, h2, h3 {
197
+ @apply text-white;
198
+ }
199
+
200
+ /* Enhance secondary text readability */
201
+ .text-gray-300 {
202
+ @apply text-gray-200;
203
+ }
204
+
205
+ /* Better mobile spacing */
206
+ @media (max-width: 768px) {
207
+ .max-w-6xl {
208
+ @apply px-4; /* Reduce side padding on mobile */
209
+ }
210
+
211
+ .grid.md\:grid-cols-2 {
212
+ @apply grid-cols-1 gap-4; /* Stack cards on mobile */
213
+ }
214
+
215
+ .flex.gap-4 {
216
+ @apply flex-col gap-3; /* Stack buttons on mobile */
217
+ }
218
+
219
+ .text-5xl {
220
+ @apply text-3xl; /* Smaller headings on mobile */
221
+ }
222
+ }
223
+
224
+ /* Add loading states */
225
+ .loading {
226
+ @apply relative pointer-events-none opacity-75;
227
+ }
228
+
229
+ .loading::after {
230
+ content: '';
231
+ @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent;
232
+ animation: shimmer 1.5s infinite;
233
+ }
234
+
235
+ @keyframes shimmer {
236
+ 0% { transform: translateX(-100%); }
237
+ 100% { transform: translateX(100%); }
238
+ }
239
  </style>
240
  </head>
241
  <body class="bg-gradient-to-br from-gray-900 to-gray-800 text-white min-h-screen" data-language="es">
 
250
  <span lang="es">EN</span>
251
  <span lang="en">ES</span>
252
  </button>
253
+ <a href="#proposals" class="nav-link hover:text-blue-400 scroll-smooth">
254
  <span lang="es">Propuestas</span>
255
  <span lang="en">Proposals</span>
256
  </a>
257
+ <a href="#docs" class="nav-link hover:text-blue-400 scroll-smooth">
258
  <span lang="es">Documentación</span>
259
  <span lang="en">Documentation</span>
260
  </a>
 
279
  </p>
280
  </div>
281
 
282
+ <div class="personal-intro">
283
+ <div class="relative z-10">
284
+ <h2 class="text-3xl font-bold mb-4 text-blue-400">
285
+ <span lang="es">Sobre el Autor</span>
286
+ <span lang="en">About the Author</span>
287
+ </h2>
288
+ <p class="readable-text mb-4">
289
+ <span lang="es">
290
+ Soy un especialista en IA médica con experiencia en el desarrollo de soluciones
291
+ como AutoGlaucoma y AutoMedicalAI. Mi objetivo es transformar la sanidad española
292
+ mediante la implementación de IA accesible y efectiva.
293
+ </span>
294
+ <span lang="en">
295
+ I'm a medical AI specialist with experience developing solutions like
296
+ AutoGlaucoma and AutoMedicalAI. My goal is to transform Spanish healthcare
297
+ through accessible and effective AI implementation.
298
+ </span>
299
+ </p>
300
+ <div class="flex gap-4">
301
+ <a href="#contact" class="btn bg-blue-500 hover:bg-blue-600 px-6 py-2 rounded-full">
302
+ <span lang="es">Contactar</span>
303
+ <span lang="en">Contact</span>
304
+ </a>
305
+ <a href="/projects.html" class="btn border border-blue-400 px-6 py-2 rounded-full hover:bg-blue-500/10">
306
+ <span lang="es">Ver Proyectos</span>
307
+ <span lang="en">View Projects</span>
308
+ </a>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
  <!-- Main Content -->
314
  <div class="grid gap-8">
315
  <!-- Spanish Proposals Section -->
 
427
  <iframe id="docFrame" src=""></iframe>
428
  </div>
429
 
430
+ <footer class="bg-gray-800/50 backdrop-blur-lg mt-12 py-12 border-t border-white/10">
431
+ <div class="max-w-6xl mx-auto px-8 grid grid-cols-1 md:grid-cols-4 gap-8">
432
+ <div>
433
+ <h4 class="text-lg font-bold mb-4">IA Hospital Hub</h4>
434
+ <p class="text-gray-400">Transformando la sanidad con soluciones de IA innovadoras y accesibles.</p>
435
+ </div>
436
+ <div>
437
+ <h4 class="text-lg font-bold mb-4">Proyectos</h4>
438
+ <ul class="space-y-2 text-gray-400">
439
+ <li><a href="/projects/autoglaucoma.html" class="hover:text-blue-400">AutoGlaucoma AI</a></li>
440
+ <li><a href="/projects/automedical.html" class="hover:text-blue-400">AutoMedicalAI</a></li>
441
+ <li><a href="/projects/analytics.html" class="hover:text-blue-400">Hospital Analytics</a></li>
442
+ </ul>
443
+ </div>
444
+ <div>
445
+ <h4 class="text-lg font-bold mb-4">Recursos</h4>
446
+ <ul class="space-y-2 text-gray-400">
447
+ <li><a href="/docs" class="hover:text-blue-400">Documentación</a></li>
448
+ <li><a href="/api" class="hover:text-blue-400">API</a></li>
449
+ <li><a href="/papers" class="hover:text-blue-400">Papers</a></li>
450
+ </ul>
451
+ </div>
452
+ <div>
453
+ <h4 class="text-lg font-bold mb-4">Contacto</h4>
454
+ <ul class="space-y-2 text-gray-400">
455
+ <li>[email protected]</li>
456
+ <li>Madrid, España</li>
457
+ </ul>
458
+ </div>
459
+ </div>
460
  </footer>
461
 
462
  <script>
 
480
 
481
  // Document viewer functions
482
  function openDoc(url) {
483
+ const docViewer = document.getElementById('docViewer');
484
+ const docFrame = document.getElementById('docFrame');
485
+
486
+ // Show loading state
487
+ docViewer.classList.add('active');
488
+ docFrame.classList.add('loading');
489
  document.body.style.overflow = 'hidden';
490
+
491
+ // Load document
492
+ docFrame.onload = () => {
493
+ docFrame.classList.remove('loading');
494
+ };
495
+ docFrame.src = url;
496
  }
497
 
498
  function closeDoc() {
 
505
  document.addEventListener('keydown', (e) => {
506
  if (e.key === 'Escape') closeDoc();
507
  });
508
+
509
+ // Add smooth scrolling
510
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
511
+ anchor.addEventListener('click', function (e) {
512
+ e.preventDefault();
513
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
514
+ behavior: 'smooth'
515
+ });
516
+ });
517
+ });
518
+
519
+ // Add loading feedback
520
+ function showLoading(element) {
521
+ element.classList.add('loading');
522
+ element.setAttribute('disabled', 'true');
523
+ }
524
+
525
+ function hideLoading(element) {
526
+ element.classList.remove('loading');
527
+ element.removeAttribute('disabled');
528
+ }
529
  </script>
530
  </body>
531
  </html>