Skip to content

Commit d87a30b

Browse files
sebastianjnuwusebastianjnuwu
committed
feat(styles): UI
1 parent 3b4f515 commit d87a30b

File tree

4 files changed

+193
-14
lines changed

4 files changed

+193
-14
lines changed

‎www/index.html

+78-11
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</head>
1212

1313
<body class="ui-cookie">
14-
<!---
14+
1515
<audio id="splash" preload="auto" loop>
1616
<source src="./src/audio/start.mp3" type="audio/mp3">
1717
</audio>
@@ -29,11 +29,11 @@ <h1>Click...</h1>
2929
<h1 class="title">
3030
<i class="fas fa-cookie-bite"></i> Cookie
3131
</h1>
32-
<div class="menu-buttons">
33-
<button id="play">
32+
<div class="menu-buttons">
33+
<button id="play" data-bs-toggle="modal" data-bs-target="#settings-game-start">
3434
<i class="fas fa-gamepad"></i> Jogar
3535
</button>
36-
<button id="shop">
36+
<!--- <button id="shop">
3737
<i class="fas fa-store"></i> Loja
3838
</button>
3939
<button id="stats">
@@ -44,15 +44,82 @@ <h1 class="title">
4444
</button>
4545
<button id="help">
4646
<i class="fas fa-question-circle"></i> Ajuda
47-
</button>
47+
</button>-->
4848
</div>
49-
5049
</start-screen>
51-
style="display: none !important;"
52-
-->
53-
54-
55-
<ui class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
50+
51+
52+
<!-- Botão para abrir o modal -->
53+
<button type="button" class="btn btn-primary position-fixed bottom-0 start-50 translate-middle-x mb-4" data-bs-toggle="modal" data-bs-target="#settingsModal">
54+
Escolher Personagem
55+
</button>
56+
57+
<!-- Modal -->
58+
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
59+
<div class="modal-dialog">
60+
<div class="modal-content">
61+
<div class="modal-header">
62+
<h5 class="modal-title" id="settingsModalLabel">
63+
<i class="fas fa-cog"></i> Configurações</h5>
64+
</div>
65+
<div class="modal-body">
66+
<div class="mb-3">
67+
<label for="nickname" class="form-label">Nickname:</label>
68+
<input type="text" class="form-control" id="nickname" placeholder="Digite seu Nickname">
69+
</div>
70+
71+
<div class="mb-3">
72+
<label for="character" class="form-label">Escolha seu Personagem:</label>
73+
<div id="characterSelect">
74+
<div class="character-option" data-character="cookie1">
75+
<img src="https://example.com/cookie1.png" alt="Biscoito 1">
76+
<span>Biscoito 1</span>
77+
</div>
78+
<div class="character-option" data-character="cookie2">
79+
<img src="https://example.com/cookie2.png" alt="Biscoito 2">
80+
<span>Biscoito 2</span>
81+
</div>
82+
<div class="character-option" data-character="cookie3">
83+
<img src="https://example.com/cookie3.png" alt="Biscoito 3">
84+
<span>Biscoito 3</span>
85+
</div>
86+
<div class="character-option" data-character="cookie4">
87+
<img src="https://example.com/cookie4.png" alt="Biscoito 4">
88+
<span>Biscoito 4</span>
89+
</div>
90+
<div class="character-option" data-character="cookie5">
91+
<img src="https://example.com/cookie5.png" alt="Biscoito 5">
92+
<span>Biscoito 5</span>
93+
</div>
94+
<div class="character-option" data-character="cookie6">
95+
<img src="https://example.com/cookie6.png" alt="Biscoito 6">
96+
<span>Biscoito 6</span>
97+
</div>
98+
</div>
99+
</div>
100+
101+
<!-- Novo campo para código da sala -->
102+
<div class="mb-3">
103+
<label for="roomCode" class="form-label">Código da Sala:</label>
104+
<input type="text" class="form-control" id="roomCode" placeholder="Digite ou crie um código da sala (opcional)">
105+
</div>
106+
107+
<div class="mb-3">
108+
<label for="time" class="form-label">Tempo da Sala (em minutos):</label>
109+
<input type="number" class="form-control" id="time" placeholder="Tempo em minutos" min="1" max="60">
110+
</div>
111+
</div>
112+
<div class="modal-footer">
113+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
114+
<button type="button" class="btn btn-primary" id="startGameBtn">Iniciar Jogo</button>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
120+
121+
122+
<ui style="display: none !important;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
56123

