cloud-sql-performance/templates/index.html (82 lines of code) (raw):
<html lang="en">
<head>
<title>Tabs VS Spaces</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<nav class="red lighten-1">
<div class="nav-wrapper">
<a href="#" class="brand-logo center">Tabs VS Spaces</a>
</div>
</nav>
<div class="section">
<div class="center">
<h4>
{% if tab_count == space_count %}
TABS and SPACES are evenly matched!
{% elif tab_count > space_count %}
TABS are winning by {{tab_count - space_count}}
{{'votes' if tab_count - space_count > 1 else 'vote'}}!
{% elif space_count > tab_count %}
SPACES are winning by {{space_count - tab_count}}
{{'votes' if space_count - tab_count > 1 else 'vote'}}!
{% endif %}
</h4>
</div>
<div class="row center">
<div class="col s6 m5 offset-m1">
<div class="card-panel {{'green lighten-3' if tab_count > space_count}}">
<i class="material-icons large">keyboard_tab</i>
<h3>{{tab_count}} votes</h3>
<button id="voteTabs" class="btn green">Vote for TABS</button>
</div>
</div>
<div class="col s6 m5">
<div class="card-panel {{'blue lighten-3' if tab_count < space_count}}">
<i class="material-icons large">space_bar</i>
<h3>{{space_count}} votes</h3>
<button id="voteSpaces" class="btn blue">Vote for SPACES</button>
</div>
</div>
</div>
<h4 class="header center">Recent Votes</h4>
<ul class="container collection center">
{% for vote in recent_votes %}
<li class="collection-item avatar">
{% if vote.candidate == "TABS" %}
<i class="material-icons circle green">keyboard_tab</i>
{% elif vote.candidate == "SPACES" %}
<i class="material-icons circle blue">space_bar</i>
{% endif %}
<span class="title">
A vote for <b>{{vote.candidate}}</b>
</span>
<p>was cast at {{vote.time_cast}}</p>
</li>
{% endfor %}
</ul>
</div>
<script>
function vote(team) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
window.location.reload();
}
};
xhr.open("POST", "/", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("team=" + team);
}
document.getElementById("voteTabs").addEventListener("click", function () {
vote("TABS");
});
document.getElementById("voteSpaces").addEventListener("click", function () {
vote("SPACES");
});
</script>
</body>
</html>