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 - Neumorphism Candy
Un composant réactif d’alerte de délai d’expiration de session avec un style de conception de neumorphisme, utilisant un schéma de couleurs bonbon/doux. Les caractéristiques incluent la prise en charge du mode sombre et un compte à rebours pour les marques de mode/beauté.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de temporisation de session conçu dans un style brutaliste avec une esthétique brute et audacieuse, un contraste élevé et des effets réactifs. Ce composant prend en charge le thème sombre à l’aide du style CSS Tailwind et utilise des images d’espace réservé de picsum.photos et randomuser.me.
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.