Skip to content

Replace the emoji-based feature cards in, Chat Interface Redesign #765

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

Open
nngeek195 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Replace the emoji-based feature cards in, Chat Interface Redesign #765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f16946b
Replace the emoji-based feature cards in
nngeek195 Jan 12, 2026
9c6b45a
Chat Interface Redesign
nngeek195 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
1,102 changes: 491 additions & 611 deletions chat.css
View file
Open in desktop

Large diffs are not rendered by default.

94 changes: 32 additions & 62 deletions chat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,47 +20,8 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="icon" type="image/png" href="images/logo.png" />
<link rel="stylesheet" href="chat.css" />
<link rel="stylesheet" href="theme.css" />
<style>
/* Added styles for light green color on specified text */

.chat-header h2 {
color: #22c55e !important; /* Force AgriTech Green */
text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Adds depth for better readability */
}

.logo h1 {
color: var(--light-green); /* Light green for AgriBot */
}

/* --- NEW STYLES FOR IMAGE UPLOAD --- */
#image-preview-container {
display: none;
padding: 10px;
background: rgba(34, 197, 94, 0.1);
border-radius: 8px;
margin: 0 20px 10px 20px;
align-items: center;
gap: 15px;
border: 1px dashed #22c55e;
}
.preview-wrapper { position: relative; display: inline-block; }
.preview-wrapper img { max-height: 60px; border-radius: 5px; border: 2px solid #22c55e; }
.remove-img {
position: absolute; top: -8px; right: -8px;
background: #ef4444; color: white; border: none;
border-radius: 50%; width: 20px; height: 20px;
cursor: pointer; font-size: 12px; display: flex;
align-items: center; justify-content: center;
}
.camera-btn {
background: none; border: none; color: #22c55e;
cursor: pointer; font-size: 1.3rem; margin-right: 10px;
transition: transform 0.2s;
}
.camera-btn:hover { transform: scale(1.1); }
</style>
<link rel="stylesheet" href="chat.css" />
</head>
<body>
<header>
Expand All @@ -69,7 +30,7 @@
<i class="fas fa-seedling"></i>
<h1>AgriBot</h1>
</div>
<div style="display: flex; gap: 1rem; align-items: center;">
<div class="header-actions">
<button class="theme-toggle" aria-label="Toggle dark/light mode">
<i class="fas fa-sun sun-icon"></i>
<i class="fas fa-moon moon-icon"></i>
Expand All @@ -85,55 +46,65 @@ <h1>AgriBot</h1>

<main>
<div id="chat-container">
<div class="chat-header">
<i class="fas fa-robot"></i>
<h2>Ask me anything about agriculture, crops, or farming techniques</h2>
<div class="chat-header glass-effect">
<div class="chat-header-info">
<i class="fas fa-robot"></i>
<div>
<h2>AgriTech Assistant</h2>
<span class="status-dot"></span> <small>Online</small>
</div>
</div>
</div>

<div id="chat-window">
<div class="welcome-message">
<h3><i class="fas fa-leaf"></i> Welcome to AgriTech Assistant!</h3>
<div class="welcome-icon-wrapper">
<i class="fas fa-leaf"></i>
</div>
<h3>Welcome to AgriTech Assistant!</h3>
<p>
I'm powered by Google Gemini AI to help with all your farming
questions.
Powered by Google Gemini AI. Ask me anything about agriculture, diagnosis, or farming techniques.
</p>

<div class="suggestions">
<div class="suggestion">Best crops for this season?</div>
<div class="suggestion">Organic pest control methods</div>
<div class="suggestion">Water conservation techniques</div>
<div class="suggestion">Soil health improvement</div>
<div class="suggestion">Organic pest control</div>
<div class="suggestion">Water conservation tips</div>
<div class="suggestion">Improve soil health</div>
</div>
</div>
</div>

<div id="image-preview-container">
<div class="preview-wrapper">
<img id="image-preview" src="">
<img id="image-preview" src="" alt="Image preview">
<button type="button" class="remove-img" onclick="clearImage()">×</button>
</div>
<span style="font-size: 0.85rem; color: #22c55e;">Image attached for AI analysis</span>
<span class="preview-text">Image attached for analysis</span>
</div>

<form id="chat-form">
<div class="input-container" style="display: flex; align-items: center;">
<form id="chat-form" class="glass-effect">
<div class="input-wrapper">
<input type="file" id="image-input" accept="image/*" style="display: none;" onchange="handleImagePreview(event)">
<button type="button" class="camera-btn" onclick="document.getElementById('image-input').click()" title="Upload image for diagnosis">

<button type="button" class="action-btn camera-btn" onclick="document.getElementById('image-input').click()" title="Upload image">
<i class="fas fa-camera"></i>
</button>

<input
type="text"
id="chat-input"
placeholder="Ask about crops or upload a photo..."
placeholder="Ask a question or upload a photo..."
aria-label="Chat input"
autofocus
required
autocomplete="off"
/>

<button type="submit" id="send-button" title="Send message">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<button type="submit" id="send-button">
<i class="fas fa-paper-plane"></i> Send
</button>
</form>
</div>
</main>
Expand All @@ -147,7 +118,7 @@ <h3><i class="fas fa-leaf"></i> Welcome to AgriTech Assistant!</h3>
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('image-preview').src = e.target.result;
document.getElementById('image-preview-container').style.display = 'flex';
document.getElementById('image-preview-container').classList.add('active');
// Store base64 data for Python backend
window.selectedImageBase64 = e.target.result.split(',')[1];
};
Expand All @@ -158,10 +129,9 @@ <h3><i class="fas fa-leaf"></i> Welcome to AgriTech Assistant!</h3>
function clearImage() {
selectedImageBase64 = null;
document.getElementById('image-input').value = '';
document.getElementById('image-preview-container').style.display = 'none';
document.getElementById('image-preview-container').classList.remove('active');
}
</script>

