Neumorphic Heat Map 컴포넌트
트라이어딕 색 구성표가 있는 반응형 뉴모픽 히트 맵 구성 요소로, 비즈니스 및 기업 웹 사이트를 위해 설계되었습니다. 부드러운 그림자와 다크 모드 지원이 특징이며 데이터 강도를 시각적으로 표시합니다.
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>관련 구성 요소
Heat Maps 구성 요소
Tailwind CSS를 사용하여 다크 모드용으로 스타일링된 반응형 히트 맵 구성 요소로, 임의의 자리 표시자 이미지와 사용자 아바타가 특징입니다.
Heat Maps 구성 요소
레트로/빈티지 미학으로 디자인된 반응형 히트 맵 구성 요소이며 어두운 테마 지원을 통합합니다. 제목, 부제목, 열이 강조 표시된 영역이 있는 지도에 대한 섹션이 있으며, 향수를 불러일으키는 느낌을 주기 위해 추가 무작위 이미지와 아바타가 있습니다.
Heat Maps 구성 요소
글래스모피즘 효과로 디자인된 반응형 히트 맵 구성 요소로, 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 활용하는 어두운 테마 스타일을 지원합니다.