Composant du tableau de bord de l’agriculture de luxe
Un composant de tableau de bord élégant et sophistiqué pour l’agriculture et les sites Web agricoles, avec une palette de couleurs noir et blanc avec un accent émeraude vibrant. Il comprend des indicateurs clés, des activités récentes et des éléments interactifs, conçus pour être entièrement réactifs et prendre en charge le mode sombre.
HTML Code
<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>Composants associés
Composant Tableaux de bord
Un composant de tableau de bord simple et monochrome en mode sombre pour les portefeuilles, conçu avec Tailwind CSS. Il présente un design réactif et utilise différentes nuances d’une seule couleur pour un look élégant et minimaliste.
Tableau de bord de jeu
Un composant d’interface utilisateur de tableau de bord de jeu complexe et réactif conçu pour le mode sombre, avec une palette de couleurs en niveaux de gris. Comprend les statistiques des joueurs, l’activité récente et les listes de jeux.
Dashboard_Component
Un composant de tableau de bord financier/bancaire réactif avec un style de conception aquarelle/artistique et une palette de couleurs chaudes au coucher du soleil. Inclut la prise en charge du mode sombre et un niveau de complexité modéré.