diff --git a/.gitignore b/.gitignore index 47735411..d0e1b2e5 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ coverage/ node_modules/ .yarn.lock -package-lock.json \ No newline at end of file +package-lock.json +/src/Firebase/firebaseConfig.js \ No newline at end of file diff --git a/package.json b/package.json index 0c72f6c8..fb22c1d3 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "social-network", "version": "1.0.0", "description": "Social Network @ Laboratoria", - "main": "src/index.html", + "main": "main.js", "keywords": [ "javascript", "firebase", @@ -15,7 +15,8 @@ "stylelint": "stylelint --aei src/**/*.css", "pretest": "npm run htmlhint && npm run eslint && npm run stylelint", "test": "jest --coverage", - "start": "serve -s src/" + "start": "serve -s src/", + "deploy": "gh-pages -d src" }, "devDependencies": { "@babel/core": "^7.11.4", @@ -25,6 +26,7 @@ "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jest": "^25.3.0", + "gh-pages": "^4.0.0", "htmlhint": "^1.0.0", "jest": "^27.0.1", "regenerator-runtime": "^0.13.1", @@ -40,4 +42,4 @@ "version": "5.5.0", "commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1" } -} \ No newline at end of file +} diff --git a/src/Firebase/firebase.js b/src/Firebase/firebase.js new file mode 100644 index 00000000..c17122e2 --- /dev/null +++ b/src/Firebase/firebase.js @@ -0,0 +1,25 @@ +import { app } from "../Firebase/firebaseConfig.js"; +import { getAuth, createUserWithEmailAndPassword, signOut, GoogleAuthProvider, onAuthStateChanged, updateProfile, signInWithPopup, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'; + +export const auth = getAuth(app); +export const provider = new GoogleAuthProvider(); + +//Crear Usuario +export const signUpWithPass = (auth, email, password) => createUserWithEmailAndPassword(auth, email, password) +export const signInWithPass = (auth, email, password) => signInWithEmailAndPassword(auth, email, password) +export const viewer = () => { + onAuthStateChanged(auth, (user) => { + if (user) { + // currentUser.email = user.email; + // currentUser.uid = user.uid; + console.log("user logged in " + user.email) + } else { + console.log("user logged out ") + } + }); +}; +export const logout = (auth) => signOut(auth) +export const popUpGoogle = (auth, provider) => signInWithPopup(auth, provider) + + + diff --git a/src/Firebase/firebaseConfig.js b/src/Firebase/firebaseConfig.js new file mode 100644 index 00000000..87c0a367 --- /dev/null +++ b/src/Firebase/firebaseConfig.js @@ -0,0 +1,21 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'; + +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +export const firebaseConfig = { + apiKey: "AIzaSyDPHtZUcsIC4Le451IhyZuwQmB8XHFma3Y", + authDomain: "social-network-39dcf.firebaseapp.com", + projectId: "social-network-39dcf", + storageBucket: "social-network-39dcf.appspot.com", + messagingSenderId: "1024927465075", + appId: "1:1024927465075:web:6d61cb6a3d3f57ddc43406", + measurementId: "G-MK58E6Q1EJ" +}; + +// Initialize Firebase +export const app = initializeApp(firebaseConfig); + diff --git a/src/components/feed.js b/src/components/feed.js new file mode 100644 index 00000000..3300b6c3 --- /dev/null +++ b/src/components/feed.js @@ -0,0 +1,92 @@ +import { toNavigate } from "../main.js"; +import { register } from "../components/register.js" +import { auth, logout } from "../Firebase/firebase.js"; + +export const feed = () => { + //Creamos elementos del Feed + const feedDiv = document.createElement("div"); + feedDiv.classList = "feedDiv" + const header = document.createElement("div"); + + const imgHeader = document.createElement("img"); + imgHeader.src = "../img/Logo VeganShip.png" + imgHeader.classList = "imgHeader" + + const inputSearchHeader = document.createElement("input"); + inputSearchHeader.placeholder = "tu búsqueda" + + const buttonSignOut = document.createElement("button"); + buttonSignOut.textContent = "Cerrar Sesión"; + + const newPostContainer = document.createElement("section"); + newPostContainer.classList = "newPostContainer"; + const newPostLocation = document.createElement("input"); + newPostLocation.placeholder = "ubicación" + + const newPostTag = document.createElement("input"); + newPostTag.placeholder = "etiquetas" + + const newPostContent = document.createElement("textarea"); + newPostContent.classList = "newPostContent" + const newPostButton = document.createElement("button"); + const postFeed = document.createElement("section"); + const post = document.createElement("article"); + const postHeader = document.createElement("div"); + postHeader.classList = "postHeader" + const imgProfilePost = document.createElement("img"); + imgProfilePost.src = "../img/sandia-logo.png"; + imgProfilePost.classList = "imgProfilePost"; + + const postUserName = document.createElement("h3"); + postUserName.textContent = "Vaquita Vegana"; + const postLocation = document.createElement("h4"); + postLocation.textContent = "Villa Dulce" + //botón para hacer drop down menu con a href + const moreOptions = document.createElement("button"); + moreOptions.textContent = "más" + const postContentContainer = document.createElement("div"); + postContentContainer.classList = "postContentContainer" + const postTag = document.createElement("a"); + postTag.textContent = "#recetas"; + const postContent = document.createElement("p"); + postContent.textContent = "receta de dobladitas"; + const likeButton = document.createElement("button"); + likeButton.textContent = "like"; + + feedDiv.appendChild(header); + header.appendChild(imgHeader); + header.appendChild(inputSearchHeader); + header.appendChild(buttonSignOut); + feedDiv.appendChild(newPostContainer); + newPostContainer.appendChild(newPostLocation); + newPostContainer.appendChild(newPostTag); + newPostContainer.appendChild(newPostContent); + newPostContainer.appendChild(newPostButton); + feedDiv.appendChild(postFeed); + postFeed.appendChild(post); + post.appendChild(postHeader); + postHeader.appendChild(imgProfilePost); + postHeader.appendChild(postUserName); + postHeader.appendChild(postLocation); + postHeader.appendChild(moreOptions); + postFeed.appendChild(postContentContainer); + postContentContainer.appendChild(postTag); + postContentContainer.appendChild(postContent); + postContentContainer.appendChild(likeButton); + + + + + buttonSignOut.addEventListener("click", () => toNavigate("/")); + buttonSignOut.addEventListener("click", async (e) => { + e.preventDefault() //cancela comportamiento por defecto de refrescar la pagina + try { + await logout(auth) + } catch (error) { + console.log(error) + } + toNavigate("/"); + }) + + return feedDiv; + } \ No newline at end of file diff --git a/src/components/home.js b/src/components/home.js new file mode 100644 index 00000000..b94c7103 --- /dev/null +++ b/src/components/home.js @@ -0,0 +1,127 @@ +import { toNavigate } from "../main.js"; +import { auth, signInWithPass, viewer, provider, popUpGoogle } from "../Firebase/firebase.js"; + +export const home = () => { + //Creamos elementos del Formulario + //const containerHeader = document.createElement("header"); + //const imgHeader = document.createElement("img"); + const homeDiv = document.createElement("div"); + const container = document.createElement("section") + const containerLogo = document.createElement("figure"); + const imgLogo = document.createElement("img"); + const containerForm = document.createElement("div"); + const loginForm = document.createElement("form"); + const labelMail = document.createElement("label"); + const inputMail = document.createElement("input"); + const labelPassword = document.createElement("label"); + const inputPassword = document.createElement("input"); + const buttonLogin = document.createElement("button"); + const containerGoogle = document.createElement("div"); + const iconLogoGoogle = document.createElement("i"); + const buttonGoogle = document.createElement("button"); + const containerRegister = document.createElement("div"); + const labelRegister = document.createElement("label"); + const hrefRegister = document.createElement("a"); + + homeDiv.className = "div-container"; + container.className = "container"; + //containerHeader.className = "container-header"; + //imgHeader.className = "img-header"; + containerLogo.className = "container-logo"; + imgLogo.src = "../img/Logo VeganShip.png"; + imgLogo.className = "img-logo"; + containerForm.className = "container-form"; + loginForm.className = "login-form"; + labelMail.className = "label-mail labels"; + labelMail.textContent = "Correo electrónico"; + inputMail.type = "email"; + inputMail.id = "i-input-login-mail"; + inputMail.className = "input-login-mail inputs"; + inputMail.placeholder = "tucorreo@gmail.com"; + inputMail.required = "true"; + labelPassword.className = "label-pass labels"; + labelPassword.textContent = "Contraseña"; + inputPassword.type = "text"; + inputPassword.id = "i-input-login-password"; + inputPassword.className = "input-login-password inputs"; + inputPassword.placeholder = "xxxxxxxxxxxxxx"; + inputPassword.required = "true"; + buttonLogin.textContent = "Iniciar sesión"; + buttonLogin.className = "button-login buttons"; + containerGoogle.className = "container-google"; + iconLogoGoogle.id = "span-i"; + iconLogoGoogle.className = "fa-brands fa-google"; + buttonGoogle.textContent = "Continuar con Google"; + buttonGoogle.className = "button-google buttons"; + containerRegister.className = "container-register"; + labelRegister.textContent = "¿No tienes una cuenta?"; + hrefRegister.textContent = "Regístrate"; + hrefRegister.className = "href-register"; + + //homeDiv.appendChild(loginForm); + homeDiv.appendChild(container); + container.appendChild(containerLogo); + containerLogo.appendChild(imgLogo); + container.appendChild(containerForm); + containerForm.appendChild(loginForm); + loginForm.appendChild(labelMail); + loginForm.appendChild(inputMail); + loginForm.appendChild(labelPassword); + loginForm.appendChild(inputPassword); + loginForm.appendChild(buttonLogin); + container.appendChild(containerGoogle); + containerGoogle.appendChild(buttonGoogle); + buttonGoogle.appendChild(iconLogoGoogle); + container.appendChild(containerRegister); + containerRegister.appendChild(labelRegister); + containerRegister.appendChild(hrefRegister); + + //loginForm.appendChild(loginForm); + // loginForm.appendChild(hrefRegister); + // loginForm.appendChild(buttonGoogle); + + viewer(); + + buttonLogin.addEventListener("click", () => { + loginForm.addEventListener("submit", async (e) => { + e.preventDefault() + const emailLogin = inputMail.value + const passwordLogin = inputPassword.value + console.log(emailLogin, passwordLogin) + try { + const userCredentials = await signInWithPass(auth, emailLogin, passwordLogin) + console.log(userCredentials.user) + } catch (error) { + if (error.code === "auth/user-not-found"){ + alert("usuario NO encontrado"); + }else if (error.code === "auth/wrong-password"){ + alert("Contraseña incorrecta"); + } else if (error.code){ + console.log(error.code); + } + } + + toNavigate("/feed"); + }) + }) + + hrefRegister.addEventListener("click", () => toNavigate("/register")); + buttonGoogle.addEventListener("click", async (e) => { + e.preventDefault() + + try { + const credentials = await popUpGoogle(auth, provider); + console.log(credentials.user); + toNavigate("/feed"); + } catch (error) { + console.log(error); + } + }); + + + return homeDiv; +} + + + + diff --git a/src/components/register.js b/src/components/register.js new file mode 100644 index 00000000..bd34b80f --- /dev/null +++ b/src/components/register.js @@ -0,0 +1,155 @@ +import { toNavigate } from "../main.js"; +import { auth, signUpWithPass } from "../Firebase/firebase.js"; + +export const register = () => { + //Creamos elementos de para el formulario de registro + + + const registerDiv = document.createElement("div"); + const containerRegister = document.createElement("section") + const containerRegisterTitle = document.createElement("div") + const containerRegisterForm = document.createElement("div") + const registerForm = document.createElement("form"); //formulario + + //Nombre + const labelUserName = document.createElement("label"); + const inputUserName = document.createElement("input"); + + //Ciudad + const labelUserCity = document.createElement("label"); + const inputUserCity = document.createElement("input"); + + //País + const labelUserCountry = document.createElement("label"); + const inputUserCountry = document.createElement("input"); + + //Mail + const labelUserMail = document.createElement("label"); + const inputUserMail = document.createElement("input"); + + //Contraseña y Verificación Contraseña + const labelUserPass = document.createElement("label"); + const inputUserPass = document.createElement("input"); + const labelUserCheckPass = document.createElement("label"); + const inputUserCheckPass = document.createElement("input"); + + //Selector + const selectIsVegan = document.createElement("select"); + selectIsVegan.id = "selectVegan"; + const selectOption = document.createElement("option"); + const optionOne = document.createElement("option"); + const optionTwo = document.createElement("option"); + const optionThree = document.createElement("option"); + const optionFour = document.createElement("option"); + const optionFive = document.createElement("option"); + + selectOption.setAttribute("selected", ""); + selectOption.setAttribute("value", "0"); + optionOne.setAttribute("value", "1"); + optionTwo.setAttribute("value", "2"); + optionThree.setAttribute("value", "3"); + optionFour.setAttribute("value", "4"); + optionFive.setAttribute("value", "5"); + + selectOption.innerHTML = "Seleccionar opción"; + optionOne.innerHTML = "Sí, soy vegano"; + optionTwo.innerHTML = "Soy vegetarian@"; + optionThree.innerHTML = "No, pero lo intento"; + optionFour.innerHTML = "No, pero alguien cercano sí"; + optionFive.innerHTML = "Me interesa saber más"; + + /*selectOption.setAttribute("label", "Seleccionar opción"); + optionOne.setAttribute("label", "Sí, soy vegano"); + optionTwo.setAttribute("label", "Soy vegetarian@"); + optionThree.setAttribute("label", "No, pero lo intento"); + optionFour.setAttribute("label", "No, pero alguien cercano sí"); + optionFive.setAttribute("label", "Me interesa saber más");*/ + + selectIsVegan.appendChild(selectOption); + selectIsVegan.appendChild(optionOne); + selectIsVegan.appendChild(optionTwo); + selectIsVegan.appendChild(optionThree); + selectIsVegan.appendChild(optionFour); + selectIsVegan.appendChild(optionFive); + + const buttonRegister = document.createElement("button"); + + + //Clases y Placeholder + registerDiv.className = "register-div"; + containerRegister.className = "container-register"; + containerRegisterForm.className = "container-register-form"; + registerForm.className = "register-form"; + + labelUserName.className = "userName"; + inputUserName.className = "input-Name-User"; + inputUserName.placeholder = "Nombre"; + + labelUserCity.className = "userCity"; + inputUserCity.className = "input-City-User" + inputUserCity.placeholder = "Ciudad"; + + labelUserCountry.className = "userCountry"; + inputUserCountry.className = "input-Country-User"; + inputUserCountry.placeholder = "País"; + + labelUserMail.className = "userMail"; + inputUserMail.type = "email"; + inputUserMail.className = "input-Mail-User"; + inputUserMail.placeholder = "E-mail"; + + labelUserPass.className = "userPassword" + inputUserPass.type = "password"; + inputUserPass.className = "input-Pass-User" + inputUserPass.placeholder = "Contraseña"; + + labelUserCheckPass.className = "userCheckPass"; + inputUserCheckPass.type = "password"; + inputUserCheckPass.className = "input-Check-Pass" + inputUserCheckPass.placeholder = "Repita contraseña"; + + buttonRegister.className = "button-Register"; + buttonRegister.textContent = "REGISTRARSE"; + + registerDiv.appendChild(containerRegister); + containerRegister.appendChild(containerRegisterTitle); + containerRegister.appendChild(containerRegisterForm); + containerRegisterForm.appendChild(registerForm); + + + registerForm.appendChild(inputUserName); + registerForm.appendChild(inputUserCity); + registerForm.appendChild(inputUserCountry); + registerForm.appendChild(inputUserMail); + registerForm.appendChild(inputUserPass); + registerForm.appendChild(inputUserCheckPass); + registerForm.appendChild(selectIsVegan); + registerForm.appendChild(buttonRegister); + + + buttonRegister.addEventListener("click", () => { + registerForm.addEventListener("submit", async (e) => { + e.preventDefault() //cancela comportamiento por defecto de refrescar la pagina + const emailForm = inputUserMail.value + const passwordForm = inputUserPass.value + console.log(emailForm, passwordForm) + try { + const userCredentials = await signUpWithPass(auth, emailForm, passwordForm) + console.log(userCredentials) + } catch (error) { + if (error.code === "auth/invalid-email") { + alert("email inválido"); + } else if (error.code === "auth/weak-password") { + alert("contraseña débil"); + } else if (error.code === "auth/email-already-in-use") { + alert("email en uso"); + } else if (error.code) { + alert("algo anda mal"); + } + } + + toNavigate("/registerOk"); + }) + }) + return registerDiv; +} \ No newline at end of file diff --git a/src/components/registerOk.js b/src/components/registerOk.js new file mode 100644 index 00000000..15fdeceb --- /dev/null +++ b/src/components/registerOk.js @@ -0,0 +1,64 @@ +import { toNavigate } from "../main.js"; +import { auth, viewer, signInWithPass } from "../Firebase/firebase.js" +import { register } from "../components/register.js" + +export const registerOk = () => { + const registerOkDiv = document.createElement("div"); + const containerOk = document.createElement("section"); + // const containerOkBackground = document.createElement("div"); + // const imgOkBackground = document.createElement("img"); + const containerOkIcon = document.createElement("figure"); + const imgOkLogo = document.createElement("img"); + const containerOkMessage = document.createElement("div"); + const paragraphOkHello = document.createElement("p"); + const paragraphOkMessage = document.createElement("p"); + const containerImgOk = document.createElement("figure"); + const imgOkLettuce = document.createElement("img"); + const containerContinue = document.createElement("div"); + const buttonOkContinue = document.createElement("button"); + + registerOkDiv.className = "ok-div-container"; + containerOk.className = "ok-section-container"; + containerOkIcon.className = "ok-icon-container"; + imgOkLogo.className = "ok-img-logo"; + imgOkLogo.src = "../img/sandia-logo.png"; + containerOkMessage.className = "ok-message-container"; + paragraphOkHello.className = "ok-p-hello"; + paragraphOkHello.textContent = "Hola, "; + paragraphOkMessage.className = "ok-p-message"; + paragraphOkMessage.textContent = "Te damos la bienvenida de VeganShip, donde podrás compartir con personas del mundo vegano"; + containerImgOk.className = "ok-img-container"; + imgOkLettuce.className = "ok-img-lettuce"; + imgOkLettuce.src = "../img/lechuga-2.png"; + containerContinue.className = "ok-container-continue"; + buttonOkContinue.className = "ok-button-continue"; + buttonOkContinue.textContent = "Continuar"; + + registerOkDiv.appendChild(containerOk); + containerOk.appendChild(containerOkIcon); + containerOkIcon.appendChild(imgOkLogo); + containerOk.appendChild(containerOkMessage); + containerOkMessage.appendChild(paragraphOkHello); + containerOkMessage.appendChild(paragraphOkMessage); + containerOk.appendChild(containerImgOk); + containerImgOk.appendChild(imgOkLettuce); + containerOk.appendChild(containerContinue); + containerContinue.appendChild(buttonOkContinue); + + buttonOkContinue.addEventListener("click", () => { + viewer(auth, async (user) => { + if (user) { + register(); + const signInOk = await signInWithPass(auth, userCredentials.email, userCredentials.password) + console.log(signInOk, "funciona"); + toNavigate("/home"); + } + }) + + toNavigate("/feed"); + }); + + return registerOkDiv; + +}; + diff --git a/src/functions/signInFunc.js b/src/functions/signInFunc.js new file mode 100644 index 00000000..7bb08845 --- /dev/null +++ b/src/functions/signInFunc.js @@ -0,0 +1,12 @@ +try { + const userCredentials = await signInWithPass(auth, emailLogin, passwordLogin) + console.log(userCredentials.user) +} catch (error) { + if (error.code === "auth/user-not-found") { + alert("usuario NO encontrado"); + } else if (error.code === "auth/wrong-password") { + alert("Contraseña incorrecta"); + } else if (error.code) { + console.log(error.code); + } +} \ No newline at end of file diff --git a/src/functions/signUpFunc.js b/src/functions/signUpFunc.js new file mode 100644 index 00000000..e69de29b diff --git a/src/img/25x25 patron.png b/src/img/25x25 patron.png new file mode 100644 index 00000000..5b0a43ff Binary files /dev/null and b/src/img/25x25 patron.png differ diff --git a/src/img/Logo VeganShip.png b/src/img/Logo VeganShip.png new file mode 100644 index 00000000..f1305270 Binary files /dev/null and b/src/img/Logo VeganShip.png differ diff --git a/src/img/lechuga-2.png b/src/img/lechuga-2.png new file mode 100644 index 00000000..a5c51e5c Binary files /dev/null and b/src/img/lechuga-2.png differ diff --git a/src/img/lechuga.png b/src/img/lechuga.png new file mode 100644 index 00000000..00239b58 Binary files /dev/null and b/src/img/lechuga.png differ diff --git a/src/img/sandia-logo.png b/src/img/sandia-logo.png new file mode 100644 index 00000000..98e750ce Binary files /dev/null and b/src/img/sandia-logo.png differ diff --git a/src/index.html b/src/index.html index 788db3c9..5bd41229 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,27 @@ + - - - - Document + + + + VeganShip + + + + + + + + + + +
+ \ No newline at end of file diff --git a/src/main.js b/src/main.js index ac27e91a..a9204160 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,47 @@ // Este es el punto de entrada de tu aplicacion -import { myFunction } from './lib/index.js'; +import "./Firebase/firebaseConfig.js"; +import { home } from './components/home.js'; +import { register } from './components/register.js'; +import { feed } from './components/feed.js'; +import { registerOk } from './components/registerOk.js'; + +//import { firebaseConfig } from './Firebase/firebaseConfig.js'; +//import { onAuthStateChanged } from './Firebase/firebaseConfig.js'; + +//console.log(onAuthStateChanged); + +const rootDiv = document.getElementById("root"); +const routes = { + "/": home, + "/register": register, + "/feed": feed, + "/registerOk": registerOk, +}; + +export const toNavigate = (pathname) => { + window.history.pushState( + {}, + pathname, + window.location.origin + pathname, + ); + + while (rootDiv.firstChild) { + rootDiv.removeChild(rootDiv.firstChild); + } + rootDiv.appendChild(routes[pathname]()); +}; + +const component = routes[window.location.pathname]; +rootDiv.appendChild(component()); + +window.onpopstate = () => { + while (rootDiv.firstChild) { + rootDiv.removeChild(rootDiv.firstChild); + } + + rootDiv.appendChild(routes[window.location.pathname]()); + +}; + -myFunction(); diff --git a/src/styles-views/feed-styles.css b/src/styles-views/feed-styles.css new file mode 100644 index 00000000..ea725d98 --- /dev/null +++ b/src/styles-views/feed-styles.css @@ -0,0 +1,54 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + } + + :root { + --main-color: #03a678; + --secondary-red: #f25c5c; + --secondary-orange: #f28705; + --complementary-pink: #f26db6; + --complementary-green: #84bf04; + --neutral-background: #201f1f; + --neutral-font: #fcfdff; + --tittles-font-family: 'Oleo Script', cursive; + --secundary-font-family: 'Roboto', sans-serif; + } + + .feedDiv { + display: flex; + flex-direction: column; + border: 1px solid red; + gap: 30px; + } + + .newPostContainer { + border: 1px solid red; + gap: 30px; + } + + .newPostContent{ + width: 300px; + height: 100px; + } + + .postHeader { + display: flex; + flex-direction: row; + border: 1px solid green; + } + + .imgHeader { + width: 230px; + } + + .imgProfilePost { + width: 40px; + } + + .postContentContainer{ + border: 1px solid blue; + } + + \ No newline at end of file diff --git a/src/styles-views/register-styles.css b/src/styles-views/register-styles.css new file mode 100644 index 00000000..056600ea --- /dev/null +++ b/src/styles-views/register-styles.css @@ -0,0 +1,37 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +:root { + --main-color: #03a678; + --neutral-background: #201f1f; + --tittles-font-family: 'Oleo Script', cursive; + --secundary-font-family: 'Roboto', sans-serif; +} + +.register-div { + background-color: var(--neutral-background); +} + +.inputNameUser{ + width: 70px; + height: 30px; + border-color: var(--main-color); +} + +#selectVegan{ + width: 270px; + height: 30px; + border-color: var(--main-color); +} + +#selectVegan, option { + background-color: var(--main-color); +} + +.button-Register { + background-color: var(--main-color); +} + diff --git a/src/styles-views/registerOk-styles.css b/src/styles-views/registerOk-styles.css new file mode 100644 index 00000000..864b9df0 --- /dev/null +++ b/src/styles-views/registerOk-styles.css @@ -0,0 +1,123 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +:root { + --secondary-red: #f25c5c; + --neutral-background: #201f1f; + --neutral-font: #fcfdff; + --tittles-font-family: 'Oleo Script', cursive; + --secundary-font-family: 'Roboto', sans-serif; + --bg-image: url("../img/25x25 patron.png"); + --bg-image-opacity: .25; +} + +.ok-section-container { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(4, 1fr); + justify-items: center; + align-content: center; + row-gap: 5px; + width: 100%; + height: 100vh; + font-family: var(--secundary-font-family); + min-height: 500px; + background-image: var(--bg-image); + background-position: center; + background-size: cover; + position: relative; + isolation: isolate; +} + +.ok-section-container::after { + content: ""; + z-index: -1; + inset: 0; + background: white; + opacity: .8; + position: absolute; +} + +.ok-icon-container { + grid-row-start: 1; + grid-row-end: 2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 30px; + +} + +.ok-img-logo { + width: 95px; + transform: rotate(45deg); +} + +.ok-message-container { + grid-row-start: 2; + grid-row-end: 3; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + margin-top: 50px; + border: 1px solid; + border-radius: 30px; + border-color: var(--neutral-background); + font-family: var(--secundary-font-family); + background-color: var(--neutral-font); + width: 295px; + height: 130px; +} + +.ok-p-hello { + font-size: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.ok-p-message { + font-size: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.ok-img-container { + grid-row-start: 3; + grid-row-end: 4; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.ok-img-lettuce { + width: 120px; +} + +.ok-container-continue { + grid-row-start: 4; + grid-row-end: 5; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.ok-button-continue { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + background-color: var(--secondary-red); + margin-bottom: 70px; +} \ No newline at end of file diff --git a/src/styles-views/style.css b/src/styles-views/style.css new file mode 100644 index 00000000..1920f63d --- /dev/null +++ b/src/styles-views/style.css @@ -0,0 +1,273 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +:root { + --main-color: #03a678; + --secondary-red: #f25c5c; + --secondary-orange: #f28705; + --complementary-pink: #f26db6; + --complementary-green: #84bf04; + --neutral-background: #201f1f; + --neutral-font: #fcfdff; + --tittles-font-family: 'Oleo Script', cursive; + --secundary-font-family: 'Roboto', sans-serif; +} + +.container { + display: grid; + grid-column: 1fr; + grid-template-rows: repeat(7, 1fr); + place-items: center; + row-gap: 15px; + width: 100%; + height: 100vh; + background-color: var(--neutral-background); + font-family: var(--secundary-font-family); +} + +.container-logo { + grid-row-start: 2; + grid-row-end: 3; + display: flex; + flex-direction: column; + justify-items: center; + align-self: flex-end; + margin-bottom: 5px; +} + +.img-logo { + width: 230px; +} + +.container-form { + grid-row-start: 3; + grid-row-end: 5; + display: flex; + flex-direction: column; + align-self: flex-start; + justify-content: center; + align-items: center; +} + +.login-form { + display: flex; + flex-direction: column; + justify-content: center; + align-self: flex-start; + gap: 5px; + margin-top: 15px; + align-items: center; + +} + +.labels{ + color: var(--neutral-font); + font-size: 15px; + font-weight: bold; +} + +/*.inputs{ + width: 270px; + height: 30px; + border-radius: 20px; + font-size: 15px; + font-weight: lighter; + border-style: none; + text-align: left; + padding: 10px; +} + +.buttons { + width: 270px; + height: 40px; + border-radius: 30px; + color: var(--neutral-font); + font-size: 15px; + font-weight: bold; + border-style: none; +}*/ + +.button-login { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + background-color: var(--main-color); + margin-top: 60px; +} + +.container-google { + grid-row-start: 5; + grid-row-end: 6; + text-align: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + justify-items: center; + align-self: flex-start; + gap: 3px; + margin-top: 45px; +} + +.button-google { + background-color: var(--secondary-red); + padding-right: 20px; + padding-bottom: 3px; + text-align: center; +} + +.fa-google { + float: left; + width: 35px; + font-size: 18px; + padding-left: 50px; +} + +.button-google:hover { + cursor: pointer; +} + +.container-register { + grid-row-start: 6; + grid-row-end: 7; + text-align: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-self: flex-start; + margin-bottom: 75px; +} + +.href-register { + color: var(--main-color); + font-size: 16px; + font-weight: bold; + text-decoration: underline; +} + +@media screen and (min-width: 500px) { + + .container { + row-gap: 25px; + } + + .container-logo { + margin-bottom: 30px; + } + + .img-logo { + width: 250px; + } + + .login-form { + gap: 8px; + margin-top: 40px; + } + + .labels { + font-size: 16px; + } + + .inputs { + width: 370px; + height: 40px; + border-radius: 30px; + font-size: 17px; + } + + .buttons { + width: 370px; + height: 45px; + border-radius: 35px; + font-size: 18px; + } + + .button-login { + margin-top: 70px; + } + + .container-google { + margin-top: 30px; + } + + .button-google { + padding-right: 35px; + } + + .fa-google { + width: 65px; + font-size: 23px; + padding-left: 80px; + } + + .href-register { + font-size: 18px; + } + +} + +@media screen and (min-width: 700px) { + + .container { + row-gap: 18px; + width: 100%; + height: 100vh; + } + + .container-logo { + margin-bottom: 30px; + } + + .img-logo { + width: 350px; + } + + .login-form { + gap: 10px; + margin-top: 45px; + } + + .labels { + font-size: 18px; + } + + .inputs { + width: 470px; + height: 45px; + border-radius: 40px; + font-size: 17px; + } + + .buttons { + width: 470px; + height: 50px; + border-radius: 45px; + font-size: 20px; + } + + .button-login { + margin-top: 90px; + } + + .container-google { + margin-top: 55px; + } + + .button-google { + padding-right: 65px; + } + + .fa-google { + width: 75px; + font-size: 28px; + padding-left: 110px; + } + + .href-register { + font-size: 20px; + } + +} \ No newline at end of file