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

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

Простой, быстро реагирующий компонент оповещения об истечении времени ожидания сеанса с многоцветным градиентным фоном, предназначенный для веб-сайтов мероприятий и конференций. Включает поддержку темного режима.

Предварительный просмотр

HTML-код

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-sm p-0 rounded-2xl shadow-xl overflow-hidden
              bg-gradient-to-br from-purple-500 via-pink-500 to-red-500
              dark:from-purple-700 dark:via-pink-700 dark:to-red-700">
    <div class="p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-xl m-0.5">
      <div class="flex flex-col items-center justify-center text-center">
        <svg class="w-16 h-16 mb-4 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-2">
          Session Expired
        </h3>
        <p class="text-gray-600 dark:text-gray-300 text-base mb-6">
          Your session has timed out due to inactivity. Please log in again to continue.
        </p>
        <div class="w-full flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="w-full px-6 py-3 rounded-full text-white font-semibold transition-all duration-300 transform
                         bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600
                         shadow-lg hover:shadow-xl dark:shadow-none">
            Log In Now
          </button>
          <button class="w-full px-6 py-3 rounded-full font-semibold transition-all duration-300 transform
                         bg-gray-100 text-gray-800 hover:bg-gray-200
                         dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600
                         shadow-md hover:shadow-lg dark:shadow-none">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

Минималистичный компонент оповещения об истечении времени ожидания сессии для веб-сайтов электронной коммерции, разработанный с монохроматической цветовой схемой и адаптивный с поддержкой темной темы с использованием Tailwind CSS.

Открытый

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

Компонент оповещения об истечении времени ожидания сеанса с адаптивным стилем 3D-дизайна, поддержкой темных тем и включением изображений-заполнителей.

Открытый

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

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

Открытый