Alerta de tiempo de espera de sesión
Componente de alerta de tiempo de espera de sesión con estilo de microinteracciones, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Session Timeout</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="mt-4">
<p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically soon.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-sm font-semibold text-gray-900 dark:text-white">Time remaining:</span>
<span class="text-sm font-mono text-red-600 dark:text-red-400 animation-pulse">0:59</span>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">Cancel</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none">Extend Session</button>
</div>
</div>
</div>Componentes relacionados
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo con un diseño de arco iris degradado multicolor, adecuado para sitios web gubernamentales y de servicio público. Cuenta con soporte para modo oscuro y transiciones suaves.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo diseñado para sitios web de viajes/turismo, con una interfaz de usuario de modo oscuro con tonos azules corporativos. Proporciona una comunicación clara sobre la caducidad de la sesión y ofrece opciones para ampliar o cerrar la sesión.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión complejo y receptivo para sitios web gubernamentales/de servicios públicos, con un diseño orgánico/inspirado en la naturaleza con neutros fríos. Incluye un temporizador de cuenta regresiva, opciones para extender o cerrar sesión y soporte completo para el modo oscuro.