74 lines
2.3 KiB
HTML
74 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pátek's battle of colors</title>
|
|
<style>
|
|
body {
|
|
background-image: linear-gradient(to left, #ff1546 90%, transparent 100%);
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#bar {
|
|
z-index: -1;
|
|
position: absolute;
|
|
left:0;
|
|
min-width: 50%;
|
|
top:0;
|
|
bottom: 0;
|
|
background-image: linear-gradient(to right, #1aff45 90%, transparent 100%);
|
|
transition: min-width 2s;
|
|
}
|
|
|
|
.perc {
|
|
font-size: 5rem;
|
|
}
|
|
|
|
.perc::after {
|
|
content: '%';
|
|
}
|
|
|
|
.val {
|
|
font-size: 2rem;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
setInterval(() => {
|
|
fetch("/stats").then((response) => {
|
|
response.json().then((json) => {
|
|
let n1 = Number(json[0]);
|
|
let n2 = Number(json[1]);
|
|
let v1 = document.getElementById("1");
|
|
let v1f = n1 / (n1 + n2);
|
|
v1.getElementsByClassName("val")[0].innerText = n1.toString();
|
|
v1.getElementsByClassName("perc")[0].innerText = (n1 === 0 && n2 === 0) ? "50" : (n1 === 0 ? "0" : Number(v1f * 100).toFixed(0));
|
|
let v2 = document.getElementById("2");
|
|
let v2f = n2 / (n1 + n2);
|
|
v2.getElementsByClassName("val")[0].innerText = n2.toString();
|
|
v2.getElementsByClassName("perc")[0].innerText = (n1 === 0 && n2 === 0) ? "50" : (n2 === 0 ? "0" : Number(v2f * 100).toFixed(0));
|
|
document.getElementById("bar").style.minWidth = v1f*100 + "%";
|
|
});
|
|
});
|
|
}, 500)
|
|
})
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="1" class="votes">
|
|
<div class="perc"></div>
|
|
<div class="val"></div>
|
|
</div>
|
|
<div id="2" class="votes">
|
|
<div class="perc"></div>
|
|
<div class="val"></div>
|
|
</div>
|
|
<div id="bar"></div>
|
|
</body>
|
|
</html>
|