Hugging Face's logo

Spaces:
crazychon
/
me-ia
Running

App Files Community
crazychon commited on
Commit
55595a6
·
verified ·
1 Parent(s): 6b7aca7

import requests import json # 1. Obtener datos de Notion API notion_data = get_notion_data() # [implementar con API de Notion] # 2. Preparar prompt para DeepSeek prompt = f""" Eres mi ME IA de bienestar. Analiza: {json.dumps(notion_data)} Devuelve solo JSON: {{ "patron": str, "accion": str, "pronostico": str }} """ # 3. Consultar API DeepSeek-R1 (gratis) url = "https://api.deepseek.com/v1/chat/completions" headers = {"Authorization": "Bearer TU_API_KEY"} data = { "model": "deepseek-r1", "messages": [{"role": "user", "content": prompt}] } response = requests.post(url, json=data, headers=headers) alerta_ia = response.json()["choices"][0]["message"]["content"] # 4. Actualizar Notion con la alerta update_notion(alerta_ia) # ← ¡Tu ME IA ya funciona! - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +416 -680
index.html CHANGED
@@ -1,768 +1,504 @@
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>ME IA Ético - Sistema de Bienestar</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
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  <style>
11
- .tab-content {
12
- display: none;
13
  }
14
- .tab-content.active {
15
- display: block;
16
  }
17
- .nav-tab {
18
- transition: all 0.3s ease;
19
- }
20
- .nav-tab.active {
21
- border-bottom: 3px solid #3b82f6;
22
- color: #3b82f6;
23
  }
24
- #sleepChart {
25
- max-height: 400px;
 
26
  }
27
- .recommendation-item {
28
  transition: all 0.3s ease;
29
  }
30
- .recommendation-item:hover {
31
- transform: translateX(5px);
32
- }
33
- .red-zone-item {
34
- position: relative;
35
- }
36
- .red-zone-item:hover .delete-zone {
37
- opacity: 1;
38
- }
39
- .delete-zone {
40
- opacity: 0;
41
- transition: opacity 0.2s ease;
42
- }
43
- .animate-pulse {
44
- animation: pulse 1.5s infinite;
45
- }
46
- @keyframes pulse {
47
- 0% { opacity: 1; }
48
- 50% { opacity: 0.5; }
49
- 100% { opacity: 1; }
50
- }
51
  </style>
52
  </head>
53
  <body class="bg-gray-50 font-sans">
54
- <div class="container mx-auto px-4 py-8 max-w-6xl">
55
  <!-- Header -->
56
- <header class="mb-8 text-center">
57
- <h1 class="text-3xl md:text-4xl font-bold text-blue-800 mb-2">
58
- <i class="fas fa-shield-alt mr-2"></i>ME IA Ético <span class="text-indigo-600">+ Deepseek R1</span>
59
- </h1>
60
- <p class="text-gray-600">Sistema de Bienestar Ético con Retroalimentación ME IA y Deepseek R1</p>
61
- <div class="mt-4 flex flex-col sm:flex-row gap-3 items-center">
62
- <div class="p-3 bg-blue-50 rounded-lg inline-flex items-center">
63
- <i class="fas fa-lock text-blue-600 mr-2"></i>
64
- <span class="text-sm text-blue-800">Datos procesados localmente con cifrado</span>
65
- </div>
66
- <div class="p-2 bg-indigo-50 rounded-lg inline-flex items-center">
67
- <i class="fas fa-robot text-indigo-600 mr-2"></i>
68
- <span class="text-sm text-indigo-800">Powered by Deepseek R1</span>
 
 
 
69
  </div>
70
- <button id="voiceCommand" class="p-3 bg-green-50 rounded-lg inline-flex items-center hover:bg-green-100 transition-colors">
71
- <i class="fas fa-microphone text-green-600 mr-2"></i>
72
- <span class="text-sm text-green-800">Hablar con ME IA</span>
73
- </button>
74
  </div>
75
  </header>
76
 
77
- <!-- Navigation Tabs -->
78
- <div class="flex border-b border-gray-200 mb-6 overflow-x-auto">
79
- <button class="nav-tab px-4 py-3 font-medium text-gray-600 hover:text-blue-600 flex items-center active" data-tab="wellness">
80
- <i class="fas fa-moon mr-2"></i> Bienestar
81
- </button>
82
- <button class="nav-tab px-4 py-3 font-medium text-gray-600 hover:text-blue-600 flex items-center" data-tab="geolocation">
83
- <i class="fas fa-map-marker-alt mr-2"></i> Geolocalización
84
- </button>
85
- <button class="nav-tab px-4 py-3 font-medium text-gray-600 hover:text-blue-600 flex items-center" data-tab="system">
86
- <i class="fas fa-cog mr-2"></i> Sistema
87
- </button>
88
- </div>
89
-
90
- <!-- Wellness Tab -->
91
- <div id="wellness" class="tab-content active">
92
- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
93
- <div class="p-6 border-b border-gray-200 bg-blue-50">
94
- <h2 class="text-xl font-semibold text-blue-800 flex items-center">
95
- <i class="fas fa-plus-circle mr-2"></i> Añadir Datos de Sueño
96
- </h2>
97
- </div>
98
- <div class="p-6">
99
- <div class="flex flex-col md:flex-row gap-4 items-center">
100
- <div class="w-full md:w-auto">
101
- <label class="block text-gray-700 mb-2">Horas de sueño:</label>
102
- <div class="relative">
103
- <input type="number" id="sleepHours" min="0" max="24" step="0.1" value="7.0"
104
- class="w-full md:w-32 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
105
- <button id="voiceSleepHours" class="absolute right-2 top-2 text-blue-600 hover:text-blue-800">
106
- <i class="fas fa-microphone"></i>
107
  </button>
108
  </div>
109
  </div>
110
- <button id="saveSleepData" class="w-full md:w-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors mt-6 md:mt-0">
111
- <i class="fas fa-save mr-2"></i> Guardar
112
- </button>
113
- </div>
114
- </div>
115
- </div>
116
-
117
- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
118
- <div class="p-6 border-b border-gray-200 bg-blue-50">
119
- <h2 class="text-xl font-semibold text-blue-800 flex items-center">
120
- <i class="fas fa-chart-bar mr-2"></i> Análisis de Bienestar
121
- </h2>
122
- </div>
123
- <div class="p-6">
124
- <div id="sleepAnalysis" class="bg-gray-50 p-4 rounded-md mb-6 text-gray-700">
125
- Cargando análisis de sueño...
126
- </div>
127
-
128
- <div class="mb-6">
129
- <canvas id="sleepChart"></canvas>
130
- </div>
131
- </div>
132
- </div>
133
-
134
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
135
- <div class="p-6 border-b border-gray-200 bg-green-50">
136
- <h2 class="text-xl font-semibold text-green-800 flex items-center">
137
- <i class="fas fa-lightbulb mr-2"></i> Recomendaciones ME IA + Deepseek R1
138
- </h2>
139
- </div>
140
- <div id="recommendations" class="p-6">
141
- <div class="space-y-3">
142
- <div class="recommendation-item p-3 bg-green-50 rounded-md border-l-4 border-green-500">
143
- <i class="fas fa-check-circle text-green-500 mr-2"></i> Establece una hora fija para dormir
144
- </div>
145
- <div class="recommendation-item p-3 bg-green-50 rounded-md border-l-4 border-green-500">
146
- <i class="fas fa-check-circle text-green-500 mr-2"></i> Evita pantallas 1 hora antes de dormir
147
- </div>
148
  </div>
