Tableau de bord de jeu
Un composant d’interface utilisateur de tableau de bord de jeu complexe et réactif conçu pour le mode sombre, avec une palette de couleurs en niveaux de gris. Comprend les statistiques des joueurs, l’activité récente et les listes de jeux.
HTML Code
<div class="min-h-screen bg-gray-950 text-gray-100 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">
<!-- Header -->
<header class="flex flex-col sm:flex-row items-center justify-between mb-8 gap-4">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-blue-400 tracking-tight">GAMER HUB</h1>
<div class="relative w-full sm:w-auto">
<input type="text" placeholder="Search games, players..." class="w-full sm:w-80 p-3 pl-10 rounded-lg bg-gray-800 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<div class="flex items-center gap-4">
<button aria-label="Notifications" class="relative p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
<span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-gray-950 bg-red-500"></span>
</button>
<img class="w-10 h-10 rounded-full border-2 border-blue-500 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
</div>
</header>
<!-- Main Content Grid -->
<main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Player Stats Card -->
<section class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-4 text-blue-400">Player Stats</h2>
<div class="flex flex-col items-center mb-6">
<img class="w-24 h-24 rounded-full border-4 border-blue-400 mb-3 object-cover" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Player Avatar">
<div class="text-center">
<p class="text-xl font-semibold">BladeMasterX</p>
<p class="text-gray-400 text-sm">Level 78 • Rank: Gold I</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-center">
<div>
<p class="text-gray-300 text-sm">K/D Ratio</p>
<p class="text-xl font-bold text-gray-50">2.45</p>
</div>
<div>
<p class="text-gray-300 text-sm">Wins</p>
<p class="text-xl font-bold text-gray-50">1,234</p>
</div>
<div>
<p class="text-gray-300 text-sm">Matches Played</p>
<p class="text-xl font-bold text-gray-50">3,109</p>
</div>
<div>
<p class="text-gray-300 text-sm">Hours Played</p>
<p class="text-xl font-bold text-gray-50">876</p>
</div>
</div>
<button class="mt-6 w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">View Profile</button>
</section>
<!-- Recent Activity Card -->
<section class="col-span-1 md:col-span-3 lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
<h2 class="text-2xl font-bold mb-5 text-accent-blue">Recent Activity</h2>
<div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=1" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Defeated boss in <span class="text-blue-300">Cyberpunk Ascent</span></p>
<p class="text-gray-400 text-sm">5 minutes ago</p>
</div>
<span class="text-green-400 font-bold text-sm">+120 XP</span>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Friend Avatar">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">GamerGirl_88</span> is online!</p>
<p class="text-gray-400 text-sm">15 minutes ago</p>
</div>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=2" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Achieved 'Grand Master' in <span class="text-blue-300">Starfall Arena</span></p>
<p class="text-gray-400 text-sm">1 hour ago</p>
</div>
<span class="text-purple-400 font-bold text-sm">+1 Rank</span>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=3" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Bought new DLC for <span class="text-blue-300">Mythic Realms IV</span></p>
<p class="text-gray-400 text-sm">3 hours ago</p>
</div>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=4" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Completed Daily Quest in <span class="text-blue-300">Dragon's Lair Saga</span></p>
<p class="text-gray-400 text-sm">Yesterday</p>
</div>
<span class="text-green-400 font-bold text-sm">+50 XP</span>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
<img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Friend Avatar">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">NeonKiller</span> is streaming <span class="text-blue-300">Pixel Warfare</span></p>
<p class="text-gray-400 text-sm">Yesterday</p>
</div>
</div>
</div>
</section>
<!-- My Games List -->
<section class="col-span-1 md:col-span-3 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
<div class="flex justify-between items-center mb-5">
<h2 class="text-2xl font-bold text-blue-400">My Games</h2>
<button aria-label="Add Game" class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=5" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Galactic Odyssey</p>
<p class="text-gray-400 text-sm">Online - 12 players</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=6" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Shadowblade Chronicles</p>
<p class="text-gray-400 text-sm">Offline</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=7" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Pixel Royale</p>
<p class="text-gray-400 text-sm">Online - 89 players</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=8" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Mystic Dungeon Crawler</p>
<p class="text-gray-400 text-sm">Offline</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
<div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
<img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=9" alt="Game Cover">
<div class="flex-1">
<p class="text-gray-50 font-semibold">Cosmic Commanders</p>
<p class="text-gray-400 text-sm">Online - 21 players</p>
</div>
<button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
</div>
</div>
</section>
<!-- Quick Stats Card -->
<section class="col-span-1 md:col-span-1 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-5 text-accent-blue">Quick Stats</h2>
<div class="space-y-4">
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">Online Friends</p>
<span class="text-blue-400 font-bold text-xl">14</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">New Achievements</p>
<span class="text-green-400 font-bold text-xl">3</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">Upcoming Events</p>
<span class="text-yellow-400 font-bold text-xl">2</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<p class="text-gray-300">Messages</p>
<span class="text-red-400 font-bold text-xl">5</span>
</div>
</div>
</section>
</main>
<style>
/* Custom scrollbar for better aesthetics */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #374151; /* gray-700 */
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #60A5FA; /* blue-400 */
border-radius: 10px;
border: 2px solid #1F2937; /* gray-800 */
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
border: 2px solid #1F2937; /* gray-800 */
}
/* For Firefox */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #60A5FA #374151; /* thumb and track */
}
</style>
</div>Composants associés
Tableau de bord des médias sociaux
Un composant de tableau de bord réactif pour les réseaux sociaux avec des micro-interactions, une palette de couleurs complémentaires, une complexité modérée et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des profils d’utilisateurs avec des avatars de randomuser.me et des flux avec des images de picsum.photos.
Composant Tableaux de bord
Composant de tableaux de bord avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.
Composant de tableau de bord brutaliste en niveaux de gris
Une disposition de tableau de bord simple, de style brutaliste, en niveaux de gris pour les sites Web d’entreprise, réactive avec prise en charge du mode sombre, construite avec Tailwind CSS.