Skip to content

Commit

Permalink
Merge pull request alurubalakarthikeya#55 from ArjiJethin/main
Browse files Browse the repository at this point in the history 
*Dead
  • Loading branch information
@ArjiJethin
ArjiJethin authored Oct 6, 2024
2 parents 5ae7aad + b9cf29f commit 5a9d26e
Show file tree
Hide file tree
Showing 32 changed files with 1,135 additions and 1,085 deletions.
136 changes: 74 additions & 62 deletions ExoPlanets HTML/55Cancri-e.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,16 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D 55 Cancri e</title>
<link rel="stylesheet" href="exo.css">
<link rel="stylesheet" href="exo.css" />
<link rel="icon" type="image/png" href="../Media/exo.png" />
</head>
<body>
<button class="redirect"> <a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a></button>
<button class="redirect"> <a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a></button>
<button class="redirect">
<a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a>
</button>
<button class="redirect">
<a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a>
</button>
<div class="hover-box" id="hoverBox">
<!-- 55 Cancri e -->
<h3>Planet Name: 55 Cancri e</h3>
Expand All @@ -21,7 +26,8 @@ <h3>Planet Name: 55 Cancri e</h3>
<br />
Moons: 0
<br />
55 Cancri e is a rocky exoplanet orbiting very close to its host star. It is extremely hot with surface temperatures reaching over 2000°C.
55 Cancri e is a rocky exoplanet orbiting very close to its host star.
It is extremely hot with surface temperatures reaching over 2000°C.
</p>
</div>
<div class="info-point"></div>
Expand All @@ -33,7 +39,10 @@ <h3>Planet Name: 55 Cancri e</h3>
<div id="instructions">
<h3>Current: 55_Cancri_e637</h3>
<h5>Instructions:</h5>
<h5>1) Hold and move around to explore the 360 view of the planet (For desktops)</h5>
<h5>
1) Hold and move around to explore the 360 view of the planet (For
desktops)
</h5>
<h5>2) Tap on the model to get info about the planet (For mobiles)</h5>
</div>

Expand All @@ -43,8 +52,8 @@ <h5>2) Tap on the model to get info about the planet (For mobiles)</h5>
<a href="GJ1214b.html">&#8250;</a>
</div>

<div class="dropup-items" id="dropupItems" style="display: none;">
<h4>Planets List: </h4>
<div class="dropup-items" id="dropupItems" style="display: none">
<h4>Planets List:</h4>
<a href="55Cancri-e.html">55_cancri_e637</a>
<a href="GJ1214b.html">GJ1214b</a>
<a href="Gliese1132b.html">Gliese1132b</a>
Expand All @@ -55,33 +64,36 @@ <h4>Planets List: </h4>
<a href="PegasiB.html">51_pegasi_b</a>
<a href="TOI-1452b.html">TOI-1452</a>
<a href="WASP-76b.html">WASP-76b</a>
<h2 id="backButton">&#8249;-------- </h2>
<h2 id="backButton">&#8249;--------</h2>
</div>
</div>
<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>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>

document.getElementById('jumpButton').addEventListener('click', function () {
// Hide instructions and navigation buttons
document.getElementById('instructions').style.display = 'none';
document.getElementById('navButtons').style.display = 'none';
document
.getElementById("jumpButton")
.addEventListener("click", function () {
// Hide instructions and navigation buttons
document.getElementById("instructions").style.display = "none";
document.getElementById("navButtons").style.display = "none";

// Show the dropup-items with the planet list
document.getElementById('dropupItems').style.display = 'block';
});
// Show the dropup-items with the planet list
document.getElementById("dropupItems").style.display = "block";
});

// Handle Back button click to return to instructions
document.getElementById('backButton').addEventListener('click', function () {
// Show instructions and navigation buttons again
document.getElementById('instructions').style.display = 'block';
document.getElementById('navButtons').style.display = 'flex';
document
.getElementById("backButton")
.addEventListener("click", function () {
// Show instructions and navigation buttons again
document.getElementById("instructions").style.display = "block";
document.getElementById("navButtons").style.display = "flex";

// Hide the dropup-items
document.getElementById("dropupItems").style.display = "none";
});

// Hide the dropup-items
document.getElementById('dropupItems').style.display = 'none';
});

// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
Expand Down Expand Up @@ -259,44 +271,44 @@ <h2 id="backButton">&#8249;-------- </h2>
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);
// 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);
</script>
</body>
</html>
136 changes: 74 additions & 62 deletions ExoPlanets HTML/GJ1214b.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,16 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D GJ 1214 b</title>
<link rel="stylesheet" href="exo.css">
<link rel="stylesheet" href="exo.css" />
<link rel="icon" type="image/png" href="../Media/exo.png" />
</head>
<body>
<button class="redirect"> <a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a></button>
<button class="redirect"> <a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a></button>
<button class="redirect">
<a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a>
</button>
<button class="redirect">
<a href="../SolarPlanets HTML/SolarSystem.html">Back to Solar</a>
</button>
<div class="hover-box" id="hoverBox">
<!-- GJ 1214 b -->
<h3>Planet Name: GJ 1214 b</h3>
Expand All @@ -21,7 +26,8 @@ <h3>Planet Name: GJ 1214 b</h3>
<br />
Moons: 0
<br />
GJ 1214 b is a "water world" or a "mini-Neptune" with a thick, steamy atmosphere. Its surface may be covered by water under high pressure.
GJ 1214 b is a "water world" or a "mini-Neptune" with a thick, steamy
atmosphere. Its surface may be covered by water under high pressure.
</p>
</div>
<div class="info-point"></div>
Expand All @@ -33,7 +39,10 @@ <h3>Planet Name: GJ 1214 b</h3>
<div id="instructions">
<h3>Current: GJ1214b</h3>
<h5>Instructions:</h5>
<h5>1) Hold and move around to explore the 360 view of the planet (For desktops)</h5>
<h5>
1) Hold and move around to explore the 360 view of the planet (For
desktops)
</h5>
<h5>2) Tap on the model to get info about the planet (For mobiles)</h5>
</div>

Expand All @@ -42,9 +51,9 @@ <h5>2) Tap on the model to get info about the planet (For mobiles)</h5>
<button id="jumpButton">JUMP</button>
<a href="Gliese1132b.html">&#8250;</a>
</div>
<div class="dropup-items" id="dropupItems" style="display: none;">
<h4>Planets List: </h4>

<div class="dropup-items" id="dropupItems" style="display: none">
<h4>Planets List:</h4>
<a href="55Cancri-e.html">55_cancri_e637</a>
<a href="GJ1214b.html">GJ1214b</a>
<a href="Gliese1132b.html">Gliese1132b</a>
Expand All @@ -55,32 +64,35 @@ <h4>Planets List: </h4>
<a href="PegasiB.html">51_pegasi_b</a>
<a href="TOI-1452b.html">TOI-1452</a>
<a href="WASP-76b.html">WASP-76b</a>
<h2 id="backButton">&#8249;-------- </h2>
<h2 id="backButton">&#8249;--------</h2>
</div>
</div>
<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>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>

document.getElementById('jumpButton').addEventListener('click', function () {
// Hide instructions and navigation buttons
document.getElementById('instructions').style.display = 'none';
document.getElementById('navButtons').style.display = 'none';
document
.getElementById("jumpButton")
.addEventListener("click", function () {
// Hide instructions and navigation buttons
document.getElementById("instructions").style.display = "none";
document.getElementById("navButtons").style.display = "none";

// Show the dropup-items with the planet list
document.getElementById('dropupItems').style.display = 'block';
});
// Show the dropup-items with the planet list
document.getElementById("dropupItems").style.display = "block";
});

// Handle Back button click to return to instructions
document.getElementById('backButton').addEventListener('click', function () {
// Show instructions and navigation buttons again
document.getElementById('instructions').style.display = 'block';
document.getElementById('navButtons').style.display = 'flex';
document
.getElementById("backButton")
.addEventListener("click", function () {
// Show instructions and navigation buttons again
document.getElementById("instructions").style.display = "block";
document.getElementById("navButtons").style.display = "flex";

// Hide the dropup-items
document.getElementById('dropupItems').style.display = 'none';
});
// Hide the dropup-items
document.getElementById("dropupItems").style.display = "none";
});
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
Expand Down Expand Up @@ -258,44 +270,44 @@ <h2 id="backButton">&#8249;-------- </h2>
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);
// 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);
</script>
</body>
</html>
Loading

0 comments on commit 5a9d26e

Please sign in to comment.