Site

- Added style on login page

site/interface/site/login/createConnectDiv.js

@@ -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";
+	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(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)

site/interface/site/style/loginPage.css

@@ -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: 30%;
-	width: 40%;
 	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 {