セッション タイムアウト警告コンポーネント

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