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.
HTML Code
<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-opacity-90 transition-all duration-300 ease-in-out">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mx-4 w-full max-w-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 animate-bounce">Session Timeout Warning</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6">Your session is about to expire due to inactivity.</p>
<div class="flex items-center mb-4">
<span class="text-2xl font-bold text-gray-800 dark:text-gray-200 mr-2" id="countdown">02:30</span>
<span class="text-gray-500 dark:text-gray-400">Remaining</span>
</div>
<div class="flex justify-between mt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-700">Extend Session</button>
<button class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-red-600 dark:hover:bg-red-700">Log Out</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 avec un design arc-en-ciel dégradé multicolore, adapté aux sites Web gouvernementaux et de services publics. Dispose d’une prise en charge du mode sombre et de transitions fluides.
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.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session réactif avec conception 3D, schéma de couleurs triadique et prise en charge du mode sombre à l’aide de Tailwind CSS.