feat(frontend): adds animations
feat(frontend): adds animations
This commit is contained in:
GitHub
commit
2a15222d12
@ -1,14 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>wordl</title>
|
||||
<link data-trunk href="./public/styles.css" rel="css">
|
||||
<!-- <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon"> -->
|
||||
<link data-trunk rel="copy-dir" href="public" >
|
||||
<link data-trunk rel="copy-dir" href="public">
|
||||
<link rel="manifest" href="public/manifest.json" />
|
||||
</head>
|
||||
<body class="bg-black text-white">
|
||||
</body>
|
||||
</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,13 +2,53 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.logo-fadein-right {
|
||||
position:relative;
|
||||
animation: logo-fadein-right 1s ;
|
||||
position: relative;
|
||||
animation: logo-fadein-right 1s;
|
||||
}
|
||||
|
||||
.validation-error {
|
||||
@ -20,17 +60,21 @@
|
||||
transform: translateX(-200%);
|
||||
opacity: 0;
|
||||
}
|
||||
70%{
|
||||
|
||||
70% {
|
||||
transform: translateX(0);
|
||||
opacity: 0.7;
|
||||
}
|
||||
80%{
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
90%{
|
||||
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100%{
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -46,75 +90,96 @@
|
||||
transform: translateX(500%);
|
||||
opacity: 0;
|
||||
}
|
||||
70%{
|
||||
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
80%{
|
||||
|
||||
80% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
90%{
|
||||
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100%{
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-fadein-left {
|
||||
from{
|
||||
from {
|
||||
left: -200%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
to{
|
||||
|
||||
to {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fade-in{
|
||||
position:relative;
|
||||
animation:fadein 0.4s}
|
||||
@keyframes fadein{
|
||||
from{
|
||||
left:200%;
|
||||
opacity:0;
|
||||
} to{
|
||||
left:0;
|
||||
opacity:1}
|
||||
.fade-in {
|
||||
position: relative;
|
||||
animation: fadein 0.4s
|
||||
}
|
||||
|
||||
.fade-out{
|
||||
position:relative;
|
||||
animation:fadeout 0.4s}
|
||||
@keyframes fadeout{
|
||||
from{
|
||||
left:0;
|
||||
opacity:0
|
||||
} to{
|
||||
left:-200%;
|
||||
opacity:1}
|
||||
@keyframes fadein {
|
||||
from {
|
||||
left: 200%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
left: 0;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
position: relative;
|
||||
animation: fadeout 0.4s
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {
|
||||
left: 0;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
to {
|
||||
left: -200%;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.mail-animation {
|
||||
position:relative;
|
||||
animation:mail-animation 2s infinite;
|
||||
position: relative;
|
||||
animation: mail-animation 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes mail-animation {
|
||||
0% {
|
||||
left: -20%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
70%{
|
||||
|
||||
70% {
|
||||
left: 20%;
|
||||
}
|
||||
80%{
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100%{
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -138,11 +203,11 @@ opacity:1}
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: rgba(255, 82, 82,1.0);
|
||||
color: rgba(255, 82, 82, 1.0);
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
background-color: rgba(255, 82, 82,1.0);
|
||||
background-color: rgba(255, 82, 82, 1.0);
|
||||
}
|
||||
|
||||
.min-height {
|
||||
@ -150,53 +215,53 @@ opacity:1}
|
||||
}
|
||||
|
||||
.text-tertiary {
|
||||
color: rgba(132, 129, 122,1.0);
|
||||
color: rgba(132, 129, 122, 1.0);
|
||||
}
|
||||
|
||||
.bg-tertriary {
|
||||
background-color: rgba(132, 129, 122,1.0);
|
||||
background-color: rgba(132, 129, 122, 1.0);
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border-color: rgba(51,217,178,1.0);
|
||||
border-color: rgba(51, 217, 178, 1.0);
|
||||
}
|
||||
|
||||
.border-error {
|
||||
border-color: rgba(255, 82, 82,1.0) !important;
|
||||
border-color: rgba(255, 82, 82, 1.0) !important;
|
||||
}
|
||||
|
||||
.accent-primary {
|
||||
accent-color: rgba(51, 217, 178,1.0);
|
||||
accent-color: rgba(51, 217, 178, 1.0);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: rgba(51, 217, 178,1.0);
|
||||
color: rgba(51, 217, 178, 1.0);
|
||||
}
|
||||
|
||||
.text-primary-dark {
|
||||
color: rgba(33, 140, 116,1.0);
|
||||
color: rgba(33, 140, 116, 1.0);
|
||||
}
|
||||
|
||||
.bg-primary-dark {
|
||||
background-color: rgba(33, 140, 116,1.0);
|
||||
background-color: rgba(33, 140, 116, 1.0);
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: rgba(51, 217, 178,1.0);
|
||||
background-color: rgba(51, 217, 178, 1.0);
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: rgba(52, 172, 224,1.0);
|
||||
color: rgba(52, 172, 224, 1.0);
|
||||
}
|
||||
|
||||
.text-secondary-dark {
|
||||
color: rgba(34, 112, 147,1.0);
|
||||
color: rgba(34, 112, 147, 1.0);
|
||||
}
|
||||
|
||||
.bg-secondary-dark {
|
||||
background-color: rgba(34, 112, 147,1.0);
|
||||
background-color: rgba(34, 112, 147, 1.0);
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: rgba(52, 172, 224,1.0);
|
||||
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