+
{/*Nav*/}
{numQuestion >= 0 ?
:
diff --git a/webapp/src/custom.css b/webapp/src/custom.css
new file mode 100644
index 00000000..cc3106ae
--- /dev/null
+++ b/webapp/src/custom.css
@@ -0,0 +1,368 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+ }
+ .App {
+ text-align: center;
+ }
+
+ .App-logo {
+ height: 40vmin;
+ pointer-events: none;
+ }
+
+ @media (prefers-reduced-motion: no-preference) {
+ .App-logo {
+ animation: App-logo-spin infinite 20s linear;
+ }
+ }
+
+ .App-header {
+ background-color: #282c34;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: white;
+ }
+
+ .App-link {
+ color: #61dafb;
+ }
+
+ @keyframes App-logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+ .navbar-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: blue;
+ width: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+ }
+
+ main {
+ width: 100%;
+ }
+
+ .navbar-container img {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+ }
+
+ .navbar-text {
+ color: white;
+ }
+
+
+ .help-button {
+ border: none;
+ background: none;
+
+ }
+
+ .en-button, .es-button{
+ margin-right: 10px;
+ background: rgb(171, 171, 221);
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px black;
+ cursor:pointer;
+ font-size: 16px;
+ color: white;
+ font-weight: 700;
+ margin: 0.5em;
+ }
+
+ .right-nav{
+ display: flex;
+ }
+
+
+
+ .help-button img {
+ width: 40px;
+ height: 40px;
+ }
+
+
+ .menuButton {
+ width: 40%;
+ height: 45px;
+ background: darkblue;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px black;
+ cursor:pointer;
+ font-size: 16px;
+ color: white;
+ font-weight: 700;
+ margin: 0.5em;
+ text-align: center;
+ }
+
+ .countdown {
+ font-weight: 500;
+ margin: 3em;
+ }
+
+ .topPanel{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+ .divMenu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+
+ .menuButton{
+ width: 200px;
+ height: 45px;
+ background: darkblue;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px black;
+ cursor: pointer;
+ font-size: 16px;
+ color: white;
+ font-weight: 700;
+ margin: 0.5em;
+ text-decoration: none;
+ }
+
+ .linkButton {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 200px;
+ height: 45px;
+ background: darkblue;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px black;
+ cursor: pointer;
+ font-size: 16px;
+ color: white;
+ font-weight: 700;
+ margin: 0.5em;
+ text-decoration: none;
+}
+
+
+
+
+ .wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+
+ .wrapper button{
+ width: 100%;
+ height: 45px;
+ background: darkblue;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px black;
+ cursor:pointer;
+ font-size: 16px;
+ color: white;
+ font-weight: 700;
+ }
+
+ .wrapper link{
+ font-size: 14.5px;
+ text-align: center;
+ margin: 20px 0 15px;
+ }
+
+
+.wrapper{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: lightblue;
+}
+
+.wrapper2{
+ width: 420px;
+ background-color: blue;
+ color: white;
+ border-style: 10px;
+ padding: 30px 40px;
+ border-radius: 15%;
+}
+
+.wrapper2 h1{
+ font-size: 36px;
+ text-align: center;
+}
+
+.wrapper2 .input-box{
+ position: relative;
+ width: 100%;
+ height: 50px;
+ margin: 30px 0;
+}
+
+.input-box input{
+ width: 100%;
+ height: 100%;
+ background: lightblue;
+ border: none;
+ outline: none;
+ border: 2px solid gray;
+ border-radius: 40px;
+ font-size: 14.5px;
+ color: black;
+}
+
+.input-box input::placeholder{
+ background-color: lightblue;
+}
+
+.input-box .icon{
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 16px;
+}
+
+.wrapper2 .remember-forgot{
+ display: flex;
+ justify-content: space-between;
+ font-size: 14.5px;
+ margin: -15px 0 15px;
+}
+
+.remember-forgot label input{
+ accent-color: white;
+ margin-right: 4px;
+}
+
+.remember-forgot a {
+ color: white;
+ text-decoration: none;
+}
+
+.remember-forgot a:hover{
+ text-decoration: underline;
+}
+
+.wrapper2 button{
+ width: 100%;
+ height: 45px;
+ background: white;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px black;
+ cursor:pointer;
+ font-size: 16px;
+ color: black;
+ font-weight: 700;
+}
+
+.button-register {
+ color: aliceblue;
+ }
+
+ .button-login {
+ color: aliceblue;
+ }
+
+.register-link p a {
+ color: white;
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.register-link p a:hover{
+ text-decoration: underline;
+}
+
+.answerButton {
+ width: 100%;
+ height: 45px;
+ background: darkblue;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px black;
+ cursor:pointer;
+ font-size: 16px;
+ color: white;
+ font-weight: 700;
+}
+
+.answerPanel {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr); /* 2 columns */
+ grid-template-rows: repeat(2, 1fr); /* 2 rows */
+ gap: 10px; /* Adjust the gap between grid items */
+
+
+}
+
+/* Adjust width of child elements */
+.answerPanel div > * {
+ width: 100%; /* Adjust as needed */
+ margin:1em;
+}
+p{
+ text-align: center;
+}
+
+
+.question-view-container, .answerPanel {
+ background-color: lightblue;
+ padding: 20px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/webapp/src/index.css b/webapp/src/index.css
deleted file mode 100644
index ec2585e8..00000000
--- a/webapp/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/webapp/src/index.js b/webapp/src/index.js
index cc263c85..f5d8ebec 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import './index.css';
+import './custom.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {I18nextProvider} from "react-i18next";
diff --git a/webapp/src/locales/es/messages_es.properties b/webapp/src/locales/es/messages_es.properties
deleted file mode 100644
index a9ab7b5c..00000000
--- a/webapp/src/locales/es/messages_es.properties
+++ /dev/null
@@ -1,19 +0,0 @@
-# messages_es.properties
-navbar.title = Saber y ganar
-button.language = English
-instructionsTitle=Instrucciones de WIQ
-objective=Objetivo:
-objectiveDescription=El objetivo del juego es responder tantas preguntas correctamente como sea posible.
-howToPlay=Cómo Jugar:
-howToPlayDescription1=El juego consiste en una serie de preguntas.
-howToPlayDescription2=Lee cada pregunta cuidadosamente.
-howToPlayDescription3=Elige la respuesta correcta de las opciones proporcionadas.
-howToPlayDescription4=Haz clic o toca tu respuesta seleccionada para enviarla.
-scoring=Puntuación:
-scoringDescription1=Cada respuesta correcta te otorga x puntos.
-scoringDescription2=Las respuestas incorrectas no restan puntos.
-timeLimit=Límite de Tiempo:
-timeLimitDescription=Algunos modos de juego pueden tener un límite de tiempo para responder cada pregunta. Sé rápido y preciso para maximizar tu puntuación.
-haveFun=¡Diviértete!:
-haveFunDescription=¡Disfruta del juego y pon a prueba tus conocimientos. ¡Buena suerte!
-