CCHub Logo CCHub Tailwind Collection
Komponenten Warnung bei Sitzungs-Timeout Komponente "Sitzungs-Timeout-Warnung"

Komponente "Sitzungs-Timeout-Warnung"

Eine reaktionsschnelle Komponente für die Zeitüberschreitung von Sitzungen, die für den E-Commerce mit ansprechenden Animationen und einem dunklen Thema entwickelt wurde. Es verfügt über eine Warnmeldung, einen Countdown-Timer und Optionen zum Verlängern der Sitzung oder zum Abmelden.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Komponente "Sitzungs-Timeout-Warnung"

Eine reaktionsschnelle Komponente für die Benachrichtigung über die Zeitüberschreitung von Sitzungen mit einem 3D-Designstil, Unterstützung für dunkle Designs und der Integration von Platzhalterbildern.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine minimalistische Komponente für Sitzungs-Timeout-Benachrichtigungen für E-Commerce-Websites, die mit einem monochromatischen Farbschema gestaltet und mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS reagiert.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine Komponente für die Warnung bei der Zeitüberschreitung der Sitzung, die eine ansprechende Animation auslöst. Es verfügt über ein responsives Design, das für Dashboards mit pastellfarbenem Farbschema und Unterstützung für dunkle Themen geeignet ist. Es enthält interaktive Elemente, mit denen Benutzer ihre Sitzung verlängern oder sich abmelden können.

Offen