レトロブッキングモーダル

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-gray-900/75 font-mono">
  <div class="relative w-full max-w-md mx-auto bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-800 dark:to-pink-800 p-6 rounded-lg shadow-xl border-4 border-purple-400 dark:border-purple-600 animate-slide-in-bck-center transform transition-all duration-300 ease-in-out">
    <!-- Top Bar with Buttons -->
    <div class="flex items-center justify-between pb-4 mb-4 border-b-2 border-purple-400 dark:border-purple-600">
      <div class="flex space-x-2">
        <span class="block w-3 h-3 bg-red-500 rounded-full border border-red-700"></span>
        <span class="block w-3 h-3 bg-yellow-500 rounded-full border border-yellow-700"></span>
        <span class="block w-3 h-3 bg-green-500 rounded-full border border-green-700"></span>
      </div>
      <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100 uppercase tracking-widest">Book Slot</h2>
      <button class="text-gray-800 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-400 transition-colors duration-200">
        <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Content Area -->
    <div class="space-y-4">
      <div>
        <label for="service" class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Select Service:</label>
        <select id="service" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200 appearance-none bg-no-repeat bg-[length:1em] bg-[position:calc(100%-0.5em)_center] [background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27rgb%28129%2C%20140%2C%20248%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E')] dark:[background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27rgb%28209%2C%20213%2C%20219%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E')] overflow-hidden whitespace-nowrap text-ellipsis">
          <option value="">-- Choose a service --</option>
          <option value="facial">Facial Treatment</option>
          <option value="massage">Relaxing Massage</option>
          <option value="nails">Manicure & Pedicure</option>
          <option value="haircut">Haircut & Styling</option>
        </select>
      </div>

      <div>
        <label for="date" class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Date:</label>
        <input type="date" id="date" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
      </div>

      <div>
        <label for="time" class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Time:</label>
        <input type="time" id="time" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
      </div>

      <div>
        <label class="block text-gray-700 dark:text-gray-200 text-sm font-semibold mb-1">Your Information:</label>
        <input type="text" placeholder="Your Name" class="w-full p-2 mb-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-300 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
        <input type="email" placeholder="Your Email" class="w-full p-2 bg-purple-100 dark:bg-purple-700 border-2 border-purple-400 dark:border-purple-600 rounded-md text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-300 focus:ring-2 focus:ring-pink-400 focus:outline-none transition-colors duration-200">
      </div>

      <div class="flex items-center space-x-3 pt-2">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Stylist Avatar" class="w-16 h-16 rounded-full border-2 border-pink-400 dark:border-pink-600 shadow-md">
        <div>
          <p class="text-gray-800 dark:text-gray-100 text-sm font-semibold">Stylist:</p>
          <p class="text-gray-600 dark:text-gray-300 text-base font-bold uppercase">Cassandra Byte</p>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="pt-6 border-t-2 border-purple-400 dark:border-purple-600 mt-4 flex justify-end space-x-3">
      <button class="px-5 py-2 bg-pink-400 hover:bg-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700 text-white dark:text-gray-100 font-bold rounded-md shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105 border-2 border-pink-500 dark:border-pink-700 uppercase tracking-wider">
        Confirm Booking
      </button>
      <button class="px-5 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 font-bold rounded-md shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105 border-2 border-gray-400 dark:border-gray-800 uppercase tracking-wider">
        Cancel
      </button>
    </div>
  </div>
</div>

<style>
  /* Keyframes for the slide-in animation */
  @keyframes slide-in-bck-center {
    0% {
      transform: translateZ(600px) translateY(400px);
      opacity: 0;
    }
    100% {
      transform: translateZ(0) translateY(0);
      opacity: 1;
    }
  }
  .animate-slide-in-bck-center {
    animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  select {
    /* Custom arrow for select dropdown */
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%;
    background-size: 0.65em auto;
  }

  /* Override default date/time input icons for better retro feel if needed, though most browsers don't allow it easily */
  /* webkit browsers */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(40%) sepia(20%) saturate(1000%) hue-rotate(200deg) brightness(80%) contrast(90%); /* Example for light mode */
  }

  .dark input[type="date"]::-webkit-calendar-picker-indicator,
  .dark input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(80%) sepia(50%) saturate(200%) hue-rotate(300deg) brightness(120%) contrast(90%); /* Example for dark mode */
  }

  /* Firefox */
  @-moz-document url-prefix() {
    input[type="date"],
    input[type="time"] {
      color-scheme: light;
    }
    .dark input[type="date"],
    .dark input[type="time"] {
      color-scheme: dark;
    }
  }
</style>