3D 그레이스케일 스포츠 피트니스 프로그레스 바
스포츠 및 피트니스 애플리케이션을 위해 설계된 복잡한 3D 그레이스케일 진행률 표시줄 구성 요소로, 깊이와 시각적 참여로 트레이닝 진행 상황을 보여줍니다. 다크 모드 지원이 포함되어 있으며 완벽하게 반응합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in-up">
<div class="p-6 sm:p-8 md:p-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight">Daily Training Progress</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<!-- Overall Progress Section -->
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
<div class="relative z-10">
<p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Overall Goal</p>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Week 3/12 Training Cycle</h3>
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
<div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 65%;">
<div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
</div>
<span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">65% Complete</span>
</div>
<div class="mt-4 text-center">
<button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
View Full Roadmap
</button>
</div>
</div>
</div>
<!-- Daily Progress Section -->
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
<div class="relative z-10">
<p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Daily Target</p>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Today's Session: Legs & Core</h3>
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
<div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 80%;">
<div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
</div>
<span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">80% Done</span>
</div>
<div class="mt-4 text-center">
<button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
Log Workout
</button>
</div>
</div>
</div>
</div>
<!-- Individual Metrics Progress Bars -->
<div class="mb-8">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center">Key Performance Indicators</h3>
<div class="space-y-6">
<!-- Metric 1: Strength -->
<div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
<div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 75%;">
<div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
</div>
<div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
<span>Strength</span>
<span>75%</span>
</div>
</div>
</div>
<!-- Metric 2: Endurance -->
<div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
<div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 85%;">
<div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
</div>
<div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
<span>Endurance</span>
<span>85%</span>
</div>
</div>
</div>
<!-- Metric 3: Flexibility -->
<div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
<div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 60%;">
<div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
</div>
<div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
<span>Flexibility</span>
<span>60%</span>
</div>
</div>
</div>
</div>
</div>
<!-- Call to Action / Next Steps -->
<div class="text-center bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-lg relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
<div class="relative z-10">
<p class="text-gray-700 dark:text-gray-200 mb-4 text-lg">Ready for your next challenge?</p>
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold py-3 px-8 rounded-full text-lg shadow-xl uppercase tracking-wider transform transition duration-300 hover:scale-105 hover:bg-gray-700 dark:hover:bg-white focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
Plan Next Workout
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom utility for inner shadow, simulating 3D depth */
.shadow-inset-dark {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}
.dark .shadow-inset-dark {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.8s ease-out forwards;
}
.blend-overlay {
mix-blend-mode: overlay;
}
</style>관련 구성 요소
다크 모드 프로그레스 바(Dark Mode Progress Bar)
Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 세련된 디자인과 어두운 테마 지원을 특징으로 합니다.
미니멀리스트 프로그레스 바
파스텔 색상의 미니멀하고 평평한 디자인의 진행률 표시줄 구성 요소로 전문 비즈니스 또는 기업 웹사이트에 적합합니다. 반응형 디자인이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.