Компоненты Вкладки Industrial_Monochromatic_Tabs_Component_Booking_Reservation

Industrial_Monochromatic_Tabs_Component_Booking_Reservation

Простой, отзывчивый компонент вкладок с индустриальной, монохромной эстетикой, предназначенный для систем бронирования и бронирования. Он поддерживает темный режим и использует сырье и открытые элементы для утилитарной привлекательности.

Предварительный просмотр

HTML-код

<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
      <input type="radio" name="tab" id="tab1" class="hidden" checked>
      <label for="tab1" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Appointment
      </label>
      <input type="radio" name="tab" id="tab2" class="hidden">
      <label for="tab2" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Reservation
      </label>
      <input type="radio" name="tab" id="tab3" class="hidden">
      <label for="tab3" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        History
      </label>
    </div>

    <div class="p-6 sm:p-8">
      <!-- Tab Content 1: Appointment -->
      <div id="content1" class="tab-content" data-tab="tab1">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Schedule Your Appointment</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Please select a service, date, and time for your appointment. Our team will confirm your booking within 24 hours.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Service Type</label>
            <select id="service" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Service</option>
              <option value="consultation">Technical Consultation</option>
              <option value="maintenance">Equipment Maintenance</option>
              <option value="installation">New System Installation</option>
              <option value="repair">Emergency Repair</option>
            </select>
          </div>
          <div>
            <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Date</label>
            <input type="date" id="date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Time Slot</label>
            <input type="time" id="time" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (Optional)</label>
            <textarea id="notes" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Book Appointment</button>
      </div>

      <!-- Tab Content 2: Reservation -->
      <div id="content2" class="tab-content hidden" data-tab="tab2">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Make a Resource Reservation</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Reserve our specialized equipment or facilities. Provide details about your project to ensure availability and suitability.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="resource" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Resource Type</label>
            <select id="resource" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Resource</option>
              <option value="lab">Testing Lab Area</option>
              <option value="equipment">Heavy Lifting Equipment</option>
              <option value="conference">Conference Room 1</option>
              <option value="workshop">Large Workshop Space</option>
            </select>
          </div>
          <div>
            <label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
            <input type="date" id="start-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
            <input type="date" id="end-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="project-details" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
            <textarea id="project-details" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Submit Reservation</button>
      </div>

      <!-- Tab Content 3: History -->
      <div id="content3" class="tab-content hidden" data-tab="tab3">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Your Booking History</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Review your past appointments and reservations. You can also cancel or reschedule upcoming bookings here.</p>
        
        <div class="space-y-4">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Equipment Maintenance</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-10-26, Time: 10:00 AM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400 font-medium">Confirmed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
              <button class="px-4 py-2 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Cancel</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Testing Lab Area Reservation</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">From: 2023-10-20 to 2023-10-22</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-blue-600 dark:text-blue-400 font-medium">Completed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Emergency Repair Service</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-09-15, Time: 02:30 PM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-red-600 dark:text-red-400 font-medium">Cancelled</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is a workaround for pure HTML/CSS tab functionality using radio buttons */
  /* In a real application, JavaScript would be used for better accessibility and dynamic content */
  .tab-content {
    display: none;
  }
  
  #tab1:checked ~ .flex + .p-6 #content1,
  #tab2:checked ~ .flex + .p-6 #content2,
  #tab3:checked ~ .flex + .p-6 #content3 {
    display: block;
  }

  /* Styles for the labels to act as interactive tabs */
  #tab1:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important; /* gray-200 */
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important; /* gray-900 */
    color: var(--checked-text-color-light, #1f2937) !important; /* gray-900 */
  }
  .dark #tab1:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important; /* gray-900 */
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important; /* gray-100 */
    color: var(--checked-text-color-dark, #f9fafb) !important; /* white */
  }

  #tab2:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab2:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }

  #tab3:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab3:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }
</style>

Связанные компоненты

Компонент вкладок

Компонент Responsive Tabs с земляными тонами и микровзаимодействиями для бизнес-сайтов, поддерживающий темный режим с использованием Tailwind CSS. Использует только классы HTML и Tailwind.

Открытый

СтеклянныеОттенки серого

Glassmorphism Grayscale Простые вкладки приборной панели Компонент с поддержкой темного режима

Открытый

Вкладки «Дизайн материалов»

Компонент Tabs со стилем Material Design, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS, без JavaScript.

Открытый