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
Un composant d’alerte de délai d’expiration de session réactif avec prise en charge du thème sombre, conçu avec une esthétique minimaliste/plate utilisant des couleurs pastel. Il présente une mise en page épurée avec une typographie claire et des repères visuels subtils pour l’interaction avec l’utilisateur, adaptés aux environnements de tableau de bord.
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 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.