Merge pull request #11 from Arquisoft/10-crear-un-frontendbasico

10 crear un frontendbasico
Arquisoft · Feb 13, 2024 · 03661ae · 03661ae
2 parents 1b23f63 + 36e42cd
commit 03661ae
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 4 deletions.
diff --git a/webapp/public/LogoSaberYGanar.png b/webapp/public/LogoSaberYGanar.png
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Arquisof-WIQ</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -38,6 +38,9 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
+
+      
     -->
+
   </body>
 </html>
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -48,19 +48,24 @@ function App() {
 export default App; */
 import React from 'react';
 import GenerateQuestion from './components/GenerateQuestion'; // Asegúrate de importar GenerateQuestion correctamente
+import Login from './components/Login';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-
+import Footer from './components/Footer';
 function App() {
   return (
-    <Container component="main" maxWidth="xs">
+
+  <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
         Welcome to the 2024 edition of the Software Architecture course
       </Typography>
       {/* Aquí se muestra el componente GenerateQuestion */}
+
       <GenerateQuestion />
+
+      <Footer> </Footer>
     </Container>
   );
 }

diff --git a/webapp/src/components/Footer.js b/webapp/src/components/Footer.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import '../styles/Footer.css'; // Asegúrate de importar tu archivo de estilos si es necesario
+
+const Footer = () => (
+  <footer className="footer">
+    <p>Trabajo de Arquitectura del Software</p>
+    <p>
+      <a href="https://github.com/Arquisoft/wiq_es04c" target="_blank" rel="noopener noreferrer">
+        Github del Proyecto
+      </a>
+    </p>
+    <p>
+        <a href="https://ingenieriainformatica.uniovi.es" target="_blank"rel="noopener noreferrer">Escuela de Ingeniería Informática</a></p>
+  </footer>
+);
+
+export default Footer;
diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
@@ -0,0 +1,40 @@
+// En /src/components/Navbar.js
+import React from 'react';
+import '../styles/Navbar.css'; // Importa tu archivo de estilos si es necesario
+
+const Navbar = () => (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+    <div className="collapse navbar-collapse" id="my-navbarColor01">
+      <a className="navbar-brand" href="/">
+        <img src="/LogoSaberYganar.png" alt="Logo" />
+      </a>
+     {/*<ul className="navbar-nav mr-auto">
+        <li className="nav-item">
+          <a className="nav-link" href="/">
+            Home
+          </a>
+        </li>
+</ul>*/}
+    </div>
+
+    <div className="collapse navbar-collapse" id="my-navbarColor02">
+      <ul className="navbar-nav justify-content-end">
+        <li className="nav-item">
+          <a className="nav-link" href="/signup">
+            <i className="fas fa-sign-in-alt" style={{ fontSize: '16px' }}></i>
+            <span>Registrarse</span>
+          </a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="/login">
+            <i className="fas fa-sign-in-alt" style={{ fontSize: '16px' }}></i>
+            <span>Iniciar sesión</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+);
+
+export default Navbar;
diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -3,11 +3,17 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+/*funcion q representa la barra de navegacion superior*/
+import Navbar from './components/NavBar';
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
+
   <React.StrictMode>
+    <Navbar></Navbar>
+
     <App />
+
   </React.StrictMode>
 );
 

diff --git a/webapp/src/styles/Footer.css b/webapp/src/styles/Footer.css
@@ -0,0 +1,26 @@
+/* Estilo para el pie de página */
+/* Estilos del pie de página */
+.footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    left:0%;
+    background-color: #001f3f;
+    color: #ffffff;
+    padding: 10px;
+    text-align: center;
+    display: flex;
+    justify-content: space-around; /* Distribuye los elementos horizontalmente */
+    align-items: center;
+  }
+
+  .footer a {
+    color: #ffffff; /* Enlaces en texto blanco */
+    text-decoration: none;
+
+  }
+
+  .footer a:hover {
+    text-decoration: underline; /* Subraya enlaces al pasar el ratón */
+  }
+
diff --git a/webapp/src/styles/Navbar.css b/webapp/src/styles/Navbar.css
@@ -0,0 +1,49 @@
+/* Estilo para la barra de navegación */
+.navbar {
+    background-color: #001f3f; /* Fondo azul oscuro */
+    padding: 10px; /* Espaciado interno */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Estilo para el logo */
+.navbar-brand img {
+    width: 5em; /* Ancho del logo */
+}
+
+/* Estilo para la lista de navegación */
+.navbar-nav {
+    display: flex;
+    align-items: center;
+    list-style-type: none; /* Eliminar el punto de los li para que no quede feo */
+    margin: 0; /* Eliminar el margen por defecto */
+    padding: 0; /* Eliminar el padding por defecto */
+}
+
+/* Estilo para los elementos de la lista de navegación */
+.navbar-nav li {
+    margin-right: 1em; /* Espaciado entre elementos de la lista */
+}
+
+/* Estilo para los botones de login y registro */
+.navbar-nav a {
+    color: #ffffff; /* Texto blanco */
+    text-decoration: none;
+}
+
+/* Estilo para hacer que la barra de navegación sea responsive en dispositivos móviles */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column; /* Cambia a una columna en dispositivos móviles */
+        align-items: flex-start;
+    }
+
+    .navbar-nav {
+        margin-top: 10px; /* Espaciado superior en dispositivos móviles */
+    }
+
+    .navbar-nav li {
+        margin: 5px 0; /* Espaciado entre elementos de la lista en dispositivos móviles */
+    }
+}