From 2311103d0786b91b327bc36d81f5b70e415b7640 Mon Sep 17 00:00:00 2001
From: Mathis Degryck <madegryc@2B2.42angouleme.fr>
Date: Mon, 23 Sep 2024 17:56:18 +0200
Subject: [PATCH] Site :     - Add history HTML CSS     - Add real text
 "Project"     - Add presentation text EDDY, MATHIS

---
 .../server/server/templates/homePage.html     | 24 +++---
 .../server/server/templates/profilPage.html   | 12 +++
 .../nginx/static/style/profilPage/profil.css  | 85 ++++++++++++++++++-
 3 files changed, 104 insertions(+), 17 deletions(-)

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 0ecff03..e7cb084 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
@@ -66,8 +66,6 @@
 		</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">
@@ -77,9 +75,7 @@
 		<h1>Chat</h1>
 		<div id="topChatCross"><span>&times;</span></div>
 	</div>
-	<div id="messageListChatHome">
-		<p id="infoChat">You are not connected to the chat</p>
-	</div>
+	<p id="infoChat">You are not connected to the chat</p>
 </div>
 <section class="homeSection">
 </section>
@@ -87,8 +83,8 @@
 	<img id="firstBall" src="/static/img/homePage/ball3D2.png">
 	<img id="secondBall" src="/static/img/homePage/ball3D3.png">
 	<div class="relative">
-		<p id="firstText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p>
-		<p id="secondText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p>
+		<p id="firstText">Pong is one of the earliest arcade video games, released in 1972 by Atari, where two players control vertical paddles on opposite sides of the screen to bounce a ball back and forth. The objective is to score points by making the ball pass the opponent's paddle, much like a digital version of table tennis.</p>
+		<p id="secondText">The "ft_transcendence" project is a full-stack web application development challenge that involves creating a multiplayer game platform, integrating features like real-time gameplay, user authentication, chat, and social interactions, GDPR friendly.</p>
 	</div>
 </section>
 <section class="homeSection" id="authors">
@@ -96,7 +92,7 @@
 		<div class="team-member">
 			<img src="/static/img/homePage/tomoron.png" alt="Tom" class="team-photo">
 			<h2>Tom, tomoron</h2>
-			<p>Partie Backend</p>
+			<p>Backend</p>
 			<div class="info">
 				<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
 			</div>
@@ -104,23 +100,23 @@
 		<div class="team-member">
 			<img src="/static/img/homePage/madegryc.png" alt="Mathis" class="team-photo">
 			<h2>Mathis, madegryc</h2>
-			<p>Partie Frontend / Design</p>
+			<p>Frontend / Design</p>
 			<div class="info">
-				<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
+				<p>Mathis took charge of the front-end development, user interface and experience (UI/UX), overseeing the overall design and contributing to the conceptualization, ensuring both aesthetic appeal and ergonomic functionality.</p>
 			</div>
 		</div>
 		<div class="team-member">
 			<img src="/static/img/homePage/edbernard.png" alt="Eddy" class="team-photo">
 			<h2>Eddy, edbernar</h2>
-			<p>Partie Midend</p>
+			<p>Full-stack</p>
 			<div class="info">
-				<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
+				<p>Eddy worked on the fundamentals of back-end and front-end development, as well as game development. He have a solid grasp of Python and JavaScript, which allowed him to contribute from all angles and be involved in every aspect of the project.</p>
 			</div>
 		</div>
 		<div class="team-member">
 			<img src="/static/img/homePage/hubourge.png" alt="Hugo" class="team-photo">
 			<h2>Hugo, hubourge</h2>
-			<p>Partie jeu</p>
+			<p>Game</p>
 			<div class="info">
 				<p>Tom est spécialisé en développement backend et travaille principalement avec Node.js et MongoDB.</p>
 			</div>
@@ -130,7 +126,7 @@
 <footer>
 	<div class="footer-content">
 		<div class="footer-left">
-			<h1>METH</h1>
+			<h1>PTME</h1>
 			<p>ft_transcendance project<br>for 42 shcool</p>
 		</div>
 		<div class="footer-right">
diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
index 3d27b00..a77561c 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
@@ -1,3 +1,4 @@
+<div id="cross-profil"><span>&larr;</span></div>
 <div id="profil">
     <div class="container">
         <!-- Profile Section -->
@@ -22,6 +23,17 @@
             </div>
             <div class="history">
                 <h3>History</h3>
+                <div class="history-card">
+                    <div id="user-1">
+                        <div class="profile-img-history"></div>
+                        <p>User1</p>
+                    </div>
+                    <p id="score-history">0 - 0</p>
+                    <div id="user-2">
+                        <div class="profile-img-history"></div>
+                        <p>User2</p>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/docker-compose/requirements/nginx/static/style/profilPage/profil.css b/docker-compose/requirements/nginx/static/style/profilPage/profil.css
index b016d4e..26ce2d1 100644
--- a/docker-compose/requirements/nginx/static/style/profilPage/profil.css
+++ b/docker-compose/requirements/nginx/static/style/profilPage/profil.css
@@ -16,6 +16,14 @@
     height: 30vh;
 }
 
+#cross-profil{
+    color: white;
+    position: absolute;
+    font-size: 64px;
+    top: 40px;
+    left: 40px;
+}
+
 #profil .container {
     width: 70%;
     height: 200px;
@@ -94,7 +102,7 @@
     margin-top: 100px;
 }
 
-#profil .dashboard, .history {
+#profil .dashboard {
     background-color: #D3D3D3;
     width: 48%;
     height: 42vh;
@@ -102,9 +110,62 @@
     text-align: center;
 }
 
+#profil .history {
+    background-color: #D3D3D3;
+    width: 48%;
+    height: 42vh;
+    padding: 20px;
+    text-align: center;
+}
+
+#profil .history-card {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    background-color: #E74040;
+    height: 110px;
+    padding: 15px;
+    padding-inline: 40px;
+    transition: 0.3s ease;
+}
+
+#profil .history-card:hover {
+    transform: scale(1.02);
+}
+
+#profil .history-card p {
+    color: white;
+}
+
+
+#profil .history-card #score-history {
+    display: flex;
+    align-items: center;
+    font-size: 35px;
+}
+
+
+#profil .profile-img-history{
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: #D3D3D3;
+    margin-bottom: 5px;
+}
+
+#profil .profile-img-history-enemy {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: #D3D3D3;
+    margin-left: auto;
+}
+
 #profil .container .rightButtonDiv {
     margin-left: auto;
     margin-right: 50px;
+    display: flex;
+    gap: 20px;
 }
 
 #profil .container .rightButtonDiv img {
@@ -116,6 +177,24 @@
     cursor: pointer;
 }
 
+#profil .user-1 {
+    display: flex;
+    align-items: center;
+}
+
+#profil .user-2 {
+    display: flex;
+    align-items: center;
+}
+
+#profil .versus{
+    color: white;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 #profil .container .editPen {
     position: absolute;
     z-index: 10;
@@ -144,8 +223,8 @@
 }
 
 #profil .container .editPenPfp {
-    width: 50%;
-    height: 50%;
+    width: 30%;
+    height: 30%;
     position: absolute;
     top: 50%;
     left: 50%;