Rechercher des composants

Catégories

Composants Alerte de délai d’expiration de la session

Alerte de délai d’expiration de la session

Notification pour les sessions utilisateur arrivant à expiration

Composant d’alerte de délai d’expiration de session

Un composant complexe et réactif d’alerte de délai d’expiration de session pour les sites Web gouvernementaux/de service public, avec un design inspiré de l’agriculture et de la nature avec des neutres froids. Comprend un compte à rebours, des options pour prolonger ou se déconnecter, et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-gray-900/80 backdrop-blur-sm">
  <div class="relative w-full max-w-md p-8 overflow-hidden bg-white rounded-3xl shadow-2xl dark:bg-gray-800 transform transition-all duration-300 ease-out sm:p-10 lg:p-12 animate-fade-in-up">
    <div class="absolute inset-0 z-0 flex items-center justify-center pointer-events-none opacity-5 dark:opacity-10">
      <svg class="w-full h-full text-blue-300 dark:text-blue-600 animate-pulse-slow" viewBox="0 0 200 200" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 0C44.77 0 0 44.77 0 100s44.77 100 100 100 100-44.77 100-100S155.23 0 100 0zm0 10c49.71 0 90 40.29 90 90s-40.29 90-90 90-90-40.29-90-90S50.29 10 100 10zm-50 40c-2.76 0-5 2.24-5 5S47.14 60 50 60s5-2.24 5-5-2.24-5-5-5zm100 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM50 150c-2.76 0-5 2.24-5 5S47.14 160 50 160s5-2.24 5-5-2.24-5-5-5zm100 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM100 50c-2.76 0-5 2.24-5 5S97.14 60 100 60s5-2.24 5-5-2.24-5-5-5zM100 150c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM40 100c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM160 100c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"></path>
      </svg>
    </div>

    <div class="relative z-10 text-center">
      <div class="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-blue-100 rounded-full dark:bg-blue-600/20">
        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <h3 class="mb-4 text-2xl font-bold text-gray-800 dark:text-gray-100 sm:text-3xl lg:text-4xl">
        Session Expiring Soon
      </h3>
      <p class="mb-6 text-base text-gray-600 dark:text-gray-300 sm:text-lg">
        For your security, your session will expire in <strong class="text-blue-600 dark:text-blue-400 font-extrabold text-xl">1:59</strong>.
      </p>

      <div class="w-32 h-32 mx-auto mb-8 flex items-center justify-center rounded-full bg-blue-50 dark:bg-blue-600/10 text-blue-700 dark:text-blue-300 border-4 border-blue-200 dark:border-blue-700 shadow-inner overflow-hidden animate-scale-bounce">
        <span class="text-5xl font-extrabold leading-none" id="countdown-timer">1:59</span>
      </div>

      <div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
        <button type="button" class="flex-1 px-6 py-3 text-lg font-semibold text-white bg-blue-600 rounded-full shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-200 ease-in-out hover:scale-105 active:scale-95 animate-fade-in">
          <span class="relative flex items-center justify-center">
            <svg class="w-5 h-5 mr-2 -ml-1 animate-spin" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2M16 16v2m-6 0h6m-6 0h6"></path>
            </svg>
            Extend Session
          </span>
        </button>
        <button type="button" class="flex-1 px-6 py-3 text-lg font-semibold text-gray-800 bg-gray-200 rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 transition transform duration-200 ease-in-out hover:scale-105 active:scale-95 animate-fade-in delay-100">
          Log Out Now
        </button>
      </div>

      <p class="mt-8 text-sm text-gray-500 dark:text-gray-400">
        Questions? Please contact <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">support</a>.
      </p>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scale-bounce {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  @keyframes pulse-slow {
    0%, 100% {
      opacity: 0.05;
    }
    50% {
      opacity: 0.15;
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .animate-scale-bounce {
    animation: scale-bounce 2s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-fade-in {
    animation: fade-in-up 0.6s ease-out forwards;
    animation-delay: 0.2s;
  }

  .animate-fade-in.delay-100 {
    animation-delay: 0.3s;
  }
</style>

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de délai d’expiration de session réactif avec un design arc-en-ciel dégradé multicolore, adapté aux sites Web gouvernementaux et de services publics. Dispose d’une prise en charge du mode sombre et de transitions fluides.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gradient-to-br from-blue-500/20 via-purple-500/20 to-pink-500/20 backdrop-blur-sm dark:from-gray-900/50 dark:via-gray-800/50 dark:to-gray-700/50" aria-labelledby="session-timeout-title" role="dialog" aria-modal="true">
  <div class="w-full max-w-md p-6 bg-white rounded-xl shadow-2xl relative overflow-hidden transform transition-all sm:my-8 sm:w-full sm:max-w-lg
              dark:bg-gray-800 dark:border dark:border-gray-700">
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-30">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-gradient-to-br from-red-400 to-yellow-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-red-600 dark:to-yellow-600"></div>
      <div class="absolute -bottom-8 -right-8 w-60 h-60 bg-gradient-to-br from-green-400 to-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-green-600 dark:to-blue-600"></div>
      <div class="absolute top-1/4 -right-20 w-52 h-52 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-purple-600 dark:to-pink-600"></div>
    </div>

    <div class="relative z-10 text-center">
      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 p-1 mb-4 sm:mb-6">
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.353 1.94 3.353h12.126c1.766 0 2.806-1.853 1.94-3.353L12.94 3.376c-.866-1.5-3.032-1.5-3.898 0L2.697 16.376zM12 15.75h.007v.008H12v-.008z" />
        </svg>
      </div>
      <h3 class="text-xl sm:text-2xl font-extrabold leading-6 text-gray-900 transition-colors duration-300 dark:text-gray-100 mb-2" id="session-timeout-title">
        Your Session is About to Expire!
      </h3>
      <div class="mt-2 text-base text-gray-700 dark:text-gray-300 transition-colors duration-300">
        <p>For your security, your session will automatically end in <span class="font-bold text-lg text-red-600 dark:text-red-400">1:45</span>.</p>
        <p class="mt-2">Please save any unsaved work.</p>
      </div>
      <div class="mt-5 sm:mt-6 flex flex-col sm:flex-row-reverse sm:space-x-reverse sm:space-x-4 space-y-3 sm:space-y-0">
        <button type="button" class="inline-flex w-full justify-center rounded-md border border-transparent bg-gradient-to-r from-teal-500 to-cyan-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm
                      dark:focus:ring-offset-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
          Extend Session
        </button>
        <button type="button" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm
                      dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-300">
          Log out now
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de délai d’expiration de session simple, propre et professionnel conçu pour les plateformes d’emploi/de carrière. Utilise un schéma de couleurs analogue et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-70">
  <div class="w-full max-w-sm p-6 space-y-4 bg-white rounded-lg shadow-xl md:max-w-md dark:bg-gray-800">
    <div class="flex items-center justify-center text-red-500 dark:text-red-400">
      <svg class="w-10 h-10" 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.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"></path>
      </svg>
    </div>
    <h3 class="text-xl font-semibold text-center text-gray-900 dark:text-gray-100">Session Expiring Soon!</h3>
    <p class="text-sm text-center text-gray-600 dark:text-gray-300">
      Your session is about to expire due to inactivity. Do you want to remain logged in?
    </p>
    <div class="flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
      <button type="button" class="w-full px-4 py-2 text-sm font-medium text-white transition-colors duration-200 bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">
        Stay Logged In
      </button>
      <button type="button" class="w-full px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
        Log Out
      </button>
    </div>
    <p class="text-xs text-center text-gray-500 dark:text-gray-400">
      You will be automatically logged out in 2:00
    </p>
  </div>
</div>

Composant d’alerte de délai d’expiration de session

Un composant complexe et réactif d’alerte de délai d’expiration de session conçu avec un style typographique suisse / international minimal et une palette de couleurs vives Candy/Sweet, adapté aux plateformes d’emploi et de carrière. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 font-sans">
  <div class="w-full max-w-md mx-auto rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out bg-white dark:bg-gray-800 border-4 border-pink-500 dark:border-pink-600">
    <div class="p-6 space-y-6 md:p-8 dark:bg-gray-800">
      <div class="flex items-center justify-between">
        <h3 class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight tracking-wider uppercase">
          Session Alert
        </h3>
        <svg class="h-9 w-9 text-pink-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" 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 class="space-y-4">
        <p class="text-lg text-gray-800 dark:text-gray-200 leading-relaxed">
          Your session is about to expire. Would you like to extend it and continue browsing exciting job opportunities?
        </p>
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Remaining time: <span class="font-bold text-mint-green-600 dark:text-mint-green-400" id="countdown">01:59</span>
        </p>
      </div>

      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-2">
        <button class="flex items-center justify-center px-6 py-3 border-2 border-pink-500 bg-pink-500 hover:bg-pink-600 active:bg-pink-700 text-white dark:text-white rounded-md text-base font-semibold shadow-md transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Extend Session
        </button>
        <button class="flex items-center justify-center px-6 py-3 border-2 border-mint-green-500 text-mint-green-600 bg-transparent hover:bg-mint-green-50 active:bg-mint-green-100 dark:text-mint-green-400 dark:hover:bg-mint-green-900 dark:active:bg-mint-green-800 rounded-md text-base font-semibold shadow-md transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-mint-green-500 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H5a3 3 0 01-3-3v-1m18-8V9a3 3 0 00-3-3h-2.586a1 1 0 01-.707-.293l-1.414-1.414A1 1 0 009.586 2H7a3 3 0 00-3 3v1M6 10H4a2 2 0 00-2 2v5a2 2 0 002 2h2v-7zm-2 0h2v7" />
          </svg>
          Logout
        </button>
      </div>
    </div>

    <div class="flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-100 dark:border-gray-700 md:p-6">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-pink-400 dark:border-pink-500 object-cover" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">Job Seeker since 2023</p>
        </div>
      </div>
      <a href="#" class="text-sm font-medium text-mint-green-600 hover:text-mint-green-700 dark:text-mint-green-400 dark:hover:text-mint-green-300 transition duration-200 ease-in-out">
        My Profile &rarr;
      </a>
    </div>
  </div>
</div>

Composant d’alerte de délai d’expiration de session - Arc-en-ciel neumorphe

Un composant Neumorphic Session Timeout Alert pour les applications de rencontres/sociales avec un schéma de couleurs arc-en-ciel dégradé. Il est réactif et prend en charge le mode sombre, incitant les utilisateurs à prolonger leur session ou à se déconnecter.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
  <div class="relative w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl neumorphic-rainbow-light dark:neumorphic-rainbow-dark md:max-w-md lg:max-w-lg">
    <div class="flex justify-center mb-6">
      <div class="w-20 h-20 rounded-full flex items-center justify-center neumorphic-icon-light dark:neumorphic-icon-dark">
        <svg class="w-10 h-10 text-red-500 transition-colors duration-300 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.542 2.768-1.542 3.533 0l3.057 6.164a4.5 4.5 0 01-.815 4.795L10 18.067l-5.025-4.009a4.5 4.5 0 01-.815-4.795l3.057-6.164z" clip-rule="evenodd"></path>
        </svg>
      </div>
    </div>

    <h2 class="text-center text-3xl font-extrabold text-gray-800 mb-4 bg-clip-text text-transparent neumorphic-rainbow-text-light dark:neumorphic-rainbow-text-dark transition-colors duration-300">
      Session Timeout
    </h2>
    <p class="text-center text-lg text-gray-700 mb-8 dark:text-gray-300 transition-colors duration-300">
      Your session is about to expire due to inactivity.
    </p>

    <div class="flex justify-around space-x-4">
      <button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
        <span class="block">Extend Session</span>
        <span class="block text-sm opacity-75"> (5:00)</span>
      </button>
      <button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
        Log Out
      </button>
    </div>

    <p class="text-center text-sm text-gray-500 mt-8 dark:text-gray-400 transition-colors duration-300">
      For your security, we automatically log you out after inactivity.
    </p>
  </div>

  <style>
    .neumorphic-rainbow-light {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: 10px 10px 20px #c7c7c7, -10px -10px 20px #ffffff, inset 0 0 0 #f0f0f0, inset 0 0 0 #e0e0e0;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .dark .neumorphic-rainbow-dark {
      background: linear-gradient(145deg, #2b2b2b, #202020);
      box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #313131, inset 0 0 0 #2b2b2b, inset 0 0 0 #202020;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .neumorphic-icon-light {
      background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
      box-shadow: inset 5px 5px 10px #c7c7c7, inset -5px -5px 10px #ffffff;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .dark .neumorphic-icon-dark {
      background: linear-gradient(145deg, #202020, #2b2b2b);
      box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .neumorphic-button-light {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: 7px 7px 14px #c2c2c2, -7px -7px 14px #ffffff;
    }
    .neumorphic-button-light:hover {
      box-shadow: 5px 5px 10px #c2c2c2, -5px -5px 10px #ffffff;
    }
    .neumorphic-button-light:active {
      box-shadow: inset 5px 5px 10px #c2c2c2, inset -5px -5px 10px #ffffff;
    }

    .dark .neumorphic-button-dark {
      background: linear-gradient(145deg, #2b2b2b, #202020);
      box-shadow: 7px 7px 14px #1a1a1a, -7px -7px 14px #313131;
    }
    .dark .neumorphic-button-dark:hover {
      box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #313131;
    }
    .dark .neumorphic-button-dark:active {
      box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
    }

    .neumorphic-rainbow-text-light {
      background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
    }
    .dark .neumorphic-rainbow-text-dark {
      background-image: linear-gradient(to right, #fee2e2, #fcd34d, #fef08a, #dcfce7, #bfdbfe, #c7d2fe, #e9d5ff);
    }

    .neumorphic-text-button-light {
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(to right, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #4f46e5, #9333ea);
    }
    .dark .neumorphic-text-button-dark {
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
    }
  </style>
</div>

Composant d’alerte de délai d’expiration de session

Un composant réactif d’alerte de délai d’expiration de session conçu pour les sites Web de voyage/tourisme, doté d’une interface utilisateur en mode sombre avec des tons bleus d’entreprise. Il fournit une communication claire sur l’expiration de la session et offre des options pour prolonger ou se déconnecter.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 dark:bg-black dark:bg-opacity-80">
  <div class="w-full max-w-md overflow-hidden rounded-lg bg-gray-800 shadow-2xl dark:bg-gray-900 border border-blue-700 dark:border-blue-900">
    <div class="bg-blue-700 p-4 text-white dark:bg-blue-900">
      <h3 class="text-xl font-bold">Session Expiring Soon!</h3>
    </div>
    <div class="p-6 text-gray-200 dark:text-gray-300">
      <p class="mb-4 leading-relaxed">
        Your session is about to expire due to inactivity. To continue planning your adventure, please choose an option below.
      </p>
      <div class="mb-6 flex items-center justify-center space-x-3 text-sm">
        <svg class="h-6 w-6 text-yellow-400" 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.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"></path>
        </svg>
        <span class="font-semibold text-yellow-200">Remaining time:</span>
        <span class="font-mono text-lg text-yellow-100">01:59</span>
      </div>
      <p class="mb-6 text-center text-sm italic text-gray-400 dark:text-gray-500">
        (Your data will be saved if you extend your session.)
      </p>

      <div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
        <button class="flex-1 rounded-md bg-blue-600 px-6 py-3 text-lg font-semibold text-white shadow-lg transition-colors duration-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">
          Extend Session
        </button>
        <button class="flex-1 rounded-md border border-gray-600 px-6 py-3 text-lg font-semibold text-gray-300 shadow-md transition-colors duration-200 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200">
          Log Out
        </button>
      </div>
    </div>
  </div>
</div>

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de délai d’expiration de session complexe et réactif avec une conception monospace/développeur, un schéma en noir et blanc et une couleur d’accentuation vive, adapté aux plates-formes éducatives. Comprend la prise en charge du mode sombre et un compte à rebours.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 font-mono">
  <div class="relative w-full max-w-md mx-auto p-6 border-2 border-green-500 bg-gray-800 text-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-50 overflow-hidden
              before:content-[''] before:absolute before:inset-0 before:border-t-2 before:border-l-2 before:border-green-500 before:pointer-events-none before:animate-pulse-border
              after:content-[''] after:absolute after:inset-0 after:border-b-2 after:border-r-2 after:border-green-500 after:pointer-events-none after:animate-pulse-border-alt">
    
    <!-- Terminal Header (simulated) -->
    <div class="flex items-center space-x-2 pb-4 mb-4 border-b border-green-500">
      <span class="block w-3 h-3 bg-red-500 rounded-full"></span>
      <span class="block w-3 h-3 bg-yellow-500 rounded-full"></span>
      <span class="block w-3 h-3 bg-lime-500 rounded-full"></span>
      <div class="flex-1 text-center text-green-400 text-sm"></div>
      <span class="text-green-400 text-sm">TERMINAL::SESSION_STATUS</span>
    </div>

    <h2 class="text-2xl font-bold mb-4 text-green-400 flex items-center">
      <svg class="w-6 h-6 mr-2" 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.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"></path>
      </svg>
      SESSION EXPIRED SOON
    </h2>

    <p class="text-gray-300 text-sm mb-6 dark:text-gray-300">
      Your current session is about to expire due to inactivity.
      Please confirm to extend your session or you will be logged out.
    </p>

    <!-- Countdown Section -->
    <div class="bg-gray-900 border border-green-500 p-4 mb-6 text-center shadow-inner relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-green-900/50 to-transparent animate-pulse-background pointer-events-none"></div>
      <p class="text-green-400 text-lg sm:text-xl md:text-2xl font-bold uppercase tracking-wider mb-2 z-10 relative">
        Session Timeout In:
      </p>
      <div class="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold flex justify-center items-baseline z-10 relative">
        <span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-right">00</span>
        <span class="text-green-500 mx-1 sm:mx-2">:</span>
        <span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-left">59</span>
      </div>
      <p class="text-gray-400 text-xs sm:text-sm mt-1 z-10 relative">(minutes:seconds)</p>
    </div>

    <!-- Actions -->
    <div class="flex flex-col sm:flex-row gap-4">
      <button class="flex-1 py-3 px-6 bg-green-600 text-white font-semibold uppercase text-sm
                     hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-800
                     active:bg-green-800 transition duration-200 ease-in-out
                     border border-green-500 shadow-md transform hover:scale-105 active:scale-100
                     sm:order-1">
        <span class="flex items-center justify-center">
          <svg class="w-5 h-5 mr-2" 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="M5 13l4 4L19 7"></path>
          </svg>
          EXTEND SESSION
        </span>
      </button>
      <button class="flex-1 py-3 px-6 bg-gray-700 text-gray-200 font-semibold uppercase text-sm
                     hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800
                     active:bg-gray-700 transition duration-200 ease-in-out
                     border border-gray-600 shadow-md transform hover:scale-105 active:scale-100
                     sm:order-2">
        <span class="flex items-center justify-center">
          <svg class="w-5 h-5 mr-2" 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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
          </svg>
          LOG OUT NOW
        </span>
      </button>
    </div>

    <!-- Background Terminal Glitch Effect (CSS for this is conceptual, would need actual JS for real glitch) -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full animate-flicker brightness-125 saturate-150" style="background-image: linear-gradient(to bottom, rgba(0,255,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,255,0,0.1) 100%); mix-blend-mode: overlay;"></div>
      <div class="absolute top-0 left-0 w-full h-full animate-scanline" style="background-image: linear-gradient(to bottom, transparent 49%, rgba(0,255,0,0.1) 50%, transparent 51%); background-size: 100% 3px;"></div>
    </div>

  </div>
</div>

<style>
  /* Keyframes for animations */
  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.01); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes pulse-border-alt {
    0% { transform: scale(1); opacity: 1;}
    50% { transform: scale(0.99); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes pulse-background {
    0% { transform: translateX(-100%); opacity: 0.2; }
    50% { transform: translateX(0%); opacity: 0.5; }
    100% { transform: translateX(100%); opacity: 0.2; }
  }
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    5% { opacity: 0.95; }
    10% { opacity: 1.05; }
    20% { opacity: 0.98; }
    30% { opacity: 1.02; }
    40% { opacity: 0.97; }
    50% { opacity: 1.03; }
    60% { opacity: 0.99; }
    70% { opacity: 1.01; }
    80% { opacity: 0.96; }
    90% { opacity: 1.04; }
  }
  @keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }

  .animate-pulse-border {
    animation: pulse-border 2.5s ease-in-out infinite;
  }
  .animate-pulse-border-alt {
    animation: pulse-border-alt 2.5s ease-in-out infinite reverse;
  }
  .animate-pulse-background {
    animation: pulse-background 3s linear infinite;
  }
  .animate-flicker {
    animation: flicker 0.5s infinite alternate;
  }
  .animate-scanline {
    animation: scanline 2s infinite linear;
  }
  .countdown-digit {
    display: inline-block;
    /* Monospace font styling for digits */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    text-shadow: 0 0 5px rgba(0,255,0,0.5), 0 0 10px rgba(0,255,0,0.3);
  }
  
  /* Dark mode specific styles */
  .dark .bg-gray-800 {
    background-color: #1a202c; /* Deeper dark for dialog */
  }
  .dark .text-gray-100 {
    color: #edf2f7; /* Lighter text in dark mode */
  }
  .dark .border-green-500 {
    border-color: #10B981; /* Maintain green accent in dark */
  }
  .dark .text-green-400 {
    color: #34D399; /* Adjust green text lightnes */
  }
  .dark .bg-gray-900 {
    background-color: #000000; /* Even darker inner background */
  }
  .dark .border-gray-600 {
    border-color: #4A5568;
  }
  .dark .text-gray-200 {
    color: #e2e8f0; /* Lighter text for secondary button */
  }
</style>

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de délai d’expiration de session simple, réactif et monochromatique avec des effets de néon/lueur, conçu pour les plateformes d’éducation/d’apprentissage. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/70 dark:bg-black/80 backdrop-blur-sm">
  <div class="relative p-6 rounded-lg shadow-2xl transition-all duration-300 ease-in-out
              bg-purple-900 border border-purple-700
              dark:bg-violet-950 dark:border-violet-700
              transform scale-95 opacity-0 animate-scale-in-fade-in" 
       style="animation-delay: 0.1s;">

    <!-- Glow Effect 1 (Purple) -->
    <div class="absolute -inset-1 rounded-lg bg-gradient-to-r from-purple-500 to-fuchsia-500 blur-xl opacity-75 animate-pulse-slow z-[-1]
                dark:from-violet-500 dark:to-indigo-500"></div>

    <!-- Glow Effect 2 (Subtle) -->
    <div class="absolute -inset-2 rounded-lg bg-gradient-to-r from-purple-400 to-fuchsia-400 opacity-20 blur-2xl z-[-1]
                dark:from-violet-400 dark:to-indigo-400"></div>


    <div class="text-center space-y-4 relative z-10">
      <svg class="mx-auto h-16 w-16 text-purple-300 animate-bounce-subtle dark:text-violet-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>

      <h3 class="text-3xl font-extrabold text-purple-100 drop-shadow-[0_0_10px_rgba(255,255,255,0.3)] dark:text-violet-100 sm:text-4xl">
        Session Expiring Soon!
      </h3>

      <p class="text-lg text-purple-200 leading-relaxed max-w-sm mx-auto dark:text-violet-200">
        Your session will expire in <span class="font-bold text-yellow-300 dark:text-amber-300">2:00</span> minutes due to inactivity.
      </p>

      <div class="flex flex-col sm:flex-row justify-center gap-4 pt-2">
        <button class="px-6 py-3 rounded-full text-lg font-semibold whitespace-nowrap
                       bg-purple-600 text-white shadow-lg shadow-purple-500/50 hover:bg-purple-700
                       focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-purple-900
                       transition-all transform hover:scale-105 active:scale-95
                       dark:bg-violet-600 dark:shadow-violet-500/50 dark:hover:bg-violet-700 dark:focus:ring-violet-400 dark:focus:ring-offset-violet-950">
          Keep Me Logged In
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold whitespace-nowrap
                       bg-transparent border border-purple-400 text-purple-200 hover:bg-purple-800 hover:border-purple-300
                       focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-purple-900
                       transition-all transform hover:scale-105 active:scale-95
                       dark:border-violet-400 dark:text-violet-200 dark:hover:bg-violet-800 dark:hover:border-violet-300 dark:focus:ring-violet-400 dark:focus:ring-offset-violet-950">
          Log Out Now
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
  }
  .animate-pulse-slow {
    animation: pulse-slow 4s infinite ease-in-out;
  }

  @keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-subtle {
    animation: bounce-subtle 3s infinite ease-in-out;
  }

  @keyframes scaleInFadeIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .animate-scale-in-fade-in {
    animation: scaleInFadeIn 0.5s ease-out forwards;
  }
</style>

Alerte de délai d’expiration de session Art Déco

Un composant d’alerte de délai d’expiration de session élégant et réactif avec un design inspiré de l’Art déco, avec des motifs géométriques, des neutres chauds et la prise en charge du mode sombre, adapté aux plateformes de divertissement.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-black dark:bg-opacity-80 font-serif">
  <div class="relative w-full max-w-md mx-auto overflow-hidden text-center bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-stone-800 rounded-lg shadow-xl border-4 border-amber-300 dark:border-amber-700 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <!-- Art Deco Top Border Pattern -->
    <div class="absolute top-0 left-0 right-0 h-6 bg-gradient-to-r from-amber-400 to-yellow-500 dark:from-stone-700 dark:to-stone-600 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>

    <div class="p-8 pb-6 pt-12 relative">
      <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-200 tracking-wide leading-tight drop-shadow-md">
        Session Expiring Soon!
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 leading-relaxed">
        Your session will end in <strong class="text-amber-800 dark:text-amber-400">2:00</strong>.
        Do you want to continue watching?
      </p>

      <!-- Geometric Separator -->
      <div class="w-full h-px bg-amber-300 dark:bg-stone-700 my-6 relative">
        <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-amber-400 dark:bg-stone-600 transform rotate-45 border border-amber-500 dark:border-stone-500"></div>
      </div>

      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <button class="px-8 py-3 rounded-full bg-amber-500 hover:bg-amber-600 text-white font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Continue Session
        </button>
        <button class="px-8 py-3 rounded-full border-2 border-amber-500 hover:border-amber-600 text-amber-700 font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:border-stone-500 dark:text-stone-200 dark:hover:border-stone-400 dark:hover:text-stone-100 dark:bg-transparent focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Log Out
        </button>
      </div>
    </div>

    <!-- Art Deco Bottom Border Pattern -->
    <div class="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-r from-yellow-500 to-amber-400 dark:from-stone-600 dark:to-stone-700 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>
  </div>
</div>

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de délai d’expiration de session simple et réactif avec un arrière-plan dégradé multicolore, conçu pour les sites Web d’événements et de conférences. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-sm p-0 rounded-2xl shadow-xl overflow-hidden
              bg-gradient-to-br from-purple-500 via-pink-500 to-red-500
              dark:from-purple-700 dark:via-pink-700 dark:to-red-700">
    <div class="p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-xl m-0.5">
      <div class="flex flex-col items-center justify-center text-center">
        <svg class="w-16 h-16 mb-4 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-2">
          Session Expired
        </h3>
        <p class="text-gray-600 dark:text-gray-300 text-base mb-6">
          Your session has timed out due to inactivity. Please log in again to continue.
        </p>
        <div class="w-full flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="w-full px-6 py-3 rounded-full text-white font-semibold transition-all duration-300 transform
                         bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600
                         shadow-lg hover:shadow-xl dark:shadow-none">
            Log In Now
          </button>
          <button class="w-full px-6 py-3 rounded-full font-semibold transition-all duration-300 transform
                         bg-gray-100 text-gray-800 hover:bg-gray-200
                         dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600
                         shadow-md hover:shadow-lg dark:shadow-none">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>