diff --git a/NASA SpaceApps Noida 24.pdf b/NASA SpaceApps Noida 24.pdf
new file mode 100644
index 00000000..92ab4b3d
Binary files /dev/null and b/NASA SpaceApps Noida 24.pdf differ
diff --git a/README.md b/README.md
index abc30b8b..8ec8a038 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,13 @@
# NASA Space Apps Challenge 2024 [Noida]
-#### Team Name -
-#### Problem Statement -
+#### Team Name - Orbitron 2k24
+#### Problem Statement - Create an Orrery app that displays near earth objects
#### Team Leader Email -
## A Brief of the Prototype:
- What is your solution? and how it works.
+ This interactive web application provides a unique perspective of our solar system, showcasing the dynamic movements of planets, moons, and other celestial bodies. You can explore the orbits of planets, discover near-Earth objects, and delve into the intriguing world of space exploration.
## Code Execution Instruction:
- *[If your solution is **not** application based, you can ignore this para]
+ *Set-up local host by executing the command python -m http.server 8000 from the project directory. Then open localhost:8000 in browser
*The Repository must contain your **Execution Plan PDF**.
diff --git a/data.js b/data.js
new file mode 100644
index 00000000..f1aa8228
--- /dev/null
+++ b/data.js
@@ -0,0 +1,160 @@
+export const planetData = [
+ { name: "Mercury", semiMajorAxis: 2, eccentricity: 0.206, radius: 0.38/5, speed: 4.74/10, texture: "textures/mercury.jpg" },
+ { name: "Venus", semiMajorAxis: 3, eccentricity: 0.007, radius: 0.95/5, speed: 3.50/10, texture: "textures/venus.jpg" },
+ { name: "Earth", semiMajorAxis: 4.00, eccentricity: 0.017, radius: 1.00/5, speed: 2.98/10, texture: "textures/earth.jpg" },
+ { name: "Mars", semiMajorAxis: 5.52, eccentricity: 0.094, radius: 0.53/5, speed: 2.41/10, texture: "textures/mars.jpg" },
+ { name: "Jupiter", semiMajorAxis: 7.20, eccentricity: 0.049, radius: 10.9/20, speed: 1.31/10, texture: "textures/jupiter.jpg" },
+ { name: "Saturn", semiMajorAxis: 8.58, eccentricity: 0.052, radius: 9.13/20, speed: 0.97/10, texture: "textures/saturn.jpg" },
+ { name: "Uranus", semiMajorAxis: 9.22, eccentricity: 0.047, radius: 3.98/20, speed: 0.68/10, texture: "textures/uranus.jpg" },
+ { name: "Neptune", semiMajorAxis: 11.05, eccentricity: 0.010, radius: 3.86/20, speed: 0.54/10, texture: "textures/neptune.jpg" },
+];
+export const constellations = [
+ {
+ name: "Orion",
+ stars: [
+ { position: { x: 650.0, y: 100.0, z: -50.0 } }, // Betelgeuse (~642 light-years)
+ { position: { x: 800.0, y: 50.0, z: -40.0 } }, // Rigel (~860 light-years)
+ { position: { x: 620.0, y: 80.0, z: -30.0 } }, // Bellatrix (~240 light-years)
+ { position: { x: 700.0, y: 10.0, z: -70.0 } }, // Saiph (~720 light-years)
+ { position: { x: 600.0, y: 60.0, z: -20.0 } }, // Alnitak (~800 light-years)
+ { position: { x: 580.0, y: 40.0, z: -25.0 } }, // Alnilam (~1340 light-years)
+ { position: { x: 610.0, y: 20.0, z: -55.0 } } // Mintaka (~900 light-years)
+ ]
+ },
+ {
+ name: "Ursa Major",
+ stars: [
+ { position: { x: -80.0, y: 50.0, z: -20.0 } }, // Dubhe (~124 light-years)
+ { position: { x: -78.0, y: 45.0, z: -15.0 } }, // Merak (~79 light-years)
+ { position: { x: -76.0, y: 48.0, z: -25.0 } }, // Phecda (~84 light-years)
+ { position: { x: -74.0, y: 55.0, z: -30.0 } }, // Megrez (~80 light-years)
+ { position: { x: -72.0, y: 60.0, z: -35.0 } }, // Furud (~50 light-years)
+ { position: { x: -70.0, y: 65.0, z: -40.0 } }, // Alioth (~81 light-years)
+ { position: { x: -68.0, y: 70.0, z: -30.0 } }, // Mizar (~78 light-years)
+ { position: { x: -66.0, y: 75.0, z: -35.0 } } // Alkaid (~101 light-years)
+ ]
+ },
+ {
+ name: "Cassiopeia",
+ stars: [
+ { position: { x: 300.0, y: 120.0, z: 180.0 } }, // Schedar (~230 light-years)
+ { position: { x: 290.0, y: 115.0, z: 185.0 } }, // Caph (~55 light-years)
+ { position: { x: 280.0, y: 110.0, z: 175.0 } }, // Tsih (~220 light-years)
+ { position: { x: 270.0, y: 125.0, z: 190.0 } }, // Ruchbah (~100 light-years)
+ { position: { x: 260.0, y: 110.0, z: 170.0 } } // La Superba (~200 light-years)
+ ]
+ },
+ {
+ name: "Scorpius",
+ stars: [
+ { position: { x: -100.0, y: -50.0, z: 30.0 } }, // Antares (~600 light-years)
+ { position: { x: -110.0, y: -55.0, z: 25.0 } }, // Shaula (~700 light-years)
+ { position: { x: -95.0, y: -48.0, z: 32.0 } }, // Lesath (~600 light-years)
+ { position: { x: -90.0, y: -45.0, z: 35.0 } }, // Jabbah (~100 light-years)
+ { position: { x: -85.0, y: -40.0, z: 40.0 } } // Kaus Australis (~150 light-years)
+ ]
+ },
+ {
+ name: "Lyra",
+ stars: [
+ { position: { x: 200.0, y: 90.0, z: 140.0 } }, // Vega (~25 light-years)
+ { position: { x: 210.0, y: 85.0, z: 135.0 } }, // Sheliak (~235 light-years)
+ { position: { x: 205.0, y: 80.0, z: 130.0 } }, // Sulafat (~90 light-years)
+ { position: { x: 195.0, y: 83.0, z: 145.0 } } // Ault (~500 light-years)
+ ]
+ },
+ {
+ name: "Taurus",
+ stars: [
+ { position: { x: -50.0, y: 45.0, z: 120.0 } }, // Aldebaran (~65 light-years)
+ { position: { x: -52.0, y: 40.0, z: 125.0 } }, // Elnath (~130 light-years)
+ { position: { x: -48.0, y: 42.0, z: 118.0 } }, // Hyades (~150 light-years)
+ { position: { x: -46.0, y: 38.0, z: 122.0 } } // Pleiades (~444 light-years)
+ ]
+ },
+ {
+ name: "Andromeda",
+ stars: [
+ { position: { x: 600.0, y: 50.0, z: 200.0 } }, // Alpheratz (~97 light-years)
+ { position: { x: 610.0, y: 48.0, z: 205.0 } }, // Mirach (~197 light-years)
+ { position: { x: 590.0, y: 45.0, z: 195.0 } } // Almas (~200 light-years)
+ ]
+ },
+ {
+ name: "Cygnus",
+ stars: [
+ { position: { x: -200.0, y: 70.0, z: 80.0 } }, // Deneb (~1,500 light-years)
+ { position: { x: -210.0, y: 68.0, z: 85.0 } }, // Sadr (~1,500 light-years)
+ { position: { x: -205.0, y: 65.0, z: 82.0 } } // Botein (~180 light-years)
+ ]
+ },
+ {
+ name: "Gemini",
+ stars: [
+ { position: { x: 80.0, y: 20.0, z: 60.0 } }, // Castor (~51 light-years)
+ { position: { x: 82.0, y: 22.0, z: 65.0 } } // Pollux (~34 light-years)
+ ]
+ },
+ {
+ name: "Leo",
+ stars: [
+ { position: { x: -70.0, y: 60.0, z: 90.0 } }, // Regulus (~77 light-years)
+ { position: { x: -72.0, y: 58.0, z: 92.0 } } // Denebola (~36 light-years)
+ ]
+ },
+ {
+ name: "Virgo",
+ stars: [
+ { position: { x: 50.0, y: -80.0, z: 100.0 } }, // Spica (~250 light-years)
+ { position: { x: 52.0, y: -82.0, z: 105.0 } } // Porrima (~38 light-years)
+ ]
+ },
+ {
+ name: "Aquila",
+ stars: [
+ { position: { x: -100.0, y: 10.0, z: 200.0 } }, // Altair (~16 light-years)
+ { position: { x: -105.0, y: 12.0, z: 205.0 } }, // Alshain (~53 light-years)
+ { position: { x: -95.0, y: 8.0, z: 198.0 } } // Tarazed (~400 light-years)
+ ]
+ },
+ {
+ name: "Capricornus",
+ stars: [
+ { position: { x: 100.0, y: -40.0, z: 100.0 } }, // Deneb Algedi (~39 light-years)
+ { position: { x: 105.0, y: -42.0, z: 102.0 } }, // Nashira (~139 light-years)
+ { position: { x: 98.0, y: -38.0, z: 97.0 } } // Algedi (~64 light-years)
+ ]
+ },
+ {
+ name: "Pleiades",
+ stars: [
+ { position: { x: 50.0, y: 25.0, z: 60.0 } }, // Alcyone (~450 light-years)
+ { position: { x: 52.0, y: 22.0, z: 62.0 } }, // Atlas (~270 light-years)
+ { position: { x: 51.0, y: 23.0, z: 59.0 } } // Pleione (~400 light-years)
+ ]
+ },
+ {
+ name: "Cassiopeia",
+ stars: [
+ { position: { x: 350.0, y: 130.0, z: 200.0 } }, // Schedar (~230 light-years)
+ { position: { x: 360.0, y: 125.0, z: 190.0 } }, // Caph (~55 light-years)
+ { position: { x: 355.0, y: 120.0, z: 185.0 } } // Ruchbah (~100 light-years)
+ ]
+ },
+ {
+ name: "Pisces",
+ stars: [
+ { position: { x: -20.0, y: 70.0, z: 200.0 } }, // Alrescha (~139 light-years)
+ { position: { x: -25.0, y: 75.0, z: 205.0 } }, // Fumalsamakah (~160 light-years)
+ { position: { x: -15.0, y: 72.0, z: 198.0 } } // Biham (~300 light-years)
+ ]
+ },
+ {
+ name: "Hercules",
+ stars: [
+ { position: { x: 120.0, y: 90.0, z: 220.0 } }, // Vega (~25 light-years)
+ { position: { x: 122.0, y: 85.0, z: 215.0 } }, // Zeta Herculis (~46 light-years)
+ { position: { x: 118.0, y: 95.0, z: 225.0 } } // Epsilon Herculis (~250 light-years)
+ ]
+ }
+];
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..1cb688d3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ Orrery Web App
+
+
+
+
+
+
+
+
+
+
+ star
+
+
+ settings
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..95d5daa7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,315 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'OrbitControls';
+import { EffectComposer } from 'EffectComposer';
+import { RenderPass } from 'RenderPass';
+import { UnrealBloomPass } from 'UnrealBloomPass';
+import { planetData, constellations } from './data.js';
+
+let scene, camera, renderer, controls, composer, loadingDiv, detailsDiv, progressBar;
+const planets = {};
+const asteroids = [];
+let planetLabels = [];
+let speed = 0.01;
+
+let showAsteroids = true;
+let showConstellations = true;
+
+function createStarField() {
+ const starGeometry = new THREE.BufferGeometry();
+ const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05 });
+
+ const starCount = 1000; // Number of stars
+ const positions = new Float32Array(starCount * 3); // x, y, z for each star
+
+ for (let i = 0; i < starCount; i++) {
+ positions[i * 3] = (Math.random() - 0.5) * 1000; // Random x position
+ positions[i * 3 + 1] = (Math.random() - 0.5) * 1000; // Random y position
+ positions[i * 3 + 2] = (Math.random() - 0.5) * 1000; // Random z position
+ }
+
+ starGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+ const stars = new THREE.Points(starGeometry, starMaterial);
+ scene.add(stars);
+}
+
+function init() {
+ loadingDiv = document.getElementById("loading");
+ detailsDiv = document.getElementById("details");
+ progressBar = document.getElementById("progress-fill");
+
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x000000); // Set black background
+
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+ renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ document.getElementById("scene-container").appendChild(renderer.domElement);
+
+ controls = new OrbitControls(camera, renderer.domElement);
+ controls.enablePan = true;
+ controls.enableZoom = true;
+ camera.position.set(0, 5, 10);
+ controls.update();
+
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+ scene.add(ambientLight);
+
+ const pointLight = new THREE.PointLight(0xffcc00, 1.50, 10);
+ scene.add(pointLight);
+
+ const light = new THREE.DirectionalLight(0xffffff, 0.5);
+ light.position.set(5, 5, 5).normalize();
+ scene.add(light);
+
+ // Create star field background
+ createStarField();
+
+ // Load all textures and update progress
+ const texturePromises = [];
+ planetData.forEach(data => {
+ texturePromises.push(loadTexture(data.texture));
+ });
+
+ Promise.all(texturePromises).then(() => {
+ createSun();
+ createOrbits();
+ createPlanets();
+ createAsteroids();
+ createConstellations();
+ createPlanetLabels(); // Create planet labels
+
+ loadingDiv.style.display = 'none'; // Hide loading screen
+ animate();
+ });
+
+ // Update progress bar
+ let totalTextures = texturePromises.length;
+ let loadedTextures = 0;
+
+ function loadTexture(path) {
+ return new Promise((resolve, reject) => {
+ const textureLoader = new THREE.TextureLoader();
+ textureLoader.load(
+ path,
+ (texture) => {
+ loadedTextures++;
+ updateProgressBar(loadedTextures, totalTextures);
+ resolve(texture);
+ },
+ undefined,
+ (err) => {
+ console.error(`Error loading texture: ${path}`, err);
+ reject(err);
+ }
+ );
+ });
+ }
+
+ function updateProgressBar(loaded, total) {
+ const progress = (loaded / total) * 100;
+ progressBar.style.width = progress + '%';
+
+ // Optionally, you can log or set a minimum loading time here
+ if (loaded === total) {
+ // Allow a brief moment to show completion
+ setTimeout(() => {
+ loadingDiv.style.display = 'none';
+ }, 500); // Delay before hiding the loading screen
+ }
+ }
+}
+
+function createSun() {
+ const sunGeometry = new THREE.SphereGeometry(1, 32, 32);
+ const sunTextureLoader = new THREE.TextureLoader();
+
+ sunTextureLoader.load("textures/sun.jpg", (texture) => {
+ const sunMaterial = new THREE.MeshStandardMaterial({ map: texture });
+ const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+
+ const glowGeometry = new THREE.SphereGeometry(1, 32, 32);
+ const glowMaterial = new THREE.MeshBasicMaterial({
+ color: 0xffcc00,
+ transparent: true,
+ opacity: 0.5,
+ blending: THREE.AdditiveBlending
+ });
+ const glow = new THREE.Mesh(glowGeometry, glowMaterial);
+
+ sun.userData.glow = glow;
+ scene.add(sun);
+ scene.add(glow);
+ }, undefined, (err) => {
+ console.error("Error loading sun texture:", err);
+ });
+}
+
+function createOrbits() {
+ const orbitMaterial = new THREE.LineBasicMaterial({ color: 0x888888 });
+
+ planetData.forEach(data => {
+ const orbitGeometry = new THREE.BufferGeometry();
+ const points = [];
+
+ const a = data.semiMajorAxis; // Semi-major axis
+
+ for (let i = 0; i <= 64; i++) {
+ const angle = (i / 64) * Math.PI * 2;
+ const r = a * (1 - data.eccentricity * data.eccentricity) / (1 + data.eccentricity * Math.cos(angle)); // Distance from the focus
+ const x = r * Math.cos(angle);
+ const z = r * Math.sin(angle);
+ points.push(x, 0, z);
+ }
+
+ orbitGeometry.setAttribute('position', new THREE.Float32BufferAttribute(points, 3));
+ const orbit = new THREE.LineLoop(orbitGeometry, orbitMaterial);
+ scene.add(orbit);
+ });
+}
+
+function createRing(planet, outerRadius, thickness, texturePath) {
+ // Create the outer ring geometry
+ const outerRingGeometry = new THREE.CylinderGeometry(outerRadius, outerRadius, thickness, 32);
+ const ringTextureLoader = new THREE.TextureLoader();
+
+ ringTextureLoader.load(texturePath, (texture) => {
+ const outerRingMaterial = new THREE.MeshStandardMaterial({
+ map: texture,
+ side: THREE.DoubleSide,
+ transparent: true,
+ opacity: 0.5
+ });
+
+ // Create the outer ring mesh
+ const outerRing = new THREE.Mesh(outerRingGeometry, outerRingMaterial);
+ outerRing.rotation.z = Math.PI; // Rotate to lay flat
+
+ // Group the rings
+ const ringGroup = new THREE.Group();
+ ringGroup.add(outerRing);
+
+ planet.add(ringGroup); // Make the ring group a child of the planet
+ }, undefined, (err) => {
+ console.error(`Error loading ring texture for ${planet.userData.name}:`, err);
+ });
+}
+
+function createPlanets() {
+ planetData.forEach(data => {
+ const textureLoader = new THREE.TextureLoader();
+
+ textureLoader.load(data.texture, (texture) => {
+ const geometry = new THREE.SphereGeometry(data.radius, 32, 32);
+ const material = new THREE.MeshStandardMaterial({ map: texture });
+ const planet = new THREE.Mesh(geometry, material);
+
+ planet.userData = {
+ orbitAngle: 0,
+ semiMajorAxis: data.semiMajorAxis,
+ eccentricity: data.eccentricity,
+ speed: data.speed
+ };
+
+ scene.add(planet);
+ planets[data.name] = planet;
+ if (data.name === "Saturn") {
+ createRing(planet, 0.65, 0.1, "textures/saturn_ring.png");
+ }
+
+ }, undefined, (err) => {
+ console.error(`Error loading texture for ${data.name}:`, err);
+ });
+ });
+}
+
+function createPlanetLabels() {
+ planetData.forEach(data => {
+ const label = document.createElement('div');
+ label.className = 'planet-label';
+ label.textContent = data.name;
+ label.style.position = 'absolute';
+ label.style.color = 'white';
+ label.style.pointerEvents = 'none'; // Prevent interactions
+ label.style.display = 'none'; // Start hidden
+ document.body.appendChild(label);
+ planetLabels.push(label);
+ console.log(`Label created for ${data.name}`);
+ });
+}
+
+function createAsteroids() {
+ const asteroidGeometry = new THREE.OctahedronGeometry(0.05 + Math.random() * 0.1, 1);
+ const textureLoader = new THREE.TextureLoader();
+
+ const innerRadius = 5.7; // Between Mars (1.52 AU) and Jupiter (5.20 AU)
+ const outerRadius = 6.2; // Adjust as needed for the belt thickness
+ const heightVariation = 2.5;
+
+ for (let i = 0; i < 50; i++) {
+ textureLoader.load("textures/asteroid.jpg", (texture) => {
+ const material = new THREE.MeshStandardMaterial({ map: texture });
+ const asteroid = new THREE.Mesh(asteroidGeometry, material);
+
+ const distance = innerRadius + Math.random() * (outerRadius - innerRadius);
+ const angle = Math.random() * Math.PI * 2;
+
+ asteroid.position.set(distance * Math.cos(angle), (Math.random() - 0.5) * heightVariation, distance * Math.sin(angle));
+ scene.add(asteroid);
+ asteroids.push(asteroid);
+ });
+ }
+}
+
+function createConstellations() {
+ const constellationMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
+
+ constellations.forEach(constellation => {
+ const points = [];
+ constellation.stars.forEach(star => {
+ points.push(new THREE.Vector3(star.position.x, star.position.y, star.position.z));
+ });
+
+ const geometry = new THREE.BufferGeometry().setFromPoints(points);
+ const constellationLine = new THREE.Line(geometry, constellationMaterial);
+ scene.add(constellationLine);
+ });
+}
+
+function animate() {
+ requestAnimationFrame(animate);
+ updatePlanets();
+ controls.update();
+ renderer.render(scene, camera);
+}
+
+function updatePlanets() {
+ Object.values(planets).forEach(planet => {
+ planet.userData.orbitAngle += speed * planet.userData.speed; // Update angle based on speed
+ const a = planet.userData.semiMajorAxis;
+ const e = planet.userData.eccentricity;
+ const r = a * (1 - e * e) / (1 + e * Math.cos(planet.userData.orbitAngle)); // Distance from focus
+
+ planet.position.x = r * Math.cos(planet.userData.orbitAngle);
+ planet.position.z = r * Math.sin(planet.userData.orbitAngle);
+
+ // Update labels position
+ const labelIndex = planetData.findIndex(data => data.name === planet.userData.name);
+ if (labelIndex !== -1) {
+ const label = planetLabels[labelIndex];
+ const labelPos = planet.position.clone().project(camera); // Project position to screen space
+ label.style.left = `${(labelPos.x * 0.5 + 0.5) * window.innerWidth}px`;
+ label.style.top = `${-(labelPos.y * 0.5 - 0.5) * window.innerHeight}px`;
+ label.style.display = 'block'; // Show label
+ }
+ });
+}
+
+// Handle window resize
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+// Initialize the scene
+init();
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..03d101ca
--- /dev/null
+++ b/style.css
@@ -0,0 +1,158 @@
+body {
+ margin: 0;
+ overflow: hidden;
+ font-family: 'Orbitron', sans-serif;
+ background-color: #000;
+ color:#1F51FF;
+}
+
+#loading {
+ position: fixed; /* Keep it in place */
+ top: 50%; /* Center vertically */
+ left: 50%; /* Center horizontally */
+ transform: translate(-50%, -50%); /* Centering effect */
+ text-align: center; /* Center the text */
+ color: white; /* Change text color */
+ font-size: 24px; /* Adjust font size */
+ z-index: 1000; /* Make sure it appears above other elements */
+}
+
+#progress-bar {
+ width: 100%; /* Full width of the parent */
+ max-width: 600px; /* Set a maximum width */
+ background-color: rgba(255, 255, 255, 0.5); /* Background for the progress bar */
+ margin: 10px auto 0; /* Center and add margin above */
+ border-radius: 5px; /* Rounded corners */
+ overflow: hidden; /* Ensure progress fill doesn't overflow */
+}
+
+#progress-fill {
+ width: 0%; /* Initial width for the fill */
+ height: 20px; /* Height of the progress bar */
+ background-color: #4caf50; /* Fill color */
+ transition: width 0.3s ease; /* Smooth transition for width change */
+}
+
+#scene-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ color:#1F51FF;
+}
+
+#details {
+ position: fixed;
+ top: 20px;
+ left: 20px;
+ background: rgba(0, 0, 0, 0.7);
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 14px;
+}
+
+.widget {
+ position: fixed;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.widget:hover {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+#left-widget {
+ top: 20px;
+ left: 20px;
+}
+
+#right-widget {
+ top: 20px;
+ right: 20px;
+}
+
+#controls {
+ position: fixed;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(0, 0, 0, 0.7);
+ padding: 10px;
+ border-radius: 5px;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
+
+.material-button {
+ background: none;
+ border: none;
+ color: #fff;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-family: 'Orbitron', sans-serif;
+ font-size: 14px;
+}
+
+.material-button .material-icons {
+ font-size: 50px;
+ margin-right: 5px;
+}
+
+.material-button:hover {
+ background: #0056b3;
+}
+
+.widget {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 20px;
+ color: white;
+ z-index: 30;
+ font-family: 'Orbitron';
+}
+
+.material-icons {
+ font-size: 24px;
+}
+
+#left-widget {
+ left: 20px;
+ top: 20px;
+}
+
+#right-widget {
+ right: 20px;
+ top: 20px;
+}
+
+input[type="range"] {
+ width: 100px;
+}
+
+.planet-label {
+ position: absolute;
+ color: #fff;
+ font-size: 12px;
+ text-align: center;
+ pointer-events: none;
+ text-shadow: 0 0 5px #000;
+ transform: translate(-50%, -50%);
+ color:#1F51FF;
+}
diff --git a/textures/asteroid.jpg b/textures/asteroid.jpg
new file mode 100644
index 00000000..00e76e01
Binary files /dev/null and b/textures/asteroid.jpg differ
diff --git a/textures/earth.jpg b/textures/earth.jpg
new file mode 100644
index 00000000..09e8f7b2
Binary files /dev/null and b/textures/earth.jpg differ
diff --git a/textures/mars.jpg b/textures/mars.jpg
new file mode 100644
index 00000000..09a804b5
Binary files /dev/null and b/textures/mars.jpg differ
diff --git a/textures/mercury.jpg b/textures/mercury.jpg
new file mode 100644
index 00000000..332c050a
Binary files /dev/null and b/textures/mercury.jpg differ
diff --git a/textures/neptune.jpg b/textures/neptune.jpg
new file mode 100644
index 00000000..30e7ac55
Binary files /dev/null and b/textures/neptune.jpg differ
diff --git a/textures/readme b/textures/readme
new file mode 100644
index 00000000..cfd78ad6
--- /dev/null
+++ b/textures/readme
@@ -0,0 +1 @@
+Orbitron 2k24
diff --git a/textures/saturn.jpg b/textures/saturn.jpg
new file mode 100644
index 00000000..c0d3f5f2
Binary files /dev/null and b/textures/saturn.jpg differ
diff --git a/textures/saturn_ring.png b/textures/saturn_ring.png
new file mode 100644
index 00000000..0aadf6e3
Binary files /dev/null and b/textures/saturn_ring.png differ
diff --git a/textures/sun.jpg b/textures/sun.jpg
new file mode 100644
index 00000000..5b0ac0ac
Binary files /dev/null and b/textures/sun.jpg differ
diff --git a/textures/titan.jpg b/textures/titan.jpg
new file mode 100644
index 00000000..09385f16
Binary files /dev/null and b/textures/titan.jpg differ
diff --git a/textures/uranus.jpg b/textures/uranus.jpg
new file mode 100644
index 00000000..d0abf4c1
Binary files /dev/null and b/textures/uranus.jpg differ
diff --git a/textures/venus.jpg b/textures/venus.jpg
new file mode 100644
index 00000000..c7ba2266
Binary files /dev/null and b/textures/venus.jpg differ