Cerca componenti

Categorie

Componenti Avviso di timeout sessione

Avviso di timeout sessione

Notifica per le sessioni utente in scadenza

Componente di avviso timeout sessione

Un componente di avviso di timeout di sessione complesso e reattivo per siti Web governativi/di servizio pubblico, caratterizzato da un design organico/ispirato alla natura con neutri freddi. Include un timer per il conto alla rovescia, opzioni per estendere o disconnettersi e supporto completo per la modalità scura.

Aperto Anteprima

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

Componente di avviso timeout sessione

Un componente di avviso di timeout di sessione reattivo con un design arcobaleno sfumato multicolore, adatto per siti Web governativi e di servizio pubblico. Dispone di supporto per la modalità oscura e transizioni fluide.

Aperto Anteprima

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

Componente di avviso timeout sessione

Un componente di avviso di timeout della sessione semplice, pulito e professionale progettato per le piattaforme di lavoro/carriera. Utilizza una combinazione di colori analoga e supporta la modalità scura.

Aperto Anteprima

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

Componente di avviso timeout sessione

Un componente di avviso di timeout di sessione complesso e reattivo, progettato con uno stile tipografico svizzero / internazionale minimale e una combinazione di colori Candy/Sweet brillante, adatto per piattaforme di lavoro e carriera. Include il supporto per la modalità oscura ed elementi interattivi.

Aperto Anteprima

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

Componente di avviso timeout sessione - Arcobaleno neumorfico

Un componente di avviso di timeout della sessione neumorfica per app di appuntamenti/social network con una combinazione di colori arcobaleno sfumato. È reattivo e supporta la modalità oscura, spingendo gli utenti a prolungare la sessione o a disconnettersi.

Aperto Anteprima

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

Componente di avviso timeout sessione

Un componente di avviso di timeout di sessione reattivo progettato per i siti Web di viaggi/turismo, dotato di un'interfaccia utente in modalità scura con toni blu aziendali. Fornisce una comunicazione chiara sulla scadenza della sessione e offre opzioni per estendere o disconnettersi.

Aperto Anteprima

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

Componente di avviso timeout sessione

Un componente di avviso di timeout di sessione complesso e reattivo con un design monospace/sviluppatore, uno schema in bianco e nero e un colore di accento brillante, adatto per piattaforme educative. Include il supporto per la modalità oscura e un conto alla rovescia.

Aperto Anteprima

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

Componente di avviso timeout sessione

Un componente di avviso di timeout sessione semplice, reattivo e monocromatico con effetti neon/bagliore, progettato per piattaforme di istruzione/apprendimento. Include il supporto per la modalità oscura.

Aperto Anteprima

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