セッション タイムアウト アラート コンポーネント - アールデコ調のキャンディー テーマ

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