rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean-up css

Browse source
This commit is contained in:
bgoulard 2026-01-10 17:12:37 +01:00 • committed by Maix0
parent 6d2ebc56ea
commit ce02e37b81
3 changed files with 154 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/pages/pong/pong.html
View file

@ -1,22 +1,25 @@
<div class="displaybox">
<div id="mainbox" class="
min-w-25 min-h-8 border border-gray-500 rounded-3xl bg-gray-500
text-white cursor-pointer shadow-[0_2px_0_0_black] transition-all hover:bg-blue-200 active:bg-gray-400
active:translate-y-px active:shadow-[0_2px_0_0_black];">
<div class="flex flex-col gap-2">
<button id="QueueBtn" class="pong-btn-style top-4 left-6">Queue Up</button>
<button id="LocalBtn" class="pong-btn-style top-14 left-6">Local Game</button>
<div class="base-box displaybox">
<div id="mainbox" class="pong-mainboxDisplay rounded-elem">
<div class="grid grid-cols-3">
<div class="flex flex-col gap-2">
<button id="QueueBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Queue Up</button>
<button id="LocalBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Local Game</button>
<button id="TourBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">
<span class="mx-2">Create Tournament</span>
</button> <!-- tournament hdl -->
</div>
<div class="flex flex-col gap-2">
<h1 class="page-title">Pong Box</h1>
<br>
</div>
<div class="flex flex-col gap-2 items-end">
<span id="queue-info" class="fit-all rounded-elem gray-color text-white">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | games-->
<button id="play-info" class="circle-8 pong-btn-style gray-color blue-hover">?</button> <!-- how to play? pong-how-to-play rounded-elem rounded-full blue-hover-->
</div>
</div>
<div class="flex flex-col gap-2 items-end">
<span id="queue-info" class="flex rounded-3xl border-7 border-gray-500 bg-gray-500 top-4 right-6">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | games-->
<button id="play-info" class="pong-how-to-play top-14 right-6">?</button> <!-- how to play?-->
</div>
<br>
<h1 class="text-3xl font-bold text-gray-800">Pong Box</h1>
<br>
<!-- Horizontal Message Box -->
<div id="score-box" class="grid grid-cols-[1fr_auto_1fr] items-center">
<div id="score-box" class="grid grid-cols-3 items-center">
<h1 id="player-left"></h1>
<h1 id="score-board" class="justify-self-center text-p10 font-bold text-gray-800">0:0</h1>
<h1 id="player-right"></h1>
@ -24,8 +27,9 @@
<!-- Pong Box -->
<div class="flex justify-center mt-2">
<div id="pongspace" class="flex flex-col">
<div id="pongbox" class="pongbox-style">
<div id="protips-box" class="pong-protips-box z-50 hidden">
<div id="pongbox" class="pongbox-style base-box">
<div id="pong-end-screen" class="white-color rounded-elem focus-elem hidden">you won</div>
<div id="protips-box" class="white-color rounded-elem focus-elem text-2xl hidden">
up:
<kbd class="pong-protips-key">W</kbd>
down:
@ -36,20 +40,20 @@
<br>
<span class="text-gray-400">local games keys for the left paddle:<br>
up:
<kbd class="pong-protips-key">O</kbd>
<kbd class="disp-key">O</kbd>
down:
<kbd class="pong-protips-key">L</kbd>
<kbd class="disp-key">L</kbd>
</span>
</div>
<button class="pong-rdy-screen" id="readyup-btn">ready!</button>
</div>
<button id="readyup-btn" class="justify-center white-color focus-elem rounded-elem">ready!</button>
<div class="pong-field">
<div id="batleft" class="pong-batleft top-0"></div>
<div id="batleft" class="pong-bat pong-batleft top-0"></div>
<div class="pong-center-line"></div>
<div id="batright" class="pong-batright top-0"></div>
<div id="batright" class="pong-bat pong-batright top-0"></div>
<div id="ball" class="rounded-full border-4 bg-white border-gray-400"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>