Cyberpunk-Diagramm-Komponente

<div class="font-sans antialiased bg-gray-950 text-gray-200 dark:bg-gray-950 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-3xl shadow-2xl overflow-hidden border border-blue-900/50 relative">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-950/20 via-transparent to-purple-950/20 pointer-events-none z-0"></div>
    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b border-gray-700/50 pb-4">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-blue-400 group-hover:text-blue-300 transition-colors duration-300 tracking-wide mb-2">
            <span class="text-blue-500">\\</span> Data Progression Analysis
          </h2>
          <p class="text-gray-400 text-sm sm:text-base">Visualize your learning journey and track progress over time.</p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-2">
          <button class="flex items-center px-4 py-2 bg-gray-800 text-blue-300 rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-blue-400 group-hover:text-white transition-colors duration-300" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Filter by Date</span>
          </button>
          <button class="flex items-center px-4 py-2 bg-blue-700 text-white rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-white group-hover:animate-pulse" 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Settings</span>
          </button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="col-span-1 lg:col-span-2 bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300">
          <h3 class="text-xl font-semibold text-blue-300 mb-4">Weekly Performance Overview</h3>
          <!-- Placeholder for Chart -->
          <div class="relative w-full h-64 sm:h-80 md:h-96 flex items-center justify-center bg-gray-900 border border-blue-800/60 rounded-lg overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 via-transparent to-blue-800/10 animate-pulse-slow pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-full p-4 flex flex-col justify-between items-end text-right text-xs text-gray-500">
              <span class="text-red-400">100%</span>
              <span>80%</span>
              <span>60%</span>
              <span>40%</span>
              <span>20%</span>
              <span class="text-blue-400">0%</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full p-4 flex justify-around text-gray-500 text-xs">
              <span>Mon</span>
              <span>Tue</span>
              <span>Wed</span>
              <span>Thu</span>
              <span>Fri</span>
              <span>Sat</span>
              <span>Sun</span>
            </div>
            <!-- Example 'graph' elements - can be replaced with actual chart library output -->
            <div class="absolute bottom-8 left-8 right-8 top-8 flex items-end justify-around">
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out h-[60%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-75 h-[80%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-150 h-[40%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-225 h-[90%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-300 h-[70%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-375 h-[50%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-450 h-[85%] hover:scale-x-105 hover:bg-blue-400"></div>
            </div>
            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-lg sm:text-xl font-bold opacity-30 pointer-events-none">
              CHART DATA
            </div>
          </div>
          <p class="mt-4 text-gray-400 text-sm">This chart displays your average score and completion rate for various learning modules throughout the week.</p>
        </div>

        <div class="col-span-1 flex flex-col space-y-6">
          <!-- Key Metrics -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Key Metrics</h3>
            <div class="space-y-4">
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-blue-500 mr-3 animate-pulse group-hover:scale-110"></div>
                <span>Average Score: <strong class="text-blue-400">88.5%</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-purple-500 mr-3 animate-pulse delay-100 group-hover:scale-110"></div>
                <span>Modules Completed: <strong class="text-purple-400">12/15</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-red-500 mr-3 animate-pulse delay-200 group-hover:scale-110"></div>
                <span>Time Spent (Hrs): <strong class="text-red-400">24.5</strong></span>
              </div>
            </div>
          </div>

          <!-- Daily Trend -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Daily Trend</h3>
            <p class="text-gray-400 text-sm mb-4">See your average score by day.</p>
            <div class="flex justify-between items-end h-24 sm:h-32 relative">
              <div class="absolute w-full h-0.5 bg-gray-700 bottom-0 left-0"></div>
              <!-- Bars -->
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 80%;"></div>
                <span class="text-xs text-gray-500 mt-1">Mon</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 65%;"></div>
                <span class="text-xs text-gray-500 mt-1">Tue</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 90%;"></div>
                <span class="text-xs text-gray-500 mt-1">Wed</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 75%;"></div>
                <span class="text-xs text-gray-500 mt-1">Thu</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 85%;"></div>
                <span class="text-xs text-gray-500 mt-1">Fri</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 50%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sat</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 70%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sun</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recommendations/Insights -->
      <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
        <h3 class="text-xl font-semibold text-blue-300 mb-3">Insights & Recommendations</h3>
        <ul class="list-disc list-inside text-gray-400 space-y-2">
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">You had a strong performance on Wednesday. Keep up the momentum!</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Consider reviewing modules related to 'Data Structures' as your scores dipped on Tuesday.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Your weekend learning hours are lower. A short review session could make a difference.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Aim to achieve 90% completion rate by end of next week.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom pulsing animation for background effect */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.05); opacity: 0.2; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
  }
</style>