rahuketu / rahuketu4

Create rahuketu4

50c0d57 verified 13 days ago

30.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Rahu & Ketu: The Lunar Nodes</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
	<style>
	body { margin: 0; overflow: hidden; background-color: #030308; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: white; }
	#canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
	#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
	.pointer-events-auto { pointer-events: auto; }

	/* Glassmorphism panel */
	.glass-panel {
	background: rgba(15, 20, 35, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
	}

	/* Custom Scrollbar for text panel */
	::-webkit-scrollbar { width: 6px; }
	::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
	::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
	::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

	input[type=range] {
	-webkit-appearance: none; background: transparent;
	}
	input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
	background: #4ade80; cursor: pointer; margin-top: -6px;
	}
	input[type=range]::-webkit-slider-runnable-track {
	width: 100%; height: 4px; cursor: pointer; background: rgba(255,255,255,0.2); border-radius: 2px;
	}
	</style>
	</head>
	<body>

	<!-- 3D Canvas -->
	<div id="canvas-container"></div>

	<!-- UI Overlay -->
	<div id="ui-layer" class="flex flex-col md:flex-row justify-between p-4 md:p-6 h-screen relative">

	<!-- Left Info Panel -->
	<div class="glass-panel w-full md:w-96 rounded-2xl p-6 flex flex-col pointer-events-auto h-auto max-h-[45vh] md:max-h-full overflow-y-auto mb-4 md:mb-0">
	<h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-yellow-200 mb-2">Rahu & Ketu</h1>
	<h2 class="text-sm text-gray-300 uppercase tracking-widest mb-6 border-b border-gray-600 pb-2">The Lunar Nodes</h2>

	<div class="space-y-4 text-sm leading-relaxed text-gray-200">
	<p>
	<strong class="text-white text-base">What are they?</strong><br>
	In astronomy, Rahu and Ketu are not physical planets. They are mathematical intersection points known as the <strong>Lunar Nodes</strong>.
	</p>
	<p>
	The Earth orbits the Sun on a flat plane called the <em>Ecliptic</em>. However, the Moon's orbit around the Earth is tilted by about 5 degrees relative to this plane.
	</p>
	<p>
	Because of this tilt, the Moon's orbit crosses the Earth's Ecliptic plane at exactly two points.
	</p>

	<div class="bg-orange-500/10 border border-orange-500/30 p-3 rounded-lg mt-2">
	<h3 class="text-orange-400 font-bold mb-1">Rahu (North Node) ☊</h3>
	<p class="text-xs">The <em>Ascending Node</em>. This is the exact point where the Moon crosses the ecliptic going from South to North.</p>
	</div>

	<div class="bg-gray-500/10 border border-gray-500/30 p-3 rounded-lg mt-2">
	<h3 class="text-gray-300 font-bold mb-1">Ketu (South Node) ☋</h3>
	<p class="text-xs">The <em>Descending Node</em>. This is the exact point where the Moon crosses the ecliptic going from North to South.</p>
	</div>

	<div class="bg-purple-500/10 border border-purple-500/30 p-3 rounded-lg mt-2">
	<h3 class="text-purple-400 font-bold mb-1">The 18.6 Year Cycle</h3>
	<p class="text-xs">The nodes are not stationary! The Moon's orbital plane slowly wobbles, causing the nodes to drift backwards (retrograde). It takes exactly <strong>18.6 years</strong> for Rahu and Ketu to complete one full cycle around the Zodiac. This is called <em>Nodal Precession</em>.</p>
	</div>

	<p class="mt-4 border-t border-gray-600 pt-4">
	<strong class="text-yellow-300">Eclipses:</strong> A Solar or Lunar eclipse can <em>only</em> happen when the New Moon or Full Moon aligns closely with either Rahu or Ketu. In ancient mythology, these nodes were personified as shadow demons that "swallowed" the Sun and Moon.
	</p>
	</div>
	</div>

	<!-- Right / Bottom Controls -->
	<div class="flex flex-col justify-end pointer-events-auto w-full md:w-auto">
	<div class="glass-panel rounded-2xl p-5 w-full md:w-80 space-y-5">

	<div class="flex items-center justify-between mb-2">
	<h3 class="font-semibold text-white">Controls</h3>
	<button id="btn-pause" class="bg-white/10 hover:bg-white/20 text-white px-3 py-1 rounded text-sm transition">Pause</button>
	</div>

	<!-- Time Speed -->
	<div>
	<label class="flex justify-between text-xs text-gray-400 mb-2">
	<span>Time Speed</span>
	<span id="speed-val">1x</span>
	</label>
	<input type="range" id="time-speed" min="0" max="5" step="0.1" value="1" class="w-full">
	</div>

	<!-- Camera Focus -->
	<div>
	<label class="block text-xs text-gray-400 mb-2">Camera Focus</label>
	<div class="flex bg-black/40 rounded-lg p-1">
	<button id="focus-sun" class="flex-1 py-1.5 text-sm rounded-md transition text-gray-400 hover:text-white">Sun</button>
	<button id="focus-earth" class="flex-1 py-1.5 text-sm rounded-md transition bg-blue-500/30 text-blue-200 border border-blue-500/50">Earth</button>
	</div>
	</div>

	<!-- Visibility Toggles -->
	<div class="pt-2 border-t border-gray-700/50 space-y-2">
	<div class="mb-3">
	<label class="block text-xs text-gray-400 mb-1">Show Nodes</label>
	<select id="node-display-mode" class="w-full bg-gray-800 text-white text-sm rounded border border-gray-600 p-1.5 focus:ring-blue-500 focus:outline-none">
	<option value="always">Always Show</option>
	<option value="intersect">Only on Intersection</option>
	</select>
	</div>

	<label class="flex items-center space-x-2 text-sm cursor-pointer">
	<input type="checkbox" id="toggle-ecliptic" checked class="rounded bg-gray-800 border-gray-600 text-blue-500 focus:ring-blue-500">
	<span class="text-gray-300">Show Earth's Plane (Ecliptic)</span>
	</label>
	<label class="flex items-center space-x-2 text-sm cursor-pointer">
	<input type="checkbox" id="toggle-lunar" checked class="rounded bg-gray-800 border-gray-600 text-blue-500 focus:ring-blue-500">
	<span class="text-gray-300">Show Moon's Tilted Plane</span>
	</label>
	<label class="flex items-center space-x-2 text-sm cursor-pointer">
	<input type="checkbox" id="toggle-moon-orbit-line" checked class="rounded bg-gray-800 border-gray-600 text-blue-500 focus:ring-blue-500">
	<span class="text-gray-300">Show Moon's Orbit Line</span>
	</label>
	</div>

	<!-- Wobble Controls -->
	<div class="pt-2 border-t border-gray-700/50 space-y-3">
	<h4 class="text-xs font-semibold text-purple-400 uppercase tracking-wider">Lunar Wobble Controls</h4>

	<div>
	<label class="flex justify-between text-xs text-gray-400 mb-1">
	<span>Wobble (Precession) Speed</span>
	<span id="wobble-speed-val">1x</span>
	</label>
	<input type="range" id="wobble-speed" min="0" max="100" step="1" value="1" class="w-full">
	</div>

	<div>
	<label class="flex justify-between text-xs text-gray-400 mb-1">
	<span>Tilt Angle</span>
	<span id="tilt-val">15°</span>
	</label>
	<input type="range" id="tilt-angle" min="0" max="45" step="1" value="15" class="w-full">
	</div>

	<label class="flex items-center space-x-2 text-sm cursor-pointer">
	<input type="checkbox" id="toggle-axis" checked class="rounded bg-gray-800 border-gray-600 text-purple-500 focus:ring-purple-500">
	<span class="text-gray-300">Show Orbital Axis</span>
	</label>

	<div class="mt-3 bg-purple-900/20 border border-purple-500/30 p-3 rounded-lg">
	<label class="flex justify-between text-xs text-gray-400 mb-2">
	<span class="flex items-center space-x-2">
	<input type="checkbox" id="manual-precession-toggle" class="rounded bg-gray-800 border-gray-600 text-purple-500 focus:ring-purple-500">
	<span class="text-purple-300 font-semibold">Manual 18.6 Yr Scrub</span>
	</span>
	<span id="precession-year-val" class="text-purple-300 font-mono">0.00 Yrs</span>
	</label>
	<input type="range" id="precession-slider" min="0" max="18.5996" step="0.01" value="0" class="w-full disabled:opacity-40 disabled:cursor-not-allowed" disabled>
	</div>

	<label class="flex items-center space-x-2 text-sm cursor-pointer border-t border-gray-700/50 pt-3">
	<input type="checkbox" id="isolate-system" class="rounded bg-gray-800 border-gray-600 text-red-500 focus:ring-red-500">
	<span class="text-gray-200 font-semibold">Isolate Earth & Moon</span>
	</label>
	</div>

	</div>
	</div>
	</div>

	<script>
	// --- THREE.JS SETUP ---
	const canvasContainer = document.getElementById('canvas-container');
	const scene = new THREE.Scene();

	// Camera setup
	const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
	camera.position.set(0, 80, 150);

	// Renderer setup
	const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);
	canvasContainer.appendChild(renderer.domElement);

	// OrbitControls
	const controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true;
	controls.dampingFactor = 0.05;
	controls.maxDistance = 600;
	controls.minDistance = 20;

	// --- ENVIRONMENT ---
	// Starfield
	const starsGeometry = new THREE.BufferGeometry();
	const starsCount = 3000;
	const posArray = new Float32Array(starsCount * 3);
	for(let i = 0; i < starsCount * 3; i++) {
	posArray[i] = (Math.random() - 0.5) * 1500;
	}
	starsGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
	const starsMaterial = new THREE.PointsMaterial({ size: 1.5, color: 0xffffff, transparent: true, opacity: 0.8 });
	const starMesh = new THREE.Points(starsGeometry, starsMaterial);
	scene.add(starMesh);

	// Ambient Light
	scene.add(new THREE.AmbientLight(0x333344));

	// --- CELESTIAL BODIES ---

	// 1. SUN SYSTEM
	const sunSystem = new THREE.Group();
	scene.add(sunSystem);

	// Sun Mesh
	const sunGeo = new THREE.SphereGeometry(15, 32, 32);
	const sunMat = new THREE.MeshBasicMaterial({ color: 0xffaa00 });
	const sun = new THREE.Mesh(sunGeo, sunMat);
	sunSystem.add(sun);

	// Sun Light
	const sunLight = new THREE.PointLight(0xffffff, 2.5, 1000);
	sunSystem.add(sunLight);

	// Sun Glow (Sprite)
	const glowCanvas = document.createElement('canvas');
	glowCanvas.width = 128; glowCanvas.height = 128;
	const ctx = glowCanvas.getContext('2d');
	const gradient = ctx.createRadialGradient(64,64,0, 64,64,64);
	gradient.addColorStop(0, 'rgba(255, 170, 0, 0.6)');
	gradient.addColorStop(1, 'rgba(255, 170, 0, 0)');
	ctx.fillStyle = gradient;
	ctx.fillRect(0,0, 128,128);
	const glowTexture = new THREE.CanvasTexture(glowCanvas);
	const glowMaterial = new THREE.SpriteMaterial({ map: glowTexture, blending: THREE.AdditiveBlending, transparent: true });
	const sunGlow = new THREE.Sprite(glowMaterial);
	sunGlow.scale.set(60, 60, 1);
	sun.add(sunGlow);

	// 2. EARTH SYSTEM
	const earthOrbitRadius = 120;
	const earthSystem = new THREE.Group();
	scene.add(earthSystem);

	// Earth Orbit Line
	const earthOrbitGeo = new THREE.RingGeometry(earthOrbitRadius - 0.2, earthOrbitRadius + 0.2, 128);
	const earthOrbitMat = new THREE.MeshBasicMaterial({ color: 0x445566, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });
	const earthOrbitLine = new THREE.Mesh(earthOrbitGeo, earthOrbitMat);
	earthOrbitLine.rotation.x = Math.PI / 2;
	scene.add(earthOrbitLine);

	// Earth Mesh
	const earthGeo = new THREE.SphereGeometry(4, 32, 32);
	const earthMat = new THREE.MeshStandardMaterial({ color: 0x2288ff, roughness: 0.6 });
	const earth = new THREE.Mesh(earthGeo, earthMat);
	earthSystem.add(earth);

	// Ecliptic Plane (Local to Earth)
	const eclipticGeo = new THREE.PlaneGeometry(60, 60);
	const eclipticMat = new THREE.MeshBasicMaterial({ color: 0x22ff44, transparent: true, opacity: 0.1, side: THREE.DoubleSide });
	const eclipticPlane = new THREE.Mesh(eclipticGeo, eclipticMat);
	eclipticPlane.rotation.x = Math.PI / 2;
	earthSystem.add(eclipticPlane);

	// Ecliptic Grid Helper to make it clearer
	const eclipticGrid = new THREE.GridHelper(60, 10, 0x22ff44, 0x22ff44);
	eclipticGrid.material.opacity = 0.2;
	eclipticGrid.material.transparent = true;
	earthSystem.add(eclipticGrid);

	// 3. MOON SYSTEM & NODAL PRECESSION
	const nodalPrecessionGroup = new THREE.Group();
	earthSystem.add(nodalPrecessionGroup);

	const moonOrbitRadius = 22;
	const moonSystem = new THREE.Group();

	// TILT THE LUNAR ORBIT (Exaggerated to 15 degrees for visual clarity, real is ~5 degrees)
	let lunarTilt = 15 * (Math.PI / 180);
	moonSystem.rotation.x = lunarTilt;
	nodalPrecessionGroup.add(moonSystem);

	// Moon Orbit Axis (To visualize the wobble)
	const axisGeo = new THREE.BufferGeometry().setFromPoints([
	new THREE.Vector3(0, -30, 0),
	new THREE.Vector3(0, 30, 0)
	]);
	const axisMat = new THREE.LineBasicMaterial({ color: 0xdd44ff, transparent: true, opacity: 0.8, linewidth: 2 });
	const moonOrbitAxis = new THREE.Line(axisGeo, axisMat);
	moonSystem.add(moonOrbitAxis);

	// Moon Plane
	const lunarPlaneGeo = new THREE.PlaneGeometry(50, 50);
	const lunarPlaneMat = new THREE.MeshBasicMaterial({ color: 0x44aaff, transparent: true, opacity: 0.15, side: THREE.DoubleSide });
	const lunarPlane = new THREE.Mesh(lunarPlaneGeo, lunarPlaneMat);
	lunarPlane.rotation.x = Math.PI / 2;
	moonSystem.add(lunarPlane);

	// Moon Orbit Line
	const moonOrbitLineGeo = new THREE.RingGeometry(moonOrbitRadius - 0.2, moonOrbitRadius + 0.2, 64);
	const moonOrbitLineMat = new THREE.MeshBasicMaterial({ color: 0xaaaaff, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
	const moonOrbitLine = new THREE.Mesh(moonOrbitLineGeo, moonOrbitLineMat);
	moonOrbitLine.rotation.x = Math.PI / 2;
	moonSystem.add(moonOrbitLine);

	// Moon Mesh
	const moonGeo = new THREE.SphereGeometry(1.2, 16, 16);
	const moonMat = new THREE.MeshStandardMaterial({ color: 0xdddddd, roughness: 0.8 });
	const moon = new THREE.Mesh(moonGeo, moonMat);
	moonSystem.add(moon);

	// --- RAHU & KETU NODES ---
	// Create Sprite Text Labels
	function createTextLabel(text, color) {
	const canvas = document.createElement('canvas');
	canvas.width = 512; canvas.height = 128;
	const ctx = canvas.getContext('2d');
	ctx.fillStyle = color;
	ctx.font = 'bold 36px sans-serif';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';

	// Background capsule
	ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
	ctx.beginPath();
	ctx.roundRect(64, 20, 384, 88, 44);
	ctx.fill();
	ctx.strokeStyle = color;
	ctx.lineWidth = 3;
	ctx.stroke();

	// Text
	ctx.fillStyle = color;
	ctx.fillText(text, 256, 64);

	const texture = new THREE.CanvasTexture(canvas);
	const material = new THREE.SpriteMaterial({ map: texture, depthTest: false });
	const sprite = new THREE.Sprite(material);
	sprite.scale.set(16, 4, 1);
	return sprite;
	}

	function createNodeMarker(color) {
	const geo = new THREE.SphereGeometry(1.5, 16, 16);
	const mat = new THREE.MeshBasicMaterial({ color: color });
	return new THREE.Mesh(geo, mat);
	}

	// The intersection of the tilted Moon system with the Ecliptic (Earth's XZ plane) happens along the local X-axis.
	// Because we rotated the moonSystem around X, the X-axis remains unchanged and perfectly lies on the Ecliptic.
	// Rahu (Ascending Node) - Going South to North. Due to rotation rules, this occurs at -X.
	const rahuLabel = createTextLabel("Rahu ☊", "#ff8800");
	rahuLabel.position.set(-moonOrbitRadius, 5, 0);
	const rahuMarker = createNodeMarker(0xff8800);
	rahuMarker.position.set(-moonOrbitRadius, 0, 0);
	moonSystem.add(rahuLabel);
	moonSystem.add(rahuMarker);

	// Ketu (Descending Node) - Going North to South. This occurs at +X.
	const ketuLabel = createTextLabel("Ketu ☋", "#a0a0a0");
	ketuLabel.position.set(moonOrbitRadius, 5, 0);
	const ketuMarker = createNodeMarker(0xa0a0a0);
	ketuMarker.position.set(moonOrbitRadius, 0, 0);
	moonSystem.add(ketuLabel);
	moonSystem.add(ketuMarker);

	// Line of Nodes
	const lineOfNodesGeo = new THREE.BufferGeometry().setFromPoints([
	new THREE.Vector3(-moonOrbitRadius - 5, 0, 0),
	new THREE.Vector3(moonOrbitRadius + 5, 0, 0)
	]);
	const lineOfNodesMat = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.7 });
	const lineOfNodes = new THREE.Line(lineOfNodesGeo, lineOfNodesMat);
	moonSystem.add(lineOfNodes);

	// --- ANIMATION LOGIC ---
	let time = 0;
	let wobbleTime = 0; // Separate time tracker for wobble
	let isPaused = false;
	let speedMultiplier = 1;
	let wobbleSpeedMultiplier = 1; // Default independent wobble speed
	let currentTilt = 15; // Default tilt in degrees
	let cameraFocus = 'earth'; // 'earth' or 'sun'
	let nodeDisplayMode = 'always'; // 'always' or 'intersect'
	const earthWorldPos = new THREE.Vector3();

	// Set initial camera to Earth
	camera.position.set(170, 40, 60);

	function animate() {
	requestAnimationFrame(animate);

	const manualToggle = document.getElementById('manual-precession-toggle');
	const precessionSlider = document.getElementById('precession-slider');
	const precessionVal = document.getElementById('precession-year-val');
	const exactPrecessionYears = 18.5996; // Cutting edge precise astronomical period

	if (!isPaused) {
	time += 0.005 * speedMultiplier;

	if (!manualToggle.checked) {
	wobbleTime += 0.005 * speedMultiplier * wobbleSpeedMultiplier;
	}

	// Earth revolution around Sun (1 Earth Year)
	earthSystem.position.x = Math.cos(time) * earthOrbitRadius;
	earthSystem.position.z = Math.sin(time) * earthOrbitRadius;

	// Earth rotation
	earth.rotation.y += 0.05 * speedMultiplier;

	// Moon revolution around Earth
	// Inside moonSystem, rotation around Y moves it along the tilted orbit!
	const moonSpeed = time * 13.36; // Moon revolves ~13.36 times a year
	moon.position.x = Math.cos(moonSpeed) * moonOrbitRadius;
	moon.position.z = Math.sin(moonSpeed) * moonOrbitRadius;
	moon.rotation.y += 0.02 * speedMultiplier;
	}

	// --- PRECESSION LOGIC (18.6 Year Cycle) ---
	// Moved outside the !isPaused block so you can scrub while paused!
	if (manualToggle.checked) {
	// Manual Scrubbing
	let manualYears = parseFloat(precessionSlider.value);
	nodalPrecessionGroup.rotation.y = -(manualYears / exactPrecessionYears) * (Math.PI * 2);
	precessionVal.innerText = manualYears.toFixed(2) + " Yrs";

	// Sync internal time so it doesn't jump when resuming auto play
	wobbleTime = manualYears * (Math.PI * 2);
	} else {
	// Auto Precession
	nodalPrecessionGroup.rotation.y = -(wobbleTime / exactPrecessionYears);

	// Sync slider visually
	let baseWobbleYears = (wobbleTime / (Math.PI * 2));
	let currentWobbleYears = baseWobbleYears % exactPrecessionYears;
	if (currentWobbleYears < 0) currentWobbleYears += exactPrecessionYears;

	precessionSlider.value = currentWobbleYears;
	precessionVal.innerText = currentWobbleYears.toFixed(2) + " Yrs";
	}

	// Update Lunar Tilt Dynamically
	moonSystem.rotation.x = currentTilt * (Math.PI / 180);

	// Handle Node Visibility Mode (Moved outside so scrubbing reveals nodes even when paused)
	const currentMoonSpeed = time * 13.36;
	if (nodeDisplayMode === 'intersect') {
	// Calculate moon's current angle to determine proximity to nodes (0 and PI)
	let moonAngle = currentMoonSpeed % (Math.PI * 2);
	if (moonAngle < 0) moonAngle += Math.PI * 2;

	const threshold = 0.35; // Visibility window in radians (~20 degrees)
	const isNearKetu = (moonAngle < threshold) \|\| (moonAngle > Math.PI * 2 - threshold); // Ketu is at 0 / 2PI (+X)
	const isNearRahu = Math.abs(moonAngle - Math.PI) < threshold; // Rahu is at PI (-X)

	rahuLabel.visible = isNearRahu;
	rahuMarker.visible = isNearRahu;
	ketuLabel.visible = isNearKetu;
	ketuMarker.visible = isNearKetu;
	}

	// Make text sprites always face camera
	rahuLabel.material.rotation = 0;
	ketuLabel.material.rotation = 0;

	// Camera Tracking
	earthSystem.getWorldPosition(earthWorldPos);

	if (cameraFocus === 'earth') {
	controls.target.copy(earthWorldPos);
	} else {
	controls.target.set(0, 0, 0);
	}

	controls.update();
	renderer.render(scene, camera);
	}

	// --- UI INTERACTIONS ---

	// Pause Button
	const btnPause = document.getElementById('btn-pause');
	btnPause.addEventListener('click', () => {
	isPaused = !isPaused;
	btnPause.innerText = isPaused ? "Play" : "Pause";
	btnPause.className = isPaused
	? "bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm transition"
	: "bg-white/10 hover:bg-white/20 text-white px-3 py-1 rounded text-sm transition";
	});

	// Speed Slider
	const speedSlider = document.getElementById('time-speed');
	const speedVal = document.getElementById('speed-val');
	speedSlider.addEventListener('input', (e) => {
	speedMultiplier = parseFloat(e.target.value);
	speedVal.innerText = speedMultiplier.toFixed(1) + "x";
	});

	// Camera Focus Toggles
	const btnFocusSun = document.getElementById('focus-sun');
	const btnFocusEarth = document.getElementById('focus-earth');

	btnFocusSun.addEventListener('click', () => {
	cameraFocus = 'sun';
	btnFocusSun.className = "flex-1 py-1.5 text-sm rounded-md transition bg-blue-500/30 text-blue-200 border border-blue-500/50";
	btnFocusEarth.className = "flex-1 py-1.5 text-sm rounded-md transition text-gray-400 hover:text-white border border-transparent";

	// Move camera to see whole system
	const targetPos = new THREE.Vector3(0, 200, 300);
	camera.position.lerp(targetPos, 1);
	});

	btnFocusEarth.addEventListener('click', () => {
	cameraFocus = 'earth';
	btnFocusEarth.className = "flex-1 py-1.5 text-sm rounded-md transition bg-blue-500/30 text-blue-200 border border-blue-500/50";
	btnFocusSun.className = "flex-1 py-1.5 text-sm rounded-md transition text-gray-400 hover:text-white border border-transparent";

	// Move camera closer to earth
	earthSystem.getWorldPosition(earthWorldPos);
	camera.position.set(earthWorldPos.x, earthWorldPos.y + 40, earthWorldPos.z + 60);
	});

	// Visibility Toggles
	document.getElementById('node-display-mode').addEventListener('change', (e) => {
	nodeDisplayMode = e.target.value;
	if (nodeDisplayMode === 'always') {
	rahuLabel.visible = true;
	rahuMarker.visible = true;
	ketuLabel.visible = true;
	ketuMarker.visible = true;
	}
	});

	document.getElementById('toggle-ecliptic').addEventListener('change', (e) => {
	eclipticPlane.visible = e.target.checked;
	eclipticGrid.visible = e.target.checked;
	});

	document.getElementById('toggle-lunar').addEventListener('change', (e) => {
	lunarPlane.visible = e.target.checked;
	});

	document.getElementById('toggle-moon-orbit-line').addEventListener('change', (e) => {
	moonOrbitLine.visible = e.target.checked;
	});

	// Wobble Control Listeners
	const wobbleSpeedSlider = document.getElementById('wobble-speed');
	const wobbleSpeedVal = document.getElementById('wobble-speed-val');
	wobbleSpeedSlider.addEventListener('input', (e) => {
	wobbleSpeedMultiplier = parseFloat(e.target.value);
	wobbleSpeedVal.innerText = wobbleSpeedMultiplier + "x";
	});

	const tiltSlider = document.getElementById('tilt-angle');
	const tiltVal = document.getElementById('tilt-val');
	tiltSlider.addEventListener('input', (e) => {
	currentTilt = parseFloat(e.target.value);
	tiltVal.innerText = currentTilt + "°";
	});

	document.getElementById('toggle-axis').addEventListener('change', (e) => {
	moonOrbitAxis.visible = e.target.checked;
	});

	// Manual Precession Scrub Toggle
	document.getElementById('manual-precession-toggle').addEventListener('change', (e) => {
	document.getElementById('precession-slider').disabled = !e.target.checked;
	});

	// Isolate System Toggle
	document.getElementById('isolate-system').addEventListener('change', (e) => {
	const isIsolated = e.target.checked;
	sun.visible = !isIsolated;
	sunGlow.visible = !isIsolated;
	earthOrbitLine.visible = !isIsolated;

	if (isIsolated) {
	// Force camera focus to Earth
	cameraFocus = 'earth';
	document.getElementById('focus-earth').className = "flex-1 py-1.5 text-sm rounded-md transition bg-blue-500/30 text-blue-200 border border-blue-500/50";
	document.getElementById('focus-sun').className = "flex-1 py-1.5 text-sm rounded-md transition text-gray-400 hover:text-white border border-transparent";
	}
	});

	// Handle Window Resize
	window.addEventListener('resize', () => {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	});

	// Start animation loop
	animate();

	</script>
	</body>
	</html>