Composants
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session
Composant d’alerte de délai d’expiration de session
Un composant complexe et réactif d’alerte de délai d’expiration de session pour les sites Web gouvernementaux/de service public, avec un design inspiré de l’agriculture et de la nature avec des neutres froids. Comprend un compte à rebours, des options pour prolonger ou se déconnecter, et une prise en charge complète du mode sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-gray-900/80 backdrop-blur-sm">
<div class="relative w-full max-w-md p-8 overflow-hidden bg-white rounded-3xl shadow-2xl dark:bg-gray-800 transform transition-all duration-300 ease-out sm:p-10 lg:p-12 animate-fade-in-up">
<div class="absolute inset-0 z-0 flex items-center justify-center pointer-events-none opacity-5 dark:opacity-10">
<svg class="w-full h-full text-blue-300 dark:text-blue-600 animate-pulse-slow" viewBox="0 0 200 200" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M100 0C44.77 0 0 44.77 0 100s44.77 100 100 100 100-44.77 100-100S155.23 0 100 0zm0 10c49.71 0 90 40.29 90 90s-40.29 90-90 90-90-40.29-90-90S50.29 10 100 10zm-50 40c-2.76 0-5 2.24-5 5S47.14 60 50 60s5-2.24 5-5-2.24-5-5-5zm100 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM50 150c-2.76 0-5 2.24-5 5S47.14 160 50 160s5-2.24 5-5-2.24-5-5-5zm100 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM100 50c-2.76 0-5 2.24-5 5S97.14 60 100 60s5-2.24 5-5-2.24-5-5-5zM100 150c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM40 100c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM160 100c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"></path>
</svg>
</div>
<div class="relative z-10 text-center">
<div class="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-blue-100 rounded-full dark:bg-blue-600/20">
<svg class="w-8 h-8 text-blue-600 dark:text-blue-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-800 dark:text-gray-100 sm:text-3xl lg:text-4xl">
Session Expiring Soon
</h3>
<p class="mb-6 text-base text-gray-600 dark:text-gray-300 sm:text-lg">
For your security, your session will expire in <strong class="text-blue-600 dark:text-blue-400 font-extrabold text-xl">1:59</strong>.
</p>
<div class="w-32 h-32 mx-auto mb-8 flex items-center justify-center rounded-full bg-blue-50 dark:bg-blue-600/10 text-blue-700 dark:text-blue-300 border-4 border-blue-200 dark:border-blue-700 shadow-inner overflow-hidden animate-scale-bounce">
<span class="text-5xl font-extrabold leading-none" id="countdown-timer">1:59</span>
</div>
<div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
<button type="button" class="flex-1 px-6 py-3 text-lg font-semibold text-white bg-blue-600 rounded-full shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-200 ease-in-out hover:scale-105 active:scale-95 animate-fade-in">
<span class="relative flex items-center justify-center">
<svg class="w-5 h-5 mr-2 -ml-1 animate-spin" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2M16 16v2m-6 0h6m-6 0h6"></path>
</svg>
Extend Session
</span>
</button>
<button type="button" class="flex-1 px-6 py-3 text-lg font-semibold text-gray-800 bg-gray-200 rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 transition transform duration-200 ease-in-out hover:scale-105 active:scale-95 animate-fade-in delay-100">
Log Out Now
</button>
</div>
<p class="mt-8 text-sm text-gray-500 dark:text-gray-400">
Questions? Please contact <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">support</a>.
</p>
</div>
</div>
</div>
<style>
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scale-bounce {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes pulse-slow {
0%, 100% {
opacity: 0.05;
}
50% {
opacity: 0.15;
}
}
.animate-fade-in-up {
animation: fade-in-up 0.5s ease-out forwards;
}
.animate-scale-bounce {
animation: scale-bounce 2s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-fade-in {
animation: fade-in-up 0.6s ease-out forwards;
animation-delay: 0.2s;
}
.animate-fade-in.delay-100 {
animation-delay: 0.3s;
}
</style>Composants associés
Alerte de délai d’expiration de session Art Déco
Un composant d’alerte de délai d’expiration de session élégant et réactif avec un design inspiré de l’Art déco, avec des motifs géométriques, des neutres chauds et la prise en charge du mode sombre, adapté aux plateformes de divertissement.
Alerte de délai d’expiration de session skeuomorphique
Un composant simple, de style Skeuomorphic, avec des couleurs en niveaux de gris, conçu pour les sites de blogs/de contenu. Il comprend un design réactif et la prise en charge du mode sombre.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session réactif avec un design arc-en-ciel dégradé multicolore, adapté aux sites Web gouvernementaux et de services publics. Dispose d’une prise en charge du mode sombre et de transitions fluides.