utn-cli 2.1.51 → 2.1.53

package/templates/frontend/src/app/Paginas/Nucleo/preguntasFrecuentes/preguntasFrecuentes.component.html

@@ -0,0 +1,97 @@
+<div class="subtitle">
+  <p>Preguntas frecuentes</p>
+</div>
+<div class="politicas-container">
+
+  <!-- Árbol-->
+  <div class="tree-container">
+
+    <!-- Item 1 -->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item1']">
+      <div class="tree-header" (click)="toggleItem('item1')">
+        <span class="tree-icon">{{ expandedItems['item1'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">1. ¿Cómo recuperar la clave acceso en SIGU?</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item1']">
+        <p><strong>Para restablecer la contraseña de acceso, siga el siguiente procedimiento:</strong></p>
+
+        <p>1.1 Ingrese al portal de inicio de sesión de SIGU y digite su número de identificación. </p>
+
+        <p>1.2 Seleccione la opción <strong>¿Olvidó su clave de acceso?</strong>.</p>
+
+        <div class="conozcanos-image">
+          <img src="preguntasF-1.png" alt="Equipo SIGU">
+        </div>
+        <p>El sistema mostrará un mensaje de confirmación indicando: <strong>Por favor revise su correo electrónico, se
+            han enviado las instrucciones para continuar con el cambio de clave</strong>”. Haga clic en
+          <strong>continuar</strong>.
+        </p>
+        <p>1.4 Acceda a la bandeja de entrada del correo electrónico registrado en su cuenta. Allí encontrará un mensaje
+          automático con una clave nueva.</p>
+        <p>1.5 Regrese a la página de inicio de sesión de SIGU e ingrese su número de identificación junto con la clave
+          nueva proporcionada.</p>
+        <p>1.6 El sistema solicitará una verificación de identidad. Se enviará un código de verificación a su correo
+          electrónico registrado.</p>
+        <p>1.7 Copie el código recibido, péguelo en el campo indicado y haga clic en <strong>siguiente</strong>.</p>
+        <div class="conozcanos-image">
+          <img src="preguntasF-2.png" alt="Equipo SIGU">
+        </div>
+        <p>1.8 Una vez validado el código, recibirá el mensaje <strong>verificación exitosa</strong> y será redirigido
+          automáticamente al panel principal de su cuenta.</p>
+        <p><strong>Nota:</strong> Se recomienda cambiar la contraseña temporal por una nueva una vez dentro del sistema.
+        </p>
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 2-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item2']">
+      <div class="tree-header" (click)="toggleItem('item2')">
+        <span class="tree-icon">{{ expandedItems['item2'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">2. ¿Cómo cambiar mi clave en SIGU?</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item2']">
+        <p><strong>Para cambiar su clave, realice los siguientes pasos:</strong></p>
+        <P>2.1 Inicie sesión en SIGU con sus credenciales actuales.</P>
+        <p>2.2 En el panel principal, diríjase al menú superior y ubique el ícono de usuario (representado por silueta
+          de persona) en el extremo derecho.</p>
+        <div class="preguntados-image">
+          <img src="preguntasF-3.png" alt="Equipo SIGU">
+        </div>
+        <p>2.3 Haga clic en el ícono y seleccione su cuenta (el nombre de usuario asociado).</p>
+        <p>2.4 Se abrirá una nueva ventana. Dentro de este, seleccione la pestaña o tarjeta denominada <strong>cambio
+            de contraseña</strong>.</p>
+        <p>2.5 El sistema mostrará un panel con las instrucciones técnicas. Ingrese la nueva contraseña en el campo
+          correspondiente respetando los requisitos de seguridad (longitud, caracteres especiales, etc.).</p>
+        <div class="conozcanos-image">
+          <img src="preguntasF-4.png" alt="Equipo SIGU">
+        </div>
+        <p>2.6 Confirme la nueva contraseña y haga clic en <strong>cambiar</strong>.</p>
+        <p><strong>La contraseña quedará actualizada de forma inmediata para futuros inicios de sesión.</strong></p>
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 3-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item3']">
+      <div class="tree-header" (click)="toggleItem('item3')">
+        <span class="tree-icon">{{ expandedItems['item3'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">3. ¿Cómo inicio sesión con google en SIGU?</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item3']">
+        <p>3.1 Para acceder mediante <strong>login con google</strong>, el usuario debe tener una cuenta registrada
+          previamente como
+          oferente o personal administrativo bajo el dominio <strong>@utn.ac.cr</strong>. Al seleccionar la cuenta
+          institucional
+          asociada, el sistema lo redirigirá automáticamente al panel de su perfil.</p>
+
+        <div class="conozcanos-image">
+          <img src="preguntasF-5.png" alt="Equipo SIGU">
+        </div>
+      </div>
+      <div class="line"></div>
+    </div>
+
+  </div>
+
+</div>

package/templates/frontend/src/app/Paginas/Nucleo/preguntasFrecuentes/preguntasFrecuentes.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { HttpClient } from '@angular/common/http';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+@Component({
+  selector: 'app-preguntasfrecuentes',
+  standalone: true,
+  imports: [MatIconModule],
+  templateUrl: './preguntasFrecuentes.component.html',
+  styleUrl: './preguntasFrecuentes.component.css'
+})
+export class PreguntasFrecuentesComponent implements OnInit {
+  
+  private _destroy$ = new Subject<void>();
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+   ngOnInit(): void {
+      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDePreguntasFrecuentes`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+   }
+  // items expandidos
+  expandedItems: { [key: string]: boolean } = {
+    item1: false,
+    item2: false,
+    item3: false,
+    item4: false,
+    item5: false,
+    item6: false,
+  };
+  
+  toggleItem(itemId: string) {
+    this.expandedItems[itemId] = !this.expandedItems[itemId];
+  }
+  
+  
+ }

package/templates/frontend/src/app/Paginas/Nucleo/sabiasque/sabiasque.component.css

@@ -0,0 +1,229 @@
+.politicas-container {
+  max-width: 1000px;
+  padding-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.subtitle {
+  background-color: #0b4794;
+  font-size: 25px;
+  color: white;
+  padding: 18px;
+  margin: 20px 0;
+  text-align: center;
+}
+.subtitle p {
+  margin: 5px 0;
+}
+
+
+.tree-container {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;   
+  margin-top: 30px;  
+  box-sizing: border-box;   
+  max-height: none;
+}
+
+/* Estilos árboles */
+.tree-item {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  transition: background-color 0.3s ease;
+}
+
+.line {
+  height: 3px;
+   border-bottom: 1px solid #C4C4C4;
+}
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  background-color: white;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.tree-icon {
+  font-size: 14px;
+  color: #0b4794;
+  font-weight: bold;
+  width: 20px;
+}
+
+.tree-title {
+  font-weight: 500;
+  color: #4D4D4D;
+  font-size: 16px;
+}
+
+.tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  background-color: white;
+  margin-top: 5px;
+}
+
+.tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+.tree-item.expanded-item {
+  background-color: #F6F8FA;
+  border-left: 4px solid #002F6B;
+}
+
+.tree-item.expanded-item .tree-header,
+.tree-item.expanded-item .tree-header .tree-title {
+  background-color: #F6F8FA;
+  color: #002F6B;
+}
+
+.tree-item.expanded-item .tree-content.expanded {
+  background-color: #F6F8FA;
+}
+.tree-content p {
+  margin: 0;
+  line-height: 1.6;
+  color: #4D4D4D;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.tree-content ul {
+  padding-left: 20px; 
+  margin-top: 10px;  
+}
+
+.tree-content li {
+  list-style-type: disc; 
+  margin-bottom: 10px; 
+  color: #4D4D4D;  
+  font-size: 16px; 
+}
+
+.conozcanos-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.conozcanos-image img {
+  width: 100%;
+  max-width: 290px;
+  height: auto;
+  object-fit: cover;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+@media (max-width: 768px) {
+  
+  .tree-title {
+    font-size: 14px;
+  }
+  
+  .tree-content p {
+    font-size: 14px;
+  }
+
+  .tree-content li{
+     font-size: 14px;
+  }
+}
+
+/* sub items*/
+
+.sub-tree-item {
+  margin: 8px 0 8px 25px;
+  transition: all 0.3s ease;
+}
+
+.sub-tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.sub-tree-title {
+  font-weight: 500;
+  font-size: 15px;
+  color: #4D4D4D;
+}
+
+.sub-tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+}
+
+.sub-tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+
+/* Estado expandido */
+
+.sub-tree-item.expanded-sub-item {
+  background-color: #F6F8FA;
+  border: 1px solid #C4C4C4;
+}
+
+.sub-tree-item.expanded-sub-item .sub-tree-header,
+.sub-tree-item.expanded-sub-item .sub-tree-title {
+  color: #002F6B;
+  background-color: #F6F8FA;
+}
+
+.sub-tree-item.expanded-sub-item .sub-tree-content.expanded {
+  background-color: #F6F8FA;
+}
+
+.imagenes-comparacion {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap; 
+  margin-bottom: 20px;
+}
+
+.imagen-item {
+  flex: 1;
+  min-width: 250px;
+  text-align: center;
+}
+
+.imagen-item img {
+  width: 100%;
+  max-width: 420px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.video-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.video-container video {
+  width: 100%;
+  max-width: 700px;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}