From 908f577f66ebea01ceff2eaf07568b6823113197 Mon Sep 17 00:00:00 2001
From: Mathis Degryck <madegryc@1F1.42angouleme.fr>
Date: Fri, 23 Aug 2024 18:37:03 +0200
Subject: [PATCH] Site :     - Delete JS (fake html login page)     - Add Login
 page html css (display none)

---
 site/interface/site/index.html              |  29 ++++
 site/interface/site/login/createThreeDiv.js |  59 -------
 site/interface/site/login/main.js           |  41 ++---
 site/interface/site/main.js                 |  10 +-
 site/interface/site/style/home.css          | 164 ++++++++++++++++++--
 site/lobby/main.js                          |   3 +-
 6 files changed, 200 insertions(+), 106 deletions(-)
 delete mode 100644 site/interface/site/login/createThreeDiv.js

diff --git a/site/interface/site/index.html b/site/interface/site/index.html
index 6ce8e34..922d511 100644
--- a/site/interface/site/index.html
+++ b/site/interface/site/index.html
@@ -28,6 +28,35 @@
 			<p>LOGIN</p>
 		</div>
 	</div>
+		<div id="loginPopup" class="popup">
+			<div class="container">
+				<div class="left-side"></div>
+				<div class="right-side">
+					<h1>Acces to a new WORLD</h1>
+					<form>
+						<label for="email">Email</label>
+						<input type="email" id="email" name="email" placeholder="Email">
+		
+						<label for="password">Password</label>
+						<input type="password" id="password" name="password" placeholder="Password">
+		
+						<button type="submit" class="login-btn">Login</button>
+		
+						<div class="new-player">
+							New player? <a href="#">Create an account</a>
+						</div>
+		
+						<div class="divider">
+							<span></span>
+							<p>Or</p>
+							<span></span>
+						</div>
+		
+						<button type="button" class="login-42-btn">Log with <span>42</span></button>
+					</form>
+				</div>
+			</div>
+		</div>
 	<div id="chatButton">
 		<p>CHAT</p>
 	</div>
diff --git a/site/interface/site/login/createThreeDiv.js b/site/interface/site/login/createThreeDiv.js
deleted file mode 100644
index 47251c7..0000000
--- a/site/interface/site/login/createThreeDiv.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* ************************************************************************** */
-/*                                                                            */
-/*                                                        :::      ::::::::   */
-/*   createThreeDiv.js                                  :+:      :+:    :+:   */
-/*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
-/*                                                +#+#+#+#+#+   +#+           */
-/*   Created: 2024/08/07 18:09:36 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/12 20:46:53 by edbernar         ###   ########.fr       */
-/*                                                                            */
-/* ************************************************************************** */
-
-// import * as THREE from 'three';
-
-function	createThreeDiv()
-{
-	const	divThree	= document.createElement("div");
-
-	divThree.setAttribute("id", "threeDiv");
-	// const scene = new THREE.Scene();
-	// // const camera = new THREE.PerspectiveCamera(75, divThree.innerWidth / divThree.innerHeight, 0.1, 1000);
-	// const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
-	// const renderer = new THREE.WebGLRenderer( {antialias: true} );
-	// // renderer.setSize(divThree.innerWidth, divThree.innerHeight);
-	// renderer.setSize(200, 700);
-	// divThree.appendChild(renderer.domElement);
-	// renderer.setClearColor(0x020202);
-
-	// let geometrie = new THREE.BoxGeometry(1, 1, 1);
-	
-	// let materiel = new THREE.MeshBasicMaterial({color:0xffffff});
-	
-	// const mesh = new THREE.Mesh( geometrie, materiel)
-
-	// camera.position.set(0, 0 ,4);
-
-	// renderer.antialias
-
-	// loop()
-
-	// function loop(){
-	// 	requestAnimationFrame(loop);
-	// 	let xsize = divThree.offsetWidth;
-	// 	let ysize = divThree.offsetHeight;
-	// 	renderer.setSize(xsize, ysize);
-	// 	camera.aspect = xsize / ysize;
-	// 	camera.updateProjectionMatrix()
-	// 	console.log(xsize, ysize);
-	// 	mesh.rotation.y += 0.001;
-	// 	mesh.rotation.x += 0.0005;
-	// 	renderer.render(scene, camera);
-	// }
-
-	// scene.add(mesh);
-	// renderer.render(scene, camera);
-	return (divThree);
-}
-
-export { createThreeDiv };
\ No newline at end of file
diff --git a/site/interface/site/login/main.js b/site/interface/site/login/main.js
index fb429ed..835202a 100644
--- a/site/interface/site/login/main.js
+++ b/site/interface/site/login/main.js
@@ -3,17 +3,15 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/13 00:01:42 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/23 18:35:44 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { createNotification as CN } from "../notification/main.js";
 import { userMeInfo, waitForLogin } from "../typeResponse/typeLogin.js";
