Site :

- Add skin select (display: none;)
    - Re add "Click on the screen to play"

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

@@ -66,6 +66,7 @@
 		</div>
 		
 	</div>
+<div class="centered-text">Click on the screen to play</div>
 <div id="chatButton">
 	<span class="notification-badge"></span>
 	<img src="/static/img/homePage/bulle.png">

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

@@ -27,6 +27,23 @@
 		<p id="infoChat">You are not connected to the chat</p>
 	</div>
 </div>
+
+<div class="popup-background" id="popup-background">
+	<div class="popup-skin">
+		<h1>Select your skin</h1>
+		<div class="color-grid">
+			<div class="color-box color-1"></div>
+			<div class="color-box color-2"></div>
+			<div class="color-box color-3"></div>
+			<div class="color-box color-4"></div>
+			<div class="color-box color-5"></div>
+			<div class="color-box color-6"></div>
+			<div class="color-box color-7"></div>
+			<div class="color-box color-8"></div>
+		</div>
+	</div>
+</div>
+
 <div class="main-container">
 	<div class="main">
 		<div id="loginPopup" class="popup">

docker-compose/requirements/nginx/static/style/homePage/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/09/21 20:08:48 by marvin           ###   ########.fr       */
+/*   Updated: 2024/09/24 15:16:08 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -403,7 +403,7 @@ button {
 	font-size: 24px;
 	color: white;
 	opacity: 0;
-	animation: fadeInUp 1.5s forwards 12s, blink 1.5s 13.5s infinite alternate;
+	animation: fadeInUp 1.5s forwards 16s, blink 1.5s 17.5s infinite alternate;
   }
 
 .info {
@@ -448,6 +448,10 @@ footer {
     color: #afafaf;
 }
 
+.footer-right{
+	margin-bottom: auto;
+}
+
 .footer-right p {
     font-weight: bold;
 }

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

@@ -74,8 +74,55 @@ body {
 	justify-content: space-between;
 }
 
+/* POUR EDDY : CHANGE HERE FOR SELECTING THE SKIN */
+
+.popup-background {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	justify-content: center;
+	align-items: center;
+}
+
+.popup-skin {
+	background-color: white;
+	padding: 20px;
+	text-align: center;
+}
+
+.popup-skin h1 {
+	margin-bottom: 30px;
+	font-size: 24px;
+}
+
+.color-grid {
+	display: grid;
+	grid-template-columns: repeat(4, 140px);
+	gap: 20px;
+	align-items: center;
+	justify-content: center;
+	padding-inline: 40px;
+	padding-bottom: 20px;
+}
+
+.color-box {
+	width: 120px;
+	height: 120px;
+	border: 4px solid black;
+	cursor: pointer;
+	transition: transform 0.3s ease;
+}
+
+.color-box:hover {
+	transform: scale(1.1);
+}
+
 .popup {
-	display: none; /* La popup est masquée par défaut */
+	display: none;
 	position: fixed;
 	top: 0;
 	left: 0;