`data/artifacts/1c80df76af60/qwen25-7b.html`

98 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midnight Woodland Jam</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #12002b;
            color: #f3e9ff;
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
        }
        .scene {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80vw;
            height: 80vh;
            overflow: hidden;
        }
        .group {
            display: grid;
            gap: 24px;
            padding: 96px;
        }
        .character, .animal, .light-source {
            animation-duration: 1.5s;
            animation-fill-mode: both;
            will-change: transform, opacity;
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }
        .gathering {
            background-size: 350% auto;
            animation-name: gatherAnimation, ambientGradientDrift;
            animation-duration: 60s, 18s;
            animation-iteration-count: infinite, linear;
        }
        @keyframes gatherAnimation {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(.95); opacity: .75; }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="scene">
        <div id="controls" style="position: absolute; top: 24px; left: 24px;">
            <button onclick="setMovement('gathering')">Gathering</button>
            <button onclick="setMovement('deepJam')">Deep Jam</button>
            <button onclick="setMovement('dawnReturn')">Dawn Return</button>
            <label for="tempo">Tempo:</label><input type="range" id="tempo" min="50" max="150" value="100">
            <label for="motionType">Motion Type:</label><select id="motionType">
                <option value="normal">Normal</option>
                <option value="reduced">Reduced</option>
            </select>
        </div>
        <svg viewBox="-50 -50 100 100" class="light-source">
            <circle cx="0" cy="0" r="20" fill="#ff2e88"/>
        </svg>
        <div id="gathering" class="group gathering">
            <!-- Characters and Animals -->
            <div class="character"></div><div class="character"></div><div class="character"></div>
            <div class="animal deer"></div><div class="animal bear"></div><div class="animal wolf"></div>
            <div class="light-source"></div>
        </div>
    </div>
    <script>
        function setMovement(movement) {
            document.getElementById('gathering').classList.remove('deepJam', 'dawnReturn');
            document.getElementById('gathering').classList.add(movement);
            updateControls();
        }
        function updateControls() {
            const tempo = document.getElementById('tempo');
            const motionType = document.getElementById('motionType');
            if (['deepJam', 'dawnReturn'].includes(document.getElementById('gathering').className)) {
                tempo.disabled = true;
                motionType.value = 'reduced';
                motionType.disabled = true;
            } else {
                tempo.disabled = false;
                motionType.value = 'normal';
                motionType.disabled = false;
            }
        }
        window.onload = function() {
            setMovement('gathering');
            updateControls();
        };
    </script>
</body>
</html>