-import { createConnectDiv } from "./createConnectDiv.js";
-import { createThreeDiv } from "./createThreeDiv.js";
 
 function	login()
 {
@@ -21,33 +19,26 @@ function	login()
 	const	pLoginButton	= loginButton.getElementsByTagName('p')[0];
 	let		nodeText		= null;
 
-	waitForLogin().then((token) => {
-		nodeText = document.createTextNode(userMeInfo.username);
-
-		if (token !== undefined)
-		{
-			document.cookie = "token={" + token + "}; path=/; Secure; SameSite=Strict; max-age=3600";
-		}
-		if (userMeInfo.id !== -1)
-		{
-			loginButton.replaceChild(nodeText, pLoginButton);
-			loginButton.addEventListener('click', showMenu);
-		}
-		else
+	// waitForLogin().then((token) => {
+	// 	nodeText = document.createTextNode(userMeInfo.username);
+		// if (userMeInfo.id !== -1)
+		// {
+		// 	loginButton.replaceChild(nodeText, pLoginButton);
+			// loginButton.addEventListener('click', showMenu);
+	// 	}
+	// 	else
 			loginButton.addEventListener('click', showLoginDiv);
-	});
+	// });
 }
 
 function	showLoginDiv()
 {
-	const	divLogin	= document.createElement("div");
-	const	threeDiv	= createThreeDiv();
-	const	connectDiv	= createConnectDiv(divLogin);
+	const popout = document.getElementById('loginPopup');
 
-	divLogin.setAttribute("id", "loginDiv");
-	divLogin.appendChild(threeDiv);
-	divLogin.appendChild(connectDiv);
-	document.body.appendChild(divLogin);
+	if (popout.style.display === 'flex')
+		popout.style.display = 'none';
+	else
+		popout.style.display = 'flex';
 }
 
 function	showMenu()
diff --git a/site/interface/site/main.js b/site/interface/site/main.js
index 7700c2d..8813aeb 100644
--- a/site/interface/site/main.js
+++ b/site/interface/site/main.js
@@ -3,14 +3,14 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:35 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/22 18:01:38 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/23 17:47:37 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { liveChat } from "/liveChat/main.js";
+import { liveChat } from "./liveChat/main.js";
 import { login } from "./login/main.js";
 import { home3D } from "./home3D/home3D.js"
 
@@ -25,6 +25,10 @@ window.addEventListener('scroll', () => {
 	parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
 });
 
