Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Solar System Simulation</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #000; | |
| color: #fff; | |
| font-family: 'Arial', sans-serif; | |
| overflow: hidden; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| header { | |
| padding: 15px; | |
| text-align: center; | |
| background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(9,31,121,0.5) 50%, rgba(0,0,0,0) 100%); | |
| border-bottom: 1px solid #333; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| background: linear-gradient(to right, #fff, #5bc0de); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 10px rgba(91, 192, 222, 0.3); | |
| } | |
| .controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| padding: 10px; | |
| background: rgba(0, 0, 0, 0.7); | |
| border-bottom: 1px solid #333; | |
| } | |
| .control-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| label { | |
| font-size: 0.9rem; | |
| color: #ddd; | |
| } | |
| button { | |
| background: rgba(50, 50, 100, 0.5); | |
| color: white; | |
| border: 1px solid #444; | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| button:hover { | |
| background: rgba(70, 70, 150, 0.7); | |
| transform: scale(1.05); | |
| } | |
| button.active { | |
| background: rgba(91, 192, 222, 0.7); | |
| border-color: #5bc0de; | |
| } | |
| input[type="range"] { | |
| width: 150px; | |
| cursor: pointer; | |
| } | |
| .solar-system { | |
| position: relative; | |
| width: 100%; | |
| height: calc(100vh - 150px); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| perspective: 1000px; | |
| } | |
| .sun { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| background: radial-gradient(circle at 30% 30%, #fff, #ffdf00, #ff9900, #ff5e00); | |
| border-radius: 50%; | |
| box-shadow: 0 0 50px #ff5e00, 0 0 100px #ff9900; | |
| z-index: 1; | |
| animation: sunPulse 10s infinite alternate; | |
| } | |
| .orbit { | |
| position: absolute; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| transform-style: preserve-3d; | |
| } | |
| .planet { | |
| position: absolute; | |
| border-radius: 50%; | |
| transform-origin: center; | |
| } | |
| .planet-label { | |
| position: absolute; | |
| color: white; | |
| font-size: 12px; | |
| text-shadow: 0 0 3px black; | |
| pointer-events: none; | |
| opacity: 1; | |
| transition: opacity 0.3s; | |
| } | |
| .planet-label.hidden { | |
| opacity: 0; | |
| } | |
| /* Mercury */ | |
| .mercury-orbit { | |
| width: 120px; | |
| height: 120px; | |
| animation: orbitRotation 4s linear infinite; | |
| } | |
| .mercury { | |
| top: 0; | |
| left: 50%; | |
| width: 5px; | |
| height: 5px; | |
| background: linear-gradient(135deg, #a9a9a9, #696969); | |
| box-shadow: 0 0 5px #a9a9a9; | |
| } | |
| /* Venus */ | |
| .venus-orbit { | |
| width: 180px; | |
| height: 180px; | |
| animation: orbitRotation 10s linear infinite; | |
| } | |
| .venus { | |
| top: 0; | |
| left: 50%; | |
| width: 10px; | |
| height: 10px; | |
| background: linear-gradient(135deg, #e6c229, #c88f2d); | |
| box-shadow: 0 0 5px #e6c229; | |
| } | |
| /* Earth */ | |
| .earth-orbit { | |
| width: 250px; | |
| height: 250px; | |
| animation: orbitRotation 15s linear infinite; | |
| } | |
| .earth { | |
| top: 0; | |
| left: 50%; | |
| width: 11px; | |
| height: 11px; | |
| background: linear-gradient(135deg, #1da1f2, #0c5a8a); | |
| box-shadow: 0 0 5px #1da1f2; | |
| } | |
| /* Mars */ | |
| .mars-orbit { | |
| width: 320px; | |
| height: 320px; | |
| animation: orbitRotation 28s linear infinite; | |
| } | |
| .mars { | |
| top: 0; | |
| left: 50%; | |
| width: 7px; | |
| height: 7px; | |
| background: linear-gradient(135deg, #ff7b25, #b33a15); | |
| box-shadow: 0 0 5px #ff7b25; | |
| } | |
| /* Jupiter */ | |
| .jupiter-orbit { | |
| width: 450px; | |
| height: 450px; | |
| animation: orbitRotation 95s linear infinite; | |
| } | |
| .jupiter { | |
| top: 0; | |
| left: 50%; | |
| width: 20px; | |
| height: 20px; | |
| background: linear-gradient(135deg, #e8b56d, #b78a3f); | |
| box-shadow: 0 0 5px #e8b56d; | |
| } | |
| /* Saturn */ | |
| .saturn-orbit { | |
| width: 550px; | |
| height: 550px; | |
| animation: orbitRotation 230s linear infinite; | |
| } | |
| .saturn { | |
| top: 0; | |
| left: 50%; | |
| width: 17px; | |
| height: 17px; | |
| background: linear-gradient(135deg, #e8e0b5, #c9b96b); | |
| box-shadow: 0 0 5px #e8e0b5; | |
| } | |
| /* Saturn's rings */ | |
| .saturn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) rotate(20deg); | |
| width: 30px; | |
| height: 5px; | |
| background: rgba(210, 210, 170, 0.6); | |
| border-radius: 50%; | |
| box-shadow: 0 0 5px rgba(210, 210, 170, 0.8); | |
| } | |
| /* Uranus */ | |
| .uranus-orbit { | |
| width: 650px; | |
| height: 650px; | |
| animation: orbitRotation 680s linear infinite; | |
| } | |
| .uranus { | |
| top: 0; | |
| left: 50%; | |
| width: 14px; | |
| height: 14px; | |
| background: linear-gradient(135deg, #a3d3e0, #5baebd); | |
| box-shadow: 0 0 5px #a3d3e0; | |
| } | |
| /* Neptune */ | |
| .neptune-orbit { | |
| width: 750px; | |
| height: 750px; | |
| animation: orbitRotation 1330s linear infinite; | |
| } | |
| .neptune { | |
| top: 0; | |
| left: 50%; | |
| width: 13px; | |
| height: 13px; | |
| background: linear-gradient(135deg, #4e90b8, #2a5675); | |
| box-shadow: 0 0 5px #4e90b8; | |
| } | |
| @keyframes orbitRotation { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes sunPulse { | |
| 0% { | |
| box-shadow: 0 0 50px #ff5e00, 0 0 100px #ff9900; | |
| } | |
| 100% { | |
| box-shadow: 0 0 70px #ff5e00, 0 0 140px #ff9900, 0 0 180px #ffdf00; | |
| } | |
| } | |
| .stars { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .star { | |
| position: absolute; | |
| background-color: white; | |
| border-radius: 50%; | |
| animation: twinkle 1s infinite alternate; | |
| } | |
| @keyframes twinkle { | |
| 0% { | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 10px; | |
| font-size: 0.8rem; | |
| color: #666; | |
| background: rgba(0, 0, 0, 0.7); | |
| } | |
| .speed-display { | |
| min-width: 30px; | |
| text-align: center; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 1.8rem; | |
| } | |
| .controls { | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .neptune-orbit { | |
| width: 500px; | |
| height: 500px; | |
| } | |
| .uranus-orbit { | |
| width: 450px; | |
| height: 450px; | |
| } | |
| .saturn-orbit { | |
| width: 400px; | |
| height: 400px; | |
| } | |
| .jupiter-orbit { | |
| width: 350px; | |
| height: 350px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Solar System Simulation</h1> | |
| </header> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <button id="pauseBtn"><i class="fas fa-pause"></i></button> | |
| <button id="playBtn" class="active"><i class="fas fa-play"></i></button> | |
| </div> | |
| <div class="control-group"> | |
| <label for="speedControl"><i class="fas fa-tachometer-alt"></i> Speed</label> | |
| <input type="range" id="speedControl" min="0.1" max="5" step="0.1" value="1"> | |
| <span class="speed-display" id="speedValue">1x</span> | |
| </div> | |
| <div class="control-group"> | |
| <button id="toggleLabels" class="active"><i class="fas fa-tag"></i> Labels</button> | |
| </div> | |
| </div> | |
| <div class="solar-system"> | |
| <div class="stars" id="stars"></div> | |
| <div class="sun"></div> | |
| <!-- Mercury --> | |
| <div class="orbit mercury-orbit"> | |
| <div class="planet mercury"></div> | |
| <div class="planet-label">Mercury</div> | |
| </div> | |
| <!-- Venus --> | |
| <div class="orbit venus-orbit"> | |
| <div class="planet venus"></div> | |
| <div class="planet-label">Venus</div> | |
| </div> | |
| <!-- Earth --> | |
| <div class="orbit earth-orbit"> | |
| <div class="planet earth"></div> | |
| <div class="planet-label">Earth</div> | |
| </div> | |
| <!-- Mars --> | |
| <div class="orbit mars-orbit"> | |
| <div class="planet mars"></div> | |
| <div class="planet-label">Mars</div> | |
| </div> | |
| <!-- Jupiter --> | |
| <div class="orbit jupiter-orbit"> | |
| <div class="planet jupiter"></div> | |
| <div class="planet-label">Jupiter</div> | |
| </div> | |
| <!-- Saturn --> | |
| <div class="orbit saturn-orbit"> | |
| <div class="planet saturn"></div> | |
| <div class="planet-label">Saturn</div> | |
| </div> | |
| <!-- Uranus --> | |
| <div class="orbit uranus-orbit"> | |
| <div class="planet uranus"></div> | |
| <div class="planet-label">Uranus</div> | |
| </div> | |
| <!-- Neptune --> | |
| <div class="orbit neptune-orbit"> | |
| <div class="planet neptune"></div> | |
| <div class="planet-label">Neptune</div> | |
| </div> | |
| </div> | |
| <footer> | |
| Interactive Solar System Simulation | All planetary orbits are to relative scale | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Create stars background | |
| const starsContainer = document.getElementById('stars'); | |
| for (let i = 0; i < 200; i++) { | |
| const star = document.createElement('div'); | |
| star.classList.add('star'); | |
| star.style.width = `${Math.random() * 2}px`; | |
| star.style.height = star.style.width; | |
| star.style.left = `${Math.random() * 100}%`; | |
| star.style.top = `${Math.random() * 100}%`; | |
| star.style.animationDuration = `${2 + Math.random() * 3}s`; | |
| star.style.animationDelay = `${Math.random() * 5}s`; | |
| starsContainer.appendChild(star); | |
| } | |
| // Get control elements | |
| const playBtn = document.getElementById('playBtn'); | |
| const pauseBtn = document.getElementById('pauseBtn'); | |
| const speedControl = document.getElementById('speedControl'); | |
| const speedValue = document.getElementById('speedValue'); | |
| const toggleLabels = document.getElementById('toggleLabels'); | |
| const planetLabels = document.querySelectorAll('.planet-label'); | |
| // Get all orbit elements | |
| const orbits = document.querySelectorAll('.orbit'); | |
| // Store base animation durations | |
| const baseDurations = { | |
| 'mercury-orbit': 4, | |
| 'venus-orbit': 10, | |
| 'earth-orbit': 15, | |
| 'mars-orbit': 28, | |
| 'jupiter-orbit': 95, | |
| 'saturn-orbit': 230, | |
| 'uranus-orbit': 680, | |
| 'neptune-orbit': 1330 | |
| }; | |
| // Animation control | |
| let isPlaying = true; | |
| let speedFactor = 1; | |
| // Function to update animations based on speed | |
| function updateAnimations() { | |
| orbits.forEach(orbit => { | |
| const orbitClass = Array.from(orbit.classList).find(cls => cls.endsWith('-orbit')); | |
| if (orbitClass) { | |
| const baseDuration = baseDurations[orbitClass]; | |
| orbit.style.animationDuration = `${baseDuration / speedFactor}s`; | |
| orbit.style.animationPlayState = isPlaying ? 'running' : 'paused'; | |
| } | |
| }); | |
| } | |
| // Initialize animations | |
| updateAnimations(); | |
| // Play/pause functionality | |
| playBtn.addEventListener('click', function() { | |
| if (!isPlaying) { | |
| isPlaying = true; | |
| playBtn.classList.add('active'); | |
| pauseBtn.classList.remove('active'); | |
| updateAnimations(); | |
| } | |
| }); | |
| pauseBtn.addEventListener('click', function() { | |
| if (isPlaying) { | |
| isPlaying = false; | |
| pauseBtn.classList.add('active'); | |
| playBtn.classList.remove('active'); | |
| updateAnimations(); | |
| } | |
| }); | |
| // Speed control | |
| speedControl.addEventListener('input', function() { | |
| speedFactor = parseFloat(this.value); | |
| speedValue.textContent = `${speedFactor.toFixed(1)}x`; | |
| updateAnimations(); | |
| }); | |
| // Toggle labels | |
| toggleLabels.addEventListener('click', function() { | |
| const isActive = this.classList.contains('active'); | |
| this.classList.toggle('active'); | |
| planetLabels.forEach(label => { | |
| if (isActive) { | |
| label.classList.add('hidden'); | |
| } else { | |
| label.classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| // Position labels near planets | |
| function updateLabelPositions() { | |
| planetLabels.forEach(label => { | |
| const orbit = label.parentElement; | |
| const planet = orbit.querySelector('.planet'); | |
| const orbitRect = orbit.getBoundingClientRect(); | |
| const planetRect = planet.getBoundingClientRect(); | |
| // Position label near the planet | |
| const planetCenterX = planetRect.left + planetRect.width / 2; | |
| const planetCenterY = planetRect.top + planetRect.height / 2; | |
| // Adjust position based on planet's position in orbit | |
| const orbitCenterX = orbitRect.left + orbitRect.width / 2; | |
| const orbitCenterY = orbitRect.top + orbitRect.height / 2; | |
| // Determine which side of the orbit the planet is on | |
| const isRight = planetCenterX > orbitCenterX; | |
| label.style.left = `${isRight ? planetCenterX + 15 : planetCenterX - 55}px`; | |
| label.style.top = `${planetCenterY - 10}px`; | |
| }); | |
| requestAnimationFrame(updateLabelPositions); | |
| } | |
| // Start updating label positions | |
| updateLabelPositions(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |