|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
|
|
<meta name="theme-color" content="#003400"> |
|
|
<title>Crops Info Dashboard</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
.custom-font { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
font-size: 2.5rem; |
|
|
color: #003400; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #f4f4f9; |
|
|
} |
|
|
|
|
|
|
|
|
.navbar { |
|
|
background-color: #0d1025; |
|
|
padding: 0.5rem 1rem; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 1000; |
|
|
min-height: 65px; |
|
|
} |
|
|
|
|
|
.navbar-brand { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo-img { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.navbar-toggler { |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
padding: 0.25rem 0.75rem; |
|
|
} |
|
|
|
|
|
.navbar-toggler:focus { |
|
|
box-shadow: none; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.navbar-collapse { |
|
|
flex-grow: 0; |
|
|
} |
|
|
|
|
|
.navbar-nav { |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: white !important; |
|
|
padding: 0.5rem 1rem !important; |
|
|
margin: 0 0.2rem; |
|
|
border-radius: 5px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.brand-text { |
|
|
color: #737373; |
|
|
margin-left: 1rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 991px) { |
|
|
.navbar-collapse { |
|
|
background-color: #0d1025; |
|
|
padding: 1rem; |
|
|
border-radius: 0 0 10px 10px; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
right: 0; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.brand-text { |
|
|
margin: 0.5rem 0; |
|
|
text-align: center; |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.dashboard-card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
|
margin-bottom: 2rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.dashboard-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 6px 12px rgba(0,0,0,0.15); |
|
|
} |
|
|
|
|
|
|
|
|
.chart-desc { |
|
|
padding: 2rem; |
|
|
background: linear-gradient(145deg, #ffffff, #f8f9fa); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
.chart-desc h3 { |
|
|
color: #003400; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.chart-desc p { |
|
|
margin-bottom: 1rem; |
|
|
padding-left: 1.5rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.chart-desc i { |
|
|
color: #003400; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
iframe { |
|
|
width: 100%; |
|
|
min-height: 600px; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1); |
|
|
border: none; |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background: linear-gradient(to right, #0d1025, #1a1a2e); |
|
|
padding: 2rem 0; |
|
|
margin-top: 3rem; |
|
|
} |
|
|
|
|
|
footer p { |
|
|
margin: 0.5rem 0; |
|
|
opacity: 0.9; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark"> |
|
|
<div class="container-fluid"> |
|
|
<a href="/" class="navbar-brand"> |
|
|
<img src="data:image/png;base64,{{ images['logo'] }}" alt="AgroAssist Logo" class="logo-img"> |
|
|
</a> |
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"> |
|
|
<span class="navbar-toggler-icon"></span> |
|
|
</button> |
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="/"><i class="fas fa-house"></i> Home</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="/recommendation"><i class="fas fa-seedling"></i> Recommend</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="/info"><i class="fas fa-chart-bar"></i> Statistics</a> |
|
|
</li> |
|
|
</ul> |
|
|
<span class="navbar-text brand-text">AgroAssist</span> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="container mt-4"> |
|
|
<div class="chart-desc"> |
|
|
<h3 class="text-center">Charts Description</h3> |
|
|
<p><i class="fas fa-chart-bar"></i><strong>Nitrogen, Potassium, and Phosphorus of Crops:</strong> This chart shows the nutrient levels of various crops.</p> |
|
|
<p><i class="fas fa-thermometer-half"></i><strong>Temperature and Humidity of Crops:</strong> This plot visualizes the optimal temperature and humidity for different crops.</p> |
|
|
<p><i class="fas fa-flask"></i><strong>Average pH by Crop Label:</strong> This chart displays the average pH values for crops, helping with soil suitability.</p> |
|
|
</div> |
|
|
</div> |
|
|
<br> |
|
|
|
|
|
|
|
|
<div class="container mt-5"> |
|
|
<h1 class="text-center custom-font">Crops Information Dashboard</h1> |
|
|
<iframe title="crop22_powerbi" width="100%" height="600px" src="https://app.powerbi.com/view?r=eyJrIjoiYzc4YTM2NTMtZjZmNi00NDAzLTg0MzktZTY3YjQ0NzVkNTYzIiwidCI6IjBkMDRhNmQxLWFlNDctNGZjZS04MTgxLWMxYTQwNzI5MTNiYiJ9" frameborder="0" allowfullscreen="true"></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white text-center py-3 mt-5"> |
|
|
<p>© 2024-25 AgroAssist. All rights reserved.</p> |
|
|
<p> created by Gunjankumar Choudhari</p> |
|
|
</footer> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
