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

Komponente "Sitzungs-Timeout-Warnung"

Eine reaktionsschnelle Komponente für Sitzungs-Timeout-Alarme, die im Glassmorphism-Stil entwickelt wurde und für dunkle Themen geeignet ist. Es verfügt über ein pastellfarbenes Farbschema, glasartige, durchscheinende Elemente mit Unschärfeeffekten und einige interaktive Funktionen wie einen Countdown-Timer und Aktionstasten.

Vorschau

HTML-Code 

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
        <div class="flex justify-around mt-4">
            <button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
            <button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Warnung bei Sitzungs-Timeout

Eine einfache, monochromatische Material Design-Session-Timeout-Alarmkomponente für soziale Medien mit responsivem Design und Unterstützung für dunkle Themen.

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

Komponente "Sitzungs-Timeout-Warnung"

Eine Komponente für Sitzungs-Timeout-Alarme, die unter Berücksichtigung von Mikrointeraktionen entwickelt wurde und ein Graustufen-Farbschema und ein responsives Design mit Unterstützung für dunkle Designs verwendet. Ideal für E-Commerce-Plattformen, um Benutzer über den Ablauf von Sitzungen zu informieren.

Offen