Skip to content

web/agri_yield #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alstondsouza23 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

web/agri_yield #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions web/agri_yield/.vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
268 changes: 268 additions & 0 deletions web/agri_yield/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<!--the navbar is derived from TialwindCSS-->
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" id="title"><i class="bi bi-tree mr-2"></i></i>Agri Yield Predictor</a>
<ul>
<!--the icons are from font awesomme-->
<li><a href="#home" class="active"><i class="bi bi-house mr-1"></i>Home</a></li>
<li><a href="#predictor"><i class="bi bi-graph-up mr-1"></i>Predictor</a></li>
<li><a href="#buyers"><i class="bi bi-people mr-1"></i>Buyers</a></li>
<li><a href="#resources"><i class="bi bi-book mr-1"></i>Resources</a></li>
</ul>
</div>
</nav>
<section class="container mx-auto p-4 flex-grow">
<!--the block is derived from TailwindCSS-->
<section id="home" class="mb-12">
<div class="glass-effect rounded-2xl shadow hover:bg-gray-100 dark:bg-white-800:border-white-:hover:bg-white-700 text-center">
<h2 class="text-4xl font-bold text-green-700 mb-4">Smart Farming Decisions Start Here</h2>
<p class="text-xl text-gray-600 mb-6 leading-relaxed px-10">Agricultural yield prediction plays a crucial role in ensuring food security, optimizing resource management, and supporting
sustainable farming practices. Accurate predictions of crop yields enable farmers, policymakers, and supply chain stakeholders to make informed decisions
regarding planting, irrigation, fertilization, and harvesting. By anticipating potential crop outputs, farmers can adjust their strategies to mitigate risks such as
droughts, pests, and diseases. Moreover, yield predictions help in managing market prices by forecasting supply and demand, thereby reducing the volatility of food
markets. As climate change continues to impact farming conditions globally, predictive models that consider weather patterns, soil health, and crop conditions are
becoming indispensable tools. Ultimately, agricultural yield prediction not only contributes to more efficient farming but also plays a pivotal role in addressing global
challenges like hunger, resource conservation, and climate resilience</p>
<a href="#predictor" class="inline-block bg-green-600 mb-6 text-white py-3 px-6 rounded-lg hover:bg-green-700 transition">
Get Started <i class="bi bi-arrow-right ml-2"></i>
</a>
</div>
</section>
</section>
</body>
</html>
</section>
<!--pridiction section-->
<section id="predictor" class="mb-12">
<div class="glass-effect rounded-2xl p-6 shadow-lg max-w-2xl mx-auto hover-scale">
<h2 class="text-2xl font-semibold mb-6 text-green-700 flex items-center">
<i class="bi bi-calculator mr-2"></i> Crop Yield Prediction
</h2>
<form id="predictionForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="group">
<label class="block text-sm font-medium text-gray-700">Crop Type</label>
<select id="cropType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border focus:ring-2 focus:ring-green-500">
<option value="rice">Rice</option>
<option value="wheat">Wheat</option>
<option value="maize">Maize</option>
<option value="sugarcane">Sugarcane</option>
<option value="cotton">Cotton</option>
<option value="pulses">Pulses</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Area (hectares)</label>
<input type="number" id="area" min="0.1" step="0.1" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border focus:ring-2 focus:ring-green-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Soil Type</label>
<select id="soilType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border focus:ring-2 focus:ring-green-500">
<option value="loamy">Loamy</option>
<option value="sandy">Sandy</option>
<option value="clay">Clay</option>
<option value="silt">Silty</option>
<option value="black">Black</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Season</label>
<select id="season" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border focus:ring-2 focus:ring-green-500">
<option value="kharif">Kharif</option>
<option value="rabi">Rabi</option>
<option value="zaid">Zaid</option>
<option value="annual">Annual</option>
</select>
</div>
</div>
<button type="submit" class="w-full bg-green-600 text-white py-3 px-4 rounded-md hover:bg-green-700 transition flex items-center justify-center">
<i class="bi bi-search mr-2"></i> Predict Yield
</button>
</form>
<div id="prediction-result" class="mt-6 hidden">
<div class="bg-green-50 border border-green-200 rounded-md p-4">
<h3 class="text-lg font-medium text-green-800">Predicted Yield:</h3>
<p id="yield-value" class="text-2xl font-bold text-green-600 mt-2"></p>
<div id="recommendations" class="mt-4 text-sm text-gray-600"></div>
</div>
</div>
</div>
</section>
<!-- Market Insights -->
<section id="buyers" class="mb-12">
<div class="glass-effect rounded-lg p-6 shadow-lg">
<h2 class="text-2xl font-semibold mb-6 text-green-700 flex items-center">
<i class="bi bi-graph-up-arrow mr-2"></i> Market Insights & Buyers
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="buyers-list"></div>
</div>
</section>
<!-- Resources Section -->
<section id="resources" class="mb-12">
<div class="glass-effect rounded-lg p-6 shadow-lg">
<h2 class="text-2xl font-semibold mb-6 text-green-700">Farming Resources</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-4 bg-white rounded-lg shadow hover:shadow-lg transition">
<i class="bi bi-cloud-sun text-3xl text-green-600"></i>
<h3 class="text-lg font-semibold mt-2">Weather Forecast</h3>
<p class="text-gray-600">7-day detailed weather predictions for your region</p>
</div>
<div class="p-4 bg-white rounded-lg shadow hover:shadow-lg transition">
<i class="bi bi-newspaper text-3xl text-green-600"></i>
<h3 class="text-lg font-semibold mt-2">Farming News</h3>
<p class="text-gray-600">Latest agricultural news and market trends</p>
</div>
<div class="p-4 bg-white rounded-lg shadow hover:shadow-lg transition">
<i class="bi bi-calendar-check text-3xl text-green-600"></i>
<h3 class="text-lg font-semibold mt-2">Crop Calendar</h3>
<p class="text-gray-600">Optimal planting and harvesting schedules</p>
</div>
</div>
</div>
</section>
</main>

