lovin v1

Cambios visuales en el login

angular.json

@@ -99,5 +99,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package-lock.json

@@ -15,6 +15,7 @@
         "@angular/platform-browser": "^19.2.0",
         "@angular/platform-browser-dynamic": "^19.2.0",
         "@angular/router": "^19.2.0",
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "@primeng/themes": "^19.1.0",
         "animate.css": "^4.1.1",
         "primeflex": "^4.0.0",
@@ -2824,6 +2825,14 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.1.5.tgz",

package.json

@@ -17,6 +17,7 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@primeng/themes": "^19.1.0",
     "animate.css": "^4.1.1",
     "primeflex": "^4.0.0",

src/app/pages/login/login.component.html

@@ -1,7 +1,8 @@
 <!-- Header container -->
-<div class="header">
+<!-- <div class="header">
     <div class="header-content">
-      <img src="assets/img/siss-logo.png" alt="SISS Logo" class="siss-logo">
+      <img src="img/header2.jpg" alt="SISS Logo" class="siss-logo">
+      <img src="img/gota.png" alt="gota" class="water-drop">
       <div class="sacg-container">
         <div class="sacg-title">
           <span>SACG</span>
@@ -10,7 +11,34 @@
         <div class="sacg-subtitle">Sistema Administrador de Cronogramas</div>
       </div>
     </div>
+  </div> -->
+
+  <!-- <div class="header-container">
+    <div class="header-image" style="background-image: url('img/header2.jpg'); height: 190px;" >
+      <div  class="text-drop text-center" style="background-image: url('img/gota.png'); height: 60px;width: 41px;">1.0</div>
+      <div class="sacg-container">
+        <div class="sacg-title">
+          <span>SACG</span>
+          <div class="version-badge">1.0</div>
         </div>
+        <div class="sacg-subtitle">Sistema Administrador de Cronogramas</div>
+      </div>
+    </div>
+  </div> -->
+
+  <div class="header-container">
+    <div class="header-image" style="background-image: url('img/header2.jpg'); height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;">
+      
+      <div class="text-drop" style="background-image: url('img/gota.png'); height: 60px; width: 41px; display: flex; align-items: center; justify-content: center; color: white; top: 33%;left: 47.7%;">1.0</div>
+      
+      <div class="sacg-container" style="text-align: center;z-index: 2;">
+        <div class="main-title">SACG</div>
+        <div class="sub-title">Sistema Administrador de Cronogramas</div>
+      </div>
+  
+    </div>
+  </div>
+  
 
   <!-- MAIN CONTENT -->
   <main class="main-content">
@@ -22,6 +50,55 @@
         </div>
 
         <form (ngSubmit)="onLogin()">
+          
+          <!-- Email -->
+          <div class="p-input-icon-left mb-3">
+            <!-- <i class="pi pi-envelope"></i> -->
+            <input 
+              type="email" 
+              pInputText 
+              [(ngModel)]="email" 
+              name="email" 
+              placeholder="Email" 
+              class="w-full"
+              style="background-color: white;color: black"
+            />
+            <span class="icon" style="background-color: white;color: black"><i class="fas fa-search" style="color: black"></i></span>
+            <!-- <span class="p-inputgroup-addon bg-red-600 text-900">&#64;</span>
+            <span class="p-inputgroup-addon">
+              <i class="pi pi-envelope"></i>
+            </span> -->
+            
+          </div>
+
+          <!-- Password -->
+          <div class="p-input-icon-left mb-4">
+            <i class="pi pi-lock"></i>
+            <input 
+              type="password" 
+              pInputText 
+              [(ngModel)]="password" 
+              name="password" 
+              placeholder="Password" 
+              class="w-full "
+              style="background-color: white;color: black"
+            />
+          </div>
+
+          <!-- Botón -->
+          <div class="login-actions">
+            <button 
+              pButton 
+              type="submit" 
+              label="Autenticar" 
+              class="p-button-primary w-full"
+              style="color: white">
+            </button>
+          </div>
+          
+        </form>
+
+        <!-- <form (ngSubmit)="onLogin()">
           <div class="p-inputgroup mb-3">
             <input type="email" pInputText [(ngModel)]="email" name="email" placeholder="Email" class="w-full">
             <span class="p-inputgroup-addon bg-red-600 text-white">&#64;</span>
@@ -40,16 +117,19 @@
           <div class="login-actions">
             <button pButton type="submit" label="Autenticar" class="p-button-primary"></button>
           </div>
-          </form>
+        </form> -->
 
+        <!-- Recuperar contraseña -->
         <div class="password-recovery">
           <a href="#">Recuperar Contraseña</a>
         </div>
+
       </div>
     </div>
   </div>
 </main>
 
+  
   <!-- FOOTER -->
   <footer class="footer">
     <div class="footer-content">

src/app/pages/login/login.component.scss

@@ -198,3 +198,73 @@
       align-items: center;
     }
   }
+
+  .login-page-custom {
+    -ms-flex-align: center !important; 
+    align-items: center !important;
+    background-color: #e9ecef !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+    -ms-flex-direction: column !important;
+    flex-direction: column !important;
+    height: calc(100vh - 250px) !important;
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+  }
+  
+  .header-container {
+      position: relative;
+      width: 100%;
+      height: 190px; /* Ajusta según la altura de tu imagen */
+      overflow: hidden;
+    }
+    
+    .water-drop {
+      position: absolute;
+      height: 45px; /* Ajusta el tamaño de la gota */
+      width: auto;
+      top: 30%; /* Posiciona verticalmente */
+      left: 47%; /* Posiciona horizontalmente */
+      transform: translateY(-50%); /* Centrado vertical preciso */
+      z-index: 2; /* Asegura que esté sobre la imagen de fondo */
+    }
+    .text-drop {
+      color: #fff;
+      position: absolute;
+      width: auto;
+      top: 33%; /* Posiciona verticalmente */
+      left: 47.3%; /* Posiciona horizontalmente */
+      transform: translateY(-50%); /* Centrado vertical preciso */
+      z-index: 2; /* Asegura que esté sobre la imagen de fondo */
+    }
+    .header-text {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #002147; /* Ajusta el color según tu imagen */
+      text-align: center;
+      padding: 0px;
+      box-sizing: border-box;
+    }
+    
+    .main-title {
+      margin-top: 0px;
+      margin-right: 250px;
+      font-size: 4rem;
+      font-weight: bold;
+      margin-bottom: 10px;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    }
+    
+    .sub-title {
+      font-size: 1.5rem;
+      margin-bottom: 6    0px;
+      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+    }
+