natalia.cancino
/
FrontPastel
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Commit correcciones login

This commit is contained in:
NataliaCancinoV 2024-05-06 16:53:21 -06:00
parent ecb7e14a63
commit 65c5583acc
5 changed files with 114 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/App.css
View File

@ -1,42 +0,0 @@
#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;
}

13
frontend/src/App.jsx
View File

@ -1,13 +0,0 @@
import './App.css'
import LoginForm from './LoginForm'
function App() {
return (
<>
<div className="App">
</div>
</>
)
}
export default App

35
frontend/src/LoginForm.css
View File

@ -1,26 +1,27 @@
/* POPPINS FONT */ /* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{ .body-login{
background: url("fondo_pasteles.jpg");
background-size: 100%;
background-repeat: no-repeat;
overflow: hidden;
background-attachment: fixed;
display: flex;
height: 100%;
position: relative;
justify-content: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: url("fondo_pasteles.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
} }
.wrapper{ .wrapper{
display: flex; display: flex;
justify-content: center; width: 40%;
height: 100vh;
padding-left: 4px;
align-items: center; align-items: center;
min-height: 80vh; justify-content: center;
border-radius: 4%;
background: rgba(39, 39, 39, 0.5);
} }
.link:hover, .active{ .link:hover, .active{
@ -45,9 +46,11 @@ body{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 512px; width: 512px;
height: 420px; height: 500px;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
border-radius: 4%;
background: rgba(39, 39, 39, 0.5);
} }
.login-container{ .login-container{
position: absolute; position: absolute;
@ -105,7 +108,7 @@ body{
color: #fff; color: #fff;
margin-left: 5px; margin-left: 5px;
} }
header{ .header-login{
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;

172
frontend/src/LoginForm.jsx
View File

@ -1,6 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import './LoginForm.css'; import './LoginForm.css';
import './App.css'
function LoginForm() { function LoginForm() {
const [loginVisible, setLoginVisible] = useState(true); const [loginVisible, setLoginVisible] = useState(true);
@ -25,103 +24,104 @@ function LoginForm() {
setRegisterVisible(false); setRegisterVisible(false);
}; };
return ( return (
<> <>
<div className="wrapper"> <body className='body-login'>
<div className="form-box"> <div className="wrapper">
<div className="form-box">
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}> <div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
<form> <form>
<div className="top"> <div className="top">
<span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span> <span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
<header>Inicia Sesión</header> <header className='header-login'>Inicia Sesión</header>
</div>
<div className="input-box">
<input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-user"></i>
</div>
<div className="input-box">
<input type="password" className="input-field" placeholder="Contraseña" />
<i className="bx bx-lock-alt"></i>
</div>
<div className="input-box">
{/*<input type="submit" className="submit" value="Entrar" />*/}
<button type="button" className="submit">Entrar</button>
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="login-check" />
<label htmlFor="login-check"> Recuerdame</label>
</div> </div>
<div className="two">
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
</div>
</div>
</form>
</div>
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
<form>
<div className="top">
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
<header>Registrarse</header>
</div>
<div className="two-forms">
<div className="input-box"> <div className="input-box">
<input type="text" className="input-field" placeholder="Nombre" /> <input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-user"></i> <i className="bx bx-user"></i>
</div> </div>
<div className="input-box"> <div className="input-box">
<input type="text" className="input-field" placeholder="Apellido" /> <input type="password" className="input-field" placeholder="Contraseña" />
<i className="bx bx-user"></i> <i className="bx bx-lock-alt"></i>
</div> </div>
</div> <div className="input-box">
<div className="input-box"> {/*<input type="submit" className="submit" value="Entrar" />*/}
<input type="text" className="input-field" placeholder="Correo" /> <button type="button" className="submit">Entrar</button>
<i className="bx bx-envelope"></i>
</div>
<div className="input-box">
<input type="password" className="input-field" placeholder="Contraseña" />
<i className="bx bx-lock-alt"></i>
</div>
<div className="input-box">
{/*<input type="submit" className="submit" value="Registrarse"/>*/}
<button type="button" className="submit">Registrarse</button>
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="register-check" />
<label htmlFor="register-check"> Recuerdame</label>
</div> </div>
</div> <div className="two-col">
</form> <div className="one">
</div> <input type="checkbox" id="login-check" />
<label htmlFor="login-check"> Recuerdame</label>
</div>
<div className="two">
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
</div>
</div>
</form>
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}> </div>
<form>
<div className="top2">
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
<header>Recuperar Contraseña</header>
</div>
<div className="input-box">
<input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-envelope"></i>
</div>
<div className="input-box">
<input type="password" className="input-field" placeholder="Nueva contraseña" />
<i className="bx bx-lock-alt"></i>
</div>
<div className="input-box">
{/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
<button type="button" className="submit">Cambiar contraseña</button>
</div>
</form>
</div>
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
<form>
<div className="top">
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
<header className='header-login'>Registrarse</header>
</div>
<div className="two-forms">
<div className="input-box">
<input type="text" className="input-field" placeholder="Nombre" />
<i className="bx bx-user"></i>
</div>
<div className="input-box">
<input type="text" className="input-field" placeholder="Apellido" />
<i className="bx bx-user"></i>
</div>
</div>
<div className="input-box">
<input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-envelope"></i>
</div>
<div className="input-box">
<input type="password" className="input-field" placeholder="Contraseña" />
<i className="bx bx-lock-alt"></i>
</div>
<div className="input-box">
{/*<input type="submit" className="submit" value="Registrarse"/>*/}
<button type="button" className="submit">Registrarse</button>
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="register-check" />
<label htmlFor="register-check"> Recuerdame</label>
</div>
</div>
</form>
</div>
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
<form>
<div className="top2">
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
<header className='header-login'>Recuperar Contraseña</header>
</div>
<div className="input-box">
<input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-envelope"></i>
</div>
<div className="input-box">
<input type="password" className="input-field" placeholder="Nueva contraseña" />
<i className="bx bx-lock-alt"></i>
</div>
<div className="input-box">
{/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
<button type="button" className="submit">Cambiar contraseña</button>
</div>
</form>
</div>
</div>
</div> </div>
</div>
</body>
</> </>
); );
} }

2
frontend/src/main.jsx
View File

@ -5,6 +5,7 @@ import AppInicio from './AppInicio.jsx'
import PersPastel1 from './PersPastel1.jsx' import PersPastel1 from './PersPastel1.jsx'
import Pedidos from './Pedidos.jsx' import Pedidos from './Pedidos.jsx'
import Pasteles from './Pasteles.jsx' import Pasteles from './Pasteles.jsx'
import LoginForm from './LoginForm.jsx';
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
@ -15,6 +16,7 @@ createRoot(document.getElementById('root')).render(
<Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/> <Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/>
<Route path = "/Pedidos" element = {<Pedidos/>}/> <Route path = "/Pedidos" element = {<Pedidos/>}/>
<Route path = "/Pasteles" element = {<Pasteles/>}/> <Route path = "/Pasteles" element = {<Pasteles/>}/>
<Route path = "/Login" element = {<LoginForm/>}/>
</Routes> </Routes>
</Router> </Router>
</React.StrictMode>, </React.StrictMode>,