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.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 dark:bg-black dark:bg-opacity-80">
<div class="w-full max-w-md overflow-hidden rounded-lg bg-gray-800 shadow-2xl dark:bg-gray-900 border border-blue-700 dark:border-blue-900">
<div class="bg-blue-700 p-4 text-white dark:bg-blue-900">
<h3 class="text-xl font-bold">Session Expiring Soon!</h3>
</div>
<div class="p-6 text-gray-200 dark:text-gray-300">
<p class="mb-4 leading-relaxed">
Your session is about to expire due to inactivity. To continue planning your adventure, please choose an option below.
</p>
<div class="mb-6 flex items-center justify-center space-x-3 text-sm">
<svg class="h-6 w-6 text-yellow-400" 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>
<span class="font-semibold text-yellow-200">Remaining time:</span>
<span class="font-mono text-lg text-yellow-100">01:59</span>
</div>
<p class="mb-6 text-center text-sm italic text-gray-400 dark:text-gray-500">
(Your data will be saved if you extend your session.)
</p>
<div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<button class="flex-1 rounded-md bg-blue-600 px-6 py-3 text-lg font-semibold text-white shadow-lg transition-colors duration-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">
Extend Session
</button>
<button class="flex-1 rounded-md border border-gray-600 px-6 py-3 text-lg font-semibold text-gray-300 shadow-md transition-colors duration-200 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200">
Log Out
</button>
</div>
</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 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 inspiré de la 3D avec un
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.