Reskin page tranchage

static/style.css

@@ -22,8 +22,8 @@ a {
 
 #banner {
     width: 75%;
-    max-width: 1000px;
+    max-width: 550px;
-    margin: 32px;
+    margin-top: 32px;
 }
 
 #card {
@@ -63,23 +63,37 @@ a {
     padding: 0 16px;
 }
 
-#play {
+.button {
     width: 132px;
     height: 54px;
     font-size: 20px;
     margin: 16px auto;
     border-radius: 3px;
-    background-color: #9ce898;
     font-weight: bold;
     transition: all cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
 }
 
-#play:hover {
+.button:hover {
-    background-color: #7fd87b;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
     0 3px 6px rgba(0, 0, 0, 0.23);
 }
 
+#play {
+    background-color: #9ce898;
+}
+
+#play:hover {
+    background-color: #7fd87b;
+}
+
+#tchak {
+    background-color: #e89898;
+}
+
+#tchak:hover {
+    background-color: #d87b7b;
+}
+
 .title {
     font-size: 24px;
 }
@@ -112,41 +126,16 @@ li.ok {
     color: #1D1;
 }
 
-p#play {
+ul.flashes {
-    text-align: center;
+    margin: -16px 16px 16px 16px;
-    font-size: 1.5em;
+    list-style-type: none;
-    font-weight: bold;
+    background-color: #1A2A3A;
-    margin-top: 1.6em;
+    padding: 8px;
-    margin-bottom: 2em;
+    border-radius: 3px;
-}
+    color: #FAFAFA;
-
+    font-size: 18px;
-p#play a {
-    font-weight: bold;
-    color: white;
-    background: #2E2;
-    padding: .5em 2em;
-    border: 1px solid #191;
-    border-radius: 10px;
-}
-
-p#play a:hover {
-    background: #191;
-}
-
-form#select {
-    width: 100%;
-    margin: 1em auto;
-    background: #FFCC00;
-    border-radius: 1em;
-    border: 1px solid #C70;
-    padding: 1em 0em;
-    text-align: center;
 }
 
 ul.flashes li {
-    background: #2E2;
+    text-align: center;
-    border: 1px solid #191;
-    border-radius: .6em;
-    margin-bottom: 1em;
-    padding: .4em .7em;
 }

templates/banned.html

@@ -1,4 +1,5 @@
-{% extends "layout_banned.html" %}
+{% extends "layout.html" %} {% block content %}
+
 {% block content %}
 <h1>Tu es tranché</h1>
 <p>

templates/home.html

@@ -6,7 +6,7 @@
 <div class="desc">Toi aussi abuse des pouvoirs du Rézo avec les Metzthernets !</div>
 
 <a href="{{url_for('play')}}">
-    <div id="play" class="center">
+    <div id="play" class="button center">
         JOUER
     </div>
 </a>

templates/play.html

@@ -1,5 +1,39 @@
 {% extends "layout.html" %}
 {% block content %}
+
+<div class="title">Trancher un joueur</div>
+<div class="desc">
+    Ta cible sera notifiée quelle que soit l'issue de ta tentative. Question
+    chance, c'est 50-50.
+</div>
+
+<div class="sep"></div>
+
+<form action="" method="post">
+    
+    <div class="desc">Écris le nom de ta victime :</div>
+    <input type="text" name="search" id="word">
+    <br>
+    <div class="desc">Choisis-la :</div>
+    <select id="auto" name="target_id">
+        <option value="none">(sélectionner un joueur)</option>
+        {% for p in players %}
+        <option value="{{p.id}}">{{p.name}} {{p.firstname}}</option>
+        {% endfor %}
+    </select>
+    <br>
+    <input type="submit" value="TCHAK!" id="tchak" class="button" />
+    
+</form>
+
+<div class="sep"></div>
+
+<div class="title">
+    <a href="{{ url_for('home') }}">&laquo; retour à l'accueil</a>
+</div>
+
+<div class="sep"></div>
+
 <script>
 $(function(){
     $('#word').keyup(function(e){
@@ -21,78 +55,5 @@ $(function(){
     })
 });
 </script>
-<h2>Trancher un joueur</h2>
-<p>
-    Ta cible sera notifiée quelle que soit l'issue de ta tentative. Question
-    chance, c'est 50-50.
-</p>
-<form id="select" action="" method="post">
-<label for="word">Écris le nom de ta victime </label>
-<input type="text" name="search" id="word">
-<label for="auto">et choisis-la :</label>
-  <select id="auto" name="target_id">
-    <option value="none">(sélectionner un joueur)</option>
-    {% for p in players %}
-    <option value="{{p.id}}">{{p.name}} {{p.firstname}}</option>
-    {% endfor %}
-</select>
-    <input type="submit" value="Tchak !" />
 
-</form>
-<h2>
-<a href="{{ url_for('home') }}">&laquo; retour à l'accueil</a>
-</h2>
-
-<div id="container" style="min-width: 310px; max-width: 600px; margin: 0 auto"></div>
-<script type="text/javascript">
-$(function () {
-    Highcharts.chart('container', {
-        chart: {
-            plotBackgroundColor: null,
-            plotBorderWidth: 0,
-            plotShadow: false
-        },
-        title: {
-            text: 'État du Rézo',
-            align: 'center',
-            verticalAlign: 'middle',
-            y: 60
-        },
-        tooltip: {
-            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-        },
-        plotOptions: {
-            pie: {
-                dataLabels: {
-                    enabled: true,
-                    distance: -50,
-                    style: {
-                        fontWeight: 'bold',
-                        color: 'white'
-                    }
-                },
-                startAngle: -90,
-                endAngle: 90,
-                center: ['50%', '75%']
-            },
-        },
-        series: [{
-            type: 'pie',
-            name: 'Pourcentage',
-            innerSize: '50%',
-            data: [
-                {
-                  name: 'Tranchés',
-                  y: {{ stats[0] }},
-                  color: '#FF0000',
-                },{
-                  name: 'Vivants',
-                  y: {{ stats[1] }},
-                  color: '#FFCC00',
-                }
-            ]
-        }]
-    });
-});
-</script>
 {% endblock %}