pokeapi/templates/pages/home.html
2016-08-13 08:24:56 +01:00

293 lines
10 KiB
HTML
Executable file

{% extends "base.html" %}
{% load humanize %}
{% block mainbody %}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://pokeapi.co" data-text="Pokéapi - the Pokémon RESTful API " data-via="phalt_" data-related="phalt_">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>
</div>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/docsv2/">Documentation</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<section id="home">
<div class="header">
<h1>Pokéapi</h1>
<h2>The RESTful Pokémon API</h2>
<h4>Over <span class="count">{{ total_views|intcomma }}</span> API calls received!</h4>
</div>
{% if alert %}
<div class="container">
<div class="row" style="padding-top:20px;text-align:center;">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="alert alert-danger" role="alert">{{ alert.message|safe }}</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
{% endif %}
<div class="cta">
<p>Finally; all the Pokémon data you'll ever need, in one place,<br /> and easily accessible through a modern RESTful API.</p>
<p>Whats new in V2? Check out the <a href="/docsv2/">docs</a>!</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-10 center-block">
<div class="center">
<h1>
Try it now!
</h1>
<div class="input-group pad_top">
<span class="input-group-addon url">http://pokeapi.co/api/v2/</span>
<input id="interactive" type="text" class="form-control" placeholder="pokemon/1/">
<span class="input-group-btn"><button onClick="interactive_call();return false;" class="btn btn-primary">submit</button></span>
</div>
</div>
<small>Need a hint? try <a href="#" onClick="update('pokemon/1/');return false;"><i>pokemon/1/</i></a> or <a href="#" onClick="update('type/3/');return false;"><i>type/3/</i></a> or <a href="#" onClick="update('ability/4/');return false;"><i>ability/4/</i></a></small>
<p class="lead pad_top">Resource for <span id="interactive_name">Bulbasaur</span></p>
<pre id="interactive_output" class="pre-scrollable">
{
"id": 1,
"name": "bulbasaur",
"base_experience": 64,
"height": 7,
"is_default": true,
"order": 1,
"weight": 69,
"abilities": [
{
"is_hidden": true,
"slot": 3,
"ability": {
"name": "chlorophyll",
"url": "http://pokeapi.co/api/v2/ability/34/"
}
}
],
"forms": [
{
"name": "bulbasaur",
"url": "http://pokeapi.co/api/v2/pokemon-form/1/"
}
],
"game_indices": [
{
"game_index": 1,
"version": {
"name": "white-2",
"url": "http://pokeapi.co/api/v2/version/22/"
}
}
],
"held_items": [],
"location_area_encounters": [],
"moves": [
{
"move": {
"name": "captivate",
"url": "http://pokeapi.co/api/v2/move/445/"
},
"version_group_details": [
{
"level_learned_at": 0,
"version_group": {
"name": "heartgold-soulsilver",
"url": "http://pokeapi.co/api/v2/version-group/10/"
},
"move_learn_method": {
"name": "machine",
"url": "http://pokeapi.co/api/v2/move-learn-method/4/"
}
},
{
"level_learned_at": 0,
"version_group": {
"name": "platinum",
"url": "http://pokeapi.co/api/v2/version-group/9/"
},
"move_learn_method": {
"name": "machine",
"url": "http://pokeapi.co/api/v2/move-learn-method/4/"
}
},
{
"level_learned_at": 0,
"version_group": {
"name": "diamond-pearl",
"url": "http://pokeapi.co/api/v2/version-group/8/"
},
"move_learn_method": {
"name": "machine",
"url": "http://pokeapi.co/api/v2/move-learn-method/4/"
}
}
]
}
],
"species": {
"name": "bulbasaur",
"url": "http://pokeapi.co/api/v2/pokemon-species/1/"
},
"stats": [
{
"base_stat": 45,
"effort": 0,
"stat": {
"name": "speed",
"url": "http://pokeapi.co/api/v2/stat/6/"
}
}
],
"types": [
{
"slot": 2,
"type": {
"name": "poison",
"url": "http://pokeapi.co/api/v2/type/4/"
}
}
]
}
</pre>
</div>
</div><!--interactive row-->
<div class="row">
<div class="col-md-10 center-block center pad_top pad_bot">
<a href="https://www.digitalocean.com/?refcode=eab2fea41bc6" target="none"><img class="do_image" src="/static/do-logo.png"></a>
</div>
<div class="row">
<div class="col-md-10 center-block">
<div class="row">
<div class="col-md-4">
<p class="lead center">
What is this?
</p>
<div class="well">
<p>
This is a full RESTful API linked to an extensive database
detailing everything about the Pokémon main game series.
</p>
<p>
We've covered everything from Pokémon, Berry Flavors.
</p>
</div>
</div>
<div class="col-md-4">
<p class="lead center">
Where do I start?
</p>
<div class="well">
<p>
We have awesome <a href="/docsv2/">documentation</a> on
how to use this API. It takes minutes to get started.
</p>
<p>
This API will always be publicly available and will
never require any extensive setup process to consume.
</p>
</div>
</div>
<div class="col-md-4">
<p class="lead center">
Keep PokéAPI Running
</p>
<div class="well">
<p>PokéAPI costs around $50 a month to run. We want to keep this free and scalable for as long as possible!
</p>
<p><b>If you use PokéAPI for teaching or for building apps, consider donating today!</b></p>
<form action="/stripe/donation" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="{{stripe_key}}"
data-image="http://i.imgur.com/Jya9cm0.png"
data-name="pokeapi.co"
data-description="Donate and keep pokeapi alive!"
data-amount="1000"
data-panel-label="Donate">
</script>
</form></p></div>
</div>
</div>
</div>
</div><!-- end bottom -->
</div><!-- /.container -->
</section>
<script>
function update (call) {
jQuery('#interactive').val(call);
interactive_call();
}
function interactive_call() {
var content = jQuery('#interactive').val() || 'pokemon/1/';;
var call_url = 'api/v2/' + content;
jQuery.ajax({
dataType: 'json',
url: call_url,
context: document.body
}).complete( function(data) {
if(data['status'] == 200){
var d = jQuery.parseJSON(data['responseText']);
jQuery('#interactive_name').html(d['name']);
jQuery('#interactive_output').text(JSON.stringify(d, null, '\t'));
} else if (data['status'] == 404) {
jQuery('#interactive_output').text(data['status'] + ' ' + data['statusText']);
}
});
}
</script>
{% endblock %}