Heat Maps 구성 요소
제조/산업 응용 분야를 위한 반응형 히트 맵 구성 요소로, 종이/인쇄물에서 영감을 받은 디자인과 바다/파란색 색 구성표가 특징입니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.
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>관련 구성 요소
Neumorphism Vibrant Heat Maps 구성 요소
Neumorphism 디자인이 적용된 반응형 Heat Maps 구성 요소로, 생생한 색 구성표와 적당한 복잡성을 사용합니다. 다크 모드 지원 및 호버 효과가 포함됩니다. 일반 HTML 및 Tailwind CSS 클래스로 구축되었으며 사용자 정의 Neumorphism 그림자 및 색상 수준을 위한 작은 CSS 블록이 추가되었습니다.
Neumorphic Heat Map 컴포넌트
트라이어딕 색 구성표가 있는 반응형 뉴모픽 히트 맵 구성 요소로, 비즈니스 및 기업 웹 사이트를 위해 설계되었습니다. 부드러운 그림자와 다크 모드 지원이 특징이며 데이터 강도를 시각적으로 표시합니다.
히트 맵 구성 요소 42
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 히트 맵 구성 요소로, 다크 모드를 지원하며 임의의 이미지와 아바타를 제공합니다.