-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
288 lines (258 loc) · 17.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
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!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" />
<title>Login • League of Legends</title>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/main.css" />
<script defer src="js/script.js"></script>
</head>
<body>
<section class="l-content">
<img class="c-logo" src="images/logo-riot-games.png" alt="Logo Riot Games" />
<form class="l-form js-form" novalidate>
<h1 class="c-title">Fazer login</h1>
<fieldset class="l-credential-container">
<div class="l-input-validation-container">
<label class="c-text-input-field input-field">
<span>NOME DE USUÁRIO</span>
<input type="text" name="username" id="iusername" placeholder="" autocomplete="username" required />
</label>
<div class="c-error-message error">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
</svg>
<span class="js-username-error" aria-live="polite"></span>
</div>
</div>
<div class="l-input-validation-container">
<label class="c-text-input-field input-field">
<span>SENHA</span>
<input type="password" name="password" id="ipassword" placeholder="" autocomplete="current-password" required />
<button type="button" class="btn-icon js-toggle-password-visibility" role="switch" aria-checked="false">
<img class="icon" src="images/icons/icon-visibility.svg" alt="" />
<span class="is-visually-hidden">show password</span>
</button>
</label>
<div class="c-error-message error">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
</svg>
<span class="js-password-error" aria-live="polite"></span>
</div>
</div>
</fieldset>
<fieldset class="l-other-login-options">
<button type="button" class="c-btn c-btn--full c-btn--facebook">
<svg class="icon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Platform=Facebook, Color=Original" clip-path="url(#clip0_17_24)">
<path id="c" d="M48 24C48 10.7453 37.2547 0 24 0C10.7453 0 0 10.7453 0 24C0 35.255 7.74912 44.6995 18.2026 47.2934V31.3344H13.2538V24H18.2026V20.8397C18.2026 12.671 21.8995 8.8848 29.9194 8.8848C31.44 8.8848 34.0637 9.18336 35.137 9.48096V16.129C34.5706 16.0694 33.5866 16.0397 32.3645 16.0397C28.4294 16.0397 26.9088 17.5306 26.9088 21.4061V24H34.7482L33.4013 31.3344H26.9088V47.8243C38.7926 46.3891 48.001 36.2707 48.001 24H48Z" fill="#0866FF"/>
<path id="d" d="M33.4003 31.3344L34.7472 24H26.9078V21.4061C26.9078 17.5306 28.4285 16.0397 32.3635 16.0397C33.5856 16.0397 34.5696 16.0694 35.136 16.129V9.48096C34.0627 9.1824 31.439 8.8848 29.9184 8.8848C21.8986 8.8848 18.2016 12.671 18.2016 20.8397V24H13.2528V31.3344H18.2016V47.2934C20.0582 47.7542 22.0003 48 23.999 48C24.983 48 25.9536 47.9395 26.9069 47.8243V31.3344H33.3994H33.4003Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_17_24">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="is-visually-hidden">Fazer login com o Facebook</span>
</button>
<button type="button" class="c-btn c-btn--full c-btn--google">
<svg class="icon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Vector">
<path id="Vector_2" d="M23.9996 19.6363V28.9309H36.916C36.3488 31.9199 34.6468 34.4509 32.0941 36.1527L39.8831 42.1964C44.4213 38.0075 47.0395 31.8547 47.0395 24.5456C47.0395 22.8438 46.8868 21.2073 46.6031 19.6366L23.9996 19.6363Z" fill="#4285F4"/>
<path id="Vector_3" d="M10.5494 28.568L8.79263 29.9128L2.57434 34.7564C6.52342 42.589 14.6174 48 23.9991 48C30.4789 48 35.9116 45.8618 39.8826 42.1964L32.0936 36.1528C29.9554 37.5927 27.2281 38.4656 23.9991 38.4656C17.7591 38.4656 12.4575 34.2547 10.5592 28.5819L10.5494 28.568Z" fill="#34A853"/>
<path id="Vector_4" d="M2.57436 13.2436C0.938084 16.4726 0 20.1163 0 23.9999C0 27.8834 0.938084 31.5271 2.57436 34.7561C2.57436 34.7777 10.5599 28.5597 10.5599 28.5597C10.08 27.1197 9.79624 25.5925 9.79624 23.9996C9.79624 22.4067 10.08 20.8795 10.5599 19.4395L2.57436 13.2436Z" fill="#FBBC05"/>
<path id="Vector_5" d="M23.9996 9.55636C27.5342 9.55636 30.676 10.7781 33.1851 13.1345L40.0577 6.2619C35.8904 2.37833 30.4797 0 23.9996 0C14.6179 0 6.52342 5.38908 2.57434 13.2437L10.5597 19.44C12.4578 13.7672 17.7596 9.55636 23.9996 9.55636Z" fill="#EA4335"/>
</g>
</svg>
<span class="is-visually-hidden">Fazer login com o Google</span>
</button>
<button type="button" class="c-btn c-btn--full c-btn--apple">
<svg class="icon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Platform=Apple, Color=Original" clip-path="url(#clip0_17_53)">
<path id="Vector" d="M43.5839 37.4071C42.858 39.0841 41.9988 40.6277 41.0033 42.047C39.6463 43.9817 38.5352 45.3209 37.6789 46.0646C36.3516 47.2853 34.9294 47.9105 33.4065 47.946C32.3132 47.946 30.9947 47.6349 29.4599 47.0039C27.9201 46.3757 26.5051 46.0646 25.2112 46.0646C23.8542 46.0646 22.3988 46.3757 20.8421 47.0039C19.2831 47.6349 18.0271 47.9638 17.0668 47.9964C15.6064 48.0586 14.1508 47.4157 12.6978 46.0646C11.7704 45.2558 10.6105 43.8691 9.22087 41.9047C7.72995 39.807 6.50422 37.3745 5.54395 34.6013C4.51554 31.6058 4 28.7051 4 25.8969C4 22.6801 4.69509 19.9057 6.08734 17.5807C7.18153 15.7132 8.63718 14.2401 10.4591 13.1586C12.2809 12.0772 14.2495 11.5261 16.3694 11.4908C17.5293 11.4908 19.0505 11.8497 20.9408 12.5548C22.8258 13.2623 24.0361 13.6212 24.5667 13.6212C24.9635 13.6212 26.308 13.2016 28.5874 12.3652C30.7428 11.5895 32.562 11.2683 34.0524 11.3948C38.0908 11.7208 41.1247 13.3127 43.1425 16.1808C39.5307 18.3692 37.7441 21.4342 37.7797 25.3663C37.8123 28.429 38.9233 30.9777 41.107 33.0013C42.0966 33.9405 43.2017 34.6664 44.4313 35.182C44.1646 35.9553 43.8832 36.696 43.5839 37.4071ZM34.322 0.960792C34.322 3.36134 33.445 5.60273 31.6969 7.67733C29.5873 10.1436 27.0357 11.5688 24.2687 11.3439C24.2334 11.0559 24.213 10.7528 24.213 10.4343C24.213 8.12976 25.2162 5.66346 26.9978 3.64693C27.8872 2.62593 29.0185 1.77697 30.3903 1.09975C31.7591 0.432629 33.0539 0.0636968 34.2716 0.000518799C34.3072 0.321435 34.322 0.642371 34.322 0.960761V0.960792Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_17_53">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="is-visually-hidden">Fazer login com a Apple</span>
</button>
<button type="button" class="c-btn c-btn--full c-btn--xbox">
<svg class="icon" width="38" height="36" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9714 35.5317C10.6414 34.4247 5.81342 31.3237 5.81342 29.6497C5.81342 27.4087 10.7134 21.1357 16.0854 16.5017L19.1074 13.8937L20.4624 14.8377C22.5914 16.3207 29.4034 23.3767 30.9274 25.6777C33.4004 29.4107 33.2904 30.2427 30.0094 32.6037C26.0534 35.4517 19.5844 36.7107 14.9714 35.5317ZM3.76242 27.8207C0.939422 23.6737 0.0324223 16.8457 1.71542 12.4127C2.75842 9.66768 5.21642 5.92868 6.55542 5.05168C7.52242 4.41769 7.70842 4.42469 9.03842 5.14069C9.82942 5.56668 11.4804 6.81468 12.7074 7.91368L14.9374 9.91068L12.5494 12.8697C7.74942 18.8137 4.05242 26.2327 4.76842 28.4857C5.12842 29.6227 4.87542 29.4557 3.76242 27.8207ZM33.6334 27.6917C33.5854 24.2237 30.8714 18.9837 25.9584 12.8737L23.5834 9.91969L25.7134 7.96569C26.8844 6.89069 28.5484 5.63269 29.4114 5.17069L30.9804 4.33069L32.7184 6.02469C33.6734 6.95669 35.0694 8.96169 35.8194 10.4817C36.9934 12.8617 37.2024 13.7867 37.3294 17.1697C37.4984 21.7067 36.8084 24.6357 34.8944 27.4937L33.6564 29.3447L33.6334 27.6917ZM17.1314 5.13769C16.1964 4.58469 14.2334 3.80769 12.7684 3.41069C11.3034 3.01469 10.1914 2.55069 10.2964 2.37969C10.4024 2.20969 11.8434 1.63469 13.5004 1.10169C17.8374 -0.293311 22.9694 0.0146885 26.7944 1.89769C28.2824 2.62969 29.0984 3.13169 28.6084 3.01269C27.5154 2.74769 22.7534 4.18969 20.8474 5.36369C19.1744 6.39469 19.2624 6.39969 17.1314 5.13769Z" fill="white"/>
</svg>
<span class="is-visually-hidden">Fazer login com o Xbox</span>
</button>
</fieldset>
<fieldset class="l-checkbox-container">
<label for="i-remember-me" class="c-checkbox-input-field">
<input type="checkbox" name="remember-me" id="i-remember-me" />
<span>Manter login</span>
</label>
</fieldset>
<div class="l-submit-button-container">
<button type="submit" class="c-btn c-btn--submit js-btn-submit" aria-disabled="true">
<svg aria-hidden="true" class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1648 16.32L16.2544 12.16L12.1648 8" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 12H15.4576" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="is-visually-hidden">Fazer login</span>
</button>
</div>
</form>
<footer class="l-footer">
<a href="#" class="c-link">NÃO CONSEGUE INICIAR A SESSÃO?</a>
<a href="#" class="c-link">CRIAR CONTA</a>
</footer>
</section>
<div class="l-dropdown-menu c-dropdown-menu js-dropdow-menu">
<button class="toggle js-menu-toggle" aria-expanded="false" aria-controls="ilist-options">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g clip-path="url(#clip0_1236_757)">
<path d="M7 7C8.79493 7 10.25 5.54493 10.25 3.75C10.25 1.95507 8.79493 0.5 7 0.5C5.20507 0.5 3.75 1.95507 3.75 3.75C3.75 5.54493 5.20507 7 7 7Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.18 13.5C12.7602 12.1908 11.9355 11.0488 10.8248 10.2386C9.71409 9.4284 8.3748 8.99182 7 8.99182C5.6252 8.99182 4.28591 9.4284 3.17522 10.2386C2.06453 11.0488 1.23982 12.1908 0.82 13.5H13.18Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
<span class="is-visually-hidden">Expandir menu</span>
</button>
<ul class="list-options" id="ilist-options">
<li>
<button class="option">CONFIGURAÇÕES</button>
</li>
<li>
<button class="option" aria-disabled="true">ENCERRAR SESSÃO</button>
</li>
<li>
<button class="option" aria-disabled="true">SAIR</button>
</li>
</ul>
</div>
<aside class="c-wallpaper"></aside>
<section class="c-modal l-modal">
<a href="#icontent" class="c-skip-link">Ir para o conteúdo</a>
<aside>
<nav>
<h2>CONFIGURAÇÕES</h2>
<ul>
<li><button aria-current="true">CLIENT RIOT</button></li>
<li><button>LEGENDS OF RUNETERRA</button></li>
<li><button>LEAGUE OF LEGENDS</button></li>
</ul>
</nav>
<footer>
<ul>
<li>TERMOS DE SERVIÇO</li>
<li>TERCEIROS</li>
<LI>AVISO DE PRIVACIDADE</LI>
</ul>
<span>V79.0.2.1016</span>
</footer>
</aside>
<section id="icontent">
<h2>Client Riot</h2>
<label>
<span>IDIOMA</span>
<select name="client-languages" id="iclient-languages" class="js-select-language"></select>
</label>
<div>
<span>OPÇÃO AO INICIAR O SISTEMA</span>
<div>
<label>
<input type="checkbox" name="" id="" />
<span>Abrir o Cliente Riot ao iniciar o sistema</span>
<span>RECOMENDADOS</span>
</label>
<p>
O cliente Riot será executado na bandeja do sistema quando o computador for iniciado e, assim, seus jogos serão atualizados automaticamente.
</p>
</div>
</div>
<div>
<span>FECHAR JANELA</span>
<div>
<label>
<input type="radio" name="" id="" />
<span>Minimizar para a bandeja do sistema</span>
<span>RECOMENDADOS</span>
</label>
<p>
O cliente da Riot continuará ativo, o que permite abrir jogos mais rapidamente e mantém seus jogos atualizados automaticamente.
</p>
</div>
<div>
<span>Sair do aplicativo</span>
</div>
</div>
</section>
<section>
<h2>Legends of Runeterra</h2>
<label>
<span>IDIOMA DO TEXTO DO JOGO</span>
<select name="lor-languages" id="ilor-languages" class="js-select-language"></select>
</label>
<label>
<span>PATCHLINE ATUAL</span>
<select name="" id="">
<option value=""></option>
</select>
</label>
<label>
<span>CAMINHO DE INSTALAÇÃO</span>
<select name="" id="">
<option value=""></option>
</select>
</label>
<div>
<span>ATUALIZAÇÕES AUTOMÁTICAS</span>
<p>Legends of Runeterra será atualizado automaticamente quando o cliente da Riot estiver em execução.</p>
<label>
<input type="checkbox" name="" id="" />
<span>Ativar atualizações automáticas</span>
</label>
</div>
<button>Reparar</button>
</section>
<section>
<h2>League of Legends</h2>
<label>
<span>IDIOMA DO TEXTO DO JOGO</span>
<select name="lol-languages" id="ilol-languages" class="js-select-language"></select>
</label>
<label>
<span>PATCHLINE ATUAL</span>
<select name="" id="">
<option value=""></option>
</select>
</label>
<label>
<span>CAMINHO DE INSTALAÇÃO</span>
<select name="" id="">
<option value=""></option>
</select>
</label>
<div>
<span>ATUALIZAÇÕES AUTOMÁTICAS</span>
<p>Legends of Runeterra será atualizado automaticamente quando o cliente da Riot estiver em execução.</p>
<label>
<input type="checkbox" name="" id="" />
<span>Ativar atualizações automáticas</span>
</label>
</div>
<button>Reparar</button>
</section>
<button type="button" class="close-modal">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 6L18 18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="is-visually-hidden">Fechar</span>
</button>
</section>
</body>
</html>