Reskin page tranchage

This commit is contained in:
root 2018-01-28 23:29:05 +01:00
parent e3b78faf98
commit 4abe9bd675
4 changed files with 66 additions and 115 deletions

View file

@ -22,8 +22,8 @@ a {
#banner { #banner {
width: 75%; width: 75%;
max-width: 1000px; max-width: 550px;
margin: 32px; margin-top: 32px;
} }
#card { #card {
@ -63,23 +63,37 @@ a {
padding: 0 16px; padding: 0 16px;
} }
#play { .button {
width: 132px; width: 132px;
height: 54px; height: 54px;
font-size: 20px; font-size: 20px;
margin: 16px auto; margin: 16px auto;
border-radius: 3px; border-radius: 3px;
background-color: #9ce898;
font-weight: bold; font-weight: bold;
transition: all cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s; 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), box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23); 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 { .title {
font-size: 24px; font-size: 24px;
} }
@ -112,41 +126,16 @@ li.ok {
color: #1D1; 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 { ul.flashes li {
background: #2E2; text-align: center;
border: 1px solid #191;
border-radius: .6em;
margin-bottom: 1em;
padding: .4em .7em;
} }

View file

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

View file

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

View file

@ -1,5 +1,39 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block content %} {% 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> <script>
$(function(){ $(function(){
$('#word').keyup(function(e){ $('#word').keyup(function(e){
@ -21,78 +55,5 @@ $(function(){
}) })
}); });
</script> </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 %} {% endblock %}