Spaces:

Cristobal299
/

IAweb

Running

App Files Files Community

Tu Nombre commited on May 22

Commit

7c7779c

1 Parent(s): 683e056

Actualización: Cambio a modelo Llama 3.1 8B

Browse files

Files changed (1) hide show

familiar.html +468 -0

familiar.html ADDED Viewed

	@@ -0,0 +1,468 @@

+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Monitor Familiar</title>
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@300;600;800&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #030a0e;
+    --panel: #0a1a22;
+    --border: #0e3a50;
+    --cyan: #00e5ff;
+    --green: #00ff88;
+    --red: #ff2244;
+    --yellow: #ffcc00;
+    --text: #c8e8f0;
+    --mono: 'Share Tech Mono', monospace;
+    --display: 'Exo 2', sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--display);
+    min-height: 100vh;
+  }
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(ellipse at 20% 50%, rgba(0,229,255,0.04) 0%, transparent 60%);
+    pointer-events: none;
+    z-index: 0;
+  }
+  .grid-bg {
+    position: fixed;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
+    background-size: 40px 40px;
+    pointer-events: none;
+    z-index: 0;
+  }
+  .container {
+    position: relative;
+    z-index: 1;
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 16px;
+  }
+  .header {
+    text-align: center;
+    padding: 20px 0 16px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 16px;
+  }
+  .header h1 {
+    font-size: 1.4rem;
+    font-weight: 800;
+    letter-spacing: 0.15em;
+    color: var(--cyan);
+    text-shadow: 0 0 20px rgba(0,229,255,0.5);
+    text-transform: uppercase;
+  }
+  .header p {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    color: #4a7a8a;
+    margin-top: 4px;
+    letter-spacing: 0.1em;
+  }
+  /* Nombre paciente */
+  .nombre-paciente {
+    text-align: center;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--cyan);
+    margin-bottom: 14px;
+    font-family: var(--mono);
+    letter-spacing: 0.1em;
+  }
+  /* Estado principal */
+  .estado-box {
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 14px;
+    background: var(--panel);
+    text-align: center;
+    transition: all 0.3s;
+  }
+  .estado-box.normal  { border-color: var(--green); box-shadow: 0 0 20px rgba(0,255,136,0.15); }
+  .estado-box.critico { border-color: var(--red);   box-shadow: 0 0 40px rgba(255,34,68,0.4); animation: pulseRed 0.8s infinite; }
+  .estado-box.sin_datos { border-color: var(--border); }
+  @keyframes pulseRed {
+    0%, 100% { box-shadow: 0 0 20px rgba(255,34,68,0.3); }
+    50%       { box-shadow: 0 0 60px rgba(255,34,68,0.7); }
+  }
+  .estado-label {
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    letter-spacing: 0.2em;
+    color: #4a7a8a;
+    margin-bottom: 8px;
+  }
+  .estado-valor {
+    font-size: 2.2rem;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .estado-valor.normal   { color: var(--green); text-shadow: 0 0 15px rgba(0,255,136,0.5); }
+  .estado-valor.critico  { color: var(--red);   text-shadow: 0 0 20px rgba(255,34,68,0.8); }
+  .estado-valor.sin_datos { color: #4a7a8a; }
+  .motivo-texto {
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    color: var(--yellow);
+    margin-top: 10px;
+    min-height: 18px;
+    line-height: 1.4;
+  }
+  /* Constantes */
+  .constantes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+  .constante-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 14px;
+    text-align: center;
+  }
+  .constante-label {
+    font-family: var(--mono);
+    font-size: 0.55rem;
+    color: #4a7a8a;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+  }
+  .constante-valor {
+    font-family: var(--mono);
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--cyan);
+  }
+  .constante-unidad {
+    font-size: 0.65rem;
+    color: #4a7a8a;
+    margin-left: 2px;
+  }
+  /* Sonido */
+  .sonido-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 14px;
+    margin-bottom: 14px;
+  }
+  .sonido-label {
+    font-family: var(--mono);
+    font-size: 0.55rem;
+    color: #4a7a8a;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .sonido-texto {
+    font-family: var(--mono);
+    font-size: 0.8rem;
+    color: var(--text);
+  }
+  /* Actualización */
+  .actualizacion {
+    text-align: center;
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    color: #4a7a8a;
+    margin-bottom: 14px;
+  }
+  .punto-vivo {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: var(--green);
+    border-radius: 50%;
+    margin-right: 6px;
+    animation: blink 1.5s infinite;
+    vertical-align: middle;
+  }
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.2; }
+  }
+  /* Botón ir a vigilante */
+  .btn-vigilante {
+    display: block;
+    width: 100%;
+    padding: 14px;
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: #4a7a8a;
+    font-family: var(--display);
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    margin-bottom: 14px;
+    transition: all 0.2s;
+  }
+  .btn-vigilante:hover { border-color: var(--cyan); color: var(--cyan); }
+  /* Alarma overlay */
+  .alarma-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(255,34,68,0.15);
+    z-index: 100;
+    backdrop-filter: blur(2px);
+    animation: flashRed 0.5s infinite;
+    align-items: center;
+    justify-content: center;
+  }
+  .alarma-overlay.activa { display: flex; }
+  @keyframes flashRed {
+    0%, 100% { background: rgba(255,34,68,0.1); }
+    50%       { background: rgba(255,34,68,0.3); }
+  }
+  .alarma-card {
+    background: #1a0508;
+    border: 2px solid var(--red);
+    border-radius: 12px;
+    padding: 30px;
+    text-align: center;
+    max-width: 300px;
+    box-shadow: 0 0 60px rgba(255,34,68,0.5);
+  }
+  .alarma-icono  { font-size: 3rem; margin-bottom: 10px; }
+  .alarma-titulo {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--red);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+  }
+  .alarma-motivo {
+    font-family: var(--mono);
+    font-size: 0.8rem;
+    color: var(--text);
+    margin-bottom: 20px;
+    line-height: 1.5;
+  }
+  .btn-silenciar {
+    background: var(--red);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 24px;
+    font-family: var(--display);
+    font-weight: 600;
+    font-size: 0.85rem;
+    cursor: pointer;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+</style>
+</head>
+<body>
+<div class="grid-bg"></div>
+<div class="alarma-overlay" id="alarmaOverlay">
+  <div class="alarma-card">
+    <div class="alarma-icono">🚨</div>
+    <div class="alarma-titulo">¡ALERTA CRÍTICA!</div>
+    <div class="alarma-motivo" id="alarmaMotivo"></div>
+    <button class="btn-silenciar" onclick="silenciarAlarma()">SILENCIAR</button>
+  </div>
+</div>
+<div class="container">
+  <div class="header">
+    <h1>👨‍👩‍👧 Monitor Familiar</h1>
+    <p>VISTA DEL CUIDADOR · ACTUALIZACIÓN EN TIEMPO REAL</p>
+  </div>
+  <div class="nombre-paciente" id="nombrePaciente">── Esperando datos ──</div>
+  <div class="estado-box sin_datos" id="estadoBox">
+    <div class="estado-label">// ESTADO DEL PACIENTE</div>
+    <div class="estado-valor sin_datos" id="estadoValor">SIN DATOS</div>
+    <div class="motivo-texto" id="motivoTexto"></div>
+  </div>
+  <div class="constantes">
+    <div class="constante-card">
+      <div class="constante-label">// Pulso</div>
+      <div class="constante-valor" id="pulsoValor">--<span class="constante-unidad">BPM</span></div>
+    </div>
+    <div class="constante-card">
+      <div class="constante-label">// Oxígeno</div>
+      <div class="constante-valor" id="oxigenoValor">--<span class="constante-unidad">%</span></div>
+    </div>
+  </div>
+  <div class="sonido-card">
+    <div class="sonido-label">// Sonido ambiente</div>
+    <div class="sonido-texto" id="sonidoTexto">Sin datos</div>
+  </div>
+  <div class="actualizacion">
+    <span class="punto-vivo"></span>
+    <span id="ultimaActualizacion">Conectando...</span>
+  </div>
+  <a href="/app" class="btn-vigilante">⚕ Ir a pantalla de vigilancia</a>
+</div>
+<script>
+  const BACKEND = "https://cristobal299-iaweb.hf.space/estado";
+  let alarmaActiva = false;
+  let ultimoEstado = "";
+  async function actualizarDatos() {
+    try {
+      const resp = await fetch(BACKEND);
+      const data = await resp.json();
+      // Nombre
+      document.getElementById('nombrePaciente').textContent =
+        '👤 ' + (data.nombre || 'Paciente');
+      // Pulso y oxígeno
+      document.getElementById('pulsoValor').innerHTML =
+        (data.pulso || '--') + '<span class="constante-unidad">BPM</span>';
+      document.getElementById('oxigenoValor').innerHTML =
+        (data.oxigeno || '--') + '<span class="constante-unidad">%</span>';
+      // Sonido
+      document.getElementById('sonidoTexto').textContent =
+        data.sonido || 'Sin datos';
+      // Última actualización
+      document.getElementById('ultimaActualizacion').textContent =
+        'Última actualización: ' + (data.ultima_actualizacion || '--');
+      // Estado
+      const estado = (data.estado || 'SIN_DATOS').toUpperCase();
+      const box = document.getElementById('estadoBox');
+      const valor = document.getElementById('estadoValor');
+      const motivo = document.getElementById('motivoTexto');
+      if (estado === 'CRITICO') {
+        box.className = 'estado-box critico';
+        valor.className = 'estado-valor critico';
+        valor.textContent = '⚠ CRÍTICO';
+        motivo.textContent = data.motivo || '';
+        // Disparar alarma solo si es nueva
+        if (ultimoEstado !== 'CRITICO' && !alarmaActiva) {
+          dispararAlarma(data.motivo || 'Estado crítico detectado');
+        }
+      } else if (estado === 'NORMAL') {
+        box.className = 'estado-box normal';
+        valor.className = 'estado-valor normal';
+        valor.textContent = '✓ NORMAL';
+        motivo.textContent = '';
+      } else {
+        box.className = 'estado-box sin_datos';
+        valor.className = 'estado-valor sin_datos';
+        valor.textContent = 'SIN DATOS';
+        motivo.textContent = 'Inicia la vigilancia en la otra pantalla';
+      }
+      ultimoEstado = estado;
+    } catch (err) {
+      document.getElementById('ultimaActualizacion').textContent =
+        'Error de conexión — reintentando...';
+    }
+  }
+  function dispararAlarma(motivo) {
+    alarmaActiva = true;
+    document.getElementById('alarmaMotivo').textContent = motivo;
+    document.getElementById('alarmaOverlay').classList.add('activa');
+    try {
+      const ctx = new AudioContext();
+      function beep(freq, start, dur) {
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.frequency.value = freq;
+        osc.type = 'square';
+        gain.gain.setValueAtTime(0.3, ctx.currentTime + start);
+        gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + start + dur);
+        osc.start(ctx.currentTime + start);
+        osc.stop(ctx.currentTime + start + dur);
+      }
+      for (let i = 0; i < 8; i++) {
+        beep(880, i * 0.4, 0.3);
+        beep(660, i * 0.4 + 0.2, 0.15);
+      }
+    } catch(e) {}
+  }
+  function silenciarAlarma() {
+    alarmaActiva = false;
+    document.getElementById('alarmaOverlay').classList.remove('activa');
+  }
+  // Actualizar cada 5 segundos
+  actualizarDatos();
+  setInterval(actualizarDatos, 5000);
+</script>
+</body>
+</html>