`data/artifacts/2ca024f41f3c/hf-qwen-coder-32b.html`

97 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 { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000; }
        canvas { border: 1px solid #fff; }
        #controls { position: absolute; top: 10px; left: 10px; color: white; font-family: Arial, sans-serif; }
        input[type="range"] { width: 200px; margin-right: 10px; }
    </style>
</head>
<body>
    <div id="controls">
        Speed: <input type="range" id="speedSlider" min="0.1" max="5" step="0.1" value="1">
        <button id="pauseButton">Pause</button>
    </div>
    <canvas id="solarSystem"></canvas>
    <script>
        const canvas = document.getElementById('solarSystem');
        const ctx = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 600;

        const planets = [
            { name: 'Mercury', distance: 100, radius: 3, color: '#B57EDC', speed: 4.79 },
            { name: 'Venus', distance: 140, radius: 5, color: '#FFA07A', speed: 3.5 },
            { name: 'Earth', distance: 180, radius: 6, color: '#00BFFF', speed: 2.98 },
            { name: 'Mars', distance: 220, radius: 4, color: '#FF7F50', speed: 2.41 },
            { name: 'Jupiter', distance: 300, radius: 12, color: '#DAA520', speed: 1.31 },
            { name: 'Saturn', distance: 380, radius: 10, color: '#FFD700', speed: 0.96 },
            { name: 'Uranus', distance: 450, radius: 8, color: '#4682B4', speed: 0.68 },
            { name: 'Neptune', distance: 530, radius: 7, color: '#1E90FF', speed: 0.54 }
        ];

        let angle = 0;
        let paused = false;

        function drawOrbit(radius) {
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2);
            ctx.strokeStyle = '#888';
            ctx.stroke();
        }

        function drawPlanets() {
            planets.forEach(planet => {
                const x = canvas.width / 2 + planet.distance * Math.cos(angle * (planet.speed / 1.5));
                const y = canvas.height / 2 + planet.distance * Math.sin(angle * (planet.speed / 1.5));

                ctx.beginPath();
                ctx.arc(x, y, planet.radius, 0, Math.PI * 2);
                ctx.fillStyle = planet.color;
                ctx.fill();

                if (isMouseOverPlanet(x, y, planet.radius)) {
                    ctx.font = '14px Arial';
                    ctx.fillStyle = '#fff';
                    ctx.fillText(planet.name, x + planet.radius + 5, y);
                }
            });
        }

        function isMouseOverPlanet(px, py, pr) {
            return Math.sqrt((mouseX - px) ** 2 + (mouseY - py) ** 2) <= pr;
        }

        let mouseX = 0;
        let mouseY = 0;

        canvas.addEventListener('mousemove', e => {
            const rect = canvas.getBoundingClientRect();
            mouseX = e.clientX - rect.left;
            mouseY = e.clientY - rect.top;
        });

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            planets.forEach(p => drawOrbit(p.distance));
            drawPlanets();

            if (!paused) angle += parseFloat(document.getElementById('speedSlider').value) * 0.01;

            requestAnimationFrame(animate);
        }

        document.getElementById('pauseButton').addEventListener('click', () => {
            paused = !paused;
            document.getElementById('pauseButton').textContent = paused ? 'Resume' : 'Pause';
        });

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