Site
- Added style on login page
This commit is contained in:
madegryc pc
@ -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,10 +151,7 @@ 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) => {
|
||||
e.preventDefault();
|
||||
inputUsername.setAttribute("type", "text");
|
||||
inputUsername.setAttribute("placeholder", "username");
|
||||
inputUsername.setAttribute("autocomplete", "username");
|
||||
@ -151,8 +178,6 @@ function createButtonNewAcc(divConnect, divLogin)
|
||||
});
|
||||
divConnect.remove();
|
||||
divLogin.appendChild(newDiv);
|
||||
});
|
||||
return (button);
|
||||
}
|
||||
|
||||
function createNewAccount(e)
|
||||
|
||||
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user