| | <!DOCTYPE html> |
| | <html lang="en"> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Cropiee | Agricultural Intelligence</title> |
| | <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=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <style> |
| | :root { |
| | |
| | --primary: #1a4d2e; |
| | --primary-light: #4f6f52; |
| | --accent: #ff9f1c; |
| | --bg-gradient: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); |
| | --glass: rgba(255, 255, 255, 0.7); |
| | --glass-border: rgba(255, 255, 255, 0.3); |
| | --text-main: #1b4332; |
| | --text-muted: #52796f; |
| | --shadow: 0 12px 40px rgba(0, 0, 0, 0.08); |
| | --bot-bubble: #ffffff; |
| | --user-bubble: linear-gradient(135deg, #2d6a4f 0%, #1a4d2e 100%); |
| | --input-bg: #f8fbf8; |
| | } |
| | |
| | [data-theme="dark"] { |
| | |
| | --primary: #95d5b2; |
| | --primary-light: #74c69d; |
| | --accent: #ff9f1c; |
| | --bg-solid: #081c15; |
| | --bg-gradient: linear-gradient(135deg, #081c15 0%, #1b4332 100%); |
| | --glass: rgba(27, 67, 50, 0.95); |
| | --glass-border: rgba(255, 255, 255, 0.1); |
| | --text-main: #d8f3dc; |
| | --text-muted: #b7e4c7; |
| | --shadow: 0 12px 40px rgba(0, 0, 0, 0.6); |
| | --bot-bubble: #1b4332; |
| | --user-bubble: linear-gradient(135deg, #40916c 0%, #2d6a4f 100%); |
| | --input-bg: #081c15; |
| | } |
| | |
| | * { |
| | box-sizing: border-box; |
| | transition: background-color 0.3s, color 0.3s, border-color 0.3s; |
| | } |
| | |
| | body, |
| | html { |
| | min-height: 100vh; |
| | margin: 0; |
| | padding: 0; |
| | font-family: 'Outfit', sans-serif; |
| | background: var(--bg-solid, #e8f5e9); |
| | background: var(--bg-gradient); |
| | background-attachment: fixed; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | overflow-x: hidden; |
| | width: 100vw; |
| | } |
| | |
| | #particles-js { |
| | position: fixed; |
| | width: 100%; |
| | height: 100%; |
| | z-index: -1; |
| | top: 0; |
| | left: 0; |
| | } |
| | |
| | .dashboard { |
| | display: flex; |
| | width: 95%; |
| | max-width: 1200px; |
| | height: 90vh; |
| | gap: 20px; |
| | margin: 20px; |
| | animation: fadeIn 0.8s ease; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { |
| | opacity: 0; |
| | transform: translateY(20px); |
| | } |
| | |
| | to { |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | } |
| | |
| | #chat-container { |
| | flex: 1; |
| | display: flex; |
| | flex-direction: column; |
| | background: var(--glass); |
| | backdrop-filter: blur(20px); |
| | -webkit-backdrop-filter: blur(20px); |
| | border-radius: 32px; |
| | box-shadow: var(--shadow); |
| | border: 1px solid var(--glass-border); |
| | overflow: hidden; |
| | position: relative; |
| | } |
| | |
| | .visual-panel { |
| | flex: 1.2; |
| | display: flex; |
| | flex-direction: column; |
| | justify-content: center; |
| | align-items: center; |
| | position: relative; |
| | background: transparent; |
| | } |
| | |
| | .visual-panel h2 { |
| | color: var(--primary); |
| | font-size: 2.2rem; |
| | margin-bottom: 20px; |
| | text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); |
| | font-weight: 700; |
| | } |
| | |
| | .agri-core { |
| | width: 400px; |
| | height: 400px; |
| | position: relative; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | } |
| | |
| | .orbit { |
| | position: absolute; |
| | border-radius: 50%; |
| | border: 1px solid rgba(149, 213, 178, 0.2); |
| | animation: rotateOrbit linear infinite; |
| | } |
| | |
| | .orbit-1 { |
| | width: 300px; |
| | height: 300px; |
| | animation-duration: 15s; |
| | } |
| | |
| | .orbit-2 { |
| | width: 220px; |
| | height: 220px; |
| | animation-duration: 20s; |
| | animation-direction: reverse; |
| | } |
| | |
| | @keyframes rotateOrbit { |
| | from { |
| | transform: rotate(0deg); |
| | } |
| | |
| | to { |
| | transform: rotate(360deg); |
| | } |
| | } |
| | |
| | .node { |
| | position: absolute; |
| | width: 12px; |
| | height: 12px; |
| | background: var(--accent); |
| | border-radius: 50%; |
| | box-shadow: 0 0 15px var(--accent); |
| | } |
| | |
| | .plant-container { |
| | width: 180px; |
| | height: 180px; |
| | background: rgba(45, 106, 79, 0.1); |
| | border-radius: 50%; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | border: 2px solid rgba(45, 106, 79, 0.2); |
| | position: relative; |
| | overflow: hidden; |
| | backdrop-filter: blur(5px); |
| | } |
| | |
| | .scanning-beam { |
| | position: absolute; |
| | width: 100%; |
| | height: 60px; |
| | background: linear-gradient(to bottom, transparent, rgba(255, 159, 28, 0.4), transparent); |
| | animation: scanLoop 3s ease-in-out infinite; |
| | z-index: 2; |
| | } |
| | |
| | @keyframes scanLoop { |
| | |
| | 0%, |
| | 100% { |
| | transform: translateY(-100px); |
| | } |
| | |
| | 50% { |
| | transform: translateY(100px); |
| | } |
| | } |
| | |
| | #chat-header { |
| | padding: 20px 30px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: space-between; |
| | border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| | } |
| | |
| | .bot-avatar { |
| | width: 48px; |
| | height: 48px; |
| | background: var(--primary); |
| | border-radius: 12px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | color: #ffffff; |
| | } |
| | |
| | [data-theme="dark"] .bot-avatar { |
| | color: #081c15; |
| | } |
| | |
| | #chat-box { |
| | flex: 1; |
| | padding: 25px; |
| | overflow-y: auto; |
| | scroll-behavior: smooth; |
| | } |
| | |
| | .msg-wrapper { |
| | margin-bottom: 20px; |
| | display: flex; |
| | flex-direction: column; |
| | } |
| | |
| | .user-wrapper { |
| | align-items: flex-end; |
| | } |
| | |
| | .bot-wrapper { |
| | align-items: flex-start; |
| | } |
| | |
| | .user-bubble { |
| | background: var(--user-bubble); |
| | color: white; |
| | border-radius: 20px 20px 4px 20px; |
| | padding: 12px 18px; |
| | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); |
| | } |
| | |
| | .bot-bubble { |
| | background: var(--bot-bubble); |
| | color: var(--text-main); |
| | border-radius: 20px 20px 20px 4px; |
| | padding: 12px 18px; |
| | border: 1px solid var(--glass-border); |
| | line-height: 1.5; |
| | } |
| | |
| | .chart-container { |
| | width: 100%; |
| | max-width: 250px; |
| | margin-top: 10px; |
| | background: rgba(255, 255, 255, 0.05); |
| | border-radius: 12px; |
| | padding: 10px; |
| | } |
| | |
| | #input-container { |
| | padding: 20px; |
| | background: var(--bot-bubble); |
| | display: flex; |
| | gap: 15px; |
| | border-top: 1px solid var(--glass-border); |
| | } |
| | |
| | #user-input { |
| | flex: 1; |
| | padding: 14px 20px; |
| | background: var(--input-bg); |
| | border: 1px solid var(--glass-border); |
| | border-radius: 12px; |
| | outline: none; |
| | font-size: 0.95rem; |
| | color: var(--text-main); |
| | } |
| | |
| | #send-btn { |
| | width: 50px; |
| | height: 50px; |
| | background: var(--primary); |
| | border: none; |
| | border-radius: 12px; |
| | color: #ffffff; |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| | |
| | [data-theme="dark"] #send-btn { |
| | color: #081c15; |
| | } |
| | |
| | .suggestion-chip { |
| | padding: 8px 16px; |
| | background: var(--bot-bubble); |
| | border: 1px solid var(--glass-border); |
| | border-radius: 20px; |
| | font-size: 0.85rem; |
| | cursor: pointer; |
| | color: var(--text-main); |
| | transition: 0.2s; |
| | white-space: nowrap; |
| | } |
| | |
| | .suggestion-chip:hover { |
| | background: var(--primary); |
| | color: #ffffff; |
| | } |
| | |
| | .suggestions { |
| | padding: 0 25px 15px; |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 10px; |
| | overflow-x: auto; |
| | scrollbar-width: none; |
| | } |
| | |
| | |
| | #onboarding { |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | background: rgba(0, 0, 0, 0.6); |
| | z-index: 100; |
| | display: none; |
| | flex-direction: column; |
| | justify-content: center; |
| | align-items: center; |
| | border-radius: 32px; |
| | backdrop-filter: blur(4px); |
| | } |
| | |
| | .onboarding-card { |
| | background: var(--bot-bubble); |
| | padding: 30px; |
| | border-radius: 24px; |
| | max-width: 80%; |
| | text-align: center; |
| | color: var(--text-main); |
| | box-shadow: var(--shadow); |
| | position: relative; |
| | } |
| | |
| | .onboarding-card h3 { |
| | margin: 0 0 15px; |
| | color: var(--primary); |
| | } |
| | |
| | .onboarding-btn { |
| | background: var(--primary); |
| | color: #ffffff; |
| | border: none; |
| | padding: 10px 20px; |
| | border-radius: 10px; |
| | cursor: pointer; |
| | margin-top: 20px; |
| | font-weight: 600; |
| | } |
| | |
| | |
| | .theme-toggle { |
| | padding: 8px; |
| | border-radius: 10px; |
| | background: var(--glass-border); |
| | cursor: pointer; |
| | display: flex; |
| | gap: 5px; |
| | align-items: center; |
| | } |
| | |
| | @media (max-width: 992px) { |
| | .visual-panel { |
| | display: none; |
| | } |
| | |
| | .dashboard { |
| | max-width: 520px; |
| | } |
| | } |
| | |
| | @media (max-width: 480px) { |
| | .dashboard { |
| | width: 100%; |
| | height: 100vh; |
| | margin: 0; |
| | border-radius: 0; |
| | } |
| | |
| | #chat-container { |
| | border-radius: 0; |
| | } |
| | } |
| | </style> |
| | </head> |
| |
|
| | <body data-theme="light"> |
| | <div id="particles-js"></div> |
| |
|
| | <div class="dashboard"> |
| | <div id="chat-container"> |
| | |
| | <div id="onboarding"> |
| | <div class="onboarding-card"> |
| | <h3 id="ob-title">Welcome to Cropiee!</h3> |
| | <p id="ob-text">I'm your AI agriculture assistant. Let's get started on your farming journey.</p> |
| | <button class="onboarding-btn" onclick="nextOb()">Next Step</button> |
| | <div style="margin-top:10px; font-size: 0.8rem; opacity: 0.7;" id="ob-count">1 / 3</div> |
| | </div> |
| | </div> |
| |
|
| | <div id="chat-header"> |
| | <div style="display: flex; align-items: center; gap: 12px;"> |
| | <div class="bot-avatar"> |
| | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" |
| | stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"> |
| | <rect x="5" y="10" width="14" height="10" rx="3"></rect> |
| | <circle cx="9" cy="14" r="1.2" fill="currentColor"></circle> |
| | <circle cx="15" cy="14" r="1.2" fill="currentColor"></circle> |
| | <path d="M10 17h4"></path> |
| | <path d="M12 10V7"></path> |
| | <path d="M12 7c1.5-1.5 2.5-1.5 2.5-3s-1-1.5-2.5 0"></path> |
| | <path d="M12 7c-1.5-1.5-2.5-1.5-2.5-3s1-1.5 2.5 0"></path> |
| | </svg> |
| | </div> |
| | <div> |
| | <h1 style="margin:0; font-size:1.1rem; font-weight:700; color:var(--text-main)">Cropiee</h1> |
| | </div> |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: center;"> |
| | <button class="theme-toggle" |
| | style="border:none; color:inherit; font-weight:600; font-family:inherit; font-size: 0.9rem;" |
| | onclick="showOnboarding()"> |
| | ❓ Guide |
| | </button> |
| | <div class="theme-toggle" onclick="toggleTheme()" title="Toggle Dark Mode"> |
| | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" |
| | stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| | <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> |
| | </svg> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div id="chat-box"></div> |
| |
|
| | <div class="suggestions"> |
| | <div class="suggestion-chip" onclick="quickSend('Suggest a crop')">🌿 Recommend</div> |
| | <div class="suggestion-chip" onclick="quickSend('Soil analysis')">🌱 Soil Advice</div> |
| | </div> |
| |
|
| | <div id="input-container"> |
| | <input type="text" id="user-input" placeholder="Cultivate a query..." autocomplete="off"> |
| | <button id="send-btn" onclick="sendMessage()"> |
| | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" |
| | stroke-linecap="round" stroke-linejoin="round"> |
| | <line x1="22" y1="2" x2="11" y2="13"></line> |
| | <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> |
| | </svg> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | <div class="visual-panel"> |
| | <h2>Hybrid AI Analytics</h2> |
| | <div class="agri-core"> |
| | <div class="orbit orbit-1"> |
| | <div class="node" style="top:0; left:50%; transform:translateX(-50%)"></div> |
| | <div class="node" style="bottom:0; left:50%; transform:translateX(-50%)"></div> |
| | </div> |
| | <div class="orbit orbit-2"> |
| | <div class="node" style="left:0; top:50%; transform:translateY(-50%)"></div> |
| | <div class="node" style="right:0; top:50%; transform:translateY(-50%)"></div> |
| | </div> |
| | <div class="plant-container"> |
| | <div class="scanning-beam"></div> |
| | <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" |
| | stroke-width="1.8"> |
| | <path |
| | d="M7 20l3-3 3 3m-3-3V10m0 0a4 4 0 0 1 4-4c1.5 0 3 .5 3 2s-1.5 2-3 2a4 4 0 0 1-4 4zm0-6a4 4 0 0 0-4-4c-1.5 0-3 .5-3 2s1.5 2 3 2a4 4 0 0 0 4 4z"> |
| | </path> |
| | </svg> |
| | </div> |
| | </div> |
| | <div style="margin-top:40px; text-align:center; color: var(--text-muted); font-size: 0.9rem;"> |
| | <span id="stat-text" style="color:var(--primary); font-weight:600;">Processing Agro-Neural |
| | Data...</span> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
| | <script> |
| | |
| | function toggleTheme() { |
| | const body = document.body; |
| | const current = body.getAttribute('data-theme'); |
| | const target = current === 'light' ? 'dark' : 'light'; |
| | body.setAttribute('data-theme', target); |
| | localStorage.setItem('cropiee-theme', target); |
| | updateChartThemes(); |
| | } |
| | |
| | |
| | const obData = [ |
| | { title: "Smart Recommendations 🌿", text: "Ask me 'What can I grow in Delhi?' and I'll use real-time weather and ML models to suggest the best crop." }, |
| | { title: "Soil Analysis 🌱", text: "Type 'soil for rice' to get precise chemical requirement charts for your favorite crops." }, |
| | { title: "Market Insights 📊", text: "I fetch current mandi prices to tell you the profit potential of your farm." } |
| | ]; |
| | let obIdx = 0; |
| | function showOnboarding() { document.getElementById('onboarding').style.display = 'flex'; obIdx = 0; updateOb(); } |
| | function nextOb() { |
| | obIdx++; |
| | if (obIdx >= obData.length) { document.getElementById('onboarding').style.display = 'none'; return; } |
| | updateOb(); |
| | } |
| | function updateOb() { |
| | document.getElementById('ob-title').innerText = obData[obIdx].title; |
| | document.getElementById('ob-text').innerText = obData[obIdx].text; |
| | document.getElementById('ob-count').innerText = `${obIdx + 1} / 3`; |
| | } |
| | |
| | |
| | particlesJS('particles-js', { |
| | "particles": { "number": { "value": 40 }, "color": { "value": "#2d6a4f" }, "shape": { "type": "circle" }, "opacity": { "value": 0.3 }, "size": { "value": 3 }, "line_linked": { "enable": true, "distance": 150, "color": "#2d6a4f", "opacity": 0.2, "width": 1 }, "move": { "enable": true, "speed": 1.5 } } |
| | }); |
| | |
| | |
| | const chatBox = document.getElementById('chat-box'); |
| | const userInput = document.getElementById('user-input'); |
| | const charts = []; |
| | |
| | function updateChartThemes() { |
| | const isDark = document.body.getAttribute('data-theme') === 'dark'; |
| | const color = isDark ? '#d8f3dc' : '#1b4332'; |
| | charts.forEach(c => { |
| | c.options.scales.r.grid.color = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'; |
| | c.options.scales.r.pointLabels.color = color; |
| | c.update(); |
| | }); |
| | } |
| | |
| | function createChart(canvasId, labels, values, labelTitle) { |
| | const ctx = document.getElementById(canvasId).getContext('2d'); |
| | const isDark = document.body.getAttribute('data-theme') === 'dark'; |
| | const primary = isDark ? '#95d5b2' : '#1a4d2e'; |
| | |
| | const newChart = new Chart(ctx, { |
| | type: 'radar', |
| | data: { |
| | labels: labels, |
| | datasets: [{ |
| | label: labelTitle, |
| | data: values, |
| | backgroundColor: isDark ? 'rgba(149, 213, 178, 0.3)' : 'rgba(26, 77, 46, 0.3)', |
| | borderColor: primary, |
| | borderWidth: 2, |
| | pointBackgroundColor: primary |
| | }] |
| | }, |
| | options: { |
| | scales: { |
| | r: { |
| | angleLines: { color: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)' }, |
| | grid: { color: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)' }, |
| | pointLabels: { color: isDark ? '#d8f3dc' : '#1b4332', font: { size: 10 } }, |
| | ticks: { display: false } |
| | } |
| | }, |
| | plugins: { legend: { display: false } } |
| | } |
| | }); |
| | charts.push(newChart); |
| | } |
| | |
| | function addMessage(text, isUser = false, chartData = null) { |
| | const wrapper = document.createElement('div'); |
| | wrapper.className = `msg-wrapper ${isUser ? 'user-wrapper' : 'bot-wrapper'}`; |
| | |
| | const bubble = document.createElement('div'); |
| | bubble.className = `msg-bubble ${isUser ? 'user-bubble' : 'bot-bubble'}`; |
| | bubble.innerHTML = text; |
| | |
| | wrapper.appendChild(bubble); |
| | |
| | if (chartData) { |
| | const chartDiv = document.createElement('div'); |
| | chartDiv.className = 'chart-container'; |
| | const canvasId = 'chart-' + Date.now(); |
| | chartDiv.innerHTML = `<canvas id="${canvasId}"></canvas>`; |
| | bubble.appendChild(chartDiv); |
| | |
| | setTimeout(() => { |
| | createChart(canvasId, chartData.labels, chartData.values, isUser ? "Your Input" : "Ideal soil Readings"); |
| | }, 100); |
| | } |
| | |
| | chatBox.appendChild(wrapper); |
| | chatBox.scrollTo({ top: chatBox.scrollHeight, behavior: 'smooth' }); |
| | } |
| | |
| | async function sendMessage() { |
| | const text = userInput.value.trim(); |
| | if (!text) return; |
| | userInput.value = ''; |
| | addMessage(text, true); |
| | |
| | try { |
| | let response = await fetch('/chatbot', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ message: text }) |
| | }); |
| | const data = await response.json(); |
| | addMessage(data.reply, false, data.chart); |
| | } catch (e) { |
| | addMessage("I'm momentarily offline. 🌿"); |
| | } |
| | } |
| | |
| | userInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') sendMessage(); }); |
| | function quickSend(v) { userInput.value = v; sendMessage(); } |
| | |
| | window.onload = () => { |
| | const saved = localStorage.getItem('cropiee-theme'); |
| | if (saved) document.body.setAttribute('data-theme', saved); |
| | |
| | addMessage("Hello! I'm <b>Cropiee</b>. 😊\nWelcome to your intelligent agricultural dashboard."); |
| | |
| | |
| | if (!localStorage.getItem('ob-seen')) { |
| | showOnboarding(); |
| | localStorage.setItem('ob-seen', 'true'); |
| | } |
| | } |
| | |
| | |
| | const statText = document.getElementById('stat-text'); |
| | const states = ["Analyzing N-P-K Levels...", "Syncing IoT Sensor Data...", "Predicting Hybrid Yields...", "Matching Mandi Price API..."]; |
| | let sIdx = 0; |
| | setInterval(() => { |
| | statText.innerText = states[sIdx]; |
| | sIdx = (sIdx + 1) % states.length; |
| | }, 4000); |
| | </script> |
| | </body> |
| |
|
| | </html> |
