ArtDeco_Food_Restaurant_Progress_Indicators
Composant d’indicateurs de progression d’inspiration Art déco pour les sites Web d’alimentation / restaurants, avec des motifs géométriques, un style luxueux et des tons de terre. Interface complexe avec plusieurs étapes et prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">
<div class="max-w-4xl mx-auto bg-stone-200 dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
<!-- Header -->
<div class="bg-gradient-to-br from-amber-800 to-amber-950 dark:from-amber-900 dark:to-stone-950 p-6 sm:p-8 text-center text-stone-100 relative overflow-hidden">
<div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
<h1 class="text-3xl sm:text-4xl font-bold tracking-wider mb-2 text-stone-100 drop-shadow-md">Your Order Progress</h1>
<p class="text-stone-200 text-lg">From Kitchen to Your Door</p>
</div>
<!-- Progress Steps Container -->
<div class="p-6 sm:p-8 md:p-10 lg:p-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative">
<!-- Horizontal Line for Desktop/Tablet -->
<div class="hidden md:block absolute top-[25px] left-0 right-0 h-1 bg-stone-400 dark:bg-stone-600 mx-8 lg:mx-16"></div>
<!-- Step 1: Order Placed -->
<div class="flex flex-col items-center text-center relative z-10">
<div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
<svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
</div>
<p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Order Placed</p>
<p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:30 AM</p>
</div>
<!-- Step 2: Preparing Order -->
<div class="flex flex-col items-center text-center relative z-10">
<div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
<svg class="w-6 h-6 sm:w-8 sm:h-8" 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="M17 20h-3a2 2 0 01-2-2V7a2 2 0 012-2h3a2 2 0 012 2v11a2 2 0 01-2 2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20h3a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v11a2 2 0 002 2z"></path></svg>
</div>
<p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Preparing Order</p>
<p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:45 AM</p>
</div>
<!-- Step 3: Out For Delivery -->
<div class="flex flex-col items-center text-center relative z-10">
<div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
<svg class="w-6 h-6 sm:w-8 sm:h-8" 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 17l6-6-6-6"></path></svg>
</div>
<p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Out For Delivery</p>
<p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
</div>
<!-- Step 4: Delivered -->
<div class="flex flex-col items-center text-center relative z-10">
<div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
<svg class="w-6 h-6 sm:w-8 sm:h-8" 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="M5 13l4 4L19 7"></path></svg>
</div>
<p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Delivered</p>
<p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
</div>
<!-- Vertical Line for Mobile -->
<div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-stone-400 dark:bg-stone-600 md:hidden"></div>
</div>
</div>
<!-- Delivery Details / Map Section -->
<div class="bg-stone-300 dark:bg-stone-850 p-6 sm:p-8 md:p-10 lg:p-12 border-t-4 border-amber-800 dark:border-amber-900 border-dashed">
<h2 class="text-xl sm:text-2xl font-bold text-amber-900 dark:text-amber-200 mb-6 text-center tracking-wide">Delivery Details</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Driver Info Card -->
<div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-6 flex flex-col items-center text-center md:items-start md:text-left">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Driver Avatar" class="w-24 h-24 rounded-full border-4 border-amber-600 dark:border-amber-400 mb-4 shadow-lg">
<p class="text-lg font-semibold text-stone-800 dark:text-stone-200">Your Driver: John Doe</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Estimated Arrival: 11:30 AM</p>
<a href="tel:+1234567890" class="mt-4 px-5 py-2 bg-amber-700 dark:bg-amber-600 text-stone-100 rounded-lg shadow-md hover:bg-amber-800 dark:hover:bg-amber-500 transition duration-300 flex items-center">
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.134L9.349 14.45a14.001 14.001 0 007.443 7.443l1.815-.545a1 1 0 011.134-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
Call Driver
</a>
</div>
<!-- Map Placeholder -->
<div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-2 overflow-hidden relative">
<img src="https://picsum.photos/600/400?grayscale&random=2" alt="Map" class="w-full h-48 md:h-full object-cover rounded-md">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-4 text-stone-100 font-semibold">
Tracking Live...
</div>
</div>
</div>
</div>
<!-- Decorative Footer -->
<div class="bg-amber-800 dark:bg-amber-900 h-6 sm:h-8 md:h-10 relative overflow-hidden">
<div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
</div>
</div>
</div>Composants associés
Indicateurs de progrès Composante 33
Un indicateur de progression réactif avec des micro-interactions dans Tailwind CSS, avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Composant d’indicateurs de progression réactif conçu pour un tableau de bord d’interface utilisateur en mode sombre avec un schéma de couleurs analogue. Il comprend divers indicateurs de progression tels que des barres, des cercles et un flux d’activité, le tout stylisé avec Tailwind CSS pour la prise en charge du mode sombre. Aucun JavaScript n’est utilisé.
Volet Indicateurs de progrès
Un composant d’indicateur de progression de style luxe/premium conçu pour les applications de sport/fitness, avec des tons de bijoux, une typographie sophistiquée et une réactivité totale avec prise en charge du mode sombre.