Monospace_Booking_Navigation_Complex_Triadic
모노스페이스/개발자 미학을 가진 복잡한 예약/예약 탐색 구성 요소입니다. 트라이어딕 색 구성표, 반응형 디자인 및 다크 모드 지원이 특징이며 예약 시스템에 이상적입니다.
HTML 코드
<div class="font-mono min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 flex flex-col">
<!-- Header Navigation -->
<header class="bg-emerald-600 dark:bg-emerald-800 text-white p-4 shadow-lg z-10">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="text-2xl font-bold tracking-tight mb-2 md:mb-0">[BOOK.]_SYSTEM</div>
<nav class="flex flex-wrap justify-center gap-4 text-sm font-medium">
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Dashboard</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Bookings</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Services</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Clients</a>
<a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Reports</a>
</nav>
<div class="mt-4 md:mt-0 flex items-center gap-4">
<button class="p-2 rounded-full bg-emerald-700 dark:bg-emerald-900 hover:bg-emerald-800 dark:hover:bg-emerald-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white" aria-label="Notifications">
<svg class="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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0V6a2 2 0 012-2h2a2 2 0 012 2v5a6.002 6.002 0 014 5.158V14a2 2 0 00-2-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 0"></path></svg>
</button>
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 container mx-auto p-4 md:p-6 lg:p-8 flex flex-col lg:flex-row gap-6">
<!-- Sidebar / Contextual Controls -->
<aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-blue-950 p-6 rounded-lg border-2 border-dashed border-blue-200 dark:border-blue-800 shadow-md">
<h2 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-200 underline">_Filter_Bookings</h2>
<div class="mb-6">
<label for="service-type" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[SERVICE]</label>
<select id="service-type" class="w-full p-2 rounded-md bg-blue-100 dark:bg-blue-900 border border-blue-300 dark:border-blue-700 focus:ring-blue-500 focus:border-blue-500 text-blue-900 dark:text-blue-100 placeholder-blue-400 dark:placeholder-blue-600 outline-none">
<option>All Services</option>
<option>Consultation</option>
<option>Maintenance</option>
<option>Deployment</option>
</select>
</div>
<div class="mb-6">
<label for="date-range" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[DATE_RANGE]</label>
<input type="range" id="date-range" min="0" max="100" value="50" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer dark:bg-blue-700 accent-blue-600">
<div class="flex justify-between text-xs text-blue-600 dark:text-blue-400 mt-1">
<span>Past</span>
<span>Future</span>
</div>
</div>
<div class="mb-6">
<label for="status-filter" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[STATUS]</label>
<div class="flex flex-col gap-2">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded dark:bg-blue-800 dark:border-blue-700 focus:ring-blue-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Pending</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-emerald-600 rounded dark:bg-emerald-800 dark:border-emerald-700 focus:ring-emerald-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Confirmed</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-rose-600 rounded dark:bg-rose-800 dark:border-rose-700 focus:ring-rose-500"><span class="ml-2 text-blue-900 dark:text-blue-100">Cancelled</span>
</label>
</div>
</div>
<button class="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-blue-950 focus:ring-blue-500">_APPLY_FILTERS</button>
</aside>
<!-- Main Content Panel -->
<section class="flex-1 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-700">
<h1 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 flex items-center">
<span class="mr-2 text-emerald-500 dark:text-emerald-400">█</span> UPCOMING_BOOKINGS
</h1>
<!-- Booking List/Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ID]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[CLIENT]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[SERVICE]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[DATE]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[TIME]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[STATUS]</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ACTIONS]</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<!-- Booking Row 1 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1A2B3C</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/67.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Alice_Smith</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Consultation_V2</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-28</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:00_AM</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
CONFIRMED
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
<a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
</td>
</tr>
<!-- Booking Row 2 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1D4E5F</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Bob_Johnson</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_System_Setup</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-29</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">02:00_PM</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">
PENDING
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
<a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
</td>
</tr>
<!-- Booking Row 3 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x2F6A7B</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Carol_White</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Debugging_Svc</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-01</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:30_AM</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
CONFIRMED
</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
<a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
</td>
</tr>
<!-- Booking Row 4 -->
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x3B8C9D</td>
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="">
</div>
<div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">David_King</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Data_Migration</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-05</td>
<td class="px-4 py-4 whitespace-nowrap text-sm flex items-center justify-start text-rose-500 dark:text-rose-400">
CANCELED
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">01:00_PM</td>
<td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_VIEW</a>
<a href="#" class="text-gray-400 dark:text-gray-600 cursor-not-allowed">_Rebook</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 flex flex-col sm:flex-row justify-between items-center text-sm">
<div class="text-gray-600 dark:text-gray-400 mb-4 sm:mb-0">Showing 1 to 4 of 12 Results</div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors duration-200 z-10">1</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">2</a>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">3</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">...</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">12</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</section>
</main>
<!-- Footer Component -->
<footer class="bg-rose-600 dark:bg-rose-800 text-white p-4 text-center text-sm opacity-90">
<div class="container mx-auto">
© 2024 <span class="font-bold">[BOOK._SYS]</span>. All rights reserved. <span class="text-opacity-70">//_end_of_transmission</span>
</div>
</footer>
</div>관련 구성 요소
Navigation Enhancement 구성 요소
레트로/빈티지 미학으로 스타일링된 반응형 내비게이션 구성 요소로, 전자 상거래 애플리케이션에 적합하며, 어두운 테마를 지원하고 적당한 상호 작용을 제공합니다.
Navigation Enhancement 구성 요소
Tailwind CSS를 사용하여 머티리얼 디자인 컨셉으로 디자인된 반응형 탐색 구성요소로, 어두운 테마 지원 및 플레이스홀더 이미지를 제공합니다.