| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Interactive Space Explorer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .planet-card { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| } |
| .planet-card:hover { |
| transform: translateY(-10px) scale(1.05); |
| box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04); |
| } |
| .star { |
| position: absolute; |
| background-color: white; |
| border-radius: 50%; |
| animation: twinkle var(--duration) infinite ease-in-out; |
| } |
| @keyframes twinkle { |
| 0%, 100% { opacity: 0.2; } |
| 50% { opacity: 1; } |
| } |
| .spaceship { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-20px); } |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); |
| } |
| </style> |
| </head> |
| <body class="gradient-bg text-white min-h-screen font-sans overflow-x-hidden"> |
| |
| <div id="stars-container" class="fixed inset-0 overflow-hidden z-0"></div> |
|
|
| |
| <header class="relative z-10 py-8 px-4 sm:px-6 lg:px-8"> |
| <div class="container mx-auto flex flex-col items-center"> |
| <div class="flex items-center mb-6"> |
| <i class="fas fa-rocket text-4xl text-purple-400 mr-4 spaceship"></i> |
| <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500"> |
| Space Explorer |
| </h1> |
| </div> |
| <p class="text-lg text-gray-300 max-w-2xl text-center mb-8"> |
| Explore our solar system's wonders. Click on planets to discover fascinating facts about each celestial body. |
| </p> |
| <div class="relative w-full max-w-xl"> |
| <input |
| type="text" |
| id="search-planets" |
| placeholder="Search planets..." |
| class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-full py-3 px-6 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" |
| > |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="relative z-10 py-8 px-4 sm:px-6 lg:px-8"> |
| |
| <div class="container mx-auto mb-16"> |
| <h2 class="text-2xl font-semibold mb-6 flex items-center"> |
| <i class="fas fa-solar-panel mr-3 text-yellow-400"></i> |
| Our Solar System |
| </h2> |
| |
| <div class="relative h-64 md:h-96 w-full mb-12 overflow-hidden rounded-xl bg-black bg-opacity-30 border border-gray-800"> |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="orbit mercury-orbit"></div> |
| <div class="orbit venus-orbit"></div> |
| <div class="orbit earth-orbit"></div> |
| <div class="orbit mars-orbit"></div> |
| <div class="orbit jupiter-orbit"></div> |
| <div class="orbit saturn-orbit"></div> |
| <div class="orbit uranus-orbit"></div> |
| <div class="orbit neptune-orbit"></div> |
| </div> |
| |
| |
| <div |
| class="sun absolute left-1/4 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 md:w-20 md:h-20 rounded-full bg-gradient-to-br from-yellow-500 to-red-600 shadow-lg shadow-yellow-500/50 cursor-pointer" |
| onclick="showPlanetInfo('sun')" |
| ></div> |
| |
| |
| </div> |
| |
| |
| <div id="planet-cards" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="container mx-auto mb-16"> |
| <h2 class="text-2xl font-semibold mb-6 flex items-center"> |
| <i class="fas fa-star mr-3 text-blue-400"></i> |
| Space Facts |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-blue-400 transition-all"> |
| <div class="text-blue-400 text-3xl mb-4"> |
| <i class="fas fa-temperature-high"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Extreme Temperatures</h3> |
| <p class="text-gray-300">Mercury's surface temperature varies from -173°C at night to 427°C during the day.</p> |
| </div> |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-purple-400 transition-all"> |
| <div class="text-purple-400 text-3xl mb-4"> |
| <i class="fas fa-wind"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Powerful Winds</h3> |
| <p class="text-gray-300">Neptune has the strongest winds in the solar system, reaching speeds of 2,100 km/h.</p> |
| </div> |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-yellow-400 transition-all"> |
| <div class="text-yellow-400 text-3xl mb-4"> |
| <i class="fas fa-expand"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Gigantic Size</h3> |
| <p class="text-gray-300">Jupiter is so large that all other planets in the solar system could fit inside it.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div id="planet-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
| <div class="bg-gray-900 rounded-xl max-w-2xl w-full mx-4 p-6 relative border border-gray-700"> |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| <div class="flex flex-col md:flex-row gap-6"> |
| <div class="flex-shrink-0"> |
| <div id="modal-planet-image" class="w-32 h-32 md:w-48 md:h-48 rounded-full"></div> |
| </div> |
| <div> |
| <h2 id="modal-planet-name" class="text-3xl font-bold mb-2"></h2> |
| <div id="modal-planet-tags" class="flex flex-wrap gap-2 mb-4"></div> |
| <p id="modal-planet-description" class="text-gray-300 mb-4"></p> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <p class="text-gray-400">Distance from Sun</p> |
| <p id="modal-planet-distance" class="text-lg"></p> |
| </div> |
| <div> |
| <p class="text-gray-400">Diameter</p> |
| <p id="modal-planet-diameter" class="text-lg"></p> |
| </div> |
| <div> |
| <p class="text-gray-400">Orbital Period</p> |
| <p id="modal-planet-period" class="text-lg"></p> |
| </div> |
| <div> |
| <p class="text-gray-400">Surface Temp</p> |
| <p id="modal-planet-temp" class="text-lg"></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="relative z-10 py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-800"> |
| <div class="container mx-auto text-center text-gray-400"> |
| <p>© 2023 Space Explorer. All astronomical data is approximate.</p> |
| <div class="flex justify-center space-x-4 mt-4"> |
| <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="hover:text-white"><i class="fab fa-github"></i></a> |
| <a href="#" class="hover:text-white"><i class="fab fa-linkedin"></i></a> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function createStars() { |
| const container = document.getElementById('stars-container'); |
| const starCount = 200; |
| |
| for (let i = 0; i < starCount; i++) { |
| const star = document.createElement('div'); |
| star.classList.add('star'); |
| |
| |
| const size = Math.random() * 3; |
| const posX = Math.random() * 100; |
| const posY = Math.random() * 100; |
| const duration = 2 + Math.random() * 5; |
| |
| star.style.width = `${size}px`; |
| star.style.height = `${size}px`; |
| star.style.left = `${posX}%`; |
| star.style.top = `${posY}%`; |
| star.style.setProperty('--duration', `${duration}s`); |
| |
| container.appendChild(star); |
| } |
| } |
| |
| |
| const planets = [ |
| { |
| name: "Mercury", |
| color: "bg-gray-400", |
| size: "w-4 h-4 md:w-6 md:h-6", |
| position: "left-[32%] top-1/2", |
| description: "The smallest planet in our solar system and closest to the Sun. Mercury is only slightly larger than Earth's Moon.", |
| distance: "57.9 million km", |
| diameter: "4,879 km", |
| orbitalPeriod: "88 Earth days", |
| temperature: "-173°C to 427°C", |
| tags: ["Rocky", "No moons", "Fastest orbit"], |
| icon: "fas fa-temperature-low" |
| }, |
| { |
| name: "Venus", |
| color: "bg-yellow-200", |
| size: "w-6 h-6 md:w-8 md:h-8", |
| position: "left-[36%] top-1/2", |
| description: "Similar in size to Earth, Venus has a toxic atmosphere of carbon dioxide with clouds of sulfuric acid.", |
| distance: "108.2 million km", |
| diameter: "12,104 km", |
| orbitalPeriod: "225 Earth days", |
| temperature: "462°C", |
| tags: ["Hottest planet", "Retrograde rotation", "No moons"], |
| icon: "fas fa-fire" |
| }, |
| { |
| name: "Earth", |
| color: "bg-blue-500", |
| size: "w-6 h-6 md:w-8 md:h-8", |
| position: "left-[40%] top-1/2", |
| description: "Our home planet is the only known place in the universe confirmed to host life, with liquid water on the surface.", |
| distance: "149.6 million km", |
| diameter: "12,742 km", |
| orbitalPeriod: "365.25 days", |
| temperature: "-88°C to 58°C", |
| tags: ["Water", "Life", "Moon"], |
| icon: "fas fa-globe-americas" |
| }, |
| { |
| name: "Mars", |
| color: "bg-red-400", |
| size: "w-5 h-5 md:w-7 md:h-7", |
| position: "left-[44%] top-1/2", |
| description: "The Red Planet is dusty, cold desert world with a very thin atmosphere. There is strong evidence Mars was wetter in the past.", |
| distance: "227.9 million km", |
| diameter: "6,779 km", |
| orbitalPeriod: "687 Earth days", |
| temperature: "-153°C to 20°C", |
| tags: ["Red planet", "2 moons", "Olympus Mons"], |
| icon: "fas fa-mountain" |
| }, |
| { |
| name: "Jupiter", |
| color: "bg-yellow-600", |
| size: "w-10 h-10 md:w-14 md:h-14", |
| position: "left-[50%] top-1/2", |
| description: "The largest planet in our solar system, a gas giant with a Great Red Spot that's a storm larger than Earth.", |
| distance: "778.3 million km", |
| diameter: "139,820 km", |
| orbitalPeriod: "12 Earth years", |
| temperature: "-108°C", |
| tags: ["Gas giant", "79 moons", "Great Red Spot"], |
| icon: "fas fa-ring" |
| }, |
| { |
| name: "Saturn", |
| color: "bg-yellow-300", |
| size: "w-9 h-9 md:w-12 md:h-12", |
| position: "left-[56%] top-1/2", |
| description: "Famous for its beautiful ring system, Saturn is a gas giant made mostly of hydrogen and helium.", |
| distance: "1.4 billion km", |
| diameter: "116,460 km", |
| orbitalPeriod: "29 Earth years", |
| temperature: "-139°C", |
| tags: ["Rings", "82 moons", "Gas giant"], |
| icon: "fas fa-ring" |
| }, |
| { |
| name: "Uranus", |
| color: "bg-teal-300", |
| size: "w-7 h-7 md:w-9 md:h-9", |
| position: "left-[62%] top-1/2", |
| description: "An ice giant that rotates on its side, Uranus has a blue-green color from methane in its atmosphere.", |
| distance: "2.9 billion km", |
| diameter: "50,724 km", |
| orbitalPeriod: "84 Earth years", |
| temperature: "-197°C", |
| tags: ["Ice giant", "Sideways rotation", "13 rings"], |
| icon: "fas fa-icicles" |
| }, |
| { |
| name: "Neptune", |
| color: "bg-blue-600", |
| size: "w-7 h-7 md:w-9 md:h-9", |
| position: "left-[68%] top-1/2", |
| description: "The windiest planet with the strongest winds in the solar system. Neptune was the first planet located through mathematical calculations.", |
| distance: "4.5 billion km", |
| diameter: "49,244 km", |
| orbitalPeriod: "165 Earth years", |
| temperature: "-201°C", |
| tags: ["Windiest", "14 moons", "Great Dark Spot"], |
| icon: "fas fa-wind" |
| }, |
| { |
| name: "Sun", |
| color: "bg-gradient-to-br from-yellow-500 to-red-600", |
| size: "w-16 h-16 md:w-20 md:h-20", |
| position: "left-1/4 top-1/2", |
| description: "The star at the center of our solar system. It accounts for 99.86% of the mass in the solar system and is nearly a perfect sphere of hot plasma.", |
| distance: "Center of solar system", |
| diameter: "1.39 million km", |
| orbitalPeriod: "225-250 million years (galactic orbit)", |
| temperature: "5,500°C (surface), 15 million°C (core)", |
| tags: ["Star", "G2V type", "Solar flares"], |
| icon: "fas fa-sun" |
| } |
| ]; |
| |
| |
| function positionPlanets() { |
| const solarSystem = document.querySelector('.relative.h-64'); |
| |
| planets.forEach(planet => { |
| if (planet.name === "Sun") return; |
| |
| const planetEl = document.createElement('div'); |
| planetEl.className = `planet absolute ${planet.position} transform -translate-y-1/2 rounded-full ${planet.color} ${planet.size} cursor-pointer shadow-md`; |
| planetEl.setAttribute('onclick', `showPlanetInfo('${planet.name.toLowerCase()}')`); |
| |
| solarSystem.appendChild(planetEl); |
| }); |
| } |
| |
| |
| function generatePlanetCards() { |
| const container = document.getElementById('planet-cards'); |
| |
| planets.forEach(planet => { |
| const card = document.createElement('div'); |
| card.className = 'planet-card bg-gray-800 bg-opacity-50 rounded-xl overflow-hidden border border-gray-700 hover:border-purple-500 cursor-pointer'; |
| card.setAttribute('onclick', `showPlanetInfo('${planet.name.toLowerCase()}')`); |
| |
| card.innerHTML = ` |
| <div class="h-40 ${planet.color} flex items-center justify-center"> |
| <i class="${planet.icon} text-4xl text-white opacity-80"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold mb-2">${planet.name}</h3> |
| <div class="flex flex-wrap gap-2 mb-3"> |
| ${planet.tags.map(tag => `<span class="text-xs px-2 py-1 bg-gray-700 rounded-full">${tag}</span>`).join('')} |
| </div> |
| <p class="text-gray-300 text-sm line-clamp-2">${planet.description}</p> |
| </div> |
| `; |
| |
| container.appendChild(card); |
| }); |
| } |
| |
| |
| function showPlanetInfo(planetName) { |
| const planet = planets.find(p => p.name.toLowerCase() === planetName); |
| if (!planet) return; |
| |
| document.getElementById('modal-planet-name').textContent = planet.name; |
| document.getElementById('modal-planet-description').textContent = planet.description; |
| document.getElementById('modal-planet-distance').textContent = planet.distance; |
| document.getElementById('modal-planet-diameter').textContent = planet.diameter; |
| document.getElementById('modal-planet-period').textContent = planet.orbitalPeriod; |
| document.getElementById('modal-planet-temp').textContent = planet.temperature; |
| |
| const tagsContainer = document.getElementById('modal-planet-tags'); |
| tagsContainer.innerHTML = planet.tags.map(tag => |
| `<span class="text-sm px-3 py-1 bg-gray-800 rounded-full">${tag}</span>` |
| ).join(''); |
| |
| const planetImage = document.getElementById('modal-planet-image'); |
| planetImage.className = `w-32 h-32 md:w-48 md:h-48 rounded-full ${planet.color} flex items-center justify-center shadow-lg`; |
| planetImage.innerHTML = `<i class="${planet.icon} text-4xl text-white"></i>`; |
| |
| document.getElementById('planet-modal').classList.remove('hidden'); |
| } |
| |
| |
| function closeModal() { |
| document.getElementById('planet-modal').classList.add('hidden'); |
| } |
| |
| |
| document.getElementById('search-planets').addEventListener('input', function(e) { |
| const searchTerm = e.target.value.toLowerCase(); |
| const cards = document.querySelectorAll('.planet-card'); |
| |
| cards.forEach(card => { |
| const planetName = card.querySelector('h3').textContent.toLowerCase(); |
| if (planetName.includes(searchTerm)) { |
| card.classList.remove('hidden'); |
| } else { |
| card.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| createStars(); |
| positionPlanets(); |
| generatePlanetCards(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=longdiyao/space1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
