Spaces:

krushimitravit
/

Pest_Pedia

Sleeping

App Files Files Community

Pest_Pedia / templates /index.html

krushimitravit

Upload 23 files

7fc7a89 verified 4 months ago

raw

history blame contribute delete

34 kB

	<!DOCTYPE html>
	<html lang="{{ current_language }}">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pestpedia \| Agri Smart</title>

	<!-- Google Fonts: Outfit -->
	<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;800&display=swap"
	rel="stylesheet">

	<!-- Bootstrap 5 CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- FontAwesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

	<!-- DotLottie Player -->
	<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.11/dist/dotlottie-wc.js" type="module"></script>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

	<style>
	:root {
	--primary: #1a5d3a;
	--primary-dark: #143d2e;
	--accent: #d4a017;
	--pest: #dc3545;
	--disease: #6f42c1;
	--light-bg: #f8f9fa;
	--surface: #ffffff;
	--font-main: 'Outfit', sans-serif;
	--organic: #27ae60;
	--chemical: #e74c3c;
	}

	body {
	background-color: var(--light-bg);
	font-family: var(--font-main);
	color: #2c3e50;
	}

	/* --- HERO HEADER --- */
	.page-header {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: white;
	padding: 3rem 1rem 5rem;
	margin-bottom: 3rem;
	box-shadow: 0 10px 30px rgba(26, 93, 58, 0.3);
	position: relative;
	}

	.page-header h1 {
	font-weight: 800;
	letter-spacing: -1px;
	}

	.lang-select-wrapper {
	background: rgba(255, 255, 255, 0.15);
	padding: 5px 15px;
	border-radius: 30px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.lang-select-wrapper select {
	background: transparent;
	border: none;
	color: white;
	font-weight: 600;
	cursor: pointer;
	}

	.lang-select-wrapper select:focus {
	outline: none;
	background: var(--primary);
	}

	/* --- FILTERS --- */
	.filter-buttons {
	margin-top: -2.5rem;
	margin-bottom: 2rem;
	}

	.filter-btn {
	background: white;
	border: none;
	color: #555;
	padding: 10px 25px;
	border-radius: 30px;
	font-weight: 600;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	margin: 0 5px;
	transition: all 0.3s ease;
	border: 2px solid #1a5d3a;
	}

	.filter-btn:hover,
	.filter-btn.active {
	background: var(--primary);
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(26, 93, 58, 0.25);
	}

	.search-box {
	max-width: 500px;
	margin: 20px auto 0;
	background: white;
	border-radius: 30px;
	padding: 5px 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	border: 1px solid #626161;

	}

	.search-box input {
	border: none;
	box-shadow: none;
	font-size: 1rem;
	}

	/* --- CARDS --- */
	.grid-container {
	max-width: 1200px;
	margin: 0 auto;
	}

	.item-card .card {
	border: none;
	border-radius: 16px;
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	height: 100%;
	border: 2px dashed #1a5d3a;
	}

	.item-card .card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	}

	.card-img-wrapper {
	height: 200px;
	overflow: hidden;
	position: relative;
	}

	.card-img-top {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
	}

	.card:hover .card-img-top {
	transform: scale(1.1);
	}

	.type-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 5px 12px;
	border-radius: 20px;
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	}

	.type-badge.pest {
	background: var(--pest);
	}

	.type-badge.disease {
	background: var(--disease);
	}

	.card-body {
	padding: 1.5rem;
	}

	.card-title {
	font-weight: 700;
	color: var(--primary-dark);
	margin-bottom: 0.5rem;
	}

	.crop-tag {
	background: #e8f5e9;
	color: var(--primary);
	font-size: 0.8rem;
	padding: 4px 8px;
	border-radius: 6px;
	font-weight: 600;
	margin-right: 4px;
	}

	/* --- MODAL --- */
	.custom-modal .modal-content {
	border-radius: 24px;
	border: none;
	overflow: hidden;
	background: #fafafa;
	}

	.modal-body {
	padding: 0;
	position: relative;
	min-height: 550px;
	}

	.btn-close-white {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	filter: invert(1);
	opacity: 0.8;
	}

	.diagnosis-header {
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	padding: 2.5rem 2rem 5rem;
	color: white;
	text-align: center;
	}

	.dh-img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 5px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 1rem;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	}

	.dh-title {
	font-weight: 800;
	font-size: 2rem;
	margin-bottom: 0.2rem;
	}

	.confidence-badge {
	background: rgba(255, 255, 255, 0.2);
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	backdrop-filter: blur(5px);
	margin-top: 10px;
	}

	.confidence-dot {
	width: 8px;
	height: 8px;
	background: #2ecc71;
	border-radius: 50%;
	box-shadow: 0 0 5px #2ecc71;
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% {
	opacity: 0.6;
	transform: scale(1);
	}

	50% {
	opacity: 1;
	transform: scale(1.2);
	}

	100% {
	opacity: 0.6;
	transform: scale(1);
	}
	}

	/* CONTENT STYLING */
	.parsed-text strong {
	background-color: rgba(46, 204, 113, 0.15);
	color: var(--primary-dark);
	padding: 0 4px;
	border-radius: 4px;
	font-weight: 700;
	}

	.parsed-text,
	.prevent-card,
	.rx-card {
	font-size: 0.95rem;
	line-height: 1.8;
	color: #4a5568;
	}

	.parsed-text ul,
	.rx-card ul {
	padding-left: 20px;
	list-style-type: disc;
	}

	.parsed-text li,
	.rx-card li {
	margin-bottom: 8px;
	}

	.parsed-text p {
	margin-bottom: 0.8rem;
	}

	.parsed-text strong {
	display: inline-block;
	margin-top: 0.5rem;
	}

	/* NAV TABS */
	.nav-tabs-wrapper {
	margin-top: -30px;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 5;
	padding-bottom: 1.5rem;
	width: 100%;
	}

	.nav-tabs {
	background: white;
	border-radius: 30px;
	padding: 6px;
	border: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 90%;
	}

	.nav-link {
	border: none !important;
	border-radius: 25px !important;
	color: #777 !important;
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	padding: 10px 20px !important;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 8px;
	}

	.nav-link:hover {
	color: var(--primary) !important;
	background: #f8f9fa;
	}

	.nav-link.active {
	background: var(--primary) !important;
	color: white !important;
	box-shadow: 0 4px 15px rgba(26, 93, 58, 0.4);
	transform: scale(1.05);
	}

	.tab-content {
	padding: 0 2rem 2rem;
	}

	.tab-pane {
	animation: fadeIn 0.4s ease-out;
	}

	/* DIAGNOSIS */
	.diag-section {
	background: white;
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
	}

	.ds-header {
	font-size: 0.8rem;
	text-transform: uppercase;
	color: #888;
	font-weight: 800;
	letter-spacing: 1px;
	margin-bottom: 1rem;
	border-bottom: 1px solid #eee;
	padding-bottom: 8px;
	}

	/* RISK METER */
	.risk-container {
	text-align: center;
	background: linear-gradient(to right, #ffffff, #fdfdfd);
	}

	.impact-stat {
	font-size: 3rem;
	font-weight: 800;
	color: #e74c3c;
	line-height: 1;
	margin-bottom: 5px;
	}

	.risk-meter {
	height: 12px;
	background: #eee;
	border-radius: 6px;
	overflow: hidden;
	margin: 10px auto;
	max-width: 300px;
	}

	.risk-fill {
	height: 100%;
	background: linear-gradient(90deg, #f1c40f, #e74c3c);
	animation: growLine 1.5s ease-out forwards;
	width: 0;
	}

	@keyframes growLine {
	to {
	width: var(--risk-width);
	}
	}

	/* LIFECYCLE IMAGES */
	.lc-wrapper {
	position: relative;
	padding: 20px 0;
	max-width: 600px;
	margin: 0 auto;
	}

	.lc-steps {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 2;
	margin-top: 20px;
	}

	.lc-line {
	position: absolute;
	top: 50%;
	left: 50px;
	right: 50px;
	height: 3px;
	background: #e0e0e0;
	z-index: 1;
	transform: translateY(-50%);
	}

	.lc-step {
	text-align: center;
	width: 100px;
	position: relative;
	}

	.lc-img-box {
	background: white;
	/* Mask line */
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	transition: transform 0.3s;
	position: relative;
	z-index: 2;
	width: 80px;
	height: 80px;
	/* Base size */
	}

	/* Specific Sizes */
	.lc-step.egg .lc-img-box {
	width: 60px;
	height: 60px;
	margin-top: 10px;
	border-radius: 50%;
	}

	.lc-step.larva .lc-img-box {
	width: 80px;
	height: 80px;
	}

	.lc-step.pupa .lc-img-box {
	width: 80px;
	height: 80px;
	}

	.lc-step.adult .lc-img-box {
	width: 110px;
	height: 110px;
	margin-top: -15px;
	}

	.lc-img-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
	}

	.lc-step:hover .lc-img-box img {
	transform: scale(1.15);
	}

	.lc-label {
	font-size: 0.9rem;
	font-weight: 800;
	color: #444;
	margin-top: 5px;
	}

	/* TOGGLE SWITCH FOR TRETAMENT */
	.toggle-container {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
	background: #e8f5e9;
	border-radius: 30px;
	padding: 4px;
	width: fit-content;
	margin: 0 auto 1.5rem;
	}

	.toggle-btn {
	border: none;
	background: transparent;
	padding: 8px 25px;
	border-radius: 25px;
	font-weight: 600;
	color: #666;
	transition: all 0.3s;
	}

	.toggle-btn.active {
	background: white;
	color: var(--primary);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}

	.toggle-btn.chemical-active {
	color: var(--chemical);
	}

	.rx-card {
	padding: 2rem;
	border-radius: 12px;
	background: white;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	border-left: 5px solid var(--organic);
	transition: border-left 0.3s;
	}

	/* SYMPTOMS & PREVENTION */
	.symptoms-list {
	list-style: none !important;
	padding: 0;
	}

	.symptoms-list li {
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	border-bottom: 1px dashed #f0f0f0;
	padding-bottom: 10px;
	list-style: none !important;
	}

	.symptoms-list li::before {
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--primary);
	font-size: 1.1rem;
	}

	.prevent-card {
	background: white;
	border-radius: 12px;
	padding: 1.2rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
	border-left: 5px solid #3498db;
	margin-bottom: 1rem;
	position: relative;
	padding-left: 3.5rem;
	}

	.prevent-num {
	position: absolute;
	left: 1rem;
	top: 1.2rem;
	width: 28px;
	height: 28px;
	background: #e1f0fa;
	color: #3498db;
	border-radius: 50%;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	}

	.prevent-card strong {
	color: #2c3e50;
	font-size: 1rem;
	display: block;
	margin-bottom: 4px;
	}

	.loader-overlay-inner {
	position: absolute;
	inset: 0;
	background: var(--primary);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}
	</style>
	</head>

	<body>

	<header class="page-header text-center">
	<h1 class="display-5 mb-2"><i class="fas fa-book-open"></i> Pestpedia</h1>
	<p class="mb-4">The Intelligent Agricultural Encyclopedia</p>
	<div class="lang-select-wrapper">
	<i class="fas fa-language"></i>
	<select id="languageSelect" name="language">
	{% for code, name in languages.items() %}
	<option value="{{ code }}" {% if code==current_language %}selected{% endif %}>{{ name }}</option>
	{% endfor %}
	</select>
	</div>
	</header>

	<div class="container grid-container">
	<div class="filter-buttons text-center">
	<button class="filter-btn active" data-filter="all">All</button>
	<button class="filter-btn" data-filter="pest">Pests</button>
	<button class="filter-btn" data-filter="disease">Diseases</button>
	<div class="search-box">
	<i class="fas fa-search text-muted me-2"></i>
	<input type="text" class="form-control" id="searchInput" placeholder="Search pests or crops...">
	</div>
	</div>

	<div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 g-4" id="itemsContainer">
	{% for item in pests_diseases %}
	<div class="col item-card border:3px solid #" 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="card-img-wrapper">
	<img data-src="{{ item.image_url }}" class="card-img-top lazy-load" alt="{{ item.name }}">
	<span class="type-badge {{ item.type }}">{{ item.type }}</span>
	</div>
	<div class="card-body">
	<h5 class="card-title">{{ item.name }}</h5>
	<div class="d-flex flex-wrap">
	{% for crop in item.crop.split(', ') %}
	<span class="crop-tag">{{ crop }}</span>
	{% endfor %}
	</div>
	</div>
	</div>
	</div>
	{% endfor %}
	</div>
	<div id="noResults" class="text-center mt-5" style="display: none;">
	<i class="fas fa-search fa-3x text-muted mb-3"></i>
	<p class="text-muted">No matches found.</p>
	</div>
	</div>

	<div class="modal fade custom-modal" id="detailModal" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-lg modal-dialog-centered">
	<div class="modal-content">
	<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
	aria-label="Close"></button>
	<div class="modal-body" id="modalBody">
	</div>
	</div>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
	<script>
	const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
	let loadedDetails = {};
	let currentLanguage = document.getElementById('languageSelect').value \|\| 'en';

	document.getElementById('languageSelect').addEventListener('change', function () {
	currentLanguage = this.value; loadedDetails = {};
	const formData = new FormData(); formData.append('language', currentLanguage);
	fetch('/set_language', { method: 'POST', body: formData }).then(() => location.reload());
	});

	document.addEventListener("DOMContentLoaded", function () {
	const lazyImages = document.querySelectorAll(".lazy-load");
	const observer = new IntersectionObserver((entries, obs) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.src = entry.target.dataset.src;
	entry.target.classList.remove("lazy-load");
	obs.unobserve(entry.target);
	}
	});
	});
	lazyImages.forEach(img => observer.observe(img));
	});

	const searchInput = document.getElementById('searchInput');
	const filterButtons = document.querySelectorAll('.filter-btn');
	function filterItems() {
	const term = searchInput.value.toLowerCase();
	const activeType = document.querySelector('.filter-btn.active').getAttribute('data-filter');
	let visible = 0;
	document.querySelectorAll('.item-card').forEach(item => {
	const type = item.getAttribute('data-type');
	const name = item.getAttribute('data-name');
	if ((activeType === 'all' \|\| type === activeType) && (!term \|\| name.includes(term))) {
	item.style.display = 'block'; visible++;
	} else { item.style.display = 'none'; }
	});
	document.getElementById('noResults').style.display = visible === 0 ? 'block' : 'none';
	}
	filterButtons.forEach(btn => btn.addEventListener('click', function () {
	filterButtons.forEach(b => b.classList.remove('active')); this.classList.add('active'); filterItems();
	}));
	searchInput.addEventListener('input', filterItems);

	function showDetails(id) {
	const loadingHTML = `
	<div class="loader-overlay-inner">
	<dotlottie-wc
	src="https://lottie.host/b81fb6d9-fac1-4d1b-b46f-d50817e6a76e/kmSCom1FGu.lottie"
	style="width: 300px; height: 300px"
	autoplay loop
	></dotlottie-wc>
	<h5 style="color:white; font-weight:700; margin-top:-20px; opacity:0.9;">AI Analyzing Sample...</h5>
	</div>`;
	document.getElementById('modalBody').innerHTML = loadingHTML;
	detailModal.show();

	// Unique cache key because structure changed
	const cacheKey = `${id}-${currentLanguage}-v4-structured`;

	fetch(`/get_details/${id}?lang=${currentLanguage}`).then(res => res.json()).then(data => {
	loadedDetails[cacheKey] = data; displayDetails(data);
	});
	}

	function displayDetails(data) {
	const d = data.details;

	// Helper to force new lines for numbered lists so markdown renders them as lists
	const formatLists = (text) => {
	if (!text) return "";
	// Replace "1) " or "1. " with "\n\n1. " to force a new list block
	// Regex looks for: (Space or start)(Digit)(Dot or Paren)(Space)
	return text.replace(/(^\|\s)(\d+)([\)\.])\s+/g, "\n\n$2$3 ");
	};

	// --- PARSING STRUCTURED DATA ---
	// Organic
	let organicTx = d.management.organic ? d.management.organic.text : "No organic data available.";
	// Clean up text
	organicTx = organicTx.replace(/^\s(?:#\|\\)\s(?:Organic\|Management\|Control)\s(?::)?(?:\\)?\s/i, "").replace(/^\s-\s/, "");
	const organicHtml = marked.parse(formatLists(organicTx));

	// Chemical
	let chemicalTx = d.management.chemical ? d.management.chemical.text : "No chemical data available.";
	chemicalTx = chemicalTx.replace(/^\s(?:#\|\\)\s(?:Chemical\|Management\|Control)\s(?::)?(?:\\)?\s/i, "").replace(/^\s-\s/, "");
	const chemicalHtml = marked.parse(formatLists(chemicalTx));

	// Lifecycle
	const lifecycleHtml = marked.parse(formatLists(d.lifecycle.text));

	// Symptoms
	let symptomsHtml = marked.parse(formatLists(d.symptoms.text));
	if (!symptomsHtml.includes('<ul>')) {
	const pts = d.symptoms.text.split('. ').filter(s => s.length > 5).map(s => `<li>${s.replace(/\.$/, '')}</li>`).join('');
	symptomsHtml = `<ul class="symptoms-list">${pts}</ul>`;
	} else {
	symptomsHtml = symptomsHtml.replace('<ul>', '<ul class="symptoms-list">');
	}
	symptomsHtml = symptomsHtml.replace(/<li>\s•\s/g, '<li>');

	// Prevention (Cards)
	let preventList = d.prevention.text.split("\n").filter(l => l.trim().startsWith("-") \|\| l.trim().startsWith("*") \|\| l.match(/^\d+[\.\)]/));
	let preventCards = d.prevention.text;

	// Use formatLists for prevention text if we fall back to raw text,
	// BUT if we found list items, map them to cards.
	if (preventList.length > 0) {
	preventCards = preventList.map((item, idx) => {
	let cleanItem = item.replace(/^[\-\]\s/, "").replace(/^\d+[\.\)]\s*/, "");
	let parsedItem = marked.parseInline(cleanItem);
	return `<div class="prevent-card"><div class="prevent-num">${idx + 1}</div>${parsedItem.replace('', '<strong>').replace('', '</strong>')}</div>`
	}).join("");
	} else {
	// If implicit list logic failed, try standard markdown
	preventCards = marked.parse(formatLists(d.prevention.text));
	}

	// Overview
	// Also use formatLists here in addition to the header spacing fix
	let impactText = d.impact.text.replace(/(\\[A-Za-z\s]+:\\)/g, "\n\n$1");
	const overviewHtml = marked.parse(formatLists(impactText));

	// Render basic HTML first
	const html = `
	<div class="diagnosis-header">
	<img src="${data.image_url}" class="dh-img">
	<div class="dh-title">${data.name}</div>
	<div class="confidence-badge"><div class="confidence-dot"></div> AI Confidence: 98%</div>
	</div>

	<div class="nav-tabs-wrapper">
	<ul class="nav nav-tabs" role="tablist">
	<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-diagnosis"><i class="fas fa-stethoscope"></i> Diagnosis</button></li>
	<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-symptoms"><i class="fas fa-clipboard-list"></i> Symptoms</button></li>
	<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-treatment"><i class="fas fa-leaf"></i> Treatment</button></li>
	<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-prevent"><i class="fas fa-shield-virus"></i> Prevention</button></li>
	</ul>
	</div>

	<div class="tab-content">
	<!-- DIAGNOSIS -->
	<div class="tab-pane fade show active" id="tab-diagnosis">
	<div class="diag-section risk-container">
	<div class="impact-stat">High</div>
	<div class="text-muted fw-bold small uppercase">Projected Economic Impact</div>
	<div class="risk-meter"><div class="risk-fill" style="--risk-width: 90%"></div></div>
	</div>

	<div class="diag-section" id="lifecycle-section" style="display: ${data.type === 'pest' ? 'block' : 'none'};">
	<div class="ds-header">Lifecycle Stages</div>
	<div class="lc-wrapper">
	<div class="lc-line"></div>
	<div class="lc-steps">
	<div class="lc-step egg">
	<div class="lc-img-box"><img src="/static/images/egg-removebg-preview.png"></div>
	<div class="lc-label">Egg</div>
	</div>
	<div class="lc-step larva">
	<div class="lc-img-box"><img src="/static/images/Larvae_Production-removebg-preview.png"></div>
	<div class="lc-label">Larva</div>
	</div>
	<div class="lc-step pupa">
	<div class="lc-img-box"><img src="/static/images/Bee_Larvae-removebg-preview.png"></div>
	<div class="lc-label">Pupa</div>
	</div>
	<div class="lc-step adult">
	<div class="lc-img-box"><img src="/static/images/Screenshot_2025-12-31_184437-removebg-preview.png"></div>
	<div class="lc-label">Adult</div>
	</div>
	</div>
	</div>
	</div>

	<div class="diag-section parsed-text">
	<div class="ds-header">Overview</div>
	${overviewHtml}
	</div>
	</div>

	<!-- SYMPTOMS -->
	<div class="tab-pane fade" id="tab-symptoms">
	<div class="diag-section parsed-text">
	${symptomsHtml}
	</div>
	</div>

	<!-- TREATMENT (With Toggle) -->
	<div class="tab-pane fade" id="tab-treatment">
	<div class="toggle-container">
	<button class="toggle-btn active" id="btn-organic" onclick="switchTreatment('organic')">Organic</button>
	<button class="toggle-btn" id="btn-chemical" onclick="switchTreatment('chemical')">Chemical</button>
	</div>

	<div class="rx-card" id="rx-card-container">
	<h6 class="fw-bold text-success mb-3" id="rx-title"><i class="fas fa-leaf me-2"></i>Sustainable Management</h6>
	<div class="parsed-text" id="rx-content">${organicHtml}</div>
	</div>

	<!-- Hidden content to swap -->
	<div style="display:none;" id="data-organic">${organicHtml}</div>
	<div style="display:none;" id="data-chemical">${chemicalHtml}</div>
	</div>

	<!-- PREVENTION -->
	<div class="tab-pane fade" id="tab-prevent">
	${preventCards}
	</div>
	</div>
	`;
	document.getElementById('modalBody').innerHTML = html;
	}

	// Global function for toggle
	window.switchTreatment = function (type) {
	const btnOrg = document.getElementById('btn-organic');
	const btnChem = document.getElementById('btn-chemical');
	const container = document.getElementById('rx-card-container');
	const title = document.getElementById('rx-title');
	const content = document.getElementById('rx-content');

	const orgHtml = document.getElementById('data-organic').innerHTML;
	const chemHtml = document.getElementById('data-chemical').innerHTML;

	if (type === 'organic') {
	btnOrg.classList.add('active');
	btnChem.classList.remove('active');
	container.style.borderLeftColor = 'var(--organic)';
	title.className = 'fw-bold text-success mb-3';
	title.innerHTML = '<i class="fas fa-leaf me-2"></i>Sustainable Management';
	content.innerHTML = orgHtml;
	} else {
	btnChem.classList.add('active');
	btnOrg.classList.remove('active');
	container.style.borderLeftColor = 'var(--chemical)';
	title.className = 'fw-bold text-danger mb-3';
	title.innerHTML = '<i class="fas fa-flask me-2"></i>Chemical Control';
	content.innerHTML = chemHtml;
	}
	}
	</script>
	</body>

	</html>