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.
HTML Code
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
<div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
<div class="flex justify-around mt-4">
<button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
<button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</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 complexe et réactif avec une conception monospace/développeur, un schéma en noir et blanc et une couleur d’accentuation vive, adapté aux plates-formes éducatives. Comprend la prise en charge du mode sombre et un compte à rebours.
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.
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session rétro/vintage avec des tons de terre, un design réactif et la prise en charge du thème sombre.