Composants Capital RétroBookingModal

RétroBookingModal

Un composant modal de réservation/réservation à thème rétro avec des couleurs pastel, un design réactif et une prise en charge du mode sombre, adapté aux systèmes de rendez-vous.

Aperçu

HTML Code

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

Composants associés

Art_Deco_Government_Modal

Un composant modal réactif, inspiré de l’Art déco, pour les sites Web du gouvernement et des services publics, avec des motifs géométriques, un style luxueux et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.

Ouvrir

Modal d’apprentissage Cyberpunk

Un composant modal réactif, sur le thème du cyberpunk, pour les plateformes éducatives, avec des arrière-plans sombres, des accents néon et des éléments interactifs. Prend en charge le mode sombre.

Ouvrir

Design Matériel Modal

Un composant modal de style Material Design avec un design réactif et une prise en charge du thème sombre. Comprend une superposition modale, un conteneur modal avec une apparence de carte et un bouton de fermeture. Aucun JavaScript n’est inclus.

Ouvrir