Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session simple, propre et professionnel conçu pour les plateformes d’emploi/de carrière. Utilise un schéma de couleurs analogue et prend en charge le mode sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-70">
<div class="w-full max-w-sm p-6 space-y-4 bg-white rounded-lg shadow-xl md:max-w-md dark:bg-gray-800">
<div class="flex items-center justify-center text-red-500 dark:text-red-400">
<svg class="w-10 h-10" 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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-center text-gray-900 dark:text-gray-100">Session Expiring Soon!</h3>
<p class="text-sm text-center text-gray-600 dark:text-gray-300">
Your session is about to expire due to inactivity. Do you want to remain logged in?
</p>
<div class="flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
<button type="button" class="w-full px-4 py-2 text-sm font-medium text-white transition-colors duration-200 bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">
Stay Logged In
</button>
<button type="button" class="w-full px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
Log Out
</button>
</div>
<p class="text-xs text-center text-gray-500 dark:text-gray-400">
You will be automatically logged out in 2:00
</p>
</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 simple, réactif et monochromatique avec des effets de néon/lueur, conçu pour les plateformes d’éducation/d’apprentissage. Inclut la prise en charge du mode sombre.
Composant d’alerte de délai d’expiration de session - Thème Art Déco Candy
Un composant d’alerte de délai d’expiration de session simple et réactif avec un design inspiré de l’Art déco, utilisant des couleurs vives de bonbon. Optimisé pour la documentation/les sites wiki, avec prise en charge du mode sombre.
Composant d’alerte de délai d’expiration de session
Composant d’alerte de délai d’expiration de session qui déclenche une animation attrayante. Il présente un design réactif, adapté aux tableaux de bord avec une palette de couleurs pastel et la prise en charge du thème sombre. Il comprend des éléments interactifs, permettant aux utilisateurs de prolonger leur session ou de se déconnecter.