149
- </div>
150
- </div>
151
- </div>
152
 
153
- <!-- Geolocation Tab -->
154
- <div id="geolocation" class="tab-content">
155
- <div class="flex flex-col lg:flex-row gap-6">
156
- <!-- Red Zones Section -->
157
- <div class="lg:w-1/3">
158
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
159
- <div class="p-6 border-b border-gray-200 bg-red-50">
160
- <h2 class="text-xl font-semibold text-red-800 flex items-center">
161
- <i class="fas fa-exclamation-triangle mr-2"></i> Zonas Sensibles
162
- </h2>
163
- </div>
164
  <div class="p-6">
165
- <div id="redZonesList" class="mb-4 max-h-60 overflow-y-auto">
166
- <div class="red-zone-item flex justify-between items-center p-2 hover:bg-red-50 rounded">
167
- <span class="text-gray-700"><i class="fas fa-hospital mr-2 text-red-500"></i>Hospital</span>
168
- <button class="delete-zone text-red-500 hover:text-red-700">
169
- <i class="fas fa-trash-alt"></i>
170
- </button>
171
- </div>
172
- <div class="red-zone-item flex justify-between items-center p-2 hover:bg-red-50 rounded">
173
- <span class="text-gray-700"><i class="fas fa-home mr-2 text-red-500"></i>Casa de Familia</span>
174
- <button class="delete-zone text-red-500 hover:text-red-700">
175
- <i class="fas fa-trash-alt"></i>
176
- </button>
177
  </div>
178
  </div>
179
- <div class="flex gap-2">
180
- <input type="text" id="newZone" placeholder="Nueva zona sensible"
181
- class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
182
- <button id="addZone" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors">
183
- <i class="fas fa-plus mr-1"></i> Añadir
184
  </button>
185
  </div>
186
- <p class="text-xs text-gray-500 mt-2">
187
- <i class="fas fa-info-circle mr-1"></i> Los datos en estas zonas se borrarán automáticamente
188
- </p>
189
  </div>
190
  </div>
191
  </div>
192
 
193
- <!-- Location Simulation -->
194
- <div class="lg:w-2/3">
195
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
196
- <div class="p-6 border-b border-gray-200 bg-blue-50">
197
- <h2 class="text-xl font-semibold text-blue-800 flex items-center">
198
- <i class="fas fa-map-marked-alt mr-2"></i> Simulación de Ubicación
 
199
  </h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  </div>
 
 
 
 
201
  <div class="p-6">
202
- <div class="mb-4">
203
- <label class="block text-gray-700 mb-2">Lugar actual:</label>
204
- <select id="locationSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
205
- <option>Oficina</option>
206
- <option>Casa</option>
207
- <option>Gimnasio</option>
208
- <option>Hospital</option>
209
- <option selected>Casa de Familia</option>
210
- <option>Parque</option>
211
- </select>
212
  </div>
213
- <button id="registerLocation" class="w-full px-4 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors mb-4">
214
- <i class="fas fa-location-arrow mr-2"></i> Registrar Ubicación
215
- </button>
216
- <div id="locationResult" class="p-4 bg-gray-50 rounded-md">
217
- <p class="text-gray-700">Seleccione una ubicación y haga clic en "Registrar Ubicación"</p>
218
  </div>
219
  </div>
220
  </div>
221
- </div>
222
- </div>
223
- </div>
224
 
225
- <!-- System Tab -->
226
- <div id="system" class="tab-content">
227
- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
228
- <div class="p-6 border-b border-gray-200 bg-blue-50">
229
- <h2 class="text-xl font-semibold text-blue-800 flex items-center">
230
- <i class="fas fa-info-circle mr-2"></i> Información del Sistema
231
- </h2>
232
- </div>
233
- <div class="p-6">
234
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
235
- <div class="flex justify-between border-b border-gray-100 pb-2">
236
- <span class="text-gray-600">Sistema Operativo:</span>
237
- <span class="font-medium" id="osInfo">...</span>
238
- </div>
239
- <div class="flex justify-between border-b border-gray-100 pb-2">
240
- <span class="text-gray-600">Arquitectura:</span>
241
- <span class="font-medium" id="archInfo">...</span>
242
- </div>
243
- <div class="flex justify-between border-b border-gray-100 pb-2">
244
- <span class="text-gray-600">Hora Local:</span>
245
- <span class="font-medium" id="timeInfo">...</span>
246
- </div>
247
- <div class="flex justify-between border-b border-gray-100 pb-2">
248
- <span class="text-gray-600">Zonas Sensibles:</span>
249
- <span class="font-medium" id="zonesInfo">2</span>
250
- </div>
251
- <div class="flex justify-between border-b border-gray-100 pb-2">
252
- <span class="text-gray-600">Registros de Sueño:</span>
253
- <span class="font-medium" id="sleepRecords">7</span>
254
- </div>
255
- <div class="flex justify-between border-b border-gray-100 pb-2">
256
- <span class="text-gray-600">Estado Ético:</span>
257
- <span class="font-medium text-green-600" id="ethicalStatus"><i class="fas fa-lock mr-1"></i> ACTIVADO</span>
258
  </div>
259
  </div>
260
  </div>
261
  </div>
 
262
 
263
- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
264
- <div class="p-6 border-b border-gray-200 bg-green-50">
265
- <h2 class="text-xl font-semibold text-green-800 flex items-center">
266
- <i class="fas fa-shield-alt mr-2"></i> Verificación Ética
267
- </h2>
268
- </div>
269
- <div class="p-6">
270
- <div class="space-y-3">
271
- <div class="flex items-center text-green-700">
272
- <i class="fas fa-check-circle mr-2"></i>
273
- <span>Todos los datos procesados localmente</span>
274
- </div>
275
- <div class="flex items-center text-green-700">
276
- <i class="fas fa-check-circle mr-2"></i>
277
- <span>Cifrado AES-256 activado</span>
278
- </div>
279
- <div class="flex items-center text-green-700">
280
- <i class="fas fa-check-circle mr-2"></i>
281
- <span>Geolocalización sensible protegida</span>
282
- </div>
283
- <div class="flex items-center text-green-700">
284
- <i class="fas fa-check-circle mr-2"></i>
285
- <span>Sin conexión a internet</span>
286
- </div>
287
- <div class="flex items-center text-green-700">
288
- <i class="fas fa-check-circle mr-2"></i>
289
- <span id="zonesCheck">2 zonas sensibles definidas</span>
290
- </div>
291
  </div>
