merge

.env

@@ -1,2 +1 @@
 REACT_APP_API_URL=https://venus.acatlan.unam.mx/directorio_test
-REACT_APP_PORT=3001

src/App.css

@@ -31,7 +31,7 @@
 
 .edit-button,
 .delete-boton {
-  padding: 8px 12px;
+  padding: 4px 12px;
   margin-right: 10px;
   border: none;
   cursor: pointer;
@@ -352,7 +352,7 @@ button[type="submit"]:disabled {
 }
 
 .delete-botones {
-  background-image: url("https://cdn.icon-icons.com/icons2/1791/PNG/512/trashcan1_114647.png");
+  background-image: url("./assets/img/trashcan.png");
   filter: invert(1);
   background-color: aqua;
   position: absolute;

src/components/Card/Card.css

@@ -17,7 +17,7 @@
 .transition{
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 }
 
 .transition.show {

src/components/Card/CardProfesores/Filter/FilterProfesor.js

@@ -54,7 +54,7 @@ function FilterProfesor() {
               onChange={(e) => setAdscripcion(e.target.value)}
               className="form-control me-2"
             >
-              <option value="">Adscripcion</option>
+              <option value="">Adscripción</option>
               {adscripciones.map((adscripcion) => (
                 <option
                   key={adscripcion.id_adscripcion}
@@ -71,7 +71,7 @@ function FilterProfesor() {
               onChange={(e) => setCategoria(e.target.value)}
               className="form-control me-2"
             >
-              <option value="">Categoria</option>
+              <option value="">Categoría</option>
               {categorias.map((categoria) => (
                 <option
                   key={categoria.id_categoria}

src/components/Card/CardUsuarios/MapeoUsuario.js

@@ -18,14 +18,13 @@ const MapeoUsuario = ({ filters }) => {
         setMaxPagesToShow(10);
       }
     };
-  
+
     window.addEventListener("resize", updateMaxPagesToShow);
-  
+
     updateMaxPagesToShow();
-  
+
     return () => window.removeEventListener("resize", updateMaxPagesToShow);
   }, []);
-  
 
   if (totalPages === 0) {
     return (
@@ -100,9 +99,13 @@ const MapeoUsuario = ({ filters }) => {
         </button>
       </div>
 
-      {usuarios.map((usuario) => (
-        <CardUsuario key={usuario.id_usuario} usuario={usuario} />
-      ))}
+      <div className="profesores-container">
+        {usuarios.map((usuario) => (
+          <div className="transition show">
+            <CardUsuario key={usuario.id_usuario} usuario={usuario} />
+          </div>
+        ))}
+      </div>
 
       <nav aria-label="Navegación de páginas">
         <ul className="pagination justify-content-center">

src/components/Footer.js

@@ -1,18 +1,108 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./style.css";
+import Sam from "../assets/img/Sam.png";
+import IO from "../assets/img/IO.png";
+
+const konamiCode = [
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+];
+
+let codePosition = 0;
 
 const Footer = () => {
+  const [showImage, setShowImage] = useState(false);
+
+  useEffect(() => {
+    const handleCodeInput = (key) => {
+      if (key === konamiCode[codePosition]) {
+        codePosition++;
+        if (codePosition === konamiCode.length) {
+          activateSecretScreen();
+          codePosition = 0;
+        }
+      } else {
+        codePosition = 0;
+      }
+    };
+
+    const handleKeyDown = (e) => handleCodeInput(e.key);
+    document.addEventListener("keydown", handleKeyDown);
+
+    let touchSequence = [];
+    let startX = 0;
+    let startY = 0;
+
+    const handleTouchStart = (e) => {
+      startX = e.touches[0].clientX;
+      startY = e.touches[0].clientY;
+    };
+
+    const handleTouchEnd = (e) => {
+      let endX = e.changedTouches[0].clientX;
+      let endY = e.changedTouches[0].clientY;
+      handleSwipe(startX, startY, endX, endY);
+    };
+
+    const handleSwipe = (startX, startY, endX, endY) => {
+      const deltaX = endX - startX;
+      const deltaY = endY - startY;
+
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        if (deltaX > 30) touchSequence.push("ArrowRight");
+        else if (deltaX < -30) touchSequence.push("ArrowLeft");
+      } else {
+        if (deltaY > 30) touchSequence.push("ArrowDown");
+        else if (deltaY < -30) touchSequence.push("ArrowUp");
+      }
+
+      if (
+        touchSequence.slice(-konamiCode.length).join("") === konamiCode.join("")
+      ) {
+        activateSecretScreen();
+        touchSequence = [];
+      } else if (touchSequence.length > konamiCode.length) {
+        touchSequence.shift();
+      }
+    };
+
+    document.addEventListener("touchstart", handleTouchStart);
+    document.addEventListener("touchend", handleTouchEnd);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("touchstart", handleTouchStart);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, []);
+
+  const activateSecretScreen = () => {
+    setShowImage(true);
+  };
+
   return (
-    <footer className="footer">
-      <div className="container">
-        <p>
-          Hecho en México. Todos los derechos reservados 2024. Esta página puede
-          ser reproducida con fines no lucrativos, siempre y cuando no se
-          mutile, se cite la fuente completa y su dirección electrónica. De otra
-          forma, requiere permiso previo por escrito de la institución.
-        </p>
-      </div>
-    </footer>
+    <>
+      {showImage && (
+        <div className="center">
+          <img className={`img S ${showImage ? 'show' : ''}`} src={Sam} alt="Sam" />
+          <img className={`img I ${showImage ? 'show' : ''}`} src={IO} alt="IO" />
+        </div>
+      )}
+      <footer className=" frow footer">
+        <div className="container">
+          <p>
+            Hecho en México. Todos los derechos reservados 2024. Esta página
+            puede ser reproducida con fines no lucrativos, siempre y cuando no
+            se mutile, se cite la fuente completa y su dirección electrónica. De
+            otra forma, requiere permiso previo por escrito de la institución.
+          </p>
+        </div>
+      </footer>
+    </>
   );
 };
 

src/components/Header.js

@@ -1,17 +1,17 @@
 import React from "react";
 import "./style.css";
-import logo1 from "../assets/img/escudo-b2.png"; // Ajusta la ruta si es necesario
-import logo2 from "../assets/img/logo_unam-b.png"; // Ajusta la ruta si es necesario
+import logo1 from "../assets/img/escudo-b2.png";
+import logo2 from "../assets/img/logo_unam-b.png";
 
 const Header = () => {
   return (
     <header className="header">
       <a href="https://www.unam.mx/">
-        <img className="logo" alt="Logo 1" src={logo1} />
+        <img className="logo" alt="Logo 1" src={logo2} />
       </a>
       
       <a href="https://www.acatlan.unam.mx/">
-        <img className="logo" alt="Logo 2" src={logo2} />
+        <img className="logo" alt="Logo 2" src={logo1} />
       </a>
     </header>
   );

src/components/Teacher/CrearProfesor/FormProfesor.js

@@ -114,17 +114,17 @@ const FormProfesor = () => {
     }
 
     if (!id_categoria) {
-      alert("Por favor, Coloque la categoria en Datos de Investigación.");
+      alert("Por favor, Coloque la categoría en Datos académicos.");
       return false;
     }
 
     if (!id_adscripcion) {
-      alert("Por favor, Coloque la adscripcion en Datos de Investigación.");
+      alert("Por favor, Coloque la adscripción en Datos académicos.");
       return false;
     }
 
     if (!id_edificio) {
-      alert("Por favor, Coloque el edificio en Datos de Investigación.");
+      alert("Por favor, Coloque el edificio en Datos académicos.");
       return false;
     }
 
@@ -408,7 +408,7 @@ const FormProfesor = () => {
 
         {page === 3 && (
           <div className="form-section">
-            <h2>Datos de Investigación</h2>
+            <h2>Datos Académicos</h2>
             <div className="form-group">
               <label>
                 Categoría <span className="required">*</span>
@@ -485,6 +485,7 @@ const FormProfesor = () => {
                   <p>
                     Arrastra y suelta la imagen aquí, o haz clic para
                     seleccionar una imagen
+                    Peso maximo de la imagen 2MB
                   </p>
                 )}
               </div>
@@ -535,19 +536,19 @@ const FormProfesor = () => {
               className="boton"
               onClick={addGrados_obtenidos}
             >
-              Agregar Grados de investigacion
+              Agregar Grados 
             </button>
           </div>
         )}
 
         {page === 5 && (
           <div className="form-section">
-            <h2>Lineas de Investigacion</h2>
+            <h2>Líneas de Investigación</h2>
             <div className="form-group">
               {lineasInvestigacion.map((linea, index) => (
                 <div key={index} className="input-with-delete">
                   <label>
-                    Linea de Investigacion {index + 1}
+                    Línea de Investigación {index + 1}
                     <span className="required">*</span>
                   </label>
                   <input

src/components/Teacher/ModificarProfesor/FormEditProfesor.js

@@ -13,6 +13,8 @@ import {
   useUpdateTeacher,
 } from "../../../services/teacher.services";
 
+const API_URL = process.env.REACT_APP_API_URL;
+
 const FormEditProfesor = () => {
   const { id_profesor } = useParams();
   const [profesor, setProfesor] = useState(null);
@@ -74,7 +76,11 @@ const FormEditProfesor = () => {
       setCorreo_per(teacher.correo_per);
       setUbicacion(teacher.ubicacion);
       setGrado_maximo(teacher.datosAcademicos[0]?.grado_maximo || "");
-      setOldFoto(teacher.fotografia);
+      if(teacher.fotografia.startsWith("http")){
+        setOldFoto(teacher.fotografia);
+      }else{
+        setOldFoto(`${API_URL}/imagenes/${teacher.fotografia}`);
+      }
     }
   }, [teacher]);
 
@@ -393,7 +399,7 @@ const FormEditProfesor = () => {
 
         {page === 3 && (
           <div className="form-section">
-            <h2>Datos de Investigación</h2>
+            <h2>Datos académicos</h2>
             <div className="form-group">
               <label>
                 Categoría <span className="required">*</span>
@@ -471,6 +477,7 @@ const FormEditProfesor = () => {
                   <p>
                     Arrastra y suelta la imagen aquí, o haz clic para
                     seleccionar una imagen
+                    Peso maximo de la imagen 2MB
                   </p>
                 )}
               </div>
@@ -534,19 +541,19 @@ const FormEditProfesor = () => {
               className="boton"
               onClick={addGrados_obtenidos}
             >
-              Agregar Grados de investigacion
+              Agregar Grados
             </button>
           </div>
         )}
 
         {page === 5 && (
           <div className="form-section">
-            <h2>Lineas de Investigacion</h2>
+            <h2>Líneas de Investigación</h2>
             <div className="form-group">
               {lineasInvestigacion.map((linea, index) => (
                 <div key={index} className="input-with-delete">
                   <label>
-                    Lineas de Investigacion {index + 1}
+                    Líneas de Investigación {index + 1}
                     <span className="required">*</span>
                   </label>
                   <input

src/components/style.css

@@ -28,4 +28,29 @@
 .footer .container {
   max-width: 90%;
   margin: 0 auto;
+}
+
+.center{
+  display: flex;
+  justify-content: center;
+}
+
+.img {
+  max-width: 100px;
+  height: auto;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0;
+  filter: drop-shadow(0 0 8px black);
+  transition: transform 1s ease-in-out, opacity 1s ease-in;
+}
+
+.S.show {
+  transform: translateY(24px);
+  opacity: 1;
+}
+
+.I.show {
+  transform: translateY(15px);
+  opacity: 1;
 }