Memphis_Gaming_Progress_Indicators
Сложный, отзывчивый компонент индикаторов прогресса для игр, вдохновленный дизайном Memphis с цветовой гаммой заката. Имеет несколько индикаторов выполнения, отображение уровней и интерактивные элементы с поддержкой темного режима.
HTML-код
<div class="bg-gradient-to-br from-orange-300 to-red-400 dark:from-gray-800 dark:to-gray-950 p-6 sm:p-8 md:p-10 lg:p-12 font-sans overflow-hidden relative rounded-lg shadow-xl">
<!-- Memphis background elements (for visual flair) -->
<div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
<div class="absolute w-40 h-40 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-50 -top-10 -left-10 mix-blend-multiply blur-xl"></div>
<div class="absolute w-60 h-60 bg-red-500 dark:bg-red-700 rounded-lg transform rotate-45 opacity-40 top-1/3 left-1/4 mix-blend-multiply blur-xl"></div>
<div class="absolute w-32 h-32 bg-orange-600 dark:bg-orange-800 rounded-full opacity-60 bottom-10 right-10 mix-blend-multiply blur-xl"></div>
<div class="absolute w-52 h-52 bg-pink-400 dark:bg-pink-600 rounded-full opacity-50 -bottom-20 -right-20 mix-blend-multiply blur-xl"></div>
</div>
<div class="relative z-10 space-y-8">
<!-- Header / Title -->
<div class="text-center mb-8">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white dark:text-orange-300 drop-shadow-lg leading-tight relative">
Player Progress
<span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-2 bg-yellow-300 dark:bg-yellow-500 rounded-full"></span>
</h2>
<p class="mt-3 text-sm sm:text-base text-orange-100 dark:text-gray-400 font-medium">Track your epic journey through the gaming world!</p>
</div>
<!-- Level Indicator & Player Info -->
<div class="flex flex-col md:flex-row items-center justify-between bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-4 sm:p-6 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transition-all duration-300 hover:shadow-2xl">
<div class="flex items-center space-x-4 mb-4 md:mb-0">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg">
<div>
<p class="text-xl sm:text-2xl font-bold text-white dark:text-orange-300 drop-shadow-md">TurboGamerX</p>
<p class="text-sm text-orange-100 dark:text-gray-400">Rank: Grand Master</p>
</div>
</div>
<div class="text-center sm:text-right">
<div class="bg-yellow-400 dark:bg-yellow-600 px-6 py-2 rounded-full shadow-lg transform rotate-2 hover:rotate-0 transition-transform duration-300">
<p class="text-2xl sm:text-3xl font-extrabold text-red-700 dark:text-red-900 drop-shadow">Level 42</p>
</div>
</div>
</div>
<!-- Progress Bars Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- XP Progress Bar -->
<div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
<p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Experience Points (XP)</p>
<div class="w-full bg-red-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
<div class="bg-gradient-to-r from-yellow-300 to-orange-500 dark:from-yellow-400 dark:to-orange-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 75%;">
<div class="absolute top-0 right-0 h-full w-2 bg-yellow-200 dark:bg-yellow-300 rounded-full blur-sm"></div>
</div>
<span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">75% (8500 / 11333 XP)</span>
</div>
<p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Next Level: 2833 XP</p>
</div>
<!-- Quest Completion Progress Bar -->
<div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
<p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Quests Completed</p>
<div class="w-full bg-green-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
<div class="bg-gradient-to-r from-teal-300 to-blue-500 dark:from-teal-400 dark:to-blue-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 90%;">
<div class="absolute top-0 right-0 h-full w-2 bg-teal-200 dark:bg-teal-300 rounded-full blur-sm"></div>
</div>
<span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">90% (81 / 90 Quests)</span>
</div>
<p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Keep going, champion!</p>
</div>
<!-- Event Score Progress Bar -->
<div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
<p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Event Score: "Dragon's Ascent"</p>
<div class="w-full bg-purple-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
<div class="bg-gradient-to-r from-pink-300 to-purple-500 dark:from-pink-400 dark:to-purple-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 60%;">
<div class="absolute top-0 right-0 h-full w-2 bg-pink-200 dark:bg-pink-300 rounded-full blur-sm"></div>
</div>
<span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">60% (12000 / 20000 Pts)</span>
</div>
<p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Earn 8000 more points for exclusive rewards!</p>
</div>
<!-- Achievements Progress -->
<div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
<p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Achievements Unlocked</p>
<div class="flex items-center space-x-3">
<div class="relative w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-red-500 dark:bg-red-700 text-white flex items-center justify-center text-4xl sm:text-5xl font-bold border-4 border-yellow-300 dark:border-yellow-500 shadow-md">
<span class="animate-pulse">🎉</span>
</div>
<div>
<p class="text-2xl sm:text-3xl font-extrabold text-white dark:text-orange-300">15 / 20</p>
<p class="text-sm text-orange-100 dark:text-gray-400">Total Achievements</p>
</div>
</div>
<p class="text-sm text-yellow-100 dark:text-gray-400 mt-3">Almost there! Unlock unique titles and badges.</p>
</div>
</div>
<!-- Call to Action / Footer -->
<div class="text-center pt-8">
<button class="bg-yellow-400 dark:bg-orange-600 hover:bg-yellow-500 dark:hover:bg-orange-700 text-red-800 dark:text-white font-bold py-3 px-8 rounded-full shadow-lg transform scale-105 hover:scale-110 transition-all duration-300 relative overflow-hidden group">
<span class="relative z-10">Explore All Stats</span>
<span class="absolute top-0 left-0 w-full h-full bg-white/20 dark:bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse"></span>
</button>
<p class="mt-4 text-xs text-orange-200 dark:text-gray-500 font-medium">Continue your adventure and set new records!</p>
</div>
</div>
</div>
Связанные компоненты
Компонент «Индикаторы прогресса»
Компонент индикаторов прогресса в стиле 3D-дизайна с цветовой схемой в оттенках серого для потребления контента блога, с адаптивным дизайном и поддержкой темного режима.
Компонент «Индикаторы прогресса»
Минималистичный компонент индикатора выполнения, предназначенный для демонстрации прогресса портфолио с использованием ярких цветов и адаптивного дизайна с поддержкой темных тем.
Компонент индикаторов прогресса
Простой индикатор прогресса, разработанный с эффектом стекломорфизма, подходит для веб-сайтов электронной коммерции с поддержкой темного режима и монохроматической цветовой схемой.