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

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

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

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

HTML-код

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 dark:bg-black dark:bg-opacity-80">
  <div class="w-full max-w-md overflow-hidden rounded-lg bg-gray-800 shadow-2xl dark:bg-gray-900 border border-blue-700 dark:border-blue-900">
    <div class="bg-blue-700 p-4 text-white dark:bg-blue-900">
      <h3 class="text-xl font-bold">Session Expiring Soon!</h3>
    </div>
    <div class="p-6 text-gray-200 dark:text-gray-300">
      <p class="mb-4 leading-relaxed">
        Your session is about to expire due to inactivity. To continue planning your adventure, please choose an option below.
      </p>
      <div class="mb-6 flex items-center justify-center space-x-3 text-sm">
        <svg class="h-6 w-6 text-yellow-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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <span class="font-semibold text-yellow-200">Remaining time:</span>
        <span class="font-mono text-lg text-yellow-100">01:59</span>
      </div>
      <p class="mb-6 text-center text-sm italic text-gray-400 dark:text-gray-500">
        (Your data will be saved if you extend your session.)
      </p>

      <div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
        <button class="flex-1 rounded-md bg-blue-600 px-6 py-3 text-lg font-semibold text-white shadow-lg transition-colors duration-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">
          Extend Session
        </button>
        <button class="flex-1 rounded-md border border-gray-600 px-6 py-3 text-lg font-semibold text-gray-300 shadow-md transition-colors duration-200 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200">
          Log Out
        </button>
      </div>
    </div>
  </div>
</div>

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

Предупреждение о тайм-ауте сеанса в стиле ар-деко

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

Открытый