nepovednik/izberi.html

173 lines
5.9 KiB
HTML
Raw Normal View History

2017-11-19 14:25:54 +01:00
<html style="padding-left:15%;padding-right:15%;background:black;color:white;">
2017-11-13 04:43:25 +01:00
<head>
<title>nepovednik</title>
<style type="text/css">
@-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
2017-12-06 00:55:19 +01:00
border: 8px solid white;
2017-11-13 04:43:25 +01:00
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
.loading-spinner {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
</style>
</head>
<body>
2017-11-19 14:25:54 +01:00
<div style="font-size: 1.2rem">
2017-12-06 00:55:19 +01:00
Izberi trejler (1 do 1000):
2017-11-19 14:25:54 +01:00
<input id="stevilo" type="text" style="font-size: 1.2rem;background:black;color:white;border-radius:2px;" />
<button id="gumb" style="font-size: 1.2rem;color:white;background:black;border:1px solid white;border-radius:2px;">klik</button>
2017-11-13 04:43:25 +01:00
</div>
<div style="position: relative;">
<video style="width: 100%; margin-top: .5rem;" id="televizija" controls>
Žal gostujoč kos tehnike ni adekvaten.
</video>
2017-12-06 00:55:19 +01:00
<div class="loading-spinner" style="display: none;" id="loader"></div>
2017-11-13 04:43:25 +01:00
</div>
2017-12-06 02:31:02 +01:00
<a id="dlGumb" href="" style="font-size: 1.2rem; color: white; float: right;" target="_blank" download>Vzemi</a>
2017-11-13 04:43:25 +01:00
<script type="text/javascript">
var gumb = document.getElementById("gumb");
var stel = document.getElementById("stevilo");
var tv = document.getElementById("televizija");
var loader = document.getElementById("loader");
var st = 0;
2017-12-06 02:31:02 +01:00
// je iOS naprava?
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
2017-12-06 00:55:19 +01:00
var loading = null;
2017-11-13 04:43:25 +01:00
function pridobiPosnetek() {
2017-12-06 02:31:02 +01:00
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/nepovednik/nepoved/" + st, true);
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var resp = this.responseText;
if (resp === "zacetek" || resp === "cakaj") {
loading = setTimeout(pridobiPosnetek, 3000);
} else {
loader.style.display = "none";
if (iOS) {
resp = "/apple" + resp;
}
document.getElementById("dlGumb").href = '/nepovednik' + resp;
tv.src = '/nepovednik' + resp;
tv.play();
loading = null;
}
}
};
xhttp.send();
2017-11-13 04:43:25 +01:00
}
2017-11-19 14:25:54 +01:00
gumb.onclick = proziPosnetek;
function proziPosnetek() {
2017-11-13 04:43:25 +01:00
st = parseInt(stel.value);
if (isNaN(st) || st < 0 || st > 1000) {
stel.style.backgroundColor = "darksalmon";
} else {
2017-12-06 00:55:19 +01:00
if (loading) return;
2017-11-13 04:43:25 +01:00
stel.style.backgroundColor = "transparent";
loader.style.display = "block";
tv.pause();
pridobiPosnetek();
2017-12-06 02:31:02 +01:00
}
2017-11-19 14:25:54 +01:00
}
function klik(e) {
2017-12-06 02:31:02 +01:00
if (e.keyCode == 13) {
proziPosnetek();
}
2017-11-19 14:25:54 +01:00
}
stel.onkeypress = klik;
2017-12-06 00:55:19 +01:00
// Prvi posnetek je random
var initNum = Math.ceil(Math.random() * 1000);
st = initNum;
stel.value = initNum;
pridobiPosnetek();
2017-11-13 04:43:25 +01:00
</script>
</body>
</html>