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.
Código HTML
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-black dark:bg-opacity-80 font-serif">
<div class="relative w-full max-w-md mx-auto overflow-hidden text-center bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-stone-800 rounded-lg shadow-xl border-4 border-amber-300 dark:border-amber-700 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
<!-- Art Deco Top Border Pattern -->
<div class="absolute top-0 left-0 right-0 h-6 bg-gradient-to-r from-amber-400 to-yellow-500 dark:from-stone-700 dark:to-stone-600 flex items-center justify-center overflow-hidden">
<div class="flex w-full justify-around">
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
</div>
</div>
<div class="p-8 pb-6 pt-12 relative">
<h2 class="text-3xl sm:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-200 tracking-wide leading-tight drop-shadow-md">
Session Expiring Soon!
</h2>
<p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 leading-relaxed">
Your session will end in <strong class="text-amber-800 dark:text-amber-400">2:00</strong>.
Do you want to continue watching?
</p>
<!-- Geometric Separator -->
<div class="w-full h-px bg-amber-300 dark:bg-stone-700 my-6 relative">
<div class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-amber-400 dark:bg-stone-600 transform rotate-45 border border-amber-500 dark:border-stone-500"></div>
</div>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="px-8 py-3 rounded-full bg-amber-500 hover:bg-amber-600 text-white font-semibold text-lg shadow-lg
transition duration-300 ease-in-out transform hover:scale-105
dark:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
Continue Session
</button>
<button class="px-8 py-3 rounded-full border-2 border-amber-500 hover:border-amber-600 text-amber-700 font-semibold text-lg shadow-lg
transition duration-300 ease-in-out transform hover:scale-105
dark:border-stone-500 dark:text-stone-200 dark:hover:border-stone-400 dark:hover:text-stone-100 dark:bg-transparent focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
Log Out
</button>
</div>
</div>
<!-- Art Deco Bottom Border Pattern -->
<div class="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-r from-yellow-500 to-amber-400 dark:from-stone-600 dark:to-stone-700 flex items-center justify-center overflow-hidden">
<div class="flex w-full justify-around">
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
<svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión minimalista para sitios web de comercio electrónico, diseñado con un esquema de color monocromático y responsivo con soporte de temas oscuros mediante Tailwind CSS.
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.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión de estilo brutalista, vibrante y receptivo para plataformas de mercado, compatible con el modo oscuro.