Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo diseñado con estilo glassmorphism y adecuado para temas oscuros. Cuenta con una combinación de colores pastel, elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y algunas funciones interactivas como un temporizador de cuenta regresiva y botones de acción.
Código HTML
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
<div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
<div class="flex justify-around mt-4">
<button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
<button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</button>
</div>
</div>
</div>Componentes relacionados
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 - Tema Art Deco Candy
Un componente de alerta de tiempo de espera de sesión simple y receptivo con un diseño inspirado en Art Deco, que utiliza colores dulces brillantes. Optimizado para sitios de documentación/wiki, con soporte para modo oscuro.
Componente de alerta de tiempo de espera de sesión
Un componente complejo de alerta de tiempo de espera de sesión de estilo neumórfico para comercio electrónico, con un esquema de color monocromático y un diseño receptivo con soporte para modo oscuro.