48 lines
1.7 KiB
HTML
48 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Klaxon horn jump scare button</title>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
<script src="https://kit.fontawesome.com/1449a8617b.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<section class="section hero is-fullheight" style='background-image: url("{{ url_for('static', filename='pumpkin.png' ) }}");'>
|
|
<div class="container has-text-centered is-large">
|
|
<h1 class="title">
|
|
Klaxon Horn Jump Scare Control
|
|
</h1>
|
|
<button class="button is-dark is-large is-fullwidth" id="spoop">
|
|
<i class="fa-solid fa-skull m-3"></i> SPOOP <i class="fa-solid fa-bullhorn m-3"></i>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
var isTouchDevice = 'ontouchstart' in document.documentElement;
|
|
var starturl = '/start'
|
|
var stopurl = '/stop'
|
|
$( "#spoop" )
|
|
.mouseup(function() {
|
|
$.getJSON(stopurl, { }, function(data) { }); return false;
|
|
})
|
|
.mousedown(function() {
|
|
$.getJSON(starturl, { }, function(data) { }); return false;
|
|
})
|
|
|
|
$('#spoop').on('touchstart', function(){
|
|
if (isTouchDevice) {
|
|
$.getJSON(starturl, { }, function(data) { }); return false;
|
|
}
|
|
});
|
|
$('#spoop').on('touchend', function(){
|
|
if (isTouchDevice) {
|
|
$.getJSON(stopurl, { }, function(data) { }); return false;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|