<script src="json-chatbot.js"></script>
<script src="chat.js"></script>
<script src="theme.js"></script>
Expand Down
Binary file added images/buyer_card_bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/equipment_card_bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/farmer_card_bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/grocery_card_bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 83 additions & 34 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,37 +389,82 @@
}

.feature-card {
background: var(--surface-color);
padding: 2rem;
border-radius: 12px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
text-align: center;
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 340px;
display: flex;
align-items: flex-end;
text-align: left;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background-size: cover;
background-position: center;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border: none;
padding: 0;
}

/* Cinematic Dark Gradient Overlay */
.feature-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0.6) 60%,
rgba(0,0,0,0.1) 100%);
transition: background 0.3s ease;
z-index: 1;
}

/* Hover Effects */
.feature-card:hover {
transform: translateY(-5px);
border-color: var(--accent-color);
box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
transform: translateY(-8px) scale(1.02);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--text-color);
.feature-card:hover::before {
background: linear-gradient(to top,
rgba(0,0,0,0.95) 0%,
rgba(0,0,0,0.7) 60%,
rgba(0,0,0,0.2) 100%);
}

/* Content Styling */
.feature-content {
position: relative;
z-index: 2;
padding: 2rem;
width: 100%;
transform: translateY(0);
transition: transform 0.3s ease;
}

.feature-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--accent-color);
font-family: 'Libertinus Serif', serif;
font-size: 1.85rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.75rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
letter-spacing: 0.5px;
}

.feature-description {
color: var(--text-muted);
color: #f1f5f9;
font-size: 1.05rem;
line-height: 1.6;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
max-width: 95%;
}

/* Feature-Specific Backgrounds */
.feature-card.farmer { background-image: url('images/farmer_card_bg.png'); }
.feature-card.buyer { background-image: url('images/buyer_card_bg.png'); }
.feature-card.equipment { background-image: url('images/equipment_card_bg.png'); }
.feature-card.grocery { background-image: url('images/grocery_card_bg.png'); }

/* FOOTER */
.site-footer {
background: var(--surface-color);
Expand Down Expand Up @@ -1156,25 +1201,29 @@ <h2 class="serif">Empowering Agriculture Through Technology</h2>
<div class="features-container">
<h2 class="features-title serif">Our Platform Benefits</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🌱</div>
<h3 class="feature-title serif">For Farmers</h3>
<p class="feature-description">Direct access to buyers, fair pricing, and equipment rental services to maximize harvest potential.</p>
<div class="feature-card farmer">
<div class="feature-content">
<h3 class="feature-title serif">For Farmers</h3>
<p class="feature-description">Direct access to buyers, fair pricing, and equipment rental services to maximize harvest potential.</p>
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🏪</div>
<h3 class="feature-title serif">For Buyers</h3>
<p class="feature-description">Source fresh produce directly from verified farmers with transparent pricing and quality assurance.</p>
<div class="feature-card buyer">
<div class="feature-content">
<h3 class="feature-title serif">For Buyers</h3>
<p class="feature-description">Source fresh produce directly from verified farmers with transparent pricing and quality assurance.</p>
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🚜</div>
<h3 class="feature-title serif">Equipment Suppliers</h3>
<p class="feature-description">Expand your reach and connect with farmers needing modern agricultural equipment.</p>
<div class="feature-card equipment">
<div class="feature-content">
<h3 class="feature-title serif">Equipment Suppliers</h3>
<p class="feature-description">Expand your reach and connect with farmers needing modern agricultural equipment.</p>
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🛒</div>
<h3 class="feature-title serif">Grocery Sellers</h3>
<p class="feature-description">Access fresh produce with reliable supply chain and competitive costs.</p>
<div class="feature-card grocery">
<div class="feature-content">
<h3 class="feature-title serif">Grocery Sellers</h3>
<p class="feature-description">Access fresh produce with reliable supply chain and competitive costs.</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1498,7 +1547,7 @@ <h4>Contact</h4>

const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
const nodes = [];

while (walker.nextNode()) nodes.push(walker.currentNode);

nodes.forEach(node => {
Expand Down
Loading