|
|
<!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> |
