Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione che attiva un'animazione coinvolgente. Presenta un design reattivo, adatto per dashboard con una combinazione di colori pastello e supporto per temi scuri. Include elementi interattivi, che consentono agli utenti di estendere la sessione o di disconnettersi.
Codice HTML
<div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
<div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
<div class="flex justify-around mt-4">
<button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
<button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
</div>
</div>
<div class="absolute bottom-2 right-2">
<img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
</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 della sessione in stile brutalista, vivace e reattivo per le piattaforme di marketplace, che supporta la modalità oscura.
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.