Session Timeout Alert 구성 요소
매력적인 애니메이션을 트리거하는 세션 시간 초과 경고 구성 요소입니다. 파스텔 색 구성표와 어두운 테마 지원이 있는 대시보드에 적합한 반응형 디자인이 특징입니다. 여기에는 사용자가 세션을 연장하거나 로그아웃할 수 있는 대화형 요소가 포함되어 있습니다.
HTML 코드
<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>관련 구성 요소
아르데코 세션 타임아웃 경고
아르데코에서 영감을 받은 디자인의 스타일리시하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 기하학적 패턴, 따뜻한 뉴트럴 색상 및 다크 모드 지원을 특징으로 하며 엔터테인먼트 플랫폼에 적합합니다.
스큐어모픽 세션 타임아웃 경고
블로그/콘텐츠 사이트를 위해 설계된 회색조의 간단한 Skeuomorphic 스타일 세션 시간 초과 경고 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.