maot/maot-shortner
1
0
Fork 0
Code Issues 2 Pull requests Projects 1 Releases Packages Wiki Activity Actions

add(frontend): remove htmx import and add animations

Browse source
This commit is contained in:
maotovisk 2025-08-08 15:31:36 -03:00
parent 96a5d9f230
commit 5adada0422
4 changed files with 1285 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

128
web/resources/css/input.css
View file

@ -140,3 +140,131 @@
"calt" 1;
}
}
@layer utilities {
/* Custom animations for the URL shortener */
@keyframes pulse-slow {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes bounce-in {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in-scale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes success-pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgb(34, 197, 94, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgb(34, 197, 94, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgb(34, 197, 94, 0);
}
}
@keyframes confetti-fall {
0% {
opacity: 1;
transform: translate(-50%, -50%) translateX(0) translateY(0) rotateZ(0deg);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) translateX(var(--end-x)) translateY(var(--end-y)) rotateZ(var(--rotation));
}
}
@keyframes celebrate-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite;
}
.animate-bounce-in {
animation: bounce-in 0.6s ease-out;
}
.animate-slide-up {
animation: slide-up 0.5s ease-out;
}
.animate-fade-in-scale {
animation: fade-in-scale 0.4s ease-out;
}
.animate-success-pulse {
animation: success-pulse 0.6s ease-out;
}
.animate-celebrate-bounce {
animation: celebrate-bounce 1s ease-in-out;
}
body.success-animation h2 {
animation: celebrate-bounce 1s ease-in-out;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-900 { animation-delay: 900ms; }
}