Cambios en Front-end + docu

docs/src/05_building_block_view.adoc

@@ -108,8 +108,6 @@ Bloques de construcción contenidos::
 |*REST*
 |_Manejo de datos de Wikidata._
 
-|*Users*
-|_El manejo de las cuentas de los usuarios._
 |===
 
 

webapp/src/components/Estilos/juego.css

@@ -0,0 +1,39 @@
+
+
+.button {
+
+    padding: 20px 20px 20px 20px ; /* espacio entre borde y el texto dentro del boton */
+    border: 2px solid black; /* Color del borde */
+    font-weight: bold;
+    border-radius: 5px; /* Borde redondeado */
+    background-color: #613FBB; /* Color de fondo */
+    margin-bottom: 10px;
+    margin-left:-48px;
+    width: 500px; /* Ajusta el valor según el ancho deseado */
+  }
+
+  #boton1{
+    background-color: #E14E4E; /* Color de fondo */
+  }
+
+  #boton2{
+    background-color: #E1CB4E; /* Color de fondo */
+  }
+
+  #boton3{
+    background-color: #4EE15E; /* Color de fondo */
+  }
+
+  #boton4{
+    background-color: #4E8DE1; /* Color de fondo */
+  }
+
+  body h2 {
+    color: white;
+    font-family: 'Verdana';
+    text-align: center; /* Centra el texto */
+
+  }
+
+
+

webapp/src/components/Pages/Juego.js

@@ -1,20 +1,27 @@
 // src/components/Login.js
 import React, { useState } from 'react';
 import axios from 'axios';
+import '../Estilos/juego.css';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 
-const Juego = ({isLogged}) => {
-
+const botonRespuesta = (event) => { 
+  //comprobara si la respuesta es correcta o no 
+  }
 
+const Juego = ({isLogged}) => {
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       <h2> PREGUNTA </h2>
-      <div> RESP 1</div>
-      <div> RESP 2</div>
-      <div> RESP 3</div>
-      <div> RESP 4</div>
+      <div class="button-container">
+        <button id="boton1" class="button" onclick={botonRespuesta}>RESPUESTA PRUEBA PARA VER CUANTO OCUPA 1</button>
+        <button id="boton2" class="button" onclick={botonRespuesta}>RESPUESTA PRUEBA PARA VER UNA RESPUESTA LARGA</button>
+        <button id="boton3" class="button" onclick={botonRespuesta}>RESPUESTA PRUEBA JEJE</button>
+        <button id="boton4" class="button" onclick={botonRespuesta}>RESPUESTA PRUEBA PARA VER QUE TAL</button>
+      </div>
     </Container>
   );
 };
 
+
+
 export default Juego;

webapp/src/index.css

@@ -1,3 +1,5 @@
+
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -11,3 +13,12 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+body{
+  background-color: #6A48C4;
+}
+
+#root, html{
+  background-color: #8A6FD6 ;
+}
+