meta/templates/index.html

   1 <!DOCTYPE html>
   2 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
   3 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
   4 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
   5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
   6     <head>
   7         <meta charset="utf-8">
   8         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   9         <title>meta is magic</title>
  10         <meta name="description" content="">
  11         <meta name="viewport" content="width=device-width, initial-scale=1">
  12
  13         <link rel="stylesheet" href="{{STATIC_URL}}css/bootstrap.min.css">
  14         <style>
  15             body {
  16                 padding-top: 50px;
  17                 padding-bottom: 20px;
  18             }
  19         </style>
  20         <link rel="stylesheet" href="{{STATIC_URL}}css/bootstrap-theme.min.css">
  21         <link rel="stylesheet" href="{{STATIC_URL}}css/main.css">
  22
  23         <script src="{{STATIC_URL}}js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
  24     </head>
  25     <body>
  26         <!--[if lt IE 7]>
  27             <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>
  28         <![endif]-->
  29     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  30       <div class="container">
  31         <div class="navbar-header">
  32           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  33             <span class="sr-only">Toggle navigation</span>
  34             <span class="icon-bar"></span>
  35             <span class="icon-bar"></span>
  36             <span class="icon-bar"></span>
  37           </button>
  38           <a class="navbar-brand" href="#">meta is magic</a>
  39         </div>
  40         <!-- <div class="navbar-collapse collapse"> -->
  41         <!--   <form class="navbar-form navbar-right" role="form"> -->
  42         <!--     <div class="form-group"> -->
  43         <!--       <input type="text" placeholder="Email" class="form-control"> -->
  44         <!--     </div> -->
  45         <!--     <div class="form-group"> -->
  46         <!--       <input type="password" placeholder="Password" class="form-control"> -->
  47         <!--     </div> -->
  48         <!--     <button type="submit" class="btn btn-success">Sign in</button> -->
  49         <!--   </form> -->
  50         <!-- </div><\!--/.navbar-collapse -\-> -->
  51       </div>
  52     </div>
  53
  54     <!-- Main jumbotron for a primary marketing message or call to action -->
  55     <div class="jumbotron">
  56       <div class="container">
  57         <h1>How good is your deck?</h1>
  58         <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>
  59         <p>
  60           <form class="form-inline" role="form">
  61             <div class="form-group">
  62               <label class="sr-only" for="ponyheadURL">ponyhead decklist url</label>
  63               <input type="url" class="form-control input-lg" id="ponyheadURL" placeholder="Deck URL, e.g.: http://ponyhead.com/deckbuilder?v1code=..."/>
  64               <button type="button" class="btn btn-lg btn-default btn-primary">Tell me!</button>
  65             </div>
  66           </form>
  67         </p>
  68       </div>
  69     </div>
  70
  71     <div class="container">
  72       <div class="row">
  73         <div class="col-xs-12">
  74           <h2>Deck archetypes</h2>
  75           <p>Very fuzzy data, based on past tournaments. The more the deck was played in tournaments, the more accurate this is.</p>
  76           <table class="table">
  77             <tr>
  78               <th>Archetype ID</th>
  79               <th>Average placement</th>
  80               <th>Example decks</th>
  81             </tr>
  82           {% load humanize %}
  83           {% for avg, label, decks in ranking %}
  84             <tr>
  85               <td>{{ label }}</td>
  86               <td>{{ avg|ordinal }}</td>
  87               <td>
  88                 <ul class="list-inline">
  89                 {% for d in decks %}
  90                   <li><a href="{{ d.ponyhead_link }}">{{ d.description }}</a></li>
  91                 {% endfor %}
  92                 </ul>
  93               </td>
  94           {% endfor %}
  95           </table>
  96         </div>
  97       </div>
  98
  99       <div class="row">
 100         <div class="col-xs-12">
 101           <h2>Tournaments</h2>
 102           <table class="table">
 103             <tr>
 104               <th>Date</th>
 105               <th>Name</th>
 106               <th>Top 8 Decks</th>
 107             </tr>
 108         {% if tournaments %}
 109           {% for t in tournaments %}
 110             <tr>
 111               <td>{{ t.tournament.date }}</td>
 112               <td>{{ t.tournament.name }}</td>
 113               <td>
 114               {% for d in t.decklists|slice:":8" %}
 115                 <a href="{{ d.ponyhead_link }}">{{ d.name }} ({{ d.description }})</a><br/>
 116               {% endfor %}
 117               </td>
 118             </tr>
 119           {% endfor %}
 120         {% endif %}
 121           </table>
 122         </div>
 123       </div>
 124       <hr>
 125
 126       <footer>
 127         <p>&copy; Yukkuri Games, 2014</p>
 128       </footer>
 129     </div> <!-- /container -->
 130     <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
 131     <script src="{{STATIC_URL}}js/vendor/jquery-1.11.0.min.js"></script>
 132     <script src="{{STATIC_URL}}js/vendor/bootstrap.min.js"></script>
 133     <script src="{{STATIC_URL}}js/main.js"></script>
 134     </body>
 135 </html>