292
  </div>
293
  </div>
 
 
294
 
295
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
296
- <div class="p-6 border-b border-gray-200 bg-purple-50">
297
- <h2 class="text-xl font-semibold text-purple-800 flex items-center">
298
- <i class="fas fa-file-export mr-2"></i> Exportación de Datos
299
- </h2>
300
- </div>
301
- <div class="p-6 text-center">
302
- <button id="exportData" class="px-6 py-3 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors mb-3">
303
- <i class="fas fa-download mr-2"></i> Exportar Datos Cifrados
304
- </button>
305
- <p class="text-sm text-gray-600">
306
- <i class="fas fa-info-circle mr-1"></i> Todos los datos permanecen en este dispositivo
307
- </p>
308
- </div>
 
 
 
309
  </div>
310
  </div>
311
  </div>
312
 
313
  <script>
314
- // App State
315
- const state = {
316
- redZones: ['Hospital', 'Casa de Familia'],
317
- sleepData: [],
318
- chart: null
319
- };
 
 
 
 
 
 
 
 
 
 
320
 
321
- // Initialize the app
322
- document.addEventListener('DOMContentLoaded', function() {
323
- // Generate sample sleep data
324
- for (let i = 0; i < 7; i++) {
325
- const hours = (Math.random() * 3 + 5.5).toFixed(1);
326
- const date = new Date();
327
- date.setDate(date.getDate() - (6 - i));
328
- state.sleepData.push({
329
- value: parseFloat(hours),
330
- date: date.toISOString()
331
- });
 
 
 
 
 
 
 
 
 
 
332
  }
 
333
 
334
- // Setup tabs
335
- setupTabs();
336
-
337
- // Initialize wellness tab
338
- updateSleepAnalysis();
339
- renderSleepChart();
340
-
341
- // Initialize system info
342
- updateSystemInfo();
343
-
344
- // Setup event listeners
345
- document.getElementById('saveSleepData').addEventListener('click', saveSleepData);
346
- document.getElementById('addZone').addEventListener('click', addRedZone);
347
- document.getElementById('registerLocation').addEventListener('click', registerLocation);
348
- document.getElementById('exportData').addEventListener('click', exportData);
349
-
350
- // Delegated event for deleting zones
351
- document.getElementById('redZonesList').addEventListener('click', function(e) {
352
- if (e.target.closest('.delete-zone')) {
353
- const zoneItem = e.target.closest('.red-zone-item');
354
- const zoneName = zoneItem.querySelector('span').textContent.trim();
355
- removeRedZone(zoneName);
356
- }
357
- });
358
  });
359
 
360
- // Tab Navigation
361
- function setupTabs() {
362
- const tabs = document.querySelectorAll('.nav-tab');
363
- tabs.forEach(tab => {
364
- tab.addEventListener('click', function() {
365
- // Remove active class from all tabs and contents
366
- document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
367
- document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
368
-
369
- // Add active class to clicked tab and corresponding content
370
- this.classList.add('active');
371
- const tabId = this.getAttribute('data-tab');
372
- document.getElementById(tabId).classList.add('active');
373
- });
374
- });
375
- }
376
 
377
- // Wellness Tab Functions
378
- function saveSleepData() {
379
- const hoursInput = document.getElementById('sleepHours');
380
- const hours = parseFloat(hoursInput.value);
381
-
382
- if (isNaN(hours) || hours < 0 || hours > 24) {
383
- showAlert('Por favor ingresa un valor válido (0-24)', 'error');
384
- return;
385
- }
386
-
387
- const today = new Date().toISOString();
388
- state.sleepData.push({
389
- value: hours,
390
- date: today
391
- });
392
-
393
- showAlert(`Se ha guardado ${hours} horas de sueño`, 'success');
394
- updateSleepAnalysis();
395
- renderSleepChart();
396
- }
397
 