+document.getElementById('closePopupBtn').addEventListener('click', function() {
+	document.getElementById('loginPopup').style.display = 'none';
+});
+
 document.addEventListener('DOMContentLoaded', () => {
 	liveChat();
 	login();
diff --git a/site/interface/site/style/home.css b/site/interface/site/style/home.css
index 47827ce..d84d179 100644
--- a/site/interface/site/style/home.css
+++ b/site/interface/site/style/home.css
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   home.css                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/17 23:27:37 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/23 18:32:53 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -48,6 +48,9 @@ body {
 	height: 100%;
 	background-color: #020202;
 	user-select: none;
+	font-family: "Poppins", sans-serif;
+	font-weight: 500;
+	font-style: normal;
 }
 
 
@@ -69,9 +72,6 @@ body {
 	color: white;
 	display: flex;
 	font-size: 25px;
-	font-family: "Poppins", sans-serif;
-	font-weight: 500;
-	font-style: normal;
 	padding-left: 60px;
 	gap: 6rem;
 }
@@ -112,9 +112,6 @@ body {
 	height: 40px;
 	width: 130px;	
 	color: black;
-	font-family: "Poppins", sans-serif;
-	font-weight: 500;
-	font-style: normal;
 	text-align: center;
 	line-height: 40px;
 	margin-left: auto;
@@ -127,6 +124,148 @@ body {
 	cursor: pointer;
 }
 
+.popup {
+    display: none; /* La popup est masquée par défaut */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(5px);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.container {
+    display: flex;
+    width: 70%;
+    height: 80%;
+    background-color: #020202;
+}
+
+.left-side {
+    background-color: #D3D3D3;
+    flex: 1;
+}
+
+.right-side {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0;
+	padding-inline: 180px;
+    color: white;
+}
+
+.right-side h1 {
+    font-size: 2rem;
+    margin-bottom: 30px;
+	align-items: center;
+	justify-content: center;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+label {
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+input {
+    border: none;
+    padding: 20px;
+    margin-bottom: 20px;
+    font-size: 1rem;
+	font-family: "Poppins", sans-serif;
+	font-weight: 500;
+	font-style: normal;
+}
+
+button {
+    padding: 15px;
+    font-size: 1rem;
+    cursor: pointer;
+    border: none;
+	font-family: "Poppins", sans-serif;
+	font-weight: 500;
+	font-style: normal;
+}
+
+
+.login-btn {
+    background-color: #fff;
+    margin-bottom: 20px;
+	transition: background-color 0.3s ease;
+}
+
+.login-btn:hover {
+	background-color: #f0f0f0e1;
+}
+
+.new-player {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.new-player a {
+    color: white;
+    text-decoration: underline;
+	transition: color 0.3s ease;
+}
+
+.new-player a:hover {
+	color: #f0f0f0e1;
+}
+
+.divider {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.divider span {
+    flex: 1;
+    height: 1px;
+    background-color: #fff;
+}
+
+.divider p {
+    margin: 0 10px;
+    font-size: 1rem;
+}
+
+.login-42-btn {
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+	transition: background-color 0.3s ease;
+}
+
+.login-42-btn span {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.login-42-btn:hover {
+	background-color: #f0f0f0e1;
+}
+
+.close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 20px;
+    cursor: pointer;
+}
+
 .homeSection{
 	min-height: 100svh;
 	overflow: hidden;
@@ -134,9 +273,6 @@ body {
 
 .homeSection p{
 	color: white;
-	font-family: "Poppins", sans-serif;
-	font-weight: 500;
-	font-style: normal;
 }
 
 #firstText{
@@ -204,9 +340,6 @@ body {
 
 .team h2 {
 	color: white;
-	font-family: "Poppins", sans-serif;
-	font-weight: 500;
-	font-style: normal;
 	font-size: 30px;
 }
 
@@ -251,9 +384,6 @@ footer {
 	overflow: hidden;
 	height: 150px;
 	background-color: white;
-	font-family: "Poppins", sans-serif;
-	font-weight: 500;
-	font-style: normal;
 	color: #020202;
 }
 
diff --git a/site/lobby/main.js b/site/lobby/main.js
index 07e4a00..ec531c2 100644
--- a/site/lobby/main.js
+++ b/site/lobby/main.js
@@ -6,7 +6,7 @@
 /*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/08/22 19:15:25 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/08/23 18:34:42 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -25,7 +25,6 @@ let gameMode = 0;
 document.addEventListener('DOMContentLoaded', () => {
     document.getElementsByClassName('game-mode')[0].addEventListener('click', function() {
         document.getElementById('loginPopup').style.display = 'flex';
-        console.log('Popup opened');
     });
     
     document.getElementById('closePopupBtn').addEventListener('click', function() {