diff --git a/SolarPlanets HTML/Uranus.html b/SolarPlanets HTML/Uranus.html index 98f790b..6a87383 100644 --- a/SolarPlanets HTML/Uranus.html +++ b/SolarPlanets HTML/Uranus.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Uranus

+

+ Distance from the Sun: 1.8 billion miles +
+ Mass: 8.681 x 10 25 kg +
+ Radius: 15,759 km +
+ Moons: 27 +
+ Uranus is the seventh planet from the Sun, known for its unique sideways rotation and blue-green color due to methane in its atmosphere. +

+ +
+ +
@@ -187,6 +245,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/earth.html b/SolarPlanets HTML/earth.html index 2f9603d..39ea2b3 100644 --- a/SolarPlanets HTML/earth.html +++ b/SolarPlanets HTML/earth.html @@ -5,16 +5,73 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Earth

+

+ Distance from the Sun: 93 million miles +
+ Mass: 5.972 x 10^24 kg +
+ Radius: 6,371 km +
+ Moons: 1 +
+ Earth is the third planet from the Sun and the only known planet in our solar system that supports life. +

+
+ +
+ @@ -182,6 +239,47 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { + hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { + // Check if the click was outside the hover box and info point + const isClickInsideInfoPoint = infoPoint.contains(event.target); + const isClickInsideHoverBox = hoverBox.contains(event.target); + + if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box + } +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/jupiter.html b/SolarPlanets HTML/jupiter.html index ba962d7..e88025e 100644 --- a/SolarPlanets HTML/jupiter.html +++ b/SolarPlanets HTML/jupiter.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Jupiter

+

+ Distance from the Sun: 484 million miles +
+ Mass: 1.898 x 1027 kg +
+ Radius: 69,911 km +
+ Moons: 79 +
+ Jupiter is the largest planet in our solar system, known for its Great Red Spot and extensive system of moons. +

+ +
+ +
@@ -182,6 +240,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/mars.html b/SolarPlanets HTML/mars.html index c96091d..927d7cc 100644 --- a/SolarPlanets HTML/mars.html +++ b/SolarPlanets HTML/mars.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Mars

+

+ Distance from the Sun: 142 million miles +
+ Mass: 6.417 x 10 23 kg +
+ Radius: 3,389.5 km +
+ Moons: 2 +
+ Mars is the fourth planet from the Sun, often referred to as the "Red Planet" due to its reddish appearance caused by iron oxide on its surface. +

+ +
+ +
@@ -182,6 +240,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/mercury.html b/SolarPlanets HTML/mercury.html index cf01de3..40613ba 100644 --- a/SolarPlanets HTML/mercury.html +++ b/SolarPlanets HTML/mercury.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Mercury

+

+ Distance from the Sun: 36 million miles +
+ Mass: 3.285 x 10 23 kg +
+ Radius: 2,439.7 km +
+ Moons: 0 +
+ Mercury is the closest planet to the Sun and the smallest in the solar system, known for its extreme temperature fluctuations. +

+ +
+ +
@@ -182,6 +240,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/neptune.html b/SolarPlanets HTML/neptune.html index fce4ab4..ac59781 100644 --- a/SolarPlanets HTML/neptune.html +++ b/SolarPlanets HTML/neptune.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Neptune

+

+ Distance from the Sun: 2.7 billion miles +
+ Mass: 1.024 x 10 26 kg +
+ Radius: 24,622 km +
+ Moons: 14 +
+ Neptune is the eighth and farthest planet from the Sun, characterized by its deep blue color and strong winds. +

+ +
+ +
@@ -165,7 +223,7 @@ ); // Camera positioning - camera.position.set(500, 55, 50); // Adjusted the camera position to a closer view + camera.position.set(950, 800, 900); // Adjusted the camera position to zoom more into the model camera.lookAt(0, 0, 0); // Ensure the camera looks at the model // Animation loop @@ -187,6 +245,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/saturn.html b/SolarPlanets HTML/saturn.html index 40e79cf..6c1d006 100644 --- a/SolarPlanets HTML/saturn.html +++ b/SolarPlanets HTML/saturn.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Saturn

+

+ Distance from the Sun: 886 million miles +
+ Mass: 5.683 x 10 26 kg +
+ Radius: 58,232 km +
+ Moons: 83 +
+ Saturn is the sixth planet from the Sun, famous for its prominent ring system and being the second-largest planet in the solar system. +

+ +
+ +
@@ -182,6 +240,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/sun.html b/SolarPlanets HTML/sun.html index c636766..538a5ab 100644 --- a/SolarPlanets HTML/sun.html +++ b/SolarPlanets HTML/sun.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Star Name: Sun

+

+ Distance from the Sun: 0 miles (it is the center of our solar system) +
+ Mass: 1.989 x 10 30 kg +
+ Radius: 432,690 miles (or 696,340 km) +
+ Moons: 0 +
+ The Sun is a G-type main-sequence star (G dwarf) and is the brightest object in the solar system, providing the necessary light and heat for life on Earth. +

+ +
+ +
@@ -182,6 +240,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition); diff --git a/SolarPlanets HTML/venus.html b/SolarPlanets HTML/venus.html index b63b463..949106c 100644 --- a/SolarPlanets HTML/venus.html +++ b/SolarPlanets HTML/venus.html @@ -5,16 +5,74 @@ 3D Model Viewer with Free Movement +
+

Planet Name: Venus

+

+ Distance from the Sun: 67 million miles +
+ Mass: 4.867 x 10 24 kg +
+ Radius: 6,051.8 km +
+ Moons: 0 +
+ Venus is the second planet from the Sun and is similar in structure to Earth but has a thick, toxic atmosphere and surface temperatures hot enough to melt lead. +

+ +
+ +
@@ -183,6 +241,46 @@ camera.aspect = width / height; camera.updateProjectionMatrix(); }); + + // Handle hover events + const hoverBox = document.getElementById("hoverBox"); + const infoPoint = document.querySelector(".info-point"); + + infoPoint.addEventListener("mouseenter", function () { + hoverBox.classList.add("active"); // Show the hover box + }); + + infoPoint.addEventListener("mouseleave", function () { + hoverBox.classList.remove("active"); // Hide the hover box + }); + + // Update the hover box position + function updateHoverBoxPosition(event) { + const mouseX = event.clientX; + const mouseY = event.clientY; + hoverBox.style.left = `${mouseX + 20}px`; // Position with some offset + hoverBox.style.top = `${mouseY - 20}px`; // Position with some offset + } + + // Show the hover box when clicking on the info point +infoPoint.addEventListener("click", function () { +hoverBox.classList.toggle("active"); // Toggle the hover box +}); + +// Handle click events +document.addEventListener("click", function (event) { +// Check if the click was outside the hover box and info point +const isClickInsideInfoPoint = infoPoint.contains(event.target); +const isClickInsideHoverBox = hoverBox.contains(event.target); + +if (!isClickInsideInfoPoint && !isClickInsideHoverBox) { + hoverBox.classList.remove("active"); // Hide the hover box +} +}); + + + // Add mouse move event listener to update hover box position + window.addEventListener("mousemove", updateHoverBoxPosition);