3D Grayscale Sports Fitness Progress Bar

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in-up">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight">Daily Training Progress</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <!-- Overall Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Overall Goal</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Week 3/12 Training Cycle</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 65%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">65% Complete</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                View Full Roadmap
              </button>
            </div>
          </div>
        </div>

        <!-- Daily Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Daily Target</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Today's Session: Legs & Core</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 80%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">80% Done</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                Log Workout
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Individual Metrics Progress Bars -->
      <div class="mb-8">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center">Key Performance Indicators</h3>
        <div class="space-y-6">

          <!-- Metric 1: Strength -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 75%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Strength</span>
                <span>75%</span>
              </div>
            </div>
          </div>

          <!-- Metric 2: Endurance -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 85%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Endurance</span>
                <span>85%</span>
              </div>
            </div>
          </div>

          <!-- Metric 3: Flexibility -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 60%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Flexibility</span>
                <span>60%</span>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-lg relative overflow-hidden group">
        <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
        <div class="relative z-10">
          <p class="text-gray-700 dark:text-gray-200 mb-4 text-lg">Ready for your next challenge?</p>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold py-3 px-8 rounded-full text-lg shadow-xl uppercase tracking-wider transform transition duration-300 hover:scale-105 hover:bg-gray-700 dark:hover:bg-white focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
            Plan Next Workout
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom utility for inner shadow, simulating 3D depth */
  .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
  }

  .dark .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  .blend-overlay {
    mix-blend-mode: overlay;
  }
</style>