Componente Indicatori di progresso
Indicatori di avanzamento ispirati a carta/stampa per un marketplace, con colori dolci/caramelle. Design complesso con più passaggi, layout reattivo e supporto per la modalità scura.
Codice HTML
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-rose-50 dark:bg-zinc-900 font-sans">
<div class="max-w-6xl mx-auto bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden print-like-border transition-colors duration-300">
<div class="p-6 sm:p-8 md:p-10 border-b border-rose-100 dark:border-rose-900">
<h2 class="text-2xl sm:text-3xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 font-serif tracking-tight">Order Progress</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Track the journey of your current marketplace order.</p>
</div>
<div class="px-4 py-6 sm:p-8 md:p-10">
<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
<!-- Progress Steps -->
<div class="flex-1 w-full lg:w-auto">
<ol class="relative text-gray-500 border-s-2 border-rose-200 dark:border-rose-700 space-y-8">
<!-- Step 1: Order Placed -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Order Placed</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:30 AM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your order #ABC-123 has been successfully placed.</p>
</div>
</li>
<!-- Step 2: Payment Confirmed -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2v6h5a1 1 0 011 1v3h2V8H8a2 2 0 01-2-2z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Payment Confirmed</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:35 AM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Payment processed successfully. Awaiting vendor confirmation.</p>
</div>
</li>
<!-- Step 3: Vendor Preparing Order -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.885 9.117a.75.75 0 01-.164.839l-3.056 3.055a.75.75 0 01-1.06-.007 2.25 2.25 0 00-3.327-.374l-3.326-2.66c-.664-.53-.984-1.393-.823-2.185.166-.803.791-1.394 1.579-1.554.717-.183 1.488.083 2.052.542l.685.549a.75.75 0 01.077 1.18L9 11.25l-.234.187a.75.75 0 01-.762-.058L5.27 8.358a.75.75 0 01-.013-1.054.75.75 0 011.054-.013l3.41 2.728 2.302-2.302a.75.75 0 011.061 0l3.056 3.055a.75.75 0 010 1.06z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Vendor Preparing Order</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 11:00 AM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your items are being prepared by <span class="font-medium text-pink-700 dark:text-pink-300">Sweet Treats Bakery</span>.</p>
</div>
</li>
<!-- Step 4: Out for Delivery (Current) -->
<li class="mb-8 ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-lime-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.52 1.715a.75.75 0 01.46 0l6.5 2.25a.75.75 0 01.46 1.07V15.5a.75.75 0 01-.75.75h-3.72a.75.75 0 01-.689-.5l-1.442-3.605A.75.75 0 0010.5 11.25h-1.5a.75.75 0 00-.689.444L6.97 15.5H3.75a.75.75 0 01-.75-.75V5.035a.75.75 0 01.46-1.07l6.5-2.25zM12 1.5v3.25h2.5V1.5h-2.5z"/></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-bold text-lg text-lime-600 dark:text-lime-400 leading-tight">Out for Delivery</h3>
<time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 02:15 PM</time>
<p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your delicious treats are on their way! Estimated arrival: <span class="font-medium text-lime-700 dark:text-lime-300">3:00 PM - 4:00 PM</span>.</p>
<div class="flex items-center gap-3 mt-3 p-3 bg-lime-50 dark:bg-lime-900 rounded-md shadow-inner border border-lime-200 dark:border-lime-700">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Delivery Driver" class="w-10 h-10 rounded-full border-2 border-lime-300 dark:border-lime-600">
<div>
<p class="font-medium text-lime-700 dark:text-lime-300">Driver: John Smith</p>
<a href="tel:+1234567890" class="text-sm text-lime-600 dark:text-lime-400 hover:underline flex items-center">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
(123) 456-7890
</a>
</div>
</div>
</div>
</li>
<!-- Step 5: Delivered -->
<li class="ms-6 flex items-start group">
<span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-rose-200 dark:bg-rose-700 text-gray-400 dark:text-gray-500 shadow-md transition-all duration-300 group-hover:scale-110">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
</span>
<div class="ml-2 flex flex-col">
<h3 class="font-semibold text-lg text-gray-500 dark:text-gray-400 leading-tight">Delivered</h3>
<time class="block text-sm text-gray-400 dark:text-gray-600 font-normal leading-none pt-0.5">Awaiting</time>
<p class="text-base font-normal text-gray-400 dark:text-gray-500 mt-2">Your order will be marked as delivered upon arrival.</p>
</div>
</li>
</ol>
</div>
<!-- Order Summary / Details -->
<div class="relative flex-shrink-0 w-full lg:w-96 p-6 lg:p-8 border border-rose-200 dark:border-rose-700 rounded-lg bg-rose-50 dark:bg-zinc-700 shadow-md transform -rotate-1 perspective-origin-top-left candy-stripes">
<div class="absolute z-10 w-full h-full inset-0 bg-gradient-to-br from-rose-50/70 via-rose-100/70 to-rose-200/70 dark:from-zinc-700/70 dark:via-zinc-750/70 dark:to-zinc-800/70 mix-blend-overlay"></div>
<div class="relative z-20">
<h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-4 font-serif">Order Summary</h3>
<div class="space-y-3 text-gray-700 dark:text-gray-200">
<div class="flex justify-between items-center">
<span class="font-medium">Order ID:</span>
<span class="text-pink-600 dark:text-pink-400 font-semibold">#ABC-123</span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium">Total Items:</span>
<span>3</span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium">Total Amount:</span>
<span class="font-bold text-lg text-lime-600 dark:text-lime-400">$29.99</span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium">Delivery Address:</span>
<span class="text-right">123 Candy Lane, Sweetville, CA 90210</span>
</div>
</div>
<h4 class="text-lg font-bold text-pink-700 dark:text-pink-300 mt-6 mb-3 font-serif">Items in Order:</h4>
<ul class="space-y-4">
<li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
<img src="https://picsum.photos/80/80?random=1" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
<div class="flex-1">
<p class="font-semibold text-pink-600 dark:text-pink-400">Rainbow Cupcakes (x2)</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Sweet Treats Bakery</p>
</div>
</li>
<li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
<img src="https://picsum.photos/80/80?random=2" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
<div class="flex-1">
<p class="font-semibold text-pink-600 dark:text-pink-400">Gummy Bear Mix (x1)</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Candy Kingdom</p>
</div>
</li>
</ul>
<button class="mt-8 w-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold py-3 px-6 rounded-lg hover:from-pink-600 hover:to-rose-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition-all duration-300 shadow-lg">
View Order Details
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Basic Paper-like shadow and border on light mode */
.print-like-border {
border: 2px solid theme('colors.rose.100');
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Dark mode adjustments for border and shadow */
.dark .print-like-border {
border-color: theme('colors.zinc.700');
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
/* Candy Stripes for the Order Summary */
.candy-stripes {
background-image: repeating-linear-gradient(
45deg,
theme('colors.rose.100'),
theme('colors.rose.100') 10px,
theme('colors.pink.50') 10px,
theme('colors.pink.50') 20px
);
background-size: 40px 40px;
box-shadow: 5px 5px 0px theme('colors.pink.200'); /* 'paper curl' shadow */
}
.dark .candy-stripes {
background-image: repeating-linear-gradient(
45deg,
theme('colors.zinc.800'),
theme('colors.zinc.800') 10px,
theme('colors.zinc.700') 10px,
theme('colors.zinc.700') 20px
);
box-shadow: 5px 5px 0px theme('colors.zinc.900');
}
</style>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente indicatore di stato in stile glassmorphism per applicazioni di social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Utilizza una combinazione di colori analoga e offre un'interfaccia complessa e ricca con più elementi interattivi. Il componente è reattivo e supporta un tema scuro con Tailwind CSS.
Componente degli indicatori di avanzamento del Glassmorphism
Componente degli indicatori di avanzamento Glassmorphism con combinazione di colori vibrante e complessità semplice.
Componente Indicatori di progresso
Un componente indicatore di avanzamento minimalista progettato per mostrare i progressi del portfolio utilizzando colori vivaci e un design reattivo con supporto per temi scuri.