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
Composant d’alerte de délai d’expiration de session qui déclenche une animation attrayante. Il présente un design réactif, adapté aux tableaux de bord avec une palette de couleurs pastel et la prise en charge du thème sombre. Il comprend des éléments interactifs, permettant aux utilisateurs de prolonger leur session ou de se déconnecter.
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.
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