Catégories

Composants Alerte de délai d’expiration de la session

Alerte de délai d’expiration de la session

Notification pour les sessions utilisateur arrivant à expiration

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de délai d’expiration de session réactif et compatible avec un thème sombre avec le style Glassmorphism, les tons de terre et la mise en page complexe à l’aide de Tailwind CSS. Comprend des effets de verre givré, du flou et de multiples éléments interactifs adaptés à un portfolio.

Ouvrir l’aperçu

                <div class="relative min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">

  <!-- Glassmorphism 배경 효과 -->
  <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-amber-500/20 to-green-600/20 backdrop-filter backdrop-blur-xl z-0"></div>

  <div class="relative bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-lg shadow-lg p-6 max-w-sm mx-auto z-10 border border-gray-200 dark:border-gray-700">
    
    <!-- 헤더 -->
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">세션 타임아웃</h3>
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>

    <!-- 내용 -->
    <div class="text-sm text-gray-700 dark:text-gray-200 mb-6">
      <p>보안상의 이유로 회원님의 세션이 곧 만료됩니다. 계속 활동하려면 "세션 연장" 버튼을 클릭해 주세요.</p>
      <p class="mt-2 font-semibold">남은 시간: <span class="text-amber-700 dark:text-amber-400">05:00</span></p>
    </div>

    <!-- 프로그레스 바 (예시) -->
    <div class="w-full bg-gray-300 dark:bg-gray-600 rounded-full h-2 mb-6">
      <div class="bg-green-600 dark:bg-green-500 h-2 rounded-full" style="width: 80%;"></div>
    </div>

    <!-- 버튼 -->
    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 border border-transparent rounded-md hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900">취소</button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-amber-600 border border-transparent rounded-md shadow-sm hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-900 dark:bg-amber-700 dark:hover:bg-amber-800">세션 연장</button>
    </div>

  </div>
</div>

Alerte de délai d’expiration de la session

Composant d’alerte de délai d’expiration de session avec style Microinteractions, effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Session Timeout</h3>
            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div class="mt-4">
            <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically soon.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-sm font-semibold text-gray-900 dark:text-white">Time remaining:</span>
                <span class="text-sm font-mono text-red-600 dark:text-red-400 animation-pulse">0:59</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end space-x-3">
            <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">Cancel</button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none">Extend Session</button>
        </div>
    </div>
</div>

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de temporisation de session conçu dans un style brutaliste avec une esthétique brute et audacieuse, un contraste élevé et des effets réactifs. Ce composant prend en charge le thème sombre à l’aide du style CSS Tailwind et utilise des images d’espace réservé de picsum.photos et randomuser.me.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
        <img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
        <div class="flex justify-between mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
            <p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
        </div>
        <div class="flex space-x-4">
            <button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
            <button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
        </div>
    </div>
</div>

Composant d’alerte de délai d’expiration de session

Un composant réactif d’alerte de délai d’expiration de session doté d’un style de conception 3D, d’une prise en charge du thème sombre et d’une intégration d’images d’espace réservé.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all hover:scale-105">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-md">
            <div class="ml-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
                <p class="text-gray-600 dark:text-gray-400">Your session will expire soon.</p>
            </div>
        </div>
        <div class="mb-4">
            <img src="https://picsum.photos/400/200" alt="Alert Image" class="w-full h-32 object-cover rounded-lg shadow-md">
        </div>
        <p class="text-gray-600 dark:text-gray-400">To maintain security, please save your work and log back in soon.</p>
        <div class="mt-6 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-lg shadow-md">Stay Logged In</button>
            <button class="px-4 py-2 text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg shadow-md">Log Out</button>
        </div>
    </div>
</div>