rebuzzer
Version:
Rebuzzer is a fullscreen button in the browser which executes a command on the server by clicking on it
138 lines (137 loc) • 3.53 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Rebuzzer</title>
<script src="socketio.js"></script>
<script src="jquery.js"></script>
<style>
html, body {
margin: 0px;
background-color: rgb(20,20,20);
width: 100%;
height: 100%;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#button {
-webkit-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
box-sizing: border-box;
width: 100%;
height: 100%;
display: block;
text-decoration: none;
cursor: pointer;
user-select: none;
position: relative;
}
#commands {
font-size: 1.5rem;
color: #5f5f5f;
display: block;
padding: 1.5rem;
}
.ink {
display: block;
position: absolute;
border-radius: 100%;
transform: scale(0);
}
.ink.animate {
animation: ripple 2.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
@keyframes ripple {
100% {opacity: 0; transform: scale(2.5);}
}
</style>
<script>
var rippleId = 0;
function paintRipple(target, options) {
if(!options.size) {
options.size = 64
}
if(!options.opacity) {
options.opacity = 1
}
++rippleId;
const id = ('ripple' + rippleId);
target.prepend('<span id="' + id + '" class="ink"></span>');
setTimeout(function() {
$('#' + id).remove();
}, 2500)
const ink = target.find('#' + id);
const x = options.x - target.offset().left - options.size / 2;
const y = options.y - target.offset().top - options.size / 2;
ink.css({
'opacity': options.opacity,
'width': options.size,
'height': options.size,
'background-color': options.color,
'top': (y + 'px'),
'left': (x + 'px')
}).addClass("animate");
}
const socket = io();
var color, interval;
var clickable = true;
var inputLocked = false;
socket.on('data', function(data) {
data = JSON.parse(data);
interval = data.interval;
color = ('rgb(' + data.color + ')');
$('#commands').css({
'color': color
});
$("#commands .list").empty();
for(index in data.commands) {
data.commands[index];
$("#commands .list").append('<li>' + data.commands[index] + '</li>');
}
document.title = data.name;
})
socket.on('clickable', function(bool) {
clickable = bool
})
$(document).ready(function() {
$("#button").click(function(event){
if(!clickable || inputLocked) {
paintRipple($(this).parent(), {
size: ($(this).parent().width() / 8),
x: event.pageX,
y: event.pageY,
opacity: .3,
color: color
});
return;
}
socket.emit('rerun', '');
if(interval > 0) {
inputLocked = true;
setTimeout(function() {
inputLocked = false;
}, interval);
}
paintRipple($(this).parent(), {
size: ($(this).parent().width() / 2),
x: event.pageX,
y: event.pageY,
color: color
});
})
})
</script>
</head>
<body>
<div id="button">
<div id="commands"><ul class="list"></ul></div>
</div>
</body>
</html>