tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- Added style on login page
This commit is contained in:
madegryc pc
2024-08-10 01:25:29 +02:00
parent 3f8194ca7e
commit 5e520e9c44
2 changed files with 165 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
site/interface/site/login/createConnectDiv.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* createConnectDiv.js :+: :+: :+: */ /* createConnectDiv.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 18:14:53 by edbernar #+# #+# */ /* 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 inputLogin = document.createElement("input");
const inputPass = document.createElement("input"); const inputPass = document.createElement("input");
const buttonLogin = createButton(inputLogin, inputPass); const buttonLogin = createButton(inputLogin, inputPass);
const buttonNewAcc = createButtonNewAcc(divConnect, divLogin);
const buttonConnect42 = document.createElement("button"); 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(); 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"); divConnect.setAttribute("id", "connectDiv");
inputLogin.setAttribute("type", "text"); inputLogin.setAttribute("type", "text");
inputLogin.setAttribute("id", "inputLogin");
inputLogin.setAttribute("placeholder", "login"); inputLogin.setAttribute("placeholder", "login");
inputLogin.setAttribute("autocomplete", "username"); inputLogin.setAttribute("autocomplete", "username");
inputPass.setAttribute("type", "password"); inputPass.setAttribute("type", "password");
inputPass.setAttribute("id", "inputPassword");
inputPass.setAttribute("autocomplete", "current-password"); inputPass.setAttribute("autocomplete", "current-password");
inputPass.setAttribute("placeholder", "password"); inputPass.setAttribute("placeholder", "password");
buttonLogin.innerHTML = "Connect"; buttonLogin.innerHTML = "Login";
buttonConnect42.innerHTML = "Connect with 42"; buttonLogin.setAttribute("id", "styleButton");
buttonConnect42.innerHTML = "Log with 42";
buttonConnect42.setAttribute("id", "styleButton42")
divConnect.appendChild(MainText);
form.appendChild(mailText);
form.appendChild(inputLogin); form.appendChild(inputLogin);
form.appendChild(passText);
form.appendChild(inputPass); form.appendChild(inputPass);
form.appendChild(buttonLogin); form.appendChild(buttonLogin);
form.appendChild(buttonNewAcc); newAccDiv.appendChild(newPlayerText);
newAccDiv.appendChild(createAccText);
form.appendChild(newAccDiv);
form.appendChild(buttonConnect42); form.appendChild(buttonConnect42);
divConnect.appendChild(form); divCenter.appendChild(form);
divCenter.setAttribute("id", "divCenter");
divConnect.appendChild(divCenter);
form.addEventListener('submit', (e) => { form.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
buttonLogin.click(); buttonLogin.click();
@ -112,7 +143,6 @@ function createButton(inputLogin, inputPass)
function createButtonNewAcc(divConnect, divLogin) function createButtonNewAcc(divConnect, divLogin)
{ {
const button = document.createElement("button");
const newDiv = document.createElement("div"); const newDiv = document.createElement("div");
const inputUsername = document.createElement("input"); const inputUsername = document.createElement("input");
const inputMail = document.createElement("input"); const inputMail = document.createElement("input");
@ -121,38 +151,33 @@ function createButtonNewAcc(divConnect, divLogin)
const buttonCreate = document.createElement("button"); const buttonCreate = document.createElement("button");
const form = document.createElement("form"); const form = document.createElement("form");
button.innerHTML = "Create a new account";
newDiv.setAttribute("id", "connectDiv"); 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(); e.preventDefault();
inputUsername.setAttribute("type", "text"); buttonCreate.click();
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);
}); });
return (button); divConnect.remove();
divLogin.appendChild(newDiv);
} }
function createNewAccount(e) function createNewAccount(e)

113
site/interface/site/style/loginPage.css
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* loginPage.css :+: :+: :+: */ /* loginPage.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:15:28 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 { #loginDiv {
width: 80%; width: 80%;
height: 80%; height: 80%;
display: flex; display: flex;
position: absolute; position: absolute;
background-color: #990707;
z-index: 500; z-index: 500;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: anim1 0.2s; animation: anim1 0.2s;
border: 2px solid black; font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
} }
#globalBg { #globalBg {
@ -60,10 +146,9 @@
#threeDiv { #threeDiv {
border-right: 2px solid black; width: 30%;
width: 40%;
height: 100%; height: 100%;
background-color: #747474; background-color: #e0e0e0;
} }
@ -72,18 +157,26 @@
#connectDiv { #connectDiv {
width: 60%; width: 60%;
height: 100%; height: 100%;
background-color: #616161; background-color: #020202;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#connectDiv #divCenter {
width: 45%;
height: 50%;
margin-left: 27.5%;
}
#connectDiv form { #connectDiv form {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; }
align-items: center;
#connectDiv form p{
color: white;
} }
#connectDiv #button { #connectDiv #button {