Skip to content

Fix: Weather Page Missing Navigation & Chatbot Widget Icon (#689) #768

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

Merged
omroy07 merged 4 commits into from
Jan 13, 2026
Merged

Fix: Weather Page Missing Navigation & Chatbot Widget Icon (#689) #768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3c3303a
add chatbot icon in weather page
Khushi5155 Jan 12, 2026
340cc4b
add navbar and back to home button
Khushi5155 Jan 12, 2026
69dd4d0
add
Khushi5155 Jan 12, 2026
f2a51ab
Merge branch 'main' into fix/icon
Khushi5155 Jan 12, 2026
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
124 changes: 90 additions & 34 deletions weather.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,111 @@
html,
body {


* {
margin: 0;
padding: 0;
overflow-x: hidden;
box-sizing: border-box;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
transition: background-color 0.3s ease, color 0.3s ease,
border-color 0.3s ease;
}

:root {
--primary-green: #2e7d32;
--light-green: #4caf50;
--dark-green: #2e7d32;
--accent-green: #4caf50;
--bg-primary: #f0f4f7;
--bg-secondary: #ffffff;
--text-primary: #333;
--text-secondary: #616161;
--border-light: #e0e0e0;
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

/* Existing styles */
body {
margin: 0 auto;
padding: 0;
background-image: url("https://www.transparenttextures.com/patterns/clean-textile.png");
background-color: var(--bg-secondary, #f0f4f7);
color: var(--text-primary, #333);
display: flex;
flex-direction: column;
min-height: 100vh;
line-height: 1.6;
}

/* Weather card */
.box {
background-color: #ceecf7;
opacity: 1;
width: 60%;
max-width: 1100px;
height: 600px;
margin: 50px auto;
/* remove left margin that caused overflow */
/* margin-left: 22%; */
header {
background: linear-gradient(to right, #2e7d32, #4caf50);
color: white;
padding: 1.5rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
}

border-radius: 20px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.389);
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
flex-direction: row;
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
justify-content: space-between;
align-items: center;
}

/* Make sure inner content never exceeds box */
.weather-box {
box-sizing: border-box;
.logo {
display: flex;
align-items: center;
gap: 12px;
}

.logo i {
font-size: 2rem;
color: white;
animation: gentle-bounce 3s ease-in-out infinite;
}

@keyframes gentle-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}

/* Left side */
.box .left {
.logo h1 {
font-size: 1.8rem;
font-weight: 600;
color: white;
}

.nav-back {
color: white;
background-color: rgba(255, 255, 255, 0.2);
padding: 10px 20px;
border-radius: 50px;
font-size: 1rem;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
border: none;
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 400px;
max-width: 100%;
height: 100%;
align-items: center;
gap: 8px;
}

.box .left .main {
text-align: center;
.nav-back:hover {
background-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}

body{
margin: 0 auto;
padding: 0;
background-image: url("https://www.transparenttextures.com/patterns/clean-textile.png");
display: flex;
flex-direction: column;
}

.box .left .main input {
Expand Down
218 changes: 118 additions & 100 deletions weather.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,50 @@
<!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="weather.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="weather.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>

<!-- Font Awesome (same as index.html for robot icon) -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
>

<!-- Favicon -->
<link rel="icon" type="image/png" href="images/logo.png">
<title>Weather Check System</title>
</head>
<body>
<div class="box weather-box">
<div class="left general-data">
<div class="main">
<input
type="text"
id="cityInput"
placeholder="Enter a city (by default, New Delhi)"
>
<br>
<button id="search">Search</button>
</div>
<link
href="https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<!-- Favicon -->
<link rel="icon" type="image/png" href="images/logo.png" />
<title>Weather Check System</title>
</head>
<body>
<header>
<div class="header-content">
<div class="logo">
<i class="fas fa-seedling"></i>
<h1>AgriTech</h1>
</div>
<div style="display: flex; gap: 1rem; align-items: center;">


<div class="general">
<h3 id="city">City</h3>
<h4 id="region">Region</h4>
<h5 id="country">Country</h5>
<br><br>
<h6 id="description">mostly ---</h6>
<p id="temperature">40</p>
<!-- image is added in "p" dynamically -->
<a href="index.html" class="nav-back">
<i class="fas fa-arrow-left"></i> Back to Home
</a>
</div>
</div>
</div>

<div class="right predictions-data">
<div class="hourly">
<div>
<p>Hourly forecast</p>
</header>
<div class="box weather-box">
<div class="left general-data">
<div class="main">
<input
type="text"
id="cityInput"
placeholder="Enter a city (by default, New Delhi)"
/>
<br />
<button id="search">Search</button>
</div>
<div class="hour" id="hour">
<!-- cards are entered dynamically -->
Expand All @@ -65,60 +60,83 @@ <h6 id="description">mostly ---</h6>
</div>
</div>
</div>
</div>

<!-- Footer -->
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-brand">
<img src="images/logo.png" alt="AgriTech logo" class="footer-logo">
<h3>AgriTech</h3>
<p>Empowering India's Farming Future</p>
<div class="social-media">
<a href="https://instagram.com" target="_blank" aria-label="Follow us on Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://github.com/omroy07" target="_blank" aria-label="View our GitHub repositories">
<i class="fab fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/om-roy-3b809628a/"
target="_blank"
aria-label="Connect with us on LinkedIn"
>
<i class="fab fa-linkedin"></i>
</a>
<!-- Footer -->
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-brand">
<img src="images/logo.png" alt="AgriTech logo" class="footer-logo" />
<h3>AgriTech</h3>
<p>Empowering India's Farming Future</p>
<div class="social-media">
<a
href="https://instagram.com"
target="_blank"
aria-label="Follow us on Instagram"
>
<i class="fab fa-instagram"></i>
</a>
<a
href="https://github.com/omroy07"
target="_blank"
aria-label="View our GitHub repositories"
>
<i class="fab fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/om-roy-3b809628a/"
target="_blank"
aria-label="Connect with us on LinkedIn"
>
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div class="footer-links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="main.html">Dashboard</a></li>
<li><a href="feed-back.html">Feedback</a></li>
<li><a href="chat.html">AI Assistant</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Tools</h4>
<ul>
<li>
<a href="Crop Recommendation/templates/index.html"
>Crop Recommendation</a
>
</li>
<li>
<a
href="Crop Yield Prediction/crop_yield_app/templates/index.html"
>Yield Prediction</a
>
</li>
<li>
<a href="Disease prediction/template/index.html"
>Disease Detector</a
>
</li>
<li>
<a href="Crop_Planning/templates/cropplan.html">Crop Planner</a>
</li>
</ul>
</div>
</div>

<div class="footer-links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="main.html">Dashboard</a></li>
<li><a href="feed-back.html">Feedback</a></li>
<li><a href="chat.html">AI Assistant</a></li>
</ul>
</div>

<div class="footer-links">
<h4>Tools</h4>
<ul>
<li><a href="Crop Recommendation/templates/index.html">Crop Recommendation</a></li>
<li><a href="Crop Yield Prediction/crop_yield_app/templates/index.html">Yield Prediction</a></li>
<li><a href="Disease prediction/template/index.html">Disease Detector</a></li>
<li><a href="Crop_Planning/templates/cropplan.html">Crop Planner</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">© 2025 AgriTech • Made for farmers</div>
</footer>

<!-- Floating Chatbot Button (same behavior as index.html) -->
<a href="chat.html" id="chatbotBtn" title="Chat with us" aria-label="AI Assistant">
<i class="fas fa-robot"></i>
</a>

<script src="weather.js"></script>
</body>
<div class="footer-bottom">© 2025 AgriTech • Made for farmers</div>
</footer>
<!-- Floating Chatbot Button -->
<a
href="chat.html"
id="chatbotBtn"
title="Chat with us"
aria-label="AI Assistant"
>
<i class="fas fa-robot"></i>
</a>
<script src="weather.js"></script>
</body>
</html>
Loading