`data/artifacts/02a362bd0b06/qwen3-14b.html`

101 lines
<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #87CEEB, #FFFFFF);
}

#scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.mountains {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 100 L100 100 L50 0 Z" fill="#228B22"/></svg>') repeat-x;
}

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  animation: fall linear infinite;
}

@keyframes fall {
  0% { transform: translateY(-10px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.dragon {
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10 40 Q30 10 70 40 T130 40" fill="green"/><path d="M70 40 L90 20 L110 40" fill="red"/></svg>');
  animation: fly 5s linear infinite;
}

@keyframes fly {
  0% { left: -100px; top: 40vh; }
  100% { left: 110%; top: 40vh; }
}

.fire {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, orange, yellow);
  opacity: 0;
  animation: fire 1s ease-out forwards;
}

@keyframes fire {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}
</style>
</head>
<body>
<div id="scene">
  <div class="mountains"></div>
  <div class="dragon"></div>
</div>
<script>
window.onload = function() {
  const scene = document.getElementById('scene');
  // Create snowflakes
  for (let i = 0; i < 100; i++) {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.style.left = Math.random() * 100 + 'vw';
    snowflake.style.animationDuration = (1 + Math.random() * 3) + 's';
    snowflake.style.animationDelay = Math.random() * 3 + 's';
    scene.appendChild(snowflake);
  }

  // Handle fire breath on click
  scene.addEventListener('click', function(event) {
    const fire = document.createElement('div');
    fire.className = 'fire';
    const dragon = document.querySelector('.dragon');
    const rect = dragon.getBoundingClientRect();
    fire.style.left = (rect.left + rect.width/2 - 10) + 'px';
    fire.style.top = (rect.top + rect.height/2 - 10) + 'px';
    scene.appendChild(fire);
    setTimeout(() => fire.remove(), 1000);
  });
};
</script>
</body>
</html>