Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione complesso e reattivo con un design minimalista in scala di grigi, adatto per siti Web aziendali e include il supporto per il tema scuro.
Codice HTML
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
<div class="p-6">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
<p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
<p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
</div>
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
<p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
<p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div class="flex items-center">
<svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
</div>
<label for="toggle-auto-renew" class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" id="toggle-auto-renew" class="sr-only">
<div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
</div>
</label>
<style>
input:checked ~ .dot {
transform: translateX(100%);
background-color: #4CAF50; /* A touch of green for 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.
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.
Componente di avviso timeout sessione - Tema Art Déco Candy
Un componente di avviso di timeout sessione semplice e reattivo con un design ispirato all'Art Déco, che utilizza colori vivaci e caramellati. Ottimizzato per siti di documentazione/wiki, con supporto per la modalità oscura.