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
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.
Avviso di timeout sessione
Un componente di avviso di timeout sessione reattivo con supporto per temi scuri, progettato con un'estetica minimalista/piatta utilizzando colori pastello. Presenta un layout pulito con una tipografia chiara e sottili spunti visivi per l'interazione con l'utente, adatto per gli ambienti dashboard.
Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione complesso e reattivo per siti Web governativi/di servizio pubblico, caratterizzato da un design organico/ispirato alla natura con neutri freddi. Include un timer per il conto alla rovescia, opzioni per estendere o disconnettersi e supporto completo per la modalità scura.