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 85bc8b919b
commit befe77ab97
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 :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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)

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* loginPage.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 {