Componente Mappe di calore
Un componente per mappe di calore semplice e reattivo per siti Web di agricoltura/allevamento, con una combinazione di colori retrò/vintage e supporto per la modalità scura, progettato pensando alle microinterazioni.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-colors duration-300">
<div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Field Soil Moisture Heatmap</h2>
<div class="relative group">
<button class="px-4 py-2 bg-green-700 hover:bg-green-600 active:bg-green-800 text-white text-sm font-semibold rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition-all duration-200 ease-in-out transform group-hover:scale-105 group-hover:rotate-1 group-active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 17V6zm9 6a1 1 0 11-2 0 1 1 0 012 0zm-3 1a1 1 0 100-2 1 1 0 000 2zm6-2a1 1 0 11-2 0 1 1 0 012 0z" clip-rule="evenodd" />
</svg>
View Details
</button>
<div class="absolute bottom-full mb-2 hidden group-hover:block transition-all duration-300 ease-out opacity-0 group-hover:opacity-100 -left-8 right-0 mx-auto w-48 p-2 text-xs text-white bg-gray-700 dark:bg-gray-900 rounded-md shadow-lg pointer-events-none origin-bottom scale-90 group-hover:scale-100">
More information about this heatmap.
<div class="absolute left-1/2 -ml-1 w-0 h-0 border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-900 transform translate-y-full -bottom-2"></div>
</div>
</div>
</div>
<div class="p-6">
<div class="flex flex-col md:flex-row gap-6">
<div class="relative flex-1 bg-gradient-to-br from-indigo-200 via-teal-200 to-yellow-200 dark:from-indigo-900/40 dark:via-teal-900/40 dark:to-yellow-900/40 rounded-lg p-6 shadow-inner overflow-hidden border-2 border-dashed border-gray-400 dark:border-gray-600 transition-all duration-300 group-hover:border-solid">
<div class="absolute inset-0 bg-contain bg-no-repeat bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/farm/800/600'); filter: grayscale(100%);"></div>
<div class="relative grid grid-cols-5 md:grid-cols-10 gap-1.5 auto-rows-min md:auto-rows-fr h-full" style="min-height: 200px;">
<!-- Heatmap Cells -->
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="85%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">85%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="78%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">78%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="72%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">72%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="65%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">65%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="59%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">59%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="52%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">52%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="45%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">45%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="39%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">39%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="33%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">33%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="28%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">28%</span>
</div>
<!-- Repeat for more cells, adjusting background-color and data-tooltip-value -->
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="88%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">88%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="81%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">81%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="75%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">75%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="68%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">68%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="62%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">62%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="55%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">55%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="48%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">48%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="42%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">42%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="36%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">36%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="30%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">30%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="90%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">90%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="83%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">83%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="77%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">77%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="70%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">70%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="64%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">64%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="57%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">57%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="50%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">50%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="44%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">44%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="38%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">38%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="32%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">32%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="87%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">87%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="80%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">80%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="74%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">74%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="67%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">67%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="61%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">61%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="54%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">54%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="47%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">47%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="41%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">41%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="35%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">35%</span>
</div>
<div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="29%">
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">29%</span>
</div>
<!-- More rows/cols as needed for a larger grid -->
</div>
</div>
<div class="flex flex-col space-y-4 md:w-1/3 min-w-[150px]">
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Legend</h3>
<ul class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
<li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #fef08a;"></span>High Moisture (80-100%)</li>
<li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #e0c878;"></span>Medium Moisture (50-79%)</li>
<li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #697718;"></span>Low Moisture (0-49%)</li>
</ul>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Last Updated</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">2023-10-27, 10:30 AM</p>
<div class="flex items-center space-x-2 mt-4 text-gray-600 dark:text-gray-300">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Operator Photo" class="w-8 h-8 rounded-full border-2 border-green-600 dark:border-green-400 object-cover transform hover:scale-110 transition-transform duration-200 animate-pulse-slight">
<p class="text-sm">By John Doe, Farm Ops</p>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 pt-4 text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700">
<p>Data provided by AgriSense Pro sensors. For optimal yield, consider irrigating areas with less than 60% soil moisture.</p>
</div>
</div>
</div>
<style>
/* Custom CSS for Retro/Vintage color palette for heatmap cells */
/* These colors are manually set for demonstration */
/* High Moisture (Warm/Yellow Tones) */
[data-tooltip-value^='8'],
[data-tooltip-value^='7'] {
--cell-color: #fef08a; /* lightest yellow */
--cell-color-darker: #d9b62c; /* darker yellow for border/active */
}
/* Medium Moisture (Muted Green/Brown Tones) */
[data-tooltip-value^='6'],
[data-tooltip-value^='5'] {
--cell-color: #e0c878; /* light brown/khaki */
--cell-color-darker: #b78f4a; /* darker brown for border/active */
}
/* Low Moisture (Desaturated Green/Gray Tones) */
[data-tooltip-value^='4'],
[data-tooltip-value^='3'],
[data-tooltip-value^='2'] {
--cell-color: #697718; /* muted dark green */
--cell-color-darker: #313300; /* even darker green for border/active */
}
/* Example of how to add more nuanced colors if needed, e.g., for in-between ranges */
[data-tooltip-value='85%'] { --cell-color: #fef08a; --cell-color-darker: #d9b62c; }
[data-tooltip-value='78%'] { --cell-color: #f9e2ae; --cell-color-darker: #d1a65f; }
[data-tooltip-value='72%'] { --cell-color: #f2d596; --cell-color-darker: #c69b59; }
[data-tooltip-value='65%'] { --cell-color: #e0c878; --cell-color-darker: #b78f4a; }
[data-tooltip-value='59%'] { --cell-color: #c8b760; --cell-color-darker: #9a8a3a; }
[data-tooltip-value='52%'] { --cell-color: #b1a748; --cell-color-darker: #817a26; }
[data-tooltip-value='45%'] { --cell-color: #999738; --cell-color-darker: #656417; }
[data-tooltip-value='39%'] { --cell-color: #818728; --cell-color-darker: #4b4f00; }
[data-tooltip-value='33%'] { --cell-color: #697718; --cell-color-darker: #313300; }
[data-tooltip-value='28%'] { --cell-color: #516708; --cell-color-darker: #171800; }
/* Ensure a smooth transition for colors if possible with more granular data points */
/* This is a simplification; a real app would likely use JS to calculate colors based on value */
@keyframes pulse-slight {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.animate-pulse-slight {
animation: pulse-slight 2s infinite ease-in-out;
}
</style>Componenti correlati
Componente Mappe di calore
Un componente heatmap con design minimalista, layout reattivo e supporto per temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript. Utilizza i CSS per lo stile della modalità scura.
Luxury_Premium_Heatmap_Component
Un componente di mappa di calore triadico elegante e sofisticato progettato per siti Web di notizie e giornalismo, che mostra la popolarità o il coinvolgimento degli articoli. Presenta una tipografia raffinata, sfumature sottili e una reattività completa con il supporto della modalità scura.
Componente Mappe di calore
Un componente di mappe termiche reattivo con stile per la modalità oscura utilizzando Tailwind CSS, con immagini segnaposto casuali e avatar utente.