Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione semplice, reattivo e compatibile con la modalità oscura con un'estetica industriale e silenziosa, adatto per sistemi di prenotazione e prenotazione.
Codice HTML
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-black/70 font-sans">
<div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
<!-- Header with exposed screw-like elements -->
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 border-b-2 border-gray-300 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wide">Session Timeout</h3>
<div class="flex space-x-2">
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
</div>
</div>
<!-- Content body -->
<div class="p-6 text-center">
<svg class="mx-auto mb-4 h-12 w-12 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="mb-4 text-gray-700 dark:text-gray-300">
Your session is about to expire due to inactivity.
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
Please extend your session to continue.
</p>
<div class="mt-6">
<p class="text-2xl font-bold text-gray-800 dark:text-gray-200 tabular-nums">00:59</p>
</div>
</div>
<!-- Footer with utilitarian buttons -->
<div class="flex flex-col sm:flex-row justify-end gap-3 p-4 bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-300 dark:border-gray-700">
<button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-300 dark:bg-gray-600 rounded-md border-2 border-gray-400 dark:border-gray-500 hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200 ease-in-out uppercase tracking-wide">
Logout
</button>
<button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-100 dark:text-gray-900 bg-gray-600 dark:bg-gray-400 rounded-md border-2 border-gray-700 dark:border-gray-300 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 ease-in-out uppercase tracking-wide">
Extend Session
</button>
</div>
</div>
</div>Componenti correlati
Avviso di timeout sessione
Un semplice componente di avviso di timeout della sessione in modalità scura per i siti di e-commerce, progettato con colori pastello e reattività utilizzando TailwindCSS.
Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione reattivo e compatibile con tema scuro con stile Glassmorphism, toni della Terra e layout complesso utilizzando Tailwind CSS. Presenta effetti di vetro smerigliato, sfocatura e molteplici elementi interattivi adatti a un portfolio.
Componente di avviso timeout sessione - Acquerello/Artistico
Un componente di avviso di timeout di sessione complesso e reattivo per l'e-commerce, caratterizzato da un design acquerello/artistico con una combinazione di colori arcobaleno sfumato e supporto per la modalità scura. Include opzioni per l'estensione o la disconnessione.