merge

docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html

@@ -45,18 +45,17 @@
 			<div class="right-side-register">
 				<h1>Welcome to a new WORLD</h1>
 				<form id="registerForm">
-					<!-- <span id="closePopupBtn" class="close">&times;</span> -->
 					<label for="username">Username</label>
-					<input type="username" id="username" name="username">
+					<input type="username" id="username" name="username" placeholder="Username">
 
 					<label for="email">Email</label>
-					<input type="email" id="email-register" name="email">
+					<input type="email" id="email-register" name="email" placeholder="Email">
 	
 					<label for="password">Password</label>
-					<input type="password" id="password-register" name="password">
+					<input type="password" id="password-register" name="password" placeholder="Password">
 	
 					<label for="password">Confirm password</label>
-					<input type="password" id="password-confirm" name="password">
+					<input type="password" id="password-confirm" name="password" placeholder="Confirm password">
 
 					<button type="submit" class="login-btn">Register</button>
 					<div class="old-player">

docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html

@@ -2,7 +2,6 @@
 	<h1 id="homeButton">PTME</h1>
 	<div class="search-container">
 		<input type="text" placeholder="Search..." class="search-input" id="searchInputUser">
-		<button class="search-button">Search</button>
 	</div>
 	<div id="searchResult">
 	</div>
@@ -43,6 +42,13 @@
 			<p>Multiplayer local</p>
 		</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">
 

docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css

@@ -65,8 +65,7 @@ body {
 }
 
 .skin-select{
-	/* padding-block: 25px; */
+	justify-content: space-between;
-	width: 40%;
 }
 
 .popup {
@@ -166,18 +165,50 @@ body {
 	background-color: rgb(18, 223, 96);
 }
 
+#whatGame {
+	display: flex;
+	flex-direction: column;
+	margin-block: 25px;
+	max-width: 500px;
+	font-size: 1.5rem;
+}
+
+#whatGame p{
+	color: white;
+}
+
+.line {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: rgb(255, 255, 255);
+    margin: 20px 0;
+	justify-content: center;
+	align-items: center;
+}
+
 #bar{
-	margin: 15px;
+	margin: 25px;
 	width: 250px;
 	height: 250px;
 	border: 5px solid white;
+	transition: transform 0.3s ease;
+}
+
+#bar:hover{
+	transform: scale(1.05);
 }
 
 #goal{
-	margin: 15px;
+	margin: 25px;
 	width: 250px;
 	height: 250px;
 	border: 5px solid white;
+	transition: transform 0.3s ease;
+}
+
+#goal:hover{
+	transform: scale(1.05);
 }
 
 #topBarLobby {
@@ -228,7 +259,7 @@ body {
 .search-container {
 	display: flex;
 	align-items: flex-start;
-	width: 40%;
+	width: 30%;
 }
 
 .search-input {
@@ -244,20 +275,6 @@ body {
 	border-color: white;
 }
 
-.search-button {
-	padding: 10px 20px;
-	border: 2px solid white;
-	background-color: #272727;
-	color: white;
-	cursor: pointer;
-	font-size: 16px;
-}
-
-.search-button:hover {
-	background-color: #202020;
-	border-color: #c4c4c4;
-}
-
 .bottom {
 	display: flex;
 	flex-direction: row;