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:
parent
d2ae3122c9
commit
26e78a82c0
@ -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;
|
||||
|
||||
@ -244,4 +244,4 @@ window.gamelog.clear = async function clear() {
|
||||
await initSkin()
|
||||
await initSettings()
|
||||
await initCapesSelector()
|
||||
showFrame("profile")
|
||||
showFrame("game")
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user