Componente Mappe di calore
Un componente per mappe di calore dal design minimalista e piatto con colori tenui, adatto per siti Web di giochi. Dispone di una griglia di visualizzazione dei livelli di attività, reattivo su tutti i dispositivi e supporta la modalità oscura.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl font-extrabold mb-6 sm:mb-8 text-center text-gray-900 dark:text-white">Weekly Activity Heatmap</h2>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">
<div class="grid grid-cols-8 gap-1 sm:gap-2 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400">
<div class="col-span-1 text-center hidden sm:block">Sun</div>
<div class="col-span-1 text-center hidden sm:block">Mon</div>
<div class="col-span-1 text-center hidden sm:block">Tue</div>
<div class="col-span-1 text-center hidden sm:block">Wed</div>
<div class="col-span-1 text-center hidden sm:block">Thu</div>
<div class="col-span-1 text-center hidden sm:block">Fri</div>
<div class="col-span-1 text-center hidden sm:block">Sat</div>
<div class="col-span-1 text-center hidden lg:block">Score</div>
<div class="col-span-7 grid grid-cols-7 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400 sm:hidden">
<div class="text-center">Sun</div>
<div class="text-center">Mon</div>
<div class="text-center">Tue</div>
<div class="text-center">Wed</div>
<div class="text-center">Thu</div>
<div class="text-center">Fri</div>
<div class="text-center">Sat</div>
</div>
</div>
<div class="grid grid-cols-8 sm:grid-cols-8 gap-1 sm:gap-2">
<!-- Example Row 1 - Day 1 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 10">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">10</span>
</div>
<!-- Day 2 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-200 dark:bg-green-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 30">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
</div>
<!-- Day 3 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-300 dark:bg-indigo-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 55">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">55</span>
</div>
<!-- Day 4 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-400 dark:bg-purple-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 78">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">78</span>
</div>
<!-- Day 5 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-400 dark:bg-red-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 92">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">92</span>
</div>
<!-- Day 6 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-300 dark:bg-blue-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 65">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">65</span>
</div>
<!-- Day 7 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-400 dark:bg-yellow-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 88">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">88</span>
</div>
<!-- Score Indicator -->
<div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">High</div>
<!-- Example Row 2 - Day 1 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-300 dark:bg-red-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 70">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">70</span>
</div>
<!-- Day 2 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-300 dark:bg-yellow-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 60">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">60</span>
</div>
<!-- Day 3 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 20">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">20</span>
</div>
<!-- Day 4 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-300 dark:bg-purple-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 45">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">45</span>
</div>
<!-- Day 5 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-400 dark:bg-green-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 80">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">80</span>
</div>
<!-- Day 6 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-200 dark:bg-indigo-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 35">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">35</span>
</div>
<!-- Day 7 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-400 dark:bg-blue-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 95">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">95</span>
</div>
<!-- Score Indicator -->
<div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Medium</div>
<!-- Add more rows as needed -->
<!-- Example Row 3 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-200 dark:bg-blue-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 25">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">25</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-200 dark:bg-red-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 40">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">40</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-300 dark:bg-green-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 50">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">50</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-200 dark:bg-yellow-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 15">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">15</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-400 dark:bg-indigo-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 85">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">85</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-200 dark:bg-purple-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 30">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-200 dark:bg-gray-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 5">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">05</span>
</div>
<div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Low</div>
</div>
<div class="flex justify-between items-center mt-6 sm:mt-8">
<div class="text-sm text-gray-600 dark:text-gray-400">Current Week: <span class="font-medium">Nov 27 - Dec 03</span></div>
<a href="#" class="text-sm font-semibold text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200">
View All Activity →
</a>
</div>
</div>
<div class="mt-8 text-center">
<h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Activity Insights</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
<p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Peak Activity Day:</p>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400">Saturday</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Highest Engagement Score</p>
</div>
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
<p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Average Daily Score:</p>
<p class="text-4xl font-extrabold text-green-600 dark:text-green-400">67</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Across the entire week</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Mappe di calore
Un componente Heat Maps reattivo con stile Glassmorphism, combinazione di colori analoga e complessità moderata per un portfolio, con supporto per temi scuri.
Componente Mappe di calore
Un componente per mappe di calore dal design minimalista e piatto per le dashboard, con una combinazione di colori complementare, un layout reattivo e il supporto della modalità scura. Visualizza i livelli di attività nel tempo.
Componente Mappe di calore
Un componente Heat Maps progettato in stile Brutalismo con toni della Terra, complessità moderata e design reattivo con supporto per temi scuri.