Dashboard_Agriculture_ForestGreen_Luxury
Un componente complesso della dashboard a tema lusso progettato per l'agricoltura e i siti Web di allevamento, caratterizzato da un'elegante tavolozza di colori foresta/verde e piena reattività con supporto per la modalità oscura.
Codice 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>Componenti correlati
Componente Dashboard
Componente Dashboard reattivo con microinterazioni, combinazione di colori in scala di grigi e livello di complessità complesso su misura per scopi di blog/contenuti. Supporta il tema scuro.
Componente Dashboard
Un componente dashboard di ispirazione retrò progettato per siti Web aziendali o aziendali che combina l'estetica degli anni '80/'90 con un layout e una combinazione di colori moderni. È reattivo e supporta il tema scuro, con elementi interattivi come schede per statistiche, profili utente e altro ancora.
Componente della dashboard delle criptovalute
Un componente complesso e reattivo della dashboard di criptovaluta con uno stile di design tipografico svizzero/internazionale, con elementi sfumati multicolore e supporto per la modalità scura. Include più sezioni come una panoramica del portafoglio, le tendenze di mercato, le transazioni recenti e un grafico.