Reskin page tranchage
This commit is contained in:
root
parent
e3b78faf98
commit
4abe9bd675
4 changed files with 66 additions and 115 deletions
|
|
@ -22,8 +22,8 @@ a {
|
|||
|
||||
#banner {
|
||||
width: 75%;
|
||||
max-width: 1000px;
|
||||
margin: 32px;
|
||||
max-width: 550px;
|
||||
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 {
|
||||
background-color: #7fd87b;
|
||||
.button:hover {
|
||||
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 {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
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 {
|
||||
margin: -16px 16px 16px 16px;
|
||||
list-style-type: none;
|
||||
background-color: #1A2A3A;
|
||||
padding: 8px;
|
||||
border-radius: 3px;
|
||||
color: #FAFAFA;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
ul.flashes li {
|
||||
background: #2E2;
|
||||
border: 1px solid #191;
|
||||
border-radius: .6em;
|
||||
margin-bottom: 1em;
|
||||
padding: .4em .7em;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "layout_banned.html" %}
|
||||
{% extends "layout.html" %} {% block content %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Tu es tranché</h1>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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') }}">« 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') }}">« 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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue