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 et réactif avec un arrière-plan dégradé multicolore, conçu pour les sites Web d’événements et de conférences. Inclut la prise en charge du 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.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session Material Design simple et monochrome pour les réseaux sociaux, avec un design réactif et une prise en charge du thème sombre.