Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AgriTrack - Farmer Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| agriPrimary: '#2F855A', | |
| agriSecondary: '#ECC94B', | |
| agriDark: '#276749', | |
| agriLight: '#F0FFF4', | |
| agriAccent: '#38A169', | |
| agriAlert: '#E53E3E', | |
| agriWater: '#4299E1', | |
| agriSoil: '#9F7AEA' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .dashboard-nav { | |
| height: calc(100vh - 4rem); | |
| } | |
| .active-tab { | |
| background-color: #F0FFF4; | |
| color: #2F855A; | |
| border-left: 4px solid #ECC94B; | |
| } | |
| .transition-smooth { | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .status-good { | |
| background-color: #C6F6D5; | |
| color: #22543D; | |
| } | |
| .status-warning { | |
| background-color: #FEFCBF; | |
| color: #744210; | |
| } | |
| .status-critical { | |
| background-color: #FED7D7; | |
| color: #742A2A; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #2F855A; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <div class="flex"> | |
| <!-- Sidebar --> | |
| <div class="bg-white shadow-md w-64 fixed dashboard-nav"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h1 class="text-xl font-bold text-agriPrimary">AgriTrack</h1> | |
| <p class="text-xs text-gray-500">Farmer Dashboard</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-agriLight flex items-center justify-center text-agriPrimary font-bold mr-3"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">John Farmer</p> | |
| <p class="text-sm text-gray-500">Organic Farm, Iowa</p> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Farm Management</p> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded active-tab"> | |
| <i class="fas fa-tachometer-alt mr-2"></i> Dashboard | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-map-marked-alt mr-2"></i> Fields | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-seedling mr-2"></i> Crops | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-cow mr-2"></i> Livestock | |
| </a> | |
| </div> | |
| <div class="mb-8"> | |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Production Tracking</p> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-chart-line mr-2"></i> Yields | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-tractor mr-2"></i> Inputs | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-boxes mr-2"></i> Inventory | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-clipboard-check mr-2"></i> Tasks | |
| </a> | |
| </div> | |
| <div class="mb-8"> | |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Sustainability</p> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-cloud-sun-rain mr-2"></i> Climate Impact | |
| </a> | |
| <i class="fas fa-shoe-prints mr-2"></i> Carbon Footprint | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-recycle mr-2"></i> Resource Use | |
| </a> | |
| </div> | |
| <div class="mb-8"> | |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Financial</p> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-dollar-sign mr-2"></i> Expenses | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-money-bill-wave mr-2"></i> Revenue | |
| </a> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100"> | |
| <i class="fas fa-credit-card mr-2"></i> Credit Rating | |
| </a> | |
| </div> | |
| <div> | |
| <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100 text-red-500"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Logout | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 ml-64"> | |
| <!-- Top Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <h1 class="text-xl font-semibold text-gray-900">Farm Overview</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="bg-agriLight text-agriPrimary px-3 py-1 rounded-full text-sm font-medium"> | |
| <i class="fas fa-cloud mr-1"></i> 72°F, Sunny | |
| </button> | |
| </div> | |
| <button class="relative text-gray-600 hover:text-agriPrimary"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute -top-1 -right-1 bg-agriAlert text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">2</span> | |
| </button> | |
| <div class="relative"> | |
| <button onclick="toggleProfileDropdown()" class="flex items-center text-sm rounded-full focus:outline-none"> | |
| <span class="sr-only">Open user menu</span> | |
| <div class="w-8 h-8 rounded-full bg-agriLight flex items-center justify-center text-agriPrimary font-bold"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Dashboard Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <!-- Farm Status Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-agriLight text-agriPrimary mr-4"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Active Fields</p> | |
| <p class="text-2xl font-bold">8</p> | |
| <p class="text-xs text-gray-500 mt-1">120 acres total</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-seedling"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Current Crops</p> | |
| <p class="text-2xl font-bold">4</p> | |
| <p class="text-xs text-gray-500 mt-1">Corn, Soybeans, Wheat, Oats</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-cloud-sun-rain"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Soil Health</p> | |
| <p class="text-2xl font-bold">82%</p> | |
| <span class="status-good px-2 py-1 text-xs font-medium rounded-full">Good</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Credit Score</p> | |
| <p class="text-2xl font-bold">720</p> | |
| <span class="status-good px-2 py-1 text-xs font-medium rounded-full">Good</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Production and Climate Data --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Yield Trends --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-900">Crop Yield Trends (bushels/acre)</h2> | |
| </div> | |
| <div class="p-6"> | |
| <canvas id="yieldChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| <!-- Climate Impact --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-900">Climate Impact Analysis</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-agriLight p-4 rounded-lg text-center"> | |
| <p class="text-sm text-gray-600">Temperature</p> | |
| <p class="text-xl font-bold text-agriPrimary">+2.1°F</p> | |
| <p class="text-xs text-gray-500">10yr avg increase</p> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg text-center"> | |
| <p class="text-sm text-gray-600">Precipitation</p> | |
| <p class="text-xl font-bold text-blue-600">-12%</p> | |
| <p class="text-xs text-gray-500">10yr avg decrease</p> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg text-center"> | |
| <p class="text-sm text-gray-600">Growing Days</p> | |
| <p class="text-xl font-bold text-yellow-600">+14</p> | |
| <p class="text-xs text-gray-500">10yr avg increase</p> | |
| </div> | |
| </div> | |
| <canvas id="climateChart" height="150"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Inputs and Sustainability --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Input Usage --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold text-gray-900">Input Usage (Current Season)</h2> | |
| <a href="#" class="text-sm font-medium text-agriPrimary hover:text-agriDark">Details</a> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 hover:bg-gray-50 transition-smooth"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Water Usage</p> | |
| <p class="text-sm text-gray-500">Irrigation</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">1.2M gallons</p> | |
| <p class="text-sm text-gray-500">-15% vs last year</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 transition-smooth"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-flask"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Fertilizer</p> | |
| <p class="text-sm text-gray-500">Nitrogen-based</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">850 lbs</p> | |
| <p class="text-sm text-gray-500">-22% vs last year</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 transition-smooth"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-red-100 text-red-600 mr-4"> | |
| <i class="fas fa-bug"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Pesticides</p> | |
| <p class="text-sm text-gray-500">Organic compounds</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">45 lbs</p> | |
| <p class="text-sm text-gray-500">-30% vs last year</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 transition-smooth"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-gas-pump"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Fuel Consumption</p> | |
| <p class="text-sm text-gray-500">Diesel</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">320 gallons</p> | |
| <p class="text-sm text-gray-500">-8% vs last year</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carbon Footprint --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-900">Carbon Footprint Analysis</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Total CO₂ Equivalent</p> | |
| <p class="text-2xl font-bold text-agriPrimary">42.5 tons</p> | |
| </div> | |
| <span class="status-good px-3 py-1 text-sm font-medium rounded-full">-12% YoY</span> | |
| </div> | |
| <canvas id="carbonChart" height="200"></canvas> | |
| <div class="mt-4 grid grid-cols-3 gap-2"> | |
| <div class="bg-gray-100 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-600">Field Operations</p> | |
| <p class="font-medium">18.2 t</p> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-600">Fertilizer</p> | |
| <p class="font-medium">12.7 t</p> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-600">Livestock</p> | |
| <p class="font-medium">8.4 t</p> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-600">Energy Use</p> | |
| <p class="font-medium">2.3 t</p> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-600">Transport</p> | |
| <p class="font-medium">0.9 t</p> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded text-center"> | |
| <p class="text-xs text-gray-600">Sequestration</p> | |
| <p class="font-medium text-green-600">-12.5 t</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Financial and Credit Data --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Financial Overview --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold text-gray-900">Financial Overview (2023)</h2> | |
| <a href="#" class="text-sm font-medium text-agriPrimary hover:text-agriDark">Details</a> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-2 gap-6 mb-6"> | |
| <div class="border-r border-gray-200 pr-6"> | |
| <p class="text-sm text-gray-500 mb-1">Total Revenue</p> | |
| <p class="text-2xl font-bold text-green-600">$248,750</p> | |
| <p class="text-xs text-gray-500 mt-1">+8% vs last year</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Total Expenses</p> | |
| <p class="text-2xl font-bold text-red-600">$182,300</p> | |
| <p class="text-xs text-gray-500 mt-1">+5% vs last year</p> | |
| </div> | |
| </div> | |
| <canvas id="financeChart" height="200"></canvas> | |
| </div> | |
| </div> | |
| <!-- Credit Rating Factors --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-900">Credit Rating Factors</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-700">Payment History</p> | |
| <p class="text-sm font-bold text-green-600">Excellent</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-700">Debt-to-Income</p> | |
| <p class="text-sm font-bold text-green-600">Good</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-700">Asset Value</p> | |
| <p class="text-sm font-bold text-yellow-600">Average</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-700">Sustainability Score</p> | |
| <p class="text-sm font-bold text-green-600">Excellent</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-700">Yield Stability</p> | |
| <p class="text-sm font-bold text-green-600">Good</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 76%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-8 p-4 bg-agriLight rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-white text-agriPrimary mr-3"> | |
| <i class="fas fa-credit-card"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Current Credit Score</p> | |
| <p class="text-2xl font-bold">720</p> | |
| <p class="text-xs text-gray-600">Good (National Avg: 650)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alerts and Recommendations --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-8"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold text-gray-900">Alerts & Recommendations</h2> | |
| <a href="#" class="text-sm font-medium text-agriPrimary hover:text-agriDark">View All</a> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 hover:bg-gray-50 transition-smooth"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-red-100 text-red-600 mr-4"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Irrigation Needed</h4> | |
| <p class="text-gray-500 mt-1">Field 3 soil moisture is below optimal levels. Recommended irrigation within 48 hours.</p> | |
| <p class="text-xs text-gray-400 mt-2">Today, 9:42 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 transition-smooth"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-cloud-sun-rain"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Weather Advisory</h4> | |
| <p class="text-gray-500 mt-1">Heat wave expected next week. Consider adjusting harvest schedule for Field 5.</p> | |
| <p class="text-xs text-gray-400 mt-2">Yesterday, 3:15 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 transition-smooth"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Market Opportunity</h4> | |
| <p class="text-gray-500 mt-1">Organic wheat prices up 12% this month. Consider increasing production next season.</p> | |
| <p class="text-xs text-gray-400 mt-2">Jun 12, 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle profile dropdown | |
| function toggleProfileDropdown() { | |
| const dropdown = document.getElementById('profileDropdown'); | |
| dropdown.classList.toggle('hidden'); | |
| } | |
| // Yield Trends Chart | |
| const yieldCtx = document.getElementById('yieldChart').getContext('2d'); | |
| const yieldChart = new Chart(yieldCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2018', '2019', '2020', '2021', '2022', '2023'], | |
| datasets: [ | |
| { | |
| label: 'Corn', | |
| data: [180, 175, 192, 185, 198, 205], | |
| borderColor: '#2F855A', | |
| backgroundColor: 'rgba(47, 133, 90, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Soybeans', | |
| data: [52, 48, 55, 50, 58, 62], | |
| borderColor: '#ECC94B', | |
| backgroundColor: 'rgba(236, 201, 75, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Wheat', | |
| data: [68, 65, 72, 70, 75, 78], | |
| borderColor: '#9F7AEA', | |
| backgroundColor: 'rgba(159, 122, 234, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| title: { | |
| display: true, | |
| text: 'Bushels per Acre' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Climate Impact Chart | |
| const climateCtx = document.getElementById('climateChart').getContext('2d'); | |
| const climateChart = new Chart(climateCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| datasets: [ | |
| { | |
| label: 'Temperature (°F)', | |
| data: [28, 32, 45, 58, 68, 77, 82, 80, 72, 60, 46, 34], | |
| backgroundColor: 'rgba(239, 68, 68, 0.7)', | |
| borderColor: 'rgba(239, 68, 68, 1)', | |
| borderWidth: 1, | |
| yAxisID: 'y' | |
| }, | |
| { | |
| label: 'Precipitation (in)', | |
| data: [1.2, 1.1, 2.3, 3.5, 4.2, 4.8, 3.9, 3.5, 3.1, 2.5, 1.9, 1.4], | |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 1, | |
| type: 'line', | |
| yAxisID: 'y1' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| interaction: { | |
| mode: 'index', | |
| intersect: false, | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| type: 'linear', | |
| display: true, | |
| position: 'left', | |
| title: { | |
| display: true, | |
| text: 'Temperature (°F)' | |
| } | |
| }, | |
| y1: { | |
| type: 'linear', | |
| display: true, | |
| position: 'right', | |
| title: { | |
| display: true, | |
| text: 'Precipitation (in)' | |
| }, | |
| grid: { | |
| drawOnChartArea: false, | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Carbon Footprint Chart | |
| const carbonCtx = document.getElementById('carbonChart').getContext('2d'); | |
| const carbonChart = new Chart(carbonCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Field Operations', 'Fertilizer', 'Livestock', 'Energy Use', 'Transport', 'Sequestration'], | |
| datasets: [{ | |
| data: [18.2, 12.7, 8.4, 2.3, 0.9, -12.5], | |
| backgroundColor: [ | |
| '#2F855A', | |
| '#ECC94B', | |
| '#9F7AEA', | |
| '#4299E1', | |
| '#ED8936', | |
| '#38B2AC' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| label += context.raw + ' tons CO₂e'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Financial Chart | |
| const financeCtx = document.getElementById('financeChart').getContext('2d'); | |
| const financeChart = new Chart(financeCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Q1', 'Q2', 'Q3', 'Q4'], | |
| datasets: [ | |
| { | |
| label: 'Revenue', | |
| data: [45000, 65000, 85000, 53250], | |
| backgroundColor: 'rgba(56, 161, 105, 0.7)', | |
| borderColor: 'rgba(56, 161, 105, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Expenses', | |
| data: [38000, 52000, 65000, 37300], | |
| backgroundColor: 'rgba(229, 62, 62, 0.7)', | |
| borderColor: 'rgba(229, 62, 62, 1)', | |
| borderWidth: 1 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: 'USD ($)' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jcarnel/projects256" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |