Alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo con soporte para temas oscuros, diseñado con una estética minimalista / plana utilizando colores pastel. Cuenta con un diseño limpio con tipografía clara y señales visuales sutiles para la interacción del usuario, adecuado para entornos de tablero.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
<!-- Close Button -->
<button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Icon -->
<div class="flex justify-center mb-4">
<div class="p-3 bg-yellow-200 dark:bg-yellow-600 rounded-full">
<svg class="h-8 w-8 text-yellow-700 dark:text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
</div>
<!-- Title and Description -->
<h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-2">Session Timeout</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Your session is about to expire. Please save your work and log in again.
</p>
<!-- Progress Bar (Simulated) -->
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6">
<div class="bg-pink-400 dark:bg-pink-600 h-2.5 rounded-full" style="width: 75%;"></div>
</div>
<!-- Action Buttons -->
<div class="flex space-x-4">
<button class="flex-1 px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200">
Save Draft
</button>
<button class="flex-1 px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white rounded-md hover:bg-purple-500 dark:hover:bg-purple-700 transition-colors duration-200">
Log Out
</button>
</div>
</div>
</div>Componentes relacionados
Componente de alerta de tiempo de espera de sesión - Neumorphism Candy
Un componente de alerta de tiempo de espera de sesión receptivo con un estilo de diseño de neumorfismo, que utiliza una combinación de colores dulces/dulces. Las características incluyen soporte para modo oscuro y un temporizador de cuenta regresiva para marcas de moda / belleza.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión complejo y receptivo diseñado con un estilo de tipografía suizo/internacional mínimo y una combinación de colores dulce/dulce brillante, adecuada para plataformas de trabajo y carrera. Incluye soporte para modo oscuro y elementos interactivos.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo diseñado para sitios web de viajes/turismo, con una interfaz de usuario de modo oscuro con tonos azules corporativos. Proporciona una comunicación clara sobre la caducidad de la sesión y ofrece opciones para ampliar o cerrar la sesión.