Memphis_Gaming_Progress_Indicators

<div class="bg-gradient-to-br from-orange-300 to-red-400 dark:from-gray-800 dark:to-gray-950 p-6 sm:p-8 md:p-10 lg:p-12 font-sans overflow-hidden relative rounded-lg shadow-xl">

  <!-- Memphis background elements (for visual flair) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
    <div class="absolute w-40 h-40 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-50 -top-10 -left-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-60 h-60 bg-red-500 dark:bg-red-700 rounded-lg transform rotate-45 opacity-40 top-1/3 left-1/4 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-32 h-32 bg-orange-600 dark:bg-orange-800 rounded-full opacity-60 bottom-10 right-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-52 h-52 bg-pink-400 dark:bg-pink-600 rounded-full opacity-50 -bottom-20 -right-20 mix-blend-multiply blur-xl"></div>
  </div>

  <div class="relative z-10 space-y-8">
    <!-- Header / Title -->
    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white dark:text-orange-300 drop-shadow-lg leading-tight relative">
        Player Progress
        <span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-2 bg-yellow-300 dark:bg-yellow-500 rounded-full"></span>
      </h2>
      <p class="mt-3 text-sm sm:text-base text-orange-100 dark:text-gray-400 font-medium">Track your epic journey through the gaming world!</p>
    </div>

    <!-- Level Indicator & Player Info -->
    <div class="flex flex-col md:flex-row items-center justify-between bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-4 sm:p-6 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transition-all duration-300 hover:shadow-2xl">
      <div class="flex items-center space-x-4 mb-4 md:mb-0">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg">
        <div>
          <p class="text-xl sm:text-2xl font-bold text-white dark:text-orange-300 drop-shadow-md">TurboGamerX</p>
          <p class="text-sm text-orange-100 dark:text-gray-400">Rank: Grand Master</p>
        </div>
      </div>
      <div class="text-center sm:text-right">
        <div class="bg-yellow-400 dark:bg-yellow-600 px-6 py-2 rounded-full shadow-lg transform rotate-2 hover:rotate-0 transition-transform duration-300">
          <p class="text-2xl sm:text-3xl font-extrabold text-red-700 dark:text-red-900 drop-shadow">Level 42</p>
        </div>
      </div>
    </div>

    <!-- Progress Bars Section -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- XP Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Experience Points (XP)</p>
        <div class="w-full bg-red-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-yellow-300 to-orange-500 dark:from-yellow-400 dark:to-orange-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 75%;">
            <div class="absolute top-0 right-0 h-full w-2 bg-yellow-200 dark:bg-yellow-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">75% (8500 / 11333 XP)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Next Level: 2833 XP</p>
      </div>

      <!-- Quest Completion Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Quests Completed</p>
        <div class="w-full bg-green-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-teal-300 to-blue-500 dark:from-teal-400 dark:to-blue-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 90%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-teal-200 dark:bg-teal-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">90% (81 / 90 Quests)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Keep going, champion!</p>
      </div>

      <!-- Event Score Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Event Score: "Dragon's Ascent"</p>
        <div class="w-full bg-purple-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-pink-300 to-purple-500 dark:from-pink-400 dark:to-purple-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 60%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-pink-200 dark:bg-pink-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">60% (12000 / 20000 Pts)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Earn 8000 more points for exclusive rewards!</p>
      </div>

      <!-- Achievements Progress -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Achievements Unlocked</p>
        <div class="flex items-center space-x-3">
          <div class="relative w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-red-500 dark:bg-red-700 text-white flex items-center justify-center text-4xl sm:text-5xl font-bold border-4 border-yellow-300 dark:border-yellow-500 shadow-md">
            <span class="animate-pulse">🎉</span>
          </div>
          <div>
            <p class="text-2xl sm:text-3xl font-extrabold text-white dark:text-orange-300">15 / 20</p>
            <p class="text-sm text-orange-100 dark:text-gray-400">Total Achievements</p>
          </div>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-3">Almost there! Unlock unique titles and badges.</p>
      </div>

    </div>

    <!-- Call to Action / Footer -->
    <div class="text-center pt-8">
      <button class="bg-yellow-400 dark:bg-orange-600 hover:bg-yellow-500 dark:hover:bg-orange-700 text-red-800 dark:text-white font-bold py-3 px-8 rounded-full shadow-lg transform scale-105 hover:scale-110 transition-all duration-300 relative overflow-hidden group">
        <span class="relative z-10">Explore All Stats</span>
        <span class="absolute top-0 left-0 w-full h-full bg-white/20 dark:bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse"></span>
      </button>
      <p class="mt-4 text-xs text-orange-200 dark:text-gray-500 font-medium">Continue your adventure and set new records!</p>
    </div>

  </div>
</div>