Add play button to hame page

Arquisoft · Apr 28, 2024 · 9e08fcd · 9e08fcd
1 parent 282c5cc
commit 9e08fcd
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git 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 */
 }
diff --git 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() {
       ) : (
         <div>Please, login to play the game</div>
       )}
+
+      <Link to="game" class="btn">
+        <div class="swipe">{t("play.nav_title")}
+          <span class="container">
+            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0h24v24H0z" fill="none">
+              </path>
+              <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor">
+              </path>
+            </svg>
+          </span>
+        </div>
+      </Link>
     </div>
   )
 }