diff --git a/package.json b/package.json index 1d89e14..2f3a166 100644 --- a/package.json +++ b/package.json @@ -41,5 +41,8 @@ "createdAt": "2023-06-06T21:37:46.504Z", "version": "6.3.0", "commit": "a942adeb868f1fe54b86e34cc4fc4ddb0601700d" + }, + "dependencies": { + "firebase": "^9.23.0" } -} \ No newline at end of file +} diff --git a/src/assets/fonts/Sora-Bold.ttf b/src/assets/fonts/Sora-Bold.ttf new file mode 100644 index 0000000..f6ea9cd Binary files /dev/null and b/src/assets/fonts/Sora-Bold.ttf differ diff --git a/src/assets/fonts/Sora-ExtraBold.ttf b/src/assets/fonts/Sora-ExtraBold.ttf new file mode 100644 index 0000000..deadd84 Binary files /dev/null and b/src/assets/fonts/Sora-ExtraBold.ttf differ diff --git a/src/assets/fonts/Sora-ExtraLight.ttf b/src/assets/fonts/Sora-ExtraLight.ttf new file mode 100644 index 0000000..751352b Binary files /dev/null and b/src/assets/fonts/Sora-ExtraLight.ttf differ diff --git a/src/assets/fonts/Sora-Light.ttf b/src/assets/fonts/Sora-Light.ttf new file mode 100644 index 0000000..8c97f92 Binary files /dev/null and b/src/assets/fonts/Sora-Light.ttf differ diff --git a/src/assets/fonts/Sora-Medium.ttf b/src/assets/fonts/Sora-Medium.ttf new file mode 100644 index 0000000..5cd4e49 Binary files /dev/null and b/src/assets/fonts/Sora-Medium.ttf differ diff --git a/src/assets/fonts/Sora-Regular.ttf b/src/assets/fonts/Sora-Regular.ttf new file mode 100644 index 0000000..0960fb4 Binary files /dev/null and b/src/assets/fonts/Sora-Regular.ttf differ diff --git a/src/assets/fonts/Sora-SemiBold.ttf b/src/assets/fonts/Sora-SemiBold.ttf new file mode 100644 index 0000000..51c5fd4 Binary files /dev/null and b/src/assets/fonts/Sora-SemiBold.ttf differ diff --git a/src/assets/fonts/Sora-Thin.ttf b/src/assets/fonts/Sora-Thin.ttf new file mode 100644 index 0000000..5dbf1f2 Binary files /dev/null and b/src/assets/fonts/Sora-Thin.ttf differ diff --git a/src/assets/icons/Account circle.svg b/src/assets/icons/Account circle.svg new file mode 100644 index 0000000..7a0151a --- /dev/null +++ b/src/assets/icons/Account circle.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/AskQuestion.png b/src/assets/icons/AskQuestion.png new file mode 100644 index 0000000..f88643f Binary files /dev/null and b/src/assets/icons/AskQuestion.png differ diff --git a/src/assets/icons/CatHead.png b/src/assets/icons/CatHead.png new file mode 100644 index 0000000..7f11c32 Binary files /dev/null and b/src/assets/icons/CatHead.png differ diff --git a/src/assets/icons/Detective.png b/src/assets/icons/Detective.png new file mode 100644 index 0000000..46252ee Binary files /dev/null and b/src/assets/icons/Detective.png differ diff --git a/src/assets/icons/DoctorsBag.png b/src/assets/icons/DoctorsBag.png new file mode 100644 index 0000000..ac8932c Binary files /dev/null and b/src/assets/icons/DoctorsBag.png differ diff --git a/src/assets/icons/FoldedBooklet.png b/src/assets/icons/FoldedBooklet.png new file mode 100644 index 0000000..6b850c5 Binary files /dev/null and b/src/assets/icons/FoldedBooklet.png differ diff --git a/src/assets/icons/Google.png b/src/assets/icons/Google.png new file mode 100644 index 0000000..9d1c0f2 Binary files /dev/null and b/src/assets/icons/Google.png differ diff --git a/src/assets/icons/Happy.png b/src/assets/icons/Happy.png new file mode 100644 index 0000000..daef633 Binary files /dev/null and b/src/assets/icons/Happy.png differ diff --git a/src/assets/icons/Heart.png b/src/assets/icons/Heart.png new file mode 100644 index 0000000..93eca1d Binary files /dev/null and b/src/assets/icons/Heart.png differ diff --git a/src/assets/icons/Help.png b/src/assets/icons/Help.png new file mode 100644 index 0000000..5462501 Binary files /dev/null and b/src/assets/icons/Help.png differ diff --git a/src/assets/icons/LightOn.png b/src/assets/icons/LightOn.png new file mode 100644 index 0000000..ef934e6 Binary files /dev/null and b/src/assets/icons/LightOn.png differ diff --git a/src/assets/icons/account-icon.svg b/src/assets/icons/account-icon.svg new file mode 100644 index 0000000..cf4002e --- /dev/null +++ b/src/assets/icons/account-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/blueGear.png b/src/assets/icons/blueGear.png new file mode 100644 index 0000000..9ed4512 Binary files /dev/null and b/src/assets/icons/blueGear.png differ diff --git a/src/assets/icons/close-icon.png b/src/assets/icons/close-icon.png new file mode 100644 index 0000000..0fbe418 Binary files /dev/null and b/src/assets/icons/close-icon.png differ diff --git a/src/assets/icons/hamburger-icon.svg b/src/assets/icons/hamburger-icon.svg new file mode 100644 index 0000000..f075827 --- /dev/null +++ b/src/assets/icons/hamburger-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/img.png b/src/assets/icons/img.png new file mode 100644 index 0000000..b76a725 Binary files /dev/null and b/src/assets/icons/img.png differ diff --git a/src/assets/icons/postCat.png b/src/assets/icons/postCat.png new file mode 100644 index 0000000..36b3bbe Binary files /dev/null and b/src/assets/icons/postCat.png differ diff --git a/src/assets/icons/shares.png b/src/assets/icons/shares.png new file mode 100644 index 0000000..34a2b37 Binary files /dev/null and b/src/assets/icons/shares.png differ diff --git a/src/assets/icons/userBlack.svg b/src/assets/icons/userBlack.svg new file mode 100644 index 0000000..6e02daf --- /dev/null +++ b/src/assets/icons/userBlack.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/userIcon.png b/src/assets/icons/userIcon.png new file mode 100644 index 0000000..115c7f3 Binary files /dev/null and b/src/assets/icons/userIcon.png differ diff --git a/src/assets/images/catsSociety--logo.png b/src/assets/images/catsSociety--logo.png new file mode 100644 index 0000000..37ad35c Binary files /dev/null and b/src/assets/images/catsSociety--logo.png differ diff --git a/src/assets/images/gatito_login.png b/src/assets/images/gatito_login.png new file mode 100644 index 0000000..1e16a8b Binary files /dev/null and b/src/assets/images/gatito_login.png differ diff --git a/src/assets/images/gatito_registro.png b/src/assets/images/gatito_registro.png new file mode 100644 index 0000000..9c7b86f Binary files /dev/null and b/src/assets/images/gatito_registro.png differ diff --git a/src/components/feed.js b/src/components/feed.js new file mode 100644 index 0000000..69762b7 --- /dev/null +++ b/src/components/feed.js @@ -0,0 +1,68 @@ +import { Header } from "./header.js"; +import { PublishPost } from "./publishPost.js"; +import { addPost } from "../lib/firebase.js"; +import { queryPosts } from "../lib/firebase.js"; +import { MyPosts } from "./myPosts.js"; +import { MyPostEdit } from "./myPostEdit.js"; + +export const Feed = (onNavigate) => { + // Parent + const feedDiv = document.createElement("div"); + + // Childs + const headerHtml = Header(onNavigate); + const publishPostHtml = PublishPost(); + + feedDiv.appendChild(headerHtml); + feedDiv.appendChild(publishPostHtml); + + const buttonPublish = publishPostHtml.querySelector("#buttonPublish"); + const inputTextPublish = publishPostHtml.querySelector("#inputTextPublish"); + + buttonPublish.addEventListener("click", () => { + const getUserRegister = JSON.parse(localStorage.getItem("userRegister")); + console.log("sin json.parse", localStorage.getItem("userRegister")); + console.log( + "con json.parse", + JSON.parse(localStorage.getItem("userRegister")) + ); + const userName = getUserRegister.email; + const likes = 8; + const img = "/dadasda/userPruebita.png"; + const textPublish = inputTextPublish.value; + const userId = JSON.parse(localStorage.getItem("userRegister")).id; + + console.log("hice click", textPublish); + addPost(img, likes, userName, textPublish, userId) + .then((result) => { + console.log("result *****************", result); + inputTextPublish.value = ""; + onNavigate("/feed"); + }) + .catch((error) => console.log(error)); + }); + + let posts = []; + queryPosts() + .then((snapshot) => { + snapshot.docs.forEach((doc) => { + posts.push({ ...doc.data(), id: doc.id }); + }); + const userId = JSON.parse(localStorage.getItem("userRegister")).id; + posts.forEach((post) => { + // Show all Data in HTML + let myPostsHtml; + if (post.user_id === userId) { + myPostsHtml = MyPostEdit(post.user_name, post.user_post); + } else { + myPostsHtml = MyPosts(post.user_name, post.user_post); + } + feedDiv.appendChild(myPostsHtml); + }); + }) + .catch((error) => { + console.log(error); + }); + + return feedDiv; +}; diff --git a/src/components/header.js b/src/components/header.js new file mode 100644 index 0000000..4660791 --- /dev/null +++ b/src/components/header.js @@ -0,0 +1,123 @@ +import { signOut } from "firebase/auth"; +import { auth } from "../lib/firebase.js"; + +export function Header(onNavigate) { + // Template String + const logoHeader = ``; + const menuProfile = ` + `; + const menuTopics = ` + `; + + const headerTemplate = ` +
${logoHeader}
+ `; + + // DOM + const headerHtml = document.createElement("div"); + headerHtml.classList.add("header"); + headerHtml.innerHTML = headerTemplate; + + const myPosts = headerHtml.querySelector("#myPosts"); + const feeds = headerHtml.querySelector("#feeds"); + const logOut = headerHtml.querySelector("#logOut"); + + myPosts.addEventListener("click", () => { + onNavigate("/myPosts"); + }); + + feeds.addEventListener("click", () => { + onNavigate("/feed"); + }); + logOut.addEventListener("click", async () => { + await signOut(auth); + onNavigate("/ "); + console.log(signOut(auth)); + console.log("user signed out"); + }); + + // Menu CSS - Profile + + const menuItemsProfile = headerHtml.querySelectorAll(".menuItemProfile"); + const hamburgerButton = headerHtml.querySelector(".hamburger"); + const menuProfileHtml = headerHtml.querySelector(".menuProfile"); + const closeIcon = headerHtml.querySelector(".closeIcon"); + + hamburgerButton.addEventListener("click", () => { + if (menuProfileHtml.classList.contains("showMenu")) { + menuProfileHtml.classList.remove("showMenu"); + closeIcon.style.display = "none"; + } else { + menuProfileHtml.classList.add("showMenu"); + closeIcon.style.display = "block"; + } + }); + + menuItemsProfile.forEach((menuItem) => { + menuItem.addEventListener("click", () => { + console.log("hiciste click"); + }); + }); + + // Menu CSS - Topics + const menuItemsTopics = headerHtml.querySelectorAll(".menuItemTopics"); + const hamburgerButtonTopic = headerHtml.querySelector(".hamburgerTopic"); + const menuTopicsHtml = headerHtml.querySelector(".menuTopics"); + const closeIconTopic = headerHtml.querySelector(".closeIconTopic"); + + hamburgerButtonTopic.addEventListener("click", () => { + if (menuTopicsHtml.classList.contains("showMenuTopic")) { + menuTopicsHtml.classList.remove("showMenuTopic"); + closeIconTopic.style.display = "none"; + } else { + menuTopicsHtml.classList.add("showMenuTopic"); + closeIconTopic.style.display = "block"; + } + }); + + menuItemsTopics.forEach((menuItem) => { + menuItem.addEventListener("click", () => { + console.log("hiciste click"); + }); + }); + + return headerHtml; +} diff --git a/src/components/login.js b/src/components/login.js new file mode 100644 index 0000000..7f04de6 --- /dev/null +++ b/src/components/login.js @@ -0,0 +1,112 @@ +// Funciones para la interacción con el DOM del login y la vista(create element o template string) + +import { + GoogleAuthProvider, + signInWithEmailAndPassword, + signInWithPopup, +} from "firebase/auth"; +import { auth } from "../lib/firebase"; +import { async } from "regenerator-runtime"; + +export const Login = (onNavigate) => { + //Template Strings + const loginLogo = ``; + + const loginForm = `
+ + + + + ¿Olvidaste la contraseña? + +
`; + + const loginButtons = `
+

o

+ +

¿No tienes una cuenta? Regístrate

+
`; + + const login = `
+
+
+
+ ${loginLogo} + ${loginForm} + ${loginButtons} +
+
`; + + const loginDiv = document.createElement("div"); + loginDiv.classList.add("container"); + loginDiv.innerHTML = login; + + const linkRegister = loginDiv.querySelector("#linkRegister"); + linkRegister.addEventListener("click", () => onNavigate("/register")); + + const loginFormId = loginDiv.querySelector("#loginForm"); + console.log(loginFormId); + loginFormId.addEventListener("submit", async (e) => { + console.log("miau"); + e.preventDefault(); + const userEmail = loginFormId["userEmail"].value; + const password = loginFormId["userPassword"].value; + console.log(userEmail, password); + let userRegister = {}; + localStorage.removeItem("userRegister"); + try { + const userCredentials = await signInWithEmailAndPassword( + auth, + userEmail, + password + ); + if (userCredentials.operationType === "signIn") { + console.log("user-data", userCredentials); + userRegister["email"] = userCredentials.user.email; + userRegister["id"] = userCredentials.user.uid; + userRegister["photoUrl"] = "./assets/icons/Account circle.svg"; + localStorage.setItem("userRegister", JSON.stringify(userRegister)); + console.log(userRegister); + onNavigate("/feed"); + } + console.log(userCredentials); + } catch (error) { + if (error.code === "auth/wrong-password") { + alert("Contreseña incorrecta"); + } else if (error.code === "auth/user-not-found") { + alert("Usuario no encontrado"); + } else { + alert(error.message, "error"); + } + } + }); + // -------Login Google------- + const googleButton = loginDiv.querySelector("#loginGoogle"); + googleButton.addEventListener("click", async () => { + const provider = new GoogleAuthProvider(); + let userRegister = {}; + localStorage.removeItem("userRegister"); + try { + const googleCredentials = await signInWithPopup(auth, provider); + console.log(googleCredentials); + + if (googleCredentials.operationType === "signIn") { + console.log("user-data", googleCredentials); + userRegister["email"] = googleCredentials.user.email; + userRegister["id"] = googleCredentials.user.uid; + userRegister["photoUrl"] = googleCredentials.user.photoURL; + userRegister["name"] = googleCredentials.user.displayName; + localStorage.setItem("userRegister", JSON.stringify(userRegister)); + console.log(userRegister); + onNavigate("/feed"); + } + } catch (error) { + console.log(error); + } + }); + + return loginDiv; +}; diff --git a/src/components/myPostEdit.js b/src/components/myPostEdit.js new file mode 100644 index 0000000..d070ed8 --- /dev/null +++ b/src/components/myPostEdit.js @@ -0,0 +1,29 @@ +export const MyPostEdit = (name, textPost, photoUrl) => { + const myPostsDiv = document.createElement("div"); + + const post = `
+
+ user Black + ${name} +

Esta es mi publicación

+
+ +

${textPost}

+ +
+ +
+
+ + +
+ + +
+
`; + myPostsDiv.innerHTML = post; + return myPostsDiv; +}; diff --git a/src/components/myPosts.js b/src/components/myPosts.js new file mode 100644 index 0000000..b9c9c7a --- /dev/null +++ b/src/components/myPosts.js @@ -0,0 +1,28 @@ +export const MyPosts = (name, textPost, photoUrl) => { + const myPostsDiv = document.createElement("div"); + + const post = `
+
+ user Black +

${name}

+
+ +

${textPost}

+ +
+ +
+
+ + +
+ + +
+
`; + myPostsDiv.innerHTML = post; + return myPostsDiv; +}; diff --git a/src/components/publishPost.js b/src/components/publishPost.js new file mode 100644 index 0000000..8da607a --- /dev/null +++ b/src/components/publishPost.js @@ -0,0 +1,27 @@ +export const PublishPost = () => { + const divPublishPost = document.createElement("div"); + const publishPost = `
+
+ logo CatsSociety + +
+
+ add photo + + +
+
`; + const publishing = `
+ +
`; + + const publish = `
+
+ ${publishing} +
+ `; + + divPublishPost.innerHTML = publishPost; + + return divPublishPost; +}; diff --git a/src/components/register.js b/src/components/register.js new file mode 100644 index 0000000..49a0bf5 --- /dev/null +++ b/src/components/register.js @@ -0,0 +1,133 @@ +import { createUserWithEmailAndPassword } from "firebase/auth"; +import { auth } from "../lib/firebase.js"; + +// Interacción con el DOM de registro + +export const Register = (onNavigate) => { + /*const registerdiv = document.createElement("div"); + registerdiv.textContent = "Bienvenido al registro"; + const buttonLogin = document.createElement("button"); + + buttonLogin.textContent = "Regresar al Log In"; + buttonLogin.addEventListener("click", () => onNavigate("/")); + + registerdiv.appendChild(buttonLogin);*/ + + const registerLogo = ``; + + const registerForm = `
+ + + + + + + + + + + + + +
`; + const registerButtons = `
+

o

+ +

+ ¿Tienes cuenta? + Ingresa +

+
`; + + const register = `
+
+
+ ${registerLogo} + ${registerForm} + ${registerButtons} +
+
`; + + const registerDiv = document.createElement("div"); + registerDiv.innerHTML = register; + registerDiv.classList.add("container__r"); + + const linkLogin = registerDiv.querySelector("#linkLogin"); + linkLogin.addEventListener("click", () => onNavigate("/")); + /*const buttonRegister = registerDiv.querySelector("#btnRegister"); + buttonRegister.addEventListener("click", () => { + onNavigate("/register"); + console.log("Bienvenido a la sociedad de los gatos"); + });*/ + + // Form Register + const registerFormId = registerDiv.querySelector("#registerFormId"); + console.log("ver form:", registerFormId); + + registerFormId.addEventListener("submit", async (e) => { + e.preventDefault(); + const userEmail = registerFormId["userEmail"].value; + const userPassword = registerFormId["userPassword"].value; + + console.log(userEmail, userPassword); + + try { + const userCredentials = await createUserWithEmailAndPassword( + auth, + userEmail, + userPassword + ); + console.log(userCredentials); + } catch (error) { + if (error.code === "auth/email-already-in-use") { + alert("El correo está en uso."); + } else if (error.code === "auth/invalid-email") { + alert("Correo inválido."); + } else if (error.code === "auth/weak-password") { + alert("La contraseña es débil."); + } else if (error.code) { + alert("Algo ocurrio mal."); + } + } + + //Reset the form here + //registerFormId.reset(); + }); + + return registerDiv; +}; diff --git a/src/index.html b/src/index.html index 788db3c..af22981 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,15 @@ - - - - - Document - - - - - \ No newline at end of file + + + + CatsSociety + + + + + +
+ + + diff --git a/src/lib/firebase.js b/src/lib/firebase.js new file mode 100644 index 0000000..711f381 --- /dev/null +++ b/src/lib/firebase.js @@ -0,0 +1,61 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAuth } from "firebase/auth"; +import { + collection, + getFirestore, + getDocs, + addDoc, + onSnapshot, + Timestamp, + orderBy, + query +} from "firebase/firestore"; +import { onAuthStateChanged } from "firebase/auth"; +// 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 +const firebaseConfig = { + apiKey: "AIzaSyBrCMjysuSdVhzm0I7MN7kHG3N7OK8aTPw", + authDomain: "catssociety-20726.firebaseapp.com", + projectId: "catssociety-20726", + storageBucket: "catssociety-20726.appspot.com", + messagingSenderId: "529930489246", + appId: "1:529930489246:web:e3e117b267cd9c2e675a8f", + measurementId: "G-RNGW8G8Q3W", +}; + +// Initialize Firebase +export const app = initializeApp(firebaseConfig); +console.log(app); + +// Initialize Firebase Authentication and get a reference to the service +export const auth = getAuth(app); + +/* ------------------POSTS------------------------- */ +// init firebase app + +// init services +const db = getFirestore(); + +// collection ref +const colRef = collection(db, "posts"); +const queryOrdenByDate = query(colRef, orderBy("user_createdAt", "desc")) + +// database firestore - collection data +export const queryPosts = async () => getDocs(queryOrdenByDate); + +// adding documents +export const addPost = (img, like, name, post, userId) => { + const postDate = Timestamp.now(); + return addDoc(colRef, { + user_img: img, + user_likes: like, + user_name: name, + user_post: post, + user_id: userId, + user_createdAt: postDate, + }); +}; diff --git a/src/lib/index.js b/src/lib/index.js deleted file mode 100644 index d193089..0000000 --- a/src/lib/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// aqui exportaras las funciones que necesites - -export const myFunction = () => { - // aqui tu codigo - console.log('Hola mundo!'); -}; diff --git a/src/main.js b/src/main.js index ac27e91..4c495f1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,48 @@ // Este es el punto de entrada de tu aplicacion -import { myFunction } from './lib/index.js'; +import { Login } from "./components/login.js"; +import { Register } from "./components/register.js"; +import { Feed } from "./components/feed.js"; +import { onAuthStateChanged } from "firebase/auth"; +import { auth } from "./lib/firebase.js"; +import "./lib/firebase.js"; +import { MyPosts } from "./components/myPosts.js"; +import { PublishPost } from "./components/publishPost.js"; -myFunction(); +const rootDiv = document.getElementById("root"); + +const routes = { + "/": Login, + "/register": Register, + "/feed": Feed, + "/myPosts": MyPosts, + "/publishPost":PublishPost, +}; + +//Navegando por las rutas +export const onNavigate = (pathname) => { + console.log("-----------NAVIGATE----------------"); + window.history.pushState({}, pathname, window.location.origin + pathname); + while (rootDiv.firstChild) { + rootDiv.removeChild(rootDiv.firstChild); + } + rootDiv.appendChild(routes[pathname](onNavigate)); +}; + +//Obteniendo el usuario con sesión activa +onAuthStateChanged(auth, async (user) => { + console.log("verificando usuario ", user); +}); + +const component = routes[window.location.pathname]; +// history +window.onpopstate = () => { + console.log("clicked-onpopstate"); + while (rootDiv.firstChild) { + rootDiv.removeChild(rootDiv.firstChild); + console.log("while-onpop"); + } + rootDiv.appendChild(component(onNavigate)); +}; + +rootDiv.appendChild(component(onNavigate)); diff --git a/src/myPost.css b/src/myPost.css new file mode 100644 index 0000000..642d461 --- /dev/null +++ b/src/myPost.css @@ -0,0 +1,95 @@ +.containerPost { + display: flex; + justify-content: center; + margin: 20px; + padding: 20px; + border-radius: 25px; + border: 1px solid rgba(229, 229, 238, 0.33); + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); + flex-direction: column; + height: auto; +} + +.containerUser { + display: flex; + flex-wrap: wrap; + align-items: center; +} +.userBlack { + width: 30px; + height: 30px; + margin-right: 8px; +} + +.names { + width: 250px; +} + +.feedPost { + margin: 30px; + margin-top: 50px; + overflow: auto; +} + +/*.horizontal-line{ + + border-bottom:solid 1px grey; + width: 1000px; + margin: auto; +}*/ + +.containerIcons { + display: flex; + flex-direction: row; + margin-top: 30px; + border-top: solid 1px #e5e5e5; + padding-top: 16px; +} + +.containerLike { + display: flex; +} + +.containerLike-sharePost { + display: flex; + align-items: center; + padding: 5px; +} + +.like { + margin-left: 8px; +} + +.likeCat { + width: 20px; + height: 20px; + flex-direction: column; +} +.likeCat:hover { + filter: invert(62%) sepia(87%) saturate(4344%) hue-rotate(161deg) + brightness(94%) contrast(101%); + cursor: pointer; +} +.sharePost { + display: flex; + width: 91px; + height: 21px; + justify-content: center; + align-items: center; + margin-left: auto; + /* margin-top: 20px; */ +} + +.shareText { + margin-left: 8px; +} + +.share:hover { + filter: invert(62%) sepia(87%) saturate(4344%) hue-rotate(161deg) + brightness(94%) contrast(101%); + cursor: pointer; +} +.share { + width: 20px; + height: 20px; +} diff --git a/src/publishPost.css b/src/publishPost.css new file mode 100644 index 0000000..a6cb79e --- /dev/null +++ b/src/publishPost.css @@ -0,0 +1,64 @@ +.cointainerPublishPost { + display: flex; + justify-content: center; + margin: 20px; + padding: 20px; + border-radius: 25px; + border: 1px solid rgba(229, 229, 238, 0.33); + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); + flex-direction: column; + height: auto; +} +.circleUser { + width: 35px; + height: 35px; + margin: 40px 10px px 60px; +} +.text { + display: flex; + border: 1px solid #00b4b8; + border-radius: 25px; + width: 90%; + height: auto; + padding: 5px; +} +.photo-publish { + display: flex; + align-items: center; + padding: 5px; +} +.addPhoto { + width: 30px; + height: 34px; + margin-left: 70px; + margin-top: 15px; +} + +.btnPublicar { + display: flex; + width: 91px; + height: 21px; + color: white; + justify-content: center; + align-items: center; + margin-left: auto; + margin-top: 20px; + border-radius: 25px; + background: #8c4eca; + border: 0px solid; +} + +.btnPublicar:hover { + background: #7642ab; +} +.containerUserText { + display: flex; + justify-content: space-between; + margin-top: 10px; +} + +.addPhoto, +.textAdd, +.btnPublicar { + cursor: pointer; +} diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..02ef944 --- /dev/null +++ b/src/style.css @@ -0,0 +1,379 @@ +@font-face { + font-family: Sora; + src: url(./assets/fonts/Sora-Bold.ttf), url(./assets/fonts/Sora-ExtraBold.ttf), + url(./assets/fonts/Sora-ExtraLight.ttf), url(./assets/fonts/Sora-Light.ttf), + url(./assets/fonts/Sora-Medium.ttf), + url(./assets/fonts/Sora-Regular.ttf) url(./assets/fonts/Sora-SemiBold.ttf), + url(./assets/fonts/Sora-Thin.ttf); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Sora, sans-serif; +} + +/*-------------Page LOGIN-------------------*/ +.container { + display: flex; +} +.sectionRight { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + background: #ebffff; + height: 100vh; +} + +/*-------------Page REGISTER-------------------*/ + +.container__r { + display: flex; +} + +.sectionRightRegister { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + background: #ebffff; + height: 100vh; +} + +.login, +.register { + width: 250px; + height: auto; + border-radius: 25px; + background: #fff; + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); + padding: 16px 10px; +} + +.loginLogo, +.registerLogo { + display: flex; + flex-direction: column; + align-items: center; + height: 120px; + justify-content: end; +} + +.loginLogo__img, +.registerLogo__img { + width: 54.521px; + height: 50px; +} + +.loginLogo__title, +.registerLogo__title { + color: #000; + font-size: 24px; + font-weight: 600; + line-height: normal; +} + +.loginForm, +.registerForm { + display: flex; + flex-direction: column; +} + +.loginForm__label, +.registerForm__label { + color: #000; + font-size: 16px; + font-weight: 400; + line-height: normal; +} + +.loginForm__input, +.registerForm__input { + height: 36px; + flex-shrink: 0; + align-self: stretch; + border-radius: 25px; + border: 1px solid #00b4b8; + padding: 4px 10px; +} + +.loginForm__link, +.register__link, +.registerForm__link--blue { + cursor: pointer; +} + +.loginForm__link--black, +.register__link--black { + color: #000; + text-decoration-line: underline; +} + +.loginForm__link--blue, +.registerForm__link--blue { + color: #1464f6; +} + +.loginButtons__o, +.registerButtons__o { + color: #000; + text-align: center; + font-size: 16px; + font-weight: 400; + line-height: normal; +} + +.register__Account { + text-align: center; +} + +/*buttons css*/ +.btn { + padding: 10px 5px; + font-size: small; + text-align: center; + border: none; + cursor: pointer; +} +.btn--primary { + border-radius: 25px; + background: #8c4eca; + color: white; +} + +.btn--primary:hover { + background: #7642ab; +} + +.btn--google { + width: 100%; + border-radius: 5px; + border: thin solid #888; + padding: 12px 20px; + box-shadow: 1px 1px 1px grey; + /*icon*/ + background: url("./assets/icons/Google.png") transparent 15px 50% no-repeat; + background-size: 24px 24px; +} + +.btn--google:hover { + cursor: pointer; + transform: scale(1.02); +} + +.marginBottom_4 { + margin-bottom: 4px; +} + +.marginBottom_8 { + margin-bottom: 8px; +} + +.marginBottom_16 { + margin-bottom: 16px; +} + +@media screen and (min-width: 480px) { + /*Login*/ + .sectionRight { + flex: 1; + } + .sectionLeft { + flex: 1; + background-color: #fff; + /*login image*/ + background: url("./assets/images/gatito_login.png") transparent 15px 50% + no-repeat; + background-size: 492px 800px; + background-position: center; + } + /*Register*/ + @media screen and (min-width: 480px) { + .container__r { + flex-direction: row-reverse; + } + .sectionRightRegister { + flex: 1; + } + .sectionLeftRegister { + flex: 1; + background-color: #fff; + /*login image*/ + background: url("./assets/images/gatito_registro.png") transparent 15px + 50% no-repeat; + background-size: 492px 600px; + background-position: center; + } + } +} + +/*---------------Header-------------------*/ +.header { + background-color: #00b4b8; + padding: 0 4px; + height: 60px; + position: sticky; + top: 0px; +} + +.header__logoHeader { + position: fixed; + z-index: 100; + top: 5px; + right: calc(50% - 25px); +} +.logoHeader__img { + margin: 0 auto; + width: 50.938px; + height: 50px; +} + +.menuProfile, +.menuTopics { + position: fixed; + transform: translateX(-100%); + transition: transform 0.2s; + top: 60px; + left: 0; + right: 0; + bottom: 0; + z-index: 99; + background: white; + list-style: none; + padding-top: 2rem; +} + +.menu__line { + border: 1px solid #e5e5e5; +} + +.menuItemProfile, +.menuItemTopics { + display: block; + margin: 2rem; + color: black; + text-decoration: none; + cursor: pointer; + padding: 0 auto; + /*text*/ + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.menuItemProfile a, +.menuItemTopics a { + display: flex; + align-items: center; +} + +.menuItemProfile:hover, +.menuItemTopics:hover { + color: #00b4b8; +} + +.menuProfile__img { + width: 50px; + height: 50px; +} + +/*menu-icons*/ +.menuIconProfile { + width: 30px; + height: 30px; + margin-right: 12px; +} +.menuIcon { + width: 29px; + height: 38px; + margin-right: 12px; +} + +.hamburger { + position: fixed; + z-index: 100; + top: 2px; + right: 16px; + padding: 4px; + border: none; + background-color: transparent; + cursor: pointer; +} + +.hamburgerTopic { + position: fixed; + z-index: 100; + top: 12px; + left: 16px; + padding: 4px; + border: none; + background-color: transparent; + cursor: pointer; +} + +.profileIcon { + width: 48px; + height: 48px; +} + +.profileIconTopic { + width: 28px; + height: 28px; +} + +.closeIcon, +.closeIconTopic { + display: none; + position: relative; + top: 20px; +} +.showMenu, +.showMenuTopic { + transform: translateY(0); +} + +@media screen and (min-width: 480px) { + .header__menuTopics { + display: none; + } + + .header__logoHeader { + left: 20px; + } + .header__logoHeader::after { + content: "CatsSociety"; + font-size: 32px; + font-weight: 600; + line-height: normal; + position: relative; + top: -10px; + } + + .closeIcon { + height: 20px; + left: 25px; + } + .menuProfile { + width: 250px; + height: 320px; + z-index: 4; + top: 60px; + left: calc(100vw + 150px); + transform: translate(-50%, -50%); + border-radius: 25px; + background: #fff; + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); + } + .showMenu { + transform: translate(-410px, 0px); + } + .menuItemProfile { + margin: 0.5rem; + } +}