-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (128 loc) · 5.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Descubra a emoção do bingo através de um sorteador online! BingoHub é uma ferramenta dedicada a sortear números aleatórios para suas partidas de bingo, contando com o recurso de ditar os números sorteados. Experimente agora a emoção da sorte em suas mãos!">
<title>BingoHub - Sorteador de Bingo</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
/>
</head>
<body>
<main>
<h1 class="mainTitle">BingoHub</h1>
<h2 class="mainSubtitle">Sorteador de Bingo</h2>
<p class="mainText">
Sorteio de bingo com <span id="gamemodeNumber">X</span> números.
</p>
<div class="groupBtnsOptions">
<div>
<label for="selectGamemode">Modo de jogo:</label>
<select
name="selectGamemode"
id="selectGamemode"
class="inputSelect"
>
<option value="75" selected>75 bolas</option>
<option value="80">80 bolas</option>
<option value="85">85 bolas</option>
<option value="90">90 bolas</option>
<option value="95">95 bolas</option>
<option value="100">100 bolas</option>
</select>
</div>
<button class="btn btn--black" id="openConfigModal" aria-label="Abrir configurações">
<i class="bi bi-gear" role="img" aria-label="Ícone de configurações"></i> Configurações
</button>
<div class="modal" id="configModal">
<div class="modalContent">
<div class="modalHeader">
<p class="modalTitle">Configurações</p>
<button class="btn btn__large btn--inv" id="closeConfigModal" aria-label="Fechar configurações">
<i class="bi bi-x-lg" role="img" aria-label="Ícone de fechar"></i>
</button>
</div>
<div class="modalBody">
<div>
<label for="roulleteAudio">Som de roleta:</label>
<input
type="checkbox"
name="roulleteAudio"
id="roulleteAudio"
checked
/>
</div>
<div>
<label for="drawVoice">Ler números com voz:</label>
<input
type="checkbox"
name="drawVoice"
id="drawVoice"
checked
/>
</div>
</div>
</div>
</div>
</div>
<div class="result">
<p class="result__text" id="resultText">INICIE O SORTEIO</p>
</div>
<div class="bingo">
<div class="bingoHub">
<div class="letterHub">
<div class="letterBg letterBg--redBg">
<p class="bingoLetter">B</p>
</div>
<div class="numbersHub"></div>
</div>
<div class="letterHub">
<div class="letterBg letterBg--orangeBg">
<p class="bingoLetter">I</p>
</div>
<div class="numbersHub"></div>
</div>
<div class="letterHub">
<div class="letterBg letterBg--greenBg">
<p class="bingoLetter">N</p>
</div>
<div class="numbersHub"></div>
</div>
<div class="letterHub">
<div class="letterBg letterBg--blueBg">
<p class="bingoLetter">G</p>
</div>
<div class="numbersHub"></div>
</div>
<div class="letterHub">
<div class="letterBg letterBg--purpleBg">
<p class="bingoLetter">O</p>
</div>
<div class="numbersHub"></div>
</div>
</div>
</div>
</main>
<footer>
<div class="groupBtnsPlayBingo">
<button class="btn btn__large btn--black" id="drawBtn">
<i class="bi bi-dice-5" role="img" aria-label="Ícone de um dado"></i>Sortear
</button>
<button class="btn btn__large btn--gray" id="resetBtn">
<i class="bi bi-arrow-counterclockwise" role="img" aria-label="Ícone de reinício"></i>Reiniciar
</button>
</div>
<p class="footerText">
Feito com ❤️ por
<a href="https://github.com/thiagofqs" target="_blank"
>Thiago Freitas</a
>
</p>
<p class="footerText">Versão 1.0.0</p>
</footer>
<script type="module" src="assets/js/script.js"></script>
</body>
</html>