This commit is contained in:
citlallixx03 2024-04-29 08:50:03 -06:00
parent 1e7b8ec73a
commit 48e69d3c49
6 changed files with 105 additions and 4 deletions

View File

@ -4,10 +4,15 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>SIU_Dran_net</title>
</head> </head>
<body> <body>
<div id="root"></div>
<div id="root">
</div>
<DIV></DIV>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>
</html> </html>

View File

@ -2,9 +2,12 @@ import { useState } from 'react'
import reactLogo from './assets/react.svg' import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg' import viteLogo from '/vite.svg'
import './App.css' import './App.css'
import './login.css'
function App() { function App() {
const [count, setCount] = useState(0) //const [count, setCount] = useState(0)
const [usuario, setUsuario]= useState("")
const [password, setPassword]= useState("")
return ( return (
<> <>
@ -28,8 +31,12 @@ function App() {
<p className="read-the-docs"> <p className="read-the-docs">
Click on the Vite and React logos to learn more Click on the Vite and React logos to learn more
</p> </p>
</> </>
) )
} }
export default App export default App

View File

52
frontend/src/login.css Normal file
View File

@ -0,0 +1,52 @@
* {
background-color: #444941;
padding: 0;
margin: 10;
box-sizing: border-box;
font-family:Arial, Helvetica, sans-serif;
}
.Formulario {
font-size: 20px;
width:400px;
height: 315px;
padding: 25px;
border-radius: 5%;
}
input[type="text"], input[type="password"]{
background:#D5EEBB;
/* align-items: center; */
border-radius: 5px;
display: block;
height: 30px;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
}
h1{
color: #D5EEBB;
font-family: Jockey One;
}
#button{
background-color: #D5EEBB;
margin-top: 20px;
stroke: none;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
padding-top: 100px;
padding: 5px;
}
label{
color: #D5EEBBAA;
font-family: JejuMyeongjo;
font-size: 20px;
font-weight: 400;
text-align: left;
}
.footer{
color: aliceblue;
}

34
frontend/src/login.jsx Normal file
View File

@ -0,0 +1,34 @@
import { useState } from 'react'
import './login.css'
function Login() {
return (
<>
<header>La universidad que esta para ti, ¡UNETE!</header>
<div>
<h1>Bienvenido</h1>
<form className='Formulario'>
<label id='usuario'>Usuario:</label>
<input type='text' id='usuario'/>
<label>Contraseña:</label>
<input type="password" id='password'/>
<button id='button'>Iniciar sesion</button>
</form>
</div>
<footer>
<nav>
<ul className='footer'>
<li>uniregistro@outlook.com</li>
<li>uniBandeVer 4582349234</li>
</ul>
</nav>
</footer>
</>
);
}
export default Login

View File

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