Add game frame UI with play button and styling

Introduced a new 'game' frame in logged.html with a title and play button. Added corresponding CSS for layout and button styling in logged.css. Updated JS to show the game frame by default.
This commit is contained in:
Gilles Lazures 2026-01-24 23:50:28 +01:00
parent d2ae3122c9
commit 26e78a82c0
3 changed files with 47 additions and 3 deletions

View File

@ -81,6 +81,16 @@ main > aside > section.frames {
width: calc(100% - 80px);
}
main > aside > section.frames > article.frame.game {
padding-top: 1.7em;
padding-left: 3em;
}
main > aside > section.frames > article.frame.game > h1 {
font-size: 48px;
font-weight: 700;
}
main > aside > section.frames > article,
main > aside > section.frames > article.frame.dynmap > iframe {
width: 100%;
@ -91,6 +101,35 @@ main > aside > section.frames > article.frame.dynmap > iframe {
background-color: #000000;
}
button.play {
margin-top: 10px;
color: #ffffff;
width: 110px;
height: 33px;
border: none;
cursor: pointer;
font-size: 14px;
transition: .3s;
font-weight: 600;
border-radius: 50px;
background-color: #E89032;
}
button.play:hover {
filter: brightness(110%);
}
button.play:disabled {
cursor: not-allowed;
filter: grayscale(100%);
}
button.play > i {
margin-right: 5px;
font-size: 14px;
vertical-align: middle;
}
details {
width: 96%;
min-height: 84px;

View File

@ -244,4 +244,4 @@ window.gamelog.clear = async function clear() {
await initSkin()
await initSettings()
await initCapesSelector()
showFrame("profile")
showFrame("game")

View File

@ -81,8 +81,13 @@
</section>
</div>
</article>
<article class="frame game">
<article class="frame game" hidden>
<h1>
Lentia
</h1>
<button class="play">
<i class="fas fa-play-circle"></i> Jouer
</button>
</article>
<article class="frame dynmap" hidden>
<iframe src="" frameborder="0"></iframe>