From e85d7fb165a84a09da154f7e4253ca53355f8024 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Fri, 20 Sep 2024 01:12:57 +0200
Subject: [PATCH] Site     - add new page "profil"     - new response server
 user_info Django     - add new request type "get_user_info"     - edit
 function for /game /profil /wait_game

---
 .../server/server/templates/homePage.html     |   2 +-
 .../file/server/server/templates/index.html   |   2 +
 .../server/server/templates/profilPage.html   |  23 ++++
 .../server/server/typeRequests/getUserInfo.py |  24 ++++
 .../djangoserver/file/server/server/urls.py   |   2 +
 .../djangoserver/file/server/server/views.py  |  17 ++-
 .../file/server/server/websocket.py           |   7 +-
 .../djangoserver/file/server/test_data.sql    | 104 +++++++++---------
 .../nginx/static/javascript/Page.js           |  11 +-
 .../static/javascript/profilPage/main.js      |  42 +++++++
 .../javascript/typeResponse/typeSearchUser.js |   4 +-
 .../javascript/typeResponse/typeUserInfo.js   |  37 +++++++
 .../nginx/static/javascript/websocket.js      |   7 +-
 .../nginx/static/style/global/global.css      |  29 +++++
 .../nginx/static/style/homePage/home.css      |  21 +---
 .../nginx/static/style/profilPage/profil.css  | 102 +++++++++++++++++
 16 files changed, 347 insertions(+), 87 deletions(-)
 create mode 100644 docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
 create mode 100644 docker-compose/requirements/djangoserver/file/server/server/typeRequests/getUserInfo.py
 create mode 100644 docker-compose/requirements/nginx/static/javascript/profilPage/main.js
 create mode 100644 docker-compose/requirements/nginx/static/javascript/typeResponse/typeUserInfo.js
 create mode 100644 docker-compose/requirements/nginx/static/style/global/global.css
 create mode 100644 docker-compose/requirements/nginx/static/style/profilPage/profil.css

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
index b55794f..3e2f273 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
@@ -17,7 +17,7 @@
 	</div>
 </div>
 	<div id="loginPopup" class="popup">
-		<div class="container">
+		<div class="containerHomePage">
 			<div class="left-side"></div>
 			<div class="right-side">
 				<h1>Access to a new WORLD</h1>
diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/index.html b/docker-compose/requirements/djangoserver/file/server/server/templates/index.html
index eb2973b..58bf62e 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/index.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/index.html
@@ -6,11 +6,13 @@
 	<title>Chat</title>
 	<meta name='viewport' content='width=device-width, initial-scale=1'>
 	<link rel='stylesheet' type='text/css' href='/static/style/homePage/home.css'>
+	<link rel='stylesheet' type='text/css' href='/static/style/global/global.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/homePage/liveChat.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/homePage/loginPage.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/global/notification.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/lobbyPage/lobbyPage.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/game/games.css'>
+	<link rel='stylesheet' type='text/css' href='/static/style/profilPage/profil.css'>
 	<script type="module" src='/static/javascript/main.js'></script>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
