Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191
This commit is contained in:
southseact-3d
316
chat/public/animations.html
Normal file
316
chat/public/animations.html
Normal file
@@ -0,0 +1,316 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI Owl Mascot Animations</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #f8f9fa;
|
||||
--owl-white: #ffffff;
|
||||
--owl-gray: #e0e0e0;
|
||||
--owl-black: #1a1a1a;
|
||||
--accent-blue: #4a90e2;
|
||||
--accent-yellow: #f1c40f;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
padding: 40px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
|
||||
text-align: center;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #555;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* BASE OWL SVG STYLING */
|
||||
.owl-svg {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.owl-body {
|
||||
fill: var(--owl-white);
|
||||
stroke: var(--owl-black);
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
.owl-eyes {
|
||||
fill: var(--owl-black);
|
||||
}
|
||||
|
||||
.owl-highlights {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.owl-beak {
|
||||
fill: var(--owl-black);
|
||||
}
|
||||
|
||||
.owl-feathers {
|
||||
fill: none;
|
||||
stroke: var(--owl-black);
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.prop {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* --- 1. PLANNING (The Strategist) --- */
|
||||
#planning .owl-eye-group {
|
||||
animation: eye-dart 4s infinite;
|
||||
}
|
||||
|
||||
#planning .lightbulb {
|
||||
visibility: visible;
|
||||
animation: bulb-glow 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes eye-dart {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
30%,
|
||||
50% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
60%,
|
||||
80% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bulb-glow {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 2. BUILDING (The Constructor) --- */
|
||||
#building .owl-wings {
|
||||
animation: wing-tap 0.5s infinite alternate ease-in-out;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
#building .hardhat {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@keyframes wing-tap {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-5deg) translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 3. DEBUGGING (The Inspector) --- */
|
||||
#debugging .owl-svg {
|
||||
animation: lean-in 3s infinite alternate ease-in-out;
|
||||
}
|
||||
|
||||
#debugging .magnifier {
|
||||
visibility: visible;
|
||||
animation: search 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes lean-in {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1) translateY(5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes search {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-20px, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 4. LAUNCH (The Celebration) --- */
|
||||
#launch .owl-svg {
|
||||
animation: hop 0.6s infinite alternate cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
#launch .owl-wings {
|
||||
animation: flap 0.2s infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
#launch .sparkle {
|
||||
visibility: visible;
|
||||
animation: flash 0.8s infinite;
|
||||
}
|
||||
|
||||
@keyframes hop {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flap {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="card" id="planning">
|
||||
<h3>Planning</h3>
|
||||
<svg class="owl-svg" viewBox="0 0 200 220">
|
||||
<g class="prop lightbulb" transform="translate(140, 20)">
|
||||
<circle cx="0" cy="0" r="15" fill="#f1c40f" />
|
||||
<rect x="-5" y="12" width="10" height="8" fill="#95a5a6" />
|
||||
</g>
|
||||
<path class="owl-body"
|
||||
d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
|
||||
<path d="M50,45 L35,25 L65,35 Z" fill="black" />
|
||||
<path d="M150,45 L165,25 L135,35 Z" fill="black" />
|
||||
<g class="owl-eye-group">
|
||||
<circle class="owl-eyes" cx="70" cy="90" r="28" />
|
||||
<circle class="owl-eyes" cx="130" cy="90" r="28" />
|
||||
<circle class="owl-highlights" cx="78" cy="80" r="8" />
|
||||
<circle class="owl-highlights" cx="138" cy="80" r="8" />
|
||||
</g>
|
||||
<path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
|
||||
<path class="owl-feathers" d="M80,150 Q90,160 100,150 M110,150 Q120,160 130,150 M95,170 Q105,180 115,170" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card" id="building">
|
||||
<h3>Building</h3>
|
||||
<svg class="owl-svg" viewBox="0 0 200 220">
|
||||
<path class="prop hardhat" d="M60,35 Q100,10 140,35 L145,45 L55,45 Z" fill="#f1c40f" stroke="black"
|
||||
stroke-width="4" />
|
||||
<g class="owl-wings">
|
||||
<path d="M30,100 Q10,130 35,170" fill="none" stroke="black" stroke-width="8" stroke-linecap="round" />
|
||||
<path d="M170,100 Q190,130 165,170" fill="none" stroke="black" stroke-width="8"
|
||||
stroke-linecap="round" />
|
||||
</g>
|
||||
<path class="owl-body"
|
||||
d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
|
||||
<g>
|
||||
<circle class="owl-eyes" cx="70" cy="90" r="28" />
|
||||
<circle class="owl-eyes" cx="130" cy="90" r="28" />
|
||||
<circle class="owl-highlights" cx="78" cy="80" r="8" />
|
||||
<circle class="owl-highlights" cx="138" cy="80" r="8" />
|
||||
</g>
|
||||
<path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card" id="debugging">
|
||||
<h3>Debugging</h3>
|
||||
<svg class="owl-svg" viewBox="0 0 200 220">
|
||||
<g class="prop magnifier" transform="translate(140, 130)">
|
||||
<circle cx="0" cy="0" r="20" fill="none" stroke="black" stroke-width="5" />
|
||||
<line x1="15" y1="15" x2="30" y2="30" stroke="black" stroke-width="8" stroke-linecap="round" />
|
||||
</g>
|
||||
<path class="owl-body"
|
||||
d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
|
||||
<g>
|
||||
<circle class="owl-eyes" cx="70" cy="90" r="28" />
|
||||
<circle class="owl-eyes" cx="130" cy="90" r="28" />
|
||||
<circle class="owl-highlights" cx="78" cy="80" r="8" />
|
||||
<circle class="owl-highlights" cx="138" cy="80" r="8" />
|
||||
</g>
|
||||
<path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card" id="launch">
|
||||
<h3>Launch</h3>
|
||||
<svg class="owl-svg" viewBox="0 0 200 220">
|
||||
<path class="prop sparkle" d="M20,50 L25,40 L30,50 L40,55 L30,60 L25,70 L20,60 L10,55 Z" fill="#f1c40f" />
|
||||
<path class="prop sparkle" d="M160,30 L165,20 L170,30 L180,35 L170,40 L165,50 L160,40 L150,35 Z"
|
||||
fill="#f1c40f" />
|
||||
<g class="owl-wings">
|
||||
<path d="M30,100 Q0,80 15,140" fill="none" stroke="black" stroke-width="8" stroke-linecap="round" />
|
||||
<path d="M170,100 Q200,80 185,140" fill="none" stroke="black" stroke-width="8" stroke-linecap="round" />
|
||||
</g>
|
||||
<path class="owl-body"
|
||||
d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
|
||||
<g>
|
||||
<circle class="owl-eyes" cx="70" cy="90" r="28" />
|
||||
<circle class="owl-eyes" cx="130" cy="90" r="28" />
|
||||
<circle class="owl-highlights" cx="78" cy="80" r="8" />
|
||||
<circle class="owl-highlights" cx="138" cy="80" r="8" />
|
||||
</g>
|
||||
<path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user