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 komplexe, reaktionsschnelle Komponente für Sitzungs-Timeout-Alarme mit minimalistischem Graustufen-Design, die für Unternehmenswebsites geeignet ist und Unterstützung für dunkle Designs bietet.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine brutalistische, lebendige und reaktionsschnelle Komponente zur Warnung vor Sitzungs-Timeouts für Marktplatzplattformen, die den Dunkelmodus unterstützt.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine Session Timeout Alert Component in einem brutalistischen Stil mit roher, kühner Ästhetik, hohem Kontrast und reaktionsschnellen Effekten. Diese Komponente unterstützt dunkle Designs mit Tailwind CSS-Stil und verwendet Platzhalterbilder aus picsum.photos und randomuser.me.

Offen