-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
385 lines (376 loc) · 18.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
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
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Gran Playoff</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='./main.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div id="header">
<img src="img/logo.png"></img>
<div id="info" class="header-container">
<div id="balance-info" class="header-container">
<div id="pins" class="info-div header-container">
</strong><button class="balance-button">0</button><strong >PINES DISPONIBLES</strong>
</div>
<div id="balance" class="info-div header-container">
<strong>$</strong><button class="balance-button">0</button><strong>SALDO</strong>
</div>
</div>
<div id="user-info" class="header-container">
<div id="user-notifs" class="info-div header-container">
<div class="notif-container header-container">
<i class="fa fa-certificate"></i>
<p class="notif-number">0</p>
</div>
<div class="notif-container header-container">
<i class="fa fa-bell"></i>
<p class="notif-number">0</p>
</div>
</div>
<div id="user-menu" class="info-div header-container">
<strong id="username-display">TU NOMBRE</strong>
<div class="relative header-container">
<select class="appearance-none">
<option selected></option>
<option>Mi perfil</option>
<option>Mi equipo</option>
<option>Mi saldo</option>
</select>
<div class="menu-icon pointer-events-none absolute right-1 flex items-center">
<i class="text-white fill-current h-4 w-4 fa fa-user-circle"></i>
<i class="text-white fill-current h-4 w-4 fa fa-sort-desc"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mob-header">
<a href="#main-menu"
id="main-menu-toggle"
class="menu-toggle"
aria-label="Abrir menu">
<span class="sr-only">Abrir menu</span>
<span class="fa fa-bars" aria-hidden="true"></span>
</a>
<nav id="main-menu" class="main-menu" aria-label="Main menu">
<a href="#main-menu-toggle"
id="main-menu-close"
class="menu-close"
aria-label="Cerrar menu">
<span class="sr-only">Cerrar menu</span>
<span class="fa fa-close" aria-hidden="true"></span>
</a>
<ul>
<div id="user-notifs-mob">
<div class="notif-container header-container">
<i class="fa fa-square"></i>
<p class="notif-number">$0</p>
</div>
<div class="notif-container header-container">
<i class="fa fa-bell"></i>
<p class="notif-number">0</p>
</div>
</div>
<li><strong>USUARIO</strong></li>
<li><a href="#">Mi perfil</a></li>
<li><a href="#">Mi equipo</a></li>
<li><a href="#">Mis premios</a></li>
<li><a href="#">Mi saldo</a></li>
<li><a href="#">Cerrar sesión</a></li>
<li><strong>GRAN PLAYOFF</strong></li>
<li><a href="#">Mis pines</a></li>
<li><a href="#">Torneos de amigos</a></li>
<li><a href="#">Copa de amigos</a></li>
<li><a href="#">Desafíos uno a uno</a></li>
<li><a href="#">Rankings</a></li>
</ul>
</nav>
<a href="#main-menu-toggle"
class="backdrop"
tabindex="-1"
aria-hidden="true" hidden></a>
</div>
</div>
<div id="page-content">
<div id="page-navbar">
<div class="nav-home">
<a class="fa fa-home"></a>
</div>
<div class="nav-container w-11/12">
<a>MI EQUIPO</a>
<div class="separator"></div>
<a>MIS PINES</a>
<div class="separator"></div>
<a>TORNEOS DE AMIGOS</a>
<div class="separator"></div>
<a>COPA DE AMIGOS</a>
<div class="separator"></div>
<a>DESAFÍOS UNO A UNO</a>
<div class="separator"></div>
<a>RANKINGS</a>
</div>
</div>
<div id="upper-info">
<div class="flex">
<div class="info-panel w-4/7">
<h5 class="info-title">ARMÁ TU EQUIPO</h5>
<p>Gran Playoff es muy fácil: elegí tus jugadores favoritos y <strong>armá tu equipo</strong>.
Podés elegir tantos jugadores por club como tu balance te permita.
Realizá transferencias ilimitadas libremente hasta el comienzo de la primera fecha de Gran Playoff.</p>
</div>
<div class="info-panel right-info-panel w-3/7 no-mob">
<p><strong>Ahora, si ganás la fecha y sos entrenador Premium</strong>, ¡te llevás $100.000!
<strong>Y sos el campeón de Gran Playoff</strong>, ganás un viaje a Estados Unidos para vos y un acompañante.
</p>
</div>
</div>
<div class="flex">
<div class="img-panel w-4/7 no-mob">
<img src="img/player_select.png"></img>
<div>
<strong>Jugadores recomendados por puesto</strong>
<p>Elegilos acá <a class="fa fa-arrow-circle-o-down"></a></p>
</div>
</div>
<div class="w-3/7 button-center-panel">
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"><i class="fa fa-thumb-tack text-white"></i> Usá tu equipo de la edición pasada</button>
</div>
</div>
</div>
<div id="main-content">
<div id="team-selection" class="main-container">
<div class="title"><h3><i class="fa fa-list-ul"></i>LISTA DE JUGADORES</h3></div>
<div id="search">
<h5>Usá los filtros para encontrar más fácil a tus jugadores</h5>
<div class="break"></div>
<div class="w-1/2 xl:w-1/5">
<label class="block uppercase tracking-wide text-white text-sm font-bold mb-2">
EQUIPO
</label>
<div class="relative">
<select class="small-input block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="select-team">
<i class="fa fa-unsorted"></i>
<option value="" disabled selected>Equipo</option>
</select>
<div class="pointer-events-none absolute inset-y-0 sm:right-1 xl:right-0 flex items-center text-gray-700">
<i class="fill-current h-4 w-4 fa fa-unsorted"></i>
</div>
</div>
</div>
<div class="w-1/2 xl:w-1/5">
<label class="block uppercase tracking-wide text-white text-sm font-bold mb-2">
POSICIÓN
</label>
<div class="relative">
<select class="small-input block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
<option value="" disabled selected>Posición</option>
<option>Base</option>
<option>Escolta</option>
<option>Alero</option>
<option>Ala-Pivot</option>
<option>Pivot</option>
</select>
<div class="pointer-events-none absolute inset-y-0 sm:right-1 xl:right-0 flex items-center text-gray-700">
<i class="fill-current h-4 w-4 fa fa-unsorted"></i>
</div>
</div>
</div>
<div class="sw-full xl:w-3/6">
<label class="block uppercase tracking-wide text-white text-sm font-bold mb-2">
COTIZACIÓN
</label>
<div id="cotizacion" class="flex flex-col md:flex-row">
<input type="number" class="small-input block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
<span><strong>hasta</strong></span>
<input type="number" class="small-input block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"/>
</div>
</div>
<div class="break"></div>
<div class="w-full">
<strong id="search-surname">Buscar por apellido</strong>
<input class="shadow sm:w-1/2 xl:w-3/5 appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Username">
<button class="fa fa-search" id="search-by-surname"></button>
</div>
</div>
<div id="player-table">
<table class="table-auto w-full">
<thead>
<tr>
<th class="px-3 py-2"></th>
<th class="px-4 py-2">JUGADOR</th>
<th class="px-4 py-2">EQUIPO</th>
<th class="px-4 py-2">POS</th>
<th class="px-4 py-2">$</th>
<th class="px-4 py-2">FALTAS</th>
<th class="px-4 py-2">PJE PROM</th>
</tr>
</thead>
<tbody id="player-select">
</tbody>
</table>
</div>
</div>
<div id="team-information" class="main-container">
<div class="title"><h3><i class="fa fa-bookmark"></i>TU EQUIPO</h3></div>
<div id="expenses">
<div class="gastar"><p class="text-xl">PODÉS GASTAR</p><strong class="text-3xl">$000.000</strong></div>
<div class="gastado"><p class="text-xl">LLEVÁS GASTADO</p><strong class="text-3xl">$000.000</strong></div>
</div>
<div id="team-formation">
<div id="team" class="w-full md:w-3/6">
<div class="section">
<strong class="text-lg font-bold section-title">TITULARES</strong>
<table class="table-auto w-full">
<thead>
<tr class="w-full">
<th class="px-0 py-0"></th>
<th class="px-2 py-2">POS</th>
<th class="px-2 py-2">JUGADOR</th>
<th class="px-2 py-2"><p class="fa fa-star"></p></th>
<th class="px-2 py-2">CAP</th>
</tr>
</thead>
<tbody>
<tr class="w-full bg-gray-900 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="w-full bg-gray-800 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="w-full bg-gray-900 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="w-full bg-gray-800 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="w-full bg-gray-900 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<strong class="text-lg font-bold section-title">SUPLENTES</strong>
<table class="table-auto w-full">
<thead>
<tr>
<th class="px-2 py-2"></th>
<th class="px-2 py-2">POS</th>
<th class="px-2 py-2">JUGADOR</th>
<th class="px-2 py-2"><p class="fa fa-star"></p></th>
<th class="px-2 py-2">CAP</th>
</tr>
</thead>
<tbody>
<tr class="bg-gray-900 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="bg-gray-800 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="bg-gray-900 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="bg-gray-800 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
<tr class="bg-gray-900 bg-opacity-75">
<td class="px-2 py-2"><p class="fa fa-arrow-circle-left"></p></td>
<td class="px-2 py-2">Pos</td>
<td class="px-2 py-2">Jugador 1</td>
<td class="px-2 py-2"><p class="fa fa-flag"></p></td>
<td class="px-2 py-2">PJE</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="formation" class="w-full md:w-2/5">
<div class="section">
<strong class="text-lg font-bold section-title">TU FORMACIÓN</strong>
<div class="image-container"><img src="img/court_A.png" width="800em"></div>
</div>
</div>
</div>
<div id="save-team" class="w-full button-center-panel">
<button class="button bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">Guardar</button>
<button class="button bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">Confirmar equipo y continuar</button>
</div>
</div>
</div>
<div id="lower-info">
<div class="info-ul flex w-full lg:w-1/2">
<div class="info-panel w-1/7">
<i class="fa fa-info-circle"></i>
</div>
<div class="info-panel w-6/7">
<ul>
<li>Los suplentes se sumarán a tu equipo, una vez elegidos los titulares de cada puesto</li>
<li>Realizá transferencias libremente hasta el comienzo de la primera fecha Gran Playoff</li>
</ul>
</div>
</div>
<div class="flex w-full lg:w-1/2">
<div class="save-info-panel w-1/2">
<div class="save-info-icon">
<hr class="w-1/3"><i class="fa fa-save"></i><hr class="w-1/3">
</div>
<div><p>Guardá un equipo por táctica, compará los planteles y decidite.
Competirás solo con el que hayas confirmado.</p></div>
</div>
<div class="save-info-panel w-1/2">
<div class="save-info-icon">
<hr class="w-1/3"><i class="fa fa-files-o"></i><hr class="w-1/3">
</div>
<div><p>Si querés comparar formaciones hacé <a>click acá</a>.</p></div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src='main.js'></script>
</body>
</html>