398
- function updateSleepAnalysis() {
399
- const analysisDiv = document.getElementById('sleepAnalysis');
400
- const recommendationsDiv = document.getElementById('recommendations');
401
-
402
- if (state.sleepData.length === 0) {
403
- analysisDiv.innerHTML = '<p class="text-gray-700">No hay datos de sueño disponibles</p>';
404
- recommendationsDiv.innerHTML = '<p class="text-gray-700">No hay recomendaciones disponibles</p>';
405
- return;
406
- }
407
-
408
- // Calculate statistics
409
- const values = state.sleepData.map(entry => entry.value);
410
- const avgSleep = values.reduce((a, b) => a + b, 0) / values.length;
411
- const minSleep = Math.min(...values);
412
- const maxSleep = Math.max(...values);
413
-
414
- // Generate analysis text
415
- let analysis = `
416
- <div class="space-y-2">
417
- <p class="font-semibold text-blue-800"><i class="fas fa-chart-pie mr-2"></i>Análisis Conjunto ME IA + Deepseek R1</p>
418
- <p><i class="fas fa-calendar-day mr-2 text-gray-500"></i>Registros: <span class="font-medium">${state.sleepData.length} días</span></p>
419
- <p><i class="fas fa-clock mr-2 text-gray-500"></i>Promedio: <span class="font-medium">${avgSleep.toFixed(1)} horas</span></p>
420
- <p><i class="fas fa-arrow-down mr-2 text-gray-500"></i>Mínimo: <span class="font-medium">${minSleep} horas</span></p>
421
- <p><i class="fas fa-arrow-up mr-2 text-gray-500"></i>Máximo: <span class="font-medium">${maxSleep} horas</span></p>
422
- </div>
423
- `;
424
-
425
- // Generate recommendations
426
- let recommendations = [];
427
- let status = '';
428
-
429
- if (avgSleep < 6) {
430
- status = '<p class="mt-3 font-medium text-red-600"><i class="fas fa-exclamation-triangle mr-2"></i>Necesitas mejorar tu descanso</p>';
431
- recommendations = [
432
- "Establece hora fija para dormir",
433
- "Evita pantallas 1 hora antes de dormir",
434
- "Consume té de manzanilla por las noches"
435
- ];
436
- } else if (avgSleep < 7) {
437
- status = '<p class="mt-3 font-medium text-yellow-600"><i class="fas fa-thumbs-up mr-2"></i>Buen descanso, pero puedes mejorar</p>';
438
- recommendations = [
439
- "Practica meditación antes de dormir",
440
- "Mantén tu habitación oscura y fresca"
441
- ];
442
  } else {
443
- status = '<p class="mt-3 font-medium text-green-600"><i class="fas fa-star mr-2"></i>Excelente calidad de sueño</p>';
444
- recommendations = [
445
- "Continúa con tus buenos hábitos",
446
- "Considera siestas de 20 minutos si necesitas energía extra"
447
- ];
448
- }
449
-
450
- analysisDiv.innerHTML = analysis + status;
451
-
452
- // Render recommendations
453
- let recommendationsHTML = '<div class="space-y-3">';
454
- recommendations.forEach(rec => {
455
- recommendationsHTML += `
456
- <div class="recommendation-item p-3 bg-green-50 rounded-md border-l-4 border-green-500">
457
- <i class="fas fa-check-circle text-green-500 mr-2"></i> ${rec}
458
- </div>
459
- `;
460
- });
461
- recommendationsHTML += '</div>';
462
-
463
- recommendationsDiv.innerHTML = recommendationsHTML;
464
- }
465
-
466
- function renderSleepChart() {
467
- const ctx = document.getElementById('sleepChart').getContext('2d');
468
-
469
- // Sort data by date
470
- const sortedData = [...state.sleepData].sort((a, b) => new Date(a.date) - new Date(b.date));
471
-
472
- const labels = sortedData.map(entry => {
473
- const date = new Date(entry.date);
474
- return date.toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
475
- });
476
-
477
- const data = sortedData.map(entry => entry.value);
478
-
479
- // Destroy previous chart if exists
480
- if (state.chart) {
481
- state.chart.destroy();
482
  }
483
-
484
- state.chart = new Chart(ctx, {
485
- type: 'line',
486
- data: {
487
- labels: labels,
488
- datasets: [{
489
- label: 'Horas de sueño',
490
- data: data,
491
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
492
- borderColor: 'rgba(59, 130, 246, 1)',
493
- borderWidth: 2,
494
- pointBackgroundColor: 'rgba(59, 130, 246, 1)',
495
- pointRadius: 4,
496
- tension: 0.3,
497
- fill: true
498
- }]
499
- },
500
- options: {
501
- responsive: true,
502
- maintainAspectRatio: false,
503
- scales: {
504
- y: {
505
- beginAtZero: false,
506
- min: 4,
507
- max: 9,
508
- ticks: {
509
- stepSize: 1
510
- },
511
- grid: {
512
- color: 'rgba(0, 0, 0, 0.05)'
513
- }
514
- },
515
- x: {
516
- grid: {
517
- display: false
518
- }
519
- }
520
- },
521
- plugins: {
522
- legend: {
523
- display: false
524
- },
525
- tooltip: {
526
- callbacks: {
527
- label: function(context) {
528
- return `${context.parsed.y} horas`;
529
- }
530
- }
531
- }
532
- },
533
- elements: {
534
- line: {
535
- borderJoinStyle: 'round'
536
- }
537
- }
538
- }
539
- });
540
-
541
- // Add ideal sleep line
542
- const idealSleepLine = {
543
- id: 'idealSleep',
544
- afterDatasetsDraw(chart, args, options) {
545
- const { ctx, chartArea: { top, bottom, left, right, width, height }, scales: { x, y } } = chart;
546
-
547
- ctx.save();
548
- ctx.beginPath();
549
- ctx.setLineDash([5, 5]);
550
- ctx.moveTo(left, y.getPixelForValue(7));
551
- ctx.lineTo(right, y.getPixelForValue(7));
552
- ctx.lineWidth = 1;
553
- ctx.strokeStyle = '#10B981';
554
- ctx.stroke();
555
- ctx.setLineDash([]);
556
-
557
- // Draw label
558
- ctx.font = '12px sans-serif';
559
- ctx.fillStyle = '#10B981';
560
- ctx.fillText('Meta ideal (7h)', right - 100, y.getPixelForValue(7) - 5);
561
-
562
- ctx.restore();
563
- }
564
- };
565
-
566
- state.chart.options.plugins.annotation = idealSleepLine;
567
- state.chart.update();
568
- }
569
 
570
- // Geolocation Tab Functions
571
- function updateRedZonesList() {
572
- const zonesList = document.getElementById('redZonesList');
573
- zonesList.innerHTML = '';
574
-
575
- state.redZones.forEach(zone => {
576
- const icon = zone.includes('Hospital') ? 'fa-hospital' :
577
- zone.includes('Casa') ? 'fa-home' : 'fa-map-marker-alt';
578
-
579
- zonesList.innerHTML += `
580
- <div class="red-zone-item flex justify-between items-center p-2 hover:bg-red-50 rounded">
581
- <span class="text-gray-700"><i class="fas ${icon} mr-2 text-red-500"></i>${zone}</span>
582
- <button class="delete-zone text-red-500 hover:text-red-700">
583
- <i class="fas fa-trash-alt"></i>
584
- </button>
585
  </div>
586
  `;
587
- });
588
-
589
- // Update counters
590
- document.getElementById('zonesInfo').textContent = state.redZones.length;
591
- document.getElementById('zonesCheck').textContent = `${state.redZones.length} zonas sensibles definidas`;
592
- }
593
-
594
- function addRedZone() {
595
- const input = document.getElementById('newZone');
596
- const zone = input.value.trim();
597
-
598
- if (zone && !state.redZones.includes(zone)) {
599
- state.redZones.push(zone);
600
- input.value = '';
601
- updateRedZonesList();
602
- showAlert(`'${zone}' ahora está protegida. Ningún dato de ubicación será almacenado aquí.`, 'success');
603
- } else if (state.redZones.includes(zone)) {
604
- showAlert('Esta zona ya está en la lista de zonas sensibles', 'warning');
605
  }
606
- }
607
-
608
- function removeRedZone(zoneName) {
609
- state.redZones = state.redZones.filter(zone => zone !== zoneName);
610
- updateRedZonesList();
611
- showAlert(`Zona '${zoneName}' eliminada de zonas sensibles`, 'info');
612
- }
613
 
