Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session simple, réactif et compatible avec le mode sombre, à l’esthétique industrielle et discrète, adapté aux systèmes de réservation et aux systèmes de réservation.
HTML Code
<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>Composants associés
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session rétro/vintage avec des tons de terre, un design réactif et la prise en charge du thème sombre.
Composant d’alerte de délai d’expiration de session
Composant d’alerte de délai d’expiration de session qui déclenche une animation attrayante. Il présente un design réactif, adapté aux tableaux de bord avec une palette de couleurs pastel et la prise en charge du thème sombre. Il comprend des éléments interactifs, permettant aux utilisateurs de prolonger leur session ou de se déconnecter.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session réactif et compatible avec un thème sombre avec le style Glassmorphism, les tons de terre et la mise en page complexe à l’aide de Tailwind CSS. Comprend des effets de verre givré, du flou et de multiples éléments interactifs adaptés à un portfolio.