123 lines
2.5 KiB
JavaScript
123 lines
2.5 KiB
JavaScript
const fs = require('fs');
|
|
const css = `
|
|
/* Wariant 2: Uciekająca Kura */
|
|
.anim-run {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 40px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.anim-run .chicken {
|
|
position: absolute;
|
|
font-size: 24px;
|
|
animation: runLeft 3s infinite linear;
|
|
}
|
|
.anim-run .chef {
|
|
position: absolute;
|
|
font-size: 28px;
|
|
animation: runLeftChef 3s infinite linear;
|
|
}
|
|
@keyframes runLeft {
|
|
0% { transform: translateX(100px); }
|
|
100% { transform: translateX(-40px); }
|
|
}
|
|
@keyframes runLeftChef {
|
|
0% { transform: translateX(140px); }
|
|
100% { transform: translateX(0px); }
|
|
}
|
|
|
|
/* Wariant 3: Kura w garnku */
|
|
.anim-pot {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
.anim-pot .pot-emoji {
|
|
font-size: 32px;
|
|
z-index: 2;
|
|
}
|
|
.anim-pot .chicken-head {
|
|
position: absolute;
|
|
font-size: 24px;
|
|
bottom: 10px;
|
|
z-index: 1;
|
|
animation: peekaboo 4s infinite ease-in-out;
|
|
}
|
|
@keyframes peekaboo {
|
|
0%, 100%, 80% { transform: translateY(15px); opacity: 0; }
|
|
30%, 50% { transform: translateY(0px); opacity: 1; }
|
|
}
|
|
|
|
/* Wariant 4: Latająca pizza */
|
|
.anim-pizza {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.anim-pizza .chef-pizza {
|
|
font-size: 28px;
|
|
z-index: 1;
|
|
}
|
|
.anim-pizza .pizza-emoji {
|
|
position: absolute;
|
|
font-size: 20px;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
animation: spinPizza 2s infinite ease-in-out;
|
|
}
|
|
@keyframes spinPizza {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(360deg); }
|
|
}
|
|
|
|
/* Wariant 5: Nerwowa świnka */
|
|
.anim-pig {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.anim-pig .pig-emoji {
|
|
font-size: 28px;
|
|
animation: nervous 0.2s infinite;
|
|
}
|
|
.anim-pig .sweat-emoji {
|
|
position: absolute;
|
|
font-size: 16px;
|
|
top: 0;
|
|
right: 15px;
|
|
animation: sweatDrop 1s infinite;
|
|
}
|
|
.anim-pig .knife-emoji {
|
|
position: absolute;
|
|
font-size: 20px;
|
|
right: -10px;
|
|
animation: knifeStab 2s infinite ease-in-out;
|
|
}
|
|
@keyframes nervous {
|
|
0%, 100% { transform: translateX(0); }
|
|
50% { transform: translateX(2px); }
|
|
}
|
|
@keyframes sweatDrop {
|
|
0% { transform: translateY(0); opacity: 1; }
|
|
100% { transform: translateY(10px); opacity: 0; }
|
|
}
|
|
@keyframes knifeStab {
|
|
0%, 100% { transform: translateX(10px); opacity: 0; }
|
|
50% { transform: translateX(0px); opacity: 1; }
|
|
}
|
|
`;
|
|
fs.appendFileSync('public/assets/css/stolik2_api.css', css);
|
|
console.log("Appended CSS");
|