Dashboard_Agriculture_ForestGreen_Luxury
농업 및 농업 웹 사이트를 위해 설계된 복잡한 럭셔리 테마의 대시보드 구성 요소로, 우아한 숲/녹색 색상 팔레트와 다크 모드 지원으로 완벽한 응답성을 제공합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans antialiased text-gray-800 dark:text-gray-200">
<div class="flex flex-col lg:flex-row">
<!-- Sidebar -->
<aside class="w-full lg:w-64 bg-white dark:bg-gray-800 shadow-lg p-4 lg:p-6 flex flex-col items-center lg:items-start border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-emerald-600 dark:text-emerald-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 10H14.75L14.25 17H9.75Z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10L6.5 7H17.5L17 10M12 21V10" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.5 15C5.5 15.5 5 16 4.5 16C4 16 3.5 15.5 3.5 15C3.5 14.5 4 14 4.5 14C5 14 5.5 14.5 5.5 15Z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 15C18.5 15.5 19 16 19.5 16C20 16 20.5 15.5 20.5 15C20.5 14.5 20 14 19.5 14C19 14 18.5 14.5 18.5 15Z" />
</svg>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 hidden lg:block">FarmFlow</h1>
</div>
<nav class="w-full">
<a href="#" class="flex items-center py-3 px-4 rounded-lg text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-900/40 font-medium transition duration-200 hover:bg-emerald-100 dark:hover:bg-emerald-900 mb-2">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-1.5-1.5L21 12m-9 9v-7.5" />
</svg>
Dashboard
</a>
<a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M2 7l2 1m-2-1l2-1m-2 1v2.5M10 21h4c.54 0 1.05-.18 1.45-.5L19.5 17c.6-.45 1.5-.02 1.5.76V21c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1v-3.24c0-.78.9-1.21 1.5-.76L8.55 20.5c.4.32.91.5 1.45.5zm4.07-16.74C14.07 3.5 13.9 3 13.5 3c-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26c.4-.76.23-1.26-.17-1.26-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26z" />
</svg>
Crops
</a>
<a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
</svg>
Livestock
</a>
<a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L13 21 21 13M9 3v13a4 4 0 004 4h4a2 2 0 002-2V9.586a1 1 0 00-.293-.707l-2.586-2.586A1 1 0 0015.414 6H13a2 2 0 00-2 2z" />
</svg>
Inventory
</a>
<a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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 4v2m0 0h.01M17 17H7a2 2 0 01-2-2v-3a2 2 0 012-2h10a2 2 0 012 2v3a2 2 0 01-2 2zm0 0h.01" />
</svg>
Finance
</a>
<a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</a>
</nav>
<div class="mt-auto w-full pt-4 border-t border-gray-200 dark:border-gray-700 text-center lg:text-left">
<div class="flex items-center justify-center lg:justify-start">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-3 hidden lg:block">
<p class="text-sm font-semibold">John Davis</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Farm Manager</p>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 p-4 lg:p-8 overflow-y-auto">
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 sm:mb-0">Agricultural Overview</h2>
<div class="flex items-center space-x-4">
<button class="px-4 py-2 bg-emerald-600 dark:bg-emerald-700 text-white rounded-lg shadow-md hover:bg-emerald-700 dark:hover:bg-emerald-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
<svg class="h-5 w-5 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
Add New
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200">
<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>
</button>
</div>
</header>
<!-- Analytics Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Total Yield (tons)</p>
<svg class="h-6 w-6 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3,105</p>
<div class="flex items-center mt-2">
<span class="text-sm text-green-600 dark:text-green-400 font-semibold">+4.2%</span>
<span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. last month</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Active Fields</p>
<svg class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657A8 8 0 1117.657 16.657z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">18</p>
<div class="flex items-center mt-2">
<span class="text-sm text-red-600 dark:text-red-400 font-semibold">-1.5%</span>
<span class="text-xs text-gray-500 dark:text-gray-400 ml-2">since new season</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Healthy Livestock</p>
<svg class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c.045 4.383 3.633 7.792 8.52 8.167S22.03 16.03 21.072 12A12.001 12.001 0 0019.618 7.984z" />
</svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">452</p>
<div class="flex items-center mt-2">
<span class="text-sm text-green-600 dark:text-green-400 font-semibold">+0.8%</span>
<span class="text-xs text-gray-500 dark:text-gray-400 ml-2">health rate</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Resources Used</p>
<svg class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11V7l4-6 4 6v4m0 8a2 2 0 11-4 0 2 2 0 014 0zm-4-8c0 .828.672 1.5 1.5 1.5S15 11.828 15 11V6a1 1 0 00-1-1h-4a1 1 0 00-1 1v5c0 .828.672 1.5 1.5 1.5zm1.5-1.5z" />
</svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">$8,750</p>
<div class="flex items-center mt-2">
<span class="text-sm text-red-600 dark:text-red-400 font-semibold">+7.1%</span>
<span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. average</span>
</div>
</div>
</div>
<!-- Main Charts and Tables -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Crop Health Chart -->
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Crop Health & Growth</h3>
<div class="relative h-64 w-full flex items-center justify-center">
<img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart for crop health" class="w-full h-full object-cover rounded-md opacity-70" />
<div class="absolute text-lg text-gray-500 dark:text-gray-400">[Placeholder Chart Area]</div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Visual representation of crop health indicators and growth trends over time.</p>
</div>
<!-- Recent Activities -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Recent Activities</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-3 flex items-center">
<span class="text-emerald-500 mr-3">•</span>
<div>
<p class="text-sm font-medium">Harvested Wheat Field A</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago - 1.5 tons</p>
</div>
</li>
<li class="py-3 flex items-center">
<span class="text-blue-500 mr-3">•</span>
<div>
<p class="text-sm font-medium">Watering System Check</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Yesterday - Field B</p>
</div>
</li>
<li class="py-3 flex items-center">
<span class="text-yellow-500 mr-3">•</span>
<div>
<p class="text-sm font-medium">Purchased new fertilizer batch</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 days ago - $500</p>
</div>
</li>
<li class="py-3 flex items-center">
<span class="text-purple-500 mr-3">•</span>
<div>
<p class="text-sm font-medium">Vaccinated 10 cattle</p>
<p class="text-xs text-gray-500 dark:text-gray-400">3 days ago - Barn 2</p>
</div>
</li>
</ul>
</div>
</div>
<!-- Upcoming Tasks & Weather -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Upcoming Tasks -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Upcoming Tasks</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-3 flex items-start">
<input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
<div>
<p class="font-medium">Soil Analysis - Field C</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Due: 24th Oct, 2023</p>
</div>
</li>
<li class="py-3 flex items-start">
<input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
<div>
<p class="font-medium">Plant Soybeans - Field D</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Due: 26th Oct, 2023</p>
</div>
</li>
<li class="py-3 flex items-start">
<input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
<div>
<p class="font-medium">Fertilize Orchard</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Due: 30th Oct, 2023</p>
</div>
</li>
</ul>
</div>
<!-- Weather Forecast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Weather Forecast</h3>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<svg class="h-12 w-12 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m-8-4v10l8 4 8-4V7m-8 4V4" />
</svg>
<div>
<p class="text-4xl font-bold">18°C</p>
<p class="text-gray-600 dark:text-gray-400">Partly Cloudy</p>
</div>
</div>
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Today</p>
</div>
<div class="grid grid-cols-3 gap-4 text-center text-gray-600 dark:text-gray-400">
<div>
<p class="text-sm">Tomorrow</p>
<svg class="h-8 w-8 text-blue-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15C3 15.5 3 16 3.5 16.5C4 17 4.5 17 5 17H19C19.5 17 20 16.5 20 16V10M17 14L12 9 7 14M12 9V3" />
</svg>
<p class="text-sm">16°C</p>
</div>
<div>
<p class="text-sm">Fri</p>
<svg class="h-8 w-8 text-gray-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 11.5c0 1.93-1.57 3.5-3.5 3.5S10 13.43 10 11.5V10M15 10c0 1.1-.9 2-2 2s-2-.9-2-2m-1 7l4 4 4-4m-4 4V13" />
</svg>
<p class="text-sm">15°C</p>
</div>
<div>
<p class="text-sm">Sat</p>
<svg class="h-8 w-8 text-green-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18M18 13.06L12 18 6 13.06M6 10L12 5 18 10" />
</svg>
<p class="text-sm">20°C</p>
</div>
</div>
</div>
</div>
</main>
</div>
</div>관련 구성 요소
Neumorphic_Forum_Dashboard
포레스트/그린 색상 팔레트가 있는 간단하고 반응이 빠른 뉴모픽 대시보드 구성 요소로, 포럼 및 커뮤니티 플랫폼용으로 설계되었으며 다크 모드 지원이 포함되어 있습니다.
Dashboards 구성 요소
비즈니스 또는 기업 웹 사이트를 위해 설계된 복고풍 대시보드 구성 요소로, 80년대/90년대의 미학과 현대적인 레이아웃 및 색 구성표를 결합합니다. 반응형이며 어두운 테마를 지원하며 통계 카드, 사용자 프로필 등과 같은 대화형 요소를 제공합니다.
Dashboards 구성 요소
포트폴리오를 위한 간단한 단색 다크 모드 대시보드 구성 요소로, Tailwind CSS로 구축되었습니다. 반응형 디자인이 특징이며 매끄럽고 미니멀한 룩을 위해 단일 색상의 다양한 음영을 사용합니다.