산업 발전 지표 구성 요소
산업 디자인 미학을 갖춘 복잡하고 대비가 높은 진행 표시기 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 여러 진행률 표시줄, 자세한 상태 섹션 및 원자재 텍스처를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.
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 구성 요소
머티리얼 디자인에서 영감을 받은 진행 상태 표시기 구성 요소로, 반응형 효과와 어두운 테마를 지원하며 Tailwind CSS를 사용하여 빌드되었습니다.
Progress Indicators 구성 요소
반응형 Progress Indicators 컴포넌트는 유사한 색 구성표를 가진 다크 모드 UI 대시보드용으로 설계되었습니다. 여기에는 막대, 원 및 활동 피드와 같은 다양한 진행률 표시기가 포함되어 있으며 모두 다크 모드 지원을 위해 Tailwind CSS로 스타일이 지정되었습니다. JavaScript는 사용되지 않습니다.
Progress Indicators 구성 요소
글래스모피즘 스타일의 반응형 Progress Indicators 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.