Add files via upload
//ADB
4 years ago
committed by
GitHub
parent
3e7081a7aa
commit
ba55edfcf0
@ -0,0 +1,50 @@
|
||||
const http = require('http');
|
||||
const url = require('url');
|
||||
const fs = require('fs');
|
||||
const ws = require('ws');
|
||||
|
||||
http.createServer(function (req, res) {
|
||||
const q = url.parse(req.url, true);
|
||||
let filename = "./public" + q.pathname;
|
||||
if (filename === "./public/") filename = "./public/index.html";
|
||||
fs.readFile(filename, function(err, data) {
|
||||
if (err) {
|
||||
res.writeHead(404, {'Content-Type': 'text/html'});
|
||||
return res.end("404 Not Found");
|
||||
}
|
||||
res.writeHead(200, {'Content-Type': 'text/html'});
|
||||
res.write(data);
|
||||
return res.end();
|
||||
});
|
||||
}).listen(8080);
|
||||
|
||||
const wss = new ws.Server({
|
||||
port: 8081,
|
||||
perMessageDeflate: {
|
||||
zlibDeflateOptions: {
|
||||
// See zlib defaults.
|
||||
chunkSize: 1024,
|
||||
memLevel: 7,
|
||||
level: 3
|
||||
},
|
||||
zlibInflateOptions: {
|
||||
chunkSize: 10 * 1024
|
||||
},
|
||||
// Other options settable:
|
||||
clientNoContextTakeover: true, // Defaults to negotiated value.
|
||||
serverNoContextTakeover: true, // Defaults to negotiated value.
|
||||
serverMaxWindowBits: 10, // Defaults to negotiated value.
|
||||
// Below options specified as default values.
|
||||
concurrencyLimit: 10, // Limits zlib concurrency for perf.
|
||||
threshold: 1024 // Size (in bytes) below which messages
|
||||
// should not be compressed.
|
||||
}
|
||||
});
|
||||
|
||||
wss.on('connection', ws => {
|
||||
ws.on('message', message => {
|
||||
console.log(`Received message => ${message}`)
|
||||
if ({message} == 'long_url ') ws.send('error: url is empty')
|
||||
})
|
||||
ws.send('websocket connected')
|
||||
})
|
||||
@ -0,0 +1,50 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>short URL</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="./sym/dark.css">
|
||||
<script src="./sym/script.js"></script>
|
||||
<script>
|
||||
const wsurl = 'ws://192.168.188.36:8081'
|
||||
const socket = new WebSocket(wsurl)
|
||||
|
||||
socket.onopen = () => {
|
||||
socket.send('new session')
|
||||
}
|
||||
socket.onerror = (error) => {
|
||||
console.log(`WebSocket error: ${error}`)
|
||||
}
|
||||
socket.onmessage = (e) => {
|
||||
console.log(e.data)
|
||||
document.getElementById('error-message').innerText = e.data
|
||||
document.getElementById('error-box').style.display = 'block'
|
||||
}
|
||||
function short_url(){
|
||||
socket.send('long_url '+document.getElementById('name-input').value)
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login">
|
||||
<div class="title">short your url</div>
|
||||
<form name="search" action="javascript:socket.send('long_url '+document.getElementById('name-input').value)" method="POST">
|
||||
<div class="inputbox" id="name">
|
||||
<input class="input" id="name-input" type="text" onblur="deselected('name');" onfocus="selected('name');" name="url" value="" maxlength="2000" placeholder="https://your.long.url/junk">
|
||||
</div>
|
||||
<input type="hidden" value="search" name="login">
|
||||
<a href="javascript:socket.send('long_url '+document.getElementById('name-input').value)">
|
||||
<div class="btn-blue" id="short-btn">
|
||||
<div class="btn-text">short</div>
|
||||
</div>
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
<div id="error-box" class="error">
|
||||
<div onclick="document.getElementById('error-box').style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">
|
||||
<img class="icon" src="./sym/ic_close_white_24px.svg">
|
||||
</div>
|
||||
<div id="error-message">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,348 @@
|
||||
html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
background-color: #14181b;
|
||||
}
|
||||
body{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 130px;
|
||||
min-height: calc(100% - 150px);
|
||||
max-width: 1000px;
|
||||
min-width: 500px;
|
||||
margin: auto;
|
||||
background-color: #1f262b;
|
||||
}
|
||||
#stream{
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
margin: auto;
|
||||
width: calc(100% - 50px);
|
||||
height: auto;
|
||||
max-width: 700px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#left-control{
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
left: calc(25% - 75px);
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 75px;
|
||||
box-shadow: 2px 2px 3px #14181b;
|
||||
}
|
||||
#right-control{
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
right: calc(25% - 75px);
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 2px 3px #14181b;
|
||||
}
|
||||
div.control-buttons{
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #000000;
|
||||
border-radius: 25px;
|
||||
box-shadow: 1px 1px 3px #14181b;
|
||||
cursor: pointer;
|
||||
}
|
||||
#left-control-up{
|
||||
top: 10px;
|
||||
left: 50px;
|
||||
}
|
||||
#left-control-down{
|
||||
bottom: 10px;
|
||||
left: 50px;
|
||||
}
|
||||
#left-control-left{
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
}
|
||||
#left-control-right{
|
||||
top: 50px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#left-control-rotate-l{
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
#left-control-rotate-r{
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
#right-control-up{
|
||||
top: 10px;
|
||||
left: 50px;
|
||||
}
|
||||
#right-control-down{
|
||||
bottom: 10px;
|
||||
left: 50px;
|
||||
}
|
||||
#right-control-left{
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
}
|
||||
#right-control-right{
|
||||
top: 50px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#right-control-forward{
|
||||
top: 10px;
|
||||
right: -60px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
#right-control-backward{
|
||||
bottom: 10px;
|
||||
right: -60px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
div.login {
|
||||
position: absolute;
|
||||
left: calc(50% - 200px);
|
||||
top: calc(50% - 125px);
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
background-color: #14181b00;
|
||||
border-radius: 8px;
|
||||
border: 0px solid #fff;
|
||||
}
|
||||
div.inputbox {
|
||||
position: relative;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #14181b;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
.input {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 50%;
|
||||
margin-left: -0px;
|
||||
margin-top: -15px;
|
||||
width: calc(100% - 50px);
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
color:#fff;
|
||||
font-size: 15pt;
|
||||
font-family:Arial, "lucida console", sans-serif;
|
||||
border: 0px solid #fff;
|
||||
background-color: transparent;
|
||||
outline: 0 none;
|
||||
}
|
||||
input[id="name-input"]::-webkit-input-placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
#short-btn {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
margin-left: calc(50% - 75px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
#bottom-link-btn {
|
||||
position: fixed;
|
||||
width: 150px;
|
||||
left: calc(50% - 75px);
|
||||
bottom: 20px;
|
||||
}
|
||||
#logout-link-btn {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
.btn-blue{
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
background-color: #00BCD4;
|
||||
box-shadow: 3px 3px 10px #333;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.btn-green{
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
background-color: #009688;
|
||||
box-shadow: 3px 3px 10px #333;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.btn-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 15pt;
|
||||
color:#fff;
|
||||
font-family:Arial, "lucida console", sans-serif;
|
||||
}
|
||||
.sym_btn-red{
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-color: #E53935;
|
||||
border-radius: 20px;
|
||||
box-shadow: 3px 3px 10px #333;
|
||||
float: left;
|
||||
}
|
||||
.sym_btn-blue{
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-color: #1E88E5;
|
||||
border-radius: 20px;
|
||||
box-shadow: 3px 3px 10px #333;
|
||||
float: left;
|
||||
}
|
||||
.sym_btn-invisible{
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-color: #fff0;
|
||||
border-radius: 20px;
|
||||
float: left;
|
||||
}
|
||||
img.icon {
|
||||
margin-top: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color:#fff;
|
||||
font-size: 30pt;
|
||||
font-family:"Roboto", bold, sans-serif;
|
||||
}
|
||||
.title2 {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color:#fff;
|
||||
font-size: 20pt;
|
||||
font-family:"Roboto", bold, sans-serif;
|
||||
}
|
||||
#login-title {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.box-dark{
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: calc(100% - 50px);
|
||||
max-width: 600px;
|
||||
background-color: #1f262b;
|
||||
box-shadow: 3px 3px 10px #333;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 15pt;
|
||||
font-family:"Roboto", regular, sans-serif;
|
||||
}
|
||||
#user-line{
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: calc(100% - 0px);
|
||||
height: 50px;
|
||||
max-width: 600px;
|
||||
background-color: #1f262b;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#new_user-btn{
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
width: 250px;
|
||||
}
|
||||
#create_user-btn{
|
||||
position: relative;
|
||||
top: 50px;
|
||||
width: 250px;
|
||||
}
|
||||
table{
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: calc(100% - 50px);
|
||||
max-width: 600px;
|
||||
background-color: #1f262b;
|
||||
box-shadow: 3px 3px 10px #333;
|
||||
border: 2px solid #fff;
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 15pt;
|
||||
font-family:"Roboto", regular, sans-serif;
|
||||
}
|
||||
tr{
|
||||
margin: auto;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
th{
|
||||
margin: auto;
|
||||
border: 0px solid #aaa;
|
||||
background-color: #546E7A;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
td{
|
||||
margin: auto;
|
||||
border: 0px solid #aaa;
|
||||
background-color: #37474F ;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
td.left,th.left{
|
||||
border-radius: 8px 0px 0px 8px;
|
||||
}
|
||||
td.right,th.right{
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
}
|
||||
td.mid,th.mid{
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
}
|
||||
#new-user-box{
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
left: calc(50% - 200px);
|
||||
top: calc(50% - 150px);
|
||||
display: none;
|
||||
}
|
||||
#change-user-box{
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
left: calc(50% - 200px);
|
||||
top: calc(50% - 150px);
|
||||
display: none;
|
||||
}
|
||||
.error{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
height: 150px;
|
||||
width: 250px;
|
||||
background-color: #E53935;
|
||||
border-radius: 15px;
|
||||
}
|
||||
#error-box{
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 268 B |
@ -0,0 +1,32 @@
|
||||
function selected(id){
|
||||
var element = document.getElementById(id);
|
||||
element.style.boxShadow = '1px 1px 2px #999';
|
||||
element.style.backgroundColor = "#ffffff";
|
||||
|
||||
var element = document.getElementById(id+'-input');
|
||||
element.style.color = "#000000";
|
||||
}
|
||||
function deselected(id){
|
||||
var element = document.getElementById(id);
|
||||
element.style.boxShadow = '0px 0px 0px #999';
|
||||
element.style.backgroundColor = "#14181b";
|
||||
|
||||
var element = document.getElementById(id+'-input');
|
||||
element.style.color = "#ffffff";
|
||||
}
|
||||
|
||||
function visible(id, status){
|
||||
if(status == "on"){
|
||||
document.getElementById(id).style.display = 'block';
|
||||
}
|
||||
else{
|
||||
document.getElementById(id).style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function session_end() {
|
||||
if (confirm("Session timed out! Please login.")) {
|
||||
window.location.replace('https://adb.sh/robo-remote/login.php');
|
||||
} else {
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue