Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agricultural Schemes</title> | |
| <!-- Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Bootstrap 5 --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> | |
| <style> | |
| :root { | |
| /* Brand Colors from Style Guide */ | |
| --primary: #1a5d3a; | |
| --secondary: #198754; | |
| --accent: #0d6efd; | |
| --bg-light: #f8f9fa; | |
| --border-color: #dee2e6; | |
| --text-dark: #212529; | |
| --text-muted: #6c757d; | |
| } | |
| body { | |
| background-color: var(--bg-light); | |
| font-family: 'Outfit', sans-serif; | |
| color: var(--text-dark); | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| } | |
| /* --- Navbar --- */ | |
| .navbar { | |
| background-color: var(--primary) ; | |
| padding: 1rem 0; | |
| margin-bottom: 0 ; | |
| box-shadow: 0 4px 12px rgba(26, 93, 58, 0.15); | |
| } | |
| .navbar-brand { | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| font-size: 1.5rem; | |
| } | |
| .container { | |
| padding: 0 15px; | |
| } | |
| /* --- Hero Section (Curved) --- */ | |
| .header-section { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 4rem 1rem 10rem; | |
| /* Deep padding for clean overlap */ | |
| text-align: center; | |
| border-bottom-left-radius: 50% 20px; | |
| border-bottom-right-radius: 50% 20px; | |
| margin-bottom: -6rem; | |
| /* Negative margin for content overlap */ | |
| position: relative; | |
| z-index: 0; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .header-section h1 { | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| margin-bottom: 1rem; | |
| } | |
| .main-container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| /* --- Premium Card (The New Standard) --- */ | |
| .premium-card { | |
| background: white; | |
| border-radius: 20px; | |
| /* Outer Solid Border */ | |
| border: 1px solid rgba(26, 93, 58, 0.1); | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); | |
| /* Updated shadow to match Guide */ | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .premium-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 50px rgba(26, 93, 58, 0.12); | |
| } | |
| .premium-card .card-body { | |
| position: relative; | |
| z-index: 2; | |
| /* Content above border */ | |
| padding: 2rem; | |
| flex: 1 1 auto; | |
| } | |
| /* --- Typography & Layout --- */ | |
| .page-title { | |
| color: var(--primary); | |
| font-weight: 800; | |
| margin-bottom: 2rem; | |
| letter-spacing: -0.5px; | |
| } | |
| .section-title { | |
| color: var(--primary); | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| font-weight: 700; | |
| border-bottom: 2px solid #e9ecef; | |
| padding-bottom: 0.5rem; | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| border-color: var(--primary); | |
| border-radius: 50px; | |
| padding: 0.6rem 1.5rem; | |
| font-weight: 600; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--secondary); | |
| border-color: var(--secondary); | |
| } | |
| .form-select, | |
| .form-control { | |
| border-radius: 12px; | |
| padding: 0.8rem 1rem; | |
| border: 1px solid #dee2e6; | |
| } | |
| .form-select:focus, | |
| .form-control:focus { | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1); | |
| } | |
| a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: var(--secondary); | |
| } | |
| /* List Styling in Cards */ | |
| .list-group-item { | |
| border: none; | |
| border-bottom: 1px dashed #e9ecef; | |
| padding: 0.75rem 0; | |
| background: transparent; | |
| } | |
| .list-group-item:last-child { | |
| border-bottom: none; | |
| } | |
| /* Breadcrumb */ | |
| .breadcrumb { | |
| background: transparent; | |
| padding: 0; | |
| margin-bottom: 2rem; | |
| } | |
| .breadcrumb-item a { | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .breadcrumb-item.active { | |
| color: var(--primary); | |
| font-weight: 600; | |
| } | |
| /* --- Hero Button Emphasis --- */ | |
| .btn-hero-emphasized { | |
| background-color: #ffffff; | |
| color: var(--primary); | |
| font-weight: 800; | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| /* Semi-transparent ring */ | |
| background-clip: padding-box; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .btn-hero-emphasized:hover { | |
| transform: translateY(-3px) scale(1.02); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); | |
| background-color: #f8f9fa; | |
| color: var(--secondary); | |
| border-color: rgba(255, 255, 255, 0.5); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 992px) { | |
| .premium-card .card-body { | |
| padding: 1.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| {% block content %}{% endblock %} | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Function to update URL parameters based on filter values | |
| function updateUrlParams() { | |
| const searchTerm = document.getElementById('searchInput')?.value || ''; | |
| const schemeType = document.getElementById('schemeTypeFilter')?.value || ''; | |
| const beneficiary = document.getElementById('beneficiaryFilter')?.value || ''; | |
| const benefit = document.getElementById('benefitFilter')?.value || ''; | |
| // Save to localStorage | |
| localStorage.setItem('agri_search', searchTerm); | |
| localStorage.setItem('agri_schemeType', schemeType); | |
| localStorage.setItem('agri_beneficiary', beneficiary); | |
| localStorage.setItem('agri_benefit', benefit); | |
| // Update URL parameters | |
| const url = new URL(window.location); | |
| if (searchTerm) url.searchParams.set('search', searchTerm); | |
| else url.searchParams.delete('search'); | |
| if (schemeType) url.searchParams.set('type', schemeType); | |
| else url.searchParams.delete('type'); | |
| if (beneficiary) url.searchParams.set('beneficiary', beneficiary); | |
| else url.searchParams.delete('beneficiary'); | |
| if (benefit) url.searchParams.set('benefit', benefit); | |
| else url.searchParams.delete('benefit'); | |
| // Update URL without reloading the page | |
| window.history.pushState({}, '', url); | |
| } | |
| // Add to the script section in base.html | |
| function filterSchemes() { | |
| const searchTerm = document.getElementById('searchInput').value.toLowerCase(); | |
| const schemeType = document.getElementById('schemeTypeFilter')?.value || ''; | |
| const beneficiary = document.getElementById('beneficiaryFilter')?.value || ''; | |
| const benefit = document.getElementById('benefitFilter')?.value || ''; | |
| const schemeCards = document.querySelectorAll('.scheme-card'); | |
| let visibleCount = 0; | |
| schemeCards.forEach(card => { | |
| const title = card.querySelector('.card-title').textContent.toLowerCase(); | |
| const description = card.querySelector('.card-text').textContent.toLowerCase(); | |
| const content = card.getAttribute('data-keywords').toLowerCase(); | |
| const matchesSearch = title.includes(searchTerm) || description.includes(searchTerm); | |
| const matchesType = !schemeType || content.includes(schemeType.toLowerCase()); | |
| const matchesBeneficiary = !beneficiary || content.includes(beneficiary.toLowerCase()); | |
| const matchesBenefit = !benefit || content.includes(benefit.toLowerCase()); | |
| const cardParent = card.closest('.col-sm-12'); | |
| if (matchesSearch && matchesType && matchesBeneficiary && matchesBenefit) { | |
| cardParent.style.display = ''; | |
| visibleCount++; | |
| } else { | |
| cardParent.style.display = 'none'; | |
| } | |
| }); | |
| // Show a message when no results are found | |
| const container = document.querySelector('.scheme-container'); | |
| let noResultsMsg = document.querySelector('.no-results-message'); | |
| if (visibleCount === 0 && container) { | |
| if (!noResultsMsg) { | |
| noResultsMsg = document.createElement('div'); | |
| noResultsMsg.className = 'col-12 text-center py-4 no-results-message'; | |
| noResultsMsg.innerHTML = '<p class="text-muted">No schemes found matching your criteria.</p>'; | |
| container.appendChild(noResultsMsg); | |
| } | |
| } else if (noResultsMsg) { | |
| noResultsMsg.remove(); | |
| } | |
| // Update URL and localStorage | |
| updateUrlParams(); | |
| } | |
| // Function to restore filters from URL or localStorage | |
| function restoreFilters() { | |
| const params = new URLSearchParams(window.location.search); | |
| // Get values from URL params or localStorage | |
| const searchValue = params.get('search') || localStorage.getItem('agri_search') || ''; | |
| const typeValue = params.get('type') || localStorage.getItem('agri_schemeType') || ''; | |
| const beneficiaryValue = params.get('beneficiary') || localStorage.getItem('agri_beneficiary') || ''; | |
| const benefitValue = params.get('benefit') || localStorage.getItem('agri_benefit') || ''; | |
| // Set form values | |
| const searchInput = document.getElementById('searchInput'); | |
| const schemeTypeFilter = document.getElementById('schemeTypeFilter'); | |
| const beneficiaryFilter = document.getElementById('beneficiaryFilter'); | |
| const benefitFilter = document.getElementById('benefitFilter'); | |
| if (searchInput) searchInput.value = searchValue; | |
| if (schemeTypeFilter) schemeTypeFilter.value = typeValue; | |
| if (beneficiaryFilter) beneficiaryFilter.value = beneficiaryValue; | |
| if (benefitFilter) benefitFilter.value = benefitValue; | |
| // Apply filters if any were set | |
| if (searchValue || typeValue || beneficiaryValue || benefitValue) { | |
| filterSchemes(); | |
| } | |
| } | |
| // Add event listeners when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function () { | |
| // Restore filters | |
| restoreFilters(); | |
| // Add event listeners | |
| document.getElementById('searchInput')?.addEventListener('input', filterSchemes); | |
| document.getElementById('schemeTypeFilter')?.addEventListener('change', filterSchemes); | |
| document.getElementById('beneficiaryFilter')?.addEventListener('change', filterSchemes); | |
| document.getElementById('benefitFilter')?.addEventListener('change', filterSchemes); | |
| }); | |
| </script> | |
| {% block extra_scripts %}{% endblock %} | |
| </body> | |
| </html> |