update navbar - index, home css and html

jsuazof · Jul 10, 2024 · 964ada0 · 964ada0
1 parent beeba30
commit 964ada0
Show file tree

Hide file tree

Showing 17 changed files with 50 additions and 55 deletions.
diff --git a/src/main/resources/static/CSS/deposit.css b/src/main/resources/static/CSS/deposit.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 *{
     margin: 0;
     padding: 0;

diff --git a/src/main/resources/static/CSS/home.css b/src/main/resources/static/CSS/home.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 *{
     margin: 0;
     padding: 0;
@@ -34,7 +33,7 @@ header{
   overflow: hidden;
   width: auto;
   height: auto;
-  color: white;
+  color: rgb(12, 12, 12);
   padding: 30px;
   margin: auto;
   margin-top: 14px;
@@ -47,12 +46,12 @@ header{
 }
 header a i{
   font-size: 25px;
-  color: white;
+  color: rgb(13, 13, 13);
 }
 
 #header{
   text-align: center;
-  color: white;
+  color: rgb(17, 16, 16);
   margin-bottom: 10px;
 }
 #header p{
@@ -80,7 +79,7 @@ header a i{
   cursor: pointer;
 }
 #hideButton:hover i {
-  color: #919432;
+  color: #32948f;
 }
 .container #button{
   display: flex;
@@ -91,10 +90,10 @@ header a i{
 .container .btn{
   background-color: black;
   text-align: center;
-  color: #e8f008;
+  color: #08f0f0;
 }
 .btn:hover{
-  background-color: #919432;
+  background-color: #32948f;
   color: white;
   transform: scale(1.1);
 }
@@ -105,7 +104,7 @@ header a i{
   left: 0; /* Position it at the left edge of the viewport */
   width: 100%; /* Make it span the entire width of the viewport */
   z-index: 100; /* Ensure it appears above other elements */
-  background-color: #333; /* Set a background color */
+  background-color: #000000; /* Set a background color */
   padding: 10px 0; /* Add some padding */
 }
 
@@ -125,4 +124,5 @@ header a i{
   .container #button{
     flex-direction: column;
   }
-}
+}
+
diff --git a/src/main/resources/static/CSS/login.css b/src/main/resources/static/CSS/login.css
@@ -61,6 +61,7 @@ body{
     padding: 10px 45px;
     border: 1px solid transparent;
     border-radius: 8px;
+    border-color:#fff;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
@@ -79,14 +80,13 @@ body{
     color: white;
 }
 .container button.hidden:hover{
-    background-color: #324f94;
+    background-color: #7fdaea;
     color: black;
     transform: scale(1.2);
 }
 
 .container form{
-    background-color: #08c9f0cf;
-
+    background-color: #005d92fb;   
     color: white;
     display: flex;
     align-items: center;
@@ -168,9 +168,8 @@ body{
 }
 
 .toggle{
-    background-color: #08c9f0cf;
+    background-color: #089bf0c9;
     height: 100%;
-
     color: black;
     position: relative;
     left: -100%;
@@ -323,14 +322,13 @@ body{
     #buttonCreate,#buttonRegister{
         color: #088bf0;
         font-weight: bold;
-        color: #088bf0;
         cursor: pointer;
         font-weight: bold;
         margin-top: 5px;
         text-decoration: none;
     }
     #buttonCreate:hover, #buttonRegister:hover{
-        color:#326e94;
+        color:#7fdaea;
     }
     .parraf-login,.parraf-create{
         visibility: visible;

diff --git a/src/main/resources/static/CSS/menu.css b/src/main/resources/static/CSS/menu.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+
 .navigation {
     position: fixed;
     top: 0;
@@ -9,7 +11,7 @@
     justify-content: center;
     align-items: center;
     border-radius: 0px 0px 10px 10px;
-    background-color: rgb(25, 24, 24);
+    background-color: rgb(4, 47, 74);
 }
 .navigation ul {
     display: flex;
@@ -38,7 +40,7 @@
     line-height: 75px;
     font-size: 3.0em;
     text-align: center;
-    color: black;
+    color: rgb(22, 10, 69);
     transition: .5s;
 }
 .navigation ul li.active a .icon {
@@ -65,7 +67,6 @@
     height: 50px;
     background: transparent;
     border-radius: 50%;
-    border: 1.8px solid #f1f2f5;
     transform: translateY(4px) scale(0);
 }
 .navigation ul li.active a .circle {
@@ -79,7 +80,7 @@
     width: 70px;
     height: 70px;
     background: rgb(16, 16, 15);
-    border: 6px solid #f7f71d;
+    border: 6px solid #1d4cf7;
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -131,4 +132,5 @@
       margin-top: auto;
     margin: 10px auto; 
     }
-}
+}
+
diff --git a/src/main/resources/static/CSS/transaction.css b/src/main/resources/static/CSS/transaction.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 *{
     margin: 0;
     padding: 0;

diff --git a/src/main/resources/static/CSS/transfer.css b/src/main/resources/static/CSS/transfer.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 *{
     margin: 0;
     padding: 0;

diff --git a/src/main/resources/static/img/background.jpg → ...main/resources/static/img/background.jpeg b/src/main/resources/static/img/background.jpg → ...main/resources/static/img/background.jpeg
diff --git a/src/main/resources/templates/deposit.html b/src/main/resources/templates/deposit.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="es" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/src/main/resources/templates/error_page.html b/src/main/resources/templates/error_page.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="es" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -15,6 +15,7 @@
 </head>
 <body>
 <header>
+
     <nav class="navigation">
         <ul>
             <li class="list active">
@@ -34,7 +35,7 @@
             <li class="list">
                 <a th:href="@{/withdraw/{id}(id=${user.id})}">
                     <span class="icon"><box-icon name='money' color='#f5f2f2'></box-icon></span>
-                    <span class="text">Retiro</span>
+                    <span class="text">Retirar</span>
                     <span class="circle"></span>
                 </a>
             </li>

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -65,7 +65,7 @@ <h4>Dinero digital a tu alcance.</h4>
                 </div>
                 <h2>Iniciar Sesión</h2>
 
-                <input type="text" id="usernameLogin" name="usernameLogin" th:field="*{usernameLogin}" placeholder="Username" required />
+                <input type="text" id="usernameLogin" name="usernameLogin" th:field="*{usernameLogin}" placeholder="Nombre Usuario" required />
                 <input
                         type="password"
                         id="passLogin"
@@ -90,10 +90,8 @@ <h2>Iniciar Sesión</h2>
         <div class="toggle-container">
             <div class="toggle">
                 <div class="toggle-panel toggle-left">
-                    <h2>Bienvenido de nuevo!</h2>
-                    <p>Ingrese sus datos para AlkeWallet</p>
                     <button class="hidden" id="loginButtonToggle">
-                        Inicio Sesión
+                       ◀️ Iniciar Sesión
                     </button>
                 </div>
                 <div class="toggle-panel toggle-right">

diff --git a/src/main/resources/templates/transaction.html b/src/main/resources/templates/transaction.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="es" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <title>Historial de Transacciones</title>

diff --git a/src/main/resources/templates/transfer.html b/src/main/resources/templates/transfer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="es" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <title>Transferencia de Dinero</title>

diff --git a/src/main/resources/templates/withdraw.html b/src/main/resources/templates/withdraw.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="es" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/target/classes/static/CSS/home.css b/target/classes/static/CSS/home.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 *{
     margin: 0;
     padding: 0;
@@ -34,7 +33,7 @@ header{
   overflow: hidden;
   width: auto;
   height: auto;
-  color: white;
+  color: rgb(12, 12, 12);
   padding: 30px;
   margin: auto;
   margin-top: 14px;
@@ -47,12 +46,12 @@ header{
 }
 header a i{
   font-size: 25px;
-  color: white;
+  color: rgb(13, 13, 13);
 }
 
 #header{
   text-align: center;
-  color: white;
+  color: rgb(17, 16, 16);
   margin-bottom: 10px;
 }
 #header p{
@@ -80,7 +79,7 @@ header a i{
   cursor: pointer;
 }
 #hideButton:hover i {
-  color: #919432;
+  color: #32948f;
 }
 .container #button{
   display: flex;
@@ -91,10 +90,10 @@ header a i{
 .container .btn{
   background-color: black;
   text-align: center;
-  color: #e8f008;
+  color: #08f0f0;
 }
 .btn:hover{
-  background-color: #919432;
+  background-color: #32948f;
   color: white;
   transform: scale(1.1);
 }
@@ -105,7 +104,7 @@ header a i{
   left: 0; /* Position it at the left edge of the viewport */
   width: 100%; /* Make it span the entire width of the viewport */
   z-index: 100; /* Ensure it appears above other elements */
-  background-color: #333; /* Set a background color */
+  background-color: #000000; /* Set a background color */
   padding: 10px 0; /* Add some padding */
 }
 
@@ -125,4 +124,5 @@ header a i{
   .container #button{
     flex-direction: column;
   }
-}
+}
+
diff --git a/target/classes/templates/home.html b/target/classes/templates/home.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="es" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -15,6 +15,7 @@
 </head>
 <body>
 <header>
+
     <nav class="navigation">
         <ul>
             <li class="list active">
@@ -34,7 +35,7 @@
             <li class="list">
                 <a th:href="@{/withdraw/{id}(id=${user.id})}">
                     <span class="icon"><box-icon name='money' color='#f5f2f2'></box-icon></span>
-                    <span class="text">Retiro</span>
+                    <span class="text">Retirar</span>
                     <span class="circle"></span>
                 </a>
             </li>

diff --git a/target/classes/templates/index.html b/target/classes/templates/index.html
@@ -65,7 +65,7 @@ <h4>Dinero digital a tu alcance.</h4>
                 </div>
                 <h2>Iniciar Sesión</h2>
 
-                <input type="text" id="usernameLogin" name="usernameLogin" th:field="*{usernameLogin}" placeholder="Username" required />
+                <input type="text" id="usernameLogin" name="usernameLogin" th:field="*{usernameLogin}" placeholder="Nombre Usuario" required />
                 <input
                         type="password"
                         id="passLogin"
@@ -90,10 +90,8 @@ <h2>Iniciar Sesión</h2>
         <div class="toggle-container">
             <div class="toggle">
                 <div class="toggle-panel toggle-left">
-                    <h2>Bienvenido de nuevo!</h2>
-                    <p>Ingrese sus datos para AlkeWallet</p>
                     <button class="hidden" id="loginButtonToggle">
-                        Inicio Sesión
+                       ◀️ Iniciar Sesión
                     </button>
                 </div>
                 <div class="toggle-panel toggle-right">