|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Crop Market Analysis</title> |
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #4CAF50; |
|
|
--secondary-color: #45a049; |
|
|
--background-color: #f9f9f9; |
|
|
--text-color: #333; |
|
|
--card-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
--border-radius: 8px; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: var(--background-color); |
|
|
color: var(--text-color); |
|
|
font-family: 'Arial', sans-serif; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 30px; |
|
|
padding: 20px 0; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
color: var(--primary-color); |
|
|
font-weight: bold; |
|
|
margin: 0; |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.form-section { |
|
|
background: white; |
|
|
padding: 25px; |
|
|
border-radius: var(--border-radius); |
|
|
box-shadow: var(--card-shadow); |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
background: white; |
|
|
padding: 25px; |
|
|
border-radius: var(--border-radius); |
|
|
box-shadow: var(--card-shadow); |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.insights-container { |
|
|
background: white; |
|
|
padding: 25px; |
|
|
border-radius: var(--border-radius); |
|
|
box-shadow: var(--card-shadow); |
|
|
margin-bottom: 30px; |
|
|
border-left: 5px solid var(--primary-color); |
|
|
} |
|
|
|
|
|
.insights-container h3 { |
|
|
color: var(--primary-color); |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
display: none; |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
border-radius: var(--border-radius); |
|
|
box-shadow: var(--card-shadow); |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.btn-custom { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 8px 16px; |
|
|
border-radius: 4px; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-custom:hover { |
|
|
background-color: var(--secondary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
border-radius: 4px; |
|
|
border: 1px solid #ddd; |
|
|
padding: 8px 12px; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
border-color: var(--primary-color); |
|
|
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25); |
|
|
} |
|
|
|
|
|
label { |
|
|
font-weight: 500; |
|
|
margin-bottom: 8px; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
#barChart, #lineChart, #boxChart { |
|
|
width: 100%; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
#aiInsights { |
|
|
line-height: 1.8; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.alert { |
|
|
border-radius: var(--border-radius); |
|
|
padding: 15px 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.spinner-border { |
|
|
width: 3rem; |
|
|
height: 3rem; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
#marketData { |
|
|
height: 600px; |
|
|
overflow-y: scroll; |
|
|
} |
|
|
|
|
|
.table-responsive{ |
|
|
height: 600px; |
|
|
} |
|
|
|
|
|
.insights-header { |
|
|
background: #4CAF50; |
|
|
color: white; |
|
|
padding: 15px 20px; |
|
|
border-radius: 8px 8px 0 0; |
|
|
margin: -25px -25px 20px -25px; |
|
|
} |
|
|
|
|
|
.insights-header h3 { |
|
|
margin: 0; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.insight-section { |
|
|
background: #f8f9fa; |
|
|
border-radius: 8px; |
|
|
padding: 20px; |
|
|
margin-bottom: 20px; |
|
|
border-left: 4px solid #4CAF50; |
|
|
} |
|
|
|
|
|
.insight-section h4 { |
|
|
color: #2E7D32; |
|
|
margin-bottom: 15px; |
|
|
font-size: 1.2rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.insight-card { |
|
|
background: white; |
|
|
border-radius: 6px; |
|
|
padding: 15px; |
|
|
margin-bottom: 15px; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.insight-card h5 { |
|
|
color: #1B5E20; |
|
|
margin-bottom: 10px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.insight-list { |
|
|
list-style: none; |
|
|
padding-left: 0; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.insight-list li { |
|
|
position: relative; |
|
|
padding-left: 20px; |
|
|
margin-bottom: 8px; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.insight-list li:before { |
|
|
content: "•"; |
|
|
color: #4CAF50; |
|
|
font-size: 1.2em; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: -2px; |
|
|
} |
|
|
|
|
|
.price-highlight { |
|
|
color: #2E7D32; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.percentage-up { |
|
|
color: #2E7D32; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.percentage-down { |
|
|
color: #c62828; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.action-box { |
|
|
background: #E8F5E9; |
|
|
border-radius: 6px; |
|
|
padding: 15px; |
|
|
margin-top: 20px; |
|
|
border: 1px dashed #4CAF50; |
|
|
} |
|
|
|
|
|
.action-box h5 { |
|
|
color: #2E7D32; |
|
|
margin-bottom: 10px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.action-list { |
|
|
list-style: none; |
|
|
padding-left: 0; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.action-list li { |
|
|
position: relative; |
|
|
padding-left: 25px; |
|
|
margin-bottom: 8px; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.action-list li:before { |
|
|
content: "✓"; |
|
|
color: #4CAF50; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.insights-container { |
|
|
padding: 15px; |
|
|
} |
|
|
|
|
|
.insights-header { |
|
|
padding: 12px 15px; |
|
|
margin: -15px -15px 15px -15px; |
|
|
} |
|
|
|
|
|
.insight-section { |
|
|
padding: 15px; |
|
|
} |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 10px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.form-row { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.btn-custom { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.insights-container { |
|
|
padding: 15px; |
|
|
} |
|
|
|
|
|
#aiInsights { |
|
|
font-size: 1rem; |
|
|
} |
|
|
} |
|
|
.language-selector { |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.lang-btn { |
|
|
font-size: 0.85rem; |
|
|
padding: 0.25rem 0.5rem; |
|
|
margin: 0 2px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.lang-btn.active { |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.current-language-indicator { |
|
|
font-size: 0.8rem; |
|
|
color: #555; |
|
|
margin: 5px 0 15px 0; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.language-selector .btn-group { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.lang-btn { |
|
|
margin: 2px; |
|
|
flex: 0 0 auto; |
|
|
} |
|
|
} |
|
|
select { |
|
|
max-height: 200px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>Crop Market Analysis</h1> |
|
|
</div> |
|
|
|
|
|
<div class="form-section"> |
|
|
<form id="filterForm"> |
|
|
<div class="form-row"> |
|
|
<div class="form-group col-md-3"> |
|
|
<label for="state">State</label> |
|
|
<select class="form-control" id="state" name="state"> |
|
|
<option value="">Select State</option> |
|
|
{% for state in states %} |
|
|
<option value="{{ state }}">{{ state }}</option> |
|
|
{% endfor %} |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group col-md-3"> |
|
|
<label for="district">District</label> |
|
|
<select class="form-control" id="district" name="district" disabled> |
|
|
<option value="">Select District</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group col-md-3"> |
|
|
<label for="market">Market</label> |
|
|
<select class="form-control" id="market" name="market" disabled> |
|
|
<option value="">Select Market</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group col-md-3"> |
|
|
<label for="commodity">Commodity</label> |
|
|
<select class="form-control" id="commodity" name="commodity" disabled> |
|
|
<option value="">Select Commodity</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="language-selector"> |
|
|
<div class="card"> |
|
|
<div class="card-body"> |
|
|
<h5 class="card-title">Select Language for AI Insights</h5> |
|
|
<div class="btn-group" role="group" aria-label="Language selection"> |
|
|
<button type="button" class="btn btn-sm lang-btn active" data-lang="English">English</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Hindi">हिन्दी</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Tamil">தமிழ்</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Telugu">తెలుగు</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Marathi">मराठी</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Bengali">বাংলা</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Gujarati">ગુજરાતી</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Kannada">ಕನ್ನಡ</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Malayalam">മലയാളം</button> |
|
|
<button type="button" class="btn btn-sm lang-btn" data-lang="Punjabi">ਪੰਜਾਬੀ</button> |
|
|
</div> |
|
|
<div class="current-language-indicator mt-2"> |
|
|
Current language: <span id="currentLanguage">English</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="loading" id="loadingIndicator"> |
|
|
<div class="spinner-border" role="status"> |
|
|
<span class="sr-only">Loading...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<div id="barChart"></div> |
|
|
<div id="lineChart"></div> |
|
|
<div id="boxChart"></div> |
|
|
</div> |
|
|
<div class="market-data-container"> |
|
|
<div class="row"> |
|
|
<div class="col-md-12 mb-4"> |
|
|
<div class="card"> |
|
|
<div class="card-header"> |
|
|
<h4>Market Statistics</h4> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<div class="row"> |
|
|
<div class="col-md-3"> |
|
|
<div class="stat-item"> |
|
|
<h6>Total Commodities</h6> |
|
|
<span id="totalCommodities"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-3"> |
|
|
<div class="stat-item"> |
|
|
<h6>Average Price</h6> |
|
|
<span id="avgPrice"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-3"> |
|
|
<div class="stat-item"> |
|
|
<h6>Price Range</h6> |
|
|
<span id="priceRange"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-3"> |
|
|
<div class="stat-item"> |
|
|
<h6>Total Markets</h6> |
|
|
<span id="totalMarkets"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
<div class="col-md-6 mb-4"> |
|
|
<div class="card"> |
|
|
<div class="card-header"> |
|
|
<h4>Top 5 Cheapest Crops</h4> |
|
|
</div> |
|
|
<div class="card-body" id="cheapestCrops"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-6 mb-4"> |
|
|
<div class="card"> |
|
|
<div class="card-header"> |
|
|
<h4>Top 5 Costliest Crops</h4> |
|
|
</div> |
|
|
<div class="card-body" id="costliestCrops"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card mb-4"> |
|
|
<div class="card-header"> |
|
|
<h4>Market Data</h4> |
|
|
</div> |
|
|
<div class="card-body" id="marketData"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="insights-container"> |
|
|
<div id="aiInsights"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
|
<script> |
|
|
function showLoading() { |
|
|
$('#loadingIndicator').show(); |
|
|
} |
|
|
|
|
|
function hideLoading() { |
|
|
$('#loadingIndicator').hide(); |
|
|
} |
|
|
|
|
|
function enableSelect(selectId) { |
|
|
$(`#${selectId}`).prop('disabled', false); |
|
|
} |
|
|
|
|
|
function disableSelect(selectId) { |
|
|
$(`#${selectId}`).prop('disabled', true); |
|
|
} |
|
|
|
|
|
function updateContent() { |
|
|
showLoading(); |
|
|
const formData = new FormData($('#filterForm')[0]); |
|
|
|
|
|
$.ajax({ |
|
|
url: '/filter_data', |
|
|
method: 'POST', |
|
|
data: formData, |
|
|
processData: false, |
|
|
contentType: false, |
|
|
success: function(response) { |
|
|
if (response.success) { |
|
|
if (response.plots.bar) $('#barChart').html(response.plots.bar); |
|
|
if (response.plots.line) $('#lineChart').html(response.plots.line); |
|
|
if (response.plots.box) $('#boxChart').html(response.plots.box); |
|
|
|
|
|
$('#totalCommodities').text(response.market_stats.total_commodities); |
|
|
$('#avgPrice').text(response.market_stats.avg_modal_price); |
|
|
$('#priceRange').text(response.market_stats.price_range); |
|
|
$('#totalMarkets').text(response.market_stats.total_markets); |
|
|
|
|
|
$('#marketData').html(response.market_html); |
|
|
$('#cheapestCrops').html(response.cheapest_html); |
|
|
$('#costliestCrops').html(response.costliest_html); |
|
|
|
|
|
if (response.hasStateDistrict) { |
|
|
$('.insights-container').show(); |
|
|
$('#aiInsights').html(response.insights); |
|
|
} else { |
|
|
$('.insights-container').hide(); |
|
|
$('#aiInsights').html(''); |
|
|
} |
|
|
} else { |
|
|
alert('Please select both state and district to view analysis'); |
|
|
} |
|
|
hideLoading(); |
|
|
}, |
|
|
error: function() { |
|
|
alert('Error loading data'); |
|
|
hideLoading(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
$('#state').change(function() { |
|
|
const state = $(this).val(); |
|
|
$('#district, #market, #commodity').html('<option value="">Select</option>').prop('disabled', true); |
|
|
|
|
|
if (state) { |
|
|
showLoading(); |
|
|
$.post('/get_districts', { state: state }, function(districts) { |
|
|
$('#district').html('<option value="">Select District</option>'); |
|
|
districts.forEach(district => { |
|
|
$('#district').append(`<option value="${district}">${district}</option>`); |
|
|
}); |
|
|
enableSelect('district'); |
|
|
hideLoading(); |
|
|
}); |
|
|
} |
|
|
updateContent(); |
|
|
}); |
|
|
|
|
|
$('#district').change(function() { |
|
|
const district = $(this).val(); |
|
|
$('#market, #commodity').html('<option value="">Select</option>').prop('disabled', true); |
|
|
|
|
|
if (district) { |
|
|
showLoading(); |
|
|
$.post('/get_markets', { district: district }, function(markets) { |
|
|
$('#market').html('<option value="">Select Market</option>'); |
|
|
markets.forEach(market => { |
|
|
$('#market').append(`<option value="${market}">${market}</option>`); |
|
|
}); |
|
|
enableSelect('market'); |
|
|
hideLoading(); |
|
|
}); |
|
|
} |
|
|
updateContent(); |
|
|
}); |
|
|
|
|
|
$('#market').change(function() { |
|
|
const market = $(this).val(); |
|
|
$('#commodity').html('<option value="">Select</option>').prop('disabled', true); |
|
|
|
|
|
if (market) { |
|
|
showLoading(); |
|
|
$.post('/get_commodities', { market: market }, function(commodities) { |
|
|
$('#commodity').html('<option value="">Select Commodity</option>'); |
|
|
commodities.forEach(commodity => { |
|
|
$('#commodity').append(`<option value="${commodity}">${commodity}</option>`); |
|
|
}); |
|
|
enableSelect('commodity'); |
|
|
hideLoading(); |
|
|
}); |
|
|
} |
|
|
updateContent(); |
|
|
}); |
|
|
|
|
|
$('#commodity').change(function() { |
|
|
updateContent(); |
|
|
}); |
|
|
|
|
|
$(document).ready(function() { |
|
|
$('.insights-container').hide(); |
|
|
updateContent(); |
|
|
}); |
|
|
|
|
|
|
|
|
let currentLanguage = "English"; |
|
|
|
|
|
$('.lang-btn').click(function() { |
|
|
$('.lang-btn').removeClass('active'); |
|
|
$(this).addClass('active'); |
|
|
currentLanguage = $(this).data('lang'); |
|
|
$('#currentLanguage').text(currentLanguage); |
|
|
|
|
|
|
|
|
if ($('#state').val() && $('#district').val()) { |
|
|
updateContent(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateContent() { |
|
|
showLoading(); |
|
|
const formData = new FormData($('#filterForm')[0]); |
|
|
|
|
|
|
|
|
formData.append('language', currentLanguage); |
|
|
|
|
|
$.ajax({ |
|
|
url: '/filter_data', |
|
|
method: 'POST', |
|
|
data: formData, |
|
|
processData: false, |
|
|
contentType: false, |
|
|
success: function(response) { |
|
|
if (response.success) { |
|
|
if (response.plots.bar) $('#barChart').html(response.plots.bar); |
|
|
if (response.plots.line) $('#lineChart').html(response.plots.line); |
|
|
if (response.plots.box) $('#boxChart').html(response.plots.box); |
|
|
|
|
|
$('#totalCommodities').text(response.market_stats.total_commodities); |
|
|
$('#avgPrice').text(response.market_stats.avg_modal_price); |
|
|
$('#priceRange').text(response.market_stats.price_range); |
|
|
$('#totalMarkets').text(response.market_stats.total_markets); |
|
|
|
|
|
$('#marketData').html(response.market_html); |
|
|
$('#cheapestCrops').html(response.cheapest_html); |
|
|
$('#costliestCrops').html(response.costliest_html); |
|
|
|
|
|
if (response.hasStateDistrict) { |
|
|
$('.insights-container').show(); |
|
|
$('#aiInsights').html(response.insights); |
|
|
} else { |
|
|
$('.insights-container').hide(); |
|
|
$('#aiInsights').html(''); |
|
|
} |
|
|
} else { |
|
|
alert('Please select both state and district to view analysis'); |
|
|
} |
|
|
hideLoading(); |
|
|
}, |
|
|
error: function() { |
|
|
alert('Error loading data'); |
|
|
hideLoading(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
