-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (132 loc) · 4.4 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
135
136
137
138
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title>Reaction App</title>
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#212529" />
<meta name="description" content="The Reaction App." />
<link rel="apple-touch-icon" href="./assets/logo192.png" />
<link rel="manifest" href="./assets/manifest.json" />
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
<link
href="https://unpkg.com/nes.css@latest/css/nes.min.css"
rel="stylesheet"
/>
<link href="./assets/style.css" rel="stylesheet" />
</head>
<body>
<section class="container nes-container is-centered is-white">
<div id="back" class="hidden">
<i class="nes-icon close is-small"></i>
</div>
<p id="title">REACTION</p>
</section>
<section id="area" class="container flex main-area">
<div id="light" class="nes-container is-rounded hidden"></div>
<section id="welcome" class="full-size nes-container-padding">
<section class="message-list">
<section class="message">
<div class="nes-balloon is-dark nes-container-padding">
<p>Você sabe o seu tempo de reação?</p>
</div>
<div class="nes-balloon is-dark nes-container-padding hidden-sm">
<p>
Um quadrado aparecerá na tela durante
<strong>1 (um) segundo</strong>, clique no botão de mesma cor.
<span class="hidden-sm"
>Se quiser, use as teclas <strong>Q, W, E, R</strong>.</span
>
</p>
</div>
<div class="nes-balloon from-left is-dark nes-container-padding">
<p>Clique no PLAY e vamos descobrir.</p>
</div>
<div class="avatar-bcrikko">
<i class="nes-bcrikko"></i>
</div>
</section>
</section>
</section>
<section id="result" class="full-size nes-container-padding hidden">
<section class="message-list">
<section class="message">
<div class="nes-balloon is-dark nes-container-padding">
<p>
<span class="hidden-sm">Você terminou as 10 tentativas.<br /></span>
Vamos ver o seu resultado?
</p>
</div>
<div class="nes-balloon from-left is-dark nes-container-padding">
<p>
<span class="hidden-sm">Você obteve um</span>
Score = <span id="result-score"></span> pts<br />
e Tempo médio = <span id="result-time"></span> ms.
</p>
</div>
<div class="avatar-bcrikko">
<i class="nes-bcrikko"></i>
</div>
</section>
</section>
</section>
</section>
<section
id="play"
class="container flex nes-container nes-container-padding is-white"
>
<div class="grow1">
<button type="button" id="to-play" class="full-size nes-btn">
PLAY
</button>
</div>
</section>
<section
id="controls"
class="container flex nes-container nes-container-padding is-white hidden"
>
<div class="grow1">
<button
type="button"
id="q"
class="full-size nes-btn is-primary text-right"
>
<span class="hidden-sm">q</span>
</button>
</div>
<div class="grow1">
<button
type="button"
id="w"
class="full-size nes-btn is-success text-right"
>
<span class="hidden-sm">w</span>
</button>
</div>
<div class="grow1">
<button
type="button"
id="e"
class="full-size nes-btn is-warning text-right"
>
<span class="hidden-sm">e</span>
</button>
</div>
<div class="grow1">
<button
type="button"
id="r"
class="full-size nes-btn is-error text-right"
>
<span class="hidden-sm">r</span>
</button>
</div>
</section>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script async src="./assets/script.js"></script>
</body>
</html>