Sports_Fitness_Dashboard_Monospace
Un composant de tableau de bord de sport/fitness épuré et inspiré du code, avec des polices monospaces, une esthétique de terminal et des tons océan/bleu. Il présente un design réactif, une prise en charge du mode sombre et des éléments de visualisation de données adaptés aux équipes sportives et aux applications de fitness.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-blue-900 to-blue-700 text-blue-200 dark:from-gray-900 dark:to-black font-mono p-4 sm:p-8 md:p-12 lg:p-16 relative overflow-hidden">
<!-- Background grid for terminal aesthetic -->
<div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid-pattern" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 L 0 20" fill="none" stroke="currentColor" stroke-width="0.5" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid-pattern)" />
</svg>
</div>
<div class="relative z-10 max-w-7xl mx-auto space-y-8">
<!-- Header -->
<header class="flex flex-col sm:flex-row justify-between items-center bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-4 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg">
<h1 class="text-2xl sm:text-3xl font-bold text-sky-400 dark:text-green-400 mb-2 sm:mb-0">[FITNESS_DASHBOARD]</h1>
<nav class="text-sm flex space-x-4">
<a href="#" class="hover:text-white transition-colors duration-200">[OVERVIEW]</a>
<a href="#" class="hover:text-white transition-colors duration-200">[ANALYTICS]</a>
<a href="#" class="hover:text-white transition-colors duration-200">[TRAINING]</a>
<a href="#" class="hover:text-white transition-colors duration-200">[SETTINGS]</a>
</nav>
</header>
<!-- Main Grid Layout -->
<main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Player Performance Card -->
<section class="lg:col-span-2 bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[PLAYER_PERFORMANCE_OVERVIEW]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Player Avatar" class="w-24 h-24 rounded-full border-2 border-sky-400 dark:border-green-400 p-1 object-cover">
<div class="flex-grow">
<p class="text-lg font-bold text-white">[PLAYER_ID: JM-42]</p>
<p class="text-blue-300">[POSITION: Forward]</p>
<p class="text-blue-300">[STATUS: Optimal]</p>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div><span class="text-sky-300">[SPEED]:</span> <span class="text-white">9.2 m/s</span></div>
<div><span class="text-sky-300">[ENDURANCE]:</span> <span class="text-white">85%</span></div>
<div><span class="text-sky-300">[ACCURACY]:</span> <span class="text-white">76%</span></div>
<div><span class="text-sky-300">[POWER]:</span> <span class="text-white">7.8 kJ</span></div>
</div>
</div>
<div class="mt-6">
<p class="text-sky-400 dark:text-green-400 font-semibold mb-2">[RECENT_ACTIVITY_LOG]</p>
<ul class="text-sm leading-relaxed max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-600 dark:scrollbar-thumb-gray-600 scrollbar-track-blue-900 dark:scrollbar-track-gray-900">
<li><span class="text-yellow-300">[INFO]:</span> 2023-11-01 10:30 - [TRAINING_SESSION_COMPLETE]</li>
<li><span class="text-green-300">[SUCCESS]:</span> 2023-10-28 18:00 - [MATCH_PERFORMANCE_RATING]: 8.7</li>
<li><span class="text-red-300">[WARNING]:</span> 2023-10-25 14:15 - [RECOVERY_RATE_BELOW_AVG]</li>
<li><span class="text-green-300">[SUCCESS]:</span> 2023-10-22 09:00 - [PERSONAL_BEST_SPRINT]: 100m in 11.2s</li>
<li><span class="text-yellow-300">[INFO]:</span> 2023-10-20 11:00 - [PHYSIO_CHECKUP_SCHEDULED]</li>
</ul>
</div>
</section>
<!-- Upcoming Training Card -->
<section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[UPCOMING_TRAINING]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="space-y-4">
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
<p class="text-white font-bold">[SESSION]: Speed Drills</p>
<p class="text-blue-300 text-sm">[DATE]: 2023-11-03</p>
<p class="text-blue-300 text-sm">[TIME]: 09:00 AM</p>
<p class="text-blue-300 text-sm">[LOCATION]: Main Pitch</p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
<p class="text-white font-bold">[SESSION]: Strength & Conditioning</p>
<p class="text-blue-300 text-sm">[DATE]: 2023-11-04</p>
<p class="text-blue-300 text-sm">[TIME]: 02:00 PM</p>
<p class="text-blue-300 text-sm">[LOCATION]: Gym B</p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-3 rounded-md border border-blue-700 dark:border-gray-600">
<p class="text-white font-bold">[SESSION]: Tactical Review</p>
<p class="text-blue-300 text-sm">[DATE]: 2023-11-05</p>
<p class="text-blue-300 text-sm">[TIME]: 11:00 AM</p>
<p class="text-blue-300 text-sm">[LOCATION]: Tactics Room</p>
</div>
</div>
</section>
<!-- Quick Stats Card -->
<section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[QUICK_STATS]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[AVG_HEART_RATE]</p>
<p class="text-3xl text-white font-bold mt-1">145 <span class="text-xl">bpm</span></p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[TOTAL_DISTANCE]</p>
<p class="text-3xl text-white font-bold mt-1">56.7 <span class="text-xl">km</span></p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[CALORIES_BURNED]</p>
<p class="text-3xl text-white font-bold mt-1">3245 <span class="text-xl">kcal</span></p>
</div>
<div class="bg-blue-800/50 dark:bg-gray-700/50 p-4 rounded-md text-center border border-blue-700 dark:border-gray-600">
<p class="text-sky-300 text-sm">[TRAINING_SESSIONS]</p>
<p class="text-3xl text-white font-bold mt-1">12 <span class="text-xl">/month</span></p>
</div>
</div>
</section>
<!-- Progress Chart - Placeholder -->
<section class="lg:col-span-2 bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[PROGRESS_VISUALIZATION]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="h-48 sm:h-64 md:h-80 bg-blue-800/30 dark:bg-gray-700/30 rounded-md flex items-center justify-center border border-blue-700 dark:border-gray-600">
<p class="text-blue-400 text-lg sm:text-xl font-bold">[CHART_PLACEHOLDER]</p>
<img src="https://picsum.photos/600/300?random=1" alt="Chart Placeholder" class="absolute inset-0 w-full h-full object-cover opacity-20 rounded-md" />
</div>
<p class="text-sky-300 text-sm mt-4">[NOTE]: Visual representation of performance metrics over time.</p>
</section>
<!-- Team Roster / Top Performers (Image based) -->
<section class="bg-blue-950/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-lg border border-blue-600 dark:border-gray-700 shadow-lg terminal-glow relative overflow-hidden">
<h2 class="text-sky-400 dark:text-green-400 text-xl font-semibold mb-4">[TEAM_ROSTER_TOP_PERFORMERS]</h2>
<div class="absolute top-0 right-0 p-2 text-blue-500 text-opacity-50 dark:text-gray-600">\>_</div>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Player 1" class="w-20 h-20 rounded-full border-2 border-green-400 dark:border-sky-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_A_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 9.1</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player 2" class="w-20 h-20 rounded-full border-2 border-yellow-400 dark:border-orange-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_B_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 8.8</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Player 3" class="w-20 h-20 rounded-full border-2 border-blue-400 dark:border-purple-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_C_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 8.5</p>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/53.jpg" alt="Player 4" class="w-20 h-20 rounded-full border-2 border-red-400 dark:border-pink-400 p-0.5 object-cover">
<p class="text-white text-sm mt-2">[PLAYER_D_NAME]</p>
<p class="text-sky-300 text-xs">[RATING]: 8.2</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-center text-blue-400 text-opacity-70 dark:text-gray-500 text-xs mt-8">
<p>© 2023 [FITNESS_APP] - [SYS_STATUS]: ALL_SYSTEMS_GO</p>
<p>[VERSION]: 1.0.0-beta</p>
</footer>
</div>
<!-- Custom glow effect for terminal aesthetic -->
<style>
.terminal-glow::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
/* Dark mode adjustment for glow */
background: linear-gradient(45deg, #0f4c81, #306eb3, #0f4c81); /* Blue glow */
z-index: -1;
filter: blur(8px);
opacity: 0.3;
border-radius: 9px; /* Match parent border-radius + padding */
animation: glow-pulse 3s infinite alternate;
}
.dark .terminal-glow::before {
background: linear-gradient(45deg, #4b5563, #6b7280, #4b5563); /* Gray glow in dark mode */
}
@media (prefers-reduced-motion: reduce) {
.terminal-glow::before {
animation: none;
}
}
@keyframes glow-pulse {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.4; transform: scale(1.01); }
}
/* Custom scrollbar for log */
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: var(--tw-bg-scrollbar-track, #1e3a8a);
border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--tw-bg-scrollbar-thumb, #1d4ed8);
border-radius: 10px;
}
.dark .scrollbar-thin::-webkit-scrollbar-track {
background: var(--tw-bg-scrollbar-track-dark, #1f2937);
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--tw-bg-scrollbar-thumb-dark, #4b5563);
}
</style>
</div>Composants associés
Composant de visualisation de données Neumorphism
Composant de visualisation de données de style Neumorphism pour le contenu du blog, avec une palette de couleurs pastel, une complexité modérée, une réactivité et une prise en charge du mode sombre.
Composant Composants de visualisation de données de commerce électronique
Un composant de visualisation de données pour le commerce électronique, stylisé avec les principes de conception matérielle, les tons terreux et la prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
Composant Composants de visualisation de données
Un composant de visualisation de données réactif, compatible avec le mode sombre pour les blogs, avec un design rétro/vintage avec une palette de couleurs complémentaires et des éléments interactifs complexes.