diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css index aa8a38b..4446f8f 100644 --- a/webapp/src/pages/Home/Home.css +++ b/webapp/src/pages/Home/Home.css @@ -38,6 +38,7 @@ from { transform: rotate(0deg); } + to { transform: rotate(360deg); } @@ -71,4 +72,58 @@ .username { color: #61dafb; +} + + + + + + +.swipe { + position: relative; + background-color: #F1F7F7; + width: 200px; + height: 60px; + color: black; + border-radius: 60px; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + letter-spacing: 2px; + border-top: 0.5px solid rgba(0, 0, 0, 0.35); + border-left: 0.5px solid rgba(0, 0, 0, 0.35); + padding-left: 40px; + cursor: pointer; + transition: 0.35s ease; +} + +.swipe:hover { + padding-left: 0; + padding-right: 40px; + color: #324B4C; +} + +.container { + position: absolute; + left: 5px; + width: 50px; + height: 50px; + background: #717bee; + border-radius: 50%; + transition: 0.35s ease; + display: flex; + justify-content: center; + align-items: center; + color: #f1f4f7; +} + +.swipe:hover .container { + left: calc(100% - 55px); +} + +/* Anula la regla del agente de usuario para los elementos con la clase .btn */ +.btn:-webkit-any-link { + text-decoration: none !important; + /* Utiliza !important para priorizar este estilo */ } \ No newline at end of file diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js index 0aeece4..3850de8 100644 --- a/webapp/src/pages/Home/Home.js +++ b/webapp/src/pages/Home/Home.js @@ -1,6 +1,7 @@ import { useEffect } from 'react' import { useAuth } from '../../hooks/useAuth' import { useNavigate } from 'react-router-dom' +import { Link } from 'react-router-dom' import './Home.css' import { useTranslation } from 'react-i18next' @@ -29,6 +30,19 @@ function Home() { ) : (
Please, login to play the game
)} + + +
{t("play.nav_title")} + + + + + + + + +
+ ) }