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

Site :

Browse Source 
- Add skin select (display: none;)
    - Re add "Click on the screen to play"
This commit is contained in:
Mathis Degryck
2024-09-24 16:01:39 +02:00
parent c9593f75a2
commit 5d46b06669
4 changed files with 73 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

10
docker-compose/requirements/nginx/static/style/homePage/home.css
View File

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

49
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

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