614
- function registerLocation() {
615
- const select = document.getElementById('locationSelect');
616
- const place = select.value;
617
- const resultDiv = document.getElementById('locationResult');
618
-
619
- if (state.redZones.includes(place)) {
620
- const now = new Date().toLocaleString('es-ES');
621
- resultDiv.innerHTML = `
622
- <div class="space-y-2">
623
- <p class="font-semibold text-red-600"><i class="fas fa-ban mr-2"></i>Ubicación sensible detectada: '${place}'</p>
624
- <p><i class="fas fa-trash-alt mr-2 text-gray-500"></i>Todos los datos de ubicación fueron borrados éticamente</p>
625
- <p><i class="fas fa-shield-alt mr-2 text-gray-500"></i>Protección activada: ${now}</p>
626
  </div>
627
  `;
 
 
 
 
 
 
 
628
  } else {
629
- const id = 'loc_' + Math.random().toString(36).substr(2, 8);
630
- const now = new Date().toLocaleString('es-ES');
631
- resultDiv.innerHTML = `
632
- <div class="space-y-2">
633
- <p class="font-semibold text-green-600"><i class="fas fa-map-marker-alt mr-2"></i>Ubicación registrada: '${place}'</p>
634
- <p><i class="fas fa-clock mr-2 text-gray-500"></i>Hora: ${now}</p>
635
- <p><i class="fas fa-key mr-2 text-gray-500"></i>ID seguro: ${id}</p>
636
- <p><i class="fas fa-lock mr-2 text-gray-500"></i>Datos almacenados localmente con cifrado</p>
637
- </div>
638
- `;
639
- }
640
- }
641
-
642
- // System Tab Functions
643
- function updateSystemInfo() {
644
- // Mock system info
645
- document.getElementById('osInfo').textContent = navigator.platform || 'Unknown';
646
- document.getElementById('archInfo').textContent = navigator.userAgent.match(/x86_64|Win64|WOW64/) ? '64-bit' : '32-bit';
647
-
648
- // Update time every second
649
- function updateTime() {
650
- const now = new Date();
651
- document.getElementById('timeInfo').textContent = now.toLocaleString('es-ES');
652
  }
653
- updateTime();
654
- setInterval(updateTime, 1000);
655
-
656
- document.getElementById('sleepRecords').textContent = state.sleepData.length;
657
- }
658
-
659
- function exportData() {
660
- showAlert(`
661
- <div class="space-y-2">
662
- <p><i class="fas fa-lock mr-2"></i>Todos tus datos han sido exportados con cifrado AES-256</p>
663
- <p><i class="fas fa-fingerprint mr-2"></i>La clave de descifrado es tu huella biométrica</p>
664
- <p><i class="fas fa-file-alt mr-2"></i>Archivo guardado localmente: /me_ia_ethical_export.bin</p>
665
- <p class="font-semibold text-red-600 mt-2"><i class="fas fa-exclamation-triangle mr-2"></i>Por principios éticos, este archivo NO puede ser subido a la nube</p>
666
- </div>
667
- `, 'info');
668
- }
669
 
670
- // Helper Functions
671
- // Voice Recognition Functions
672
- function setupVoiceRecognition(buttonId, callback) {
673
- const button = document.getElementById(buttonId);
674
- button.addEventListener('click', function() {
675
- const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
676
- recognition.lang = 'es-ES';
677
- recognition.interimResults = false;
678
 
679
- recognition.onstart = function() {
680
- showAlert('<i class="fas fa-microphone mr-2"></i>Escuchando... Di las horas de sueño', 'info');
681
- button.classList.add('animate-pulse');
682
- };
683
-
684
- recognition.onresult = function(event) {
685
- const transcript = event.results[0][0].transcript;
686
- const hours = parseFloat(transcript.replace(',', '.'));
687
 
688
- if (!isNaN(hours) && hours >= 0 && hours <= 24) {
689
- showAlert(`<i class="fas fa-check mr-2"></i>Registrado: ${hours} horas de sueño`, 'success');
690
- callback(hours);
691
- } else {
692
- showAlert(`No entendí las horas. Por favor di un número entre 0 y 24`, 'error');
693
- }
694
- };
695
-
696
- recognition.onerror = function(event) {
697
- showAlert(`Error de reconocimiento: ${event.error}`, 'error');
698
- };
699
-
700
- recognition.onend = function() {
701
- button.classList.remove('animate-pulse');
702
- };
703
-
704
- recognition.start();
705
- });
706
- }
707
-
708
- // Setup voice commands
709
- setupVoiceRecognition('voiceCommand', function(transcript) {
710
- showAlert(`<i class="fas fa-comment mr-2"></i>ME IA está procesando: "${transcript}"`, 'info');
711
-
712
- // Simulate ME IA response after 2 seconds
713
- setTimeout(() => {
714
- const responses = [
715
- `He procesado tu solicitud: "${transcript}"`,
716
- "Entendido, estoy trabajando en ello",
717
- "Gracias por tu consulta, la estoy analizando",
718
- "ME IA + Deepseek R1 están procesando tu petición"
719
- ];
720
- const randomResponse = responses[Math.floor(Math.random() * responses.length)];
721
- showAlert(`<i class="fas fa-robot mr-2"></i>${randomResponse}`, 'success');
722
- }, 2000);
723
  });
724
 
725
- // Setup sleep hours voice input
726
- setupVoiceRecognition('voiceSleepHours', function(hours) {
727
- document.getElementById('sleepHours').value = hours;
728
- // Auto-save after voice input
729
- setTimeout(() => {
730
- document.getElementById('saveSleepData').click();
731
- }, 500);
732
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
733
 
734
- function showAlert(message, type) {
735
- const types = {
736
- success: { bg: 'bg-green-100', text: 'text-green-800', icon: 'fa-check-circle' },
737
- error: { bg: 'bg-red-100', text: 'text-red-800', icon: 'fa-exclamation-circle' },
738
- warning: { bg: 'bg-yellow-100', text: 'text-yellow-800', icon: 'fa-exclamation-triangle' },
739
- info: { bg: 'bg-blue-100', text: 'text-blue-800', icon: 'fa-info-circle' }
740
- };
 
 
 
 
 
 
 
 
741
 
742
- const alertDiv = document.createElement('div');
743
- alertDiv.className = `fixed top-4 right-4 p-4 rounded-md shadow-lg ${types[type].bg} ${types[type].text} max-w-md z-50`;
744
- alertDiv.innerHTML = `
745
  <div class="flex items-start">
746
- <i class="fas ${types[type].icon} mt-1 mr-3"></i>
747
- <div>${message}</div>
748
- <button class="ml-4 text-gray-500 hover:text-gray-700">
749
- <i class="fas fa-times"></i>
750
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
751
  </div>
752
  `;
753
-
754
- document.body.appendChild(alertDiv);
755
-
756
- // Auto-remove after 5 seconds
757
- setTimeout(() => {
758
- alertDiv.classList.add('opacity-0', 'transition-opacity', 'duration-300');
759
- setTimeout(() => alertDiv.remove(), 300);
760
- }, 5000);
761
-
762
- // Close button
763
- alertDiv.querySelector('button').addEventListener('click', () => {
764
- alertDiv.remove();
765
- });
766
  }
767
  </script>
768
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=crazychon/me-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Wellness AI Dashboard</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
  }
13
+ .pulse-animation {
14
+ animation: pulse 2s infinite;
15
  }
16
+ @keyframes pulse {
17
+ 0% { transform: scale(1); }
18
+ 50% { transform: scale(1.05); }
19
+ 100% { transform: scale(1); }
 
 
20
  }
21
+ .card-hover:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
  }
