Avviso di timeout sessione
Un semplice componente monocromatico di avviso di timeout della sessione di Material Design per i social media, con design reattivo e supporto per temi scuri.
Codice HTML
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3 text-center">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
<svg class="h-6 w-6 text-gray-600 dark:text-gray-200" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
</div>
</div>
</div>
</div>Componenti correlati
Avviso di timeout sessione scheumorfica
Un semplice componente di avviso di timeout della sessione in stile Skeuomorphic con colori in scala di grigi, progettato per blog/siti di contenuti. Include un design reattivo e il supporto per la modalità scura.
Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione progettato pensando alle microinterazioni, utilizzando una combinazione di colori in scala di grigi e un design reattivo con supporto del tema scuro. Ideale per le piattaforme di e-commerce per avvisare gli utenti della scadenza della sessione.
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.