You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
6.6 KiB
193 lines
6.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Blue Butterfly - Matching Reference Frames</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 50px;
|
|
background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
}
|
|
|
|
.butterfly {
|
|
width: 120px;
|
|
height: 80px;
|
|
position: relative;
|
|
margin: 50px auto;
|
|
transform: scale(2);
|
|
}
|
|
|
|
/* Wing animations - simple up/down like reference images */
|
|
@keyframes wingFlap {
|
|
0% {
|
|
transform: rotateZ(0deg);
|
|
}
|
|
25% {
|
|
transform: rotateZ(-30deg);
|
|
}
|
|
50% {
|
|
transform: rotateZ(-50deg);
|
|
}
|
|
75% {
|
|
transform: rotateZ(-30deg);
|
|
}
|
|
100% {
|
|
transform: rotateZ(0deg);
|
|
}
|
|
}
|
|
|
|
.wing-left {
|
|
transform-origin: 48px 40px;
|
|
animation: wingFlap 0.8s ease-in-out infinite;
|
|
}
|
|
|
|
.wing-right {
|
|
transform-origin: 72px 40px;
|
|
animation: wingFlap 0.8s ease-in-out infinite;
|
|
}
|
|
|
|
/* Controls */
|
|
.controls {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
button {
|
|
margin: 0 10px;
|
|
padding: 10px 20px;
|
|
border: 2px solid #1976d2;
|
|
background: white;
|
|
color: #1976d2;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button.active {
|
|
background: #1976d2;
|
|
color: white;
|
|
}
|
|
|
|
.butterfly.slow .wing-left,
|
|
.butterfly.slow .wing-right {
|
|
animation-duration: 1.5s;
|
|
}
|
|
|
|
.butterfly.fast .wing-left,
|
|
.butterfly.fast .wing-right {
|
|
animation-duration: 0.4s;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
p {
|
|
color: #666;
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🦋 Simple Blue Butterfly</h1>
|
|
<p>Replicating the reference frame animation</p>
|
|
|
|
<div class="butterfly" id="butterfly">
|
|
<svg viewBox="0 0 120 80" width="120" height="80">
|
|
<!-- Simple gradients -->
|
|
<defs>
|
|
<linearGradient id="blueWing" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color: #4FC3F7; stop-opacity: 1" />
|
|
<stop offset="50%" style="stop-color: #2196F3; stop-opacity: 1" />
|
|
<stop offset="100%" style="stop-color: #1565C0; stop-opacity: 1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="darkBlue" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color: #1976D2; stop-opacity: 1" />
|
|
<stop offset="100%" style="stop-color: #0D47A1; stop-opacity: 1" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Left Wing -->
|
|
<g class="wing-left">
|
|
<!-- Upper left wing -->
|
|
<ellipse cx="30" cy="25" rx="18" ry="12" fill="url(#blueWing)" stroke="#0D47A1" stroke-width="0.5"/>
|
|
<!-- Lower left wing -->
|
|
<ellipse cx="35" cy="50" rx="13" ry="10" fill="url(#darkBlue)" stroke="#0D47A1" stroke-width="0.5"/>
|
|
|
|
<!-- White spots -->
|
|
<circle cx="25" cy="22" r="2" fill="white" opacity="0.8" />
|
|
<circle cx="35" cy="28" r="1.5" fill="white" opacity="0.7" />
|
|
<circle cx="30" cy="47" r="1.8" fill="white" opacity="0.8" />
|
|
</g>
|
|
|
|
<!-- Right Wing -->
|
|
<g class="wing-right">
|
|
<!-- Upper right wing -->
|
|
<ellipse cx="90" cy="25" rx="18" ry="12" fill="url(#blueWing)" stroke="#0D47A1" stroke-width="0.5"/>
|
|
<!-- Lower right wing -->
|
|
<ellipse cx="85" cy="50" rx="13" ry="10" fill="url(#darkBlue)" stroke="#0D47A1" stroke-width="0.5"/>
|
|
|
|
<!-- White spots -->
|
|
<circle cx="95" cy="22" r="2" fill="white" opacity="0.8" />
|
|
<circle cx="85" cy="28" r="1.5" fill="white" opacity="0.7" />
|
|
<circle cx="90" cy="47" r="1.8" fill="white" opacity="0.8" />
|
|
</g>
|
|
|
|
<!-- Body -->
|
|
<ellipse cx="60" cy="40" rx="3" ry="25" fill="#212121" stroke="#000" stroke-width="0.5"/>
|
|
|
|
<!-- Head -->
|
|
<circle cx="60" cy="20" r="4" fill="#424242" stroke="#000" stroke-width="0.5"/>
|
|
|
|
<!-- Simple antennae -->
|
|
<line x1="58" y1="18" x2="55" y2="12" stroke="#212121" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="62" y1="18" x2="65" y2="12" stroke="#212121" stroke-width="1.5" stroke-linecap="round"/>
|
|
<circle cx="55" cy="12" r="1" fill="#212121"/>
|
|
<circle cx="65" cy="12" r="1" fill="#212121"/>
|
|
|
|
<!-- Simple eyes -->
|
|
<circle cx="57" cy="18" r="1" fill="white" opacity="0.3"/>
|
|
<circle cx="63" cy="18" r="1" fill="white" opacity="0.3"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<p>Wing Flapping Speed:</p>
|
|
<button class="active" onclick="setSpeed('normal')">Normal (0.8s)</button>
|
|
<button onclick="setSpeed('slow')">Slow (1.5s)</button>
|
|
<button onclick="setSpeed('fast')">Fast (0.4s)</button>
|
|
</div>
|
|
|
|
<p>Simple up/down wing flapping motion</p>
|
|
</div>
|
|
|
|
<script>
|
|
function setSpeed(speed) {
|
|
const butterfly = document.getElementById('butterfly');
|
|
const buttons = document.querySelectorAll('button');
|
|
|
|
butterfly.classList.remove('slow', 'fast');
|
|
buttons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
if (speed !== 'normal') {
|
|
butterfly.classList.add(speed);
|
|
}
|
|
|
|
event.target.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |