Composants
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session - Arc-en-ciel neumorphe
Composant d’alerte de délai d’expiration de session - Arc-en-ciel neumorphe
Un composant Neumorphic Session Timeout Alert pour les applications de rencontres/sociales avec un schéma de couleurs arc-en-ciel dégradé. Il est réactif et prend en charge le mode sombre, incitant les utilisateurs à prolonger leur session ou à se déconnecter.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
<div class="relative w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl neumorphic-rainbow-light dark:neumorphic-rainbow-dark md:max-w-md lg:max-w-lg">
<div class="flex justify-center mb-6">
<div class="w-20 h-20 rounded-full flex items-center justify-center neumorphic-icon-light dark:neumorphic-icon-dark">
<svg class="w-10 h-10 text-red-500 transition-colors duration-300 dark:text-red-400" 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.542 2.768-1.542 3.533 0l3.057 6.164a4.5 4.5 0 01-.815 4.795L10 18.067l-5.025-4.009a4.5 4.5 0 01-.815-4.795l3.057-6.164z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<h2 class="text-center text-3xl font-extrabold text-gray-800 mb-4 bg-clip-text text-transparent neumorphic-rainbow-text-light dark:neumorphic-rainbow-text-dark transition-colors duration-300">
Session Timeout
</h2>
<p class="text-center text-lg text-gray-700 mb-8 dark:text-gray-300 transition-colors duration-300">
Your session is about to expire due to inactivity.
</p>
<div class="flex justify-around space-x-4">
<button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
<span class="block">Extend Session</span>
<span class="block text-sm opacity-75"> (5:00)</span>
</button>
<button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
Log Out
</button>
</div>
<p class="text-center text-sm text-gray-500 mt-8 dark:text-gray-400 transition-colors duration-300">
For your security, we automatically log you out after inactivity.
</p>
</div>
<style>
.neumorphic-rainbow-light {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
box-shadow: 10px 10px 20px #c7c7c7, -10px -10px 20px #ffffff, inset 0 0 0 #f0f0f0, inset 0 0 0 #e0e0e0;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.dark .neumorphic-rainbow-dark {
background: linear-gradient(145deg, #2b2b2b, #202020);
box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #313131, inset 0 0 0 #2b2b2b, inset 0 0 0 #202020;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.neumorphic-icon-light {
background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
box-shadow: inset 5px 5px 10px #c7c7c7, inset -5px -5px 10px #ffffff;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.dark .neumorphic-icon-dark {
background: linear-gradient(145deg, #202020, #2b2b2b);
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.neumorphic-button-light {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
box-shadow: 7px 7px 14px #c2c2c2, -7px -7px 14px #ffffff;
}
.neumorphic-button-light:hover {
box-shadow: 5px 5px 10px #c2c2c2, -5px -5px 10px #ffffff;
}
.neumorphic-button-light:active {
box-shadow: inset 5px 5px 10px #c2c2c2, inset -5px -5px 10px #ffffff;
}
.dark .neumorphic-button-dark {
background: linear-gradient(145deg, #2b2b2b, #202020);
box-shadow: 7px 7px 14px #1a1a1a, -7px -7px 14px #313131;
}
.dark .neumorphic-button-dark:hover {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #313131;
}
.dark .neumorphic-button-dark:active {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
}
.neumorphic-rainbow-text-light {
background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
}
.dark .neumorphic-rainbow-text-dark {
background-image: linear-gradient(to right, #fee2e2, #fcd34d, #fef08a, #dcfce7, #bfdbfe, #c7d2fe, #e9d5ff);
}
.neumorphic-text-button-light {
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #4f46e5, #9333ea);
}
.dark .neumorphic-text-button-dark {
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
}
</style>
</div>Composants associés
Composant d’alerte de délai d’expiration de session
Un composant réactif d’alerte de délai d’expiration de session conçu avec le style glassmorphism et adapté aux thèmes sombres. Il présente une palette de couleurs pastel, des éléments translucides ressemblant à du verre dépoli avec des effets de flou, et certaines fonctionnalités interactives comme un compte à rebours et des boutons d’action.
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 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.