`data/artifacts/2ca024f41f3c/qwen25-7b.html`

92 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;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 2px solid white;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }
        .controls {
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <canvas id="orrery"></canvas>
    <div class="controls">
        <input type="range" min="1" max="30" value="10" step="1" id="speedSlider" />
        <button onclick="togglePause()">Pause</button>
    </div>
    <script>
        const canvas = document.getElementById('orrery');
        const ctx = canvas.getContext('2d');
        const width = canvas.width = 600;
        const height = canvas.height = 600;
        const planets = [
            { name: 'Mercury', radius: 1.5, dist: 18, speed: 3.5 },
            { name: 'Venus', radius: 2.7, dist: 38, speed: 2.9 },
            { name: 'Earth', radius: 4, dist: 60, speed: 2.4 },
            { name: 'Mars', radius: 3.5, dist: 100, speed: 2.1 },
            { name: 'Jupiter', radius: 8, dist: 200, speed: 1.6 },
            { name: 'Saturn', radius: 6, dist: 400, speed: 1.3 },
            { name: 'Uranus', radius: 5, dist: 700, speed: 1.2 },
            { name: 'Neptune', radius: 4, dist: 1100, speed: 1 }
        ];
        let paused = false;
        let time = Date.now();

        function drawPlanet(planet) {
            const angle = (time + planet.dist * 1000) / 1000 / 60 / 3.142 * 2 * Math.PI;
            ctx.beginPath();
            ctx.arc(width / 2, height / 2, planet.dist + planet.radius, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.fillStyle = 'white';
            ctx.save();
            ctx.translate(width / 2 + planet.dist * Math.cos(angle), height / 2 + planet.dist * Math.sin(angle));
            ctx.rotate(angle);
            ctx.arc(planet.radius, 0, planet.radius, 0, 2 * Math.PI);
            ctx.fill();
            ctx.restore();
            ctx.fillStyle = 'white';
            ctx.fillText(planet.name, width / 2 + planet.dist * Math.cos(angle) - 5, height / 2 + planet.dist * Math.sin(angle));
        }

        function drawOrbitalRing(planet) {
            const angle = (time + planet.dist * 1000) / 1000 / 60 / 3.142 * 2 * Math.PI;
            ctx.beginPath();
            ctx.arc(width / 2, height / 2, planet.dist - planet.radius, 0, 2 * Math.PI);
            ctx.stroke();
        }

        function draw() {
            ctx.clearRect(0, 0, width, height);
            planets.forEach(drawPlanet);
            planets.forEach(drawOrbitalRing);
            requestAnimationFrame(draw);
        }

        document.getElementById('speedSlider').oninput = (event) => {
            const speedValue = event.target.value;
            planets.forEach(p => p.speed = speedValue / 10 + 2.4);
        };

        function togglePause() {
            paused = !paused;
        }

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