Industrial_Sports_Dashboard
Un composant de tableau de bord de complexité modérée pour les applications de sport/fitness avec un style de design industriel, avec des tons de terre et une mise en page réactive avec prise en charge du mode sombre. Affiche les indicateurs clés, les activités récentes et les performances de l’équipe/individuelle.
HTML Code
<div class="min-h-screen bg-stone-100 text-stone-800 p-4 sm:p-6 lg:p-8 dark:bg-stone-900 dark:text-stone-200">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Main Content Area -->
<div class="md:col-span-2 lg:col-span-3 space-y-6">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-100 mb-2">Team Performance Overview</h1>
<p class="text-lg text-stone-600 dark:text-stone-400">Tracking collective progress and individual achievements.</p>
</div>
<div class="mt-4 sm:mt-0 flex items-center space-x-2">
<button class="flex items-center px-4 py-2 bg-stone-700 text-white rounded-md hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:bg-stone-600 dark:hover:bg-stone-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
Export Report
</button>
<button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-700 dark:hover:bg-amber-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
New Activity
</button>
</div>
</div>
<!-- Key Metrics Section -->
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
<p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Total Workouts</p>
<p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">1,234</p>
<p class="text-xs text-green-600 dark:text-green-400 mt-2">+12% this month</p>
</div>
<div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
<p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Avg. Intensity</p>
<p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">8.5</p>
<p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2">Stable</p>
</div>
<div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
<p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Team Stamina Score</p>
<p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">92%</p>
<p class="text-xs text-red-600 dark:text-red-400 mt-2">-2% since last week</p>
</div>
</section>
<!-- Recent Activities Table -->
<section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Recent Activities</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-stone-300 dark:divide-stone-700">
<thead class="bg-stone-300 dark:bg-stone-700">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Activity</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Date</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Duration</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Participants</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-stone-200 dark:divide-stone-700">
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Strength Training</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-20</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">1h 30m</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">8 players</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Sprint Drills</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-19</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">0h 45m</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">5 players</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
</td>
</tr>
<tr>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Team Strategy Meeting</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-18</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2h 00m</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">Full Team</td>
<td class="px-4 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-200 text-amber-800 dark:bg-amber-700 dark:text-amber-100">Scheduled</span>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Performance Graphs Section -->
<section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Weekly Training Volume</h2>
<img src="https://picsum.photos/800/300?random=1" alt="Placeholder graph for training volume" class="w-full h-auto rounded-md object-cover border border-stone-300 dark:border-stone-700">
<p class="text-sm text-stone-600 dark:text-stone-400 mt-3">Represents total hours logged by the team each week.</p>
</section>
</div>
<!-- Sidebar / Secondary Content Area -->
<aside class="space-y-6">
<!-- Player Spotlight Card -->
<section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Player Spotlight</h2>
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full object-cover border-4 border-stone-400 dark:border-stone-600 mb-4" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Player Avatar">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-100 mb-1">Alex 'The Rocket' Smith</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-3">Position: Forward</p>
<div class="flex items-center space-x-2 text-sm text-stone-700 dark:text-stone-300">
<svg class="w-4 h-4 text-amber-600 dark:text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"></path></svg>
<span>Recent Best: 15.2 km in latest run</span>
</div>
</div>
</section>
<!-- Upcoming Events -->
<section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Upcoming Events</h2>
<ul class="space-y-4">
<li class="flex items-start">
<div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
Nov<br>25
</div>
<div class="ml-3">
<p class="font-semibold text-stone-900 dark:text-stone-100">Match vs. City Titans</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Arena Stadium, 7:00 PM</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
Dec<br>01
</div>
<div class="ml-3">
<p class="font-semibold text-stone-900 dark:text-stone-100">Team Health Check-up</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Medical Center, 9:00 AM</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
Dec<br>05
</div>
<div class="ml-3">
<p class="font-semibold text-stone-900 dark:text-stone-100">Off-season Training Begins</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Training Ground</p>
</div>
</li>
</ul>
</section>
<!-- Quick Links -->
<section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Quick Links</h2>
<ul class="space-y-3">
<li>
<a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
Full Player Roster
</a>
</li>
<li>
<a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V9m0 3v2m0 3.5V19M8.293 17.293A4 4 0 0118 10a4 4 0 01-11.707-2.707m-4.593 2.593c-.783.783-1.217 1.488-1.498 2.07-.15.318-.256.576-.328.783a.75.75 0 00-.001.077c.435.093.593.18.665.234a.75.75 0 00.323.076.75.75 0 00.12-.016c.395-.121.737-.306 1.05-.558c.28-.216.52-.469.72-.733.2-.264.36-.532.48-.795a.75.75 0 00.08-.168.75.75 0 00.04-1.072z"></path></svg>
Injury Reports
</a>
</li>
<li>
<a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Performance History
</a>
</li>
</ul>
</section>
</aside>
</div>
</div>Composants associés
Composant Tableaux de bord
Un composant de tableaux de bord réactifs pour les applications de médias sociaux avec des micro-interactions et un schéma de couleurs triadique, construit à l’aide de Tailwind CSS.
Composant Tableaux de bord
Un composant de tableaux de bord complexe conçu pour le mode sombre avec une palette de couleurs monochromatiques pour une utilisation professionnelle/d’entreprise. Il comporte des éléments interactifs riches et est réactif.
Tableau de bord d’entreprise rétro
Un composant de tableau de bord rétro/vintage en niveaux de gris pour les sites Web d’entreprise/d’entreprise, avec une complexité modérée et un design réactif. Prend en charge le thème sombre à l’aide du préfixe Tailwind CSS dark : pour le style. Images provenant de picsum.photos et avatars de randomuser.me.