Компонент приборной панели для сельского хозяйства класса люкс
Элегантный и изысканный компонент панели управления для веб-сайтов по сельскому хозяйству и фермерству, выполненный в черно-белой цветовой гамме с ярким изумрудным акцентом. Он включает в себя ключевые метрики, недавние действия и интерактивные элементы, разработанные для полного реагирования и поддержки темного режима.
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>Связанные компоненты
Компонент панели управления
Простой компонент приборной панели с 3D-дизайном и пастельной цветовой гаммой, отзывчивый и с поддержкой темного режима.
Dashboard_Agriculture_ForestGreen_Luxury
Сложный, роскошный компонент панели управления, разработанный для сельского хозяйства и фермерских веб-сайтов, отличается элегантной цветовой палитрой леса и зеленого цвета и полной отзывчивостью с поддержкой темного режима.
Информационная панель Memphis Sepia
Компонент приборной панели с эстетикой Memphis Design, смелыми геометрическими формами и теплой цветовой палитрой сепии/коричневого, подходит для деловых и корпоративных веб-сайтов. Включает полную отзывчивость и поддержку темного режима.