Поиск компонентов

Категории

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

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

Уведомление об истечении пользовательских сессий

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

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

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

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
    <div class="p-6">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
          <p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
        </div>
      </div>

      <div class="space-y-4">
        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="flex items-center">
            <svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
          </div>
          <label for="toggle-auto-renew" class="flex items-center cursor-pointer">
            <div class="relative">
              <input type="checkbox" id="toggle-auto-renew" class="sr-only">
              <div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
              <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
            </div>
          </label>
          <style>
            input:checked ~ .dot {
              transform: translateX(100%);
              background-color: #4CAF50; /* A touch of green for

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

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

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

                <div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
        <div class="text-gray-900 dark:text-white">
            <h2 class="text-lg font-semibold">Session Timeout</h2>
            <p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
        </div>
    </div>
    <div class="flex space-x-2 mt-4 sm:mt-0">
        <button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
        <button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
    </div>
</div>

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

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

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

                <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
  <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
    <h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
    <p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
    <div class="flex justify-end space-x-2">
      <button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
      <button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</button>
    </div>
  </div>
</div>

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

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

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

                <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>

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

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

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

                <div class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-90 dark:bg-gray-900">
    <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-5">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Your session is about to expire due to inactivity. Please take action to continue your shopping experience. </p>
        <div class="flex justify-between">
            <button class="bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-2 px-4 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition">Stay Logged In</button>
            <button class="bg-red-500 dark:bg-red-700 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-800 transition">Log Out</button>
        </div>
    </div>
</div>

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

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

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

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <!-- Close Button -->
    <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>

    <!-- Icon -->
    <div class="flex justify-center mb-4">
      <div class="p-3 bg-yellow-200 dark:bg-yellow-600 rounded-full">
        <svg class="h-8 w-8 text-yellow-700 dark:text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>
    </div>

    <!-- Title and Description -->
    <h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-2">Session Timeout</h2>
    <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
      Your session is about to expire. Please save your work and log in again.
    </p>

    <!-- Progress Bar (Simulated) -->
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6">
      <div class="bg-pink-400 dark:bg-pink-600 h-2.5 rounded-full" style="width: 75%;"></div>
    </div>

    <!-- Action Buttons -->
    <div class="flex space-x-4">
      <button class="flex-1 px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200">
        Save Draft
      </button>
      <button class="flex-1 px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white rounded-md hover:bg-purple-500 dark:hover:bg-purple-700 transition-colors duration-200">
        Log Out
      </button>
    </div>
  </div>
</div>

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

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

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

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-opacity-90 transition-all duration-300 ease-in-out">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mx-4 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 animate-bounce">Session Timeout Warning</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Your session is about to expire due to inactivity.</p>
        <div class="flex items-center mb-4">
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-200 mr-2" id="countdown">02:30</span>
            <span class="text-gray-500 dark:text-gray-400">Remaining</span>
        </div>
        <div class="flex justify-between mt-4">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-700">Extend Session</button>
            <button class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-red-600 dark:hover:bg-red-700">Log Out</button>
        </div>
    </div>
</div>

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

Отзывчивый компонент оповещения о тайм-ауте сеанса с 3D-дизайном, триадической цветовой схемой и поддержкой темного режима с использованием Tailwind CSS.

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

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 dark:bg-opacity-75 flex items-center justify-center p-4">
  <div class="relative bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-700 dark:to-gray-900 text-white rounded-lg shadow-lg p-6 max-w-sm w-full transform transition-all duration-300 scale-100 hover:scale-105">
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-opacity-5 rounded-lg pointer-events-none"></div>
    <div class="relative">
      <h2 class="text-2xl font-bold mb-4 text-shadow">Session Timeout</h2>
      <p class="mb-6 text-shadow-sm">Your session is about to expire. Please save any unsaved work.</p>
      <div class="flex justify-end space-x-4">
        <button class="bg-white text-blue-600 dark:text-gray-800 px-4 py-2 rounded-md font-semibold shadow hover:bg-gray-200 dark:hover:bg-gray-300 transition duration-300">Stay Logged In</button>
        <button class="bg-red-500 text-white px-4 py-2 rounded-md font-semibold shadow hover:bg-red-600 transition duration-300">Log Out</button>
      </div>
    </div>
  </div>
</div>

<style>
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>

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

Простой, монохроматический компонент оповещения о тайм-ауте сеанса Material Design для социальных сетей с адаптивным дизайном и поддержкой темных тем.

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

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-200" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
      </div>
    </div>
  </div>
</div>

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

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

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

                <div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
    <div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
            <button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
        </div>
    </div>
    <div class="absolute bottom-2 right-2">
        <img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
    </div>
</div>