tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site :

Browse Source 
- Add history HTML CSS
    - Add real text "Project"
    - Add presentation text EDDY, MATHIS
This commit is contained in:
Mathis Degryck
2024-09-23 17:56:18 +02:00
parent 1bf35086fa
commit 2311103d07
3 changed files with 104 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
</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">

12
docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
View File

@ -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>

85
docker-compose/requirements/nginx/static/style/profilPage/profil.css
View File

@ -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%;