Компонента вибрационных тепловых карт Neumorphism

<!-- Heat Maps Component - Neumorphism, Vibrant, Responsive, Dark Mode, No JS -->

<div class="p-4 transition-colors duration-300 neumorphism-container">

  <!-- Component Title -->
  <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Annual Contribution Summary</h3>

  <div class="flex overflow-x-auto pb-4">
    <!-- Month Labels (simplified) -->
    <div class="flex flex-col mr-2 text-sm text-gray-600 dark:text-gray-400">
        <span class="h-5 mb-1"></span> <!-- Spacing for alignment -->
        <span class="h-5 mb-1">Jan</span>
        <span class="h-5 mb-1">Feb</span>
        <span class="h-5 mb-1">Mar</span>
        <span class="h-5 mb-1">Apr</span>
        <span class="h-5 mb-1">May</span>
        <span class="h-5 mb-1">Jun</span>
        <span class="h-5 mb-1">Jul</span>
        <span class="h-5 mb-1">Aug</span>
        <span class="h-5 mb-1">Sep</span>
        <span class="h-5 mb-1">Oct</span>
        <span class="h-5 mb-1">Nov</span>
        <span class="h-5 mb-1">Dec</span>
      </div>


    <!-- Heatmap Grid - Simplified representation of columns (weeks/days) -->
    <div class="grid grid-flow-col grid-rows-12 gap-1">
      <!-- Column representing a week/period -->
      <div class="flex flex-col gap-1">
        <!-- Cells representing days -->
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <!-- Repeat columns for more data points -->
      <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
        <!-- Add more columns for a fuller year representation -->
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
    </div>
  </div>

  <!-- Legend -->
   <div class="flex justify-end items-center text-sm mt-4 text-gray-600 dark:text-gray-400">
      Less
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-0 ml-2"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-1 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-2 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-3 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-4 ml-1 mr-2"></div>
      More
   </div>

</div>

<!-- Add custom CSS for Neumorphism and color levels -->
<!-- These styles are necessary to achieve the specific Neumorphism effect
     and vibrant color levels not available via standard Tailwind utilities alone. -->
<style>
/* Base background for Neumorphism */
/* Apply this to the body or the container containing the component for the full effect */
/* body {
  background-color: #e0e0e0;
} */

/* Neumorphism container style */
.neumorphism-container {
  background: #e0e0e0; /* Base light mode color */
  border-radius: 12px;
  padding-top: 1rem; /* pt-4 */
  padding-bottom: 1rem; /* pb-4 */
  padding-left: 1rem; /* pl-4 */
   padding-right: 1rem; /* pr-4 */
  /* Convex effect */
  box-shadow: 7px 7px 15px #bebebe,
             -7px -7px 15px #ffffff;
}

/* Dark mode Neumorphism container style */
.dark .neumorphism-container {
  background: #333333; /* Base dark mode color */
   box-shadow: 7px 7px 15px #222222,
              -7px -7px 15px #444444;
}


/* Neumorphism cell base style */
.neumorphism-cell {
  background: #e0e0e0; /* Match container background initially */
   box-shadow: 2px 2px 5px #bebebe,
              -2px -2px 5px #ffffff;
   transition: all 0.1s ease-in-out; /* Smooth transition for hover */
}

/* Dark mode Neumorphism cell base style */
.dark .neumorphism-cell {
   background: #333333; /* Match dark container background */
   box-shadow: 2px 2px 5px #222222,
              -2px -2px 5px #444444;
}


/* Vibrant Color Levels (Light Mode) */
.level-0 { background-color: #e0e0e0; } /* Base/none */
.level-1 { background-color: #a7f3d0; } /* Green 200 */
.level-2 { background-color: #34d399; } /* Green 500 */
.level-3 { background-color: #059669; } /* Green 700 */
.level-4 { background-color: #047857; } /* Green 800 - More vibrant */

/* Vibrant Color Levels (Dark Mode) */
.dark .level-0 { background-color: #333333; } /* Base/none */
.dark .level-1 { background-color: #064e3b; } /* Green 900 dark inverse */
.dark .level-2 { background-color: #065f46; } /* Green 800 dark inverse */
.dark .level-3 { background-color: #047857; } /* Green 700 dark inverse */
.dark .level-4 { background-color: #059669; } /* Green 600 dark inverse */


/* Hover effect: Simulate pressing in */
.neumorphism-cell.hover\:level-0-hover:hover {
  box-shadow: inset 2px 2px 5px #bebebe,
             inset -2px -2px 5px #ffffff;
}
.dark .neumorphism-cell.hover\:level-0-hover:hover {
   box-shadow: inset 2px 2px 5px #222222,
              inset -2px -2px 5px #444444;
}


.neumorphism-cell.hover\:level-1-hover:hover {
   box-shadow: inset 2px 2px 5px #86efac, /* Darker vibrant shadow */
              inset -2px -2px 5px #d1fae5; /* Lighter vibrant highlight */
}
.dark .neumorphism-cell.hover\:level-1-hover:hover {
    box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #0f766e;
}


.neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #10b981,
              inset -2px -2px 5px #6ee7b7;
}
.dark .neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #1d403b;
}

.neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #06d6a0;
}
.dark .neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #022c22;
}

.neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #065f46,
              inset -2px -2px 5px #08e5a4;
}
.dark .neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #011f17;
}

/* Note: Ensure parent container or body has a background color matching the neumorphism base */
/* For the preview, you might need to add a base background to the html or body */
/*
html, body {
  background-color: #e0e0e0; /* Light mode base *
  transition: background-color 0.3s ease;
}
.dark html, .dark body {
   background-color: #333333; /* Dark mode base *
}
*/

</style>