Retro_Vintage_Charts_Component
Un composant complexe de tableaux de sport/fitness à l’esthétique rétro/vintage, utilisant des tons de terre, conçu pour la réactivité et le support du mode sombre.
HTML Code
<div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8 min-h-screen">
<div class="max-w-7xl mx-auto bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-2 border-stone-300 dark:border-stone-700">
<div class="p-6 sm:p-8 lg:p-10 border-b-2 border-stone-300 dark:border-stone-700">
<h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-2 font-mono tracking-wider">Athlete Performance Dashboard</h2>
<p class="text-stone-600 dark:text-stone-400 text-sm sm:text-base">Analyze key metrics over time. Last updated: 2024-07-26</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">
<!-- Left Sidebar (Athlete Profile) -->
<div class="md:col-span-1 bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
<div class="flex flex-col items-center mb-6">
<img class="w-24 h-24 rounded-full border-4 border-stone-500 dark:border-stone-300 mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Athlete Avatar">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200">John 'The Beast' Doe</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm">Basketball Player</p>
</div>
<div class="text-stone-700 dark:text-stone-300 text-sm">
<p class="flex justify-between items-center mb-2"><span class="font-medium">Age:</span> 28</p>
<p class="flex justify-between items-center mb-2"><span class="font-medium">Height:</span> 6'8" (203 cm)</p>
<p class="flex justify-between items-center mb-2"><span class="font-medium">Weight:</span> 240 lbs (109 kg)</p>
<p class="flex justify-between items-center mb-2"><span class="font-medium">Team:</span> City Maulers</p>
<h4 class="font-bold text-stone-800 dark:text-stone-200 mt-4 mb-2">Recent Achievements:</h4>
<ul class="list-disc list-inside text-xs space-y-1">
<li>MVP: Championship Season 2023</li>
<li>Top Scorer: Last 5 Games</li>
<li>Improved Vertical Jump by 10%</li>
</ul>
</div>
</div>
<!-- Main Charts Area -->
<div class="md:col-span-2 space-y-6">
<!-- Chart 1: Performance Over Time -->
<div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
<h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Peak Performance Timeline</h3>
<div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
<img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=1" alt="Chart Background">
<div class="relative z-10 p-2">
<p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Chart:</p>
<div class="flex justify-around items-end h-40 mt-4">
<div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-3/5 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Mar</span>
</div>
<div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-4/5 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Apr</span>
</div>
<div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[90%] relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">May</span>
</div>
<div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-full relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jun</span>
</div>
<div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[70%] relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jul</span>
</div>
<div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Aug</span>
</div>
</div>
</div>
</div>
</div>
<!-- Chart 2: Recent Game Stats -->
<div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
<h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Last 5 Games: Key Stats</h3>
<div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
<img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=2" alt="Chart Background">
<div class="relative z-10">
<p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Bars:</p>
<div class="flex flex-wrap justify-center sm:justify-between items-end gap-3 h-40 mt-4">
<div class="flex flex-col items-center w-1/5 sm:w-16">
<div class="w-full bg-emerald-700 dark:bg-green-600 rounded-t h-3/4 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Pts</span>
</div>
<span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">28</span>
</div>
<div class="flex flex-col items-center w-1/5 sm:w-16">
<div class="w-full bg-indigo-700 dark:bg-blue-600 rounded-t h-1/2 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Reb</span>
</div>
<span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">12</span>
</div>
<div class="flex flex-col items-center w-1/5 sm:w-16">
<div class="w-full bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Ast</span>
</div>
<span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">7</span>
</div>
<div class="flex flex-col items-center w-1/5 sm:w-16">
<div class="w-full bg-red-700 dark:bg-red-600 rounded-t h-1/3 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Stl</span>
</div>
<span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">3</span>
</div>
<div class="flex flex-col items-center w-1/5 sm:w-16">
<div class="w-full bg-purple-700 dark:bg-purple-600 rounded-t h-1/4 relative group transition-all duration-300 hover:scale-105">
<span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Blk</span>
</div>
<span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">1</span>
</div>
</div>
</div>
</div>
</div>
<!-- Stat Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
<p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Average Score</p>
<p class="text-2xl font-bold text-emerald-700 dark:text-green-500 font-mono">25.7</p>
</div>
<div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
<p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Vertical Jump</p>
<p class="text-2xl font-bold text-indigo-700 dark:text-blue-500 font-mono">38"</p>
</div>
<div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
<p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Speed (100m)</p>
<p class="text-2xl font-bold text-amber-700 dark:text-orange-500 font-mono">10.9s</p>
</div>
</div>
</div>
</div>
<!-- Calls to Action / Footer -->
<div class="p-6 sm:p-8 lg:p-10 border-t-2 border-stone-300 dark:border-stone-700 flex flex-col sm:flex-row justify-between items-center gap-4">
<button class="px-6 py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-lg shadow-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
View Full Report
</button>
<div class="text-stone-600 dark:text-stone-400 text-sm">
<a href="#" class="hover:underline">Export Data</a> | <a href="#" class="hover:underline">Settings</a>
</div>
</div>
</div>
</div>Composants associés
Composant du graphique cyberpunk
Un composant de graphique réactif et interactif avec une esthétique cyberpunk, des arrière-plans sombres, des accents néon et des couleurs neutres froides, adapté aux plateformes éducatives.
VibrantGlassmorphismChart
Un composant simple de graphique Glassmorphism avec des couleurs vives, adapté aux blogs et aux sites de contenu. Le composant est réactif et inclut la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.