Компонент оповещения об истечении времени ожидания сеанса
Отзывчивый компонент оповещения об истечении времени ожидания сеанса, разработанный в стиле glassmorphism и подходящий для темных тем. Он отличается пастельной цветовой гаммой, полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия, а также некоторыми интерактивными функциями, такими как таймер обратного отсчета и кнопки действий.
HTML-код
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
<div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
<div class="flex justify-around mt-4">
<button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
<button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</button>
</div>
</div>
</div>Связанные компоненты
Компонент оповещения об истечении времени ожидания сеанса
Простой, отзывчивый и совместимый с темным режимом компонент оповещения о тайм-ауте сеанса с индустриальной и приглушенной эстетикой, подходящий для систем бронирования и бронирования.
Компонент оповещения об истечении времени ожидания сеанса
Сложный, отзывчивый компонент оповещения об истечении времени ожидания сеанса с минималистичным дизайном в оттенках серого, подходящий для бизнес-сайтов и включающий поддержку темных тем.
Компонент оповещения об истечении времени ожидания сеанса
Минималистичный и плоский компонент оповещения о тайм-ауте сеанса дизайна с ретро/винтажной цветовой схемой, отличающийся простым макетом, полной отзывчивостью и поддержкой темного режима для блогов и контентных сайтов.