ArtDeco_Food_Restaurant_Progress_Indicators

<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>