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

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

Un composant d’alerte de délai d’expiration de session de style brutaliste, dynamique et réactif pour les plateformes de marché, prenant en charge le mode sombre.

Aperçu

HTML Code

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/80 dark:bg-black/90">
  <div class="w-full max-w-md border-4 border-black dark:border-white bg-lime-400 dark:bg-fuchsia-700 shadow-[8px_8px_0px_black] dark:shadow-[8px_8px_0px_white] transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-[16px_16px_0px_black] dark:hover:shadow-[16px_16px_0px_white]">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <div class="mb-6 absolute top-0 left-0 w-full h-full bg-yellow-300 dark:bg-cyan-500 opacity-20 -z-10 rotate-3 scale-110"></div>
      <div class="mb-6 absolute top-0 left-0 w-full h-full bg-red-600 dark:bg-purple-800 opacity-20 -z-10 -rotate-3 scale-110"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-black dark:text-white mb-4 uppercase leading-tight tracking-tighter border-b-4 border-black dark:border-white pb-2">
        SESSION ALERT!<br>Time's Up!
      </h2>

      <p class="text-lg sm:text-xl text-black dark:text-white mb-6 font-bold">
        Your session is about to expire. Please extend your session to continue browsing cool stuff!
      </p>

      <div class="flex flex-col sm:flex-row gap-4">
        <button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-white dark:text-black bg-purple-700 dark:bg-lime-300 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
          Extend Session
        </button>
        <button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-black dark:text-white bg-orange-500 dark:bg-red-700 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
          Log Out Now
        </button>
      </div>

      <div class="mt-8 flex items-center justify-between border-t-4 border-black dark:border-white pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-none border-4 border-black dark:border-white object-cover">
          <div>
            <p class="text-base sm:text-lg font-bold text-black dark:text-white uppercase">Admin Hot-Line</p>
            <p class="text-sm sm:text-base text-gray-800 dark:text-gray-200 font-mono">Ping us for help!</p>
          </div>
        </div>
        <a href="#" class="text-sm sm:text-base font-bold text-blue-700 dark:text-blue-300 uppercase underline decoration-4 underline-offset-4 decoration-black dark:decoration-white hover:text-blue-900 dark:hover:text-blue-100 transition-colors duration-200">Contact Support</a>
      </div>
    </div>
  </div>
</div>

Composants associés

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

Composant d’alerte de délai d’expiration de session - Thème Art Déco Candy

Un composant d’alerte de délai d’expiration de session simple et réactif avec un design inspiré de l’Art déco, utilisant des couleurs vives de bonbon. Optimisé pour la documentation/les sites wiki, avec prise en charge du mode sombre.

Ouvrir

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