25
+ .smooth-transition {
26
  transition: all 0.3s ease;
27
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </style>
29
  </head>
30
  <body class="bg-gray-50 font-sans">
31
+ <div class="min-h-screen flex flex-col">
32
  <!-- Header -->
33
+ <header class="gradient-bg text-white shadow-lg">
34
+ <div class="container mx-auto px-4 py-6">
35
+ <div class="flex flex-col md:flex-row justify-between items-center">
36
+ <div class="flex items-center mb-4 md:mb-0">
37
+ <i class="fas fa-brain text-3xl mr-3"></i>
38
+ <h1 class="text-2xl font-bold">Wellness AI Dashboard</h1>
39
+ </div>
40
+ <div class="flex items-center space-x-4">
41
+ <button id="connectNotionBtn" class="bg-white text-indigo-700 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 smooth-transition">
42
+ <i class="fas fa-plug mr-2"></i>Connect Notion
43
+ </button>
44
+ <div class="relative">
45
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer border-2 border-white">
46
+ <span class="absolute top-0 right-0 h-3 w-3 bg-green-400 rounded-full border-2 border-white"></span>
47
+ </div>
48
+ </div>
49
  </div>
 
 
 
 
50
  </div>
51
  </header>
52
 
53
+ <!-- Main Content -->
54
+ <main class="flex-grow container mx-auto px-4 py-8">
55
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
56
+ <!-- Left Column -->
57
+ <div class="lg:col-span-2 space-y-6">
58
+ <!-- Notion Data Card -->
59
+ <div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
60
+ <div class="p-6">
61
+ <div class="flex justify-between items-center mb-4">
62
+ <h2 class="text-xl font-semibold text-gray-800">
63
+ <i class="fas fa-database text-indigo-500 mr-2"></i>Notion Wellness Data
64
+ </h2>
65
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Live</span>
66
+ </div>
67
+ <div id="notionData" class="bg-gray-50 p-4 rounded-lg mb-4">
68
+ <div class="text-center py-8 text-gray-400">
69
+ <i class="fas fa-cloud-download-alt text-3xl mb-2"></i>
70
+ <p>Connect to Notion to load your wellness data</p>
71
+ </div>
72
+ </div>
73
+ <div class="flex justify-between items-center">
74
+ <div class="text-sm text-gray-500">
75
+ Last synced: <span id="lastSynced">Never</span>
76
+ </div>
77
+ <button id="refreshDataBtn" class="text-indigo-600 hover:text-indigo-800 smooth-transition">
78
+ <i class="fas fa-sync-alt mr-1"></i>Refresh
 
 
 
 
79
  </button>
80
  </div>
81
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </div>
 
 
 
83
 
84
+ <!-- AI Analysis Card -->
85
+ <div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
 
 
 
 
 
 
 
 
 
86
  <div class="p-6">
87
+ <div class="flex justify-between items-center mb-4">
88
+ <h2 class="text-xl font-semibold text-gray-800">
89
+ <i class="fas fa-robot text-purple-500 mr-2"></i>AI Wellness Analysis
90
+ </h2>
91
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">DeepSeek-R1</span>
92
+ </div>
93
+ <div id="aiAnalysis" class="space-y-4">
94
+ <div class="text-center py-8 text-gray-400">
95
+ <i class="fas fa-magic text-3xl mb-2"></i>
96
+ <p>Analyze your data to get personalized insights</p>
 
 
97
  </div>
98
  </div>
99
+ <div class="mt-6">
100
+ <button id="analyzeBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg smooth-transition pulse-animation">
101
+ <i class="fas fa-bolt mr-2"></i>Run Analysis
 
 
102
  </button>
103
  </div>
 
 
 
104
  </div>
105
  </div>
106
  </div>
107
 
108
+ <!-- Right Column -->
109
+ <div class="space-y-6">
110
+ <!-- Wellness Summary -->
111
+ <div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
112
+ <div class="p-6">
113
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">
114
+ <i class="fas fa-heartbeat text-red-500 mr-2"></i>Wellness Summary
115
  </h2>
116
+ <div class="space-y-4">
117
+ <div class="flex items-center">
118
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
119
+ <i class="fas fa-bed text-red-500"></i>
120
+ </div>
121
+ <div>
122
+ <p class="text-sm text-gray-500">Sleep Quality</p>
123
+ <p class="font-medium" id="sleepQuality">--</p>
124
+ </div>
125
+ </div>
126
+ <div class="flex items-center">
127
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
128
+ <i class="fas fa-walking text-blue-500"></i>
129
+ </div>
130
+ <div>
131
+ <p class="text-sm text-gray-500">Activity Level</p>
132
+ <p class="font-medium" id="activityLevel">--</p>
133
+ </div>
134
+ </div>
135
+ <div class="flex items-center">
136
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
137
+ <i class="fas fa-utensils text-green-500"></i>
138
+ </div>
139
+ <div>
140
+ <p class="text-sm text-gray-500">Nutrition</p>
141
+ <p class="font-medium" id="nutrition">--</p>
142
+ </div>
143
+ </div>
144
+ <div class="flex items-center">
145
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
146
+ <i class="fas fa-brain text-yellow-500"></i>
147
+ </div>
148
+ <div>
149
+ <p class="text-sm text-gray-500">Mental Health</p>
150
+ <p class="font-medium" id="mentalHealth">--</p>
151
+ </div>
152
+ </div>
153
+ </div>
154
  </div>
155
+ </div>
156
+
157
+ <!-- Action Items -->
158
+ <div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
159
  <div class="p-6">
160
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">
161
+ <i class="fas fa-tasks text-emerald-500 mr-2"></i>Recommended Actions
162
+ </h2>
163
+ <div id="actionItems" class="space-y-3">
164
+ <div class="text-center py-8 text-gray-400">
165
+ <i class="fas fa-lightbulb text-3xl mb-2"></i>
166
+ <p>Get personalized recommendations after analysis</p>
167
+ </div>
 
 
168
  </div>
169
+ <div class="mt-4">
170
+ <button id="updateNotionBtn" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-3 px-4 rounded-lg smooth-transition">
171
+ <i class="fas fa-save mr-2"></i>Update Notion
172
+ </button>
 
173
  </div>
174
  </div>
175
  </div>
 
 
 
176
 
177
+ <!-- Status -->
178
+ <div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
179
+ <div class="p-6">
180
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">
181
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>System Status
182
+ </h2>
183
+ <div class="space-y-3">
184
+ <div class="flex justify-between items-center">
185
+ <span class="text-gray-600">Notion Connection</span>
186
+ <span id="notionStatus" class="px-2 py-1 text-xs rounded-full bg-gray-200 text-gray-800">Disconnected</span>
187
+ </div>
188
+ <div class="flex justify-between items-center">
189
+ <span class="text-gray-600">API Credits</span>
190
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">100 remaining</span>
191
+ </div>
192
+ <div class="flex justify-between items-center">
193
+ <span class="text-gray-600">Last Analysis</span>
194
+ <span id="lastAnalysis" class="px-2 py-1 text-xs rounded-full bg-gray-200 text-gray-800">Never</span>
195
+ </div>
196
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
197
  </div>
198
  </div>
199
  </div>
200
  </div>
201
+ </main>
202
 
203
+ <!-- Footer -->
204
+ <footer class="bg-gray-800 text-white py-6">
205
+ <div class="container mx-auto px-4">
206
+ <div class="flex flex-col md:flex-row justify-between items-center">
207
+ <div class="mb-4 md:mb-0">
208
+ <p class="text-sm">&copy; 2023 Wellness AI Dashboard. All rights reserved.</p>
209
+ </div>
210
+ <div class="flex space-x-4">
211
+ <a href="#" class="text-gray-300 hover:text-white smooth-transition">
212
+ <i class="fab fa-github"></i>
213
+ </a>
214
+ <a href="#" class="text-gray-300 hover:text-white smooth-transition">
215
+ <i class="fab fa-twitter"></i>
216
+ </a>
217
+ <a href="#" class="text-gray-300 hover:text-white smooth-transition">
218
+ <i class="fab fa-discord"></i>
219
+ </a>
 
 
 
 
 
 
 
 
 
 
 
220
  </div>
221
  </div>
222
  </div>
223
+ </footer>
224
+ </div>
225
 
226
+ <!-- Notion Connection Modal -->
227
+ <div id="notionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
228
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
229
+ <div class="flex justify-between items-center mb-4">
230
+ <h3 class="text-xl font-semibold">Connect to Notion</h3>
231
+ <button id="closeModalBtn" class="text-gray-400 hover:text-gray-600">
232
+ <i class="fas fa-times"></i>
233
+ </button>
234
+ </div>
235
+ <div class="mb-6">
236
+ <p class="text-gray-600 mb-4">To connect your Notion workspace, please enter your API key:</p>
237
+ <input type="password" id="notionApiKey" placeholder="Enter your Notion API key" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
238
+ <p class="text-xs text-gray-500 mt-2">We don't store your API key on our servers.</p>
239
+ </div>
240
+ <div class="flex justify-end space-x-3">
241
+ <button id="cancelConnectBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 smooth-transition">Cancel</button>
242
+ <button id="confirmConnectBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 smooth-transition">Connect</button>
243
  </div>
244
  </div>
245
  </div>
246
 
247
  <script>
248
+ // DOM Elements
249
+ const connectNotionBtn = document.getElementById('connectNotionBtn');
250
+ const refreshDataBtn = document.getElementById('refreshDataBtn');
251
+ const analyzeBtn = document.getElementById('analyzeBtn');
252
+ const updateNotionBtn = document.getElementById('updateNotionBtn');
253
+ const notionModal = document.getElementById('notionModal');
254
+ const closeModalBtn = document.getElementById('closeModalBtn');
255
+ const cancelConnectBtn = document.getElementById('cancelConnectBtn');
256
+ const confirmConnectBtn = document.getElementById('confirmConnectBtn');
257
+ const notionApiKey = document.getElementById('notionApiKey');
258
+ const notionStatus = document.getElementById('notionStatus');
259
+ const lastSynced = document.getElementById('lastSynced');
260
+ const lastAnalysis = document.getElementById('lastAnalysis');
261
+ const notionData = document.getElementById('notionData');
262
+ const aiAnalysis = document.getElementById('aiAnalysis');
263
+ const actionItems = document.getElementById('actionItems');
264
 
265
+ // Mock data for demonstration
266
+ const mockNotionData = {
267
+ sleep: {
268
+ average_hours: 6.5,
269
+ quality: "Fair",
270
+ consistency: "Needs improvement"
271
+ },
272
+ activity: {
273
+ steps: 7500,
274
+ workouts: 3,
275
+ intensity: "Moderate"
276
+ },
277
+ nutrition: {
278
+ hydration: "Good",
279
+ balanced_meals: 70,
280
+ processed_foods: "Occasional"
281
+ },
282
+ mental_health: {
283
+ stress_level: "Medium",
284
+ mindfulness_minutes: 10,
285
+ mood: "Neutral"
286
  }
287
+ };
288
 
289
+ const mockAnalysis = {
290
+ patron: "Irregular sleep patterns affecting energy levels",
291
+ accion: "Establish consistent bedtime routine, limit screen time before bed",
292
+ pronostico: "Expected 20% improvement in daily energy with better sleep habits"
293
+ };
294
+
295
+ // Event Listeners
296
+ connectNotionBtn.addEventListener('click', () => {
297
+ notionModal.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
298
  });
299
 
300
+ closeModalBtn.addEventListener('click', () => {
301
+ notionModal.classList.add('hidden');
302
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
303
 
304
+ cancelConnectBtn.addEventListener('click', () => {
305
+ notionModal.classList.add('hidden');
306
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
307
 
308
+ confirmConnectBtn.addEventListener('click', () => {
309
+ if (notionApiKey.value.trim() !== '') {
310
+ // In a real app, you would validate the API key here
311
+ notionStatus.textContent = "Connected";
312
+ notionStatus.classList.remove('bg-gray-200', 'text-gray-800');
313
+ notionStatus.classList.add('bg-green-100', 'text-green-800');
314
+ connectNotionBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Connected';
315
+ connectNotionBtn.classList.remove('bg-white', 'text-indigo-700');
316
+ connectNotionBtn.classList.add('bg-green-100', 'text-green-700');
317
+ notionModal.classList.add('hidden');
318
+
319
+ // Update last synced time
320
+ const now = new Date();
321
+ lastSynced.textContent = now.toLocaleString();
322
+
323
+ // Load mock data for demonstration
324
+ loadNotionData();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
325
  } else {
326
+ alert('Please enter a valid Notion API key');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
327
  }
328
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
329
 
330
+ refreshDataBtn.addEventListener('click', () => {
331
+ if (notionStatus.textContent === "Connected") {
332
+ // Show loading state
333
+ notionData.innerHTML = `
334
+ <div class="text-center py-8">
335
+ <i class="fas fa-circle-notch fa-spin text-3xl text-indigo-500 mb-2"></i>
336
+ <p>Refreshing data from Notion...</p>
 
 
 
 
 
 
 
 
337
  </div>
338
  `;
339
+
340
+ // Simulate API call delay
341
+ setTimeout(() => {
342
+ loadNotionData();
343
+ const now = new Date();
344
+ lastSynced.textContent = now.toLocaleString();
345
+ }, 1500);
346
+ } else {
347
+ alert('Please connect to Notion first');
 
 
 
 
 
 
 
 
 
348
  }
349
+ });
 
 
 
 
 
 
350
 
351
+ analyzeBtn.addEventListener('click', () => {
352
+ if (notionStatus.textContent === "Connected") {
353
+ // Show loading state
354
+ aiAnalysis.innerHTML = `
355
+ <div class="text-center py-8">
356
+ <i class="fas fa-circle-notch fa-spin text-3xl text-purple-500 mb-2"></i>
357
+ <p>Analyzing your wellness data with AI...</p>
 
 
 
 
 
358
  </div>
359
  `;
360
+
361
+ // Simulate API call delay
362
+ setTimeout(() => {
363
+ displayAnalysis();
364
+ const now = new Date();
365
+ lastAnalysis.textContent = now.toLocaleString();
366
+ }, 2000);
367
  } else {
368
+ alert('Please connect to Notion and load data first');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  }
370
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
371
 
372
+ updateNotionBtn.addEventListener('click', () => {
373
+ if (aiAnalysis.querySelector('.text-center') === null) {
374
+ // Show loading state
375
+ const originalText = updateNotionBtn.innerHTML;
376
+ updateNotionBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i>Updating...';
377
+ updateNotionBtn.disabled = true;
 
 
378
 
379
+ // Simulate API call delay
380
+ setTimeout(() => {
381
+ updateNotionBtn.innerHTML = originalText;
382
+ updateNotionBtn.disabled = false;
 
 
 
 
383
 
384
+ // Show success notification
385
+ const notification = document.createElement('div');
386
+ notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
387
+ notification.innerHTML = `
388
+ <i class="fas fa-check-circle mr-2"></i>
389
+ <span>Successfully updated Notion!</span>
390
+ `;
391
+ document.body.appendChild(notification);
392
+
393
+ // Remove notification after 3 seconds
394
+ setTimeout(() => {
395
+ notification.classList.add('opacity-0', 'translate-y-2');
396
+ setTimeout(() => {
397
+ document.body.removeChild(notification);
398
+ }, 300);
399
+ }, 3000);
400
+ }, 1500);
401
+ } else {
402
+ alert('Please analyze your data first');
403
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
404
  });
405
 
406
+ // Functions
407
+ function loadNotionData() {
408
+ notionData.innerHTML = `
409
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
410
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
411
+ <h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-bed text-indigo-500 mr-1"></i> Sleep</h3>
412
+ <p><span class="text-gray-500">Hours:</span> ${mockNotionData.sleep.average_hours}h</p>
413
+ <p><span class="text-gray-500">Quality:</span> ${mockNotionData.sleep.quality}</p>
414
+ <p><span class="text-gray-500">Consistency:</span> ${mockNotionData.sleep.consistency}</p>
415
+ </div>
416
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
417
+ <h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-walking text-blue-500 mr-1"></i> Activity</h3>
418
+ <p><span class="text-gray-500">Steps:</span> ${mockNotionData.activity.steps.toLocaleString()}</p>
419
+ <p><span class="text-gray-500">Workouts:</span> ${mockNotionData.activity.workouts}/week</p>
420
+ <p><span class="text-gray-500">Intensity:</span> ${mockNotionData.activity.intensity}</p>
421
+ </div>
422
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
423
+ <h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-utensils text-green-500 mr-1"></i> Nutrition</h3>
424
+ <p><span class="text-gray-500">Hydration:</span> ${mockNotionData.nutrition.hydration}</p>
425
+ <p><span class="text-gray-500">Balanced meals:</span> ${mockNotionData.nutrition.balanced_meals}%</p>
426
+ <p><span class="text-gray-500">Processed foods:</span> ${mockNotionData.nutrition.processed_foods}</p>
427
+ </div>
428
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
429
+ <h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-brain text-yellow-500 mr-1"></i> Mental Health</h3>
430
+ <p><span class="text-gray-500">Stress:</span> ${mockNotionData.mental_health.stress_level}</p>
431
+ <p><span class="text-gray-500">Mindfulness:</span> ${mockNotionData.mental_health.mindfulness_minutes} min/day</p>
432
+ <p><span class="text-gray-500">Mood:</span> ${mockNotionData.mental_health.mood}</p>
433
+ </div>
434
+ </div>
435
+ `;
436
+
437
+ // Update summary cards
438
+ document.getElementById('sleepQuality').textContent = mockNotionData.sleep.quality;
439
+ document.getElementById('activityLevel').textContent = mockNotionData.activity.intensity;
440
+ document.getElementById('nutrition').textContent = mockNotionData.nutrition.hydration;
441
+ document.getElementById('mentalHealth').textContent = mockNotionData.mental_health.stress_level;
442
+ }
443
 
444
+ function displayAnalysis() {
445
+ aiAnalysis.innerHTML = `
446
+ <div class="bg-purple-50 border-l-4 border-purple-500 p-4">
447
+ <h3 class="font-medium text-purple-800 mb-1">Identified Pattern</h3>
448
+ <p class="text-gray-700">${mockAnalysis.patron}</p>
449
+ </div>
450
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
451
+ <h3 class="font-medium text-blue-800 mb-1">Recommended Action</h3>
452
+ <p class="text-gray-700">${mockAnalysis.accion}</p>
453
+ </div>
454
+ <div class="bg-green-50 border-l-4 border-green-500 p-4">
455
+ <h3 class="font-medium text-green-800 mb-1">Expected Outcome</h3>
456
+ <p class="text-gray-700">${mockAnalysis.pronostico}</p>
457
+ </div>
458
+ `;
459
 
460
+ actionItems.innerHTML = `
 
 
461
  <div class="flex items-start">
462
+ <div class="flex-shrink-0 mt-1">
463
+ <div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
464
+ <i class="fas fa-check text-emerald-500 text-xs"></i>
465
+ </div>
466
+ </div>
467
+ <div class="ml-3">
468
+ <p class="text-sm font-medium text-gray-700">Set consistent bedtime (10:30pm-6:30am)</p>
469
+ </div>
470
+ </div>
471
+ <div class="flex items-start">
472
+ <div class="flex-shrink-0 mt-1">
473
+ <div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
474
+ <i class="fas fa-check text-emerald-500 text-xs"></i>
475
+ </div>
476
+ </div>
477
+ <div class="ml-3">
478
+ <p class="text-sm font-medium text-gray-700">Add 10-minute evening meditation</p>
479
+ </div>
480
+ </div>
481
+ <div class="flex items-start">
482
+ <div class="flex-shrink-0 mt-1">
483
+ <div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
484
+ <i class="fas fa-check text-emerald-500 text-xs"></i>
485
+ </div>
486
+ </div>
487
+ <div class="ml-3">
488
+ <p class="text-sm font-medium text-gray-700">Increase water intake to 2.5L daily</p>
489
+ </div>
490
+ </div>
491
+ <div class="flex items-start">
492
+ <div class="flex-shrink-0 mt-1">
493
+ <div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
494
+ <i class="fas fa-check text-emerald-500 text-xs"></i>
495
+ </div>
496
+ </div>
497
+ <div class="ml-3">
498
+ <p class="text-sm font-medium text-gray-700">Add 2 high-intensity workouts weekly</p>
499
+ </div>
500
  </div>
501
  `;
 
 
 
 
 
 
 
 
 
 
 
 
 
502
  }
503
  </script>
504
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=crazychon/me-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>