|
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() |
