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
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.
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.
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 avec le style glassmorphism et adapté aux thèmes sombres. Il présente une palette de couleurs pastel, des éléments translucides ressemblant à du verre dépoli avec des effets de flou, et certaines fonctionnalités interactives comme un compte à rebours et des boutons d’action.