Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Solar System Explorer</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --mercury-color: #b5b5b5; | |
| --venus-color: #e6c87a; | |
| --earth-color: #6b93d6; | |
| --mars-color: #c1440e; | |
| --jupiter-color: #d8ca9d; | |
| --saturn-color: #ead6b8; | |
| --uranus-color: #d1e7e7; | |
| --neptune-color: #5b5ddf; | |
| --space-dark: #0a0a1a; | |
| --space-medium: #1a1a2e; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| background: var(--space-dark); | |
| color: #fff; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Animated Space Background */ | |
| .space-background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); | |
| } | |
| .stars { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .star { | |
| position: absolute; | |
| background: #fff; | |
| border-radius: 50%; | |
| animation: twinkle var(--duration) ease-in-out infinite; | |
| animation-delay: var(--delay); | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: var(--min-opacity); transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.2); } | |
| } | |
| .shooting-star { | |
| position: absolute; | |
| width: 100px; | |
| height: 2px; | |
| background: linear-gradient(90deg, #fff, transparent); | |
| animation: shoot 3s ease-in-out infinite; | |
| opacity: 0; | |
| } | |
| @keyframes shoot { | |
| 0% { transform: translateX(0) translateY(0); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 30% { opacity: 0; } | |
| 100% { transform: translateX(500px) translateY(500px); opacity: 0; } | |
| } | |
| .nebula { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.3; | |
| animation: drift 20s ease-in-out infinite; | |
| } | |
| .nebula-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, #4a1a6b 0%, transparent 70%); | |
| top: 10%; | |
| left: 10%; | |
| } | |
| .nebula-2 { | |
| width: 300px; | |
| height: 300px; | |
| background: radial-gradient(circle, #1a4a6b 0%, transparent 70%); | |
| bottom: 20%; | |
| right: 15%; | |
| } | |
| @keyframes drift { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 50% { transform: translate(30px, -20px) scale(1.1); } | |
| } | |
| /* Header */ | |
| header { | |
| text-align: center; | |
| padding: 40px 20px; | |
| position: relative; | |
| } | |
| header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 200px; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #4a90d9, transparent); | |
| } | |
| h1 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: clamp(2rem, 5vw, 4rem); | |
| font-weight: 900; | |
| background: linear-gradient(135deg, #fff 0%, #4a90d9 50%, #9b59b6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| margin-bottom: 10px; | |
| animation: titleGlow 3s ease-in-out infinite; | |
| } | |
| @keyframes titleGlow { | |
| 0%, 100% { filter: drop-shadow(0 0 10px rgba(74, 144, 217, 0.5)); } | |
| 50% { filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8)); } | |
| } | |
| .subtitle { | |
| font-size: clamp(0.9rem, 2vw, 1.2rem); | |
| color: rgba(255, 255, 255, 0.6); | |
| letter-spacing: 3px; | |
| } | |
| .built-with { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| text-decoration: none; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .built-with:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: #4a90d9; | |
| color: #4a90d9; | |
| } | |
| /* Main Container */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| /* Planet Grid */ | |
| .planets-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 30px; | |
| padding: 20px 0; | |
| } | |
| /* Planet Card */ | |
| .planet-card { | |
| position: relative; | |
| background: linear-gradient(145deg, rgba(26, 26, 46, 0.8), rgba(10, 10, 26, 0.9)); | |
| border-radius: 20px; | |
| padding: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| overflow: hidden; | |
| } | |
| .planet-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--planet-color); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .planet-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), | |
| 0 0 40px color-mix(in srgb, var(--planet-color) 30%, transparent); | |
| border-color: var(--planet-color); | |
| } | |
| .planet-card:hover::before { | |
| opacity: 1; | |
| } | |
| /* Planet Visual */ | |
| .planet-visual { | |
| position: relative; | |
| width: 120px; | |
| height: 120px; | |
| margin: 0 auto 25px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .planet-sphere { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: var(--planet-color); | |
| position: relative; | |
| animation: float 4s ease-in-out infinite; | |
| box-shadow: inset -20px -20px 40px rgba(0, 0, 0, 0.4), | |
| inset 10px 10px 20px rgba(255, 255, 255, 0.2), | |
| 0 0 30px color-mix(in srgb, var(--planet-color) 50%, transparent); | |
| } | |
| .planet-sphere::before { | |
| content: ''; | |
| position: absolute; | |
| top: 10%; | |
| left: 15%; | |
| width: 30%; | |
| height: 20%; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| filter: blur(5px); | |
| } | |
| /* Saturn's Rings */ | |
| .rings { | |
| position: absolute; | |
| width: 140px; | |
| height: 40px; | |
| border: 3px solid rgba(234, 214, 184, 0.6); | |
| border-radius: 50%; | |
| transform: rotateX(70deg); | |
| animation: ringFloat 6s ease-in-out infinite; | |
| } | |
| .rings::before { | |
| content: ''; | |
| position: absolute; | |
| top: -8px; | |
| left: -8px; | |
| right: -8px; | |
| bottom: -8px; | |
| border: 2px solid rgba(234, 214, 184, 0.3); | |
| border-radius: 50%; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes ringFloat { | |
| 0%, 100% { transform: rotateX(70deg) scale(1); } | |
| 50% { transform: rotateX(70deg) scale(1.05); } | |
| } | |
| /* Planet Info */ | |
| .planet-name { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--planet-color); | |
| text-align: center; | |
| margin-bottom: 5px; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .planet-type { | |
| text-align: center; | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| margin-bottom: 20px; | |
| } | |
| .planet-stats { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 10px; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-label { | |
| font-size: 0.7rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 5px; | |
| } | |
| .stat-value { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1rem; | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| .planet-description { | |
| color: rgba(255, 255, 255, 0.75); | |
| line-height: 1.8; | |
| font-size: 0.95rem; | |
| text-align: justify; | |
| } | |
| /* Planet-specific colors */ | |
| .planet-card[data-planet="mercury"] { --planet-color: var(--mercury-color); } | |
| .planet-card[data-planet="venus"] { --planet-color: var(--venus-color); } | |
| .planet-card[data-planet="earth"] { --planet-color: var(--earth-color); } | |
| .planet-card[data-planet="mars"] { --planet-color: var(--mars-color); } | |
| .planet-card[data-planet="jupiter"] { --planet-color: var(--jupiter-color); } | |
| .planet-card[data-planet="saturn"] { --planet-color: var(--saturn-color); } | |
| .planet-card[data-planet="uranus"] { --planet-color: var(--uranus-color); } | |
| .planet-card[data-planet="neptune"] { --planet-color: var(--neptune-color); } | |
| /* Planet-specific spheres */ | |
| .planet-card[data-planet="venus"] .planet-sphere { | |
| background: linear-gradient(135deg, #e6c87a 0%, #c9a855 100%); | |
| } | |
| .planet-card[data-planet="earth"] .planet-sphere { | |
| background: linear-gradient(135deg, #6b93d6 0%, #4a7ab8 100%); | |
| overflow: hidden; | |
| } | |
| .planet-card[data-planet="earth"] .planet-sphere::after { | |
| content: ''; | |
| position: absolute; | |
| top: 20%; | |
| left: 10%; | |
| width: 40%; | |
| height: 60%; | |
| background: linear-gradient(135deg, #2d5a3d 0%, #1a4a2d 100%); | |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; | |
| opacity: 0.7; | |
| } | |
| .planet-card[data-planet="mars"] .planet-sphere { | |
| background: linear-gradient(135deg, #c1440e 0%, #8b3210 100%); | |
| } | |
| .planet-card[data-planet="jupiter"] .planet-sphere { | |
| width: 90px; | |
| height: 90px; | |
| background: linear-gradient(135deg, #d8ca9d 0%, #b8a87d 50%, #d8ca9d 100%); | |
| overflow: hidden; | |
| } | |
| .planet-card[data-planet="jupiter"] .planet-sphere::after { | |
| content: ''; | |
| position: absolute; | |
| top: 30%; | |
| left: 0; | |
| right: 0; | |
| height: 8px; | |
| background: rgba(139, 90, 43, 0.6); | |
| box-shadow: 0 15px 0 rgba(139, 90, 43, 0.6), | |
| 0 -15px 0 rgba(139, 90, 43, 0.6); | |
| } | |
| .planet-card[data-planet="uranus"] .planet-sphere { | |
| background: linear-gradient(135deg, #d1e7e7 0%, #a8d4d4 100%); | |
| } | |
| .planet-card[data-planet="neptune"] .planet-sphere { | |
| background: linear-gradient(135deg, #5b5ddf 0%, #3d3eb8 100%); | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 40px 20px; | |
| margin-top: 40px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| footer p { | |
| color: rgba(255, 255, 255, 0.4); | |
| font-size: 0.9rem; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .planets-grid { | |
| grid-template-columns: 1fr; | |
| padding: 10px; | |
| } | |
| .planet-card { | |
| padding: 20px; | |
| } | |
| .built-with { | |
| position: relative; | |
| top: auto; | |
| right: auto; | |
| display: inline-block; | |
| margin-top: 10px; | |
| } | |
| header { | |
| padding-top: 20px; | |
| } | |
| } | |
| /* Loading animation */ | |
| .planet-card { | |
| opacity: 0; | |
| animation: fadeInUp 0.6s ease forwards; | |
| } | |
| .planet-card:nth-child(1) { animation-delay: 0.1s; } | |
| .planet-card:nth-child(2) { animation-delay: 0.2s; } | |
| .planet-card:nth-child(3) { animation-delay: 0.3s; } | |
| .planet-card:nth-child(4) { animation-delay: 0.4s; } | |
| .planet-card:nth-child(5) { animation-delay: 0.5s; } | |
| .planet-card:nth-child(6) { animation-delay: 0.6s; } | |
| .planet-card:nth-child(7) { animation-delay: 0.7s; } | |
| .planet-card:nth-child(8) { animation-delay: 0.8s; } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--space-dark); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, #4a90d9, #9b59b6); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, #5aa0e9, #ab69c6); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="space-background"> | |
| <div class="stars" id="stars"></div> | |
| <div class="nebula nebula-1"></div> | |
| <div class="nebula nebula-2"></div> | |
| <div class="shooting-star"></div> | |
| </div> | |
| <header> | |
| <h1>Solar System Explorer</h1> | |
| <p class="subtitle">Journey Through Our Cosmic Neighborhood</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </header> | |
| <main class="container"> | |
| <div class="planets-grid"> | |
| <!-- Mercury --> | |
| <article class="planet-card" data-planet="mercury"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| </div> | |
| <h2 class="planet-name">Mercury</h2> | |
| <p class="planet-type">Terrestrial Planet</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">58M km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">59 Earth Days</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">88 Earth Days</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">0</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Mercury is the smallest planet in our solar system and the closest to the Sun. Despite its proximity to our star, it's not the hottest planet. Its surface is covered with craters, similar to Earth's Moon, and experiences extreme temperature variations, reaching 430°C during the day and -180°C at night. | |
| </p> | |
| </article> | |
| <!-- Venus --> | |
| <article class="planet-card" data-planet="venus"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| </div> | |
| <h2 class="planet-name">Venus</h2> | |
| <p class="planet-type">Terrestrial Planet</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">108M km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">243 Earth Days</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">225 Earth Days</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">0</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Venus is the second planet from the Sun and Earth's closest planetary neighbor. It's often called Earth's "twin" due to their similar size, but that's where the similarities end. Venus has a thick, toxic atmosphere filled with carbon dioxide and is shrouded in thick, yellowish clouds of sulfuric acid, making it the hottest planet in our solar system. | |
| </p> | |
| </article> | |
| <!-- Earth --> | |
| <article class="planet-card" data-planet="earth"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| </div> | |
| <h2 class="planet-name">Earth</h2> | |
| <p class="planet-type">Terrestrial Planet</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">150M km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">24 Hours</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">365.25 Days</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">1</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Earth is the third planet from the Sun and the only astronomical object known to harbor life. About 71% of Earth's surface is covered with water, which is essential for life as we know it. Our planet has a protective atmosphere that shields us from harmful solar radiation and maintains temperatures that allow liquid water to exist. | |
| </p> | |
| </article> | |
| <!-- Mars --> | |
| <article class="planet-card" data-planet="mars"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| </div> | |
| <h2 class="planet-name">Mars</h2> | |
| <p class="planet-type">Terrestrial Planet</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">228M km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">24h 37m</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">687 Earth Days</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">2</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Mars, the Red Planet, is the fourth planet from the Sun. It's named after the Roman god of war due to its reddish appearance, caused by iron oxide on its surface. Mars has the largest volcano in the solar system, Olympus Mons, and evidence suggests it once had liquid water and possibly supported microbial life. | |
| </p> | |
| </article> | |
| <!-- Jupiter --> | |
| <article class="planet-card" data-planet="jupiter"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| </div> | |
| <h2 class="planet-name">Jupiter</h2> | |
| <p class="planet-type">Gas Giant</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">778M km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">9h 56m</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">12 Earth Years</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">95</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Jupiter is the largest planet in our solar system and a gas giant. Its famous Great Red Spot is a storm that has been raging for over 400 years. Jupiter has a powerful magnetic field and at least 95 known moons, including the four large Galilean moons: Io, Europa, Ganymede, and Callisto, which are of great interest to scientists studying potential habitability. | |
| </p> | |
| </article> | |
| <!-- Saturn --> | |
| <article class="planet-card" data-planet="saturn"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| <div class="rings"></div> | |
| </div> | |
| <h2 class="planet-name">Saturn</h2> | |
| <p class="planet-type">Gas Giant</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">1.4B km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">10h 42m</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">29 Earth Years</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">146</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Saturn is famous for its spectacular ring system, composed mainly of ice particles, rocky debris, and dust. It's the second-largest planet in our solar system and has more moons than any other planet. Saturn's density is so low that it would float if placed in water large enough to hold it. | |
| </p> | |
| </article> | |
| <!-- Uranus --> | |
| <article class="planet-card" data-planet="uranus"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| </div> | |
| <h2 class="planet-name">Uranus</h2> | |
| <p class="planet-type">Ice Giant</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">2.9B km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">17h 14m</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">84 Earth Years</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">28</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Uranus is an ice giant with a unique characteristic: it rotates on its side, with its axis tilted at about 98 degrees. This unusual tilt likely resulted from a collision with an Earth-sized object long ago. Uranus has a blue-green color due to methane in its atmosphere and was the first planet discovered using a telescope. | |
| </p> | |
| </article> | |
| <!-- Neptune --> | |
| <article class="planet-card" data-planet="neptune"> | |
| <div class="planet-visual"> | |
| <div class="planet-sphere"></div> | |
| </div> | |
| <h2 class="planet-name">Neptune</h2> | |
| <p class="planet-type">Ice Giant</p> | |
| <div class="planet-stats"> | |
| <div class="stat"> | |
| <div class="stat-label">Distance from Sun</div> | |
| <div class="stat-value">4.5B km</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Day Length</div> | |
| <div class="stat-value">16h 6m</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Year Length</div> | |
| <div class="stat-value">165 Earth Years</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-label">Moons</div> | |
| <div class="stat-value">16</div> | |
| </div> | |
| </div> | |
| <p class="planet-description"> | |
| Neptune is the most distant planet from the Sun and the windiest place in our solar system, with winds reaching speeds of 2,100 km/h. This ice giant has a vivid blue color due to methane in its atmosphere. Neptune was the first planet located through mathematical predictions rather than by direct observation. | |
| </p> | |
| </article> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>Explore the wonders of our solar system © 2024</p> | |
| </footer> | |
| <script> | |
| // Generate stars | |
| function createStars() { | |
| const starsContainer = document.getElementById('stars'); | |
| const starCount = 200; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'star'; | |
| // Random position | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| // Random size (0.5px to 3px) | |
| const size = Math.random() * 2.5 + 0.5; | |
| // Random animation properties | |
| const duration = Math.random() * 3 + 2; | |
| const delay = Math.random() * 5; | |
| const minOpacity = Math.random() * 0.3 + 0.2; | |
| star.style.cssText = ` | |
| left: ${x}%; | |
| top: ${y}%; | |
| width: ${size}px; | |
| height: ${size}px; | |
| --duration: ${duration}s; | |
| --delay: ${delay}s; | |
| --min-opacity: ${minOpacity}; | |
| `; | |
| starsContainer.appendChild(star); | |
| } | |
| } | |
| // Add parallax effect on mouse move | |
| document.addEventListener('mousemove', (e) => { | |
| const cards = document.querySelectorAll('.planet-card'); | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| cards.forEach((card, index) => { | |
| const depth = (index + 1) * 0.5; | |
| const moveX = (x - 0.5) * depth * 10; | |
| const moveY = (y - 0.5) * depth * 10; | |
| card.style.transform = `translateY(-10px) scale(1.02) translate(${moveX}px, ${moveY}px)`; | |
| }); | |
| }); | |
| // Initialize | |
| createStars(); | |
| </script> | |
| </body> | |
| </html> |