Componente di avviso timeout sessione
Un componente di avviso di timeout sessione reattivo progettato per l'e-commerce con animazioni accattivanti e un tema scuro. È dotato di un messaggio di avviso, un timer per il conto alla rovescia e opzioni per estendere la sessione o disconnettersi.
Codice 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>Componenti correlati
Avviso di timeout sessione Art Deco
Un componente di avviso di timeout sessione elegante e reattivo con un design ispirato all'Art Déco, con motivi geometrici, neutri caldi e supporto per la modalità oscura, adatto per piattaforme di intrattenimento.
Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione reattivo progettato per i siti Web di viaggi/turismo, dotato di un'interfaccia utente in modalità scura con toni blu aziendali. Fornisce una comunicazione chiara sulla scadenza della sessione e offre opzioni per estendere o disconnettersi.
Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione semplice, pulito e professionale progettato per le piattaforme di lavoro/carriera. Utilizza una combinazione di colori analoga e supporta la modalità scura.