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
Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione dal design minimalista e piatto con una combinazione di colori retrò/vintage, caratterizzato da un layout semplice, reattività completa e supporto per la modalità oscura per blog/siti di contenuti.
Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione reattivo con uno stile di progettazione 3D, supporto per il tema scuro e l'incorporazione di immagini segnaposto.
Componente di avviso timeout sessione
Un componente di avviso di timeout sessione semplice, reattivo e monocromatico con effetti neon/bagliore, progettato per piattaforme di istruzione/apprendimento. Include il supporto per la modalità oscura.