-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
194 lines (189 loc) · 10.7 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
<!DOCTYPE html>
<html>
<head>
<title>Pokémon Checklist</title>
<meta name="viewport" content="width=device-width" />
<meta property="og:title" content="Pokémon Checklist"/>
<meta property="og:url" content="http://www.pokechecklist.com/"/>
<meta property="og:description" content="This is a Pokedex webapp made by Tyler Stark."/>
<meta property="og:image" content="http://www.pokechecklist.com/images/ogImage.jpg"/>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/stylesheets/sprite.css" />
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=451039194978822";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<div class="container">
<div class="page page-home">
<header>
<h1>Pokémon Checklist</h1>
</header>
<ul class="site-nav">
<!-- <li><h3>User Information</h3></li> Not available yet... -->
<li class="pokeList"><h3>Pokémon List</h3></li>
<!-- <li><h3>Locations</h3></li> Not available yet...-->
<li class="about"><h3>About this Project</h3></li>
<li class="importExport"><h3>Import/Export</h3></li>
</ul>
<section id="updates">
<h3>UPDATE!</h3>
<p>Pokemon ORAS Location Data has been added to this site!</p>
<p>As a reminder, all Pokemon location data came from <a href="http://serebii.net/">Serebii.net</a>.</p>
</section>
<section id="otherProjects">
<h3>Other Projects</h3>
<ul class="pokemonProjects">
<li>
<a href="http://www.WonderTradeAnalytics.com/">
<img src="/images/theIronPokeBall.png" />
<span class="title">Wonder Trade Analytics</span>
</a>
<div class="description">Community driven Wonder Trade Project</div>
</li>
<li>
<a href="http://www.pokewondertrade.com/">
<img src="/images/theIronPokeBall.png" />
<span class="title">Eevee WonderTrade Project</span>
</a>
<div class="description">Results of when I sent out 300 Eevees</div>
</li>
</ul>
</section>
<section id="social">
<p>Hey there, thanks for checking out my Pokemon webapp! If you have any features you'd like to request, feel free to post comments on this <a href="http://theirondeveloper.com/my-pokechecklist-webapp-an-appeal-to-a-larger-audience/">blog post</a>.</p>
<p>If you like what you see, help me out by sharing it! Thanks! :)</p>
<ul class="socialbar">
<li>
<div class="fb-like" data-href="http://www.pokechecklist.com/" data-width="60" data-layout="button_count" data-show-faces="true" data-send="false"></div>
</li>
<li>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li>
<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>
</li>
</ul>
</section>
</div>
<div class="page page-pokedex">
<div class="pokemonListView">
<div class="filters">
<div class="back">« Back</div>
<div class="pokemon-search"><input type="text" class="searchPokemon" placeholder="Search Pokemon" /></div>
<div class="pokemon-sort">
<ul>
<li class="on sort-option sort-all" data-sort="all">All <span class="count"></span></li>
<li class="sort-option sort-caught" data-sort="caught">Caught <span class="count"></span></li>
<li class="sort-option sort-missing" data-sort="missing">Missing <span class="count"></span></li>
</ul>
</div>
<div class="pokedex-radios">
<label><input type="radio" name="pokedex" value="id" checked="checked" /> National</label>
<label><input type="radio" name="pokedex" value="johto_id" /> Johto</label>
<label><input type="radio" name="pokedex" value="hoenn_id" /> Hoenn</label>
<label><input type="radio" name="pokedex" value="sinnoh_id" /> Sinnoh</label>
<label><input type="radio" name="pokedex" value="unova_id" /> Unova</label>
<label><input type="radio" name="pokedex" value="kalos_central_id" /> Kalos Central</label>
<label><input type="radio" name="pokedex" value="kalos_coastall_id" /> Kalos Coastal</label>
<label><input type="radio" name="pokedex" value="kalos_mountain_id" /> Kalos Mountains</label>
</div>
</div>
<div class="pokemon-list"></div>
</div>
<div class="pokemon-info"></div>
</div>
<div class="page page-about">
<div class="about-wrapper">
<div class="back">« Back</div>
<p class="clear">This webapp was built to provide a single page that lets trainers check off caught pokémon and provide information on where they can find remaining pokémon.</p>
<p>In my mind, Veekun, Serebii, and PokemonDB are the leaders in pokedex information. The goal of this app isn't to compete with any of the big guys, but instead to extend what they are already providing. The location information provided was captured from serebii, but does not provide the in-depth details that serebii or veekun is providing.</p>
<p>From a technology standpoint, this webapp is very experimental. Part of the motivation behind this project was to teach myself Backbone.js. The other part was to see if I can make a fun project and contribute back to the Pokemon community.</p>
<p>Important note: <span class="highlight">this webapp saves the Pokemon you have checked/unchecked to your <a href="http://en.wikipedia.org/wiki/Web_storage">browser's local storage</a>.</span></p>
<p>This is a mashup made by <a href="http://www.theirondeveloper.com/">Tyler Stark</a> and <a href="/~https://github.com/yaozornation">Michael Yao.</a> If you are interested, checkout this project on <a href="/~https://github.com/theirondeveloper/pokemon-sorter">github</a> :)</p>
<h4>Sources</h4>
<ul class="sources">
<li><a href="http://Serebii.net/">Serebii.net</a> for location information and sprite images</li>
<li><a href="http://Veekun.com/">Veekun.com</a> for being a fantastic resource for all things pokémon </li>
<li><a href="http://www.dragonflycave.com/list.aspx">This clever tool</a>, which helped me list pokemon by multiple Pokedexes.</li>
</ul>
</div>
</div>
<div class="page page-importExport">
<div class="importExport-wrapper">
<div class="messageDiv hide"></div>
<div class="back">« Back</div>
<div>
<div class="left col3 exportField">
<h3>Export</h3>
<textarea class="hide" id="export"></textarea>
<input type="submit" value="Export" />
</div>
<div class="left col3 importField">
<h3>Import</h3>
<textarea id="import"></textarea>
<input type="submit" value="Import" />
</div>
<div class="left col3 clearField">
<h3>Clear</h3>
<input type="submit" value="Clear" />
<p class="message"></p>
</div>
</div>
</div>
</div>
</div>
<script id="pokemon-view-template" type="text/template">
<div class="pokemon-inner" >
<label>
<input type="checkbox" <% if(caught) print("checked=checked") %> />
<%= id %> <%= id !== pokedexFilterId ? '('+pokedexFilterId+')' : '' %> : <%= name %>
</label>
<i class="thumbnails-pokemon-<%= id %>"> </i>
</div>
</script>
<script id="pokemonInfo-view-template" type="text/template">
<h3 class="pokemon-name"><%= name %></h3>
<img class="pokemon-image" src="/images/pokemon/<%= id %>.png" />
<a href="http://veekun.com/dex/lookup?lookup=pokemon:<%= id %>#locations" target="_blank">More Info</a><br/>
<ul class="location-game-sets">
<% for(var gameSet in gameSetsJson) { %>
<li class="location-game-set">
<%= gameSet %>
<ul class="location-game-set-games">
<% for(var game in gameSetsJson[gameSet]) { %>
<li class="game">
<span class='game-title'>
<%= game %>:
</span>
<span class='game-locations'>
<%= gameSetsJson[gameSet][game] %>
</span>
</li>
<% } %>
</ul>
</li>
<% } %>
</ul>
</script>
<script type="text/javascript" data-main="/scripts/main.min" src="/scripts/vendor/require/require.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36147940-1']);
_gaq.push(['_setDomainName', 'pokechecklist.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>