Session Timeout Alert 구성 요소

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
    <div class="p-6">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
          <p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
        </div>
      </div>

      <div class="space-y-4">
        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="flex items-center">
            <svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
            <span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
          </div>
          <label for="toggle-auto-renew" class="flex items-center cursor-pointer">
            <div class="relative">
              <input type="checkbox" id="toggle-auto-renew" class="sr-only">
              <div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
              <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
            </div>
          </label>
          <style>
            input:checked ~ .dot {
              transform: translateX(100%);
              background-color: #4CAF50; /* A touch of green for