diff --git a/public/file.svg b/public/file.svg new file mode 100644 index 0000000..004145c --- /dev/null +++ b/public/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg new file mode 100644 index 0000000..567f17b --- /dev/null +++ b/public/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/next.svg b/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg new file mode 100644 index 0000000..7705396 --- /dev/null +++ b/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/Editar/editar.css b/src/app/Editar/editar.css new file mode 100644 index 0000000..da41a86 --- /dev/null +++ b/src/app/Editar/editar.css @@ -0,0 +1,126 @@ + + +/* ====== FORMULARIO ====== */ +.editar { + max-width: 1000px; + display: flex; + gap: 20px; + margin: 40px auto; + flex-wrap: wrap; + justify-content: center; +} + +.columna { + display: flex; + flex-direction: column; + gap: 10px; +} + +label { + font-weight: bold; +} + +input { + padding: 6px 8px; + border: 1px solid #ccc; + border-radius: 5px; + outline: none; +} + +input:focus { + border-color: #003366; + box-shadow: 0 0 4px rgba(0, 51, 102, 0.3); +} + + +/* Botón cerrar sesión */ +.boton-cerrar { + background-color: #e60000; + color: white; + border: none; + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.3s; + margin-top: 10px; +} + +.boton-cerrar:hover { + background-color: #cc0000; +} + +.titulo-editar { + position: absolute; + top: 50%; + left: 50%; /* centra horizontalmente */ + transform: translate(-50%, -50%); /* centra vertical y horizontalmente */ + + display: flex; + justify-content: space-between; + align-items: center; + width: 35%; /* ajusta el ancho del bloque de texto */ + font-size: 18px; + font-weight: bold; + color: #003366; + z-index: 5; +} + +.titulo-editar span { + flex: 1; + text-align: center; + cursor: pointer; + transition: color 0.3s, text-decoration 0.3s; +} + +/* Cambia de color al pasar el mouse */ +.titulo-editar span:hover { + color: #b8870b; +} + +.recuadro{ + box-shadow: 0 0 7px 0px black; + border-radius: 10px; /* Bordes redondeados */ + padding: 10px; /* Espacio interno */ + margin: 85px 350px; /* Separación del resto del contenido */ + background-color: #f9f9f9; /* Color de fondo */ +} + +.titulo-rec { + font-size: 20px; + font-weight: bold; + margin-left: 0; /* alinea el texto con el resto de la columna */ + text-align: left; /* asegura que esté alineado a la izquierda */ + margin-bottom: 8px; /* un poco de espacio debajo del título */ +} +.linea{ + border-bottom: 2px solid #003366; /* color y grosor de la línea */ + width: 100%; /* ocupa toda la columna */ + margin-bottom: 10px; /* espacio entre línea y los campos */ +} + +.botones { + display: flex; + justify-content: flex-end; /* Alinea los botones a la derecha */ + gap: 10px; /* Espacio entre ellos */ + margin-top: 15px; /* Separación del formulario */ +} +.guardar{ + background-color: #b8870b; + color: #003366; + border: none; + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + +} +.cancelar{ + background-color: #003366; + color: white; + border: none; + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + font-size: 14px; +} \ No newline at end of file diff --git a/src/app/Editar/page.tsx b/src/app/Editar/page.tsx index b672051..0e25a39 100644 --- a/src/app/Editar/page.tsx +++ b/src/app/Editar/page.tsx @@ -1,37 +1,68 @@ -import "../styles/layout/editar.scss"; -export default function Page() { +import './editar.css'; +export default function Home() { return ( -