143 lines
6.7 KiB
HTML
143 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:og="http://ogp.me/ns#"
|
|
xmlns:fb="https://www.facebook.com/2008/fbml">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{text}}</title>
|
|
<!-- Latest compiled and minified CSS -->
|
|
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
|
|
|
|
<!-- Optional theme -->
|
|
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
|
|
|
|
<style type="text/css">
|
|
.full-width-image {
|
|
height: 300px; // your specified height
|
|
background: url("images/header.png") no-repeat center center fixed;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
|
|
<meta property="og:title" content="EUrom.at: {{text}}"/>
|
|
<meta property="og:type" content="article"/>
|
|
<meta property="og:url" content="https://eurom.at/fragen/{{url}}"/>
|
|
<meta property="og:image" content="https://eurom.at/fragen/images/header.png"/>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- <fb:like href="https://eurom.at/frage/{{url}}" width="450" height="80"/> -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<img src="images/header.png" class="img-fluid img-responsive" alt="Eurom.at"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="jumbotron" style="background-color: {{color}}; color: {{textcolor}}">
|
|
<p>Wir haben folgende These geprüft:</p>
|
|
<h1>{{ text }}</h1>
|
|
</div>
|
|
|
|
<!-- <div class="row">
|
|
<div class="col-md-12">
|
|
<h4>Wir haben folgende These geprüft:</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>{{ text }}</h1>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="container" style="margin-top: 20px;">
|
|
<h4>Verteilung der Antworten:</h4>
|
|
</div>
|
|
<div class="container" style="margin-top: 20px;">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<canvas id="myChart" ></canvas>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="container">
|
|
<div class="col-md-12">
|
|
<h5>Zustimmung ({{ZustimmungParteienCount}})</h5>
|
|
<p style="word-wrap: break-word;">{{ZustimmungParteien}}</p>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<h5>Enthaltung ({{EnthaltungParteienCount}})</h5>
|
|
<p>{{EnthaltungParteien}}</p>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<h5>Ablehnung ({{AblehnungParteienCount}})</h5>
|
|
<p>{{AblehnungParteien}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container" style="margin-top: 20px;">
|
|
<h4>Antworten der Parteien:</h4>
|
|
</div>
|
|
<div class="container">
|
|
<div class="card-columns">
|
|
{{#answers}}
|
|
<div class="card">
|
|
<img class="card-img-top img-responsive" src="images/{{party}}.jpg" alt="{{name}}">
|
|
<div class="card-body">
|
|
<h4 class="card-title">{{name}}</h4>
|
|
<p class="card-text">
|
|
{{text}}
|
|
</p>
|
|
<div class="card-text">
|
|
{{#ifEquals answer "Zustimmung"}}
|
|
<button type="button" class="btn btn-success">Zustimmung</button>
|
|
{{/ifEquals}}
|
|
{{#ifEquals answer "Ablehnung"}}
|
|
<button type="button" class="btn btn-danger">Ablehnung</button>
|
|
{{/ifEquals}}
|
|
{{#ifEquals answer "Enthaltung"}}
|
|
<button type="button" class="btn btn-info">Enthaltung</button>
|
|
{{/ifEquals}}
|
|
</div>
|
|
<!-- <h4 class="card-title">Card title that wraps to a new line</h4>
|
|
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
|
|
</div>
|
|
</div>
|
|
{{/answers}}
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
window.onload = function() {
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
|
var myDoughnutChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [{{Zustimmung}}, {{Enthaltung}}, {{Ablehnung}}],
|
|
backgroundColor: [ '#5cb85c', '#5bc0de', '#d9534f']
|
|
}],
|
|
|
|
// These labels appear in the legend and in the tooltips when hovering different arcs
|
|
labels: [
|
|
'Zustimmung',
|
|
'Enthaltung',
|
|
'Ablehnung'
|
|
]
|
|
},
|
|
options: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|