<footer class="bg-gradient-to-r from-green-600 to-green-500 text-white py-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-semibold mb-2">Contact Us</h3>
<p><i class="bi bi-envelope"></i> support@Agri_Yield_redictor.com</p>
<p><i class="bi bi-telephone"></i> +91-6969696969</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">Quick Links</h3>
<ul>
<li><a href="#home" class="hover:text-green-200">Home</a></li>
<li><a href="#predictor" class="hover:text-green-200">Predictor</a></li>
<li><a href="#buyers" class="hover:text-green-200">Buyers</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">Follow Us</h3>
<div class="flex space-x-4">
<a href="https://github.com/alstondsouza23" class="hover:text-green-200"><i class="bi bi-github"></i></a>
<a href="https://www.instagram.com/alstondsouza23/" class="hover:text-green-200"><i class="bi bi-instagram"></i></a>
<a href="https://www.linkedin.com/in/alston-dsouza-b22014235/" class="hover:text-green-200"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="text-center mt-8">
<p>&copy; 2024 Agri Yield Predictor. All website by Alston.</p>
</div>
</div>
</footer>

<script>
const buyers = [
{
name: "Green Foods Co.",
crops: ["rice", "wheat"],
contact: "+91-1234567890",
price: "₹3400/ton",
rating: 4.8
},
{
name: "Organic Traders",
crops: ["maize", "sugarcane"],
contact: "+91-1234567890",
price: "₹2350/ton",
rating: 4.5
},
{
name: "Farm Fresh Exports",
crops: ["rice", "maize"],
contact: "+91-1234567890",
price: "₹4820/ton",
rating: 4.9
},
{
name: "Agro Market",
crops: ["maize", "pulses"],
contact: "+91-1234567890",
price: "₹4380/ton",
rating: 4.7
},
{
name: "Global Agri Market",
crops: ["cotton", "maize"],
contact: "+91-1234567890",
price: "₹3580/ton",
rating: 4.7
},
{
name: "Fresh-it Co.",
crops: ["cotton", "wheat"],
contact: "+91-1234567890",
price: "₹3800/ton",
rating: 4.7
}
];

function displayBuyers() {
const buyersList = document.getElementById('buyers-list');
buyersList.innerHTML = buyers.map(buyer => `
<div class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition hover-scale">
<h3 class="text-lg font-semibold text-green-700">${buyer.name}</h3>
<div class="flex items-center mt-1">
${"★".repeat(Math.floor(buyer.rating))}${buyer.rating % 1 ? "½" : ""}
<span class="text-gray-600 text-sm ml-1">(${buyer.rating})</span>
</div>
<p class="text-gray-600 mt-2"><i class="bi bi-bag"></i> Interested in: ${buyer.crops.join(', ')}</p>
<p class="text-gray-600"><i class="bi bi-telephone"></i> ${buyer.contact}</p>
<p class="text-green-600 font-semibold mt-2"><i class="bi bi-tag"></i> Offering: ${buyer.price}</p>
<button class="mt-4 bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 transition w-full flex items-center justify-center">
<i class="bi bi-chat-dots mr-2"></i> Contact Buyer
</button>
</div>
`).join('');
}

document.getElementById('predictionForm').addEventListener('submit', function(e) {
e.preventDefault();
const cropType = document.getElementById('cropType').value;
const area = document.getElementById('area').value;
const soilType = document.getElementById('soilType').value;
const season = document.getElementById('season').value;

const predictedYield = (Math.random() * 5 + 2).toFixed(2);
const totalYield = (predictedYield * area).toFixed(2);

document.getElementById('prediction-result').classList.remove('hidden');
document.getElementById('yield-value').textContent = `${predictedYield} tons per hectare (Estimated total: ${totalYield} tons)`;

//Add recommendations
const recommendations = document.getElementById('recommendations');
recommendations.innerHTML = `
<h4 class="font-semibold mb-2">Recommendations:</h4>
<ul class="list-disc pl-5">
<li>Optimal harvest time: ${season === 'kharif' ? 'October-November' : 'March-April'}</li>
<li>Estimated market value: ₹${(totalYield * 380).toFixed(2)}</li>
<li>Suggested buyers: ${buyers.filter(b => b.crops.includes(cropType)).map(b => b.name).join(', ')}</li>
</ul>
`;
});

//Initialize the page
displayBuyers();

//Smooth scroll for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
42 changes: 42 additions & 0 deletions web/agri_yield/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
nav{
background-color: #09a370;
}
nav ul
{
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li
{
list-style: none;
margin-left: 20px;
}
nav ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
nav ul li a:hover,
nav ul li a.active
{
background: #fff;
color: #10b981;
}
#title{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: 2px;
}
body{
background-color: #e6fffa;
}
.mb-12{
background-color: #fff;
}