diff --git a/frontend/fondo_pasteles.jpg b/frontend/fondo_pasteles.jpg new file mode 100644 index 0000000..a36feda Binary files /dev/null and b/frontend/fondo_pasteles.jpg differ diff --git a/frontend/index.html b/frontend/index.html index 0c589ec..90fc160 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - Vite + React + Rapi cakeFactory
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index b8b8473..b1fc4bf 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,33 +1,12 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' +import LoginForm from './LoginForm' function App() { - const [count, setCount] = useState(0) - return ( <> -
- - Vite logo - - - React logo - +
+
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

) } diff --git a/frontend/src/LoginForm.css b/frontend/src/LoginForm.css new file mode 100644 index 0000000..b1a9a15 --- /dev/null +++ b/frontend/src/LoginForm.css @@ -0,0 +1,204 @@ +/* POPPINS FONT */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +*{ + margin: 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{ + display: flex; + justify-content: center; + align-items: center; + min-height: 110vh; + background: rgba(39, 39, 39, 0.5); +} + +.link:hover, .active{ + border-bottom: 2px solid #fff; +} + +.btn:hover{ + background: rgba(255, 255, 255, 0.3); +} +#registerBtn{ + margin-left: 15px; +} +.btn.white-btn{ + background: rgba(255, 255, 255, 0.7); +} +.btn.btn.white-btn:hover{ + background: rgba(255, 255, 255, 0.5); +} +.form-box{ + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 512px; + height: 420px; + overflow: hidden; + z-index: 2; +} +.login-container{ + position: absolute; + left: 4px; + width: 500px; + opacity: 1; + display: flex; + flex-direction: column; + transition: .5s ease-in-out; +} +.register-container{ + position: absolute; + right: -520px; + width: 500px; + display: flex; + flex-direction: column; + transition: .5s ease-in-out; +} +.top span{ + color: #fff; + font-size: small; + padding: 10px 0; + display: flex; + justify-content: center; +} +.top span a{ + font-weight: 500; + color: #fff; + margin-left: 5px; +} +header{ + color: #fff; + font-size: 30px; + text-align: center; + padding: 10px 0 30px 0; +} +.two-forms{ + display: flex; + gap: 20px; + border-bottom: 100px; +} +.input-field{ + font-size: 15px; + background: rgba(255, 255, 255, 0.2); + color: #fff; + height: 50px; + width: 100%; + padding: 0 10px 0 45px; + border: none; + border-radius: 30px; + outline: none; + transition: .2s ease; +} +.input-field:hover, .input-field:focus{ + background: rgba(255, 255, 255, 0.25); +} +::-webkit-input-placeholder{ + color: #fff; +} +.input-box i{ + position: relative; + top: -35px; + left: 17px; + color: #fff; +} +.submit{ + font-size: 15px; + font-weight: 500; + color: black; + height: 45px; + width: 100%; + border: none; + border-radius: 30px; + outline: none; + background: rgba(255, 255, 255, 0.7); + cursor: pointer; + transition: .3s ease-in-out; +} +.submit:hover{ + background: rgba(255, 255, 255, 0.5); + box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2); +} +.two-col{ + display: flex; + justify-content: space-between; + color: #fff; + font-size: small; + margin-top: 10px; +} +.two-col .one{ + display: flex; + gap: 5px; +} +.two label a{ + text-decoration: none; + color: #fff; +} +.two label a:hover{ + text-decoration: underline; +} +@media only screen and (max-width: 786px){ + .nav-button{ + display: none; + } + .nav-menu.responsive{ + top: 100px; + } + .nav-menu{ + position: absolute; + top: -800px; + display: flex; + justify-content: center; + background: rgba(255, 255, 255, 0.2); + width: 100%; + height: 90vh; + backdrop-filter: blur(20px); + transition: .3s; + } + .nav-menu ul{ + flex-direction: column; + text-align: center; + } + .nav-menu-btn{ + display: block; + } + .nav-menu-btn i{ + font-size: 25px; + color: #fff; + padding: 10px; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + cursor: pointer; + transition: .3s; + } + .nav-menu-btn i:hover{ + background: rgba(255, 255, 255, 0.15); + } +} +@media only screen and (max-width: 540px) { + .wrapper{ + min-height: 100vh; + } + .form-box{ + width: 100%; + height: 500px; + } + .register-container, .login-container{ + width: 100%; + padding: 0 20px; + } + .register-container .two-forms{ + flex-direction: column; + gap: 0; + } +} \ No newline at end of file diff --git a/frontend/src/LoginForm.jsx b/frontend/src/LoginForm.jsx new file mode 100644 index 0000000..2a5e91f --- /dev/null +++ b/frontend/src/LoginForm.jsx @@ -0,0 +1,87 @@ +import React, { useState } from 'react'; +import './LoginForm.css'; + +function LoginForm() { + const [loginVisible, setLoginVisible] = useState(true); + + const toggleLogin = () => { + setLoginVisible(true); + }; + + const toggleRegister = () => { + setLoginVisible(false); + }; + + return ( + <> +
+ +
+ +
+
+ No tienes cuenta? Registrate +
Inicia Sesión
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+ +
+
+ +
+
+ Ya tienes cuenta? Inicia Sesión +
Registrarse
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+
+
+
+ + ); +} + +export default LoginForm;