Composant d’alerte de délai d’expiration de session - Aquarelle/Artistique
Un composant complexe et réactif d’alerte de délai d’expiration de session pour le commerce électronique, avec un design aquarelle/artistique avec une palette de couleurs arc-en-ciel dégradée et la prise en charge du mode sombre. Comprend des options pour prolonger ou se déconnecter.
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 font-sans">
<div class="relative w-full max-w-md p-6 overflow-hidden rounded-3xl shadow-2xl backdrop-blur-sm dark:shadow-purple-900/50 transform transition-all duration-300 ease-in-out scale-100 opacity-100
bg-gradient-to-br from-purple-200 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-blue-800 dark:to-green-800
border border-purple-300 dark:border-purple-700
flex flex-col items-center text-center
" style="background-image: url('https://picsum.photos/seed/watercolor_bg/800/600?blur=1'); background-size: cover; background-position: center; border-radius: 2rem;">
<!-- Artistic Overlay / Texture -->
<div class="absolute inset-0 bg-gradient-to-br from-red-500/20 via-yellow-500/20 to-blue-500/20 opacity-70 dark:opacity-50" style="mask-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'noiseFilter\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.5\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feComposite operator=\'in\' in2=\'SourceGraphic\' result=\'comp\'></feComposite></filter><rect width=\'100%\' height=\'100%\' filter=\'url(#noiseFilter)\'/></svg>'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; z-index: 0; border-radius: 2rem;"></div>
<!-- Content Wrapper with internal padding -->
<div class="relative z-10 p-4 sm:p-6 lg:p-8 ">
<div class="relative mb-6 w-24 h-24 sm:w-28 sm:h-28 mx-auto -mt-16 sm:-mt-20 lg:-mt-24 rounded-full p-2
bg-gradient-to-br from-red-400 via-orange-400 to-yellow-400 dark:from-red-600 dark:via-orange-600 dark:to-yellow-600
shadow-lg ring-4 ring-white dark:ring-gray-800 transform rotate-3 hover:rotate-0 transition-transform duration-300">
<svg class="h-full w-full text-white dark:text-gray-200 p-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Zm0 13a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm0-8a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1Z"/>
</svg>
</div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
bg-clip-text text-transparent
bg-gradient-to-r from-purple-700 via-pink-500 to-red-500
dark:from-blue-400 dark:via-green-300 dark:to-yellow-200 line-clamp-2">
Session Ending Soon!
</h2>
<p class="text-base sm:text-lg lg:text-xl text-gray-700 dark:text-gray-200 mb-6 font-medium leading-relaxed max-w-prose mx-auto">
Your session is about to expire. Would you like to stay logged in or log out?
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4 w-full">
<button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
bg-gradient-to-br from-blue-400 via-teal-400 to-green-400 text-white shadow-md
hover:from-blue-500 hover:via-teal-500 hover:to-green-500
focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75
dark:from-blue-600 dark:via-teal-600 dark:to-green-600 dark:hover:from-blue-700 dark:hover:via-teal-700 border border-blue-500 dark:border-blue-700">
Extend Session
</button>
<button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
bg-white text-gray-800 shadow-md border border-gray-300
hover:bg-gray-100 hover:text-gray-900
focus:outline-none focus:ring-4 focus:ring-gray-300 focus:ring-opacity-75
dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white">
Log Out
</button>
</div>
<div class="mt-8 text-sm sm:text-base text-gray-500 dark:text-gray-400">
<p class="mb-2"><span class="font-semibold">Automatic logout in:</span> <span class="text-purple-600 dark:text-blue-400 font-bold text-lg">02:30</span></p>
<p>Enjoy your shopping experience!</p>
</div>
<!-- Artistic Footer Element -->
<div class="mt-8 h-2 w-3/4 mx-auto rounded-full
bg-gradient-to-r from-red-300 via-purple-300 to-blue-300
dark:from-red-600 dark:via-purple-600 dark:to-blue-600
shadow-inner opacity-80"></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 réactif et compatible avec un thème sombre avec le style Glassmorphism, les tons de terre et la mise en page complexe à l’aide de Tailwind CSS. Comprend des effets de verre givré, du flou et de multiples éléments interactifs adaptés à un portfolio.
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.