Компонент нейроморфной тепловой карты

<div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-850 p-6 sm:p-8 rounded-2xl shadow-xl dark:shadow-xl-dark transition-all duration-300 transform
              neumorphic-light dark:neumorphic-dark
              border border-gray-300 dark:border-gray-700">

    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Website Activity Heatmap</h2>
      <div class="relative inline-block text-left">
        <button type="button" class="inline-flex justify-center w-full rounded-xl border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gray-200 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 neumorphic-button-light dark:neumorphic-button-dark" id="menu-button" aria-expanded="true" aria-haspopup="true">
          Last 30 Days
          <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <div class="overflow-x-auto pb-4">
      <div class="grid grid-cols-7 gap-2 sm:gap-3 lg:gap-4 min-w-[500px]">
        <!-- Days Row -->
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Mon</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Tue</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Wed</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Thu</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Fri</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sat</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sun</div>

        <!-- Heatmap Grid Cells -->
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.1;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-95" style="--intensity: 0.95;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-100" style="--intensity: 1.0;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-85" style="--intensity: 0.85;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-5" style="--intensity: 0.05;"></div>

      </div>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
      <div class="flex items-center space-x-2 mb-4 sm:mb-0">
        <span class="font-medium">Intensity:</span>
        <div class="w-16 h-4 rounded-full bg-blue-300 dark:bg-blue-600 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <div class="w-16 h-4 rounded-full bg-blue-500 dark:bg-blue-500 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <div class="w-16 h-4 rounded-full bg-blue-700 dark:bg-blue-400 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <span>Low</span>
        <span>High</span>
      </div>
      <p class="text-center sm:text-right">Last updated: <span class="font-semibold">Yesterday, 3:45 PM</span></p>
    </div>

    <style>
      /* Base background color and custom properties for neumorphism */
      .bg-gray-850 {
        background-color: #27272a;
      }
      .neumorphic-light {
        box-shadow: 8px 8px 16px #acacac, -8px -8px 16px #ffffff;
      }
      .dark\:neumorphic-dark {
        box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
      }

      /* Neumorphic buttons */
      .neumorphic-button-light {
        box-shadow: 4px 4px 8px #bdbdbd, -4px -4px 8px #ffffff;
      }
      .neumorphic-button-light:hover {
        box-shadow: 2px 2px 4px #bdbdbd, -2px -2px 4px #ffffff;
        transform: translateY(1px);
      }
      .dark\:neumorphic-button-dark {
        box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
      }
      .dark\:neumorphic-button-dark:hover {
        box-shadow: 2px 2px 4px #1a1a1a, -2px -2px 4px #333333;
        transform: translateY(1px);
      }

      /* Heatmap cells */
      .neumorphic-cell-light {
        width: 40px;
        height: 40px;
        min-width: 32px;
        min-height: 32px;
        max-width: 60px;
        max-height: 60px; /* Constraints for responsiveness */
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        background-color: hsl(200, 70%, 50%); /* Blue - primary triadic color */
        box-shadow: inset 3px 3px 6px #acacac, inset -3px -3px 6px #ffffff;
        transition: all 0.2s ease-in-out;
      }
      @media (min-width: 640px) {
        .neumorphic-cell-light {
          width: 50px;
          height: 50px;
        }
      }
      @media (min-width: 768px) {
        .neumorphic-cell-light {
            width: 55px;
            height: 55px;
        }
      }
      @media (min-width: 1024px) {
        .neumorphic-cell-light {
            width: 60px;
            height: 60px;
        }
      }

      .dark\:neumorphic-cell-dark {
        background-color: hsl(200, 70%, 40%); /* Darker blue */
        box-shadow: inset 3px 3px 6px #1a1a1a, inset -3px -3px 6px #333333;
        border: 1px solid rgba(255,255,255,0.05);
      }

      /* Intensity-based color variation for cells (applied via --intensity custom property) */
      .neumorphic-cell-light[style*='--intensity'] {
        background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(50% - var(--intensity, 0.5) * 10%)); /* Hue shift towards green/yellow, saturation/lightness adjust */
      }
      .dark\:neumorphic-cell-dark[style*='--intensity'] {
        background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(40% + var(--intensity, 0.5) * 10%)); /* Darker base, shifts to lighter/more saturated with intensity */
      }

      /* Inner shadows for intensity legend */
      .neumorphic-inner-light {
        box-shadow: inset 2px 2px 4px #acacac, inset -2px -2px 4px #ffffff;
      }
      .dark\:neumorphic-inner-dark {
        box-shadow: inset 2px 2px 4px #1a1a1a, inset -2px -2px 4px #333333;
      }

      /* Triadic Color Scheme: Blue (Primary), Red-Orange, Green/Yellow for Accent/Highlight */
      /* Blue: hsl(200, 70%, 50%) -> Tailwind equivalent: blue-500, blue-300, blue-700 */
      /* Red-Orange: hsl(20, 70%, 50%) - could be used for danger/alert, not directly used in this heatmap intensity but good for overall palette */
      /* Green/Yellow: hsl(140, 70%, 50%) - subtle shift for higher intensity in light mode or as accent */
      /* The heatmap uses a subtle hue shift within the blue family for intensity, blending towards a greener blue for 'high' */
      /* The `bg-blue-300`, `bg-blue-500`, `bg-blue-700` in the legend illustrate intensity levels */
    </style>
  </div>
</div>