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 d’alerte de délai d’expiration de session au design minimaliste et plat avec une palette de couleurs rétro/vintage, avec une mise en page simple, une réactivité totale et une prise en charge du mode sombre pour les sites de blog/contenu.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-500 bg-opacity-60 dark:bg-gray-900 dark:bg-opacity-75 font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-orange-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 border-t-4 border-orange-500 dark:border-orange-600 transform transition-all duration-300 ease-in-out scale-100 hover:scale-105 hover:shadow-2xl">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-xl md:text-2xl font-bold text-orange-700 dark:text-orange-400">Session Expiring Soon!</h3>
      <svg class="w-8 h-8 text-orange-600 dark:text-orange-500" 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 16zm-1-8a1 1 0 10-2 0v4a1 1 0 102 0v-4zm-1-3a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <p class="text-sm md:text-base mb-6 text-stone-700 dark:text-stone-200 leading-relaxed">
      Your session is about to expire due to inactivity. Please extend your session to continue browsing.
    </p>
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
      <button class="flex-1 px-5 py-2 rounded-md font-semibold text-sm bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white shadow-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        Extend Session
      </button>
      <button class="flex-1 px-5 py-2 rounded-md font-semibold text-sm bg-gray-300 hover:bg-gray-400 dark:bg-stone-700 dark:hover:bg-stone-600 text-stone-700 dark:text-stone-200 shadow-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
        Log Out
      </button>
    </div>
  </div>
</div>

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.

Ouvrir Aperçu

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

Composant d’alerte de délai d’expiration de session - Neumorphism Candy

