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
Composant d’alerte de délai d’expiration de session complexe, de style Neumorphic, pour l’e-commerce, doté d’une palette de couleurs monochromatique et d’un design réactif avec prise en charge du mode sombre.
Composant d’alerte de délai d’expiration de session
Composant d’alerte de délai d’expiration de session qui déclenche une animation attrayante. Il présente un design réactif, adapté aux tableaux de bord avec une palette de couleurs pastel et la prise en charge du thème sombre. Il comprend des éléments interactifs, permettant aux utilisateurs de prolonger leur session ou de 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, réactif et monochromatique avec des effets de néon/lueur, conçu pour les plateformes d’éducation/d’apprentissage. Inclut la prise en charge du mode sombre.