| import gradio as gr |
|
|
| |
| html_code = """ |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0; |
| overflow: hidden; |
| background: #000; |
| font-family: Arial, sans-serif; |
| } |
| .solar-system { |
| position: relative; |
| width: 100vw; |
| height: 50vh; /* Adjusted height for scrolling */ |
| overflow: hidden; |
| } |
| .planet { |
| position: absolute; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: transform 0.3s; |
| } |
| .planet:hover { |
| transform: scale(1.2); /* Scale up the planet on hover */ |
| } |
| .info-box { |
| background: rgba(0, 0, 0, 0.7); |
| color: #fff; |
| padding: 10px; |
| border-radius: 5px; |
| margin-top: 20px; |
| width: 100%; |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="solar-system" id="solar-system"> |
| <div class="planet" id="sun" style="width: 100px; height: 100px; background: yellow; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> |
| <div class="planet" id="mercury" style="width: 20px; height: 20px; background: gray;"></div> |
| <div class="planet" id="venus" style="width: 30px; height: 30px; background: orange;"></div> |
| <div class="planet" id="earth" style="width: 40px; height: 40px; background: blue;"></div> |
| <div class="planet" id="mars" style="width: 30px; height: 30px; background: red;"></div> |
| </div> |
| <div class="info-box" id="info-box">Click on a planet to see information</div> |
| <script> |
| const planets = [ |
| { id: 'sun', name: 'Sun', facts: 'The Sun is the star at the center of the Solar System.' }, |
| { id: 'mercury', name: 'Mercury', facts: 'Mercury is the smallest planet in the Solar System.' }, |
| { id: 'venus', name: 'Venus', facts: 'Venus has a thick, toxic atmosphere filled with carbon dioxide.' }, |
| { id: 'earth', name: 'Earth', facts: 'Earth is the only planet known to support life.' }, |
| { id: 'mars', name: 'Mars', facts: 'Mars is known as the Red Planet due to its reddish appearance.' }, |
| ]; |
| |
| const infoBox = document.getElementById('info-box'); |
| |
| planets.forEach(planet => { |
| const element = document.getElementById(planet.id); |
| element.addEventListener('click', () => { |
| infoBox.innerHTML = `<strong>${planet.name}</strong><br>${planet.facts}`; |
| }); |
| }); |
| |
| function animate() { |
| const solarSystem = document.getElementById('solar-system'); |
| const time = new Date().getTime() * 0.0005; |
| const radius = Math.min(solarSystem.clientWidth, solarSystem.clientHeight) / 2.5; |
| |
| planets.forEach((planet, index) => { |
| if (planet.id !== 'sun') { |
| const element = document.getElementById(planet.id); |
| const angle = time + index * 0.5; |
| const x = Math.cos(angle) * radius + solarSystem.clientWidth / 2; |
| const y = Math.sin(angle) * radius + solarSystem.clientHeight / 2; |
| element.style.left = `${x}px`; |
| element.style.top = `${y}px`; |
| } |
| }); |
| |
| requestAnimationFrame(animate); |
| } |
| |
| animate(); |
| </script> |
| </body> |
| </html> |
| """ |
|
|
| def solar_system_simulator(): |
| return gr.HTML(html_code) |
|
|
| demo = gr.Interface( |
| fn=solar_system_simulator, |
| inputs=[], |
| outputs="html", |
| title="Solar System Simulator", |
| description="A colorful and animated solar system simulator. Click on the planets to see key facts." |
| ) |
|
|
| if __name__ == "__main__": |
| demo.launch() |
