fixed text of image and image

.env

@@ -1,2 +1,2 @@
 REACT_APP_API_URL=https://venus.acatlan.unam.mx/directorio_test
-REACT_APP_PORT=3001
+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/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,7 +1,7 @@
 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 (

src/components/Teacher/CrearProfesor/FormProfesor.js

@@ -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>

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]);
 
@@ -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>

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;
 }