Sports_Fitness_Charts_Component
스포츠 및 피트니스 애플리케이션을 위한 복잡하고 반응이 빠른 차트 구성 요소로, 흑백 베이스와 단일 액센트 색상이 있는 깔끔하고 미니멀한 스위스 타이포그래피 디자인이 특징입니다. 다크 모드 지원과 다양한 데이터 시각화를 위한 그리드 기반 레이아웃이 포함됩니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 sm:mb-10 lg:mb-12 border-b pb-4 sm:pb-6 border-accent dark:border-dark-accent">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-50 tracking-tight leading-tight mb-2 sm:mb-0">Performance Overview</h1>
<div class="flex items-center space-x-2">
<button class="px-4 py-2 text-sm sm:text-base font-semibold rounded-full bg-accent text-white hover:bg-opacity-90 transition-colors duration-200 ease-in-out shadow-sm">
Weekly
</button>
<button class="px-4 py-2 text-sm sm:text-base font-medium rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
Monthly
</button>
<button class="px-4 py-2 text-sm sm:text-base font-medium rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
Yearly
</button>
</div>
</div>
<!-- Main Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Chart 1: Activity Tracker - Large -->
<div class="col-span-1 md:col-span-2 lg:col-span-2 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Activity Tracker</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Your weekly progress at a glance.</p>
<div class="h-64 sm:h-80 md:h-96 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
<span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Line/Area Chart</span>
<img src="https://picsum.photos/800/400?grayscale&random=1" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6 text-center">
<div>
<p class="text-2xl font-bold text-accent dark:text-dark-accent">12k</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Steps Today</p>
</div>
<div>
<p class="text-2xl font-bold">560</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Calories Burned</p>
</div>
<div>
<p class="text-2xl font-bold relative inline-flex items-baseline">
7.2<span class="text-base font-normal ml-0.5">km</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Distance Covered</p>
</div>
<div>
<p class="text-2xl font-bold relative inline-flex items-baseline">
85<span class="text-base font-normal ml-0.5">bpm</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Avg. Heart Rate</p>
</div>
</div>
</div>
<!-- Chart 2: Performance Goals - Medium -->
<div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Performance Goals</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Track your progress towards set goals.</p>
<div class="h-56 sm:h-64 md:h-60 lg:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
<span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Radar/Bar Chart</span>
<img src="https://picsum.photos/400/300?grayscale&random=2" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
</div>
<div class="mt-6 space-y-4">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-700 dark:text-gray-300">Strength Training</span>
<span class="font-semibold text-accent dark:text-dark-accent">75%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-accent dark:bg-dark-accent h-2.5 rounded-full" style="width: 75%"></div>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-gray-700 dark:text-gray-300">Cardio Endurance</span>
<span class="font-semibold text-accent dark:text-dark-accent">90%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-accent dark:bg-dark-accent h-2.5 rounded-full" style="width: 90%"></div>
</div>
</div>
</div>
<!-- Chart 3: Sleep Quality - Small -->
<div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Sleep Quality</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Rest is key to recovery.</p>
<div class="h-56 sm:h-64 md:h-60 lg:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
<span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Pie/Donut Chart</span>
<img src="https://picsum.photos/400/300?grayscale&random=3" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
</div>
<div class="mt-6 text-center">
<p class="text-4xl font-bold text-accent dark:text-dark-accent">7.5<span class="text-xl font-normal ml-1">hrs</span></p>
<p class="text-sm text-gray-600 dark:text-gray-400">Average Sleep Last Night</p>
<ul class="mt-4 text-sm text-gray-700 dark:text-gray-300 space-y-2">
<li class="flex justify-between items-center">
<span>Deep Sleep:</span>
<span class="font-semibold">2.1 hrs</span>
</li>
<li class="flex justify-between items-center">
<span>REM Sleep:</span>
<span class="font-semibold">1.8 hrs</span>
</li>
<li class="flex justify-between items-center">
<span>Light Sleep:</span>
<span class="font-semibold">3.6 hrs</span>
</li>
</ul>
</div>
</div>
<!-- Chart 4: Team Stats (if applicable) - Large horizontal -->
<div class="col-span-1 md:col-span-2 lg:col-span-3 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Team Performance (Last 5 Games)</h2>
<p class="text-sm text-gray-60:0 dark:text-gray-400 mb-6">A quick look at team's recent form.</p>
<div class="h-56 sm:h-64 md:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
<span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Bar/Stacked Bar Chart</span>
<img src="https://picsum.photos/1000/400?grayscale&random=4" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
</div>
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 text-center">
<div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
<p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 1</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
<p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">L</p>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 2</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
<p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 3</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
<p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 4</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
<p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">L</p>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 5</p>
</div>
</div>
</div>
<!-- Chart 5: Individual Records / Leaderboard -->
<div class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Individual Leaderboard</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Top performers this week.</p>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="flex items-center py-3" aria-label="Leaderboard Rank 1">
<span class="text-lg font-bold text-accent dark:text-dark-accent w-8">1.</span>
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-accent dark:border-dark-accent" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player Avatar">
<div class="flex-1">
<p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">15,200 Steps</p>
</div>
<p class="text-lg font-bold text-gray-900 dark:text-gray-100">+150</p>
</li>
<li class="flex items-center py-3" aria-label="Leaderboard Rank 2">
<span class="text-lg font-bold text-gray-700 dark:text-gray-300 w-8">2.</span>
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Player Avatar">
<div class="flex-1">
<p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">14,800 Steps</p>
</div>
<p class="text-lg font-bold text-gray-900 dark:text-gray-100">+120</p>
</li>
<li class="flex items-center py-3" aria-label="Leaderboard Rank 3">
<span class="text-lg font-bold text-gray-700 dark:text-gray-300 w-8">3.</span>
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Player Avatar">
<div class="flex-1">
<p class="font-semibold text-gray-900 dark:text-gray-100">Mike Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400">13,500 Steps</p>
</div>
<p class="text-lg font-bold text-gray-900 dark:text-gray-100">+100</p>
</li>
</ul>
<button class="mt-6 w-full text-center px-4 py-3 text-sm sm:text-base font-semibold rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
View All Rankings
</button>
</div>
<!-- Chart 6: Hydration Tracker -->
<div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800 flex flex-col justify-between">
<div>
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Hydration Tracker</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Stay hydrated for peak performance.</p>
<div class="relative flex items-center justify-center">
<div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-5xl font-extrabold text-accent dark:text-dark-accent relative overflow-hidden">
<span class="z-10">75%</span>
<div class="absolute bottom-0 w-full bg-blue-400 dark:bg-blue-600 transition-all duration-500 ease-out" style="height: 75%;"></div>
</div>
</div>
<p class="text-center mt-6 text-2xl font-bold text-gray-900 dark:text-gray-100">2.25L</p>
<p class="text-center text-sm text-gray-600 dark:text-gray-400">of 3L Daily Goal</p>
</div>
<button class="mt-6 w-full text-center px-4 py-3 text-sm sm:text-base font-semibold rounded-lg bg-accent text-white hover:bg-opacity-90 transition-colors duration-200 ease-in-out shadow-sm">
Log Water Intake
</button>
</div>
</div>
<!-- Footer/Disclaimer -->
<div class="mt-12 text-center text-xs text-gray-500 dark:text-gray-400">
<p>Disclaimer: Data shown is for illustrative purposes only and may not reflect real-time information.</p>
<p class="mt-1">© 2023 Fitness App. All rights reserved.</p>
</div>
</div>
<style>
/* Define CSS Variables for the accent color */
:root {
--accent-color: #EF4444; /* Tailwind red-500 */
--dark-accent-color: #DC2626; /* Tailwind red-600 for dark mode, slightly darker */
}
.bg-accent {
background-color: var(--accent-color);
}
.text-accent {
color: var(--accent-color);
}
.border-accent {
border-color: var(--accent-color);
}
.dark .bg-dark-accent {
background-color: var(--dark-accent-color);
}
.dark .text-dark-accent {
color: var(--dark-accent-color);
}
.dark .border-dark-accent {
border-color: var(--dark-accent-color);
}
/* Dark mode background for subtle variation */
.dark .bg-gray-850 {
background-color: #1a202c; /* Slightly lighter than gray-900 but darker than gray-800 */
}
</style>관련 구성 요소
스큐어모픽 차트(Skeuomorphic Charts) 컴포넌트
스큐어모픽 디자인, 따뜻한 중립 색 구성표 및 다크 모드 지원을 갖춘 복잡하고 반응이 빠른 차트 구성 요소로, 포럼 또는 커뮤니티 대시보드에 적합합니다.
VibrantGlassmorphismChart
블로그 및 콘텐츠 사이트에 적합한 생생한 색상의 간단한 Glassmorphism 차트 구성 요소입니다. 구성 요소는 반응형이며 Tailwind CSS를 사용하는 어두운 테마 지원을 포함합니다.