Sports_Fitness_Dashboard_Monospace
Un componente de tablero de deportes / fitness limpio e inspirado en código con fuentes monoespaciadas, estética de terminal y tonos océano/azul. Cuenta con un diseño receptivo, compatibilidad con el modo oscuro y elementos de visualización de datos adecuados para equipos deportivos y aplicaciones de fitness.
Código HTML
<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>Componentes relacionados
Componente de componentes de visualización de datos
Un componente de visualización de datos responsivo y compatible con el modo oscuro para blogs, con un diseño retro/vintage con una combinación de colores complementaria y elementos interactivos complejos.
Componente de componentes de visualización de datos
Un componente de visualización de datos simple diseñado para el comercio electrónico, con una interfaz de modo oscuro con colores vibrantes.
Componente de componentes de visualización de datos
Un componente simple de visualización de datos en modo oscuro para redes sociales con un esquema de color análogo.