<div class="solar-system-container">
<div class="solar-system" id="solarSystem">
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search planets...">
<div id="autocompleteResults" class="autocomplete-results"></div>
</div>
<div class="shooting-star"></div>
<div class="sun"></div>
<div class="planet-info" id="planetInfo" style="display: none;"></div>
<div class="focused-planet-info" id="focusedPlanetInfo" style="display: none;">
<h2 id="focusedPlanetName"></h2>
<p id="focusedPlanetDescription"></p>
<button onclick="handlePlanetClick(null)">Return to Solar System</button>
</div>
<button class="solar-system-facts-button" onclick="toggleSolarSystemFacts()">
Solar System Facts
</button>
</div>
<div id="solarSystemFacts" class="solar-system-facts" style="display: none;">
<div id="factsDragHandle" class="facts-drag-handle">
Solar System Facts
<button id="closeFactsButton" class="close-button">×</button>
</div>
<ul>
<li>The Solar System formed about 4.6 billion years ago.</li>
<li>It consists of the Sun, 8 planets, dwarf planets, and various small bodies.</li>
<li>The Sun contains 99.86% of the Solar System's known mass.</li>
<li>The four inner planets are called terrestrial planets.</li>
<li>The four outer planets are called gas giants.</li>
</ul>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* Global styles */
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: "Inter", sans-serif;
}
/* Container styles */
.solar-system-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
background: linear-gradient(to bottom right, #1a202c, #000000);
}
.solar-system {
position: relative;
width: 100%;
max-width: 50rem;
aspect-ratio: 1 / 1;
border-radius: 1.5rem;
background-color: rgba(31, 41, 55, 0.5);
backdrop-filter: blur(12px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
/* Star styles */
.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
}
/* Sun styles */
.sun {
position: absolute;
left: 50%;
top: 50%;
width: 5rem;
height: 5rem;
background-color: #ecc94b;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 60px 20px rgba(255, 255, 0, 0.4);
}
/* Orbit styles */
.orbit {
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
border: 1px solid #4b5563;
transform: translate(-50%, -50%);
}
/* Planet styles */
.planet-container {
position: absolute;
left: 50%;
top: 50%;
width: 1px;
height: 1px;
}
.planet {
position: absolute;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
}
.planet:hover {
transform: scale(3); /* Increased from 1.2 to 3 (300%) */
z-index: 10; /* Ensure the hovered planet appears above others */
}
.planet.focused {
transform: scale(3);
z-index: 10;
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
}
.planet.dimmed {
opacity: 0.5;
}
/* Focused planet info styles */
.focused-planet-info {
position: absolute;
left: 1rem;
right: 1rem;
bottom: 1rem;
background-color: rgba(31, 41, 55, 0.9);
color: white;
padding: 1rem;
padding-top: 0;
border-radius: 0.75rem;
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 100;
}
.focused-planet-info.visible {
opacity: 1;
}
.focused-planet-info h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.focused-planet-info p {
font-size: 0.875rem;
margin-bottom: 1rem;
}
.focused-planet-info button {
padding: 0.5rem 1rem;
background-color: #2563eb;
color: white;
border-radius: 0.5rem;
font-size: 0.875rem;
transition: background-color 0.3s;
border: none;
cursor: pointer;
}
.focused-planet-info button:hover {
background-color: #1d4ed8;
}
/* Animations */
@keyframes orbit {
from {
transform: rotate(0deg) translateX(-50%) translateY(-50%);
}
to {
transform: rotate(360deg) translateX(-50%) translateY(-50%);
}
}
@keyframes twinkle {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.2;
}
}
/* Solar System Facts Button */
.solar-system-facts-button {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
background-color: #2563eb;
color: white;
border-radius: 0.5rem;
font-size: 0.875rem;
transition: background-color 0.3s;
border: none;
cursor: pointer;
z-index: 20;
}
.solar-system-facts-button:hover {
background-color: #1d4ed8;
}
/* Solar System Facts Card */
.solar-system-facts {
position: fixed;
width: 80%;
max-width: 30rem;
background-color: rgba(31, 41, 55, 0.9);
color: white;
padding: 1.5rem;
padding-bottom: 0.5rem;
border-radius: 0.75rem;
backdrop-filter: blur(4px);
z-index: 99;
opacity: 0;
transition: opacity 0.3s ease-in-out;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.facts-drag-handle {
padding: 10px;
background-color: rgba(37, 99, 235, 0.8);
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
margin: -1.5rem -1.5rem 1rem -1.5rem;
cursor: move;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
height: 30px;
width: 30px;
background-color: rgba(22, 96, 255, 0.8);
color: white;
border-radius: 100%;
font-size: 1rem;
transition: background-color 0.3s;
cursor: pointer;
}
.close-button:hover {
background-color: #ff3a3a;
}
.solar-system-facts.visible {
opacity: 1;
}
.solar-system-facts h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
.solar-system-facts ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.solar-system-facts li {
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
/* Shooting Star */
@keyframes shootingStar {
0% { transform: translateX(0) translateY(0); opacity: 1; }
100% { transform: translateX(-300px) translateY(300px); opacity: 0; }
}
.shooting-star {
position: absolute;
width: 2px;
height: 2px;
background-color: #fff;
top: 0;
right: 0;
animation: shootingStar 2s linear infinite;
}
.search-container {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 20;
}
#searchInput {
padding: 0.5rem;
border-radius: 0.5rem;
border: none;
background-color: rgba(255, 255, 255, 0.1);
color: white;
width: 200px;
}
.autocomplete-results {
position: absolute;
background-color: rgba(31, 41, 55, 0.9);
border-radius: 0.5rem;
width: 215px;
max-height: 200px;
overflow-y: auto;
display: none;
}
.autocomplete-item {
padding: 0.5rem;
cursor: pointer;
color: white;
}
.autocomplete-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.highlight {
background-color: rgba(255, 255, 0, 0.3);
}
const planets = [
{ name: 'Mercury', color: '#8c7e6d', size: 8, orbitSize: 60, description: 'The smallest planet, closest to the sun. It has a rocky surface and extreme temperature variations.' },
{ name: 'Venus', color: '#e3bb76', size: 12, orbitSize: 80, description: 'Often called Earth\'s twin due to similar size and mass. It has a toxic atmosphere and is the hottest planet.' },
{ name: 'Earth', color: '#4f97dd', size: 12, orbitSize: 100, description: 'Our home planet, the only known world to harbor life. It\'s covered mostly by water and has a life-sustaining atmosphere.' },
{ name: 'Mars', color: '#d1693f', size: 10, orbitSize: 120, description: 'Known as the Red Planet. It has the largest volcano and canyon in the solar system.' },
{ name: 'Jupiter', color: '#e0ae6f', size: 24, orbitSize: 160, description: 'The largest planet, a gas giant with a Great Red Spot storm that has raged for over 150 years.' },
{ name: 'Saturn', color: '#f7e2a1', size: 20, orbitSize: 200, description: 'Famous for its distinctive ring system. It\'s the least dense planet and could float in water.' },
{ name: 'Uranus', color: '#9fc4e5', size: 16, orbitSize: 240, description: 'An ice giant that rotates on its side, causing extreme seasonal variations.' },
{ name: 'Neptune', color: '#3e54e8', size: 16, orbitSize: 280, description: 'The windiest planet, with speeds reaching 1,200 mph. It has a dynamic storm system called the Great Dark Spot.' },
];
let selectedPlanet = null;
let focusedPlanet = null;
function generateStarsAndPlanets() {
const solarSystem = document.getElementById('solarSystem');
// Generate stars
for (let i = 0; i < 100; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.width = Math.random() * 2 + 1 + 'px';
star.style.height = star.style.width;
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animation = `twinkle ${Math.random() * 5 + 3}s infinite`;
solarSystem.appendChild(star);
}
// Generate planets and orbits
planets.forEach((planet, index) => {
const orbit = document.createElement('div');
orbit.className = 'orbit';
orbit.style.width = planet.orbitSize * 2 + 'px';
orbit.style.height = planet.orbitSize * 2 + 'px';
solarSystem.appendChild(orbit);
const planetContainer = document.createElement('div');
planetContainer.className = 'planet-container';
planetContainer.style.animation = `orbit ${15 + index * 5}s linear infinite`;
planetContainer.style.zIndex = planets.length - index; // Add this line
const planetElement = document.createElement('div');
planetElement.className = 'planet';
planetElement.style.width = planet.size + 'px';
planetElement.style.height = planet.size + 'px';
planetElement.style.backgroundColor = planet.color;
planetElement.style.top = `-${planet.size / 2}px`;
planetElement.style.left = `${planet.orbitSize - planet.size / 2}px`;
planetElement.addEventListener('mouseenter', () => handlePlanetHover(planet.name));
planetElement.addEventListener('mouseleave', () => handlePlanetHover(null));
planetElement.addEventListener('click', (event) => {
event.stopPropagation();
handlePlanetClick(planet.name);
});
planetContainer.appendChild(planetElement);
solarSystem.appendChild(planetContainer);
});
}
function handlePlanetHover(planetName) {
const planetInfo = document.getElementById('planetInfo');
if (planetName && !focusedPlanet) {
planetInfo.textContent = planetName;
planetInfo.style.display = 'block';
selectedPlanet = planetName;
} else {
planetInfo.style.display = 'none';
selectedPlanet = null;
}
}
function handlePlanetClick(planetName) {
focusedPlanet = planetName;
updatePlanetFocus();
}
function updatePlanetFocus() {
const focusedPlanetInfo = document.getElementById('focusedPlanetInfo');
const planetElements = document.querySelectorAll('.planet');
if (focusedPlanet) {
const planet = planets.find(p => p.name === focusedPlanet);
document.getElementById('focusedPlanetName').textContent = planet.name;
document.getElementById('focusedPlanetDescription').textContent = planet.description;
focusedPlanetInfo.style.display = 'block';
setTimeout(() => focusedPlanetInfo.classList.add('visible'), 10);
planetElements.forEach(el => {
if (el.parentNode.style.animation.includes(`${15 + planets.findIndex(p => p.name === focusedPlanet) * 5}s`)) {
el.classList.add('focused');
} else {
el.classList.add('dimmed');
}
});
} else {
focusedPlanetInfo.classList.remove('visible');
setTimeout(() => focusedPlanetInfo.style.display = 'none', 300);
planetElements.forEach(el => {
el.classList.remove('focused', 'dimmed');
});
}
}
function toggleSolarSystemFacts() {
const facts = document.getElementById('solarSystemFacts');
if (facts.style.display === 'none') {
facts.style.display = 'block';
facts.style.top = '50%';
facts.style.left = '50%';
facts.style.transform = 'translate(-50%, -50%)';
setTimeout(() => facts.classList.add('visible'), 10);
} else {
closeSolarSystemFacts();
}
}
function closeSolarSystemFacts() {
const facts = document.getElementById('solarSystemFacts');
facts.classList.remove('visible');
setTimeout(() => facts.style.display = 'none', 300);
}
function makeDraggable(element) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
const dragHandle = document.getElementById('factsDragHandle');
dragHandle.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
const newTop = element.offsetTop - pos2;
const newLeft = element.offsetLeft - pos1;
element.style.top = newTop + "px";
element.style.left = newLeft + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
// Add event listener for the close button
document.getElementById('closeFactsButton').addEventListener('click', closeSolarSystemFacts);
// Make the solar system facts card draggable
makeDraggable(document.getElementById('solarSystemFacts'));
function initializeSearch() {
const searchInput = document.getElementById('searchInput');
const autocompleteResults = document.getElementById('autocompleteResults');
searchInput.addEventListener('input', handleSearch);
searchInput.addEventListener('focus', () => {
autocompleteResults.style.display = 'block';
});
document.addEventListener('click', (event) => {
if (!searchInput.contains(event.target) && !autocompleteResults.contains(event.target)) {
autocompleteResults.style.display = 'none';
}
});
}
function handleSearch() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
// Filter planets based on search term
const filteredPlanets = planets.filter(planet =>
planet.name.toLowerCase().includes(searchTerm) ||
planet.description.toLowerCase().includes(searchTerm)
);
// Update autocomplete suggestions
updateAutocompleteSuggestions(filteredPlanets);
// Highlight matching planets
highlightPlanets(filteredPlanets);
}
function updateAutocompleteSuggestions(filteredPlanets) {
const autocompleteResults = document.getElementById('autocompleteResults');
autocompleteResults.innerHTML = '';
filteredPlanets.forEach(planet => {
const item = document.createElement('div');
item.className = 'autocomplete-item';
item.textContent = planet.name;
item.addEventListener('click', () => {
document.getElementById('searchInput').value = planet.name;
handlePlanetClick(planet.name);
autocompleteResults.style.display = 'none';
});
autocompleteResults.appendChild(item);
});
autocompleteResults.style.display = filteredPlanets.length > 0 ? 'block' : 'none';
}
function highlightPlanets(filteredPlanets) {
const planetElements = document.querySelectorAll('.planet');
planetElements.forEach(el => {
const planetName = planets[Array.from(el.parentNode.parentNode.children).indexOf(el.parentNode) - 1].name;
if (filteredPlanets.some(p => p.name === planetName)) {
el.classList.add('highlight');
} else {
el.classList.remove('highlight');
}
});
}
// Initialize the search feature and the solar system
initializeSearch();
generateStarsAndPlanets();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.