산업 발전 지표 구성 요소
산업 디자인 미학을 갖춘 복잡하고 대비가 높은 진행 표시기 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 여러 진행률 표시줄, 자세한 상태 섹션 및 원자재 텍스처를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-2 tracking-tight">Project Status Overview</h2>
<p class="text-gray-600 dark:text-gray-400 text-lg">Comprehensive progress tracking for 'Aurora Borealis' initiative.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-2 sm:gap-4 p-4 sm:p-6 md:p-8">
<!-- Left Column: Primary Progress Indicators -->
<div class="lg:col-span-2 space-y-6 sm:space-y-8">
<!-- Overall Project Progress -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
Overall Project Progress
</h3>
<div class="mb-2 flex justify-between items-center">
<span class="text-lg font-medium text-blue-700 dark:text-blue-300">75% Complete</span>
<span class="text-sm text-gray-500 dark:text-gray-400">Target: 90% by EOM</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-blue-600 dark:bg-blue-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Last Updated: 2 min ago</p>
</section>
<!-- Key Milestones Progress -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
Key Milestones
</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 1: Design & Planning</span>
<span class="text-md font-medium text-emerald-600 dark:text-emerald-400">100%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-emerald-600 dark:bg-emerald-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 2: Development & Integration</span>
<span class="text-md font-medium text-yellow-600 dark:text-yellow-400">60%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-yellow-600 dark:bg-yellow-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 60%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 3: Testing & Deployment</span>
<span class="text-md font-medium text-red-600 dark:text-red-400">20%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-red-600 dark:bg-red-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 20%;"></div>
</div>
</div>
</div>
</section>
<!-- Resource Utilization -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
Resource Utilization
</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Budget Allocation</span>
<span class="text-md font-medium text-orange-600 dark:text-orange-400">85% Used</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-orange-600 dark:bg-orange-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 85%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Team Workload</span>
<span class="text-md font-medium text-green-600 dark:text-green-400">70% Capacity</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-green-600 dark:bg-green-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 70%;"></div>
</div>
</div>
</div>
</section>
</div>
<!-- Right Column: Status & Updates -->
<div class="lg:col-span-1 space-y-6 sm:space-y-8">
<!-- Project Status Board -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L12 20L15 17M9 7L12 4L15 7M21 12H3"></path></svg>
Current Status
</h3>
<dl class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Overall Health:</dt>
<dd class="font-semibold text-lg text-emerald-600 dark:text-emerald-400">Stable</dd>
</div>
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Next Deadline:</dt>
<dd class="font-semibold text-lg text-blue-600 dark:text-blue-400">Feb 28, 2024</dd>
</div>
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Critical Issues:</dt>
<dd class="font-semibold text-lg text-red-600 dark:text-red-400">2 Open</dd>
</div>
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Team Capacity:</dt>
<dd class="font-semibold text-lg text-orange-600 dark:text-orange-400">Stretched</dd>
</div>
</dl>
</section>
<!-- Recent Activity -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
Recent Activity
</h3>
<ul class="space-y-4">
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-purple-500"></div>
<div>
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Dev Team</span> updated 'Auth Module' to 90%.</p>
<time datetime="2024-02-20" class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</time>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-orange-500"></div>
<div>
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">QA Team</span> reported 2 critical bugs in 'Payment Gateway'.</p>
<time datetime="2024-02-19" class="text-sm text-gray-500 dark:text-gray-400">Yesterday</time>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-emerald-500"></div>
<div>
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Project Manager</span> approved 'Phase 1' completion.</p>
<time datetime="2024-02-18" class="text-sm text-gray-500 dark:text-gray-400">2 days ago</time>
</div>
</li>
</ul>
</section>
<!-- Team Members -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-sky-600 dark:text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857A2.75 2.75 0 1011 4.252A2.75 2.75 0 0017 17.009zM2 13V7a3 3 0 015.356-1.857M2 13v6a3 3 0 005.356 1.857"></path></svg>
Core Team
</h3>
<div class="flex flex-wrap gap-3">
<img class="w-12 h-12 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
<img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400" src="https://randomuser.me/api/portraits/men/83.jpg" alt="Avatar of David Lee">
<img class="w-12 h-12 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Emily White">
<img class="w-12 h-12 rounded-full object-cover border-2 border-orange-500 dark:border-orange-400" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar of Michael Brown">
<a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-semibold text-lg border-2 border-gray-400 dark:border-gray-500 transition-colors hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="View all team members">+5</a>
</div>
</section>
</div>
</div>
</div>
</div>관련 구성 요소
Progress Indicators 구성 요소
블로그 콘텐츠 소비를 위한 회색조 색 구성표가 있는 3D 디자인 스타일 진행률 표시기 구성 요소로, 반응형 디자인 및 다크 모드 지원을 제공합니다.
Progress Indicators 구성 요소
다크 모드 UI가 있는 복잡한 단색 소셜 미디어 테마 진행률 표시기 구성 요소로, 여러 진행률 표시줄, 활동 피드 및 사용자 아바타를 제공합니다.
Progress Indicators 구성 요소
80년대와 90년대의 레트로/빈티지 미학에서 영감을 받은 간단한 Progress Indicators 구성 요소로, 보색체를 사용합니다. 소셜 미디어 인터페이스용으로 설계되었으며 어두운 테마 지원으로 반응합니다.