세션 시간 초과 경고

Session Timeout Alert 구성 요소

마이크로 인터랙션을 염두에 두고 설계된 세션 시간 초과 경고 구성 요소로, 회색조 색 구성표와 어두운 테마를 지원하는 반응형 디자인을 활용합니다. 전자 상거래 플랫폼에서 사용자에게 세션 만료에 대해 경고하는 데 적합합니다.

미리보기 열기

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

Session Timeout Alert 구성 요소

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>

Session Timeout Alert 구성 요소

전자 상거래 웹 사이트를 위한 미니멀리스트 세션 시간 초과 경고 구성 요소로, 단색 색 구성표로 디자인되고 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>

Session Timeout Alert 구성 요소

매력적인 애니메이션과 어두운 테마로 전자 상거래를 위해 설계된 반응형 세션 시간 초과 경고 구성 요소입니다. 경고 메시지, 카운트다운 타이머 및 세션 연장 또는 로그아웃 옵션이 있습니다.

미리보기 열기

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

세션 시간 초과 경고

Tailwind CSS를 사용하여 3D 디자인, 트라이어딕 색 구성표 및 다크 모드를 지원하는 반응형 세션 시간 초과 경고 구성 요소입니다.

미리보기 열기

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

Session Timeout Alert 구성 요소

매력적인 애니메이션을 트리거하는 세션 시간 초과 경고 구성 요소입니다. 파스텔 색 구성표와 어두운 테마 지원이 있는 대시보드에 적합한 반응형 디자인이 특징입니다. 여기에는 사용자가 세션을 연장하거나 로그아웃할 수 있는 대화형 요소가 포함되어 있습니다.

미리보기 열기

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

세션 시간 초과 경고

레트로/빈티지 세션 타임아웃 경고 컴포넌트는 어스 톤, 반응형 디자인 및 어두운 테마를 지원합니다.

미리보기 열기

                <div class="fixed inset-0 bg-gray-800 bg-opacity-75 z-50">
  <div class="flex items-center justify-center min-h-screen">
    <div class="relative bg-stone-100 p-8 rounded-lg shadow-xl max-w-sm w-full mx-4 dark:bg-stone-800">
      <div class="text-center">
        <svg class="mx-auto mb-4 h-12 w-12 text-amber-500" 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.856a1 1 0 00.77-1.612L11.73 2.61a1 1 0 00-1.464 0L3.308 19.388a1 1 0 00.77 1.612z"></path></svg>
        <h3 class="mb-5 text-lg font-bold text-stone-900 dark:text-stone-100">Session Timeout</h3>
        <p class="mb-5 text-sm text-stone-700 dark:text-stone-300">Your session is about to expire. Would you like to stay logged in?</p>
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-amber-600 text-base font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 sm:col-start-2 sm:text-sm dark:bg-amber-700 dark:hover:bg-amber-800">
          Stay Logged In
        </button>
      </div>
    </div>
  </div>
</div>

카테고리

세션 시간 초과 경고