Luxury Agriculture Dashboard 구성 요소
농업 및 농업 웹 사이트를 위한 우아하고 정교한 대시보드 구성 요소로, 생생한 에메랄드 액센트가 있는 흑백 색 구성표를 특징으로 합니다. 여기에는 주요 메트릭, 최근 활동 및 대화형 요소가 포함되며, 완전히 반응하고 다크 모드를 지원하도록 설계되었습니다.
HTML 코드
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Header/Title Section -->
<div class="md:col-span-3 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
<h1 class="text-3xl font-serif text-gray-900 mb-2 dark:text-gray-100">Farm Overview Dashboard</h1>
<p class="text-gray-600 dark:text-gray-400">Monitor key agricultural metrics and activities.</p>
<div class="mt-4 flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Farm Manager Avatar" class="w-10 h-10 rounded-full border-2 border-emerald-500">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Farm Manager</p>
</div>
</div>
</div>
<!-- Key Metrics Section -->
<div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Metric Card 1 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Acres Cultivated</h3>
<p class="text-4xl font-bold text-emerald-600">475 <span class="text-lg text-gray-500 dark:text-gray-400">acres</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">+5% from last month</p>
</div>
<!-- Metric Card 2 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Crop Yield (Avg)</h3>
<p class="text-4xl font-bold text-emerald-600">2.4 <span class="text-lg text-gray-500 dark:text-gray-400">tons/acre</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">+0.2 last harvest period</p>
</div>
<!-- Metric Card 3 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Livestock Health</h3>
<p class="text-4xl font-bold text-emerald-600">98% <span class="text-lg text-gray-500 dark:text-gray-400">healthy</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Excellent status</p>
</div>
<!-- Metric Card 4 -->
<div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Water Usage</h3>
<p class="text-4xl font-bold text-emerald-600">120K <span class="text-lg text-gray-500 dark:text-gray-400">liters</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Target: 100K liters</p>
</div>
<!-- Metric Card 5 (Example of a larger card) -->
<div class="sm:col-span-2 lg:col-span-1 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Next Planting Cycle</h3>
<p class="text-4xl font-bold text-emerald-600">14 <span class="text-lg text-gray-500 dark:text-gray-400">days</span></p>
</div>
<p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Expected: Wheat & Barley</p>
</div>
</div>
<!-- Recent Activities / Quick Links Section -->
<div class="md:col-span-1 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4 dark:text-gray-100">Recent Activities</h3>
<ul class="space-y-4">
<li class="flex items-start">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
<div>
<p class="text-gray-800 dark:text-gray-200">Fertilization completed in Field 3.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</li>
<li class="flex items-start">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
<div>
<p class="text-gray-800 dark:text-gray-200">New irrigation system configured.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
</div>
</li>
<li class="flex items-start">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
<div>
<p class="text-gray-800 dark:text-gray-200">Harvest of Corn Plot A completed.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
</div>
</li>
</ul>
<h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4 dark:text-gray-100">Quick Links</h3>
<div class="grid grid-cols-2 gap-3">
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Field Map</a>
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Reports</a>
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Weather</a>
<a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Inventory</a>
</div>
</div>
<!-- Farm Equipment Overview -->
<div class="md:col-span-3 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4 dark:text-gray-100">Farm Equipment Status</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Equipment Card 1 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
<img src="https://picsum.photos/300/200?random=1" alt="Tractor" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Tractor Alpha</p>
<p class="text-sm text-emerald-600">Online</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Last service: 2 weeks ago</p>
</div>
<!-- Equipment Card 2 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
<img src="https://picsum.photos/300/200?random=2" alt="Harvester" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Harvester Beta</p>
<p class="text-sm text-yellow-600">Idle</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Fuel: 75%</p>
</div>
<!-- Equipment Card 3 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700 dark:text-gray-400">
<img src="https://picsum.photos/300/200?random=3" alt="Irrigation Pump" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Irrigation Pump</p>
<p class="text-sm text-red-600">Offline</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Maintenance required</p>
</div>
<!-- Equipment Card 4 -->
<div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
<img src="https://picsum.photos/300/200?random=4" alt="Drone" class="w-full h-32 object-cover rounded-md mb-3">
<p class="font-medium text-gray-900 dark:text-gray-100">Farm Drone 1</p>
<p class="text-sm text-emerald-600">Online</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Battery: 90%</p>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Brutalist_Dating_Dashboard
데이트 및 소셜 플랫폼을 위한 브루탈리즘 스타일의 대시보드 구성 요소로, 대담한 디자인, 높은 대비, 보라색/보라색 색 구성표가 특징입니다. 다크 모드 지원으로 반응형.
Industrial_Sports_Dashboard
산업 디자인 스타일의 스포츠/피트니스 애플리케이션을 위한 중간 복잡성의 대시보드 구성 요소로, 어스 톤과 다크 모드를 지원하는 반응형 레이아웃을 특징으로 합니다. 주요 지표, 최근 활동 및 팀/개인 성과를 표시합니다.
Neumorphic_Forum_Dashboard
포레스트/그린 색상 팔레트가 있는 간단하고 반응이 빠른 뉴모픽 대시보드 구성 요소로, 포럼 및 커뮤니티 플랫폼용으로 설계되었으며 다크 모드 지원이 포함되어 있습니다.