smartphone compatibility and url timeout added

index.js

@@ -83,10 +83,6 @@ wss.on('connection', ws => {
       else if (msg[1].length > 2000) ws.send('error;your url is too long')
       else{
         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() {
           if (xhr.readyState === 4) {
             switch(xhr.status) {
@@ -95,11 +91,8 @@ wss.on('connection', ws => {
                 //write to redis
                 redis_cli.hmset("surl;"+ran_key, "url", msg[1], "time", Date.now())
                 ws.send('surl;'+host+ran_key)
-                console.log('key;'+ran_key)
+                console.log(ran_key+' --> '+msg[1])
                 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 502: ws.send('error;remote server error (502)');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();
+        setTimeout(to => {if (xhr.readyState !== 4) ws.send('error;url timed out');xhr.abort()}, 1500)
       }
     }
   })

public/index.html

@@ -3,11 +3,12 @@
 		<title>sURL</title>
 		<meta charset="utf-8">
 		<!-- PWA support -->
-		<link rel="manifest" href="/manifest.json">
-		<meta name="theme-color" content="#2F3BA2">
-		<meta name="description" content="short your url">
+		<link rel="manifest" href="/manifest.json"/>
+		<meta name="theme-color" content="#2F3BA2"/>
+		<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>
 			const wsurl = 'ws://127.0.0.1:8081'
@@ -51,7 +52,7 @@
 			<div class="title">short your url</div>
 			<form name="surl_form" action="javascript:lurl_submit()">
 				<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>
 				<input type="hidden" value="search" name="login">
 				<a href="javascript:lurl_submit()">

public/sym/dark.css

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