try out django
[mlpccg-meta.git] / meta / templates / index.html
diff --git a/meta/templates/index.html b/meta/templates/index.html
new file mode 100644 (file)
index 0000000..f165607
--- /dev/null
@@ -0,0 +1,135 @@
+<!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>&copy; 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>