trysem
/

rahuketu

Model card Files Files and versions

xet

Community

trysem commited on 11 days ago

Commit

a33c872

verified ·

1 Parent(s): 6e7ef5a

Create rahuketu2

Browse files

Files changed (1) hide show

rahuketu2 +508 -0

rahuketu2 ADDED Viewed

	@@ -0,0 +1,508 @@

+<!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">
+                    <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>
+                </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>
+            </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'
+        const earthWorldPos = new THREE.Vector3();
+        // Set initial camera to Earth
+        camera.position.set(170, 40, 60);
+        function animate() {
+            requestAnimationFrame(animate);
+            if (!isPaused) {
+                time += 0.005 * speedMultiplier;
+                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;
+                // Nodal Precession (Takes 18.6 Earth Years, moves Retrograde/Backwards)
+                // We divide time by 18.6 so it takes exactly 18.6 Earth revolutions to do 1 Node revolution
+                nodalPrecessionGroup.rotation.y = -(wobbleTime / 18.6);
+                // Update Lunar Tilt Dynamically
+                moonSystem.rotation.x = currentTilt * (Math.PI / 180);
+                // 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;
+                // 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('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;
+        });
+        // 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;
+        });
+        // 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>