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 avec style Microinteractions, effets réactifs et prise en charge du thème sombre.
Composant d’alerte de délai d’expiration de session
Un composant minimaliste d’alerte de délai d’expiration de session pour les sites Web de commerce électronique, conçu avec une palette de couleurs monochromatique et réactif avec la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session conçu pour les micro-interactions, utilisant un jeu de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre. Idéal pour les plateformes de commerce électronique pour alerter les utilisateurs de l’expiration de la session.