Componente della mappa di calore neumorfica
Un componente di mappa termica neumorfica reattivo con una combinazione di colori triadica, progettato per siti Web aziendali e aziendali. Presenta ombre morbide e supporto per la modalità oscura, visualizzando visivamente l'intensità dei dati.
Codice HTML
<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>Componenti correlati
Componente Mappe di calore
Un componente Heat Maps reattivo con un'estetica retrò/vintage, progettato per scopi di blog/contenuti, con elementi interattivi e supporto per temi scuri.
Componente Mappe di calore
Un componente di mappe di calore reattivo progettato con glassmorphism e una combinazione di colori analoga per le interfacce dei social media.
Componente Mappe di calore
Un componente Heat Maps per il consumo di blog/contenuti, caratterizzato da un design reattivo con supporto per la modalità scura. Utilizza una combinazione di colori in scala di grigi e una complessità media con funzionalità interattive. Niente JavaScript, HTML puro con Tailwind CSS.