Composant d’alerte de délai d’expiration de session - Neumorphism Candy
Un composant réactif d’alerte de délai d’expiration de session avec un style de conception de neumorphisme, utilisant un schéma de couleurs bonbon/doux. Les caractéristiques incluent la prise en charge du mode sombre et un compte à rebours pour les marques de mode/beauté.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-pink-100 dark:bg-gray-900 p-4 font-sans">
<div class="w-full max-w-sm rounded-3xl shadow-xl p-8 bg-gradient-to-br from-pink-200 to-purple-200 dark:from-gray-700 dark:to-gray-800
flex flex-col items-center justify-center
transform transition-all duration-300 ease-in-out
dark:border dark:border-gray-600
shadow-[10px_10px_20px_#bebebe,-10px_-10px_20px_#ffffff] dark:shadow-[10px_10px_20px_#1a1a1a,-10px_-10px_20px_#333333]">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600
shadow-lg transition-transform duration-300 ease-in-out transform scale-95 hover:scale-100
shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#5e34b7,inset_-5px_-5px_10px_#2c2c2c]">
<svg class="w-10 h-10 text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
</div>
<h3 class="mt-6 mb-2 text-2xl font-bold text-pink-700 dark:text-pink-300 text-center">
Session Timeout
</h3>
<p class="text-center text-gray-700 dark:text-gray-400 text-sm mb-6 max-w-xs">
Your session is about to expire due to inactivity. Save your work or you will be logged out in:
</p>
<div class="relative w-36 h-12 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-gray-600 dark:to-gray-700
shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#4a4a4a,inset_-5px_-5px_10px_#2c2c2c]
flex items-center justify-center mb-8 transition-all duration-300 ease-in-out">
<span class="text-3xl font-extrabold text-white dark:text-white" id="countdown">00:59</span>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 w-full justify-center">
<button class="flex-1 py-3 px-6 rounded-3xl font-semibold
bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800
text-white shadow-md
hover:from-purple-500 hover:to-indigo-600 dark:hover:from-purple-800 dark:hover:to-indigo-900
active:shadow-inner active:from-purple-300 active:to-indigo-400 dark:active:from-purple-600 dark:active:to-indigo-700
transition-all duration-200 ease-in-out
shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
Stay Logged In
</button>
<button class="flex-1 py-3 px-6 rounded-3xl font-semibold
bg-gradient-to-br from-pink-400 to-rose-500 dark:from-pink-700 dark:to-rose-800
text-white shadow-md
hover:from-pink-500 hover:to-rose-600 dark:hover:from-pink-800 dark:hover:to-rose-900
active:shadow-inner active:from-pink-300 active:to-rose-400 dark:active:from-pink-600 dark:active:to-rose-700
transition-all duration-200 ease-in-out
shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
Log Out
</button>
</div>
</div>
</div>Composants associés
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.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session simple et réactif avec un arrière-plan dégradé multicolore, conçu pour les sites Web d’événements et de conférences. Inclut 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 conçu pour les micro-interactions, utilisant un jeu de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre. Idéal pour les plateformes de commerce électronique pour alerter les utilisateurs de l’expiration de la session.