Componente Mappe di calore
Un componente per mappe termiche reattivo per applicazioni manifatturiere/industriali, caratterizzato da un design ispirato alla carta/stampa e una combinazione di colori oceano/blu. Include il supporto per la modalità oscura e l'HTML semantico.
Codice HTML
<div class="font-sans bg-slate-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<!-- Header Section -->
<div class="p-6 sm:p-8 bg-gradient-to-r from-blue-700 to-sky-500 dark:from-blue-900 dark:to-sky-700 text-white border-b-4 border-sky-400 dark:border-sky-500">
<h2 class="text-3xl sm:text-4xl font-extrabold mb-2 leading-tight">Production Line Heat Map</h2>
<p class="text-lg opacity-90">Real-time operational insights for manufacturing efficiency.</p>
</div>
<!-- Controls/Filters Section -->
<div class="p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
<div class="flex items-center space-x-2">
<label for="period-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Period:</label>
<select id="period-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
<option>Last Hour</option>
<option selected>Last 24 Hours</option>
<option>Last 7 Days</option>
<option>Last 30 Days</option>
</select>
</div>
<div class="flex items-center space-x-2">
<label for="metric-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Metric:</label>
<select id="metric-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
<option selected>Temperature (°C)</option>
<option>Vibration (Hz)</option>
<option>Pressure (bar)</option>
<option>Downtime (min)</option>
</select>
</div>
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold rounded-md shadow-md transition duration-200 ease-in-out text-sm w-full sm:w-auto">
Refresh Data
</button>
</div>
<!-- Heat Map Grid Area -->
<div class="p-6 sm:p-8">
<h3 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Sensor Performance Overview</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
<!-- Example Heat Map Cells -->
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 1</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Conveyor Belt 1</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<!-- Heat map indicator - Example: Red for high, Blue for low -->
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-red-400 via-orange-400 to-yellow-300 dark:from-red-600 dark:via-orange-600 dark:to-yellow-500 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">92°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-up text-red-500"></i> +5% from avg.</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 95°C (10:15 AM)</li>
<li>Avg. 24h: 87°C</li>
<li>Status: <span class="text-yellow-200">Warning</span></li>
</ul>
</div>
</div>
</div>
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 2</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Robotic Arm Extruder</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-green-400 via-blue-400 to-cyan-300 dark:from-green-600 dark:via-blue-600 dark:to-cyan-500 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">78°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-down text-green-500"></i> -2% from avg.</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 79°C (08:30 AM)</li>
<li>Avg. 24h: 80°C</li>
<li>Status: <span class="text-green-200">Optimal</span></li>
</ul>
</div>
</div>
</div>
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 3</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Curing Oven C-14</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-yellow-400 via-orange-500 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-700 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">185°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-exclamation-triangle text-orange-500"></i> +10% from avg.</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 188°C (09:00 AM)</li>
<li>Avg. 24h: 170°C</li>
<li>Status: <span class="text-orange-200">Critical</span></li>
</ul>
</div>
</div>
</div>
<div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
<div class="p-4 flex flex-col justify-between h-full">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 4</p>
<h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Assembly Line 3</h4>
</div>
<div class="relative flex-grow flex items-center justify-center">
<div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-blue-400 via-cyan-400 to-teal-300 dark:from-blue-600 dark:via-cyan-600 dark:to-teal-500 opacity-70"></div>
<span class="relative text-5xl font-extrabold text-white text-shadow-lg">65°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-check-circle text-green-500"></i> Stable</p>
</div>
<div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
<div>
<p class="font-semibold mb-2">Details:</p>
<ul class="text-sm text-left list-disc list-inside space-y-1">
<li>Last Spike: 66°C (07:00 AM)</li>
<li>Avg. 24h: 65°C</li>
<li>Status: <span class="text-green-200">Optimal</span></li>
</ul>
</div>
</div>
</div>
<!-- Add more heat map cells as needed -->
</div>
<!-- Example Legend for the Heat Map -->
<div class="mt-8 flex flex-wrap justify-center gap-4 text-sm">
<div class="flex items-center">
<span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600"></span>
<span class="text-gray-700 dark:text-gray-300">Optimal (< 80°C)</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-yellow-400 to-orange-400 dark:from-yellow-600 dark:to-orange-600"></span>
<span class="text-gray-700 dark:text-gray-300">Warning (80-95°C)</span>
</div>
<div class="flex items-center">
<span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700"></span>
<span class="text-gray-700 dark:text-gray-300">Critical (> 95°C)</span>
</div>
</div>
</div>
<!-- Footer Section -->
<div class="p-4 sm:p-6 text-center text-gray-500 dark:text-gray-400 text-xs bg-gray-50 dark:bg-gray-850 border-t border-gray-200 dark:border-gray-700">
<p>© 2023 Industrial Insights. All rights reserved. Data updated as of <time datetime="2023-10-27T14:30:00Z">Oct 27, 2023, 2:30 PM UTC</time></p>
<p class="mt-1">Powered by Advanced Sensor Analytics.</p>
</div>
</div>
</div>Componenti correlati
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.
Componente Mappe di calore
Un componente di mappa termica reattivo progettato con effetti di vetromorfismo, con elementi traslucidi simili al vetro smerigliato e supporto per lo stile del tema scuro, utilizzando Tailwind CSS.
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.