Un composant réactif d’alerte de délai d’expiration de session avec un style de conception de neumorphisme, utilisant un schéma de couleurs bonbon/doux. Les caractéristiques incluent la prise en charge du mode sombre et un compte à rebours pour les marques de mode/beauté.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-pink-100 dark:bg-gray-900 p-4 font-sans">
  <div class="w-full max-w-sm rounded-3xl shadow-xl p-8 bg-gradient-to-br from-pink-200 to-purple-200 dark:from-gray-700 dark:to-gray-800
              flex flex-col items-center justify-center
              transform transition-all duration-300 ease-in-out
              dark:border dark:border-gray-600
              shadow-[10px_10px_20px_#bebebe,-10px_-10px_20px_#ffffff] dark:shadow-[10px_10px_20px_#1a1a1a,-10px_-10px_20px_#333333]">

    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600
                shadow-lg transition-transform duration-300 ease-in-out transform scale-95 hover:scale-100
                shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#5e34b7,inset_-5px_-5px_10px_#2c2c2c]">
      <svg class="w-10 h-10 text-white dark:text-gray-200" 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.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>

    <h3 class="mt-6 mb-2 text-2xl font-bold text-pink-700 dark:text-pink-300 text-center">
      Session Timeout
    </h3>
    <p class="text-center text-gray-700 dark:text-gray-400 text-sm mb-6 max-w-xs">
      Your session is about to expire due to inactivity. Save your work or you will be logged out in:
    </p>

    <div class="relative w-36 h-12 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-gray-600 dark:to-gray-700
                shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#4a4a4a,inset_-5px_-5px_10px_#2c2c2c]
                flex items-center justify-center mb-8 transition-all duration-300 ease-in-out">
      <span class="text-3xl font-extrabold text-white dark:text-white" id="countdown">00:59</span>
    </div>

    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 w-full justify-center">
      <button class="flex-1 py-3 px-6 rounded-3xl font-semibold
                     bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800
                     text-white shadow-md
                     hover:from-purple-500 hover:to-indigo-600 dark:hover:from-purple-800 dark:hover:to-indigo-900
                     active:shadow-inner active:from-purple-300 active:to-indigo-400 dark:active:from-purple-600 dark:active:to-indigo-700
                     transition-all duration-200 ease-in-out
                     shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
        Stay Logged In
      </button>
      <button class="flex-1 py-3 px-6 rounded-3xl font-semibold
                     bg-gradient-to-br from-pink-400 to-rose-500 dark:from-pink-700 dark:to-rose-800
                     text-white shadow-md
                     hover:from-pink-500 hover:to-rose-600 dark:hover:from-pink-800 dark:hover:to-rose-900
                     active:shadow-inner active:from-pink-300 active:to-rose-400 dark:active:from-pink-600 dark:active:to-rose-700
                     transition-all duration-200 ease-in-out
                     shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
        Log Out
      </button>
    </div>
  </div>
</div>

Composant d’alerte de délai d’expiration de session - Aquarelle/Artistique

Un composant complexe et réactif d’alerte de délai d’expiration de session pour le commerce électronique, avec un design aquarelle/artistique avec une palette de couleurs arc-en-ciel dégradée et la prise en charge du mode sombre. Comprend des options pour prolonger ou se déconnecter.

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-85 font-sans">
  <div class="relative w-full max-w-md p-6 overflow-hidden rounded-3xl shadow-2xl backdrop-blur-sm dark:shadow-purple-900/50 transform transition-all duration-300 ease-in-out scale-100 opacity-100
      bg-gradient-to-br from-purple-200 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-blue-800 dark:to-green-800
      border border-purple-300 dark:border-purple-700
      flex flex-col items-center text-center
      " style="background-image: url('https://picsum.photos/seed/watercolor_bg/800/600?blur=1'); background-size: cover; background-position: center; border-radius: 2rem;">

        <!-- Artistic Overlay / Texture -->
        <div class="absolute inset-0 bg-gradient-to-br from-red-500/20 via-yellow-500/20 to-blue-500/20 opacity-70 dark:opacity-50" style="mask-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'noiseFilter\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.5\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feComposite operator=\'in\' in2=\'SourceGraphic\' result=\'comp\'></feComposite></filter><rect width=\'100%\' height=\'100%\' filter=\'url(#noiseFilter)\'/></svg>'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; z-index: 0; border-radius: 2rem;"></div>

        <!-- Content Wrapper with internal padding -->
        <div class="relative z-10 p-4 sm:p-6 lg:p-8 ">
            <div class="relative mb-6 w-24 h-24 sm:w-28 sm:h-28 mx-auto -mt-16 sm:-mt-20 lg:-mt-24 rounded-full p-2
                        bg-gradient-to-br from-red-400 via-orange-400 to-yellow-400 dark:from-red-600 dark:via-orange-600 dark:to-yellow-600
                        shadow-lg ring-4 ring-white dark:ring-gray-800 transform rotate-3 hover:rotate-0 transition-transform duration-300">
                <svg class="h-full w-full text-white dark:text-gray-200 p-2" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Zm0 13a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm0-8a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1Z"/>
                </svg>
            </div>

            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                       bg-clip-text text-transparent
                       bg-gradient-to-r from-purple-700 via-pink-500 to-red-500
                       dark:from-blue-400 dark:via-green-300 dark:to-yellow-200 line-clamp-2">
                Session Ending Soon!
            </h2>

            <p class="text-base sm:text-lg lg:text-xl text-gray-700 dark:text-gray-200 mb-6 font-medium leading-relaxed max-w-prose mx-auto">
                Your session is about to expire. Would you like to stay logged in or log out?
            </p>

            <div class="flex flex-col sm:flex-row justify-center gap-4 w-full">
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-gradient-to-br from-blue-400 via-teal-400 to-green-400 text-white shadow-md
                                hover:from-blue-500 hover:via-teal-500 hover:to-green-500
                                focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75
                                dark:from-blue-600 dark:via-teal-600 dark:to-green-600 dark:hover:from-blue-700 dark:hover:via-teal-700 border border-blue-500 dark:border-blue-700">
                    Extend Session
                </button>
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-white text-gray-800 shadow-md border border-gray-300
                                hover:bg-gray-100 hover:text-gray-900
                                focus:outline-none focus:ring-4 focus:ring-gray-300 focus:ring-opacity-75
                                dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white">
                    Log Out
                </button>
            </div>

            <div class="mt-8 text-sm sm:text-base text-gray-500 dark:text-gray-400">
                <p class="mb-2"><span class="font-semibold">Automatic logout in:</span> <span class="text-purple-600 dark:text-blue-400 font-bold text-lg">02:30</span></p>
                <p>Enjoy your shopping experience!</p>
            </div>

            <!-- Artistic Footer Element -->
            <div class="mt-8 h-2 w-3/4 mx-auto rounded-full
                        bg-gradient-to-r from-red-300 via-purple-300 to-blue-300
                        dark:from-red-600 dark:via-purple-600 dark:to-blue-600
                        shadow-inner opacity-80"></div>
        </div>
    </div>
</div>

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 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-85">
  <div class="relative w-full max-w-sm p-6 overflow-hidden text-center transition-all duration-300 ease-in-out transform rounded-lg shadow-2xl bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 md:max-w-md lg:max-w-lg">
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <!-- Art Deco Geometric Pattern Overlay -->
      <svg class="w-full h-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
        <pattern id="squares-deco" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
          <rect x="0" y="0" width="2" height="2" fill="currentColor"/>
          <rect x="5" y="5" width="2" height="2" fill="currentColor"/>
        </pattern>
        <rect width="100%" height="100%" fill="url(#squares-deco)" class="text-pink-400 dark:text-purple-600"/>
        <path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="currentColor" stroke-width="2" class="text-pink-500 dark:text-purple-700"/>
        <circle cx="50" cy="50" r="40" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
        <line x1="20" y1="50" x2="80" y2="50" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
        <line x1="50" y1="20" x2="50" y2="80" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
      </svg>
    </div>

    <div class="relative z-10 space-y-4">
      <div class="inline-flex items-center justify-center p-3 rounded-full bg-pink-400 text-white dark:bg-pink-600 shadow-lg">
        <svg class="w-8 h-8 md:w-10 md: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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <h3 class="text-xl md:text-2xl font-extrabold text-purple-800 dark:text-purple-100 font-serif tracking-wide border-b-2 border-purple-500 dark:border-purple-300 pb-2 inline-block">
        Session Expiring Soon!
      </h3>
      <p class="text-sm md:text-base text-purple-700 dark:text-purple-200 leading-relaxed">
        Your session will expire in <strong class="font-bold text-pink-600 dark:text-pink-300">02:00</strong> minutes due to inactivity. Do you want to remain logged in?
      </p>
      <div class="flex flex-col sm:flex-row justify-center gap-3 pt-2">
        <button class="flex-1 px-5 py-2 text-sm font-semibold rounded-full bg-pink-500 text-white shadow-lg transform transition-transform duration-200 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-pink-300 dark:bg-pink-700 dark:hover:bg-pink-800 dark:focus:ring-pink-600">
          Keep Me Logged In
        </button>
        <button class="flex-1 px-5 py-2 text-sm font-semibold rounded-full text-purple-700 bg-white shadow-lg border border-purple-300 transform transition-transform duration-200 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:bg-purple-900 dark:text-purple-200 dark:border-purple-600 dark:hover:bg-purple-800 dark:focus:ring-purple-500">
          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 simple, réactif et compatible avec le mode sombre, à l’esthétique industrielle et discrète, adapté aux systèmes de réservation et aux systèmes de réservation.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-black/70 font-sans">
  <div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
    
    <!-- Header with exposed screw-like elements -->
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 border-b-2 border-gray-300 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wide">Session Timeout</h3>
      <div class="flex space-x-2">
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
      </div>
    </div>

    <!-- Content body -->
    <div class="p-6 text-center">
      <svg class="mx-auto mb-4 h-12 w-12 text-gray-500 dark:text-gray-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>
      <p class="mb-4 text-gray-700 dark:text-gray-300">
        Your session is about to expire due to inactivity.
      </p>
      <p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
        Please extend your session to continue.
      </p>
      <div class="mt-6">
        <p class="text-2xl font-bold text-gray-800 dark:text-gray-200 tabular-nums">00:59</p>
      </div>
    </div>

    <!-- Footer with utilitarian buttons -->
    <div class="flex flex-col sm:flex-row justify-end gap-3 p-4 bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-300 dark:border-gray-700">
      <button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-300 dark:bg-gray-600 rounded-md border-2 border-gray-400 dark:border-gray-500 hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200 ease-in-out uppercase tracking-wide">
        Logout
      </button>
      <button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-100 dark:text-gray-900 bg-gray-600 dark:bg-gray-400 rounded-md border-2 border-gray-700 dark:border-gray-300 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 ease-in-out uppercase tracking-wide">
        Extend Session
      </button>
    </div>
  </div>
</div>

RetroSessionTimeoutAlert

Un composant d’alerte de délai d’expiration de session à thème rétro avec des tons de terre, conçu pour les sites de blogs/contenus. Dispose d’un look nostalgique avec un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/40 dark:bg-black/50 backdrop-blur-sm">
  <div class="relative p-6 rounded-lg shadow-xl max-w-sm w-full bg-stone-100 text-stone-800 border-4 border-stone-400 dark:bg-stone-800 dark:text-stone-100 dark:border-stone-600 font-mono animate-fade-in-down">
    <div class="absolute -top-4 -right-4 bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-100 px-3 py-1 rounded-full text-sm font-bold shadow-md transform rotate-2 origin-top-right border-2 border-stone-500 dark:border-stone-700">
      ALERT!
    </div>
    
    <div class="flex items-center space-x-4 mb-4">
      <div class="w-12 h-12 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-full text-white text-3xl font-bold border-2 border-red-700 dark:border-red-900 shadow-inner flex-shrink-0">
        !
      </div>
      <div>
        <h3 class="text-xl font-bold mb-1 uppercase tracking-wide text-stone-700 dark:text-stone-200">
          Session Expiring Soon
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-400">
          Due to inactivity, your session will expire in:
        </p>
      </div>
    </div>
    
    <div class="flex justify-center items-baseline mb-6 space-x-2">
      <span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownMinutes">04</span>
      <span class="text-3xl font-bold text-red-600 dark:text-red-400 leading-none">:</span>
      <span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownSeconds">59</span>
    </div>
    
    <p class="text-center text-sm mb-6 text-stone-600 dark:text-stone-400">
      Click 'Continue Session' to stay logged in and prevent data loss.
    </p>
    
    <div class="flex flex-col sm:flex-row gap-3">
      <button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-lime-600 hover:bg-lime-700 text-white shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-lime-800 active:border-b-0 dark:bg-lime-700 dark:hover:bg-lime-800 dark:border-lime-900">
        Continue Session
      </button>
      <button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-stone-300 hover:bg-stone-400 text-stone-800 shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-stone-500 active:border-b-0 dark:bg-stone-600 dark:hover:bg-stone-700 dark:text-stone-200 dark:border-stone-800">
        Logout
      </button>
    </div>
  </div>
</div>

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

  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
</style>

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

Composant d’alerte de délai d’expiration de session complexe, de style Neumorphic, pour l’e-commerce, doté d’une palette de couleurs monochromatique et d’un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900 font-sans">

  <!-- Neumorphic Session Timeout Card -->
  <div class="w-full max-w-md p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <!-- Header -->
    <div class="flex items-center mb-6">
      <div class="w-12 h-12 rounded-full flex items-center justify-center shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mr-4">
        <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-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>
      <h2 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">Session Timeout</h2>
    </div>

    <!-- Progress Bar (Monochromatic Indigo) -->
    <div class="mb-6 h-4 rounded-full shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark bg-gray-300 dark:bg-gray-700 overflow-hidden">
      <div class="h-full bg-indigo-500 dark:bg-indigo-600 rounded-full" style="width: 75%;"></div>
    </div>

    <!-- Message -->
    <p class="text-center text-lg mb-8">
      Your session is about to expire due to inactivity.
      <span class="font-semibold text-indigo-700 dark:text-indigo-300">Please choose an option to continue.</span>
    </p>

    <!-- Timer Display -->
    <div class="flex items-center justify-center mb-8">
      <div class="text-5xl font-extrabold text-indigo-800 dark:text-indigo-200 tracking-wide">
        00:<span class="animate-pulse">45</span>
      </div>
    </div>

    <!-- Call to Action Buttons -->
    <div class="flex flex-col space-y-4">
      <button class="w-full py-4 rounded-xl shadow-neumorphic-light hover:shadow-neumorphic-hover-light dark:shadow-neumorphic-dark dark:hover:shadow-neumorphic-hover-dark bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1">
        Continue Session
      </button>
      <button class="w-full py-4 rounded-xl shadow-neumorphic-light hover:shadow-neumorphic-hover-light dark:shadow-neumorphic-dark dark:hover:shadow-neumorphic-hover-dark bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1">
        Log Out
      </button>
    </div>

    <!-- Footer Link -->
    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Need help? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Contact Support</a>
    </div>

  </div>

</div>

<style>
  /* Base Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #afafaf, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
  }

  /* Hover State Shadows */
  .shadow-neumorphic-hover-light {
    box-shadow: 4px 4px 8px #afafaf, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-hover-dark {
    box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
  }

  /* Inset Shadows for elements that appear "pressed in" */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #afafaf, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
  }
</style>

Alerte de délai d’expiration de session skeuomorphique

Un composant simple, de style Skeuomorphic, avec des couleurs en niveaux de gris, conçu pour les sites de blogs/de contenu. Il comprend un design réactif et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4 z-50 dark:bg-opacity-75">
  <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg shadow-xl border-t-4 border-gray-300 dark:border-gray-700 max-w-sm mx-auto transform transition duration-300 hover:scale-105">
    <div class="flex flex-col items-center">
      <div class="text-5xl mb-4" role="img" aria-label="Clock Icon">⏳</div>
      <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-100">Session Expiring!</h2>
      <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Your session is about to expire due to inactivity. Please click

Alerte de délai d’expiration de la session

Un composant d’alerte de délai d’expiration de session inspiré de la 3D avec un

Ouvrir Aperçu