구성 요소 세션 시간 초과 경고 Session Timeout Alert 구성 요소

Session Timeout Alert 구성 요소

반응형, 어두운 테마와 호환되는 세션 시간 초과 경고 구성 요소로, Glassmorphism 스타일, 어스 톤 및 Tailwind CSS를 사용하는 복잡한 레이아웃이 있습니다. 젖빛 유리 효과, 흐림 효과 및 포트폴리오에 적합한 여러 대화형 요소가 특징입니다.

미리 보기

HTML 코드

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

Session Timeout Alert 구성 요소

미리 보기

HTML 코드

관련 구성 요소

세션 시간 초과 경고 구성 요소 - Neumorphism Candy

Session Timeout Alert 구성 요소

Session Timeout Alert 구성 요소