<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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.