diff --git a/modules/turnero/views/display_global.php b/modules/turnero/views/display_global.php index 7905a5f..9d8bb53 100644 --- a/modules/turnero/views/display_global.php +++ b/modules/turnero/views/display_global.php @@ -135,6 +135,29 @@ $_hasVideo = (bool)$_tvVideo; color: var(--brand); transition: color .3s; font-variant-numeric: tabular-nums; + position: relative; + z-index: 1; + } + .pulse-ring { + position: absolute; + top: 50%; left: 50%; + width: 90vmin; height: 90vmin; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 3px solid var(--brand); + opacity: 0; + pointer-events: none; + z-index: 0; + transition: opacity .6s ease; + } + .pulse-ring.active { + opacity: 1; + animation: pulse-ring 3s ease-in-out infinite; + } + @keyframes pulse-ring { + 0% { transform: translate(-50%, -50%) scale(.75); opacity: .15; } + 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .08; } + 100% { transform: translate(-50%, -50%) scale(.75); opacity: .15; } } .turno-activo .lugar-label { font-size: clamp(1.35rem, 3vw, 2.15rem); @@ -385,6 +408,7 @@ $_hasVideo = (bool)$_tvVideo;
+
Siguiente turno
Llamado a
@@ -548,6 +572,7 @@ function renderSnapshot(snap) { const lugEl = document.getElementById('lugar-nombre'); const pacEl = document.getElementById('pac-nombre'); const lblEl = document.getElementById('lugar-label'); + const ringEl = document.getElementById('pulse-ring'); const turnos = []; @@ -564,6 +589,7 @@ function renderSnapshot(snap) { lugEl.textContent = t.destino; pacEl.textContent = t.paciente_nombre || ''; lblEl.textContent = 'Llamado a'; + ringEl.classList.add('active'); const c = t.prioridad_color || ''; codEl.style.color = c; @@ -590,6 +616,7 @@ function renderSnapshot(snap) { lblEl.textContent = 'Llamado a'; codEl.style.color = ''; lastTurnoKey = null; + ringEl.classList.remove('active'); } // Queue