From 1d719ffc6484cb6e9cc1bc07d8eea363bf13ae5d Mon Sep 17 00:00:00 2001
From: Misthaa <mathis.koro@gmail.com>
Date: Sun, 22 Sep 2024 18:39:40 +0200
Subject: [PATCH] Site :     - Fix central lobby

---
 .../server/server/templates/lobbyPage.html    | 70 ++++++++++---------
 .../static/style/lobbyPage/lobbyPage.css      |  8 ++-
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
index 45901f3..852c370 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
@@ -27,49 +27,51 @@
 		<p id="infoChat">You are not connected to the chat</p>
 	</div>
 </div>
-<div class="main">
-	<div id="loginPopup" class="popup">
-		<div class="popup-content">
-			<span id="closePopupBtn" class="close"></span>
-			<h1>Select your game mode</h1>
-			<div id="choose">
-				<div class="select-card">
-					<p>Multiplayer local</p>
-				</div>
-				<div class="select-card">
-					<p>Matchmaking</p>
-				</div>
-				<div class="select-card">
-					<p>Ranked</p>
-				</div>
-				<div class="select-card">
-					<p>Tournament</p>
+<div class="main-container">
+	<div class="main">
+		<div id="loginPopup" class="popup">
+			<div class="popup-content">
+				<span id="closePopupBtn" class="close"></span>
+				<h1>Select your game mode</h1>
+				<div id="choose">
+					<div class="select-card">
+						<p>Multiplayer local</p>
+					</div>
+					<div class="select-card">
+						<p>Matchmaking</p>
+					</div>
+					<div class="select-card">
+						<p>Ranked</p>
+					</div>
+					<div class="select-card">
+						<p>Tournament</p>
+					</div>
 				</div>
+				</form>
 			</div>
-			</form>
 		</div>
-	</div>
 
-	<div class="game-mode">
-		<div class="mode-card">
-			<p>Multiplayer local</p>
+		<div class="game-mode">
+			<div class="mode-card">
+				<p>Multiplayer local</p>
+			</div>
 		</div>
-	</div>
-
-	<div id="whatGame">
-		<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
-		<span class="line"></span>
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
-	</div>
-
-	<div class="skin-select">
-		<div id="bar">
 
+		<div id="whatGame">
+			<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
+			<span class="line"></span>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
 		</div>
-		<div id="goal">
+
+		<div class="skin-select">
+			<div id="bar">
+
+			</div>
+			<div id="goal">
+				
+			</div>
 			
 		</div>
-		
 	</div>
 </div>
 <div class="bottom">
diff --git a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
index f21f7c3..cacb313 100644
--- a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
+++ b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
@@ -56,12 +56,18 @@ body {
 	user-select: none;
 }
 
+.main-container{
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .main{
 	padding-block: 45px;
 	padding-inline: 150px;
 	display: flex;
 	flex-direction: row;
-	gap: 2.6rem;
+	gap: 12rem;
 }
 
 .skin-select{