Session Timeout Alert

Session Timeout Alert Component

A session timeout alert component designed with microinteractions in mind, utilizing a grayscale color scheme and responsive design with dark theme support. Ideal for e-commerce platforms to alert users about session expiration.

Open Preview

                <div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
        <div class="text-gray-900 dark:text-white">
            <h2 class="text-lg font-semibold">Session Timeout</h2>
            <p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
        </div>
    </div>
    <div class="flex space-x-2 mt-4 sm:mt-0">
        <button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
        <button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
    </div>
</div>

A simple, dark mode session timeout alert component for e-commerce sites, designed with pastel colors and responsiveness using TailwindCSS.

Open Preview

                <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
  <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
    <h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
    <p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
    <div class="flex justify-end space-x-2">
      <button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
      <button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</button>
    </div>
  </div>
</div>

Session Timeout Alert Component

A responsive session timeout alert component designed with glassmorphism style and suitable for dark themes. It features a pastel color scheme, frosted glass-like translucent elements with blur effects, and some interactive features like a countdown timer and action buttons.

Open Preview

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

Session Timeout Alert Component

A minimalist session timeout alert component for e-commerce websites, designed with a monochromatic color scheme and responsive with dark theme support using Tailwind CSS.

Open Preview

                <div class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-90 dark:bg-gray-900">
    <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-5">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Your session is about to expire due to inactivity. Please take action to continue your shopping experience. </p>
        <div class="flex justify-between">
            <button class="bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-2 px-4 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition">Stay Logged In</button>
            <button class="bg-red-500 dark:bg-red-700 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-800 transition">Log Out</button>
        </div>
    </div>
</div>

Session Timeout Alert

A responsive session timeout alert component with dark theme support, designed with a minimalist/flat aesthetic using pastel colors. It features a clean layout with clear typography and subtle visual cues for user interaction, suitable for dashboard environments.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <!-- Close Button -->
    <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>

    <!-- Icon -->
    <div class="flex justify-center mb-4">
      <div class="p-3 bg-yellow-200 dark:bg-yellow-600 rounded-full">
        <svg class="h-8 w-8 text-yellow-700 dark:text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
    </div>

    <!-- Title and Description -->
    <h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-2">Session Timeout</h2>
    <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
      Your session is about to expire. Please save your work and log in again.
    </p>

    <!-- Progress Bar (Simulated) -->
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6">
      <div class="bg-pink-400 dark:bg-pink-600 h-2.5 rounded-full" style="width: 75%;"></div>
    </div>

    <!-- Action Buttons -->
    <div class="flex space-x-4">
      <button class="flex-1 px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200">
        Save Draft
      </button>
      <button class="flex-1 px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white rounded-md hover:bg-purple-500 dark:hover:bg-purple-700 transition-colors duration-200">
        Log Out
      </button>
    </div>
  </div>
</div>

Session Timeout Alert Component

A responsive session timeout alert component designed for e-commerce with engaging animations and a dark theme. It features a warning message, a countdown timer, and options to extend the session or log out.

Open Preview

                <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

A responsive Session Timeout Alert Component with 3D design, triadic color scheme, and dark mode support using Tailwind CSS.

Open Preview

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 dark:bg-opacity-75 flex items-center justify-center p-4">
  <div class="relative bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-700 dark:to-gray-900 text-white rounded-lg shadow-lg p-6 max-w-sm w-full transform transition-all duration-300 scale-100 hover:scale-105">
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-opacity-5 rounded-lg pointer-events-none"></div>
    <div class="relative">
      <h2 class="text-2xl font-bold mb-4 text-shadow">Session Timeout</h2>
      <p class="mb-6 text-shadow-sm">Your session is about to expire. Please save any unsaved work.</p>
      <div class="flex justify-end space-x-4">
        <button class="bg-white text-blue-600 dark:text-gray-800 px-4 py-2 rounded-md font-semibold shadow hover:bg-gray-200 dark:hover:bg-gray-300 transition duration-300">Stay Logged In</button>
        <button class="bg-red-500 text-white px-4 py-2 rounded-md font-semibold shadow hover:bg-red-600 transition duration-300">Log Out</button>
      </div>
    </div>
  </div>
</div>

<style>
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>

Session Timeout Alert

A simple, monochromatic Material Design session timeout alert component for social media, with responsive design and dark theme support.

Open Preview

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
      </div>
    </div>
  </div>
</div>

Session Timeout Alert Component

A session timeout alert component that triggers an engaging animation. It features a responsive design, suitable for dashboards with a pastel color scheme and dark theme support. It includes interactive elements, allowing users to extend their session or log out.

Open Preview

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

Session Timeout Alert

Retro/Vintage Session Timeout Alert Component with Earth tones, responsive design and dark theme support.

Open Preview

                <div class="fixed inset-0 bg-gray-800 bg-opacity-75 z-50">
  <div class="flex items-center justify-center min-h-screen">
    <div class="relative bg-stone-100 p-8 rounded-lg shadow-xl max-w-sm w-full mx-4 dark:bg-stone-800">
      <div class="text-center">
        <svg class="mx-auto mb-4 h-12 w-12 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856a1 1 0 00.77-1.612L11.73 2.61a1 1 0 00-1.464 0L3.308 19.388a1 1 0 00.77 1.612z"></path></svg>
        <h3 class="mb-5 text-lg font-bold text-stone-900 dark:text-stone-100">Session Timeout</h3>
        <p class="mb-5 text-sm text-stone-700 dark:text-stone-300">Your session is about to expire. Would you like to stay logged in?</p>
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-amber-600 text-base font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 sm:col-start-2 sm:text-sm dark:bg-amber-700 dark:hover:bg-amber-800">
          Stay Logged In
        </button>
      </div>
    </div>
  </div>
</div>

Categories

Session Timeout Alert