new file mode 100644
index 0000000..1d39de3
--- /dev/null
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
@@ -0,0 +1,23 @@
+<div id="profil">
+    <div class="container">
+        <!-- Profile Section -->
+        <div class="background-card"></div>
+        <div class="profile-section">
+            <div class="profile-image"></div>
+            <div class="profile-info">
+                <h2>Username <span class="online-status"></span></h2>
+                <p>150 Elo</p>
+            </div>
+        </div>
+
+        <!-- Dashboard and History Section -->
+        <div class="content">
+            <div class="dashboard">
+                <h3>Dashboard</h3>
+            </div>
+            <div class="history">
+                <h3>History</h3>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/docker-compose/requirements/djangoserver/file/server/server/typeRequests/getUserInfo.py b/docker-compose/requirements/djangoserver/file/server/server/typeRequests/getUserInfo.py
new file mode 100644
index 0000000..03c243e
--- /dev/null
+++ b/docker-compose/requirements/djangoserver/file/server/server/typeRequests/getUserInfo.py
@@ -0,0 +1,24 @@
+# **************************************************************************** #
+#                                                                              #
+#                                                         :::      ::::::::    #
+#    getUserInfo.py                                     :+:      :+:    :+:    #
+#                                                     +:+ +:+         +:+      #
+#    By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+         #
+#                                                 +#+#+#+#+#+   +#+            #
+#    Created: 2024/09/20 00:16:57 by edbernar          #+#    #+#              #
+#    Updated: 2024/09/20 01:08:45 by edbernar         ###   ########.fr        #
+#                                                                              #
+# **************************************************************************** #
+
+from asgiref.sync import sync_to_async
+from ..models import User
+import json
+
+@sync_to_async
+def getUserInfo(socket, content):
+	user = User.objects.filter(id=content['id']).values().first()
+	if (not user):
+		socket.sync_send({"type":"user_info", "content": None})
+		return
+	socket.sync_send({"type":"user_info", "content":{'username': user['username'], 'pfp': user['pfp'], 'banner': user['banner']}})
+
diff --git a/docker-compose/requirements/djangoserver/file/server/server/urls.py b/docker-compose/requirements/djangoserver/file/server/server/urls.py
index c385f28..b902c80 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/urls.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/urls.py
@@ -24,7 +24,9 @@ urlpatterns = [
 	path("multiLocalGamePage", views.multiLocalGamePage, name='multiLocalGamePage'),
 	path("multiOnlineGamePage", views.multiOnlineGamePage, name='multiOnlineGamePage'),
 	path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'),
+	path("profilPage", views.profilPage, name='profilPage'),
 	path("game", views.game, name='game'),
+	path("profil", views.profil, name='profil'),
 	path("wait_game", views.game, name='wait_game'),
     path("login42", views.login42, name='login42'),
     path("logout", views.logout, name='logout'),
diff --git a/docker-compose/requirements/djangoserver/file/server/server/views.py b/docker-compose/requirements/djangoserver/file/server/server/views.py
index 28a4f46..2041426 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/views.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/views.py
@@ -52,14 +52,23 @@ def waitingGamePage(request):
 	return render(request, "waitingGamePage.html", {})
 
 def game(request):
-	if(not request.session.get("logged_in", False)):
-		return(HttpResponse("you are not logged in",status=403))
-	return redirect("/lobby")
+	# return lobbyPage(request)
+	return redirect('/lobby')
 
 def wait_game(request):
+	# return lobbyPage(request)
+	return redirect('/lobby')
+
+def profil(request):
+	# return lobbyPage(request)
+	return redirect('/lobby')
+
+def profilPage(request):
+	if(request.method != "POST"):
+		return index(request)
 	if(not request.session.get("logged_in", False)):
 		return(HttpResponse("you are not logged in",status=403))
-	return redirect("/lobby")
+	return render(request, "profilPage.html", {})
 
 def verify(request):
 	req_token = request.GET.get('token', None)
diff --git a/docker-compose/requirements/djangoserver/file/server/server/websocket.py b/docker-compose/requirements/djangoserver/file/server/server/websocket.py
index 51b18a5..1672796 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/websocket.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/websocket.py
@@ -6,7 +6,7 @@
 #    By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2024/09/09 14:31:30 by tomoron           #+#    #+#              #
-#    Updated: 2024/09/18 07:33:08 by edbernar         ###   ########.fr        #
+#    Updated: 2024/09/20 00:16:31 by edbernar         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
@@ -27,14 +27,15 @@ from .typeRequests.createAccount import createAccount
 from .typeRequests.login import login
 from .typeRequests.getAllListUser import getAllListUser
 from .typeRequests.gameRequest import gameRequest
+from .typeRequests.getUserInfo import getUserInfo
 
 typeRequest = ["login", "get_private_list_user", "get_private_list_message",
 			   "send_private_message", "create_account", "get_all_list_user", "game",
-			   "search_user"
+			   "search_user", "get_user_info"
 			   ]
 functionRequest = [login, getPrivateListUser, getPrivateListMessage,
 				sendPrivateMessage, createAccount, getAllListUser, gameRequest,
-				searchUser
+				searchUser, getUserInfo
 				]
 
 from random import randint
diff --git a/docker-compose/requirements/djangoserver/file/server/test_data.sql b/docker-compose/requirements/djangoserver/file/server/test_data.sql
index 83b208f..34c0252 100644
--- a/docker-compose/requirements/djangoserver/file/server/test_data.sql
+++ b/docker-compose/requirements/djangoserver/file/server/test_data.sql
@@ -1,55 +1,55 @@
-INSERT INTO "server_user" ("username", "mail", "password", "id42", "pfp", "mail_verified") VALUES
-('tomoron',	'a@a.com',	'a5f1efc32bcc4dc53e471f9620b78ca9',	NULL, '/static/img/default_pfp.jpg', True),
-('patate',	'b@b.com',	'5e547979d3f20f43c87e5e0e8406f267',	NULL, '/static/img/default_pfp.jpg', True),
-('skywalker42', 'skywalker42@domain.com', 'e3a57c2a6bfa5a6434de0d9d51f6f41a', NULL, '/static/img/default_pfp.jpg', True),
-('lunarwhale', 'lunarwhale@domain.com', 'b8c6a95718d5c7b5e6d34b9b241d917e', NULL, '/static/img/default_pfp.jpg', True),
-('pixelwizard', 'pixelwizard@domain.com', 'f9e8a7d6c4d3b2f1a1e9d7c8a5f6b7e9', NULL, '/static/img/default_pfp.jpg', True),
-('thunderhawk', 'thunderhawk@domain.com', 'd1a5e3f7b9c6d4a8e7f2b5c3d1e9f7b6', NULL, '/static/img/default_pfp.jpg', True),
-('cosmicfox', 'cosmicfox@domain.com', 'e6b5d7a8c4d1f7e3b2a9c6d5f7e4a2b3', NULL, '/static/img/default_pfp.jpg', True),
-('solartitan', 'solartitan@domain.com', 'b2e8d7f9c6a3d5e7f4b9c6d8e5a7b3f4', NULL, '/static/img/default_pfp.jpg', True),
-('nebularaven', 'nebularaven@domain.com', 'f3e8d7a6b9d5c4a8e2b7c6f1d9e7a8b4', NULL, '/static/img/default_pfp.jpg', True),
-('vortexwolf', 'vortexwolf@domain.com', 'a7b9f3d2e6c5b4f1a8e7c9d6b5f3a8e1', NULL, '/static/img/default_pfp.jpg', True),
-('starlight', 'starlight@domain.com', 'd6f8b2a7e3c9f5a4b1d7e6a9c3b4f1a5', NULL, '/static/img/default_pfp.jpg', True),
-('phantomowl', 'phantomowl@domain.com', 'c9e7b5d6f8a3d4b7c6e1a9f3b7c5e6a2', NULL, '/static/img/default_pfp.jpg', True),
-('galacticlion', 'galacticlion@domain.com', 'e2d8b7f9a6c5d3f4b1a7d6e5c9b2a8f4', NULL, '/static/img/default_pfp.jpg', True),
-('cyberfalcon', 'cyberfalcon@domain.com', 'a9b6f4e2c7d5b3f8a1c6e7d9f2b5a4e3', NULL, '/static/img/default_pfp.jpg', True),
-('silverdragon', 'silverdragon@domain.com', 'f8c6a7d3e9b5c2d1a7b9f3e6d4b1c5a8', NULL, '/static/img/default_pfp.jpg', True),
-('shadowtiger', 'shadowtiger@domain.com', 'd3e8f7b6a5c4d2b1a9e7b5c3f8d9a4e6', NULL, '/static/img/default_pfp.jpg', True),
-('redphoenix', 'redphoenix@domain.com', 'b6c9d3e7f8a5b4d2c1e9a7f3d5b6c8e1', NULL, '/static/img/default_pfp.jpg', True),
-('stormfalcon', 'stormfalcon@domain.com', 'f1a8d9b5c6e7a2d3b9e6c5a8d4f7b2e3', NULL, '/static/img/default_pfp.jpg', True),
-('frostfang', 'frostfang@domain.com', 'e7c9a6d4b5f3e2a1d9c7f8a6b4d3e5f7', NULL, '/static/img/default_pfp.jpg', True),
-('celestialwolf', 'celestialwolf@domain.com', 'a5f3d7b9e8c6d2a7f4b9c3e5d7a1b4f9', NULL, '/static/img/default_pfp.jpg', True),
-('ironhawk', 'ironhawk@domain.com', 'd9f8b6e7a3d5c4f2b1e7d6a9b5c3e9f2', NULL, '/static/img/default_pfp.jpg', True),
-('obsidianraven', 'obsidianraven@domain.com', 'f6b9d4c8a7e2b3d5f1a8c7d9e5b2f6a3', NULL, '/static/img/default_pfp.jpg', True),
-('emberfox', 'emberfox@domain.com', 'b1d9f7c8a5e6b3c7d4f1a9e3b6f5c8a7', NULL, '/static/img/default_pfp.jpg', True),
-('blackstorm', 'blackstorm@domain.com', 'e5f7a9d3c8b4f1d2a6c9e7b5f3d4b9a1', NULL, '/static/img/default_pfp.jpg', True),
-('quicksilver', 'quicksilver@domain.com', 'f3d6e9b7a5c4d2e7b1a9f8c3d5b6a9e4', NULL, '/static/img/default_pfp.jpg', True),
-('auroraflame', 'auroraflame@domain.com', 'c6a9e5f7b3d4c8e9f1b7d2a5f3c9a7d6', NULL, '/static/img/default_pfp.jpg', True),
-('crimsonblade', 'crimsonblade@domain.com', 'b8f3a6d5e7c9b4d2a7f9c6e3d4a1b7e5', NULL, '/static/img/default_pfp.jpg', True),
-('silentshadow', 'silentshadow@domain.com', 'e9a5b6d3f8c7d4b1a6c9f7e5b2d8f3a1', NULL, '/static/img/default_pfp.jpg', True),
-('wildfang', 'wildfang@domain.com', 'f4d8b7e6a9c5d2b3e7a6f9c8b3d4e1f7', NULL, '/static/img/default_pfp.jpg', True),
-('venomtiger', 'venomtiger@domain.com', 'a6c9d8e7f3b5a4c2d1f9e6b3a7f5c4d8', NULL, '/static/img/default_pfp.jpg', True),
-('nightwolf', 'nightwolf@domain.com', 'd7e9f4b8a6c3d1f2b5a9e7c6d3f8a5b4', NULL, '/static/img/default_pfp.jpg', True),
-('silverfalcon', 'silverfalcon@domain.com', 'b9d8a7f6c3d4e2a5f7b1e9c6d5a8b3f2', NULL, '/static/img/default_pfp.jpg', True),
-('starfall', 'starfall@domain.com', 'e4b7a9d5f3c6e8a2b9c5d7f4b1a3f6e9', NULL, '/static/img/default_pfp.jpg', True),
-('thunderblade', 'thunderblade@domain.com', 'c7d9f8b5e3a1d4f6b2a9c6d7f3e5b4a8', NULL, '/static/img/default_pfp.jpg', True),
-('novafox', 'novafox@domain.com', 'd5e3a9f7c4b1d6e8a7f2c9b3e5d8f4a6', NULL, '/static/img/default_pfp.jpg', True),
-('ragingraven', 'ragingraven@domain.com', 'b9c7e5a8d6f4b2a3e7d9f1c6b4a9f3d2', NULL, '/static/img/default_pfp.jpg', True),
-('obsidianwolf', 'obsidianwolf@domain.com', 'f7a9d3c6e8b5d4f1a9e7c3b2d5f8a4c9', NULL, '/static/img/default_pfp.jpg', True),
-('crystalphoenix', 'crystalphoenix@domain.com', 'e5d7f4b9a6c8e3b1d9f5a3c7b6e8a2d1', NULL, '/static/img/default_pfp.jpg', True),
-('shadowfang', 'shadowfang@domain.com', 'b8f7a6e5d9c3b1d4a7e9c6b5d3f8a1f4', NULL, '/static/img/default_pfp.jpg', True),
-('stormrider', 'stormrider@domain.com', 'd1e9f7b5c4a3f6d8b9c7a5f2e4b8d3c9', NULL, '/static/img/default_pfp.jpg', True),
-('lunarfalcon', 'lunarfalcon@domain.com', 'c6f8b7a9d3e2f5b1a7e9c4d5f3b6a8d4', NULL, '/static/img/default_pfp.jpg', True),
-('ironraven', 'ironraven@domain.com', 'e7a9f8d5c4b1e3f6a7b9c2d3f5e8a1c4', NULL, '/static/img/default_pfp.jpg', True),
-('volcaniclion', 'volcaniclion@domain.com', 'b5d9e8f7c3a1d6b2f7e9c4a3b5d2f8a6', NULL, '/static/img/default_pfp.jpg', True),
-('blazewolf', 'blazewolf@domain.com', 'f3b8e7a9d5c4f1b9d6a7e5c3b9f4d8a1', NULL, '/static/img/default_pfp.jpg', True),
-('phantomfox', 'phantomfox@domain.com', 'a7e9c6f8b5d2f3a9e4c1d7b3f6a8b9d4', NULL, '/static/img/default_pfp.jpg', True),
-('emberlion', 'emberlion@domain.com', 'd4b9e7a6c3f8d5e9a7f2c1b6d3f5a9b2', NULL, '/static/img/default_pfp.jpg', True),
-('frostwolf', 'frostwolf@domain.com', 'e6f9b8c7d4a5f3e2b7c9a3d1f4b5e9d6', NULL, '/static/img/default_pfp.jpg', True),
-('tigerblade', 'tigerblade@domain.com', 'b7d3e8f4a6c9d1b5a9f2e7c3d6f5b8a2', NULL, '/static/img/default_pfp.jpg', True),
-('midnightwolf', 'midnightwolf@domain.com', 'a5f8e7b9d6c4b3e2a9f1d7c5b3f6a8d9', NULL, '/static/img/default_pfp.jpg', True),
-('radiantfalcon', 'radiantfalcon@domain.com', 'f3d7e9b6c8a5b4f1d9e7a3c2b5f6d8a9', NULL, '/static/img/default_pfp.jpg', True),
-('shadowlion', 'shadowlion@domain.com', 'e9a3f6b7c8d5e4b1a7d9c3f5b6e8a9d2', NULL, '/static/img/default_pfp.jpg', True);
+INSERT INTO "server_user" ("username", "mail", "password", "id42", "pfp", "banner", "mail_verified") VALUES
+('tomoron',	'a@a.com',	'a5f1efc32bcc4dc53e471f9620b78ca9',	NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('patate',	'b@b.com',	'5e547979d3f20f43c87e5e0e8406f267',	NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('skywalker42', 'skywalker42@domain.com', 'e3a57c2a6bfa5a6434de0d9d51f6f41a', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('lunarwhale', 'lunarwhale@domain.com', 'b8c6a95718d5c7b5e6d34b9b241d917e', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('pixelwizard', 'pixelwizard@domain.com', 'f9e8a7d6c4d3b2f1a1e9d7c8a5f6b7e9', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('thunderhawk', 'thunderhawk@domain.com', 'd1a5e3f7b9c6d4a8e7f2b5c3d1e9f7b6', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('cosmicfox', 'cosmicfox@domain.com', 'e6b5d7a8c4d1f7e3b2a9c6d5f7e4a2b3', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('solartitan', 'solartitan@domain.com', 'b2e8d7f9c6a3d5e7f4b9c6d8e5a7b3f4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('nebularaven', 'nebularaven@domain.com', 'f3e8d7a6b9d5c4a8e2b7c6f1d9e7a8b4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('vortexwolf', 'vortexwolf@domain.com', 'a7b9f3d2e6c5b4f1a8e7c9d6b5f3a8e1', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('starlight', 'starlight@domain.com', 'd6f8b2a7e3c9f5a4b1d7e6a9c3b4f1a5', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('phantomowl', 'phantomowl@domain.com', 'c9e7b5d6f8a3d4b7c6e1a9f3b7c5e6a2', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('galacticlion', 'galacticlion@domain.com', 'e2d8b7f9a6c5d3f4b1a7d6e5c9b2a8f4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('cyberfalcon', 'cyberfalcon@domain.com', 'a9b6f4e2c7d5b3f8a1c6e7d9f2b5a4e3', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('silverdragon', 'silverdragon@domain.com', 'f8c6a7d3e9b5c2d1a7b9f3e6d4b1c5a8', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('shadowtiger', 'shadowtiger@domain.com', 'd3e8f7b6a5c4d2b1a9e7b5c3f8d9a4e6', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('redphoenix', 'redphoenix@domain.com', 'b6c9d3e7f8a5b4d2c1e9a7f3d5b6c8e1', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('stormfalcon', 'stormfalcon@domain.com', 'f1a8d9b5c6e7a2d3b9e6c5a8d4f7b2e3', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('frostfang', 'frostfang@domain.com', 'e7c9a6d4b5f3e2a1d9c7f8a6b4d3e5f7', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('celestialwolf', 'celestialwolf@domain.com', 'a5f3d7b9e8c6d2a7f4b9c3e5d7a1b4f9', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('ironhawk', 'ironhawk@domain.com', 'd9f8b6e7a3d5c4f2b1e7d6a9b5c3e9f2', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('obsidianraven', 'obsidianraven@domain.com', 'f6b9d4c8a7e2b3d5f1a8c7d9e5b2f6a3', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('emberfox', 'emberfox@domain.com', 'b1d9f7c8a5e6b3c7d4f1a9e3b6f5c8a7', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('blackstorm', 'blackstorm@domain.com', 'e5f7a9d3c8b4f1d2a6c9e7b5f3d4b9a1', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('quicksilver', 'quicksilver@domain.com', 'f3d6e9b7a5c4d2e7b1a9f8c3d5b6a9e4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('auroraflame', 'auroraflame@domain.com', 'c6a9e5f7b3d4c8e9f1b7d2a5f3c9a7d6', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('crimsonblade', 'crimsonblade@domain.com', 'b8f3a6d5e7c9b4d2a7f9c6e3d4a1b7e5', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('silentshadow', 'silentshadow@domain.com', 'e9a5b6d3f8c7d4b1a6c9f7e5b2d8f3a1', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('wildfang', 'wildfang@domain.com', 'f4d8b7e6a9c5d2b3e7a6f9c8b3d4e1f7', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('venomtiger', 'venomtiger@domain.com', 'a6c9d8e7f3b5a4c2d1f9e6b3a7f5c4d8', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('nightwolf', 'nightwolf@domain.com', 'd7e9f4b8a6c3d1f2b5a9e7c6d3f8a5b4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('silverfalcon', 'silverfalcon@domain.com', 'b9d8a7f6c3d4e2a5f7b1e9c6d5a8b3f2', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('starfall', 'starfall@domain.com', 'e4b7a9d5f3c6e8a2b9c5d7f4b1a3f6e9', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('thunderblade', 'thunderblade@domain.com', 'c7d9f8b5e3a1d4f6b2a9c6d7f3e5b4a8', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('novafox', 'novafox@domain.com', 'd5e3a9f7c4b1d6e8a7f2c9b3e5d8f4a6', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('ragingraven', 'ragingraven@domain.com', 'b9c7e5a8d6f4b2a3e7d9f1c6b4a9f3d2', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('obsidianwolf', 'obsidianwolf@domain.com', 'f7a9d3c6e8b5d4f1a9e7c3b2d5f8a4c9', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('crystalphoenix', 'crystalphoenix@domain.com', 'e5d7f4b9a6c8e3b1d9f5a3c7b6e8a2d1', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('shadowfang', 'shadowfang@domain.com', 'b8f7a6e5d9c3b1d4a7e9c6b5d3f8a1f4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('stormrider', 'stormrider@domain.com', 'd1e9f7b5c4a3f6d8b9c7a5f2e4b8d3c9', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('lunarfalcon', 'lunarfalcon@domain.com', 'c6f8b7a9d3e2f5b1a7e9c4d5f3b6a8d4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('ironraven', 'ironraven@domain.com', 'e7a9f8d5c4b1e3f6a7b9c2d3f5e8a1c4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('volcaniclion', 'volcaniclion@domain.com', 'b5d9e8f7c3a1d6b2f7e9c4a3b5d2f8a6', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('blazewolf', 'blazewolf@domain.com', 'f3b8e7a9d5c4f1b9d6a7e5c3b9f4d8a1', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('phantomfox', 'phantomfox@domain.com', 'a7e9c6f8b5d2f3a9e4c1d7b3f6a8b9d4', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('emberlion', 'emberlion@domain.com', 'd4b9e7a6c3f8d5e9a7f2c1b6d3f5a9b2', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('frostwolf', 'frostwolf@domain.com', 'e6f9b8c7d4a5f3e2b7c9a3d1f4b5e9d6', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('tigerblade', 'tigerblade@domain.com', 'b7d3e8f4a6c9d1b5a9f2e7c3d6f5b8a2', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('midnightwolf', 'midnightwolf@domain.com', 'a5f8e7b9d6c4b3e2a9f1d7c5b3f6a8d9', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('radiantfalcon', 'radiantfalcon@domain.com', 'f3d7e9b6c8a5b4f1d9e7a3c2b5f6d8a9', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True),
+('shadowlion', 'shadowlion@domain.com', 'e9a3f6b7c8d5e4b1a7d9c3f5b6e8a9d2', NULL, '/static/img/default_pfp.jpg', '/static/img/default_banner.jpg', True);
 
 INSERT INTO "server_message" ("date", "sender_id", "to_id", "content") VALUES
 ('2024-08-25 18:10:54.27476+00',	1,	2, 'coucou'),
diff --git a/docker-compose/requirements/nginx/static/javascript/Page.js b/docker-compose/requirements/nginx/static/javascript/Page.js
index 8dd7c64..00de341 100644
--- a/docker-compose/requirements/nginx/static/javascript/Page.js
+++ b/docker-compose/requirements/nginx/static/javascript/Page.js
@@ -6,13 +6,14 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/25 00:00:21 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/18 20:13:45 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/20 01:02:39 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { MultiOnlineGamePage } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
 import { multiLocalGamePage } from "/static/javascript/multiLocalGame/multiLocalGamePage.js"
 import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
+import { ProfilPage } from "/static/javascript/profilPage/main.js";
 import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
 import { HomePage } from "/static/javascript/homePage/main.js";
 
@@ -25,6 +26,7 @@ class Page
 		{url:'/game', servUrl: '/multiLocalGamePage', class: multiLocalGamePage, name: 'multiLocalGamePage', title: 'PTME - Game'},
 		{url:'/wait_game', servUrl: '/waitingGamePage', class: WaitingGamePage, name: 'waitingGamePage', title: 'PTME - Wait for a game'},
 		{url:'/game', servUrl: '/multiOnlineGamePage', class: MultiOnlineGamePage, name: 'multiOnlineGamePage', title: 'PTME - Game'},
+		{url:'/profil', servUrl: '/profilPage', class: ProfilPage, name: 'profilPage', title: 'PTME - Profil'},
 	]
 
 	constructor()
@@ -51,7 +53,7 @@ class Page
 		this.#showUnknownPage();
 	}
 	
-	changePage(name, isBack = false)
+	changePage(name, isBack = false, arg = null)
 	{
 		if (this.actualPage != null)
 			this.actualPage.dispose();
@@ -74,7 +76,10 @@ class Page
 						document.title = this.availablePages[i].title;
 						if (!isBack)
 							history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
-						this.actualPage.create();
+						if (arg)
+							this.actualPage.create(arg);
+						else
+							this.actualPage.create();
 						console.log("Page created.");
 					})
 				})
diff --git a/docker-compose/requirements/nginx/static/javascript/profilPage/main.js b/docker-compose/requirements/nginx/static/javascript/profilPage/main.js
new file mode 100644
index 0000000..df3717c
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/javascript/profilPage/main.js
@@ -0,0 +1,42 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   main.js                                            :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/09/19 23:08:31 by edbernar          #+#    #+#             */
+/*   Updated: 2024/09/20 01:09:20 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+import { createNotification as CN } from "/static/javascript/notification/main.js";
+import { waitForUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
+import { sendRequest } from "/static/javascript/websocket.js";
+
+
+class ProfilPage
+{
+	static create(userId)
+	{
+		const	profilInfos =	document.getElementsByClassName('profile-info')[0];
+		const	username	=	document.getElementsByTagName('h2')[0];
+		const	pfp			=	document.getElementsByClassName('profile-image')[0];
+		const	banner		=	document.getElementsByClassName('background-card')[0];
+
+		sendRequest("get_user_info", {id: userId});
+		waitForUserInfo().then((userInfo) => {
+			username.innerText = userInfo.username + ' (status not implemented)';
+			pfp.innerHTML = `<img src='${userInfo.pfp}'>`
+			banner.innerHTML = `<img src='${userInfo.banner}'>`
+		});
+	}
+
+	static dispose()
+	{
+		
+	}
+	
+}
+
+export { ProfilPage };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js
index 0162532..7016d64 100644
--- a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js
+++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/18 08:12:24 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/18 22:05:40 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/20 00:23:27 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -34,7 +34,7 @@ function typeSearchUser(userList)
 		div.innerHTML = '<img src="' + user[2] + '">' + '<p>' + user[0] + '</p>';
 		searchResult.appendChild(div);
 		div.addEventListener('click', () => {
-			console.log("Show profil " + user[0]);
+			pageRenderer.changePage('profilPage', false, user[1]);
 		})
 	});
 }
diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeUserInfo.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeUserInfo.js
new file mode 100644
index 0000000..62a4015
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeUserInfo.js
@@ -0,0 +1,37 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   typeUserInfo.js                                    :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/09/20 00:42:04 by edbernar          #+#    #+#             */
+/*   Updated: 2024/09/20 00:48:17 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+let userInfo = [];
+let userInfoAvailable = false;
+let userInfoResolve = null;
+
+function waitForUserInfo() {
+	return new Promise((resolve) => {
+		if (userInfoAvailable)
+			resolve(userInfo);
+		else
+			userInfoResolve = resolve;
+	});
+}
+
+function typeUserInfo(list)
+{
+	userInfo = list;
+	userInfoAvailable = true;
+	if (userInfoResolve)
+	{
+		userInfoResolve(userInfo);
+		userInfoResolve = null;
+	}
+}
+
+export { typeUserInfo, waitForUserInfo };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/websocket.js b/docker-compose/requirements/nginx/static/javascript/websocket.js
index 59a4655..0dd5fb5 100644
--- a/docker-compose/requirements/nginx/static/javascript/websocket.js
+++ b/docker-compose/requirements/nginx/static/javascript/websocket.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/31 22:17:24 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/18 08:31:09 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/20 00:50:56 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -20,6 +20,7 @@ import { typeCreateAccount } from "/static/javascript/typeResponse/typeCreateAcc
 import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.js";
 import { createNotification as CN } from "/static/javascript/notification/main.js";
 import { typeSearchUser } from "/static/javascript/typeResponse/typeSearchUser.js";
+import { typeUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
 import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
 import { typeGame } from "/static/javascript/typeResponse/typeGame.js"
 
@@ -31,8 +32,8 @@ function launchSocket()
 {
 	socket = new WebSocket('/ws');
 
-	const	typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user"];
-	const	functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser];
+	const	typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info"];
+	const	functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo];
 
 	const	errorCode = [9007, 9010, 9011];
 	const	errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];
diff --git a/docker-compose/requirements/nginx/static/style/global/global.css b/docker-compose/requirements/nginx/static/style/global/global.css
new file mode 100644
index 0000000..be88e37
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/style/global/global.css
@@ -0,0 +1,29 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   global.css                                         :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/09/19 23:57:22 by edbernar          #+#    #+#             */
+/*   Updated: 2024/09/19 23:59:46 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	border: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #020202;
+	user-select: none;
+	font-family: "Poppins", sans-serif;
+	font-weight: 500;
+	font-style: normal;
+}
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/style/homePage/home.css b/docker-compose/requirements/nginx/static/style/homePage/home.css
index dfe9637..eaa2f7e 100644
--- a/docker-compose/requirements/nginx/static/style/homePage/home.css
+++ b/docker-compose/requirements/nginx/static/style/homePage/home.css
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/18 13:47:10 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/20 00:07:01 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -36,23 +36,6 @@
 	background: white;
   }
 
-* {
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	border: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #020202;
-	user-select: none;
-	font-family: "Poppins", sans-serif;
-	font-weight: 500;
-	font-style: normal;
-}
-
 
 #topBar {
 	margin-block: 25px;
@@ -138,7 +121,7 @@ body {
     z-index: 500;
 }
 
-.container {
+.containerHomePage {
     display: flex;
     width: 70%;
     height: 80%;
diff --git a/docker-compose/requirements/nginx/static/style/profilPage/profil.css b/docker-compose/requirements/nginx/static/style/profilPage/profil.css
new file mode 100644
index 0000000..a1031f9
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/style/profilPage/profil.css
@@ -0,0 +1,102 @@
+#profil * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+#profil {
+    font-family: "Poppins", sans-serif;
+	font-weight: 500;
+	font-style: normal;
+    background-color: #020202;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    height: 30vh;
+}
+
+#profil .container {
+    width: 70%;
+    height: 200px;
+    background-color: #020202;
+    padding: 20px;
+}
+
+#profil .background-card {
+    width: 100%;
+    height: 250px;
+    background-color: #D3D3D3;
+    margin-bottom: 20px;
+}
+
+#profil .background-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+}
+
+#profil .profile-section {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+#profil .profile-image {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background-color: #D3D3D3;
+    border: 10px solid #020202;
+    position: absolute;
+    top: -100px;
+    left: 40px;
+}
+
+#profil .profile-image img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: 50% 50%;
+}
+
+#profil .profile-info {
+    margin-left: 280px;
+}
+
+#profil .profile-info h2 {
+    color: white;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+}
+
+#profil .online-status {
+    width: 15px;
+    height: 15px;
+    background-color: rgb(17, 173, 17);
+    border-radius: 50%;
+    margin-left: 15px;
+}
+
+#profil .profile-info p {
+    color: white;
+    margin-top: 10px;
+    font-size: 1.2rem;
+}
+
+#profil .content {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 100px;
+}
+
+#profil .dashboard, .history {
+    background-color: #D3D3D3;
+    width: 48%;
+    height: 42vh;
+    padding: 20px;
+    text-align: center;
+}