`data/artifacts/127317180daf/qwen25-7b.html`

176 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rose City Rooftop Solstice</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100%; display: block; }
        .controls { position: absolute; bottom: 10px; left: 10px; z-index: 2; }
        button, input { margin: 5px; padding: 5px; font-size: 14px; }
    </style>
</head>
<body>
    <canvas id="scene"></canvas>
    <div class="controls">
        <label><input type="radio" name="camera" checked> Skyline</label>
        <label><input type="radio" name="camera"> Rooftop</label>
        <label><input type="radio" name="camera"> Bird's Eye</label>
        <button id="toggleAnimals">Toggle Animals</button>
        <button id="toggleRoutes">Toggle Routes</button>
        <button id="toggleBuildings">Toggle Buildings</button>
        <button id="pause">Pause</button>
        <button id="restart">Restart</button>
        <div id="settings"></div>
    </div>

    <script>
        const canvas = document.getElementById('scene');
        const ctx = canvas.getContext('2d');

        class Animal {
            constructor(x, y, type) {
                this.x = x;
                this.y = y;
                this.type = type;
                this.trail = [];
                this.size = 15;
            }
            update() {
                // Simple movement logic
            }
            draw() {
                ctx.beginPath();
                if (this.type === 'bear') {
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                } else if (this.type === 'cat') {
                    ctx.rect(this.x - this.size / 3, this.y - this.size / 2, this.size, this.size / 2);
                }
                ctx.fillStyle = '#FF69B4';
                ctx.fill();
            }
        }

        class AnimalManager {
            constructor() {
                this.animals = [];
            }
            addAnimal(x, y, type) {
                this.animals.push(new Animal(x, y, type));
            }
            update() {
                for (let animal of this.animals) {
                    animal.update();
                }
            }
            draw() {
                for (let animal of this.animals) {
                    animal.draw();
                }
            }
        }

        const animals = new AnimalManager();

        function createAnimals() {
            // Randomly add some animals
            for (let i = 0; i < 20; i++) {
                let x = Math.random() * canvas.width;
                let y = Math.random() * canvas.height;
                let type = ['bear', 'cat'][Math.floor(Math.random() * 2)];
                animals.addAnimal(x, y, type);
            }
        }

        function drawBackground() {
            ctx.fillStyle = '#FFD700';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function drawBuildings() {
            // Simple parallax buildings
            for (let i = -5; i < 2; i++) {
                let x = i * canvas.width / 3;
                let y = Math.random() * canvas.height;
                ctx.fillStyle = `hsl(${(i + 1) * 60}, 75%, 45%)`;
                ctx.fillRect(x, y - 150, canvas.width / 2, 150);
            }
        }

        function drawRooftops() {
            // Draw the rooftops and people
            for (let i = 0; i < 10; i++) {
                let x = Math.random() * canvas.width;
                let y = canvas.height - 200 + (Math.sin(Date.now() / 500) * 40);
                ctx.fillStyle = '#C71585';
                ctx.fillRect(x, y, 30, 30);
            }
        }

        function drawTrails() {
            for (let animal of animals.animals) {
                if (animal.trail.length > 0) {
                    ctx.strokeStyle = 'rgba(255, 165, 0, 0.7)';
                    ctx.beginPath();
                    ctx.moveTo(animal.trail[0].x, animal.trail[0].y);
                    for (let i = 1; i < animal.trail.length; i++) {
                        ctx.lineTo(animal.trail[i].x, animal.trail[i].y);
                    }
                    ctx.stroke();
                }
            }
        }

        function update() {
            drawBackground();
            drawRooftops();
            animals.update();
            drawTrails();
            requestAnimationFrame(update);
        }

        function toggleAnimals() {
            if (document.querySelector('input[name="animals"]:checked').value === 'true') {
                document.querySelectorAll('input[type=radio][name=camera]').forEach(r => r.checked = false);
                update();
            } else {
                update();
            }
        }

        function toggleRoutes() {
            document.querySelectorAll('input[type=radio][name=camera]').forEach(r => r.checked = false);
            if (document.querySelector('input[name="camera"]:checked').value === 'Rooftop') {
                update();
            }
        }

        function toggleBuildings() {
            drawBuildings();
            requestAnimationFrame(update);
        }

        document.getElementById('toggleAnimals').addEventListener('click', toggleAnimals);
        document.getElementById('toggleRoutes').addEventListener('click', toggleRoutes);
        document.getElementById('toggleBuildings').addEventListener('click', toggleBuildings);

        createAnimals();
        update();

        document.getElementById('pause').addEventListener('click', () => {
            let pause = !document.getElementById('pause').innerText.includes('Play');
            if (pause) {
                document.getElementById('pause').innerText = 'Play';
            } else {
                document.getElementById('pause').innerText = 'Pause';
            }
        });

        document.getElementById('restart').addEventListener('click', () => {
            createAnimals();
            update();
        });
    </script>
</body>
</html>