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.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85">
<div class="relative w-full max-w-sm p-6 overflow-hidden text-center transition-all duration-300 ease-in-out transform rounded-lg shadow-2xl bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 md:max-w-md lg:max-w-lg">
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
<!-- Art Deco Geometric Pattern Overlay -->
<svg class="w-full h-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<pattern id="squares-deco" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="2" height="2" fill="currentColor"/>
<rect x="5" y="5" width="2" height="2" fill="currentColor"/>
</pattern>
<rect width="100%" height="100%" fill="url(#squares-deco)" class="text-pink-400 dark:text-purple-600"/>
<path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="currentColor" stroke-width="2" class="text-pink-500 dark:text-purple-700"/>
<circle cx="50" cy="50" r="40" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
<line x1="20" y1="50" x2="80" y2="50" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
<line x1="50" y1="20" x2="50" y2="80" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
</svg>
</div>
<div class="relative z-10 space-y-4">
<div class="inline-flex items-center justify-center p-3 rounded-full bg-pink-400 text-white dark:bg-pink-600 shadow-lg">
<svg class="w-8 h-8 md:w-10 md:h-10" 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="text-xl md:text-2xl font-extrabold text-purple-800 dark:text-purple-100 font-serif tracking-wide border-b-2 border-purple-500 dark:border-purple-300 pb-2 inline-block">
Session Expiring Soon!
</h3>
<p class="text-sm md:text-base text-purple-700 dark:text-purple-200 leading-relaxed">
Your session will expire in <strong class="font-bold text-pink-600 dark:text-pink-300">02:00</strong> minutes due to inactivity. Do you want to remain logged in?
</p>
<div class="flex flex-col sm:flex-row justify-center gap-3 pt-2">
<button class="flex-1 px-5 py-2 text-sm font-semibold rounded-full bg-pink-500 text-white shadow-lg transform transition-transform duration-200 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-pink-300 dark:bg-pink-700 dark:hover:bg-pink-800 dark:focus:ring-pink-600">
Keep Me Logged In
</button>
<button class="flex-1 px-5 py-2 text-sm font-semibold rounded-full text-purple-700 bg-white shadow-lg border border-purple-300 transform transition-transform duration-200 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:bg-purple-900 dark:text-purple-200 dark:border-purple-600 dark:hover:bg-purple-800 dark:focus:ring-purple-500">
Log Out
</button>
</div>
</div>
</div>
</div>Composants associés
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session avec style Microinteractions, effets réactifs et 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 réactif conçu pour le commerce électronique avec des animations attrayantes et un thème sombre. Il comporte un message d’avertissement, un compte à rebours et des options pour prolonger la session ou se déconnecter.
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.