-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinstrucoes.html
156 lines (153 loc) · 7.58 KB
/
instrucoes.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
Libr.as
</title>
<meta name="description" content="Simple landind page" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!--Google Fonts stuff-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,200" />
<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=Margarine&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
<!--Replace with your tailwind.css once created-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
<!-- Define your gradient here - use online tools to find a gradient matching your branding-->
<style>
.gradient {
background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
}
</style>
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.9/gradio.js">
</script>
</head>
<body class="leading-normal tracking-normal text-white" style="font-family: 'Margarine', sans-serif;">
<!--Nav-->
<nav id="header" class="fixed w-full z-30 top-0 text-white bg-white shadow">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
<div class="pl-4 flex items-center">
<a class="toggleColour text-gray-800 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="index.html">
<span class="material-symbols-rounded">
sign_language
</span>
LIBR.AS
</a>
</div>
<div class="block lg:hidden pr-4">
<button id="nav-toggle" class="flex items-center p-1 text-pink-800 hover:text-gray-900 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
<svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden mt-2 lg:mt-0 bg-white lg:bg-transparent text-black p-4 lg:p-0 z-20" id="nav-content">
<ul class="list-reset lg:flex justify-end flex-1 items-center">
<a class="inline-block py-2 px-4 text-black font-bold no-underline" href="index.html">Home</a>
<a
id="navAction"
class="mx-auto lg:mx-0 hover:underline bg-gray-100 text-gray-800 font-bold rounded-full mt-4 lg:mt-0 py-4 px-8 shadow opacity-75 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
href="game.html?__theme=light"
>
Jogar
</a>
</div>
</div>
<hr class="border-b border-gray-100 opacity-25 my-0 py-0" />
</nav>
<!--Body-->
<body>
<div style="margin: 100px;">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Instruções
</h2>
<div class="text-center">
<p class="text-lg text-gray-800">
O jogo consiste em adivinhar a palavra que está sendo representada pelas letras que aparecem na tela.
Para isso, você deve fazer o sinal da letra que acha que compõe a palavra.
<br>
<br>
Visando melhorar a acurácia do modelo, nem todos os sinais estão disponíveis. Segue abaixo uma lista das
letras que estão disponíveis e seus respectivos sinais em Libras:
</p>
<img src="images/alfabeto.png" alt="Logo" class="w-1/2 mx-auto">
</div></div>
<div style="margin: 300px;"></div>
</body>
<!--Footer-->
<footer class="bg-white">
<div class="container mx-auto px-8">
<div class="w-full flex flex-col md:flex-row py-6">
<div class="flex-1 mb-6 text-black">
<a class="text-pink-600 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#">
<span class="material-symbols-rounded">
sign_language
</span>
LIBR.AS
</a>
</div>
<div class="flex-1">
<p class="uppercase text-gray-500 md:mb-6">Links</p>
<ul class="list-reset mb-6">
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">FAQ</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Help</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Support</a>
</li>
</ul>
</div>
<div class="flex-1">
<p class="uppercase text-gray-500 md:mb-6">Legal</p>
<ul class="list-reset mb-6">
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Terms</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Privacy</a>
</li>
</ul>
</div>
<div class="flex-1">
<p class="uppercase text-gray-500 md:mb-6">Social</p>
<ul class="list-reset mb-6">
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Facebook</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Linkedin</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Twitter</a>
</li>
</ul>
</div>
<div class="flex-1">
<p class="uppercase text-gray-500 md:mb-6">Company</p>
<ul class="list-reset mb-6">
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Official Blog</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">About Us</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<a href="https://www.freepik.com/free-photos-vectors/background" class="text-gray-500">Background vector created by freepik - www.freepik.com</a>
</footer>
</body>
</html>