Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session complexe et réactif avec un design minimaliste en niveaux de gris, adapté aux sites Web d’entreprise et incluant la prise en charge du thème sombre.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
<div class="p-6">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
<p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
<p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
</div>
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
<p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
<p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div class="flex items-center">
<svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
</div>
<label for="toggle-auto-renew" class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" id="toggle-auto-renew" class="sr-only">
<div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
</div>
</label>
<style>
input:checked ~ .dot {
transform: translateX(100%);
background-color: #4CAF50; /* A touch of green for Composants associés
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de temporisation de session conçu dans un style brutaliste avec une esthétique brute et audacieuse, un contraste élevé et des effets réactifs. Ce composant prend en charge le thème sombre à l’aide du style CSS Tailwind et utilise des images d’espace réservé de picsum.photos et randomuser.me.
Alerte de délai d’expiration de session Art Déco
Un composant d’alerte de délai d’expiration de session élégant et réactif avec un design inspiré de l’Art déco, avec des motifs géométriques, des neutres chauds et la prise en charge du mode sombre, adapté aux plateformes de divertissement.
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.