feat(frontend): adds animations
feat(frontend): adds animations
This commit is contained in:
GitHub
commit
2a15222d12
@ -1,14 +1,24 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>wordl</title>
|
<title>wordl</title>
|
||||||
<link data-trunk href="./public/styles.css" rel="css">
|
<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 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" />
|
<link rel="manifest" href="public/manifest.json" />
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-black text-white">
|
|
||||||
</body>
|
<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>
|
</html>
|
||||||
@ -2,13 +2,53 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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 {
|
.logo {
|
||||||
@apply absolute;
|
@apply absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-fadein-right {
|
.logo-fadein-right {
|
||||||
position:relative;
|
position: relative;
|
||||||
animation: logo-fadein-right 1s ;
|
animation: logo-fadein-right 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.validation-error {
|
.validation-error {
|
||||||
@ -20,17 +60,21 @@
|
|||||||
transform: translateX(-200%);
|
transform: translateX(-200%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
70%{
|
|
||||||
|
70% {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
80%{
|
|
||||||
|
80% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
90%{
|
|
||||||
|
90% {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
100%{
|
|
||||||
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -46,75 +90,96 @@
|
|||||||
transform: translateX(500%);
|
transform: translateX(500%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
70%{
|
|
||||||
|
70% {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
80%{
|
|
||||||
|
80% {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
90%{
|
|
||||||
|
90% {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
100%{
|
|
||||||
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes logo-fadein-left {
|
@keyframes logo-fadein-left {
|
||||||
from{
|
from {
|
||||||
left: -200%;
|
left: -200%;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
to{
|
|
||||||
|
to {
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.fade-in{
|
.fade-in {
|
||||||
position:relative;
|
position: relative;
|
||||||
animation:fadein 0.4s}
|
animation: fadein 0.4s
|
||||||
@keyframes fadein{
|
|
||||||
from{
|
|
||||||
left:200%;
|
|
||||||
opacity:0;
|
|
||||||
} to{
|
|
||||||
left:0;
|
|
||||||
opacity:1}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-out{
|
@keyframes fadein {
|
||||||
position:relative;
|
from {
|
||||||
animation:fadeout 0.4s}
|
left: 200%;
|
||||||
@keyframes fadeout{
|
opacity: 0;
|
||||||
from{
|
}
|
||||||
left:0;
|
|
||||||
opacity:0
|
to {
|
||||||
} to{
|
left: 0;
|
||||||
left:-200%;
|
opacity: 1
|
||||||
opacity:1}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-out {
|
||||||
|
position: relative;
|
||||||
|
animation: fadeout 0.4s
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeout {
|
||||||
|
from {
|
||||||
|
left: 0;
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
left: -200%;
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mail-animation {
|
.mail-animation {
|
||||||
position:relative;
|
position: relative;
|
||||||
animation:mail-animation 2s infinite;
|
animation: mail-animation 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mail-animation {
|
@keyframes mail-animation {
|
||||||
0% {
|
0% {
|
||||||
left: -20%;
|
left: -20%;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
70%{
|
|
||||||
|
70% {
|
||||||
left: 20%;
|
left: 20%;
|
||||||
}
|
}
|
||||||
80%{
|
|
||||||
|
80% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
100%{
|
|
||||||
|
100% {
|
||||||
left: 100%;
|
left: 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
@ -138,11 +203,11 @@ opacity:1}
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text-danger {
|
.text-danger {
|
||||||
color: rgba(255, 82, 82,1.0);
|
color: rgba(255, 82, 82, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-danger {
|
.bg-danger {
|
||||||
background-color: rgba(255, 82, 82,1.0);
|
background-color: rgba(255, 82, 82, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.min-height {
|
.min-height {
|
||||||
@ -150,53 +215,53 @@ opacity:1}
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text-tertiary {
|
.text-tertiary {
|
||||||
color: rgba(132, 129, 122,1.0);
|
color: rgba(132, 129, 122, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-tertriary {
|
.bg-tertriary {
|
||||||
background-color: rgba(132, 129, 122,1.0);
|
background-color: rgba(132, 129, 122, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-primary {
|
.border-primary {
|
||||||
border-color: rgba(51,217,178,1.0);
|
border-color: rgba(51, 217, 178, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-error {
|
.border-error {
|
||||||
border-color: rgba(255, 82, 82,1.0) !important;
|
border-color: rgba(255, 82, 82, 1.0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accent-primary {
|
.accent-primary {
|
||||||
accent-color: rgba(51, 217, 178,1.0);
|
accent-color: rgba(51, 217, 178, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-primary {
|
.text-primary {
|
||||||
color: rgba(51, 217, 178,1.0);
|
color: rgba(51, 217, 178, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-primary-dark {
|
.text-primary-dark {
|
||||||
color: rgba(33, 140, 116,1.0);
|
color: rgba(33, 140, 116, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-primary-dark {
|
.bg-primary-dark {
|
||||||
background-color: rgba(33, 140, 116,1.0);
|
background-color: rgba(33, 140, 116, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-primary {
|
.bg-primary {
|
||||||
background-color: rgba(51, 217, 178,1.0);
|
background-color: rgba(51, 217, 178, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-secondary {
|
.text-secondary {
|
||||||
color: rgba(52, 172, 224,1.0);
|
color: rgba(52, 172, 224, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-secondary-dark {
|
.text-secondary-dark {
|
||||||
color: rgba(34, 112, 147,1.0);
|
color: rgba(34, 112, 147, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-secondary-dark {
|
.bg-secondary-dark {
|
||||||
background-color: rgba(34, 112, 147,1.0);
|
background-color: rgba(34, 112, 147, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-secondary {
|
.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
|
<div
|
||||||
class={
|
class={
|
||||||
classes!(
|
classes!(
|
||||||
@ -396,10 +403,7 @@ pub fn Home() -> Html {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
if *loading {
|
if *game_over {
|
||||||
html!(<p>{"Loading..."}</p>)
|
|
||||||
}
|
|
||||||
else if *game_over {
|
|
||||||
|
|
||||||
let (text, color) = match *result {
|
let (text, color) = match *result {
|
||||||
GameResult::Win => {
|
GameResult::Win => {
|
||||||
@ -533,8 +537,8 @@ pub fn Home() -> Html {
|
|||||||
{
|
{
|
||||||
if *game_over {
|
if *game_over {
|
||||||
html!{
|
html!{
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 -960 960 960" fill="white">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 rotate-box" 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"/>
|
<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>
|
</svg>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -559,6 +563,7 @@ pub fn Home() -> Html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user