-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (73 loc) · 3.45 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
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://unpkg.com/page/page.js"></script>
<script src="index.js"></script>
<body x-data class="main">
<header>
<h1>
<button><a href="/"><img src="https://gochecklists.app/images/home.svg" alt="Casa"></a></button>
<span x-text="$store.title"></span>
<!-- <button><img src="https://gochecklists.app/images/settings.svg" alt="Configuración"></button> -->
</h1>
<div id="barra">
<div id="barra-contenido" :style="{width:$store.atrapados[pagina].length/$store['pokemones'+pagina].length*100+'%', background:'hsl('+(($store.atrapados[pagina].length/$store['pokemones'+pagina].length)*120)+' 90% 50%)'}"></div>
</div>
<span x-text="''+$store.atrapados[pagina].length+' / '+$store['pokemones'+pagina].length"></span>
</header>
<div id="main" class="not-hidden">
<ul>
<li>
<a href="/dex">Dex</a>
<ul>
<li>Track your main Pokédex completion in Pokémon GO.</li>
</ul>
</li>
<li>
<a href="/shiny">ShinyDex</a>
<ul>
<li>Track which of the available shinies you’ve caught.</li>
</ul>
</li>
<li>
<a href="/unown">UnownDex</a>
<ul>
<li>Track how many Unown you own.</li>
</ul>
</li>
</ul>
</div>
<div id="dex">
<template x-for="(pok,id) in $store.pokemonesDex">
<label class="pokemon" >
<span x-text="pok.name[0].toUpperCase()+pok.name.substring(1)"></span>
<input @input="cambiarEstado($el.value,$el.checked,'Dex')" type="checkbox" x-bind:checked="$store.atrapados.Dex.includes(''+(id+1))" x-bind:value="id+1">
<img x-bind:src="'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/'+(id+1)+'.png'" x-bind:alt="'Imagen de un '+pok.name">
</div>
</template>
</div>
<div id="shiny">
<template x-for="(pok,id) in $store.pokemonesShiny">
<label class="pokemon" >
<span x-text="pok.name[0].toUpperCase()+pok.name.substring(1)"></span>
<input @input="cambiarEstado($el.value,$el.checked,'Shiny')" type="checkbox" x-bind:checked="$store.atrapados.Shiny.includes(''+(id+1))" x-bind:value="id+1">
<img
x-bind:src="'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/'+(id+1)+'.png'"
x-bind:alt="'Imagen de un '+pok.name+' shiny'"
onerror="this.closest('.pokemon').remove();"
>
</div>
</template>
</div>
<div id="unown">
<template x-for="pok in $store.pokemonesUnown">
<label class="pokemon" >
<span x-text="pok.name"></span>
<input @input="cambiarEstado($el.value,$el.checked,'Unown')" type="checkbox" x-bind:checked="$store.atrapados.Unown.includes(pok.id)" x-bind:value="pok.id">
<img
x-bind:src="'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/201'+(pok.id)+'.png'"
x-bind:alt="'Imagen de un unown '+pok.name"
>
</div>
</template>
</div>
</body>