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>관련 구성 요소
차트 구성 요소
머티리얼 디자인 원칙에 따라 설계된 반응형 차트 구성 요소로, 파스텔 색조 구성표와 복잡한 상호 작용성을 특징으로 하여 포트폴리오를 보여줍니다. 여기에는 Tailwind CSS 클래스를 사용한 다크 모드 지원이 포함됩니다.
차트 구성 요소
비즈니스 웹사이트를 위한 브루탈리즘 스타일의 차트 구성 요소로, 삼각형 색 구성표와 적당한 복잡성을 특징으로 합니다. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.
Memphis_Finance_Charts_Component
멤피스 디자인(Memphis Design)에서 영감을 받은 복잡한 금융 차트 구성 요소로, 대담한 색상, 기하학적 모양, 네온/일렉트릭 색상 구성표가 특징입니다. 완벽하게 반응하고 다크 모드를 지원하며 금융/뱅킹 인터페이스에 적합합니다.