feat(frontend): adds animations
feat(frontend): adds animations
This commit is contained in:
GitHub
commit
2a15222d12
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@ -9,6 +10,15 @@
|
||||
<link data-trunk rel="copy-dir" href="public">
|
||||
<link rel="manifest" href="public/manifest.json" />
|
||||
</head>
|
||||
|
||||
<body class="bg-black text-white">
|
||||
<div class="h-screen flex justify-center items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 rotate-ease" viewBox="0 -960 960 960" fill="white">
|
||||
<path
|
||||
d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Zm320-80Zm0-640Z" />
|
||||
</svg>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -2,6 +2,46 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.rotate-box {
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rotate-ease {
|
||||
animation: rotate-ease 2s ease-in-out infinite;
|
||||
/* Total duration of 4 seconds */
|
||||
}
|
||||
|
||||
@keyframes rotate-ease {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: rotate(180deg);
|
||||
/* Rotate to 180 degrees */
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: rotate(180deg);
|
||||
/* Hold at 180 degrees */
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
/* Rotate to 360 degrees */
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
@apply absolute;
|
||||
}
|
||||
@ -20,16 +60,20 @@
|
||||
transform: translateX(-200%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(0);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -46,25 +90,31 @@
|
||||
transform: translateX(500%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-fadein-left {
|
||||
from {
|
||||
left: -200%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
to {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
@ -74,46 +124,61 @@
|
||||
|
||||
.fade-in {
|
||||
position: relative;
|
||||
animation:fadein 0.4s}
|
||||
animation: fadein 0.4s
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
left: 200%;
|
||||
opacity: 0;
|
||||
} to{
|
||||
}
|
||||
|
||||
to {
|
||||
left: 0;
|
||||
opacity:1}
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
position: relative;
|
||||
animation:fadeout 0.4s}
|
||||
animation: fadeout 0.4s
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {
|
||||
left: 0;
|
||||
opacity: 0
|
||||
} to{
|
||||
}
|
||||
|
||||
to {
|
||||
left: -200%;
|
||||
opacity:1}
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.mail-animation {
|
||||
position: relative;
|
||||
animation: mail-animation 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes mail-animation {
|
||||
0% {
|
||||
left: -20%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
70% {
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
@ -164,6 +229,7 @@ opacity:1}
|
||||
.border-error {
|
||||
border-color: rgba(255, 82, 82, 1.0) !important;
|
||||
}
|
||||
|
||||
.accent-primary {
|
||||
accent-color: rgba(51, 217, 178, 1.0);
|
||||
}
|
||||
@ -199,4 +265,3 @@ opacity:1}
|
||||
.bg-secondary {
|
||||
background-color: rgba(52, 172, 224, 1.0);
|
||||
}
|
||||
|
||||
|
||||
@ -363,6 +363,13 @@ pub fn Home() -> Html {
|
||||
)
|
||||
}
|
||||
>
|
||||
if *loading {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 rotate-ease" viewBox="0 -960 960 960" fill="white">
|
||||
<path d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Zm320-80Zm0-640Z"/>
|
||||
</svg>
|
||||
<p>{"Loading..."}</p>
|
||||
} else {
|
||||
|
||||
<div
|
||||
class={
|
||||
classes!(
|
||||
@ -396,10 +403,7 @@ pub fn Home() -> Html {
|
||||
}
|
||||
>
|
||||
{
|
||||
if *loading {
|
||||
html!(<p>{"Loading..."}</p>)
|
||||
}
|
||||
else if *game_over {
|
||||
if *game_over {
|
||||
|
||||
let (text, color) = match *result {
|
||||
GameResult::Win => {
|
||||
@ -533,8 +537,8 @@ pub fn Home() -> Html {
|
||||
{
|
||||
if *game_over {
|
||||
html!{
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 -960 960 960" fill="white">
|
||||
<path d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 rotate-box" viewBox="0 -960 960 960" fill="white">
|
||||
<path d="M440-122q-121-15-200.5-105.5T160-440q0-66 26-126.5T260-672l57 57q-38 34-57.5 79T240-440q0 88 56 155.5T440-202v80Zm80 0v-80q87-16 143.5-83T720-440q0-100-70-170t-170-70h-3l44 44-56 56-140-140 140-140 56 56-44 44h3q134 0 227 93t93 227q0 121-79.5 211.5T520-122Z"/>
|
||||
</svg>
|
||||
}
|
||||
}
|
||||
@ -559,6 +563,7 @@ pub fn Home() -> Html {
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user