Juan.Lazaro
/
SIU_Dran_net
1
0
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

Compare commits

base: Juan.Lazaro:8e98e5eb1bec90888e609f57c24aa19dd700c639
Branches Tags
Juan.Lazaro:main
..
compare: Juan.Lazaro:48e69d3c4957e0bdf3d622c1408a569a14d5a80c
Branches Tags
Juan.Lazaro:main

No commits in common. "8e98e5eb1bec90888e609f57c24aa19dd700c639" and "48e69d3c4957e0bdf3d622c1408a569a14d5a80c" have entirely different histories.
8e98e5eb1b ... 48e69d3c49

11 changed files with 114 additions and 301 deletions
Show Stats Expand all files Collapse all files

4
frontend/index.html
View File

@ -4,11 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<<<<<<< HEAD
<title>Registro</title>
=======
<title>SIU_Dran_net</title>
>>>>>>> 48e69d3c4957e0bdf3d622c1408a569a14d5a80c
</head>
<body>

42
frontend/src/App.css Normal file
View File

@ -0,0 +1,42 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

43
frontend/src/Encabezado.css
View File

@ -1,43 +0,0 @@
.contenedor {
max-height: none;
width: 100%;
}
.banner {
background-color: #333;
color: white;
padding: 2px;
}
.banner h1 {
font-size: 35px;
margin-left: 2%;
pointer-events: none; /* Evita que el cursor se posicione sobre el título */
}
.banner nav {
display: flex;
justify-content: space-between; /* Alinea los elementos al principio y al final */
align-items: center; /* Alinea verticalmente los elementos */
}
.opciones {
list-style: none;
padding: 0;
margin: 0;
}
.opciones li {
display: inline-block;
margin-left: 10px; /* Espacio entre elementos */
margin-right: 30px; /* Espacio entre elementos */
}
.opciones li a {
color: white;
text-decoration: none; /* Quita el punto de los enlaces */
}
.opciones li a:hover {
text-decoration: underline; /* Subraya los enlaces al pasar el mouse sobre ellos */
}

24
frontend/src/Encabezado.jsx
View File

@ -1,24 +0,0 @@
import React from "react";
import './Encabezado.css';
const Encabezado = () => {
return (
<div className="contenedor">
<div className="banner">
<nav>
<h1>Universidad de Huacoxla</h1>
<ul className='opciones'>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Oferta Educativa</a></li>
<li><a href="#">Visión</a></li>
<li><a href="#">Misión</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Instalaciones</a></li>
</ul>
</nav>
</div>
</div>
);
}
export default Encabezado;

14
frontend/src/General.jsx
View File

@ -1,14 +0,0 @@
import React from 'react';
import Encabezado from './Encabezado';
import Registro from './Registro';
function General() {
return (
<div>
<Encabezado />
<Registro />
</div>
);
}
export default General;

89
frontend/src/Registro.css
View File

@ -1,89 +0,0 @@
.formulario {
background-color: #e4e4df;
max-width: 100%;
margin: 0 auto;
padding: 1%;
}
.formulario h2 {
text-align: center;
font-size: 40px;
font-style: Jockey One;
color: #000000;
padding: 10px;
}
.formulario h4{
font-size: 20px;
font-style: Jockey One;
color: #000000;
padding: 10px;
}
.form {
margin-top: 20px; /* Espacio entre el h5 y el formulario */
padding: 10px;
display: flex;
flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben en una sola línea */
}
.form {
margin-top: 20px; /* Espacio entre el h5 y el formulario */
padding: 10px;
display: flex;
flex-wrap: wrap; /* Permitir que los elementos se envuelvan en filas */
justify-content: space-between; /* Distribuir los elementos en tres columnas */
}
.campo {
width: calc(33.33% - 10px); /* Ancho de cada campo (menos el espacio entre ellos) */
margin-bottom: 20px; /* Espacio entre campos */
display: flex;
flex-direction: column; /* Cambiar la dirección del flujo a vertical */
overflow: hidden; /* Oculta cualquier contenido que se desborde del área del input */
}
.campo label {
padding: 2%;
font-weight: bold;
}
.campo input[type="text"],
.campo input[type="number"],
.campo select,
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="email"] {
width: 100%; /* Ocupar todo el ancho disponible */
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 16px;
transition: border-color 0.3s ease;
margin-top: 5px; /* Espacio entre el label y el input */
}
.btnenviar{
text-align: center; /* Centra horizontalmente el contenido */
}
.boton {
text-align: center;
background-color: #007bff;
color: white;
border: none;
padding: 15px 30px;
cursor: pointer;
border-radius: 5px;
font-weight: bold; /* Hace que el texto esté en negrita */
}
.boton:hover {
background-color: #0056b3;
}

118
frontend/src/Registro.jsx
View File

@ -1,118 +0,0 @@
import React from 'react';
import './Registro.css'; // Estilo para el formulario
const Registro = () => {
return (
<div className="formulario">
<h2>Registro</h2>
<div><h4>Datos Personales</h4></div>
<form className='form'>
<div className="campo">
<label htmlFor="nombre">Nombre:</label>
<input type="text" id="nombre" name='nombre'/>
</div>
<div className="campo">
<label htmlFor="apellidoPaterno">Apellido Paterno:</label>
<input type="text" id="apellidoPaterno" name='apellidoPaterno'/>
</div>
<div className="campo">
<label htmlFor="apellidoMaterno">Apellido Materno:</label>
<input type="text" id="apellidoMaterno" name="apellidoMaterno" />
</div>
<div className="campo">
<label htmlFor="sexo">Sexo:</label>
<select id="sexo" name="sexo">
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</select>
</div>
<div className="campo">
<label htmlFor="nacimiento">Fecha Nacimiento:</label>
<input type="date" id="nacimiento" name="nacimiento"/>
</div>
<div className="campo">
<label htmlFor="nacionalidad">Nacionalidad:</label>
<input type="text" id="nacionalidad" name="nacionalidad"/>
</div>
<div className="campo">
<label htmlFor="ciudad">Ciudad:</label>
<input type="text" id="ciudad" name="ciudad"/>
</div>
<div className="campo">
<label htmlFor="direccion">Dirección:</label>
<input type="text" id="direccion" name="direccion"/>
</div>
<div className="campo">
<label htmlFor="codigoPostal">Código Postal:</label>
<input type="text" id="codigoPostal" name="codigoPostal"/>
</div>
<div className="campo">
<label htmlFor="telefono">Teléfono:</label>
<input type="text" id="telefono" name="telefono"/>
</div>
<div className="campo">
<label htmlFor="telefonoCasa">Teléfono Casa:</label>
<input type="text" id="telefonoCasa" name="telefonoCasa"/>
</div>
<div className="campo">
<label htmlFor="correo">Correo:</label>
<input type="email" id="correo" name="correo"/>
</div>
<div className="campo">
<label htmlFor="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena"/>
</div>
</form>
<div>
<h4>Datos de Tutor</h4>
<form className='form'>
<div className="campo">
<label htmlFor="nombre">Nombre:</label>
<input type="text" id="nombre" name='nombre'/>
</div>
<div className="campo">
<label htmlFor="apellidoPaterno">Apellido Paterno:</label>
<input type="text" id="apellidoPaterno" name='apellidoPaterno'/>
</div>
<div className="campo">
<label htmlFor="apellidoMaterno">Apellido Materno:</label>
<input type="text" id="apellidoMaterno" name="apellidoMaterno" />
</div>
<div className="campo">
<label htmlFor="sexo">Sexo:</label>
<select id="sexo" name="sexo">
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</select>
</div>
<div className="campo">
<label htmlFor="parentesco">Parentesco:</label>
<input type="text" id="parentesco" name="parentesco"/>
</div>
<div className="campo">
<label htmlFor="Numero Celular">Numero Celular:</label>
<input type="text" id="Numero Celular" name="Numero Celular"/>
</div>
<div className="campo">
<label htmlFor="Numero Casa">Numero Casa:</label>
<input type="text" id="Numero Casa" name="Numero Casa"/>
</div>
<div className="campo">
<label htmlFor="edad">Edad:</label>
<input type="text" id="edad" name="edad"/>
</div>
<div className="campo">
<label htmlFor="direccion">Dirección:</label>
<input type="text" id="direccion" name="direccion"/>
</div>
</form>
</div>
<div className="btnenviar">
<input type="submit" className="boton" value="Registrar" />
</div>
</div>
);
}
export default Registro;

BIN
frontend/src/assets/student.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 594 KiB

68
frontend/src/index.css Normal file
View File

@ -0,0 +1,68 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

7
frontend/src/main.jsx
View File

@ -1,11 +1,12 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import General from './General.jsx'
import './Registro.css'
import App from './App.jsx'
import './index.css'
import Login from './login.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<General/>
<Login />
</React.StrictMode>,
)

6
package-lock.json generated
View File

@ -1,6 +0,0 @@
{
"name": "SIU_Dran_net",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}