Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=device-width, initial-scale=1" name="viewport"/> | |
| <title> | |
| Watershed DPR Chatbot | |
| </title> | |
| <script src="https://cdn.tailwindcss.com"> | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/> | |
| <link rel="stylesheet" href="/static/styles.css" /> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Hero Section --> | |
| <header class="relative bg-green-800 text-white shadow-lg overflow-hidden"> | |
| <img alt="A lush green agriculture field with sunrise and a flowing water stream, symbolizing watershed and farming" class="absolute inset-0 w-full h-full object-cover opacity-30" height="400" loading="lazy" src="https://storage.googleapis.com/a1aa/image/3bd61a66-6bda-429f-11fb-39ce245411f2.jpg" width="1920"/> | |
| <div class="relative container mx-auto px-6 py-20 flex flex-col md:flex-row items-center justify-between"> | |
| <div class="max-w-xl fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-extrabold leading-tight drop-shadow-lg"> | |
| Watershed DPR Chatbot | |
| </h1> | |
| <p class="mt-4 text-lg md:text-xl max-w-md drop-shadow-md"> | |
| Your intelligent assistant for district watershed progress reports and insights. | |
| </p> | |
| <a class="inline-block mt-8 bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition transform hover:-translate-y-1" href="#chat-section"> | |
| Get Started | |
| <i class="fas fa-arrow-right ml-2"> | |
| </i> | |
| </a> | |
| </div> | |
| <img alt="Illustration of a friendly chatbot with agriculture elements like plants and water droplets" class="w-80 mt-12 md:mt-0 fade-in" height="300" loading="lazy" src="https://storage.googleapis.com/a1aa/image/d0c82752-217a-41c1-f4b6-532dabc58b91.jpg" width="400"/> | |
| </div> | |
| </header> | |
| <!-- Navigation Tabs --> | |
| <nav class="bg-white shadow sticky top-0 z-30"> | |
| <div class="container mx-auto px-6 py-3 flex justify-center space-x-6"> | |
| <button aria-controls="chat-section" aria-selected="true" class="tab-btn active flex items-center space-x-2 text-green-700 hover:text-green-900" id="tab-chat" role="tab"> | |
| <i class="fas fa-comments"> | |
| </i> | |
| <span> | |
| Chatbot | |
| </span> | |
| </button> | |
| <button aria-controls="dashboard-section" aria-selected="false" class="tab-btn flex items-center space-x-2 text-green-700 hover:text-green-900" id="tab-dashboard" role="tab"> | |
| <i class="fas fa-chart-bar"> | |
| </i> | |
| <span> | |
| Dashboard | |
| </span> | |
| </button> | |
| <button aria-controls="about-section" aria-selected="false" class="tab-btn flex items-center space-x-2 text-green-700 hover:text-green-900" id="tab-about" role="tab"> | |
| <i class="fas fa-info-circle"> | |
| </i> | |
| <span> | |
| About | |
| </span> | |
| </button> | |
| </div> | |
| </nav> | |
| <main class="flex-grow container mx-auto px-6 py-10"> | |
| <!-- Chat Section --> | |
| <section aria-labelledby="tab-chat" class="tab-content active max-w-4xl mx-auto bg-white rounded-xl shadow-lg p-8 fade-in" id="chat-section" role="tabpanel" tabindex="0"> | |
| <h2 class="text-3xl font-extrabold text-green-800 mb-6 border-b border-green-300 pb-2"> | |
| Ask the Watershed DPR Chatbot | |
| </h2> | |
| <form aria-label="Chatbot question form" class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0" id="chat-form"> | |
| <input aria-describedby="query-desc" aria-required="true" class="flex-grow border border-green-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500" id="query-input" name="query" placeholder="Ask a question about any DPR..." required="" type="text"/> | |
| <span class="sr-only" id="query-desc"> | |
| Enter your question here | |
| </span> | |
| <select aria-label="Select district" class="border border-green-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500" id="district-select" name="district"> | |
| {% for d in districts %} | |
| <option value="{{ d }}"> | |
| {{ d }} | |
| </option> | |
| {% endfor %} | |
| </select> | |
| <button aria-label="Submit question" class="bg-green-600 hover:bg-green-700 text-white font-semibold rounded-md px-6 py-3 transition-colors duration-300 flex items-center justify-center" type="submit"> | |
| <i class="fas fa-paper-plane mr-2"> | |
| </i> | |
| Ask | |
| </button> | |
| </form> | |
| <div aria-atomic="true" aria-live="polite" class="output mt-8 rounded-lg border border-green-200 shadow-sm min-h-[6rem] max-h-64 overflow-y-auto" id="answer-container"> | |
| </div> | |
| <div class="output mt-4 rounded-lg border border-green-200 shadow-sm min-h-[4rem]" id="sources-container"> | |
| </div> | |
| </section> | |
| <!-- Dashboard Section --> | |
| <section aria-labelledby="tab-dashboard" class="tab-content max-w-6xl mx-auto bg-white rounded-xl shadow-lg p-8 hidden fade-in" id="dashboard-section" role="tabpanel" tabindex="0"> | |
| <h2 class="text-3xl font-extrabold text-green-800 mb-6 border-b border-green-300 pb-2"> | |
| District-Level Watershed Summary | |
| </h2> | |
| <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:space-x-4"> | |
| <label class="sr-only" for="dashboard-district-select"> | |
| Select District | |
| </label> | |
| <select aria-label="Select district for dashboard" class="border border-green-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500 w-full sm:w-64" id="dashboard-district-select"> | |
| <option value="All"> | |
| All | |
| </option> | |
| {% for row in summary_data %} | |
| <option value="{{ row['district'] }}"> | |
| {{ row['district'] }} | |
| </option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="flex flex-col md:flex-row md:space-x-10"> | |
| <canvas aria-label="Summary chart" class="w-full md:w-2/3 max-w-4xl rounded-lg shadow-lg" id="summary-chart" role="img"> | |
| </canvas> | |
| <div aria-atomic="true" aria-live="polite" class="metrics grid grid-cols-1 sm:grid-cols-2 gap-8 mt-8 md:mt-0 md:w-1/3" id="metrics-container"> | |
| <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2"> | |
| <p class="text-5xl font-extrabold text-green-700"> | |
| 1200 | |
| </p> | |
| <p class="text-green-800 mt-2 text-lg"> | |
| Total Watersheds | |
| </p> | |
| </div> | |
| <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2"> | |
| <p class="text-5xl font-extrabold text-green-700"> | |
| 850 | |
| </p> | |
| <p class="text-green-800 mt-2 text-lg"> | |
| Active DPRs | |
| </p> | |
| </div> | |
| <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2"> | |
| <p class="text-5xl font-extrabold text-green-700"> | |
| 75% | |
| </p> | |
| <p class="text-green-800 mt-2 text-lg"> | |
| Completion Rate | |
| </p> | |
| </div> | |
| <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2"> | |
| <p class="text-5xl font-extrabold text-green-700"> | |
| 45 | |
| </p> | |
| <p class="text-green-800 mt-2 text-lg"> | |
| Districts Covered | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section aria-labelledby="tab-about" class="tab-content max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-10 hidden fade-in" id="about-section" role="tabpanel" tabindex="0"> | |
| <h2 class="text-3xl font-extrabold text-green-800 mb-6 border-b border-green-300 pb-2"> | |
| About Watershed DPR Chatbot | |
| </h2> | |
| <div class="flex flex-col md:flex-row md:space-x-10 items-center"> | |
| <img alt="Illustration showing watershed, agriculture fields, and water management" class="rounded-lg shadow-lg mb-6 md:mb-0 w-full md:w-1/2" height="300" loading="lazy" src="https://storage.googleapis.com/a1aa/image/6418e15d-9c5a-4145-e710-625e31e5b76d.jpg" width="400"/> | |
| <div class="md:w-1/2 text-green-900 text-lg leading-relaxed"> | |
| <p class="mb-4"> | |
| The Watershed DPR Chatbot is designed to assist farmers, researchers, and policymakers by providing quick and accurate answers related to District Progress Reports (DPRs) on watershed management. | |
| </p> | |
| <p class="mb-4"> | |
| Using advanced AI technology, it helps you understand the progress, challenges, and achievements in watershed projects across various districts. | |
| </p> | |
| <p> | |
| Our dashboard offers insightful visualizations and metrics to track watershed development and support data-driven decision making. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-green-800 text-green-100 text-center py-6 mt-16"> | |
| <p> | |
| © 2025 Developed by IIIT Lucknow | |
| </p> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"> | |
| </script> | |
| <script src="/static/script.js"> | |
| </script> | |
| <script> | |
| // Tab switching logic with ARIA updates | |
| const tabs = { | |
| chat: document.getElementById("tab-chat"), | |
| dashboard: document.getElementById("tab-dashboard"), | |
| about: document.getElementById("tab-about"), | |
| }; | |
| const sections = { | |
| chat: document.getElementById("chat-section"), | |
| dashboard: document.getElementById("dashboard-section"), | |
| about: document.getElementById("about-section"), | |
| }; | |
| function activateTab(tabKey) { | |
| Object.keys(tabs).forEach((key) => { | |
| if (key === tabKey) { | |
| tabs[key].classList.add("active"); | |
| tabs[key].setAttribute("aria-selected", "true"); | |
| sections[key].classList.remove("hidden"); | |
| sections[key].classList.add("active"); | |
| sections[key].focus(); | |
| } else { | |
| tabs[key].classList.remove("active"); | |
| tabs[key].setAttribute("aria-selected", "false"); | |
| sections[key].classList.add("hidden"); | |
| sections[key].classList.remove("active"); | |
| } | |
| }); | |
| } | |
| tabs.chat.addEventListener("click", () => activateTab("chat")); | |
| tabs.dashboard.addEventListener("click", () => activateTab("dashboard")); | |
| tabs.about.addEventListener("click", () => activateTab("about")); | |
| // Optional: Animate metrics on scroll (fade-in) | |
| const metrics = document.querySelectorAll("#metrics-container > div"); | |
| const observer = new IntersectionObserver( | |
| (entries) => { | |
| entries.forEach((entry) => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add("fade-in"); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, | |
| { threshold: 0.3 } | |
| ); | |
| metrics.forEach((metric) => observer.observe(metric)); | |
| </script> | |
| </body> | |
| </html> | |