Progress Indicators 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 shadow-xl rounded-2xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-stone-700 transform hover:scale-[1.02] transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
      Athlete Performance Overview
    </h2>
    <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 text-center max-w-2xl mx-auto opacity-90">
      Track key metrics and visualize progress towards your fitness goals with elegant precision.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-8 sm:gap-x-12 lg:gap-x-16">

      <!-- Metric 1: Endurance Progress -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-sapphire-600 dark:text-sapphire-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.75))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-sapphire-700 dark:text-sapphire-300">75%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Endurance</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Achieved 75% of your aerobic fitness target.</p>
      </div>

      <!-- Metric 2: Strength Level -->
      <div class="flex flex-col items-center">
        <div class="relative w-40 h-40 sm:w-48 sm:h-48 flex items-center justify-center mb-4">
          <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
            <circle class="text-gray-200 dark:text-stone-700" stroke-width="12" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
            <circle class="text-ruby-600 dark:text-ruby-400 transition-all duration-700 ease-out" stroke-width="12" stroke-dasharray="339.29" stroke-dashoffset="calc(339.29 - (339.29 * 0.88))" stroke-linecap="round" stroke="currentColor" fill="transparent" r="54" cx="60" cy="60"></circle>
          </svg>
          <span class="absolute text-4xl font-bold text-ruby-700 dark:text-ruby-300">88%</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Strength</h3>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-xs">Reached 88% of your personal strength record.</p>
      </div>

      <!-- Metric 3: Recovery Status -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Recovery Score</h3>
        <div class="w-full max-w-sm bg-gray-200 dark:bg-stone-700 rounded-full h-8 sm:h-10 mb-4 overflow-hidden shadow-inner">
          <div class="bg-emerald-500 dark:bg-emerald-300 h-full rounded-full transition-all duration-700 ease-out flex items-center justify-end pr-3"
            style="width: 92%;">
            <span class="text-white dark:text-stone-900 text-sm font-semibold">92%</span>
          </div>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center max-w-lg">Excellent recovery; ready for optimal performance.</p>
      </div>

      <!-- Metric 4: Goal Completion -->
      <div class="col-span-1 md:col-span-2 flex flex-col items-center">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Overall Goal Completion</h3>
        <div class="flex items-center space-x-4 mb-4">
          <div class="relative w-28 h-28 sm:w-32 sm:h-32">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Athlete Avatar" class="w-full h-full rounded-full object-cover border-4 border-emerald-500 dark:border-emerald-300 shadow-lg">
            <span class="absolute bottom-0 right-0 bg-emerald-500 dark:bg-emerald-300 rounded-full p-1 border-2 border-white dark:border-stone-800">
              <svg class="w-6 h-6 text-white dark:text-stone-900 icon-check" 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>
            </span>
          </div>
          <div class="flex-1">
            <p class="text-3xl sm:text-4xl font-extrabold text-ruby-600 dark:text-ruby-400">+
              <span class="counter" data-count="12">12</span> Workouts This Week
            </p>
            <p class="text-lg text-gray-600 dark:text-gray-400">Exceeding weekly target of 10.</p>
          </div>
        </div>
        <div class="w-full flex justify-center mt-6">
          <button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-bold rounded-full text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-400 dark:focus:ring-emerald-700 active:scale-95">
            View Detailed Report
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

<style>
  /* Custom properties for jewel tones */
  .text-sapphire-600 { color: #2B6CB0; } /* Tailwind blue-700 for example */
  .dark\:text-sapphire-400 { color: #63B3ED; } /* Tailwind blue-400 */
  .text-ruby-600 { color: #E53E3E; } /* Tailwind red-600 */
  .dark\:text-ruby-400 { color: #FC8181; } /* Tailwind red-400 */
  .text-emerald-700 { color: #047857; } /* Tailwind emerald-700 */
  .dark\:text-emerald-400 { color: #34D399; } /* Tailwind emerald-400 */
  .bg-emerald-500 { background-color: #10B981; } /* Tailwind emerald-500 */
  .dark\:bg-emerald-300 { background-color: #6EE7B7; } /* Tailwind emerald-300 */

  /* If you want specific custom jewel tones */
  /*
  .text-sapphire-600 { color: #0F4C81; }
  .dark\:text-sapphire-400 { color: #5B9BD5; }
  .text-ruby-600 { color: #9C1943; }
  .dark\:text-ruby-400 { color: #E03B87; }
  .text-emerald-700 { color: #007A4D; }
  .dark\:text-emerald-400 { color: #3DCC91; }
  .bg-emerald-500 { background-color: #00B06B; }
  .dark\:bg-emerald-300 { background-color: #72E0AF; }
  */

  /* Animation for circular progress */
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
  }

  /* Counter animation (requires JS for actual counting, but static HTML shows final state) */
  /* For dynamic effect, a small JS snippet would be needed outside the scope of this task. */
  /* Example of how a JS counter might be initialized: */
  /*
  document.querySelectorAll('.counter').forEach(counter => {
    const updateCount = () => {
      const target = +counter.getAttribute('data-count');
      const count = +counter.innerText;

      const increment = target / 200;

      if (count < target) {
        counter.innerText = Math.ceil(count + increment);
        setTimeout(updateCount, 1);
      } else {
        counter.innerText = target;
      }
    };
    updateCount();
  });
  */
</style>