|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Rainwater Harvesting Scheme Results</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
:root {
|
|
|
--primary-color: #2563eb;
|
|
|
--secondary-color: #3b82f6;
|
|
|
--accent-color: #1d4ed8;
|
|
|
--success-color: #059669;
|
|
|
--warning-color: #d97706;
|
|
|
--danger-color: #dc2626;
|
|
|
--neutral-100: #f5f5f5;
|
|
|
--neutral-200: #e5e7eb;
|
|
|
--neutral-300: #d1d5db;
|
|
|
--neutral-700: #374151;
|
|
|
--neutral-800: #1f2937;
|
|
|
--neutral-900: #111827;
|
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
line-height: 1.7;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
min-height: 100vh;
|
|
|
color: var(--neutral-800);
|
|
|
}
|
|
|
|
|
|
.page-header {
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
padding: 2rem 0;
|
|
|
margin-bottom: 2rem;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 1.5rem;
|
|
|
}
|
|
|
|
|
|
.page-title {
|
|
|
text-align: center;
|
|
|
color: white;
|
|
|
font-size: 2.5rem;
|
|
|
font-weight: 700;
|
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
|
margin-bottom: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.page-subtitle {
|
|
|
text-align: center;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
font-size: 1.1rem;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.content-wrapper {
|
|
|
display: grid;
|
|
|
gap: 2rem;
|
|
|
margin-bottom: 3rem;
|
|
|
}
|
|
|
|
|
|
.section-card {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-radius: 16px;
|
|
|
padding: 2rem;
|
|
|
box-shadow: var(--shadow-xl);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.section-card:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
|
}
|
|
|
|
|
|
.ai-summary {
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
|
|
|
border-left: 6px solid var(--primary-color);
|
|
|
}
|
|
|
|
|
|
.mandatory-section {
|
|
|
border-left: 6px solid var(--danger-color);
|
|
|
background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(239, 68, 68, 0.05) 100%);
|
|
|
}
|
|
|
|
|
|
.financial-section {
|
|
|
border-left: 6px solid var(--success-color);
|
|
|
background: linear-gradient(135deg, rgba(5, 150, 105, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
|
|
|
}
|
|
|
|
|
|
.other-section {
|
|
|
border-left: 6px solid var(--warning-color);
|
|
|
background: linear-gradient(135deg, rgba(217, 119, 6, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
|
|
|
}
|
|
|
|
|
|
.ngo-section {
|
|
|
border-left: 6px solid var(--secondary-color);
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
|
|
|
}
|
|
|
|
|
|
.section-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.section-icon {
|
|
|
width: 2.5rem;
|
|
|
height: 2.5rem;
|
|
|
border-radius: 12px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 1rem;
|
|
|
font-size: 1.25rem;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.ai-summary .section-icon {
|
|
|
background: var(--primary-color);
|
|
|
}
|
|
|
|
|
|
|
|
|
.ai-summary .scheme-analysis-container .section-icon {
|
|
|
background: var(--secondary-color);
|
|
|
}
|
|
|
|
|
|
.mandatory-section .section-icon {
|
|
|
background: var(--danger-color);
|
|
|
}
|
|
|
|
|
|
.financial-section .section-icon {
|
|
|
background: var(--success-color);
|
|
|
}
|
|
|
|
|
|
.other-section .section-icon {
|
|
|
background: var(--warning-color);
|
|
|
}
|
|
|
|
|
|
.ngo-section .section-icon {
|
|
|
background: var(--secondary-color);
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 1.5rem;
|
|
|
font-weight: 600;
|
|
|
color: var(--neutral-800);
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.section-count {
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
color: var(--neutral-700);
|
|
|
padding: 0.25rem 0.75rem;
|
|
|
border-radius: 20px;
|
|
|
font-size: 0.875rem;
|
|
|
font-weight: 500;
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
|
|
|
.ai-analysis-nav {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 0.5rem;
|
|
|
margin-bottom: 1.5rem;
|
|
|
border-bottom: 2px solid var(--neutral-200);
|
|
|
padding-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.nav-tab {
|
|
|
padding: 0.5rem 1rem;
|
|
|
border-radius: 8px;
|
|
|
background: var(--neutral-100);
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
font-weight: 500;
|
|
|
color: var(--neutral-700);
|
|
|
transition: all 0.2s ease;
|
|
|
}
|
|
|
|
|
|
.nav-tab:hover {
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.nav-tab.active {
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.ai-content {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.ai-content.active {
|
|
|
display: block;
|
|
|
animation: fadeIn 0.3s ease;
|
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
|
}
|
|
|
|
|
|
.scheme-grid {
|
|
|
display: grid;
|
|
|
gap: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.scheme-card {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 1.5rem;
|
|
|
box-shadow: var(--shadow-md);
|
|
|
border: 1px solid var(--neutral-200);
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.scheme-card:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: var(--shadow-lg);
|
|
|
}
|
|
|
|
|
|
.scheme-card::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
height: 4px;
|
|
|
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
|
|
}
|
|
|
|
|
|
.scheme-header {
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.scheme-title {
|
|
|
font-size: 1.25rem;
|
|
|
font-weight: 600;
|
|
|
color: var(--neutral-800);
|
|
|
margin-bottom: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.scheme-level {
|
|
|
display: inline-block;
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
padding: 0.25rem 0.75rem;
|
|
|
border-radius: 20px;
|
|
|
font-size: 0.75rem;
|
|
|
font-weight: 500;
|
|
|
text-transform: uppercase;
|
|
|
letter-spacing: 0.5px;
|
|
|
}
|
|
|
|
|
|
.scheme-details {
|
|
|
display: grid;
|
|
|
gap: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.detail-row {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
.detail-label {
|
|
|
font-weight: 600;
|
|
|
color: var(--neutral-700);
|
|
|
min-width: 120px;
|
|
|
margin-right: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.detail-value {
|
|
|
color: var(--neutral-800);
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.financial-highlight {
|
|
|
background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
|
|
|
border: 1px solid rgba(5, 150, 105, 0.3);
|
|
|
border-radius: 8px;
|
|
|
padding: 1rem;
|
|
|
margin: 1rem 0;
|
|
|
}
|
|
|
|
|
|
.financial-amount {
|
|
|
font-size: 1.25rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--success-color);
|
|
|
}
|
|
|
|
|
|
.scheme-actions {
|
|
|
display: flex;
|
|
|
gap: 0.75rem;
|
|
|
margin-top: 1.5rem;
|
|
|
padding-top: 1rem;
|
|
|
border-top: 1px solid var(--neutral-200);
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
padding: 0.5rem 1rem;
|
|
|
border-radius: 8px;
|
|
|
text-decoration: none;
|
|
|
font-weight: 500;
|
|
|
font-size: 0.875rem;
|
|
|
transition: all 0.2s ease;
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.btn-primary {
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
background: var(--accent-color);
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
.btn-outline {
|
|
|
background: transparent;
|
|
|
color: var(--primary-color);
|
|
|
border: 1px solid var(--primary-color);
|
|
|
}
|
|
|
|
|
|
.btn-outline:hover {
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.ngo-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
gap: 1rem;
|
|
|
}
|
|
|
|
|
|
.ngo-card {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 1.5rem;
|
|
|
box-shadow: var(--shadow-md);
|
|
|
border: 1px solid var(--neutral-200);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.ngo-card:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: var(--shadow-lg);
|
|
|
}
|
|
|
|
|
|
.ngo-name {
|
|
|
font-size: 1.125rem;
|
|
|
font-weight: 600;
|
|
|
color: var(--neutral-800);
|
|
|
margin-bottom: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.ngo-details {
|
|
|
display: grid;
|
|
|
gap: 0.5rem;
|
|
|
font-size: 0.875rem;
|
|
|
color: var(--neutral-700);
|
|
|
}
|
|
|
|
|
|
.ngo-contact {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.contact-icon {
|
|
|
width: 1rem;
|
|
|
height: 1rem;
|
|
|
color: var(--primary-color);
|
|
|
}
|
|
|
|
|
|
.back-section {
|
|
|
text-align: center;
|
|
|
padding: 2rem 0;
|
|
|
}
|
|
|
|
|
|
.back-btn {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
backdrop-filter: blur(10px);
|
|
|
color: var(--primary-color);
|
|
|
padding: 1rem 2rem;
|
|
|
border-radius: 12px;
|
|
|
text-decoration: none;
|
|
|
font-weight: 600;
|
|
|
font-size: 1.125rem;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 0.75rem;
|
|
|
transition: all 0.3s ease;
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.back-btn:hover {
|
|
|
background: white;
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: var(--shadow-lg);
|
|
|
}
|
|
|
|
|
|
.stats-bar {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
gap: 1rem;
|
|
|
margin-bottom: 2rem;
|
|
|
}
|
|
|
|
|
|
.stat-item {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
backdrop-filter: blur(10px);
|
|
|
padding: 1.5rem;
|
|
|
border-radius: 12px;
|
|
|
text-align: center;
|
|
|
box-shadow: var(--shadow-md);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.stat-number {
|
|
|
font-size: 2rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--primary-color);
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 0.875rem;
|
|
|
color: var(--neutral-700);
|
|
|
font-weight: 500;
|
|
|
text-transform: uppercase;
|
|
|
letter-spacing: 0.5px;
|
|
|
}
|
|
|
|
|
|
.markdown-content h1,
|
|
|
.markdown-content h2,
|
|
|
.markdown-content h3 {
|
|
|
color: var(--neutral-800);
|
|
|
margin-top: 1.5rem;
|
|
|
margin-bottom: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.markdown-content p {
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.markdown-content ul,
|
|
|
.markdown-content ol {
|
|
|
margin-left: 1.5rem;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.markdown-content table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.markdown-content th,
|
|
|
.markdown-content td {
|
|
|
border: 1px solid var(--neutral-300);
|
|
|
padding: 0.75rem;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.markdown-content th {
|
|
|
background: var(--neutral-100);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.container {
|
|
|
padding: 0 1rem;
|
|
|
}
|
|
|
|
|
|
.page-title {
|
|
|
font-size: 2rem;
|
|
|
}
|
|
|
|
|
|
.section-card {
|
|
|
padding: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.stats-bar {
|
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
|
gap: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.scheme-grid {
|
|
|
gap: 1rem;
|
|
|
}
|
|
|
|
|
|
.ngo-grid {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.empty-state {
|
|
|
text-align: center;
|
|
|
padding: 3rem 1rem;
|
|
|
color: var(--neutral-700);
|
|
|
}
|
|
|
|
|
|
.empty-state-icon {
|
|
|
font-size: 3rem;
|
|
|
color: var(--neutral-400);
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.empty-state-title {
|
|
|
font-size: 1.25rem;
|
|
|
font-weight: 600;
|
|
|
margin-bottom: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.empty-state-message {
|
|
|
color: var(--neutral-600);
|
|
|
}
|
|
|
|
|
|
|
|
|
.scheme-analysis-container {
|
|
|
display: grid;
|
|
|
gap: 1.5rem;
|
|
|
margin-top: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.scheme-analysis-card {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
box-shadow: var(--shadow-lg);
|
|
|
padding: 1.5rem;
|
|
|
}
|
|
|
|
|
|
.scheme-analysis-card .scheme-title {
|
|
|
font-size: 1.35rem;
|
|
|
color: var(--neutral-800);
|
|
|
margin-bottom: 1rem;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.scheme-analysis-card .scheme-level {
|
|
|
font-size: 0.85rem;
|
|
|
vertical-align: middle;
|
|
|
background: var(--secondary-color);
|
|
|
padding: 0.2rem 0.6rem;
|
|
|
border-radius: 15px;
|
|
|
color: white;
|
|
|
font-weight: 500;
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
|
|
|
.scheme-analysis-card .ai-analysis-nav {
|
|
|
border-bottom: 1px solid var(--neutral-200);
|
|
|
padding-bottom: 0.75rem;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
.scheme-analysis-card .nav-tab {
|
|
|
font-size: 0.85rem;
|
|
|
padding: 0.4rem 0.8rem;
|
|
|
}
|
|
|
</style>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="page-header">
|
|
|
<div class="container">
|
|
|
<h1 class="page-title">🌧️ Your Water Conservation Journey</h1>
|
|
|
<p class="page-subtitle">Personalized recommendations for sustainable water management</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="stats-bar">
|
|
|
<div class="stat-item">
|
|
|
<span class="stat-number">{{ (mandatory_schemes|length) + (financial_schemes|length) + (other_schemes|length) }}</span>
|
|
|
<span class="stat-label">Total Matches</span>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
<span class="stat-number">{{ mandatory_schemes|length }}</span>
|
|
|
<span class="stat-label">Mandatory</span>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
<span class="stat-number">{{ financial_schemes|length }}</span>
|
|
|
<span class="stat-label">Financial Aid</span>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
<span class="stat-number">{{ relevant_ngos|length }}</span>
|
|
|
<span class="stat-label">Support Orgs</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="content-wrapper">
|
|
|
<div class="section-card ai-summary">
|
|
|
<div class="section-header">
|
|
|
<div class="section-icon">🤖</div>
|
|
|
<h2 class="section-title">Overall AI-Powered Analysis</h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="ai-analysis-nav">
|
|
|
<button class="nav-tab active" onclick="showAIContent('executive', event)">Executive Summary</button>
|
|
|
<button class="nav-tab" onclick="showAIContent('swot', event)">Opportunities & Challenges</button>
|
|
|
<button class="nav-tab" onclick="showAIContent('comparative', event)">Scheme Comparison</button>
|
|
|
<button class="nav-tab" onclick="showAIContent('financial', event)">Financial Impact</button>
|
|
|
<button class="nav-tab" onclick="showAIContent('actionable', event)">Next Steps</button>
|
|
|
</div>
|
|
|
|
|
|
<div id="ai-executive" class="ai-content active">
|
|
|
<div class="markdown-content">{{ gemini_analysis.executive_summary }}</div>
|
|
|
</div>
|
|
|
<div id="ai-swot" class="ai-content">
|
|
|
<div class="markdown-content">{{ gemini_analysis.swot_analysis }}</div>
|
|
|
</div>
|
|
|
<div id="ai-comparative" class="ai-content">
|
|
|
<div class="markdown-content">{{ gemini_analysis.comparative_analysis }}</div>
|
|
|
</div>
|
|
|
<div id="ai-financial" class="ai-content">
|
|
|
<div class="markdown-content">{{ gemini_analysis.financial_implications }}</div>
|
|
|
</div>
|
|
|
<div id="ai-actionable" class="ai-content">
|
|
|
<div class="markdown-content">{{ gemini_analysis.actionable_next_steps }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
{% if filtered_schemes %}
|
|
|
<div class="section-card ai-summary">
|
|
|
<div class="section-header">
|
|
|
<div class="section-icon">🧠</div>
|
|
|
<h2 class="section-title">Detailed Analysis of Each Scheme</h2>
|
|
|
<span class="section-count">{{ filtered_schemes|length }} schemes analysed</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-analysis-container">
|
|
|
{% for scheme in filtered_schemes %}
|
|
|
<div class="scheme-analysis-card section-card" id="ai-scheme-card-{{ scheme.scheme_id }}">
|
|
|
<div class="scheme-analysis-header">
|
|
|
<h3 class="scheme-title">
|
|
|
{{ scheme.scheme_name }}
|
|
|
<span class="scheme-level">({{ scheme.scheme_level }})</span>
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="ai-analysis-nav">
|
|
|
<button class="nav-tab active" onclick="showIndividualAIContent('{{ scheme.scheme_id }}', 'overview', event)">Overview</button>
|
|
|
<button class="nav-tab" onclick="showIndividualAIContent('{{ scheme.scheme_id }}', 'benefits', event)">Benefits</button>
|
|
|
<button class="nav-tab" onclick="showIndividualAIContent('{{ scheme.scheme_id }}', 'eligibility', event)">Eligibility</button>
|
|
|
<button class="nav-tab" onclick="showIndividualAIContent('{{ scheme.scheme_id }}', 'recommendations', event)">Recommendations</button>
|
|
|
</div>
|
|
|
<div id="ai-{{ scheme.scheme_id }}-overview" class="ai-content active">
|
|
|
<div class="markdown-content">{{ scheme.individual_gemini_analysis.overview }}</div>
|
|
|
</div>
|
|
|
<div id="ai-{{ scheme.scheme_id }}-benefits" class="ai-content">
|
|
|
<div class="markdown-content">{{ scheme.individual_gemini_analysis.benefits }}</div>
|
|
|
</div>
|
|
|
<div id="ai-{{ scheme.scheme_id }}-eligibility" class="ai-content">
|
|
|
<div class="markdown-content">{{ scheme.individual_gemini_analysis.eligibility }}</div>
|
|
|
</div>
|
|
|
<div id="ai-{{ scheme.scheme_id }}-recommendations" class="ai-content">
|
|
|
<div class="markdown-content">{{ scheme.individual_gemini_analysis.recommendations }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
</div>
|
|
|
{% else %}
|
|
|
<div class="section-card">
|
|
|
<div class="empty-state">
|
|
|
<div class="empty-state-icon">💧</div>
|
|
|
<div class="empty-state-title">No Specific Schemes Matched</div>
|
|
|
<div class="empty-state-message">
|
|
|
We couldn't find any individual rainwater harvesting schemes that perfectly match your criteria for detailed analysis.
|
|
|
Please refer to the <strong>"Overall AI-Powered Analysis"</strong> above for general recommendations and broader insights.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
|
|
{% if mandatory_schemes %}
|
|
|
<div class="section-card mandatory-section">
|
|
|
<div class="section-header">
|
|
|
<div class="section-icon">⚠️</div>
|
|
|
<h2 class="section-title">Mandatory Compliance Required</h2>
|
|
|
<span class="section-count">{{ mandatory_schemes|length }} scheme(s)</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-grid">
|
|
|
{% for scheme in mandatory_schemes %}
|
|
|
<div class="scheme-card">
|
|
|
<div class="scheme-header">
|
|
|
<h3 class="scheme-title">{{ scheme.scheme_name }}</h3>
|
|
|
<span class="scheme-level">{{ scheme.scheme_level }}</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-details">
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📍 Location:</span>
|
|
|
<span class="detail-value">{{ scheme.geographical_scope.state_ut | join(', ') }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">🎯 Objective:</span>
|
|
|
<span class="detail-value">{{ scheme.objective }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📋 Conditions:</span>
|
|
|
<span class="detail-value">
|
|
|
{% for condition in scheme.eligibility_and_parameters.conditions %}
|
|
|
{{ condition.parameter }}: {% if condition.operator %}{{ condition.operator }} {% endif %}{{ condition.value }}{{ condition.unit if condition.unit else '' }}{% if not loop.last %}, {% endif %}
|
|
|
{% else %}
|
|
|
N/A
|
|
|
{% endfor %}
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">💡 Benefits:</span>
|
|
|
<span class="detail-value">{{ scheme.benefits.persuasive_summary }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📄 Process:</span>
|
|
|
<span class="detail-value">{{ scheme.application_process_summary }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📎 Documents:</span>
|
|
|
<span class="detail-value">{{ scheme.documents_required | join(', ') if scheme.documents_required else 'N/A' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-actions">
|
|
|
<a href="{{ scheme.source_link }}" target="_blank" class="btn btn-primary">
|
|
|
📄 View Official Source
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
|
|
|
{% if financial_schemes %}
|
|
|
<div class="section-card financial-section">
|
|
|
<div class="section-header">
|
|
|
<div class="section-icon">💰</div>
|
|
|
<h2 class="section-title">Financial Assistance Available</h2>
|
|
|
<span class="section-count">{{ financial_schemes|length }} scheme(s)</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-grid">
|
|
|
{% for scheme in financial_schemes %}
|
|
|
<div class="scheme-card">
|
|
|
<div class="scheme-header">
|
|
|
<h3 class="scheme-title">{{ scheme.scheme_name }}</h3>
|
|
|
<span class="scheme-level">{{ scheme.scheme_level }}</span>
|
|
|
</div>
|
|
|
|
|
|
{% for fa in scheme.financial_assistance %}
|
|
|
<div class="financial-highlight">
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">💵 Assistance:</span>
|
|
|
<span class="detail-value">{{ fa.description }}</span>
|
|
|
</div>
|
|
|
{% if fa.value %}
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📊 Value:</span>
|
|
|
<span class="detail-value">{{ fa.value }}{{ fa.unit if fa.unit else '' }}</span>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
{% if fa['maximum_ceiling_₹'] %}
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">🏆 Maximum:</span>
|
|
|
<span class="detail-value financial-amount">₹{{ '{:,.0f}'.format(fa['maximum_ceiling_₹']) }}</span>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
|
|
|
<div class="scheme-details">
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📍 Location:</span>
|
|
|
<span class="detail-value">{{ scheme.geographical_scope.state_ut | join(', ') }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">🎯 Objective:</span>
|
|
|
<span class="detail-value">{{ scheme.objective }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">🏷️ Subsidy Types:</span>
|
|
|
<span class="detail-value">{{ scheme.subsidy_types | join(', ') if scheme.subsidy_types else 'N/A' }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">👥 Eligibility:</span>
|
|
|
<span class="detail-value">{{ scheme.eligibility_and_parameters.beneficiary_types | join(', ') }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">💡 Why Choose This:</span>
|
|
|
<span class="detail-value">{{ scheme.benefits.persuasive_summary }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📄 Process:</span>
|
|
|
<span class="detail-value">{{ scheme.application_process_summary }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📎 Documents:</span>
|
|
|
<span class="detail-value">{{ scheme.documents_required | join(', ') if scheme.documents_required else 'N/A' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-actions">
|
|
|
<a href="{{ scheme.source_link }}" target="_blank" class="btn btn-primary">
|
|
|
📄 Apply Now
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
|
|
|
{% if other_schemes %}
|
|
|
<div class="section-card other-section">
|
|
|
<div class="section-header">
|
|
|
<div class="section-icon">🔍</div>
|
|
|
<h2 class="section-title">Additional Opportunities</h2>
|
|
|
<span class="section-count">{{ other_schemes|length }} scheme(s)</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-grid">
|
|
|
{% for scheme in other_schemes %}
|
|
|
<div class="scheme-card">
|
|
|
<div class="scheme-header">
|
|
|
<h3 class="scheme-title">{{ scheme.scheme_name }}</h3>
|
|
|
<span class="scheme-level">{{ scheme.scheme_level }}</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-details">
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">📍 Location:</span>
|
|
|
<span class="detail-value">{{ scheme.geographical_scope.state_ut | join(', ') }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">🎯 Objective:</span>
|
|
|
<span class="detail-value">{{ scheme.objective }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">💡 Relevance:</span>
|
|
|
<span class="detail-value">{{ scheme.benefits.persuasive_summary }}</span>
|
|
|
</div>
|
|
|
<div class="detail-row">
|
|
|
<span class="detail-label">👥 Eligibility:</span>
|
|
|
<span class="detail-value">{{ scheme.eligibility_and_parameters.beneficiary_types | join(', ') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="scheme-actions">
|
|
|
<a href="{{ scheme.source_link }}" target="_blank" class="btn btn-outline">
|
|
|
📖 Learn More
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
|
|
|
{% if user_inputs.seeking_technical_guidance == 'Yes' and relevant_ngos %}
|
|
|
<div class="section-card ngo-section">
|
|
|
<div class="section-header">
|
|
|
<div class="section-icon">🤝</div>
|
|
|
<h2 class="section-title">Technical Support Organizations</h2>
|
|
|
<span class="section-count">{{ relevant_ngos|length }} organization(s)</span>
|
|
|
</div>
|
|
|
|
|
|
<p style="margin-bottom: 1.5rem; color: var(--neutral-700);">
|
|
|
These organizations can provide technical guidance, implementation support, and expert consultation for your rainwater harvesting project.
|
|
|
</p>
|
|
|
|
|
|
<div class="ngo-grid">
|
|
|
{% for ngo in relevant_ngos %}
|
|
|
<div class="ngo-card">
|
|
|
<h3 class="ngo-name">{{ ngo.Name }}</h3>
|
|
|
<div class="ngo-details">
|
|
|
{% if ngo.Address %}
|
|
|
<div class="ngo-contact">
|
|
|
<span class="contact-icon">📍</span>
|
|
|
<span>{{ ngo.Address }}</span>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
{% if ngo.Phone %}
|
|
|
<div class="ngo-contact">
|
|
|
<span class="contact-icon">📞</span>
|
|
|
<span>{{ ngo.Phone }}{% if ngo.get('Alternate_Number') and ngo.Alternate_Number != 'N/A' and ngo.Alternate_Number != '' %} • {{ ngo.Alternate_Number }}{% endif %}</span>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
{% if ngo.Email %}
|
|
|
<div class="ngo-contact">
|
|
|
<span class="contact-icon">✉️</span>
|
|
|
<span>{{ ngo.Email }}</span>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="back-section">
|
|
|
<a href="{{ url_for('index') }}" class="back-btn">
|
|
|
← Go Back to Filters
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function showAIContent(tabId, event) {
|
|
|
|
|
|
document.querySelectorAll('.ai-summary > .ai-content').forEach(div => {
|
|
|
div.classList.remove('active');
|
|
|
});
|
|
|
|
|
|
document.querySelectorAll('.ai-summary .nav-tab').forEach(button => {
|
|
|
button.classList.remove('active');
|
|
|
});
|
|
|
|
|
|
|
|
|
document.getElementById('ai-' + tabId).classList.add('active');
|
|
|
|
|
|
if (event) {
|
|
|
event.currentTarget.classList.add('active');
|
|
|
} else {
|
|
|
document.querySelector('.ai-summary .nav-tab').classList.add('active');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function showIndividualAIContent(schemeId, tabId, event) {
|
|
|
|
|
|
document.querySelectorAll(`#ai-scheme-card-${schemeId} > .ai-content`).forEach(div => {
|
|
|
div.classList.remove('active');
|
|
|
});
|
|
|
|
|
|
document.querySelectorAll(`#ai-scheme-card-${schemeId} .nav-tab`).forEach(button => {
|
|
|
button.classList.remove('active');
|
|
|
});
|
|
|
|
|
|
|
|
|
document.getElementById(`ai-${schemeId}-${tabId}`).classList.add('active');
|
|
|
|
|
|
if (event) {
|
|
|
event.currentTarget.classList.add('active');
|
|
|
} else {
|
|
|
|
|
|
const firstTabButton = document.querySelector(`#ai-scheme-card-${schemeId} .ai-analysis-nav .nav-tab`);
|
|
|
if (firstTabButton) {
|
|
|
firstTabButton.classList.add('active');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
const markdownIt = new markdownit();
|
|
|
document.querySelectorAll('.markdown-content').forEach(contentDiv => {
|
|
|
const rawMarkdown = contentDiv.innerHTML;
|
|
|
const renderedHtml = markdownIt.render(rawMarkdown);
|
|
|
contentDiv.innerHTML = renderedHtml;
|
|
|
});
|
|
|
|
|
|
|
|
|
showAIContent('executive');
|
|
|
|
|
|
|
|
|
if (document.querySelectorAll('.scheme-analysis-container').length > 0) {
|
|
|
document.querySelectorAll('.scheme-analysis-container').forEach(container => {
|
|
|
container.querySelectorAll('.scheme-analysis-card').forEach(card => {
|
|
|
const schemeId = card.id.replace('ai-scheme-card-', '');
|
|
|
showIndividualAIContent(schemeId, 'overview');
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
