From d7b742608de32a9fe89c0ec0e736dd51da8c68ad Mon Sep 17 00:00:00 2001 From: Pratyush Jha Date: Mon, 12 Jan 2026 21:26:13 +0530 Subject: [PATCH] Redesign Farmer Connection header to match AgriTech navbar --- farmer.css | 206 ++++++++++++++++++++++++++++++++++++++++------------ farmer.html | 49 ++++++++----- 2 files changed, 190 insertions(+), 65 deletions(-) diff --git a/farmer.css b/farmer.css index 712dc8ca..29c5bec2 100644 --- a/farmer.css +++ b/farmer.css @@ -77,82 +77,196 @@ body { } /* ========================= - HEADER + HEADER & NAVBAR ========================= */ -/* ======================== - HEADER SECTION -======================== */ header { - background: linear-gradient(135deg, #2ecc71, #27ae60); - color: white; - padding: 2.5rem 0; - border-bottom-left-radius: 24px; - border-bottom-right-radius: 24px; - box-shadow: 0 4px 20px rgba(0,0,0,0.1); + background: linear-gradient(135deg, #f8fdf9, #e8f5e9); + padding: 0; + border-bottom: 1px solid var(--border-color); } -header .container { - max-width: 1100px; - margin: 0 auto; - padding: 0 1.5rem; +[data-theme="dark"] header { + background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); } -.header-content { +/* Navbar - Horizontal Layout */ +.navbar { display: flex; - flex-direction: column; align-items: center; - gap: 1rem; - text-align: center; + justify-content: space-between; + padding: 1rem 2rem; + background: var(--bg-primary); + border-bottom: 1px solid var(--border-color); } -.header-content h1 { - font-size: clamp(2.2rem, 5vw, 3.5rem); - font-weight: 800; +/* Logo + Brand */ +.nav-brand { display: flex; align-items: center; - gap: 0.6rem; + gap: 0.75rem; } -.header-subtitle { - font-size: 1.1rem; - font-weight: 400; - opacity: 0.9; +.nav-logo { + width: 40px; + height: 40px; + border-radius: 8px; + object-fit: cover; } -/* ======================== - BUTTON GROUP (Toggle + Back) -======================== */ -.header-content > div { +.brand-name { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-green); +} + +/* Navigation Menu */ +.nav-menu { display: flex; - gap: 1rem; - margin-top: 1rem; + align-items: center; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-link { + color: var(--text-primary); + text-decoration: none; + font-weight: 500; + font-size: 1rem; + transition: color 0.3s ease; + position: relative; +} + +.nav-link:hover { + color: var(--primary-green); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: var(--primary-green); + transition: width 0.3s ease; } +.nav-link:hover::after { + width: 100%; +} -/* ======================== - BACK BUTTON -======================== */ -.back-button { +/* Theme Toggle Button */ +.nav-actions { display: flex; align-items: center; - gap: 6px; - background-color:#334155; - border: 1px solid rgba(255, 255, 255, 0.3); +} + +.theme-toggle { + display: flex; + align-items: center; + gap: 8px; + background: var(--bg-tertiary); + border: 1px solid var(--border-color); border-radius: 50px; - padding: 8px 14px; - color: black; - text-decoration: none; + padding: 10px 18px; + color: var(--text-primary); font-weight: 600; - font-size: 0.95rem; + font-size: 0.9rem; + cursor: pointer; transition: all 0.3s ease; - backdrop-filter: blur(6px); } -.back-button:hover { - background: rgba(255, 255, 255, 0.3); +.theme-toggle:hover { + background: var(--light-green); + border-color: var(--accent-green); transform: translateY(-2px); } +.theme-toggle i { + font-size: 1.1rem; +} + +/* Hero Section Below Navbar */ +.header-hero { + padding: 4rem 2rem 3rem; + text-align: center; + max-width: 900px; + margin: 0 auto; +} + +.hero-title { + font-size: clamp(2rem, 5vw, 2.8rem); + font-weight: 800; + color: var(--text-primary); + margin-bottom: 1rem; + line-height: 1.2; +} + +.hero-subtitle { + font-size: 1.1rem; + color: var(--text-secondary); + line-height: 1.6; + max-width: 700px; + margin: 0 auto; +} + +/* ========================= + RESPONSIVE NAVBAR +========================= */ +@media (max-width: 768px) { + .navbar { + flex-wrap: wrap; + gap: 1rem; + padding: 1rem; + } + + .nav-menu { + order: 3; + width: 100%; + justify-content: center; + gap: 1.5rem; + padding-top: 1rem; + border-top: 1px solid var(--border-color); + } + + .nav-actions { + margin-left: auto; + } + + .header-hero { + padding: 2.5rem 1.5rem 2rem; + } + + .hero-title { + font-size: 1.75rem; + } + + .hero-subtitle { + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .nav-menu { + flex-direction: column; + gap: 0.75rem; + } + + .theme-toggle .theme-text { + display: none; + } + + .theme-toggle { + padding: 10px; + width: 40px; + height: 40px; + justify-content: center; + } +} + + /* ========================= NAV TABS ========================= */ diff --git a/farmer.html b/farmer.html index 9d610988..e887b308 100644 --- a/farmer.html +++ b/farmer.html @@ -17,25 +17,36 @@
-
-
-

Farmer Connection

-

- Connecting farmers with buyers across India -

-
- - - Back to Main - -
-
-
-
+ + +
+

Optimal Crop yield prediction 🎯

+

+ Based on your provided soil and climate data, the following crop is highly recommended + for maximum yield and sustainability. +

+
+ +