Компоненты Оповещение об истечении времени ожидания сеанса Компонент оповещения об истечении времени ожидания сеанса

Компонент оповещения об истечении времени ожидания сеанса

Отзывчивый компонент оповещения об истечении времени ожидания сеанса, разработанный в стиле 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>

Связанные компоненты

Компонент оповещения об истечении времени ожидания сеанса

Адаптивный компонент оповещения об истечении времени ожидания сеанса, разработанный для электронной коммерции, с привлекательной анимацией и темной темой. Он оснащен предупреждающим сообщением, таймером обратного отсчета и опциями для продления сеанса или выхода из системы.

Открытый

Компонент оповещения об истечении времени ожидания сеанса

Компонент оповещения об истечении времени ожидания сеанса, разработанный с учетом микровзаимодействий, с использованием цветовой схемы в оттенках серого и адаптивного дизайна с поддержкой темных тем. Идеально подходит для платформ электронной коммерции, чтобы оповещать пользователей об истечении сеанса.

Открытый

Оповещение об истечении времени ожидания сеанса

Компонент оповещения об истечении времени ожидания сеанса со стилем микровзаимодействий, отзывчивыми эффектами и поддержкой темной темы.

Открытый