ArtDecoProgressIndicator
직업/경력 플랫폼을 위한 복잡한 아르데코에서 영감을 받은 진행 상태 표시기 구성 요소로, 기하학적 패턴, 고급스러운 스타일링 및 보색을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="font-sans bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-6 md:p-10 lg:p-16 antialiased">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 transform -rotate-2 selection:bg-yellow-200 selection:text-black dark:selection:bg-yellow-800 dark:selection:text-white transition-colors duration-300">
<span class="block bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text drop-shadow-lg">Your Career Journey</span>
<span class="block text-2xl md:text-3xl text-gray-600 dark:text-gray-400 mt-2 tracking-wide">Progress Overview</span>
</h2>
<div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column: Overall Progress -->
<div class="lg:col-span-1 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
<div class="p-6 md:p-8 flex flex-col justify-between h-full">
<div>
<div class="text-center mb-8">
<div class="relative w-48 h-48 mx-auto mb-4">
<svg class="w-full h-full transform rotate-[-90deg]" viewBox="0 0 100 100">
<circle class="text-gray-200 dark:text-gray-700 stroke-current" stroke-width="6" cx="50" cy="50" r="40" fill="transparent"></circle>
<circle class="text-yellow-500 stroke-current progress-circle transition-all duration-1000 ease-out" stroke-width="6" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="calc(2.51 * 75) 251"></circle>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-5xl font-bold bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text">75%</span>
<span class="text-lg text-gray-600 dark:text-gray-400">Completed</span>
</div>
</div>
<p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Overall Completion</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Your journey unfolds with great progress.</p>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-400 shadow-md"></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Profile Setup: <span class="font-semibold text-gray-800 dark:text-gray-200">100%</span></span>
<!-- Example of a small progress bar for sub-sections -->
<div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div class="bg-blue-500 dark:bg-blue-400 h-full rounded-full" style="width: 100%;"></div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-green-500 dark:bg-green-400 shadow-md"></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Skills & Experience: <span class="font-semibold text-gray-800 dark:text-gray-200">80%</span></span>
<div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div class="bg-green-500 dark:bg-green-400 h-full rounded-full" style="width: 80%;"></div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Job Applications: <span class="font-semibold text-gray-800 dark:text-gray-200">60%</span></span>
<div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div class="bg-purple-500 dark:bg-purple-400 h-full rounded-full" style="width: 60%;"></div>
</div>
</div>
</div>
</div>
<button class="mt-8 w-full py-3 px-6 rounded-lg bg-yellow-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-yellow-500 text-white font-bold text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-amber-800">
View Full Details
</button>
</div>
</div>
<!-- Right Columns: Milestones & Challenges -->
<div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Milestones Card -->
<div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
<h3 class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-cyan-600 dark:from-blue-400 dark:to-cyan-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-blue-200 dark:border-cyan-700 text-center md:text-left">🚀 Milestones Achieved</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Profile Completed</p>
<p class="text-sm text-gray-600 dark:text-gray-400">All essential information filled on 2023-10-26.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-cyan-500 dark:bg-cyan-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">First 5 Applications</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Successfully applied to 5 jobs on 2023-11-01.</p>
</div>
</div>
<div class="flex items-start opacity-70">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-600 dark:text-gray-400 text-xl font-bold mr-4 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<div>
<p class="font-semibold text-gray-700 dark:text-gray-300 text-lg">Awaiting Interview Invite</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Next milestone: confirm an interview request.</p>
</div>
</div>
</div>
</div>
<!-- Challenges Card -->
<div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
<h3 class="text-3xl font-bold bg-gradient-to-r from-red-500 to-orange-600 dark:from-red-400 dark:to-orange-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-red-200 dark:border-orange-700 text-center md:text-left">⚠️ Pending Actions</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-red-500 dark:bg-red-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Update Resume</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Your resume may need updates for relevance. <a href="#" class="text-red-500 hover:underline dark:text-red-400">Action Required</a></p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-500 dark:bg-orange-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Review Notifications</p>
<p class="text-sm text-gray-600 dark:text-gray-400">You have 3 unread messages from recruiters. <a href="#" class="text-orange-500 hover:underline dark:text-orange-400">Check Now</a></p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-500 dark:bg-green-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
</div>
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Add Cover Letter</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Enhance your application for 'Senior Dev Role' job. <a href="#" class="text-green-500 hover:underline dark:text-green-400">Upload Here</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Avatar & CTA card -->
<div class="lg:col-span-3 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden p-6 md:p-8 flex flex-col md:flex-row items-center justify-between mt-8 transform hover:scale-[1.005] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
<div class="flex items-center space-x-6 mb-6 md:mb-0">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-4 border-yellow-400 dark:border-amber-600 shadow-lg">
<div>
<p class="text-3xl font-extra-bold bg-gradient-to-r from-teal-500 to-lime-600 dark:from-teal-400 dark:to-lime-500 text-transparent bg-clip-text">Keep Up The Great Work!</p>
<p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Stay focused on your career goals.</p>
</div>
</div>
<button class="py-4 px-8 rounded-full bg-teal-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-teal-500 text-white font-bold text-xl shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-lime-800">
Explore New Opportunities
</button>
</div>
</div>
</div>
<style>
/* Custom CSS for the circular progress bar animation */
.progress-circle {
transform-origin: center;
transition: stroke-dasharray 1s ease-out;
stroke-dashoffset: 0;
}
/* Art Deco inspired background patterns */
.bg-gray-50 {
background-image: radial-gradient(circle at 100% 150%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 150%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 50%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 50%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 0%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 0%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 100%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 0%, #fefce8, rgba(255,255,255,0) 50%);
background-size: 80px 80px;
background-position: 0 0, 80px 80px, 80px 0, 0 80px;
}
.dark .bg-gray-900 {
background-image: radial-gradient(circle at 100% 150%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 150%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 50%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 50%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 0%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 0%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 100%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 0%, #2f344f, rgba(0,0,0,0) 50%);
background-size: 80px 80px;
background-position: 0 0, 80px 80px, 80px 0, 0 80px;
}
.bg-gray-850 {
--tw-bg-opacity: 1;
background-color: rgb(34 40 49 / var(--tw-bg-opacity)); /* Slightly lighter than gray-900 for card background */
}
.dark .bg-gray-850 {
--tw-bg-opacity: 1;
background-color: rgb(34 40 49 / var(--tw-bg-opacity));
}
/* Glowing effect for specific backgrounds */
.dark .shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px -10px rgba(255, 255, 0, 0.2);
}
.selection\:bg-yellow-200::selection {
background-color: var(--tw-selection-background-color, #fef08a);
}
.selection\:text-black::selection {
color: var(--tw-selection-color, #000);
}
.dark .selection\:bg-yellow-800::selection {
background-color: var(--tw-selection-background-color, #92400e);
}
.dark .selection\:text-white::selection {
color: var(--tw-selection-color, #fff);
}
</style>관련 구성 요소
Progress Indicators 구성 요소
따뜻한 일몰 톤의 간단하고 깨끗하며 전문적인 진행 표시기 구성 요소로 비즈니스 및 컨설팅 서비스에 적합하며 반응형 디자인과 다크 모드 지원을 특징으로 합니다.
Progress Indicators 구성 요소
이것은 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 Material Design 스타일의 진행률 표시기 구성 요소입니다.
Progress Indicators 구성 요소
스포츠/피트니스 애플리케이션용으로 설계된 럭셔리/프리미엄 스타일 진행 표시기 구성 요소로, 보석 톤, 정교한 타이포그래피, 다크 모드 지원으로 완벽한 응답성을 특징으로 합니다.