<!
doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="[Link]
[Link]"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">
<link rel="stylesheet"
href="[Link]
<link rel="stylesheet"
href="[Link]
<link href="[Link]
family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<title>{% block pagetitle %}Home{% endblock pagetitle %}</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: black;
background-image: url('[Link]
1661962692059-55d5a4319814?q=80&w=1374&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
}
.navbar {
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
}
.navbar-brand:hover {
background-color: lightgreen;
transition: 0.5s;
}
.navbar-nav .nav-link {
color: white;
font-size: 18px;
}
.navbar-nav .nav-link:hover {
color: lightgreen;
}
.welcome-message {
color: white;
font-size: 18px;
margin-right: 20px;
}
label {
color: white;
padding: 0.5rem;
font-family: sans-serif;
border-radius: 0.3rem;
cursor: pointer;
margin-top: 1rem;
}
.footer-basic {
padding: 50px 30px 50px;
opacity: 20%;
color: white;
}
.footer-basic ul {
padding: 0;
list-style: none;
text-align: center;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
}
.footer-basic li {
padding: 0 10px;
}
.footer-basic ul a {
color: inherit;
text-decoration: none;
opacity: 0.8;
}
.footer-basic ul a:hover {
opacity: 1;
}
.footer-basic .social {
text-align: center;
padding-bottom: 25px;
}
.footer-basic .social > a {
font-size: 24px;
width: 40px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
border-radius: 50%;
border: 1px solid #ccc;
margin: 0 8px;
color: inherit;
opacity: 0.75;
}
.footer-basic .social > a:hover {
opacity: 0.9;
}
.footer-basic .copyright {
margin-top: 15px;
text-align: center;
font-size: 13px;
color: #aaa;
margin-bottom: 0;
}
div h1 {
color: white;
}
div button {
color: white;
background-color: rgb(1, 87, 1);
}
div a {
color: white;
text-decoration: none;
}
#weather-container {
max-width: 400px;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
position: fixed;
top: 100px;
left: 20px;
z-index: 1000;
}
#weather-container h2 {
margin-bottom: 20px;
color: #333;
}
#result {
margin-top: 20px;
color: #333;
}
#result h3 {
margin-bottom: 10px;
}
#result p {
margin: 10px 0;
background-color:whitesmoke;
}
#result img {
margin-top: 10px;
}
.project-info {
max-width: 600px;
margin: auto;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
margin-top: 100px;
}
.project-info h2 {
color: #333;
}
.project-info p {
color: #333;
font-size: 18px;
}
.icon-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.icon-container a {
margin: 0 10px;
color: #007bff;
font-size: 24px;
transition: color 0.3s ease;
}
.icon-container a:hover {
color: #0056b3;
}
.carousel-container {
width: 80%;
overflow: hidden;
margin: auto;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background: white;
margin-top: 50px;
}
.carousel {
display: flex;
gap: 20px;
width: max-content;
animation: scroll 12s linear infinite;
}
.slide {
flex: 0 0 auto;
width: 300px;
height: 200px;
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.description {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 10px;
font-size: 14px;
text-align: center;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.carousel-container:hover .carousel {
animation-play-state: paused;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand fw-bolder" href="{{ url_for('base') }}">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link fw-bolder"
href="{{ url_for('ai_engine_page') }}">AI Engine</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder"
href="{{ url_for('chatbot') }}">Chatbot</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder"
href="{{ url_for('market') }}">Supplements</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder" href="{{ url_for('crop_form') }}">Crop
Recommendation</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder"
href="{{ url_for('farmer_dashboard') }}">Farmer Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder"
href="{{ url_for('govr_schemes') }}">Government Schemes</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder" href="{{ url_for('post_work') }}">Post
Work</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder" href="{{ url_for('contact') }}">Contact
Us</a>
</li>
</ul>
{% if [Link]('email') %}
<span class="welcome-message">Welcome, {{ [Link]('email')
}}</span>
<a href="{{ url_for('logout') }}" class="btn btn-danger">Logout</a>
{% endif %}
</div>
</div>
</nav>
{% block body %}
{% if [Link] == 'base' %}
<!-- Real-Time Weather Section -->
<div id="weather-container">
<h2>Real-Time Weather</h2>
<div id="result"></div>
</div>
{% endif %}
{% endblock body %}
<!-- Project Information Section -->
<div class="project-info">
<h2>About Our Project</h2>
<p>Welcome to our agricultural assistance platform. Our project aims to
provide farmers with the tools and information they need to optimize their farming
operations. From real-time weather updates to crop recommendations and government
schemes, we offer a comprehensive suite of services to support sustainable
agriculture.</p>
<div class="icon-container">
<a href="{{ url_for('ai_engine_page') }}" title="AI Engine"><i class="ion-
ios-gear-outline"></i></a>
<a href="{{ url_for('chatbot') }}" title="Chatbot"><i class="ion-ios-
chatboxes-outline"></i></a>
<a href="{{ url_for('market') }}" title="Supplements"><i class="ion-ios-
cart-outline"></i></a>
<a href="{{ url_for('crop_form') }}" title="Crop Recommendation"><i
class="ion-ios-leaf-outline"></i></a>
<a href="{{ url_for('farmer_dashboard') }}" title="Farmer Dashboard"><i
class="ion-ios-person-outline"></i></a>
<a href="{{ url_for('govr_schemes') }}" title="Government Schemes"><i
class="ion-ios-paper-outline"></i></a>
<a href="{{ url_for('post_work') }}" title="Post Work"><i class="ion-ios-
briefcase-outline"></i></a>
<a href="{{ url_for('contact') }}" title="Contact Us"><i class="ion-ios-
mail-outline"></i></a>
</div>
</div>
<!-- Smart Farming Carousel Section -->
<div class="carousel-container">
<div class="carousel">
<div class="slide">
<img src="[Link]
rs=1&pid=ImgDetMain" alt="Smart Farm">
<div class="description">IoT-Based Smart Farm</div>
</div>
<div class="slide">
<img
src="[Link]
public/sproject_teaser_image/[Link]?itok=SuizhEmV" alt="Disease Detection">
<div class="description">Crop Disease Detection</div>
</div>
<div class="slide">
<img src="[Link]
[Link]?
b=1&s=170667a&w=0&k=20&c=flFG6RBJzmjJFzjSTzggAGaFP9VHTF7z8pUHcsYMuXo="
alt="Marketplace">
<div class="description">Farmer Marketplace</div>
</div>
<div class="slide">
<img src="[Link]
w=600" alt="Weather AI">
<div class="description">Weather Prediction AI</div>
</div>
<!-- Duplicate slides to ensure continuous movement -->
<div class="slide">
<img src="[Link]
rs=1&pid=ImgDetMain" alt="Smart Farm">
<div class="description">IoT-Based Smart Farm</div>
</div>
<div class="slide">
<img src="[Link]
w=600" alt="Automated Watering">
<div class="description">Automated Watering System</div>
</div>
<div class="slide">
<img src="[Link]
w=600" alt="Disease Detection">
<div class="description">Crop Disease Detection</div>
</div>
<div class="slide">
<img src="[Link]
w=600" alt="Marketplace">
<div class="description">Farmer Marketplace</div>
</div>
<div class="slide">
<img src="[Link]
w=600" alt="Weather AI">
<div class="description">Weather Prediction AI</div>
</div>
</div>
</div>
<!-- Optional Footer -->
<!--
<div class="footer-basic">
<footer style="background-color: black;">
<ul class="list-inline">
<li class="list-inline-item"><a href="{{ url_for('base')
}}">Home</a></li>
<li class="list-inline-item"><a target="_blank"
href="[Link]
<li class="list-inline-item"><a target="_blank"
href="[Link]
<li class="list-inline-item"><a href="{{ url_for('ai_engine_page') }}">AI
Engine</a></li>
</ul>
<p class="copyright">Created by Your Name</p>
</footer>
</div>
-->
<script
src="[Link]
<script src="[Link]
js/[Link]"></script>
<script>
async function getWeather(lat, lon) {
const apiKey = "a427931455624645a85123100251403";
const url = `[Link]
{lat},${lon}`;
try {
const response = await fetch(url);
const data = await [Link]();
if ([Link]) {
[Link]("result").innerHTML = `<p>Location not
found!</p>`;
} else {
[Link]("result").innerHTML = `
<h3>${[Link]}, ${[Link]}</h3>
<p>Temperature: ${[Link].temp_c}°C</p>
<p>Condition: ${[Link]}</p>
<img src="${[Link]}" alt="Weather Icon">
`;
}
} catch (error) {
[Link]("result").innerHTML = `<p>Error fetching
data.</p>`;
}
}
function getLocation() {
if ([Link]) {
[Link](position => {
const lat = [Link];
const lon = [Link];
getWeather(lat, lon);
}, error => {
[Link]("result").innerHTML = `<p>Error getting
location: ${[Link]}</p>`;
});
} else {
[Link]("result").innerHTML = `<p>Geolocation is not
supported by this browser.</p>`;
}
}
// Automatically get weather on page load
[Link] = getLocation;
</script>
</body>
</html>