Composant Cartes thermiques
Un composant de carte thermique réactif pour les applications industrielles/manufacturières, avec un design inspiré du papier/de l’impression et une palette de couleurs océan/bleu. Inclut la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<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>Composants associés
Composant Cartes thermiques
Composant de carte thermique 3D avec une palette de couleurs analogue, adapté à un portfolio. Il est réactif et prend en charge le mode sombre.
Cartes thermiques Composante 18
Un composant de carte thermique réactif conçu dans un style brutalisme avec un contraste élevé, avec des images de remplacement et la prise en charge d’avatar pour le mode sombre.
Composant Cartes thermiques
Un composant de cartes thermiques réactives conçu avec une esthétique rétro/vintage, intégrant la prise en charge du thème sombre. Il comporte des sections pour un titre, un sous-titre et une carte avec des zones surlignées par la chaleur, avec des images aléatoires supplémentaires et des avatars pour un look nostalgique.