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 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.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session de style brutaliste, dynamique et réactif pour les plateformes de marché, prenant en charge le mode sombre.
Composant d’alerte de délai d’expiration de session
Un composant réactif d’alerte de délai d’expiration de session conçu pour les sites Web de voyage/tourisme, doté d’une interface utilisateur en mode sombre avec des tons bleus d’entreprise. Il fournit une communication claire sur l’expiration de la session et offre des options pour prolonger ou se déconnecter.