Componentes Alerta de tiempo de espera de sesión Componente de alerta de tiempo de espera de sesión

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.

Vista previa

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

Alerta de tiempo de espera de sesión Art Deco

Un componente de alerta de tiempo de espera de sesión elegante y receptivo con un diseño inspirado en Art Deco, con patrones geométricos, neutros cálidos y soporte para modo oscuro, adecuado para plataformas de entretenimiento.

Abrir