Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión simple, receptivo y compatible con el modo oscuro con una estética industrial y silenciada, adecuado para sistemas de reserva y reservas.
Código HTML
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-black/70 font-sans">
<div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
<!-- Header with exposed screw-like elements -->
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 border-b-2 border-gray-300 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wide">Session Timeout</h3>
<div class="flex space-x-2">
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
</div>
</div>
<!-- Content body -->
<div class="p-6 text-center">
<svg class="mx-auto mb-4 h-12 w-12 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<p class="mb-4 text-gray-700 dark:text-gray-300">
Your session is about to expire due to inactivity.
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
Please extend your session to continue.
</p>
<div class="mt-6">
<p class="text-2xl font-bold text-gray-800 dark:text-gray-200 tabular-nums">00:59</p>
</div>
</div>
<!-- Footer with utilitarian buttons -->
<div class="flex flex-col sm:flex-row justify-end gap-3 p-4 bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-300 dark:border-gray-700">
<button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-300 dark:bg-gray-600 rounded-md border-2 border-gray-400 dark:border-gray-500 hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200 ease-in-out uppercase tracking-wide">
Logout
</button>
<button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-100 dark:text-gray-900 bg-gray-600 dark:bg-gray-400 rounded-md border-2 border-gray-700 dark:border-gray-300 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 ease-in-out uppercase tracking-wide">
Extend Session
</button>
</div>
</div>
</div>Componentes relacionados
Alerta de tiempo de espera de sesión Art Deco
Un componente de alerta de tiempo de espera de sesión elegante y receptivo con un diseño inspirado en Art Deco, con patrones geométricos, neutros cálidos y soporte para modo oscuro, adecuado para plataformas de entretenimiento.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo con un diseño de arco iris degradado multicolor, adecuado para sitios web gubernamentales y de servicio público. Cuenta con soporte para modo oscuro y transiciones suaves.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo diseñado con estilo glassmorphism y adecuado para temas oscuros. Cuenta con una combinación de colores pastel, elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y algunas funciones interactivas como un temporizador de cuenta regresiva y botones de acción.