레트로 메디컬 필터구성 요소

<div class="font-sans bg-amber-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 md:p-8 lg:p-12 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-amber-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform rotate-z-1 perspective-1000 origin-top-left transition-all duration-500 group relative filter-panel border-4 border-amber-800 dark:border-stone-700">

    <!-- Retro Top Bar -->
    <div class="bg-amber-800 dark:bg-stone-700 p-3 flex items-center justify-between border-b-4 border-amber-900 sticky top-0 z-10 shadow-md">
      <h2 class="text-orange-50 text-xl md:text-2xl font-bold tracking-wide uppercase font-mono drop-shadow-md">Patient Filters</h2>
      <div class="flex space-x-2">
        <div class="w-3 h-3 rounded-full bg-red-400 border border-red-600"></div>
        <div class="w-3 h-3 rounded-full bg-yellow-400 border border-yellow-600"></div>
        <div class="w-3 h-3 rounded-full bg-green-400 border border-green-600"></div>
      </div>
    </div>

    <!-- Main Filter Controls -->
    <div class="p-4 sm:p-6 space-y-6">

      <!-- Search Input -->
      <div class="relative">
        <input type="text" placeholder="Search by patient ID or name..." class="w-full p-3 pl-10 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 placeholder-amber-700 dark:placeholder-stone-500 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-sm shadow-inner transition-all duration-200" aria-label="Search patient">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-amber-700 dark:text-stone-500 w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Filter Options Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">

        <!-- Category Filter -->
        <div>
          <label for="category" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Category</label>
          <select id="category" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Select Category</option>
            <option value="appointments" class="text-stone-800 dark:text-stone-200">Appointments</option>
            <option value="prescriptions" class="text-stone-800 dark:text-stone-200">Prescriptions</option>
            <option value="lab_results" class="text-stone-800 dark:text-stone-200">Lab Results</option>
            <option value="medical_history" class="text-stone-800 dark:text-stone-200">Medical History</option>
            <option value="billing" class="text-stone-800 dark:text-stone-200">Billing</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700 dark:text-stone-500">
          </div>
        </div>

        <!-- Date Range Filter -->
        <div>
          <label for="date-start" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Date Range</label>
          <div class="flex space-x-2">
            <input type="date" id="date-start" class="w-1/2 p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-base shadow-inner transition-all duration-200" aria-label="Start Date">
            <input type="date" id="date-end" class="w-1/2 p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-base shadow-inner transition-all duration-200" aria-label="End Date">
          </div>
        </div>

        <!-- Status Filter -->
        <div>
          <label for="status" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Status</label>
          <select id="status" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Any Status</option>
            <option value="completed" class="text-stone-800 dark:text-stone-200">Completed</option>
            <option value="pending" class="text-stone-800 dark:text-stone-200">Pending</option>
            <option value="cancelled" class="text-stone-800 dark:text-stone-200">Cancelled</option>
            <option value="scheduled" class="text-stone-800 dark:text-stone-200">Scheduled</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700 dark:text-stone-500">
          </div>
        </div>

        <!-- Department Filter -->
        <div>
          <label for="department" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Department</label>
          <select id="department" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Select Department</option>
            <option value="cardiology" class="text-stone-800 dark:text-stone-200">Cardiology</option>
            <option value="pediatrics" class="text-stone-800 dark:text-stone-200">Pediatrics</option>
            <option value="oncology" class="text-stone-800 dark:text-stone-200">Oncology</option>
            <option value="neurology" class="text-stone-800 dark:text-stone-200">Neurology</option>
          </select>
        </div>

        <!-- Gender Filter (Radio Buttons) -->
        <fieldset>
          <legend class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Gender</legend>
          <div class="flex items-center space-x-4 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md p-3">
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="all" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150" checked>
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">All</span>
            </label>
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="male" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150">
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">Male</span>
            </label>
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="female" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150">
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">Female</span>
            </label>
          </div>
        </fieldset>

        <!-- Has Alerts (Checkbox) -->
        <div class="flex items-center bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md p-3 justify-start md:justify-center">
          <input type="checkbox" id="has-alerts" class="form-checkbox h-5 w-5 text-orange-600 bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-sm focus:ring-2 focus:ring-orange-600 focus:border-orange-600 transition-all duration-150" aria-label="Has Alerts">
          <label for="has-alerts" class="ml-3 text-stone-800 dark:text-stone-200 font-mono text-sm">Patients with Alerts</label>
        </div>

      </div>
    </div>

    <!-- Apply & Reset Buttons -->
    <div class="bg-amber-300 dark:bg-stone-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4 border-t-4 border-amber-800 dark:border-stone-700">
      <button class="w-full sm:w-auto px-6 py-3 bg-orange-600 text-white font-bold uppercase rounded-md text-lg tracking-wider hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 active:bg-orange-800 transform hover:scale-105 transition-all duration-200 ease-in-out font-mono shadow-md">
        Apply Filters
      </button>
      <button class="w-full sm:w-auto px-6 py-3 border-2 border-amber-800 dark:border-stone-600 text-amber-800 dark:text-stone-300 font-bold uppercase rounded-md text-lg tracking-wider hover:bg-amber-400 dark:hover:bg-stone-700 focus:outline-none focus:ring-4 focus:ring-amber-300 active:bg-amber-500 dark:active:bg-stone-600 transform hover:scale-105 transition-all duration-200 ease-in-out font-mono shadow-md">
        Reset Filters
      </button>
    </div>

  </div>
</div>

<style>
/* Basic retro 'monitor' effect for the panel */
.filter-panel {
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 0.8s ease-in-out;
}

.filter-panel:hover {
  transform: rotateX(1deg) rotateY(1deg) scale(1.01);
}

/* Custom styles for select arrow */
select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23b57351%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z%22 clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em;
}

.dark select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23a1a1aa%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z%22 clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}

/* Custom radio/checkbox styles */
input[type='radio']:checked + span::before, input[type='checkbox']:checked + label::before {
    display: none;
}

input[type='radio'] {
    border-radius: 9999px; /* full rounded */
}
input[type='checkbox'] {
    border-radius: 0.125rem; /* small rounded */
}

select option {
  background-color: var(--tw-bg-amber-100, #fefce8);
  color: var(--tw-text-stone-800, #292524);
}

.dark select option {
  background-color: var(--tw-bg-stone-900, #0c0a09);
  color: var(--tw-text-stone-200, #e7e5e4);
}

</style>