From 5e520e9c4496535116b4f1b0ab5608b2767e4afe Mon Sep 17 00:00:00 2001 From: madegryc pc Date: Sat, 10 Aug 2024 01:25:29 +0200 Subject: [PATCH] Site - Added style on login page --- site/interface/site/login/createConnectDiv.js | 99 +++++++++------ site/interface/site/style/loginPage.css | 113 ++++++++++++++++-- 2 files changed, 165 insertions(+), 47 deletions(-) diff --git a/site/interface/site/login/createConnectDiv.js b/site/interface/site/login/createConnectDiv.js index c5a0e66..a1ae41f 100644 --- a/site/interface/site/login/createConnectDiv.js +++ b/site/interface/site/login/createConnectDiv.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* createConnectDiv.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ +/* By: marvin +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/07 18:14:53 by edbernar #+# #+# */ -/* Updated: 2024/08/09 09:06:59 by edbernar ### ########.fr */ +/* Updated: 2024/08/10 01:10:03 by marvin ### ########.fr */ /* */ /* ************************************************************************** */ @@ -33,25 +33,56 @@ function createConnectDiv(divLogin) const inputLogin = document.createElement("input"); const inputPass = document.createElement("input"); const buttonLogin = createButton(inputLogin, inputPass); - const buttonNewAcc = createButtonNewAcc(divConnect, divLogin); const buttonConnect42 = document.createElement("button"); + const mailText = document.createElement("p"); + const passText = document.createElement("p"); + const MainText = document.createElement("h1"); + const newPlayerText = document.createElement("p"); + const createAccText = document.createElement("p"); + const newAccDiv = document.createElement("div"); + const divCenter = document.createElement("div"); + addGlobalBg(); + MainText.innerText = "Acces to a new WORLD"; + MainText.setAttribute("id", "mainText"); + mailText.innerText = "Email"; + passText.innerText = "Password"; + newPlayerText.innerText = "New Player ?"; + newPlayerText.setAttribute("id", "newPlayerText") + createAccText.innerText = "Create an account"; + createAccText.setAttribute("id", "createAccText") + createAccText.addEventListener("mousedown", () => { + console.log("YO LES BG"); + createButtonNewAcc(divConnect, divLogin); + }); + newAccDiv.setAttribute("id", "newAccDiv"); divConnect.setAttribute("id", "connectDiv"); inputLogin.setAttribute("type", "text"); + inputLogin.setAttribute("id", "inputLogin"); inputLogin.setAttribute("placeholder", "login"); inputLogin.setAttribute("autocomplete", "username"); inputPass.setAttribute("type", "password"); + inputPass.setAttribute("id", "inputPassword"); inputPass.setAttribute("autocomplete", "current-password"); inputPass.setAttribute("placeholder", "password"); - buttonLogin.innerHTML = "Connect"; - buttonConnect42.innerHTML = "Connect with 42"; + buttonLogin.innerHTML = "Login"; + buttonLogin.setAttribute("id", "styleButton"); + buttonConnect42.innerHTML = "Log with 42"; + buttonConnect42.setAttribute("id", "styleButton42") + divConnect.appendChild(MainText); + form.appendChild(mailText); form.appendChild(inputLogin); + form.appendChild(passText); form.appendChild(inputPass); form.appendChild(buttonLogin); - form.appendChild(buttonNewAcc); + newAccDiv.appendChild(newPlayerText); + newAccDiv.appendChild(createAccText); + form.appendChild(newAccDiv); form.appendChild(buttonConnect42); - divConnect.appendChild(form); + divCenter.appendChild(form); + divCenter.setAttribute("id", "divCenter"); + divConnect.appendChild(divCenter); form.addEventListener('submit', (e) => { e.preventDefault(); buttonLogin.click(); @@ -112,7 +143,6 @@ function createButton(inputLogin, inputPass) function createButtonNewAcc(divConnect, divLogin) { - const button = document.createElement("button"); const newDiv = document.createElement("div"); const inputUsername = document.createElement("input"); const inputMail = document.createElement("input"); @@ -121,38 +151,33 @@ function createButtonNewAcc(divConnect, divLogin) const buttonCreate = document.createElement("button"); const form = document.createElement("form"); - button.innerHTML = "Create a new account"; newDiv.setAttribute("id", "connectDiv"); - button.addEventListener('click', (e) => { + inputUsername.setAttribute("type", "text"); + inputUsername.setAttribute("placeholder", "username"); + inputUsername.setAttribute("autocomplete", "username"); + inputMail.setAttribute("type", "text"); + inputMail.setAttribute("placeholder", "mail"); + inputMail.setAttribute("autocomplete", "email"); + inputPass.setAttribute("type", "password"); + inputPass.setAttribute("placeholder", "password"); + inputPass.setAttribute("autocomplete", "new-password"); + inputPass2.setAttribute("type", "password"); + inputPass2.setAttribute("placeholder", "confirm password"); + inputPass2.setAttribute("autocomplete", "new-password"); + buttonCreate.innerHTML = "Create"; + form.appendChild(inputMail); + form.appendChild(inputUsername); + form.appendChild(inputPass); + form.appendChild(inputPass2); + form.appendChild(buttonCreate); + newDiv.appendChild(form); + buttonCreate.addEventListener('click', createNewAccount); + form.addEventListener('submit', (e) => { e.preventDefault(); - inputUsername.setAttribute("type", "text"); - inputUsername.setAttribute("placeholder", "username"); - inputUsername.setAttribute("autocomplete", "username"); - inputMail.setAttribute("type", "text"); - inputMail.setAttribute("placeholder", "mail"); - inputMail.setAttribute("autocomplete", "email"); - inputPass.setAttribute("type", "password"); - inputPass.setAttribute("placeholder", "password"); - inputPass.setAttribute("autocomplete", "new-password"); - inputPass2.setAttribute("type", "password"); - inputPass2.setAttribute("placeholder", "confirm password"); - inputPass2.setAttribute("autocomplete", "new-password"); - buttonCreate.innerHTML = "Create"; - form.appendChild(inputMail); - form.appendChild(inputUsername); - form.appendChild(inputPass); - form.appendChild(inputPass2); - form.appendChild(buttonCreate); - newDiv.appendChild(form); - buttonCreate.addEventListener('click', createNewAccount); - form.addEventListener('submit', (e) => { - e.preventDefault(); - buttonCreate.click(); - }); - divConnect.remove(); - divLogin.appendChild(newDiv); + buttonCreate.click(); }); - return (button); + divConnect.remove(); + divLogin.appendChild(newDiv); } function createNewAccount(e) diff --git a/site/interface/site/style/loginPage.css b/site/interface/site/style/loginPage.css index afe6438..6f1df40 100644 --- a/site/interface/site/style/loginPage.css +++ b/site/interface/site/style/loginPage.css @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* loginPage.css :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/07 17:15:28 by edbernar #+# #+# */ -/* Updated: 2024/08/08 23:22:32 by edbernar ### ########.fr */ +/* Updated: 2024/08/10 01:18:47 by marvin ### ########.fr */ /* */ /* ************************************************************************** */ @@ -30,18 +30,104 @@ } } +#mainText{ + color: white; + font-size: 50px; + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; + margin-top: 125px; + margin-bottom: 50px; + align-content: center; + text-align: center; +} + +#inputLogin{ + margin-top: 2px; + margin-bottom: 15px; + padding-left: 3%; + padding-right: 3%; + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; + border: none; + text-decoration: none; + height: 45px; + width: 94%; +} + +#inputPassword{ + margin-top: 2px; + margin-bottom: 25px; + padding-left: 3%; + padding-right: 3%; + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; + border: none; + text-decoration: none; + height: 45px; + width: 94%; +} + +#styleButton{ + font-family: "Poppins", sans-serif; + font-weight: 600; + font-style: normal; + height: 45px; + width: 100%; + border: none; + text-decoration: none; + transition: background-color 0.3s ease; +} + +#styleButton:hover{ + background-color: #b4b4b4; +} + +#styleButton42{ + font-family: "Poppins", sans-serif; + font-weight: 600; + font-style: normal; + height: 45px; + width: 100%; + border: none; + text-decoration: none; + transition: background-color 0.3s ease; +} + +#styleButton42:hover{ + background-color: #b4b4b4; +} + +#createAccText{ + margin-left: 10px; + cursor: pointer; + /* text-decoration: underline 2px; */ + border-bottom: white 1px solid; +} + +#newAccDiv{ + display: flex; + flex-direction: row; + margin-top: 15px; + margin-bottom: 15px; + justify-content: center; +} + #loginDiv { width: 80%; height: 80%; display: flex; position: absolute; - background-color: #990707; z-index: 500; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: anim1 0.2s; - border: 2px solid black; + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; } #globalBg { @@ -60,10 +146,9 @@ #threeDiv { - border-right: 2px solid black; - width: 40%; + width: 30%; height: 100%; - background-color: #747474; + background-color: #e0e0e0; } @@ -72,18 +157,26 @@ #connectDiv { width: 60%; height: 100%; - background-color: #616161; + background-color: #020202; display: flex; flex-direction: column; } +#connectDiv #divCenter { + width: 45%; + height: 50%; + margin-left: 27.5%; +} + #connectDiv form { width: 100%; height: 100%; display: flex; flex-direction: column; - justify-content: center; - align-items: center; +} + +#connectDiv form p{ + color: white; } #connectDiv #button {