diff --git a/templates/index.html b/templates/index.html index d776989..b7b5d73 100644 --- a/templates/index.html +++ b/templates/index.html @@ -676,6 +676,8 @@ .chat-input-container { padding: 0.75rem; gap: 0.5rem; } .vnc-link { color: var(--accent); font-size: 0.75rem; text-decoration: none; display: flex; align-items: center; gap: 0.25rem; } .vnc-link:hover { text-decoration: underline; } + @keyframes blink-red { 0% { background-color: var(--danger); box-shadow: 0 0 0px var(--danger); } 50% { background-color: #ff4d4d; box-shadow: 0 0 15px #ff4d4d; } 100% { background-color: var(--danger); box-shadow: 0 0 0px var(--danger); } } + .vnc-active-blink { animation: blink-red 2s infinite ease-in-out !important; color: white !important; } @@ -1002,10 +1004,14 @@ const lnk = document.getElementById('vnc-link'); if (data.vnc_status === 'on') { txt.textContent = 'Desligar VNC'; - btn.classList.add('btn-success'); + btn.classList.add('vnc-active-blink'); + btn.classList.add('btn-danger'); + btn.classList.remove('btn-success'); if (lnk) lnk.classList.remove('hidden'); } else { txt.textContent = 'Ligar VNC'; + btn.classList.remove('vnc-active-blink'); + btn.classList.remove('btn-danger'); btn.classList.remove('btn-success'); if (lnk) lnk.classList.add('hidden'); }