Spaces:
Sleeping
Sleeping
| <!-- templates/index.html --> | |
| <html lang="{{ current_language }}"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agricultural Pests & Diseases in India</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #38b000; | |
| --secondary-color: #007bff; | |
| --accent-color: #fb8500; | |
| --light-bg: #f8f9fa; | |
| --dark-text: #212529; | |
| --pest-color: #dc3545; | |
| --disease-color: #6f42c1; | |
| } | |
| body { | |
| background-color: var(--light-bg); | |
| padding: 20px; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .page-header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 2rem 0; | |
| border-radius: 10px; | |
| margin-bottom: 2rem; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .language-selector select { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .language-selector select option { | |
| background-color: white; | |
| color: var(--dark-text); | |
| } | |
| .filter-buttons { | |
| margin-bottom: 20px; | |
| } | |
| .filter-btn { | |
| margin-right: 10px; | |
| border-radius: 20px; | |
| font-weight: 500; | |
| padding: 8px 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .filter-btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| .filter-btn.active { | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.15); | |
| } | |
| .card { | |
| transition: all 0.3s ease; | |
| height: 100%; | |
| cursor: pointer; | |
| border-radius: 10px; | |
| border: none; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.05); | |
| overflow: hidden; | |
| } | |
| .card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 24px rgba(0,0,0,0.15); | |
| } | |
| .card-img-top { | |
| height: 200px; | |
| object-fit: cover; | |
| transition: all 0.5s ease; | |
| } | |
| .card:hover .card-img-top { | |
| transform: scale(1.05); | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| .card-title { | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .modal-body { | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| } | |
| .badge.pest { | |
| background-color: var(--pest-color); | |
| padding: 0.5em 0.8em; | |
| font-size: 0.8rem; | |
| } | |
| .badge.disease { | |
| background-color: var(--disease-color); | |
| padding: 0.5em 0.8em; | |
| font-size: 0.8rem; | |
| } | |
| .modal-content { | |
| border-radius: 15px; | |
| border: none; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| } | |
| .modal-header { | |
| border-bottom: 1px solid rgba(0,0,0,0.1); | |
| background-color: var(--light-bg); | |
| } | |
| .modal-title { | |
| font-weight: 600; | |
| } | |
| .section-title { | |
| margin-top: 1.5rem; | |
| margin-bottom: 0.75rem; | |
| font-weight: 600; | |
| color: var(--dark-text); | |
| border-bottom: 2px solid var(--primary-color); | |
| padding-bottom: 0.5rem; | |
| display: inline-block; | |
| } | |
| #backToTop { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| display: none; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| text-align: center; | |
| font-size: 20px; | |
| line-height: 50px; | |
| cursor: pointer; | |
| z-index: 99; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.2); | |
| } | |
| .crop-badge { | |
| background-color: #17a2b8; | |
| color: white; | |
| font-size: 0.8rem; | |
| font-weight: normal; | |
| margin-right: 4px; | |
| } | |
| .no-results { | |
| text-align: center; | |
| padding: 40px; | |
| font-size: 1.2rem; | |
| color: #6c757d; | |
| } | |
| /* Spinner */ | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| margin: 20px auto; | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-left-color: var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="page-header text-center mb-4"> | |
| <h1 class="display-4">Agricultural Pests & Diseases in India</h1> | |
| <p class="lead">Explore common agricultural threats and learn how to manage them</p> | |
| <!-- Language selector --> | |
| <div class="language-selector mt-3"> | |
| <form id="languageForm" class="d-flex justify-content-center align-items-center"> | |
| <label for="languageSelect" class="me-2"> | |
| <i class="fas fa-language"></i> Language: | |
| </label> | |
| <select id="languageSelect" class="form-select form-select-sm" style="max-width: 200px;"> | |
| {% for code, name in languages.items() %} | |
| <option value="{{ code }}" {% if code == current_language %}selected{% endif %}>{{ name }}</option> | |
| {% endfor %} | |
| </select> | |
| </form> | |
| </div> | |
| </header> | |
| <!-- Filter buttons --> | |
| <div class="filter-buttons text-center mb-4"> | |
| <button class="btn btn-outline-primary filter-btn active" data-filter="all">All Items</button> | |
| <button class="btn btn-outline-danger filter-btn" data-filter="pest">Pests Only</button> | |
| <button class="btn btn-outline-purple filter-btn" data-filter="disease" style="border-color: #6f42c1; color: #6f42c1;">Diseases Only</button> | |
| <div class="input-group mt-3 w-50 mx-auto"> | |
| <span class="input-group-text"><i class="fas fa-search"></i></span> | |
| <input type="text" class="form-control" id="searchInput" placeholder="Search by name or crop..."> | |
| </div> | |
| </div> | |
| <div class="row row-cols-1 row-cols-md-3 g-4" id="itemsContainer"> | |
| {% for item in pests_diseases %} | |
| <div class="col item-card" data-type="{{ item.type }}" data-name="{{ item.name.lower() }}" data-crop="{{ item.crop.lower() }}"> | |
| <div class="card h-100" onclick="showDetails({{ item.id }})"> | |
| <div class="position-relative overflow-hidden"> | |
| <img data-src="{{ item.image_url }}" class="card-img-top lazy-load" alt="{{ item.name }}"> | |
| <span class="position-absolute top-0 end-0 m-2 badge {{ item.type }}"> | |
| {{ item.type|capitalize }} | |
| </span> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="card-title">{{ item.name }}</h5> | |
| <p class="card-text"> | |
| <strong>Affects:</strong><br> | |
| {% for crop in item.crop.split(', ') %} | |
| <span class="badge crop-badge">{{ crop }}</span> | |
| {% endfor %} | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <div id="noResults" class="no-results" style="display: none;"> | |
| <i class="fas fa-search fa-3x mb-3 text-muted"></i> | |
| <p>No matching items found. Try another search term.</p> | |
| </div> | |
| <!-- Loading indicator --> | |
| <div id="loading" class="loading mt-4"> | |
| <div class="spinner"></div> | |
| <p class="mt-2">Fetching detailed information...</p> | |
| </div> | |
| <!-- Detail Modal --> | |
| <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="modalTitle"></h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body" id="modalBody"> | |
| <!-- Content will be loaded here --> | |
| <div class="text-center p-5" id="modalLoading"> | |
| <div class="spinner"></div> | |
| <p class="mt-3">Loading content...</p> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Back to top button --> | |
| <button id="backToTop" title="Back to top"> | |
| <i class="fas fa-chevron-up"></i> | |
| </button> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Initialize modal | |
| const detailModal = new bootstrap.Modal(document.getElementById('detailModal')); | |
| let loadedDetails = {}; | |
| // Language selector | |
| document.getElementById('languageSelect').addEventListener('change', function() { | |
| const selectedLanguage = this.value; | |
| // Show loading spinner | |
| const loadingElement = document.createElement('div'); | |
| loadingElement.id = 'pageLoading'; | |
| loadingElement.className = 'position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75'; | |
| loadingElement.style.zIndex = '9999'; | |
| loadingElement.innerHTML = '<div class="spinner"></div><p class="mt-3">Changing language...</p>'; | |
| document.body.appendChild(loadingElement); | |
| // Send request to change language | |
| fetch('/set_language', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/x-www-form-urlencoded', | |
| }, | |
| body: `language=${selectedLanguage}`, | |
| credentials: 'same-origin' // Ensure cookies are sent with the request | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| // Clear loaded details cache | |
| loadedDetails = {}; | |
| // Store language in localStorage as a fallback | |
| localStorage.setItem('preferredLanguage', selectedLanguage); | |
| // Refresh the page | |
| window.location.reload(); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| document.body.removeChild(loadingElement); | |
| alert('Error changing language. Please try again.'); | |
| }); | |
| }); | |
| // Check if we need to restore language preference from localStorage | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const storedLanguage = localStorage.getItem('preferredLanguage'); | |
| const currentLanguage = document.getElementById('languageSelect').value; | |
| if (storedLanguage && storedLanguage !== currentLanguage) { | |
| // If the stored language differs from the current one, set it | |
| document.getElementById('languageSelect').value = storedLanguage; | |
| // Trigger the change event | |
| document.getElementById('languageSelect').dispatchEvent(new Event('change')); | |
| } | |
| }); | |
| // Lazy load images | |
| document.addEventListener("DOMContentLoaded", function() { | |
| const lazyImages = document.querySelectorAll(".lazy-load"); | |
| if ("IntersectionObserver" in window) { | |
| const imageObserver = new IntersectionObserver(function(entries, observer) { | |
| entries.forEach(function(entry) { | |
| if (entry.isIntersecting) { | |
| const img = entry.target; | |
| img.src = img.dataset.src; | |
| img.classList.remove("lazy-load"); | |
| imageObserver.unobserve(img); | |
| } | |
| }); | |
| }); | |
| lazyImages.forEach(function(image) { | |
| imageObserver.observe(image); | |
| }); | |
| } else { | |
| // Fallback for browsers without intersection observer | |
| lazyImages.forEach(function(img) { | |
| img.src = img.dataset.src; | |
| }); | |
| } | |
| }); | |
| // Filter functionality | |
| document.querySelectorAll('.filter-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| this.classList.add('active'); | |
| const filterValue = this.getAttribute('data-filter'); | |
| filterItems(filterValue, document.getElementById('searchInput').value); | |
| }); | |
| }); | |
| // Search functionality | |
| document.getElementById('searchInput').addEventListener('input', function() { | |
| const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter'); | |
| filterItems(activeFilter, this.value); | |
| }); | |
| function filterItems(typeFilter, searchTerm) { | |
| searchTerm = searchTerm.toLowerCase(); | |
| let visibleCount = 0; | |
| document.querySelectorAll('.item-card').forEach(item => { | |
| const type = item.getAttribute('data-type'); | |
| const name = item.getAttribute('data-name'); | |
| const crop = item.getAttribute('data-crop'); | |
| const typeMatch = typeFilter === 'all' || type === typeFilter; | |
| const searchMatch = !searchTerm || | |
| name.includes(searchTerm) || | |
| crop.includes(searchTerm); | |
| if (typeMatch && searchMatch) { | |
| item.style.display = 'block'; | |
| visibleCount++; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| // Show/hide no results message | |
| document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none'; | |
| } | |
| // Function to show details | |
| function showDetails(id) { | |
| // Clear previous content and show loading | |
| document.getElementById('modalTitle').textContent = ""; | |
| document.getElementById('modalBody').innerHTML = ` | |
| <div class="text-center p-5" id="modalLoading"> | |
| <div class="spinner"></div> | |
| <p class="mt-3">Loading content...</p> | |
| </div> | |
| `; | |
| // Show modal immediately with loading indicator | |
| detailModal.show(); | |
| // Check if we already have the details cached | |
| if (loadedDetails[id]) { | |
| displayDetails(loadedDetails[id]); | |
| return; | |
| } | |
| // Fetch details from the backend | |
| fetch(`/get_details/${id}`, { | |
| credentials: 'same-origin' // Ensure cookies are sent with the request | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| // Cache the result | |
| loadedDetails[id] = data; | |
| displayDetails(data); | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| document.getElementById('modalBody').innerHTML = ` | |
| <div class="alert alert-danger" role="alert"> | |
| <i class="fas fa-exclamation-circle"></i> | |
| Error loading information. Please try again. | |
| </div> | |
| `; | |
| }); | |
| } | |
| function displayDetails(data) { | |
| // Update modal title | |
| document.getElementById('modalTitle').textContent = data.name; | |
| // Format the details | |
| const details = data.details; | |
| let content = ` | |
| <div class="text-center mb-4"> | |
| <img src="${data.image_url}" alt="${data.name}" class="img-fluid rounded" style="max-height: 300px;"> | |
| <div class="mt-2"> | |
| <span class="badge ${data.type} mb-2">${data.type.charAt(0).toUpperCase() + data.type.slice(1)}</span> | |
| <div> | |
| <strong>Affects:</strong> | |
| ${data.crop.split(', ').map(crop => `<span class="badge crop-badge">${crop}</span>`).join(' ')} | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Add each section | |
| const sections = [ | |
| {key: 'description', icon: 'info-circle', title: details.description.title || 'Description and Identification'}, | |
| {key: 'lifecycle', icon: 'sync', title: details.lifecycle.title || 'Lifecycle and Spread'}, | |
| {key: 'symptoms', icon: 'exclamation-triangle', title: details.symptoms.title || 'Damage Symptoms'}, | |
| {key: 'impact', icon: 'chart-line', title: details.impact.title || 'Economic Impact'}, | |
| {key: 'management', icon: 'tasks', title: details.management.title || 'Management and Control'}, | |
| {key: 'prevention', icon: 'shield-alt', title: details.prevention.title || 'Prevention'} | |
| ]; | |
| sections.forEach(section => { | |
| if (details[section.key] && details[section.key].text) { | |
| content += ` | |
| <h4 class="section-title"><i class="fas fa-${section.icon} me-2"></i>${section.title}</h4> | |
| <p>${details[section.key].text}</p> | |
| `; | |
| } | |
| }); | |
| document.getElementById('modalBody').innerHTML = content; | |
| } | |
| // Back to top button functionality | |
| window.onscroll = function() { | |
| if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | |
| document.getElementById("backToTop").style.display = "block"; | |
| } else { | |
| document.getElementById("backToTop").style.display = "none"; | |
| } | |
| }; | |
| document.getElementById("backToTop").addEventListener("click", function() { | |
| window.scrollTo({top: 0, behavior: 'smooth'}); | |
| }); | |
| </script> | |
| </body> | |
| </html> |