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.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Session Timeout</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="mt-4">
<p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically soon.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-sm font-semibold text-gray-900 dark:text-white">Time remaining:</span>
<span class="text-sm font-mono text-red-600 dark:text-red-400 animation-pulse">0:59</span>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">Cancel</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none">Extend Session</button>
</div>
</div>
</div>Composants associés
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session réactif conçu pour le commerce électronique avec des animations attrayantes et un thème sombre. Il comporte un message d’avertissement, un compte à rebours et des options pour prolonger la session ou se déconnecter.
RetroSessionTimeoutAlert
Un composant d’alerte de délai d’expiration de session à thème rétro avec des tons de terre, conçu pour les sites de blogs/contenus. Dispose d’un look nostalgique avec un design réactif et une prise en charge du mode sombre.
Composant d’alerte de délai d’expiration de session - Neumorphism Candy
Un composant réactif d’alerte de délai d’expiration de session avec un style de conception de neumorphisme, utilisant un schéma de couleurs bonbon/doux. Les caractéristiques incluent la prise en charge du mode sombre et un compte à rebours pour les marques de mode/beauté.