Composant Cartes thermiques
Un composant de carte thermique au design minimaliste et plat avec des couleurs sourdes, adapté aux sites de jeux. Dispose d’un affichage en grille des niveaux d’activité, réactif sur tous les appareils et prend en charge le mode sombre.
HTML Code
<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>Composants associés
Composant Cartes thermiques
Un composant de carte thermique simple et réactif pour les sites Web agricoles, avec une palette de couleurs rétro/vintage et une prise en charge du mode sombre, conçu pour les micro-interactions.
Composant Cartes thermiques
Un composant de cartes thermiques réactif conçu pour le mode sombre à l’aide de Tailwind CSS, avec des images de remplacement aléatoires et des avatars d’utilisateurs.
Composant Cartes thermiques
Un composant de carte thermique avec un design minimaliste, une mise en page réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus. Utilise CSS pour le style en mode sombre.