ArtDecoFortschrittIndikator
Eine komplexe, vom Art Deco inspirierte Fortschrittsindikatorkomponente für Job-/Karriereplattformen mit geometrischen Mustern, luxuriösem Styling und Komplementärfarben. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.
HTML-Code
<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>Verwandte Komponenten
3D_Candy_Music_Player_Progress
Eine komplexe, 3D-inspirierte Komponente zur Fortschrittsanzeige von Musikplayern mit bonbonfarbenen/süßen Farben, die für Musik-Streaming und Audioplattformen geeignet ist. Bietet Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
Komponente "Fortschrittsindikatoren"
Eine reaktionsschnelle Fortschrittsanzeige-Komponente mit Brutalismus-Design, erdigen Farbtönen und Unterstützung für dunkle Themen, geeignet für einen Blog oder eine Content-Site.
Playful_Job_Application_Progress_Indicator
Eine komplexe, spielerische und reaktionsschnelle Fortschrittsindikatorkomponente für Bewerbungsworkflows mit einem Bonbon-/Süßigkeiten-Farbschema und Unterstützung für den Dunkelmodus. Es wurde für Jobbörsen und Karriereentwicklungsplattformen entwickelt und stellt mehrere Bewerbungsphasen visuell mit animierten Übergängen und ermutigenden Botschaften dar.