Componente Componenti di visualizzazione dei dati
Un componente di prenotazione/prenotazione complesso e minimalista con una combinazione di colori neon/elettrico, con elementi di visualizzazione dei dati come un calendario e un selettore di fasce orarie. Completamente reattivo con supporto per la modalità oscura.
Codice HTML
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 md:p-8 lg:p-12 font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90 border border-gray-200 dark:border-gray-700">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6 lg:p-10">
<!-- Left Section: Calendar and Summary -->
<div class="lg:col-span-2 flex flex-col space-y-8">
<h2 class="text-4xl font-extrabold text-indigo-600 dark:text-fuchsia-500 mb-6 tracking-tight">Book Your Spot</h2>
<!-- Monthly Calendar -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600 relative group">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Date</h3>
<div class="flex justify-between items-center mb-4">
<button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all 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="M15 19l-7-7 7-7"></path></svg></button>
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">October 2023</span>
<button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all 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="M9 5l7 7-7 7"></path></svg></button>
</div>
<div class="grid grid-cols-7 gap-2 text-center text-sm">
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sun</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Mon</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Tue</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Wed</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Thu</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Fri</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sat</div>
<!-- Example days -->
<div class="py-2 text-gray-400">27</div>
<div class="py-2 text-gray-400">28</div>
<div class="py-2 text-gray-400">29</div>
<div class="py-2 text-gray-400">30</div>
<div class="py-2 text-gray-400">1</div>
<div class="py-2 text-gray-900 dark:text-gray-100">2</div>
<div class="py-2 text-gray-900 dark:text-gray-100">3</div>
<div class="py-2 text-gray-900 dark:text-gray-100">4</div>
<div class="py-2 text-gray-900 dark:text-gray-100">5</div>
<div class="py-2 text-gray-900 dark:text-gray-100">6</div>
<div class="py-2 text-gray-900 dark:text-gray-100 relative group selected-date">
7<span class="absolute inset-0 border-2 border-fuchsia-500 dark:border-cyan-400 rounded-full scale-0 group-hover:scale-105 transition-all duration-300"></span>
</div>
<div class="py-2 text-gray-900 dark:text-gray-100">8</div>
<div class="py-2 rounded-full bg-fuchsia-100 dark:bg-cyan-900 text-fuchsia-700 dark:text-cyan-300 font-semibold border-2 border-fuchsia-400 dark:border-cyan-600 shadow-inner">9</div>
<div class="py-2 text-gray-900 dark:text-gray-100">10</div>
<div class="py-2 text-gray-900 dark:text-gray-100">11</div>
<div class="py-2 text-gray-900 dark:text-gray-100">12</div>
<div class="py-2 text-gray-900 dark:text-gray-100">13</div>
<div class="py-2 text-gray-900 dark:text-gray-100">14</div>
<div class="py-2 text-gray-900 dark:text-gray-100">15</div>
<div class="py-2 text-gray-900 dark:text-gray-100">16</div>
<div class="py-2 text-gray-900 dark:text-gray-100">17</div>
<div class="py-2 text-gray-900 dark:text-gray-100">18</div>
<div class="py-2 text-gray-900 dark:text-gray-100">19</div>
<div class="py-2 text-gray-900 dark:text-gray-100">20</div>
<div class="py-2 text-gray-900 dark:text-gray-100">21</div>
<div class="py-2 text-gray-900 dark:text-gray-100">22</div>
<div class="py-2 text-gray-900 dark:text-gray-100">23</div>
<div class="py-2 text-gray-900 dark:text-gray-100">24</div>
<div class="py-2 text-gray-900 dark:text-gray-100">25</div>
<div class="py-2 text-gray-900 dark:text-gray-100">26</div>
<div class="py-2 text-gray-900 dark:text-gray-100">27</div>
<div class="py-2 text-gray-900 dark:text-gray-100">28</div>
<div class="py-2 text-gray-900 dark:text-gray-100">29</div>
<div class="py-2 text-gray-900 dark:text-gray-100">30</div>
<div class="py-2 text-gray-900 dark:text-gray-100">31</div>
<div class="py-2 text-gray-400">1</div>
<div class="py-2 text-gray-400">2</div>
<div class="py-2 text-gray-400">3</div>
<div class="py-2 text-gray-400">4</div>
</div>
</div>
<!-- Time Slot Selection -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Time Slot</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">09:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">10:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">11:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">12:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-fuchsia-500 dark:border-cyan-400 bg-fuchsia-200 dark:bg-cyan-800 text-fuchsia-800 dark:text-cyan-200 font-bold shadow-md transform scale-105 relative ring-2 ring-fuchsia-500 dark:ring-cyan-400 transition-all duration-300 group">
<span class="text-lg">01:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200 opacity-60 cursor-not-allowed">
<span class="text-lg font-medium">02:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">03:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">04:00 PM</span>
</button>
</div>
</div>
<!-- Additional Booking Info/Charts -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Availability Overview</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-fuchsia-500 dark:bg-cyan-400 animate-pulse"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Few Spots Left</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-lime-500"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Highly Available</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-red-500 opacity-60"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Fully Booked</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Not Available</span>
</div>
</div>
<div class="mt-6">
<h4 class="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Daily Slot Trends</h4>
<!-- Placeholder for a simple bar chart or sparkline: SVG or image -->
<div class="w-full h-32 bg-gradient-to-r from-lime-300 via-fuchsia-300 to-red-300 dark:from-lime-800 dark:via-fuchsia-800 dark:to-red-800 rounded-md p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 w-full flex items-end justify-around h-full">
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 0s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 60%; animation-delay: 0.1s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 40%; animation-delay: 0.2s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 20%; animation-delay: 0.3s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 0.4s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 0.5s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 90%; animation-delay: 0.6s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 0.7s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 15%; animation-delay: 0.8s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 65%; animation-delay: 0.9s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 75%; animation-delay: 1s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 45%; animation-delay: 1.1s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 25%; animation-delay: 1.2s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 85%; animation-delay: 1.3s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 55%; animation-delay: 1.4s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 35%; animation-delay: 1.5s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 10%; animation-delay: 1.6s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 95%; animation-delay: 1.7s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 1.8s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 1.9s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 2s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 2.1s;"></div>
</div>
</div>
<p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">Scroll to see more days</p>
</div>
</div>
</div>
<!-- Right Section: Booking Summary & User Info -->
<div class="lg:col-span-1 flex flex-col space-y-8">
<!-- Booking Summary -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-xl border border-violet-100 dark:border-gray-600 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-400/20 to-cyan-400/20 dark:from-fuchsia-700/20 dark:to-cyan-700/20 opacity-30"></div>
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400 relative z-10">Your Booking Summary</h3>
<div class="space-y-4 relative z-10">
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Service:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold">Premium Consultation</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Date:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">Oct 9, 2023</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Time:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">01:00 PM</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Duration:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold">60 minutes</span>
</div>
<div class="flex justify-between mb-4 pt-4 border-t border-violet-200 dark:border-gray-600">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">Total:</span>
<span class="text-xl font-bold text-indigo-700 dark:text-lime-400">$120.00</span>
</div>
</div>
<button class="w-full flex items-center justify-center py-3 px-6 bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white font-extrabold rounded-lg shadow-lg hover:from-fuchsia-600 hover:to-cyan-600 focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-cyan-600 transform transition-all duration-300 ease-out sm:text-lg lg:text-xl relative overflow-hidden group">
<span class="relative z-10">Confirm Booking</span>
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<svg class="ml-2 w-6 h-6 text-white absolute right-4 opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0 transition-all duration-300 ease-out" 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="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Consultant/Service Provider Info -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Your Consultant</h3>
<div class="flex items-center space-x-4">
<img class="w-20 h-20 rounded-full object-cover border-4 border-fuchsia-400 dark:border-cyan-500 shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Consultant John Doe">
<div>
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Senior Business Analyst</p>
<div class="flex items-center mt-1 text-sm text-gray-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
4.9 (245 reviews)
</div>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mt-4 text-sm">John specializes in digital transformation and has helped numerous clients achieve their strategic goals.</p>
</div>
<!-- Customer Support Card -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Need Help?</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Our support team is ready to assist you with any questions or issues.</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-semibold rounded-md shadow hover:from-indigo-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-blue-400 transition-all duration-300">
<svg class="w-5 h-5 mr-2" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Contact Support
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Adding a simple bounce/rise animation for chart bars */
@keyframes rise {
0% { transform: scaleY(0); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
.animate-rise {
animation: rise 0.5s ease-out forwards;
transform-origin: bottom;
}
/* Custom focus/active state for selected date */
.selected-date:focus-within .ring-2, .selected-date:hover .ring-2 {
transform: scale(1.05);
opacity: 1;
}
</style>Componenti correlati
Luxury_Premium_Crypto_Stat_Card
Una scheda statistica cripto/blockchain semplice ed elegante con toni gioiello, design reattivo e supporto per la modalità oscura, adatta per applicazioni di lusso e premium.
Componente Componenti di visualizzazione dei dati
Componente di visualizzazione dei dati Glassmorphism per blog/contenuti
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati in stile retrò/vintage con supporto per temi scuri ed effetti reattivi utilizzando Tailwind CSS.