|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Agricultural Storage Management System</title> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--farm-primary: #5cb85c; |
|
|
--farm-primary-dark: #2d5016; |
|
|
--farm-primary-light: #c6e6a8; |
|
|
--farm-secondary: #f0f9e8; |
|
|
--farm-accent: #8cc152; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #f7f9f4; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
.bg-farm { background-color: var(--farm-secondary); } |
|
|
.text-farm-dark { color: var(--farm-primary-dark); } |
|
|
.bg-farm-dark { background-color: var(--farm-primary-dark); } |
|
|
.bg-farm-light { background-color: var(--farm-primary-light); } |
|
|
.border-farm { border-color: var(--farm-accent); } |
|
|
|
|
|
.card { |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); |
|
|
} |
|
|
|
|
|
.btn-farm { |
|
|
background-color: var(--farm-primary); |
|
|
color: white; |
|
|
border-radius: 8px; |
|
|
padding: 12px 24px; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-farm:hover { |
|
|
background-color: #4cae4c; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.form-control, .form-select { |
|
|
border-radius: 8px; |
|
|
padding: 10px 16px; |
|
|
border: 1px solid #ddd; |
|
|
} |
|
|
|
|
|
.form-control:focus, .form-select:focus { |
|
|
border-color: var(--farm-primary); |
|
|
box-shadow: 0 0 0 0.25rem rgba(92, 184, 92, 0.25); |
|
|
} |
|
|
|
|
|
.crop-entry { |
|
|
border-radius: 16px; |
|
|
border-left: 5px solid var(--farm-primary); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.crop-entry:hover { |
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
position: relative; |
|
|
padding-left: 20px; |
|
|
} |
|
|
|
|
|
.section-title::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
width: 10px; |
|
|
height: 30px; |
|
|
background-color: var(--farm-primary); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.analysis-container { |
|
|
background-color: white; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.analysis-content table { |
|
|
width: 100%; |
|
|
border-collapse: separate; |
|
|
border-spacing: 0; |
|
|
margin: 20px 0; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.analysis-content table th { |
|
|
background-color: var(--farm-primary); |
|
|
color: white; |
|
|
padding: 12px 15px; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.analysis-content table td { |
|
|
padding: 12px 15px; |
|
|
border-bottom: 1px solid #eee; |
|
|
} |
|
|
|
|
|
.analysis-content table tr:nth-child(even) { |
|
|
background-color: #f9fcf7; |
|
|
} |
|
|
|
|
|
.loader { |
|
|
border: 5px solid #f3f3f3; |
|
|
border-top: 5px solid var(--farm-primary); |
|
|
border-radius: 50%; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
animation: spin 2s linear infinite; |
|
|
margin: 30px auto; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.crop-card { |
|
|
border-radius: 12px; |
|
|
border-left: 5px solid var(--farm-primary); |
|
|
margin-bottom: 20px; |
|
|
padding: 15px; |
|
|
background-color: white; |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.crop-card h3 { |
|
|
color: var(--farm-primary-dark); |
|
|
border-bottom: 2px solid var(--farm-primary-light); |
|
|
padding-bottom: 8px; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
|
|
|
.info-table { |
|
|
width: 100%; |
|
|
border-collapse: separate; |
|
|
border-spacing: 0; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.info-table th, |
|
|
.info-table td { |
|
|
padding: 10px; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.info-table th { |
|
|
background-color: var(--farm-primary-light); |
|
|
color: var(--farm-primary-dark); |
|
|
} |
|
|
|
|
|
.info-table tr:nth-child(even) { |
|
|
background-color: #f9fcf7; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="text-center mb-8 animate_animated animate_fadeIn"> |
|
|
<div class="inline-block rounded-full bg-farm-light p-3 mb-4"> |
|
|
<i class="fas fa-seedling text-farm-dark text-3xl"></i> |
|
|
</div> |
|
|
<h1 class="text-4xl font-bold text-farm-dark mb-2">Post Harvest Storage Management System</h1> |
|
|
<p class="text-xl text-gray-600">Optimize your post-harvest storage with AI-powered recommendations</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 mb-8 animate_animated animate_fadeIn"> |
|
|
<h2 class="text-2xl font-semibold text-farm-dark mb-6 section-title"> |
|
|
<i class="fas fa-leaf mr-2"></i>Enter Your Crop Details |
|
|
</h2> |
|
|
|
|
|
<form id="storageForm" class="space-y-6"> |
|
|
<div id="crops-container"> |
|
|
<div class="crop-entry bg-farm-light p-4 rounded-lg mb-4"> |
|
|
<div class="text-right mb-2"> |
|
|
<span class="bg-white text-farm-dark px-3 py-1 rounded-full text-sm font-semibold">Crop #1</span> |
|
|
</div> |
|
|
<div class="row"> |
|
|
<div class="col-md-3 mb-3"> |
|
|
<label class="form-label font-semibold">Crop Name</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-group-text"><i class="fas fa-seedling"></i></span> |
|
|
<input type="text" class="form-control" name="crop_name_1" placeholder="e.g. Rice, Wheat" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-3 mb-3"> |
|
|
<label class="form-label font-semibold">Quantity</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-group-text"><i class="fas fa-weight"></i></span> |
|
|
<input type="number" class="form-control" name="crop_quantity_1" placeholder="Amount" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-2 mb-3"> |
|
|
<label class="form-label font-semibold">Unit</label> |
|
|
<select class="form-select" name="crop_unit_1"> |
|
|
<option value="kg">Kilograms (kg)</option> |
|
|
<option value="ton">Metric Tons</option> |
|
|
<option value="bags">Bags</option> |
|
|
<option value="crates">Crates</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="col-md-4 mb-3"> |
|
|
<label class="form-label font-semibold">Harvest Date</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span> |
|
|
<input type="date" class="form-control" name="harvest_date_1" required> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<input type="hidden" id="crop_count" name="crop_count" value="1"> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button type="button" id="addCropBtn" class="btn btn-outline-success"> |
|
|
<i class="fas fa-plus-circle mr-1"></i> Add Another Crop |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-300 my-6 pt-6"> |
|
|
<h3 class="text-xl font-semibold text-farm-dark mb-4 section-title"> |
|
|
<i class="fas fa-warehouse mr-2"></i>Warehouse Information |
|
|
</h3> |
|
|
<div class="row"> |
|
|
<div class="col-md-6 mb-3"> |
|
|
<label class="form-label font-semibold">Warehouse Size</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-group-text"><i class="fas fa-ruler-combined"></i></span> |
|
|
<input type="number" class="form-control" name="warehouse_size" placeholder="Enter size" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-6 mb-3"> |
|
|
<label class="form-label font-semibold">Unit</label> |
|
|
<select class="form-select" name="warehouse_unit"> |
|
|
<option value="sq_m">Square Meters</option> |
|
|
<option value="sq_ft">Square Feet</option> |
|
|
<option value="cubic_m">Cubic Meters</option> |
|
|
<option value="cubic_ft">Cubic Feet</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-300 my-6 pt-6"> |
|
|
<h3 class="text-xl font-semibold text-farm-dark mb-4 section-title"> |
|
|
<i class="fas fa-language mr-2"></i>Select Language |
|
|
</h3> |
|
|
<div class="row"> |
|
|
<div class="col-md-6 mb-3"> |
|
|
<label class="form-label font-semibold">Language</label> |
|
|
<select class="form-select" name="language"> |
|
|
<option value="English">English</option> |
|
|
<option value="Hindi">Hindi</option> |
|
|
<option value="Marathi">Marathi</option> |
|
|
<option value="Telugu">Telugu</option> |
|
|
<option value="Urdu">Urdu</option> |
|
|
<option value="Malayalam">Malayalam</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button type="submit" class="btn btn-farm btn-lg px-6"> |
|
|
<i class="fas fa-magic mr-2"></i>Generate Storage Plan |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div id="analysis-section" class="bg-white rounded-lg shadow-lg p-6 mb-8 hidden"> |
|
|
<h2 class="text-2xl font-semibold text-farm-dark mb-4 section-title"> |
|
|
<i class="fas fa-chart-bar mr-2"></i>Your Storage Plan |
|
|
</h2> |
|
|
|
|
|
<div id="loader" class="loader"></div> |
|
|
|
|
|
<div id="analysis-content" class="analysis-container p-4 rounded hidden"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="bg-farm-dark text-white py-4 text-center"> |
|
|
<p>© 2025 Agricultural Storage Management System | Powered by Gemini AI</p> |
|
|
</footer> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script> |
|
|
<script> |
|
|
$(document).ready(function() { |
|
|
let cropCount = 1; |
|
|
|
|
|
|
|
|
$("#addCropBtn").click(function() { |
|
|
cropCount++; |
|
|
$("#crop_count").val(cropCount); |
|
|
|
|
|
const newCrop = ` |
|
|
<div class="crop-entry bg-farm-light p-4 rounded-lg mb-4 animate_animated animate_fadeIn"> |
|
|
<div class="text-right mb-2"> |
|
|
<span class="bg-white text-farm-dark px-3 py-1 rounded-full text-sm font-semibold">Crop #${cropCount}</span> |
|
|
</div> |
|
|
<div class="row"> |
|
|
<div class="col-md-3 mb-3"> |
|
|
<label class="form-label font-semibold">Crop Name</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-group-text"><i class="fas fa-seedling"></i></span> |
|
|
<input type="text" class="form-control" name="crop_name_${cropCount}" placeholder="e.g. Rice, Wheat" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-3 mb-3"> |
|
|
<label class="form-label font-semibold">Quantity</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-group-text"><i class="fas fa-weight"></i></span> |
|
|
<input type="number" class="form-control" name="crop_quantity_${cropCount}" placeholder="Amount" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-2 mb-3"> |
|
|
<label class="form-label font-semibold">Unit</label> |
|
|
<select class="form-select" name="crop_unit_${cropCount}"> |
|
|
<option value="kg">Kilograms (kg)</option> |
|
|
<option value="ton">Metric Tons</option> |
|
|
<option value="bags">Bags</option> |
|
|
<option value="crates">Crates</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="col-md-4 mb-3"> |
|
|
<label class="form-label font-semibold">Harvest Date</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span> |
|
|
<input type="date" class="form-control" name="harvest_date_${cropCount}" required> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button type="button" class="btn btn-outline-danger btn-sm mt-2 remove-crop"> |
|
|
<i class="fas fa-trash mr-1"></i> Remove |
|
|
</button> |
|
|
</div>`; |
|
|
$("#crops-container").append(newCrop); |
|
|
}); |
|
|
|
|
|
|
|
|
$(document).on("click", ".remove-crop", function() { |
|
|
$(this).closest(".crop-entry").remove(); |
|
|
cropCount = $(".crop-entry").length; |
|
|
$("#crop_count").val(cropCount); |
|
|
}); |
|
|
|
|
|
|
|
|
$("#storageForm").submit(function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
$("#analysis-section").removeClass("hidden"); |
|
|
$("#loader").show(); |
|
|
$("#analysis-content").addClass("hidden"); |
|
|
|
|
|
$('html, body').animate({ |
|
|
scrollTop: $("#analysis-section").offset().top - 50 |
|
|
}, 500); |
|
|
|
|
|
$.ajax({ |
|
|
url: "/analyze", |
|
|
type: "POST", |
|
|
data: $(this).serialize(), |
|
|
success: function(response) { |
|
|
$("#loader").hide(); |
|
|
if (response.success) { |
|
|
|
|
|
const htmlContent = marked.parse(response.analysis); |
|
|
$("#analysis-content").html(htmlContent); |
|
|
$("#analysis-content").removeClass("hidden").addClass("animate_animated animate_fadeIn"); |
|
|
|
|
|
|
|
|
|
|
|
$("#analysis-content table").addClass("info-table my-4"); |
|
|
|
|
|
|
|
|
$("#analysis-content h1").addClass("text-3xl text-farm-dark font-bold my-4"); |
|
|
$("#analysis-content h2").addClass("text-2xl text-farm-dark font-bold my-3"); |
|
|
$("#analysis-content h3").addClass("text-xl text-farm-dark font-semibold my-2"); |
|
|
|
|
|
|
|
|
$("#analysis-content ul, #analysis-content ol").addClass("list-disc pl-6 my-3"); |
|
|
|
|
|
|
|
|
$("#analysis-content blockquote").addClass("border-l-4 border-farm pl-4 italic my-4 py-2"); |
|
|
|
|
|
|
|
|
$("#analysis-content h3").each(function() { |
|
|
|
|
|
const $heading = $(this); |
|
|
const $section = $('<div class="crop-card"></div>'); |
|
|
|
|
|
|
|
|
let $content = $heading.nextUntil('h3'); |
|
|
|
|
|
|
|
|
$heading.wrap($section); |
|
|
if ($content.length) { |
|
|
$heading.parent().append($content); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
$("#analysis-content .crop-card h3").each(function() { |
|
|
const cropName = $(this).text().toLowerCase(); |
|
|
let icon = "🌾"; |
|
|
|
|
|
|
|
|
if (cropName.includes("rice")) icon = "🌾"; |
|
|
else if (cropName.includes("wheat")) icon = "🌾"; |
|
|
else if (cropName.includes("corn") || cropName.includes("maize")) icon = "🌽"; |
|
|
else if (cropName.includes("potato")) icon = "🥔"; |
|
|
else if (cropName.includes("tomato")) icon = "🍅"; |
|
|
else if (cropName.includes("onion")) icon = "🧅"; |
|
|
else if (cropName.includes("garlic")) icon = "🧄"; |
|
|
else if (cropName.includes("chili") || cropName.includes("pepper")) icon = "🌶"; |
|
|
else if (cropName.includes("carrot")) icon = "🥕"; |
|
|
else if (cropName.includes("bean")) icon = "🫘"; |
|
|
else if (cropName.includes("apple")) icon = "🍎"; |
|
|
else if (cropName.includes("banana")) icon = "🍌"; |
|
|
else if (cropName.includes("orange") || cropName.includes("citrus")) icon = "🍊"; |
|
|
else if (cropName.includes("grape")) icon = "🍇"; |
|
|
else if (cropName.includes("strawberry")) icon = "🍓"; |
|
|
else if (cropName.includes("watermelon")) icon = "🍉"; |
|
|
else if (cropName.includes("pineapple")) icon = "🍍"; |
|
|
else if (cropName.includes("coconut")) icon = "🥥"; |
|
|
|
|
|
$(this).prepend(icon + " "); |
|
|
}); |
|
|
|
|
|
} else { |
|
|
$("#analysis-content").html(`<div class="alert alert-danger p-4 rounded-lg"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> Error: ${response.error} |
|
|
</div>`); |
|
|
$("#analysis-content").removeClass("hidden"); |
|
|
} |
|
|
}, |
|
|
error: function() { |
|
|
$("#loader").hide(); |
|
|
$("#analysis-content").html(`<div class="alert alert-danger p-4 rounded-lg"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> An error occurred while communicating with the server. Please try again. |
|
|
</div>`); |
|
|
$("#analysis-content").removeClass("hidden"); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
