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>