`data/artifacts/02a362bd0b06/hermes3-8b.html`

161 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Dragon Realm</title>
    <style>
        body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
        }
        
        #scene {
            width: 100vw;
            height: 100vh;
            perspective: 800px;
        }
        
        .mountain {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%) translateZ(600px);
            background-color: #9e7a48;
        }
        
        .peak1, .peak2 {
            position: absolute;
            top: -100vh;
            width: 10vw;
            height: 20vh;
            background: linear-gradient(to bottom, rgba(158,122,72,1), rgba(0,0,0,0));
        }
        
        .peak1 { right: 45%; }
        .peak2 { left: 45%; }
        
        #dragon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%) translateZ(400px);
            cursor: pointer;
        }
        
        .wing {
            position: absolute;
            top: -100vh;
            width: 18vw;
            height: 40vh;
            background-color: #fff;
            box-shadow: 0 30px 60px rgba(255,255,255,.5);
        }
        
        .body {
            position: absolute;
            bottom: 10vh;
            left: 50%;
            width: 20vw;
            height: 40vh;
            background-color: #9e7a48;
            transform: translateX(-50%);
            border-radius: 50%;
        }
        
        .tail {
            position: absolute;
            bottom: 5vh;
            right: -15vw;
            width: 30vw;
            height: 10vh;
            background-color: #9e7a48;
            transform: rotate(145deg);
        }
        
        .fire {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 40px solid #ff5f1e;
            transform: translateX(-50%) translateY(-50%);
        }
        
        .snowflake {
            position: absolute;
            top: 0;
            width: 10vw;
            height: 15vh;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 30px 60px rgba(255,255,255,.2);
        }
        
        .snowflake:nth-child(even) {
            transform: translateX(-50%) translateY(-200vh);
        }
        
        .snowflake:nth-child(odd) {
            transform: translateX(50%) translateY(-200vh);
        }
        
        #lightning {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 80px solid #ffd700;
            transform: translateX(-50%) translateY(-50%);
        }
        
    </style>
</head>
<body>
    <div id="scene">
        <div class="mountain peak1"></div>
        <div class="mountain peak2"></div>
        <div id="dragon">
            <div class="wing wing-left"></div>
            <div class="wing wing-right"></div>
            <div class="body"></div>
            <div class="tail"></div>
            <div class="fire"></div>
        </div>
        <?php for ($i = 0; $i < 20; $i++): ?>
            <div class="snowflake snowflake-{{$i}}'></div>
        <?php endfor; ?>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dragon = document.getElementById('dragon');
            let fireTimer = null;
            
            function toggleFire() {
                const fire = document.querySelector('.fire');
                fire.style.display = fire.style.display === 'none' ? 'block' : 'none';
                
                if (fireTimer) clearTimeout(fireTimer);
                else fireTimer = setTimeout(function() {
                    toggleFire();
                }, 1000);
            }
            
            dragon.addEventListener('click', function() {
                document.querySelector('.fire').style.display = 'block';
                toggleFire();
            });
        });
    </script>
</body>
</html>