`data/artifacts/2ca024f41f3c/hermes3-8b.html`

157 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar System Orrery</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }
        
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 5px;
            border-radius: 5px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
        }
        
        input[type="range"] {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="controls">
        <label for="speed">Speed:</label>
        <input type="range" id="speed" min="1" max="500" value="50">
        
        <label for="pause">Pause:</label>
        <input type="checkbox" id="pause">
    </div>
    
    <canvas id="sky"></canvas>
    <canvas id="orbits"></canvas>
    <canvas id="planets"></canvas>

    <script>
        const sky = document.getElementById('sky');
        const orbits = document.getElementById('orbits');
        const planets = document.getElementById('planets');

        const ctxSky = sky.getContext('2d');
        const ctxOrbits = orbits.getContext('2d');
        const ctxPlanets = planets.getContext('2d');

        const sunRadius = 50;
        let speed = 50;

        function drawSun(x, y) {
            ctxSky.beginPath();
            ctxSky.arc(x, y, sunRadius, 0, Math.PI * 2);
            ctxSky.fillStyle = 'yellow';
            ctxSky.fill();
            ctxSky.closePath();
        }

        drawSun(sky.width / 2, sky.height / 2);

        const planetsData = [
            { name: 'Mercury', radius: 12, orbitRadius: 75, period: 100 },
            { name: 'Venus', radius: 14, orbitRadius: 115, period: 150 },
            { name: 'Earth', radius: 16, orbitRadius: 165, period: 200 },
            { name: 'Mars', radius: 18, orbitRadius: 215, period: 250 },
            { name: 'Jupiter', radius: 22, orbitRadius: 275, period: 350 },
            { name: 'Saturn', radius: 20, orbitRadius: 325, period: 450 },
            { name: 'Uranus', radius: 18, orbitRadius: 375, period: 550 },
            { name: 'Neptune', radius: 16, orbitRadius: 425, period: 600 }
        ];

        planetsData.forEach(({name, radius, orbitRadius, period}, index) => {
            const planet = {
                x: Math.cos(index * (Math.PI / 4) + speed / 50) * orbitRadius,
                y: Math.sin(index * (Math.PI / 4)) * orbitRadius
            };

            drawPlanet(planet.x, planet.y, radius);
            drawOrbit(orbitRadius);

            function drawPlanet(x, y, size) {
                ctxPlanets.beginPath();
                ctxPlanets.arc(x, y, size, 0, Math.PI * 2);
                ctxPlanets.fillStyle = 'white';
                ctxPlanets.fill();

                const textWidth = ctxPlanets.measureText(name).width;
                ctxPlanets.strokeStyle = 'black';
                ctxPlanets.font = "14px Arial";
                ctxPlanets.textAlign = "center";
                ctxPlanets.fillText(name, x - textWidth / 2, y + size * 0.8);
                ctxPlanets.stroke();
            }

            function drawOrbit(radius) {
                ctxOrbits.beginPath();
                ctxOrbits.arc(sky.width / 2, sky.height / 2, radius, 0, Math.PI * 2);
                ctxOrbits.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                ctxOrbits.lineWidth = 3;
                ctxOrbits.stroke();
            }
        });

        function update() {
            planetsData.forEach(({name, radius, orbitRadius, period}, index) => {
                const planet = {
                    x: Math.cos(index * (Math.PI / 4) + speed / 50) * orbitRadius,
                    y: Math.sin(index * (Math.PI / 4)) * orbitRadius
                };

                drawPlanet(planet.x, planet.y, radius);

                function drawPlanet(x, y, size) {
                    ctxPlanets.beginPath();
                    ctxPlanets.arc(x, y, size, 0, Math.PI * 2);
                    ctxPlanets.fillStyle = 'white';
                    ctxPlanets.fill();

                    const textWidth = ctxPlanets.measureText(name).width;
                    ctxPlanets.strokeStyle = 'black';
                    ctxPlanets.font = "14px Arial";
                    ctxPlanets.textAlign = "center";
                    ctxPlanets.fillText(name, x - textWidth / 2, y + size * 0.8);
                    ctxPlanets.stroke();
                }
            });

            requestAnimationFrame(update);
        }

        document.getElementById('speed').oninput = e => {
            speed = parseInt(e.target.value);
        };

        document.getElementById('pause').onchange = e => {
            if (e.target.checked) {
                update = () => {};
            } else {
                update();
            }
        };

        update();
    </script>
</body>
</html>