+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>meta is magic</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="stylesheet" href="{{STATIC_URL}}css/bootstrap.min.css">
+ <style>
+ body {
+ padding-top: 50px;
+ padding-bottom: 20px;
+ }
+ </style>
+ <link rel="stylesheet" href="{{STATIC_URL}}css/bootstrap-theme.min.css">
+ <link rel="stylesheet" href="{{STATIC_URL}}css/main.css">
+
+ <script src="{{STATIC_URL}}js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
+ </head>
+ <body>
+ <!--[if lt IE 7]>
+ <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+ <![endif]-->
+ <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">meta is magic</a>
+ </div>
+ <!-- <div class="navbar-collapse collapse"> -->
+ <!-- <form class="navbar-form navbar-right" role="form"> -->
+ <!-- <div class="form-group"> -->
+ <!-- <input type="text" placeholder="Email" class="form-control"> -->
+ <!-- </div> -->
+ <!-- <div class="form-group"> -->
+ <!-- <input type="password" placeholder="Password" class="form-control"> -->
+ <!-- </div> -->
+ <!-- <button type="submit" class="btn btn-success">Sign in</button> -->
+ <!-- </form> -->
+ <!-- </div><\!--/.navbar-collapse -\-> -->
+ </div>
+ </div>
+
+ <!-- Main jumbotron for a primary marketing message or call to action -->
+ <div class="jumbotron">
+ <div class="container">
+ <h1>How good is your deck?</h1>
+ <p>Curious how decks like yours have performed in tournaments?<br/> Paste your <a href="http://ponyhead.com/deckbuilder">ponyhead.com</a> URL here and find out!</p>
+ <p>
+ <form class="form-inline" role="form">
+ <div class="form-group">
+ <label class="sr-only" for="ponyheadURL">ponyhead decklist url</label>
+ <input type="url" class="form-control input-lg" id="ponyheadURL" placeholder="Deck URL, e.g.: http://ponyhead.com/deckbuilder?v1code=..."/>
+ <button type="button" class="btn btn-lg btn-default btn-primary">Tell me!</button>
+ </div>
+ </form>
+ </p>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="row">
+ <div class="col-xs-12">
+ <h2>Deck archetypes</h2>
+ <p>Very fuzzy data, based on past tournaments. The more the deck was played in tournaments, the more accurate this is.</p>
+ <table class="table">
+ <tr>
+ <th>Archetype ID</th>
+ <th>Average placement</th>
+ <th>Example decks</th>
+ </tr>
+ {% load humanize %}
+ {% for avg, label, decks in ranking %}
+ <tr>
+ <td>{{ label }}</td>
+ <td>{{ avg|ordinal }}</td>
+ <td>
+ <ul class="list-inline">
+ {% for d in decks %}
+ <li><a href="{{ d.ponyhead_link }}">{{ d.description }}</a></li>
+ {% endfor %}
+ </ul>
+ </td>
+ {% endfor %}
+ </table>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-xs-12">
+ <h2>Tournaments</h2>
+ <table class="table">
+ <tr>
+ <th>Date</th>
+ <th>Name</th>
+ <th>Top 8 Decks</th>
+ </tr>
+ {% if tournaments %}
+ {% for t in tournaments %}
+ <tr>
+ <td>{{ t.tournament.date }}</td>
+ <td>{{ t.tournament.name }}</td>
+ <td>
+ {% for d in t.decklists|slice:":8" %}
+ <a href="{{ d.ponyhead_link }}">{{ d.name }} ({{ d.description }})</a><br/>
+ {% endfor %}
+ </td>
+ </tr>
+ {% endfor %}
+ {% endif %}
+ </table>
+ </div>
+ </div>
+ <hr>
+
+ <footer>
+ <p>© Yukkuri Games, 2014</p>
+ </footer>
+ </div> <!-- /container -->
+ <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
+ <script src="{{STATIC_URL}}js/vendor/jquery-1.11.0.min.js"></script>
+ <script src="{{STATIC_URL}}js/vendor/bootstrap.min.js"></script>
+ <script src="{{STATIC_URL}}js/main.js"></script>
+ </body>
+</html>