feat_api(fe):Added the login page

frontend/src/app/modules/global/components/login/login.component.css

@@ -0,0 +1,98 @@
+
+  /* Estilo para el video de fondo */
+  #background-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Asegura que el video cubra toda la pantalla */
+    z-index: -1; /* Envía el video al fondo */
+  }
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html, body {
+    height: 100%;
+    font-family: Arial, sans-serif;
+  }
+
+  #background-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1; /* Asegura que el video quede por detrás de los demás elementos */
+  }
+
+  .head, .login-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: white;
+  }
+
+  .head {
+    margin-top: -200px;
+    display: flex; /* Activamos el layout Flexbox */
+    flex-direction: column; /* Los elementos hijos se dispondrán en columna */
+    align-items: center; /* Centra los elementos horizontalmente */
+    justify-content: center; /* Centra los elementos verticalmente si tienes más espacio */
+    text-align: center;
+  }
+
+  .logo {
+    width: 100px; /* Ajusta según el tamaño de tu logo */
+    height: auto;
+  }
+
+  h2 {
+    font-size: 24px;
+    font-weight: 700;
+    font-family:'Lato', sans-serif;
+  }
+
+  .login-container {
+    width: 300px;
+    padding: 20px;
+    background-color: #032e51;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .login-form label {
+    margin-bottom: 8px;
+    font-size: 16px;
+    margin-right: 300px;
+  }
+
+  .login-form input {
+    margin-bottom: 15px;
+    padding: 10px;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+  }
+
+  .login-form button {
+    padding: 10px;
+    background: rgba(47, 63, 111, 0.685); /* Fondo semitransparente */
+    backdrop-filter: blur(10px); /* Aplica el desenfoque al fondo detrás */
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }

frontend/src/app/modules/global/components/login/login.component.html

@@ -1,13 +1,20 @@
-<!-- frontend/src/app/modules/global/components/login/login.component.html -->
-<div>
-  <h2>Iniciar Sesión</h2>
-  <form (ngSubmit)="login()">
-    <label for="username">Usuario:</label>
-    <input type="text" id="username" name="username" required>
-    <br>
-    <label for="password">Contraseña:</label>
-    <input type="password" id="password" name="password" required>
-    <br>
-    <button type="submit">Iniciar Sesión</button>
-  </form>
+<video autoplay muted loop playsinline id="background-video">
+  <source src="/video.mp4" type="video/mp4" />
+  Tu navegador no soporta el video.
+</video>
+<div class="head">
+  <img src="logo.png" alt="Logo" class="logo">
+    <h2>Electro Manage</h2>
+</div>
+
+<div class="login-container">
+    <form class="login-form" (ngSubmit)="login()">
+      <label for="username">Usuario</label>
+      <input type="text" id="username" name="username" placeholder="Ingresa tu usuario" required>
+
+      <label for="password">Contraseña</label>
+      <input type="password" id="password" name="password" placeholder="Ingresa tu contraseña" required>
+
+      <button type="submit">Iniciar Sesión</button>
+    </form>
 </div>

frontend/src/app/modules/global/components/login/login.component.ts

@@ -4,14 +4,15 @@ import { AuthService } from '../../../../services/auth/auth.service';
 
 @Component({
   selector: 'app-login',
-  templateUrl: './login.component.html'
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css'] // Asegúrate de que esta ruta sea correcta
 })
 export class LoginComponent {
   username = 'user';
   password = 'password';
 
   constructor(private authService: AuthService, private router: Router) {}
-
+  
   login() {
     if (this.authService.login(this.username, this.password)) {
       this.router.navigate(['']);