-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (105 loc) · 5.8 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
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;700&family=Smooch&display=swap" rel="stylesheet">
<title>4K</title>
<link rel="stylesheet" href="./src/styles/global.css">
<link rel="stylesheet" href="./src/styles/header.css">
<link rel="stylesheet" href="./src/styles/start/start.css">
<link rel="stylesheet" href="./src/styles/start/menu-start.css">
<link rel="stylesheet" href="./src/styles/start/menu-word.css">
<link rel="stylesheet" href="./src/styles/game/game.css">
<link rel="stylesheet" href="./src/styles/game/game-box.css">
<link rel="stylesheet" href="./src/styles/game/result-box.css">
<link rel="stylesheet" href="./src/styles/game/control-box.css">
</head>
<body class="container" data-app>
<header class="header wrap">
<button class="header__darkmode-button" data-dark-mode data-button="dark-mode">
<img class="header__darkmode-image--normal" src="./src/assets/icon/moon-light.svg" data-button="image-fix"/>
<img class="header__darkmode-image--sun" src="./src/assets/icon/sun-dim-light.svg" data-button="image-fix" />
<img class="header__darkmode-image--moon"src="./src/assets/icon/moon-light-d.svg" data-button="image-fix"/>
</button>
<a class="header__link" href="https://github.com/p4kz/four-k" target="_blank">p4k</a>
</header>
<main>
<div class="start" data-start>
<div class="start-box">
<div class="menu-start">
<div class="menu-start-box" data-button="close-event-start-game">
<button class="menu-start-box__button--start" data-button="start-game">Começar a jogar</button>
<div class="menu-start-box__dificult hide" data-mode-box>
<div class="menu-start-box__dificult--box event" data-mode-event>
<button class="menu-start-box__dificult--btn-random" data-button="random-mode">Random</button>
<button class="menu-start-box__dificult--btn-normal" data-button="normal-mode">Normal</button>
<button class="menu-start-box__dificult--btn-hard" data-button="hard-mode">Hard</button>
</div>
</div>
</div>
<button class="menu-start__button--addword" data-button="add-new-word">Adicionar palavra</button>
</div>
<div class="menu-word" data-menu-word>
<div class="menu-word__header">
<div class="menu-word__header--response-box">
<p class="menu-word__header--success" data-resp="success"></p>
<p class="menu-word__header--invalid" data-resp="invalid"></p>
</div>
<div class="menu-word__header--action-box">
<button class="menu-word__header--button-info" data-button="info">info</button>
<button class="menu-word__header--button-exit" data-button="exit">X</button>
</div>
</div>
<input class="menu-word__input" type="text" placeholder="digite a palavra aqui..." data-text="user-word">
<div class="menu-word__info" data-menu-info data-button="close-event-info">
<ul class="menu-word__info--list" data-menu-info="list">
<h4 class="menu-word__info--title"><strong>A palavra tem que ser :</strong></h4>
<li class="menu-word__info--item">Menor que 8 letras</li>
<li class="menu-word__info--item">Maior que 3 letras</li>
<li class="menu-word__info--item">Sem acentos</li>
<li class="menu-word__info--item">Sem numeros</li>
<li class="menu-word__info--item">Sem simbolos</li>
</ul>
<p class="menu-word__info--click">Click para fechar</p>
</div>
<div class="menu-word__button-box">
<button class="menu-word__button-box--save-word" data-button="save-new-word">Salvar</button>
</div>
</div>
</div>
</div>
<div class="game" data-game>
<div class="game-box" data-game="event">
<div class="game__image--box">
<img class="game__image" src="./src/assets/img/try0.svg" data-image>
</div>
<div class="game__result-box">
<p class="game__result-box--text" data-info-response>A palavra era: </p>
<p class="game__result-box--resp" data-response></p>
</div>
<div class="game__control-box">
<p class="game__control-box--text" data-control-text>Escolha uma letra para começar jogar</p>
<div class="game__control-box--keyboard" data-control-keyboard>
<div class="game__control-box--response" data-control-response></div>
</div>
<p class="score-box">Tentativas: <span class="attempts">0</span> / <span class="max-attempts" data-attempts></span></p>
<div class="game__control-box--buttons">
<button class="game__control-box--button-reset" onclick="reset()">Novo jogo</button>
<button class="game__control-box--surrender" onclick="surrender()">Desistir</button>
</div>
</div>
<div class="game__link">
<p>Com 💜</p><a href="https://github.com/p4kz" target="_blank">p4kz</a>
</div>
</div>
</div>
</main>
<script src="./src/js/start.js"></script>
<script src="./src/js/gameRework.js"></script>
<script type="module" src="./src/js/main.js"></script>
</body>
</html>