नेपालको भौगोलिक स्वरूप (Elevation & Relief Profile of Nepal)

(function() {
	var canvas = document.getElementById('nepalCanvas');
	if (!canvas) return;
	var ctx = canvas.getContext('2d');

	var activeRegion = 'himal';

	var regionData = {
		terai: {
			badge: 'TERAI REGION (तराई - Granary of Nepal)',
			title: 'Southern Plains & Forests (60m – 600m)',
			desc: 'Fertile alluvial soil, dense Sal forests (Chitwan, Bardia), agricultural heartland of Nepal, and industrial hubs.',
			facts: ['🌾 Land Area: ~17%', '☀️ Climate: Tropical / Subtropical', '🦏 Wildlife: One-horned Rhino, Bengal Tiger'],
			color: '#10b981'
		},
		pahad: {
			badge: 'HILLY REGION (पहाड - Cultural Heart)',
			title: 'Mid Hills & Valleys (600m – 3,000m)',
			desc: 'Terraced farming, Kathmandu and Pokhara valleys, diverse ethnic communities, temperate mixed forests and perennial rivers.',
			facts: ['⛰️ Land Area: ~68%', '🌦️ Climate: Warm Temperate / Subtropical', '🦜 Wildlife: Danphe (Lophophorus), Red Panda'],
			color: '#0284c7'
		},
		himal: {
			badge: 'HIMALAYAN REGION (हिमाल - Roof of the World)',
			title: 'Northern High Himalayas (3,000m – 8,848.86m)',
			desc: 'Eight of the world’s 14 highest peaks including Mt. Everest, alpine meadows, glacial valleys, Sherpa culture, and mountaineering.',
			facts: ['🏔️ Land Area: ~15%', '❄️ Climate: Alpine / Arctic Tundra', '🐆 Wildlife: Snow Leopard, Himalayan Musk Deer'],
			color: '#e2e8f0'
		}
	};

	window.selectRegion = function(reg) {
		activeRegion = reg;
		document.querySelectorAll('.reg-btn').forEach(function(b) { b.classList.remove('active'); });
		event.target.classList.add('active');

		var d = regionData[reg];
		document.getElementById('regBadge').innerText = d.badge;
		document.getElementById('regBadge').style.color = d.color;
		document.getElementById('regTitle').innerText = d.title;
		document.getElementById('regDesc').innerText = d.desc;
		document.getElementById('regFacts').innerHTML = d.facts.map(function(f) { return '<span>' + f + '</span>'; }).join('');

		draw();
	};

	function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);

		// Sky
		var sky = ctx.createLinearGradient(0, 0, 0, canvas.height);
		sky.addColorStop(0, '#0284c7');
		sky.addColorStop(1, '#0f172a');
		ctx.fillStyle = sky;
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		// Terai (left: 0 to 180)
		ctx.beginPath();
		ctx.moveTo(0, canvas.height - 30);
		ctx.lineTo(180, canvas.height - 45);
		ctx.lineTo(180, canvas.height);
		ctx.lineTo(0, canvas.height);
		ctx.fillStyle = (activeRegion === 'terai') ? '#10b981' : '#065f46';
		ctx.fill();

		// Pahad (middle: 180 to 380)
		ctx.beginPath();
		ctx.moveTo(180, canvas.height - 45);
		ctx.lineTo(260, canvas.height - 110);
		ctx.lineTo(320, canvas.height - 90);
		ctx.lineTo(380, canvas.height - 150);
		ctx.lineTo(380, canvas.height);
		ctx.lineTo(180, canvas.height);
		ctx.fillStyle = (activeRegion === 'pahad') ? '#0284c7' : '#075985';
		ctx.fill();

		// Himal (right: 380 to 600)
		ctx.beginPath();
		ctx.moveTo(380, canvas.height - 150);
		ctx.lineTo(450, 40); // Everest peak
		ctx.lineTo(510, 80);
		ctx.lineTo(560, 50);
		ctx.lineTo(600, 100);
		ctx.lineTo(600, canvas.height);
		ctx.lineTo(380, canvas.height);
		ctx.fillStyle = (activeRegion === 'himal') ? '#f8fafc' : '#94a3b8';
		ctx.fill();

		// Elevation labels
		ctx.fillStyle = '#f8fafc';
		ctx.font = 'bold 11px sans-serif';
		ctx.fillText('Terai (60m)', 40, canvas.height - 10);
		ctx.fillText('Pahad (1,500m)', 240, canvas.height - 10);
		ctx.fillText('Mt. Everest (8,848m)', 440, 30);
	}

	draw();
})();

<div class="nepal-geo-box">
	<div class="elevation-cross-section">
		<canvas id="nepalCanvas" width="600" height="260"></canvas>
	</div>
	<div class="region-info-card" id="regionCard">
		<div class="region-badge" id="regBadge">HIMALAYAN REGION (हिमाल)</div>
		<h3 id="regTitle">Northern High Himalayas (3,000m – 8,848.86m)</h3>
		<p id="regDesc">Features snow-capped peaks including Mt. Everest (Sagarmatha), alpine meadows, cold desert tundra, yak herding, and glacial river origins.</p>
		<div class="quick-facts" id="regFacts">
			<span>🏔️ Land Area: ~15%</span>
			<span>❄️ Climate: Alpine / Tundra</span>
			<span>🐆 Wildlife: Snow Leopard, Himalayan Tahr</span>
		</div>
	</div>
	<div class="region-selector-bar">
		<button type="button" onclick="selectRegion('terai')" class="reg-btn">🌾 Terai (तराई) [60m–600m]</button>
		<button type="button" onclick="selectRegion('pahad')" class="reg-btn">⛰️ Pahad (पहाड) [600m–3,000m]</button>
		<button type="button" onclick="selectRegion('himal')" class="reg-btn active">🏔️ Himal (हिमाल) [3,000m–8,848m]</button>
	</div>
</div>

.nepal-geo-box { background: #0f172a; padding: 18px; border-radius: 16px; color: #fff; font-family: inherit; display: flex; flex-direction: column; gap: 14px; }
.elevation-cross-section { background: #020617; border-radius: 12px; overflow: hidden; border: 1px solid #1e293b; display: flex; justify-content: center; }
canvas { max-width: 100%; height: auto; }
.region-info-card { background: #1e293b; padding: 16px 20px; border-radius: 12px; border: 1px solid #334155; }
.region-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; background: rgba(56,189,248,0.2); color: #38bdf8; margin-bottom: 6px; }
.region-info-card h3 { margin: 0 0 6px 0; font-size: 15px; font-weight: 800; color: #f8fafc; }
.region-info-card p { margin: 0 0 10px 0; font-size: 12px; color: #94a3b8; line-height: 1.5; }
.quick-facts { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; font-weight: 700; color: #cbd5e1; }
.region-selector-bar { display: flex; gap: 8px; }
.reg-btn { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; font-weight: 800; font-size: 11px; cursor: pointer; transition: all 0.2s; }
.reg-btn.active, .reg-btn:hover { background: #0284c7; color: #fff; border-color: #38bdf8; }