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.
Código HTML
<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 dark:bg-black dark:bg-opacity-80">
<div class="w-full max-w-md overflow-hidden rounded-lg bg-gray-800 shadow-2xl dark:bg-gray-900 border border-blue-700 dark:border-blue-900">
<div class="bg-blue-700 p-4 text-white dark:bg-blue-900">
<h3 class="text-xl font-bold">Session Expiring Soon!</h3>
</div>
<div class="p-6 text-gray-200 dark:text-gray-300">
<p class="mb-4 leading-relaxed">
Your session is about to expire due to inactivity. To continue planning your adventure, please choose an option below.
</p>
<div class="mb-6 flex items-center justify-center space-x-3 text-sm">
<svg class="h-6 w-6 text-yellow-400" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
<span class="font-semibold text-yellow-200">Remaining time:</span>
<span class="font-mono text-lg text-yellow-100">01:59</span>
</div>
<p class="mb-6 text-center text-sm italic text-gray-400 dark:text-gray-500">
(Your data will be saved if you extend your session.)
</p>
<div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<button class="flex-1 rounded-md bg-blue-600 px-6 py-3 text-lg font-semibold text-white shadow-lg transition-colors duration-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">
Extend Session
</button>
<button class="flex-1 rounded-md border border-gray-600 px-6 py-3 text-lg font-semibold text-gray-300 shadow-md transition-colors duration-200 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200">
Log Out
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de alerta de tiempo de espera de sesión - Neumorphism Candy
Un componente de alerta de tiempo de espera de sesión receptivo con un estilo de diseño de neumorfismo, que utiliza una combinación de colores dulces/dulces. Las características incluyen soporte para modo oscuro y un temporizador de cuenta regresiva para marcas de moda / belleza.
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.
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.