Sports_Fitness_Charts_Component
A complex, responsive charts component for sports and fitness applications, featuring a clean, minimalist Swiss Typography design with a black and white base and a single accent color. Includes dark mode support and a grid-based layout for various data visualizations.
HTML Code
<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>Related Components
Charts Component
A simple, responsive chart component for sports/fitness applications, featuring a dark mode UI with jewel tones. Displays a basic progress or performance metric.
VibrantGlassmorphismChart
A simple Glassmorphism chart component with vibrant colors, suitable for blogs and content sites. The component is responsive and includes dark theme support using Tailwind CSS.
Charts Component
A responsive dashboard component demonstrating skeuomorphic design with pastel colors and dark mode support, featuring simulated bar charts, line charts, and key performance indicators using pure HTML and Tailwind CSS. No JavaScript is included; charts are visual representations.