CCHub Logo CCHub Tailwind Collection
구성 요소 세션 시간 초과 경고 Session Timeout Alert 구성 요소

Session Timeout Alert 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

Session Timeout Alert 구성 요소

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

열다

세션 타임아웃 경고 컴포넌트 - Neumorphic Rainbow

그라데이션 무지개 색 구성표가 있는 데이트/소셜 앱을 위한 Neumorphic Session Timeout Alert 구성 요소입니다. 반응형이며 다크 모드를 지원하여 사용자에게 세션을 연장하거나 로그아웃하라는 메시지를 표시합니다.

열다

Session Timeout Alert 구성 요소

정부/공공 서비스 웹 사이트를 위한 복잡하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 멋진 뉴트럴 컬러와 함께 유기적/자연에서 영감을 받은 디자인이 특징입니다. 카운트다운 타이머, 확장 또는 로그아웃 옵션, 완전한 다크 모드 지원이 포함됩니다.

열다