Componente di avviso timeout sessione
Un componente di avviso di timeout sessione reattivo progettato con lo stile glassmorphism e adatto per temi scuri. Presenta una combinazione di colori pastello, elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e alcune funzioni interattive come un timer per il conto alla rovescia e pulsanti di azione.
Codice 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>Componenti correlati
Avviso di timeout sessione
Un componente di avviso di timeout della sessione ispirato al 3D con un
Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione complesso e reattivo con un design monospace/sviluppatore, uno schema in bianco e nero e un colore di accento brillante, adatto per piattaforme educative. Include il supporto per la modalità oscura e un conto alla rovescia.
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.