added asteroids & bodies info

abdullah-k18 · Oct 6, 2024 · a5e46d3 · a5e46d3
1 parent 10694e6
commit a5e46d3
Show file tree

Hide file tree

Showing 46 changed files with 2,082 additions and 17 deletions.
diff --git a/bennu/bennu.html b/bennu/bennu.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="https://www.svgrepo.com/show/187801/solar-system-space.svg" type="image/x-icon" />
+    <title>Bennu</title>
+</head>
+<body>
+    <button class="back-button" onclick="goHome()">
+        &#8592;
+    </button>
+
+    <div class="info-box" id="infoBox">
+        <h3 id="bennuTitle">بینو</h3>
+        <p id="bennuInfo">
+            Bennu is a small near-Earth asteroid that was discovered in 1999. It is approximately 487 meters (1,600 feet) in diameter and is classified as a dark asteroid, appearing similar to most things found on Earth. Due to its size and proximity to Earth, Bennu is particularly important for potential impacts on our planet. Bennu orbits the Sun and comes close to Earth approximately every 1.2 years.
+        </p>
+    </div>
+
+    <div class="nav-bar">
+        <button class="nav-button" onclick="switchLanguage('english')">English</button>
+        <button class="nav-button" onclick="switchLanguage('urdu')">Urdu</button>
+    </div>
+
+    <script src="script.js"></script>
+    <script>
+        function goHome() {
+            window.location.href = '../index.html';
+        }
+
+        function switchLanguage(language) {
+            const bennuTitle = document.getElementById('bennuTitle');
+            const bennuInfo = document.getElementById('bennuInfo');
+
+            if (language === 'english') {
+                bennuTitle.textContent = 'Bennu';
+                bennuInfo.innerHTML = `
+                    Bennu is a small near-Earth asteroid that was discovered in 1999. It is approximately 487 meters (1,600 feet) in diameter and is classified as a dark asteroid, appearing similar to most things found on Earth. Due to its size and proximity to Earth, Bennu is particularly important for potential impacts on our planet. Bennu orbits the Sun and comes close to Earth approximately every 1.2 years.
+                `;
+            } else if (language === 'urdu') {
+                bennuTitle.textContent = 'بینو';
+                bennuInfo.innerHTML = `
+                    بینو ایک چھوٹا سیارچہ ہے جو زمین کے قریب سے گزرتا ہے۔ یہ تقریباً 487 میٹر (1,600 فٹ) قطر میں ہے اور اسے 1999 میں دریافت کیا گیا تھا۔ بینو ایک سیاہ رنگ کا سیارچہ ہے، جو زمین کی سطح پر موجود زیادہ تر چیزوں کی طرح دیکھی جاتی ہے۔ یہ اپنے سائز اور زمین کے ساتھ اپنی نزدیکی کے باعث زمین پر ممکنہ اثرات کے لیے خاص طور پر اہم ہے۔ بینو کا مدار سورج کے گرد چکر لگاتا ہے اور یہ ہر 1.2 سال میں ایک بار زمین کے قریب آتا ہے۔
+                `;
+            }
+        }
+
+        window.onload = function() {
+            switchLanguage('english');
+        };
+    </script>
+</body>
+</html>
diff --git a/bennu/script.js b/bennu/script.js
@@ -0,0 +1,60 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.25;
+controls.enableZoom = true;
+
+const textureLoader = new THREE.TextureLoader();
+const backgroundTexture = textureLoader.load('../textures/bg.jpg');
+const backgroundGeometry = new THREE.SphereGeometry(500, 64, 64);
+const backgroundMaterial = new THREE.MeshBasicMaterial({
+    map: backgroundTexture,
+    side: THREE.BackSide  
+});
+const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
+scene.add(backgroundMesh);
+
+const pointLight = new THREE.PointLight(0xffffff, 2, 100);
+pointLight.position.set(0, 0, 0);
+scene.add(pointLight);
+
+const ambientLight = new THREE.AmbientLight(0x404040);
+scene.add(ambientLight);
+
+camera.position.set(10, 0, 0);
+camera.lookAt(0, 0, 0);
+
+const loader = new THREE.GLTFLoader();
+loader.load('../models/bennu.glb', (gltf) => {
+    const erosModel = gltf.scene;
+
+    const box = new THREE.Box3().setFromObject(erosModel);
+    const size = box.getSize(new THREE.Vector3());
+    const desiredSize = 5;
+    const scaleFactor = desiredSize / Math.max(size.x, size.y, size.z);
+    erosModel.scale.set(scaleFactor, scaleFactor, scaleFactor);
+
+    erosModel.position.set(0, 0, 0);
+    scene.add(erosModel);
+}, undefined, (error) => {
+    console.error('An error occurred while loading the Eros model:', error);
+});
+
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene, camera);
+}
+
+animate();
+
+window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+});
diff --git a/bennu/styles.css b/bennu/styles.css
@@ -0,0 +1,77 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    background-color: white;
+    color: black;
+}
+
+canvas {
+    display: block;
+}
+
+.back-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    font-size: 24px;
+    z-index: 10;
+}
+
+.back-button:hover {
+    background-color: rgba(0, 0, 0, 0.9);
+}
+
+.info-box {
+    position: absolute;
+    bottom: 80px;
+    right: 20px;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #000;
+    padding: 15px;
+    border-radius: 8px;
+    width: 250px;
+    display: block;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.info-box h3 {
+    margin: 0 0 10px 0;
+    font-size: 18px;
+}
+
+.info-box p {
+    margin: 5px 0;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.info-box p.urdu {
+    text-align: right;
+    font-family: 'Noto Nastaliq Urdu', serif;
+}
+
+.nav-bar {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+}
+
+.nav-button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.nav-button:hover {
+    background-color: #0056b3;
+}
diff --git a/ceres/ceres.html b/ceres/ceres.html
@@ -6,18 +6,53 @@
     <link rel="stylesheet" href="styles.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="https://www.svgrepo.com/show/187801/solar-system-space.svg" type="image/x-icon" />
     <title>Ceres</title>
 </head>
 <body>
     <button class="back-button" onclick="goHome()">
         &#8592;
     </button>
 
+    <div class="info-box" id="infoBox">
+        <h3 id="ceresTitle">Ceres</h3>
+        <p id="ceresInfo">
+            Ceres is the largest object in the asteroid belt. Discovered on January 1, 1801, by Giuseppe Piazzi, it is classified as a dwarf planet. Ceres has a diameter of 940 km (584 miles) and takes about 4.6 years to complete one orbit around the Sun. It has a thin atmosphere with traces of water vapor, and its surface is marked by the Occator Crater, which features bright spots.
+        </p>
+    </div>
+
+    <div class="nav-bar">
+        <button class="nav-button" onclick="switchLanguage('english')">English</button>
+        <button class="nav-button" onclick="switchLanguage('urdu')">Urdu</button>
+    </div>
+
     <script src="script.js"></script>
     <script>
         function goHome() {
             window.location.href = '../index.html';
         }
+
+        function switchLanguage(language) {
+            const ceresTitle = document.getElementById('ceresTitle');
+            const ceresInfo = document.getElementById('ceresInfo');
+
+            if (language === 'english') {
+                ceresTitle.textContent = 'Ceres';
+                ceresInfo.innerHTML = `
+                    Ceres is the largest object in the asteroid belt. Discovered on January 1, 1801, by Giuseppe Piazzi, it is classified as a dwarf planet. Ceres has a diameter of 940 km (584 miles) and takes about 4.6 years to complete one orbit around the Sun. It has a thin atmosphere with traces of water vapor, and its surface is marked by the Occator Crater, which features bright spots.
+                `;
+            } else if (language === 'urdu') {
+                ceresTitle.textContent = 'سيریس';
+                ceresInfo.innerHTML = `
+                    سيریس شمسی نظام کا سب سے بڑا بونا سیارہ ہے۔ 1 جنوری 1801 کو جیوسپی پائزی نے دریافت کیا۔ اسے بونا سیارہ کہا جاتا ہے۔ سيریس کا قطر 940 کلومیٹر (584 میل) ہے اور یہ سورج کے گرد مکمل گردش کرنے میں 4.6 سال لیتا ہے۔ اس کا ماحول بہت پتلا ہے جس میں پانی کی بوندیں موجود ہیں، اور اس کی سطح اوکیٹر کریٹر کے ساتھ نشان زد ہے، جس میں چمکدار مقامات موجود ہیں۔
+                `;
+            }
+        }
+
+        window.onload = function() {
+            switchLanguage('english');
+        };
     </script>
 </body>
 </html>
diff --git a/ceres/styles.css b/ceres/styles.css
@@ -1,6 +1,8 @@
 body {
     margin: 0;
     overflow: hidden;
+    background-color: white;
+    color: black;
 }
 
 canvas {
@@ -23,3 +25,53 @@ canvas {
 .back-button:hover {
     background-color: rgba(0, 0, 0, 0.9);
 }
+
+.info-box {
+    position: absolute;
+    bottom: 80px;
+    right: 20px;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #000;
+    padding: 15px;
+    border-radius: 8px;
+    width: 250px;
+    display: block;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.info-box h3 {
+    margin: 0 0 10px 0;
+    font-size: 18px;
+}
+
+.info-box p {
+    margin: 5px 0;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.info-box p.urdu {
+    text-align: right;
+    font-family: 'Noto Nastaliq Urdu', serif;
+}
+
+.nav-bar {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+}
+
+.nav-button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.nav-button:hover {
+    background-color: #0056b3;
+}
diff --git a/earth/earth.html b/earth/earth.html
@@ -6,18 +6,53 @@
     <link rel="stylesheet" href="styles.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="https://www.svgrepo.com/show/187801/solar-system-space.svg" type="image/x-icon" />
     <title>Earth</title>
 </head>
 <body>
     <button class="back-button" onclick="goHome()">
         &#8592;
     </button>
 
+    <div class="info-box" id="infoBox">
+        <h3 id="earthTitle">Earth</h3>
+        <p id="earthInfo">
+            Earth is the third planet from the Sun and is the only astronomical object known to harbor life. It has a diameter of about 12,742 km (7,918 miles) and takes approximately 365.25 days to orbit the Sun. Earth has a diverse environment with land, water, and atmosphere, supporting a wide variety of ecosystems. It has one natural satellite, the Moon, which influences tides and stabilizes the planet's tilt.
+        </p>
+    </div>
+
+    <div class="nav-bar">
+        <button class="nav-button" onclick="switchLanguage('english')">English</button>
+        <button class="nav-button" onclick="switchLanguage('urdu')">Urdu</button>
+    </div>
+
     <script src="script.js"></script>
     <script>
         function goHome() {
             window.location.href = '../index.html';
         }
+
+        function switchLanguage(language) {
+            const earthTitle = document.getElementById('earthTitle');
+            const earthInfo = document.getElementById('earthInfo');
+
+            if (language === 'english') {
+                earthTitle.textContent = 'Earth';
+                earthInfo.innerHTML = `
+                    Earth is the third planet from the Sun and is the only astronomical object known to harbor life. It has a diameter of about 12,742 km (7,918 miles) and takes approximately 365.25 days to orbit the Sun. Earth has a diverse environment with land, water, and atmosphere, supporting a wide variety of ecosystems. It has one natural satellite, the Moon, which influences tides and stabilizes the planet's tilt.
+                `;
+            } else if (language === 'urdu') {
+                earthTitle.textContent = 'زمین';
+                earthInfo.innerHTML = `
+                    زمین سورج سے تیسرا سیارہ ہے اور یہ واحد فلکیاتی جسم ہے جس پر زندگی کی موجودگی معلوم ہے۔ اس کا قطر تقریباً 12,742 کلومیٹر (7,918 میل) ہے اور یہ سورج کے گرد تقریباً 365.25 دن میں گردش کرتی ہے۔ زمین میں مختلف ماحولیاتی نظام ہیں جن میں زمین، پانی، اور ہوا شامل ہیں، جو مختلف قسم کی ایکو سسٹمز کی حمایت کرتے ہیں۔ اس کے ایک قدرتی قمر، چاند، ہے جو طغیانیوں پر اثر انداز ہوتا ہے اور سیارے کے جھکاؤ کو مستحکم رکھتا ہے۔
+                `;
+            }
+        }
+
+        window.onload = function() {
+            switchLanguage('english');
+        };
     </script>
 </body>
 </html>