-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (118 loc) · 6.04 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
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo da Forca</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/adicionar-palavra.css">
<link rel="stylesheet" href="css/jogo.css">
</head>
<header>
<a href="index.html">
<img class="logo-alura" src="img/logo-alura.svg" alt="Logotipo Alura">
</a>
</header>
<body>
<div class="container">
<div class="tela-inicial tela" id="inicial">
<div class="botoes">
<div class="start-buttons">
<button class="start-game" id="iniciar" type="button">Começar a Jogar</button>
<button class=" adicionar-palavra" id="add-word" type="button">Adicionar nova palavra</button>
</div>
</div>
</div>
<div class="jogo d-none tela" id="game">
<div class="forca">
<div class="forca-container ">
<svg width="294" height="360" viewBox="0 0 294 360" fill="none" xmlns="http://www.w3.org/2000/svg"
class="forca">
<!-- BASE -->
<rect y="355" width="294" height="5" rx="2.5" fill="#0A3871" />
<!-- COLUNA -->
<rect x="80.6748" width="4.5" height="360" rx="2.25" fill="#0A3871" class="forca-parte" />
<!-- LINHA -->
<rect x="80.6748" width="177.75" height="4.5" rx="2.25" fill="#0A3871" class="forca-parte" />
<!-- LINHA -->
<rect x="253.925" width="4.5" height="49.5" rx="2.25" fill="#0A3871" class="forca-parte" />
<!-- CABEÇA -->
<path fill-rule="evenodd" clip-rule="evenodd"
d="M256.175 103.5C271.086 103.5 283.175 91.4117 283.175 76.5C283.175 61.5883 271.086 49.5 256.175 49.5C241.263 49.5 229.175 61.5883 229.175 76.5C229.175 91.4117 241.263 103.5 256.175 103.5ZM256.175 108C273.572 108 287.675 93.897 287.675 76.5C287.675 59.103 273.572 45 256.175 45C238.778 45 224.675 59.103 224.675 76.5C224.675 93.897 238.778 108 256.175 108Z"
fill="#0A3871" class="forca-parte" />
<!-- CORPO -->
<rect x="253.925" y="108" width="4.5" height="135" fill="#0A3871" class="forca-parte" />
<!-- BRAÇO DIREITO -->
<rect x="254.749" y="106.875" width="4.4994" height="72" rx="2.2497"
transform="rotate(30 254.749 106.875)" fill="#0A3871" class="forca-parte" />
<!-- BRAÇO ESQUERDO -->
<rect width="4.49914" height="72" rx="2.24957"
transform="matrix(-0.866025 0.5 0.5 0.866025 257.52 106.875)" fill="#0A3871"
class="forca-parte" />
<!-- PERNA DIREITA -->
<rect x="254.748" y="239.625" width="4.50155" height="72" rx="2.25078"
transform="rotate(30 254.748 239.625)" fill="#0A3871" class="forca-parte" />
<!-- PERNA ESQUERDA -->
<rect width="4.50385" height="72" rx="2.25193"
transform="matrix(-0.866025 0.5 0.5 0.866025 257.522 239.624)" fill="#0A3871"
class="forca-parte" />
</svg>
</div>
</div>
<div class="listas">
<ul class="letras-certas" id="corretas">
</ul>
<ul class="letras-erradas" id="incorretas">
</ul>
</div>
<div class="botoes">
<div class="play">
<button class="novo-jogo" id="new-game" type="button">Novo Jogo</button>
</div>
<button class="desistir exit" id="quit" type="button">Desistir</button>
</div>
</div>
<div class="tela-adicionar-palavra d-none tela">
<form>
<textarea id="palavra" type="text" placeholder="Digite uma palavra"></textarea>
<div class="area">
<div class="alerta">
<img src="img/warning.svg" alt="alerta">
<span>Máx. de 8 letras</span>
</div>
<div class="botoes">
<button class="salvar-palavra" id="save" type="button">Salvar e começar</button>
<button class="cancelar" type="button">Cancelar</button>
</div>
</div>
</form>
</div>
<div class="popup-container">
<div class="popup">
<p id="mensagem"></p>
</div>
</div>
</div>
<footer>
<a target=" _blank" href="https://www.linkedin.com/in/moises-ventura">
<img src="img/linkedin_logo.svg" class="logo-link" alt="linkedin">
</a>
<a target="_blank" href="https://github.com/moisesventtura">
<img src="img/github_logo.svg" class="logo-link" alt="github">
</a>
<p class="copyright">© Desenvolvido por Moisés Ventura | 2022</p>
</footer>
<script src="js/core-game.js"></script>
<script src="js/start-game.js"></script>
<script src="js/adicionar-palavra.js"></script>
<script src="js/logica-botoes.js"></script>
<script src="js/desenho.js"></script>
</body>
</html>