-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (123 loc) · 4.65 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 class="h-full w-full" 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, maximum-scale=1.0"
/>
<meta name="description" content="A score marker for the game truco." />
<meta name="theme-color" content="#222222" />
<script src="https://unpkg.com/phosphor-icons"></script>
<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=Lobster&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="./assets/favicon.svg" type="image/x-icon" />
<link href="/dist/output.css" rel="stylesheet" />
<link rel="manifest" href="manifest.json" />
<title>Marca Truko</title>
</head>
<body
class="h-full w-full flex flex-col bg-gray-400 text-gray-100 select-none overflow-hidden"
>
<header
class="h-16 px-4 bg-gray-400 border-b-2 border-solid border-gray-100 flex items-center justify-between"
>
<i id="logo" class="ph-spade icon ph-2x" alt="Logo da Marca Truko"></i>
<h1 class="font-medium text-4xl text-red-100 font-lobster">
Marca Truko
</h1>
<button
type="button"
data-js="reset-button"
class="ph-arrow-clockwise ph-2x highlight-none active:rotate-45 active:text-red-100 active:scale-110 transition-duration"
alt="Botão de reset"
></button>
</header>
<main class="grow bg-gray-200">
<div
class="w-1/2 h-full flex float-left flex-col items-center justify-between font-mono border-r-2 border-solid border-gray-400"
>
<div>
<input
type="text"
spellcheck="false"
class="placeholder:italic placeholder:text-gray-300 w-full bg-gray-200 uppercase text-6xl font-semibold pt-8 px-4 text-shadow text-center outline-none"
placeholder="NÓS"
value="NÓS"
/>
<p
data-js="first-team-wins"
class="text-center text-red-100 text-4xl text-shadow"
>
0
</p>
</div>
<p data-js="first-team-score" class="text-8xl text-shadow">0</p>
<div class="flex flex-col items-center pb-8">
<button
type="button"
data-js="first-team-add-score-button"
class="ph-arrow-circle-up ph-7x active:text-red-100 active:scale-110 text-shadow highlight-none transition-duration"
></button>
<button
type="button"
data-js="first-team-remove-score-button"
class="ph-arrow-circle-down ph-7x active:text-red-100 active:scale-110 text-shadow highlight-none transition-duration"
></button>
</div>
</div>
<div
class="w-1/2 h-full flex float-left flex-col items-center justify-between font-mono border-l-2 border-solid border-gray-400"
>
<div>
<input
type="text"
spellcheck="false"
class="placeholder:italic placeholder:text-gray-300 w-full bg-gray-200 uppercase text-6xl font-semibold pt-8 px-4 text-shadow text-center outline-none"
placeholder="ELES"
value="ELES"
/>
<p
data-js="second-team-wins"
class="text-center text-red-100 text-4xl text-shadow"
>
0
</p>
</div>
<p data-js="second-team-score" class="text-8xl text-shadow">0</p>
<div class="flex flex-col items-center pb-8">
<button
type="button"
data-js="second-team-add-score-button"
class="ph-arrow-circle-up ph-7x active:text-red-100 active:scale-110 text-shadow highlight-none transition-duration"
></button>
<button
type="button"
data-js="second-team-remove-score-button"
class="ph-arrow-circle-down ph-7x active:text-red-100 active:scale-110 text-shadow highlight-none transition-duration"
></button>
</div>
</div>
</main>
<footer
class="h-20 bg-gray-400 border-t-2 border-solid border-gray-100 flex justify-center items-center"
>
<button
type="button"
data-js="truco-button"
class="ph-club ph-3x active:text-red-100 active:scale-110 highlight-none transition-duration"
></button>
</footer>
</body>
<script src="./main.js"></script>
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js");
}
</script>
</html>