smartphone compatibility and url timeout added

master
adb-sh 4 years ago
parent 083219b350
commit 5af8687ebb

@ -83,10 +83,6 @@ wss.on('connection', ws => {
else if (msg[1].length > 2000) ws.send('error;your url is too long') else if (msg[1].length > 2000) ws.send('error;your url is too long')
else{ else{
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
console.log(msg[1])
xhr.timeout = 1000;
xhr.open('GET', msg[1], true);
xhr.ontimeout = function(e) {ws.send('error;url timed out')}
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
switch(xhr.status) { switch(xhr.status) {
@ -95,11 +91,8 @@ wss.on('connection', ws => {
//write to redis //write to redis
redis_cli.hmset("surl;"+ran_key, "url", msg[1], "time", Date.now()) redis_cli.hmset("surl;"+ran_key, "url", msg[1], "time", Date.now())
ws.send('surl;'+host+ran_key) ws.send('surl;'+host+ran_key)
console.log('key;'+ran_key) console.log(ran_key+' --> '+msg[1])
break; break;
case 301: ws.send('error;the url is redirecting (301)');break;
case 302: ws.send('error;the url is redirecting (302)');break;
case 303: ws.send('error;the url is redirecting (303)');break;
case 404: ws.send('error;site does not exist (404)');break; case 404: ws.send('error;site does not exist (404)');break;
case 502: ws.send('error;remote server error (502)');break; case 502: ws.send('error;remote server error (502)');break;
case 500: ws.send('error;remote server error (500)');break; case 500: ws.send('error;remote server error (500)');break;
@ -108,7 +101,11 @@ wss.on('connection', ws => {
} }
} }
} }
xhr.open('GET', msg[1], true);
xhr.timeout = 1000;
xhr.ontimeout = function(e) {ws.send('error;url is to slow')}
xhr.send(); xhr.send();
setTimeout(to => {if (xhr.readyState !== 4) ws.send('error;url timed out');xhr.abort()}, 1500)
} }
} }
}) })

@ -3,11 +3,12 @@
<title>sURL</title> <title>sURL</title>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- PWA support --> <!-- PWA support -->
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json"/>
<meta name="theme-color" content="#2F3BA2"> <meta name="theme-color" content="#2F3BA2"/>
<meta name="description" content="short your url"> <meta name="description" content="short your url"/>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
<link rel="stylesheet" type="text/css" href="./sym/dark.css"> <link rel="stylesheet" type="text/css" href="./sym/dark.css"/>
<script src="./sym/script.js"></script> <script src="./sym/script.js"></script>
<script> <script>
const wsurl = 'ws://127.0.0.1:8081' const wsurl = 'ws://127.0.0.1:8081'
@ -51,7 +52,7 @@
<div class="title">short your url</div> <div class="title">short your url</div>
<form name="surl_form" action="javascript:lurl_submit()"> <form name="surl_form" action="javascript:lurl_submit()">
<div class="input-field" id="longurl"> <div class="input-field" id="longurl">
<input class="input" id="longurl-input" type="text" onblur="deselected('longurl');" onfocus="selected('longurl');" name="url" value="" maxlength="2000" placeholder="https://your.long.url/junk"> <input class="input" id="longurl-input" type="text" autocomplete="off" onblur="deselected('longurl');" onfocus="selected('longurl');" name="url" value="" maxlength="2000" placeholder="https://your.long.url/junk">
</div> </div>
<input type="hidden" value="search" name="login"> <input type="hidden" value="search" name="login">
<a href="javascript:lurl_submit()"> <a href="javascript:lurl_submit()">

@ -10,8 +10,8 @@ body{
padding-top: 20px; padding-top: 20px;
padding-bottom: 130px; padding-bottom: 130px;
min-height: calc(100% - 150px); min-height: calc(100% - 150px);
max-width: 60rem; max-width: 70rem;
min-width: 30rem; min-width: 25rem;
margin: auto; margin: auto;
background-color: #1f262b; background-color: #1f262b;
} }
@ -62,7 +62,7 @@ td.mid,th.mid{
div.input-box { div.input-box {
position: absolute; position: absolute;
left: calc(50% - 14rem); left: calc(50% - 14rem);
top: calc(50% - 100px); top: calc(50% - 7rem);
width: 28rem; width: 28rem;
height: 14rem; height: 14rem;
background-color: #14181b00; background-color: #14181b00;
@ -71,21 +71,18 @@ div.input-box {
} }
div.input-field { div.input-field {
position: relative; position: relative;
left: 0px;
top: 0px;
margin-left: 5%; margin-left: 5%;
margin-top: 20px; margin-top: 20px;
width: 90%; width: 90%;
height: 2.5rem; height: 2.5rem;
background-color: #14181b; background-color: #14181b;
border-radius: 0.6rem; border-radius: 1.25rem;
border: 1px solid #fff; border: 1px solid #fff;
} }
.input { .input {
position: absolute; position: absolute;
left: 1rem; left: 1rem;
top: 50%; top: calc(50% - 1rem);
margin-top: -15px;
width: calc(100% - 2rem); width: calc(100% - 2rem);
height: 2rem; height: 2rem;
text-align: center; text-align: center;
@ -118,7 +115,7 @@ input[id="longurl-input"]::-webkit-input-placeholder {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 15pt; font-size: 1.4rem;
color:#fff; color:#fff;
font-family:Arial, "lucida console", sans-serif; font-family:Arial, "lucida console", sans-serif;
} }
@ -203,7 +200,7 @@ img.icon {
margin-top: 1rem; margin-top: 1rem;
} }
#surl-popup{ #surl-popup{
position: fixed; position: absolute;
width: 30rem; width: 30rem;
height: 14rem; height: 14rem;
left: calc(50% - 15rem); left: calc(50% - 15rem);
@ -216,7 +213,6 @@ img.icon {
} }
@keyframes slide-from-top{ @keyframes slide-from-top{
from{top:20%;opacity: 0} from{top:20%;opacity: 0}
to{top:calc(50% - 7rem);opacity: 1} to{top:calc(50% - 7rem);opacity: 1}
@ -224,4 +220,24 @@ img.icon {
@keyframes slide-from-left{ @keyframes slide-from-left{
from{left:-30rem;opacity: 0} from{left:-30rem;opacity: 0}
to{left:1rem;opacity: 1} to{left:1rem;opacity: 1}
}
@media (max-width: 35rem){
div.input-box {
left: 5%;
width: 90%;
}
.error{
bottom: 1rem;
left: 1rem;
height: 8rem;
width: calc(100% - 2rem);
}
#surl-popup{
width: calc(100% - 2rem);
height: 14rem;
left: 1rem;
}
} }
Loading…
Cancel
Save