RetroSessionTimeoutAlert
Un composant d’alerte de délai d’expiration de session à thème rétro avec des tons de terre, conçu pour les sites de blogs/contenus. Dispose d’un look nostalgique avec un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/40 dark:bg-black/50 backdrop-blur-sm">
<div class="relative p-6 rounded-lg shadow-xl max-w-sm w-full bg-stone-100 text-stone-800 border-4 border-stone-400 dark:bg-stone-800 dark:text-stone-100 dark:border-stone-600 font-mono animate-fade-in-down">
<div class="absolute -top-4 -right-4 bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-100 px-3 py-1 rounded-full text-sm font-bold shadow-md transform rotate-2 origin-top-right border-2 border-stone-500 dark:border-stone-700">
ALERT!
</div>
<div class="flex items-center space-x-4 mb-4">
<div class="w-12 h-12 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-full text-white text-3xl font-bold border-2 border-red-700 dark:border-red-900 shadow-inner flex-shrink-0">
!
</div>
<div>
<h3 class="text-xl font-bold mb-1 uppercase tracking-wide text-stone-700 dark:text-stone-200">
Session Expiring Soon
</h3>
<p class="text-sm text-stone-600 dark:text-stone-400">
Due to inactivity, your session will expire in:
</p>
</div>
</div>
<div class="flex justify-center items-baseline mb-6 space-x-2">
<span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownMinutes">04</span>
<span class="text-3xl font-bold text-red-600 dark:text-red-400 leading-none">:</span>
<span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownSeconds">59</span>
</div>
<p class="text-center text-sm mb-6 text-stone-600 dark:text-stone-400">
Click 'Continue Session' to stay logged in and prevent data loss.
</p>
<div class="flex flex-col sm:flex-row gap-3">
<button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-lime-600 hover:bg-lime-700 text-white shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-lime-800 active:border-b-0 dark:bg-lime-700 dark:hover:bg-lime-800 dark:border-lime-900">
Continue Session
</button>
<button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-stone-300 hover:bg-stone-400 text-stone-800 shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-stone-500 active:border-b-0 dark:bg-stone-600 dark:hover:bg-stone-700 dark:text-stone-200 dark:border-stone-800">
Logout
</button>
</div>
</div>
</div>
<style>
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 0.5s ease-out forwards;
}
</style>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, 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.
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.
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.