Sports_Fitness_Charts_Component
Un composant de graphiques complexe et réactif pour les applications de sport et de fitness, doté d’un design de typographie suisse épuré et minimaliste avec une base en noir et blanc et une seule couleur d’accentuation. Inclut la prise en charge du mode sombre et une mise en page basée sur une grille pour diverses visualisations de données.
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>Composants associés
Composant Cartes neumorphes
Il s’agit d’un composant de graphiques complexe et réactif avec un style de conception neumorphique et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Inclut la prise en charge du mode sombre.
Composant Graphiques
Un composant de graphiques réactif conçu selon les principes de la conception matérielle, avec une palette de couleurs pastel et une interactivité complexe pour présenter des portefeuilles. Il inclut la prise en charge du mode sombre avec les classes CSS Tailwind.
Retro_Vintage_Pastel_Social_Charts_Component
Un composant de graphiques complexe et réactif avec une esthétique rétro/vintage des années 80/90 utilisant des couleurs pastel, conçu pour les plateformes de médias sociaux. Inclut la prise en charge du mode sombre.