Componenti
Componenti di miglioramento della navigazione
Monospace_Booking_Navigation_Complex_Triadic
Monospace_Booking_Navigation_Complex_Triadic
Un componente complesso di navigazione per la prenotazione/prenotazione con un'estetica monospace/developer. È dotato di una combinazione di colori triadica, un design reattivo e il supporto della modalità oscura, ideale per i sistemi di appuntamenti.
Codice 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>Componenti correlati
ArtDeco_Neon_Photography_Navigation
Un componente di navigazione semplice e reattivo per i portfolio fotografici, con motivi geometrici ispirati all'Art Déco e una vivace combinazione di colori neon/elettrici con supporto per la modalità scura.
Componente di miglioramento della navigazione
Un componente di navigazione reattivo progettato per un portfolio, che utilizza uno stile brutale con una combinazione di colori pastello e il supporto della modalità oscura.
Componenti di miglioramento della navigazione
Un semplice componente di miglioramento della navigazione in modalità scura per mostrare un portfolio, utilizzando Tailwind CSS.