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 el comercio electrónico con animaciones atractivas y un tema oscuro. Cuenta con un mensaje de advertencia, un temporizador de cuenta regresiva y opciones para extender la sesión o cerrar la sesión.
Código HTML
<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-opacity-90 transition-all duration-300 ease-in-out">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mx-4 w-full max-w-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 animate-bounce">Session Timeout Warning</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6">Your session is about to expire due to inactivity.</p>
<div class="flex items-center mb-4">
<span class="text-2xl font-bold text-gray-800 dark:text-gray-200 mr-2" id="countdown">02:30</span>
<span class="text-gray-500 dark:text-gray-400">Remaining</span>
</div>
<div class="flex justify-between mt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-700">Extend Session</button>
<button class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-red-600 dark:hover:bg-red-700">Log Out</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 que desencadena una animación atractiva. Cuenta con un diseño responsivo, adecuado para tableros con un esquema de color pastel y soporte de temas oscuros. Incluye elementos interactivos, lo que permite a los usuarios ampliar su sesión o cerrar sesión.
Alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión de Material Design simple y monocromático para redes sociales, con diseño responsivo y soporte para temas oscuros.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión diseñado en un estilo brutalista con una estética cruda y audaz, alto contraste y efectos receptivos. Este componente es compatible con el tema oscuro mediante el estilo CSS de Tailwind y utiliza imágenes de marcador de posición de picsum.photos y randomuser.me.