57124
<div class="room-code position-fixed top-0 start-50 translate-middle-x mt-4">
58125
<h3><i class="fas fa-key"></i> Código da Sala:</h3>

‎www/src/js/cookie/start.js

Whitespace-only changes.

‎www/src/js/main.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ $(() => {
1111
$("start-screen button").on("click", () => $("#click")[0].play());
1212

1313
$("#play").on("click", () => {
14-
$("start-screen").remove();
15-
$("ui").show();
14+
15+
// $("start-screen").remove();
16+
// $("ui").show();
1617
});
1718

1819
});

‎www/src/styles/css/ui.css

+112-1
Original file line numberDiff line numberDiff line change
@@ -272,4 +272,115 @@ ui .statistic td .value {
272272
transform: scale(1);
273273
}
274274
}
275-
*/
275+
*/
276+
277+
.modal-dialog {
278+
max-width: 100%;
279+
height: 100vh;
280+
padding: 0;
281+
margin: 0;
282+
}
283+
284+
.modal-content {
285+
height: 100%;
286+
background-color: #f4a460;
287+
color: #4b2e16;
288+
font-family: "Minecraftia", cursive;
289+
}
290+
291+
.modal-header {
292+
background-color: #d2691e;
293+
color: white;
294+
padding: 1rem;
295+
}
296+
297+
.modal-title {
298+
font-size: 2rem;
299+
font-weight: bold;
300+
}
301+
302+
.modal-body {
303+
background-color: #ffe4b5;
304+
padding: 2rem;
305+
overflow: auto;
306+
height: calc(100% - 4rem);
307+
}
308+
309+
#characterSelect {
310+
display: flex;
311+
flex-wrap: nowrap;
312+
overflow-x: auto;
313+
padding-bottom: 1rem;
314+
gap: 15px;
315+
scroll-snap-type: x mandatory;
316+
}
317+
318+
.character-option {
319+
background-color: #f4a460;
320+
border-radius: 10px;
321+
border: 1px solid #d2691e;
322+
padding: 0.75rem;
323+
cursor: pointer;
324+
transition: transform 0.3s ease;
325+
scroll-snap-align: start;
326+
flex-shrink: 0;
327+
width: 120px;
328+
text-align: center;
329+
box-sizing: border-box;
330+
display: flex;
331+
flex-direction: column;
332+
align-items: center;
333+
justify-content: center;
334+
}
335+
336+
.character-option:hover {
337+
transform: scale(1.1);
338+
background-color: #d2691e;
339+
}
340+
341+
.character-option img {
342+
width: 80px;
343+
height: 80px;
344+
border-radius: 50%;
345+
border: 2px solid #4b2e16;
346+
}
347+
348+
.character-option span {
349+
margin-top: 10px;
350+
font-weight: bold;
351+
color: #4b2e16;
352+
text-transform: uppercase;
353+
font-size: 1rem;
354+
}
355+
356+
.form-label {
357+
font-weight: bold;
358+
color: #4b2e16;
359+
}
360+
361+
.form-control, .form-select {
362+
background-color: #f4a460;
363+
color: #4b2e16;
364+
border: 1px solid #d2691e;
365+
border-radius: 8px;
366+
font-family: "Minecraftia", cursive;
367+
padding: 0.75rem;
368+
font-size: 1rem;
369+
}
370+
371+
.modal-footer {
372+
background-color: #d2691e;
373+
padding: 1rem;
374+
}
375+
376+
button.btn-primary {
377+
background-color: #4b2e16;
378+
border-color: #d2691e;
379+
font-weight: bold;
380+
}
381+
382+
button.btn-secondary {
383+
background-color: #f4a460;
384+
border-color: #d2691e;
385+
font-weight: bold;
386+
}

0 commit comments

Comments
 (0)