Industrial_Chart_Component_Ocean_Blue_Simple
비영리/자선 단체를 위해 설계된 바다/블루 톤을 사용하는 산업, 원자재 미학을 가진 간단하고 반응이 빠른 차트 구성 요소입니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl border border-blue-200 dark:border-blue-800">
<div class="flex justify-between items-center mb-6 border-b pb-4 border-blue-300 dark:border-blue-700">
<h2 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 font-mono tracking-wide">Donation Impact Overview</h2>
<p class="text-sm text-blue-600 dark:text-blue-400 uppercase tracking-widest font-mono">Q4 2023</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
<div>
<p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Total Contributions</p>
<p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">$12,450</p>
</div>
<div class="w-full bg-blue-200 dark:bg-blue-700 rounded-full h-2 mt-4">
<div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style="width: 75%;"></div>
</div>
</div>
<div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
<div>
<p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Beneficiaries Reached</p>
<p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">87</p>
</div>
<div class="text-xs text-blue-600 dark:text-blue-400 mt-4">+15% from Q3</div>
</div>
<div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
<div>
<p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Volunteer Hours</p>
<p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">320 hrs</p>
</div>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-4 self-end">View Details →</a>
</div>
</div>
<div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-md border border-blue-300 dark:border-blue-700">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4">Impact Distribution</h3>
<div class="relative h-48 sm:h-64">
<!-- Placeholder for a simple bar chart or pie chart representation -->
<div class="absolute inset-0 flex items-end p-2 sm:p-4">
<div class="flex flex-grow justify-around items-end h-full">
<div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 70%; animation-delay: 0s;"></div>
<div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 50%; animation-delay: 0.1s;"></div>
<div class="w-8 sm:w-10 bg-blue-800 dark:bg-sky-600 rounded-t-sm animate-bar-grow" style="height: 90%; animation-delay: 0.2s;"></div>
<div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 40%; animation-delay: 0.3s;"></div>
<div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 60%; animation-delay: 0.4s;"></div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-px bg-blue-400 dark:bg-blue-600"></div>
<div class="absolute top-0 bottom-0 left-4 w-px bg-blue-400 dark:bg-blue-600"></div>
<div class="absolute bottom-0 left-0 right-0 flex justify-around text-xs text-blue-700 dark:text-blue-300 pt-2 pb-1">
<span>Food</span>
<span>Water</span>
<span>Shelter</span>
<span>Health</span>
<span>Educ.</span>
</div>
</div>
</div>
<div class="mt-6 text-center">
<button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md font-semibold transition-colors duration-200 border border-blue-900 dark:border-blue-400 shadow-md font-mono">
Generate Report
</button>
</div>
</div>
<style>
@keyframes bar-grow {
from { height: 0%; transform: translateY(100%); opacity: 0; }
to { transform: translateY(0%); opacity: 1; }
}
.animate-bar-grow {
animation: bar-grow 0.8s ease-out forwards;
}
</style>