From 2424ffc15c1259e3556f176914711aae163f6d08 Mon Sep 17 00:00:00 2001
From: adb-sh <albandavidbecker@gmail.com>
Date: Wed, 12 Aug 2020 01:55:46 +0200
Subject: [PATCH] PWA manifest and some CSS

---
 index.js             |   2 +-
 public/index.html    |  58 +++++-----
 public/manifest.json |   9 ++
 public/sym/dark.css  | 249 +++++++++++++++++++------------------------
 4 files changed, 151 insertions(+), 167 deletions(-)
 create mode 100644 public/manifest.json
diff --git a/index.js b/index.js
index ed30445..78b6267 100644
--- a/index.js
+++ b/index.js
@@ -13,7 +13,7 @@ redis_cli.on("error", function (error) {
   console.error(error)
 })
 
-const outpath = ['sym', '']
+const outpath = ['sym', '', 'manifest.json']
 
 //HTTP server
 http.createServer(function (req, res) {
diff --git a/public/index.html b/public/index.html
index f7f1552..b6e5c4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,11 @@
 	<head>
 		<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="stylesheet" type="text/css" href="./sym/dark.css">
 		<script src="./sym/script.js"></script>
 		<script>
@@ -14,39 +19,42 @@
 			socket.onerror = (error) => {
 				console.log(`WebSocket error: ${error}`)
 			}
-			socket.onclose = () => {
-				document.getElementById('error-message').innerText = 'session timed out (refresh)'
-				document.getElementById('error-box').style.display = 'block'
-			}
+			socket.onclose = error => show_error('session timed out (refresh)')
 			socket.onmessage = (e) => {
 				console.log(e.data)
 				let msg = e.data.split(";", 2)
-				if (msg[0] === 'error') {
-					document.getElementById('error-message').innerText = msg[1]
-					document.getElementById('error-box').style.display = 'block'
-				} else if (msg[0] === 'surl') {
+				if (msg[0] === 'error') show_error(msg[1])
+				else if (msg[0] === 'surl') {
 					document.getElementById('surl-input').value = msg[1]
-					document.getElementById('new-user-box').style.display = 'block'
+					document.getElementById('surl-popup').style.display = 'block'
 				}
 			}
-			function short_url(){
-				socket.send('long_url '+document.getElementById('name-input').value)
-			}
 			function copy_url() {
-				document.getElementById('surl-input').select();
-				document.execCommand("copy");
+				document.getElementById('surl-input').select()
+				document.execCommand("copy")
+			}
+			//document.surl_form.action = surl_submit()
+			function lurl_submit() {
+				socket.send('long_url;'+document.getElementById('longurl-input').value)
+			}
+			function show_error(msg) {
+				let error_style = document.getElementById('error-box').style
+				document.getElementById('error-message').innerText = msg
+				error_style.display = "block"
+				error_style.animation = "slide-from-left alternate 0.2s"
+				setTimeout(to => {error_style.animation = ""}, 200)
 			}
 		</script>
 	</head>
 	<body>
-		<div class="login">
+		<div class="input-box">
 			<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">
+			<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">
 				</div>
 				<input type="hidden" value="search" name="login">
-				<a href="javascript:socket.send('long_url;'+document.getElementById('name-input').value)">
+				<a href="javascript:lurl_submit()">
 					<div class="btn-blue" id="short-btn">
 						<div class="btn-text">short</div>
 					</div>
@@ -54,10 +62,10 @@
 			</form>
 		</div>
 
-		<div class="box-dark" id="new-user-box">
-			<div class="login">
+		<div class="box-dark" id="surl-popup">
+			<div class="input-box">
 				<div class="title2">your sURL:</div>
-				<div class="inputbox" id="surl">
+				<div class="input-field" id="surl">
 					<input class="input" id="surl-input" type="text" onblur="deselected('surl');" onfocus="selected('surl');" size="30" value="" maxlength="20" placeholder="surl">
 				</div>
 				<input type="hidden" value="search" name="login">
@@ -65,13 +73,13 @@
 					<div class="btn-text">copy</div>
 				</div>
 			</div>
-			<div onclick="visible('new-user-box','off')" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">
-				<img class="icon" src="sym/ic_close_white_24px.svg" />
+			<div onclick="this.parentNode.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>
 
 		<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">
+			<div onclick="this.parentNode.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" class="btn-text">
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..d6584ac
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,9 @@
+{
+  "name": "short url",
+  "short_name": "sURL",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#14181b",
+  "theme_color": "#00BCD4",
+  "orientation": "portrait-primary"
+}
\ No newline at end of file
diff --git a/public/sym/dark.css b/public/sym/dark.css
index e743c72..e3a2062 100644
--- a/public/sym/dark.css
+++ b/public/sym/dark.css
@@ -10,43 +10,84 @@ body{
     padding-top: 20px;
     padding-bottom: 130px;
     min-height: calc(100% - 150px);
-    max-width: 1000px;
-    min-width: 500px;
+    max-width: 60rem;
+    min-width: 30rem;
     margin: auto;
     background-color: #1f262b;
 }
-div.login {
+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;
+}
+
+
+div.input-box {
     position: absolute;
-    left: calc(50% - 200px);
+    left: calc(50% - 14rem);
     top: calc(50% - 100px);
-    margin-left: 0px;
-    margin-top: 0px;
-    width: 400px;
-    height: 200px;
+    width: 28rem;
+    height: 14rem;
     background-color: #14181b00;
     border-radius: 8px;
     border: 0px solid #fff;
 }
-div.inputbox {
+div.input-field {
     position: relative;
     left: 0px;
     top: 0px;
-    margin-left: 0px;
+    margin-left: 5%;
     margin-top: 20px;
-    width: 100%;
-    height: 40px;
+    width: 90%;
+    height: 2.5rem;
     background-color: #14181b;
-    border-radius: 8px;
+    border-radius: 0.6rem;
     border: 1px solid #fff;
 }
 .input {
     position: absolute;
-    left: 25px;
+    left: 1rem;
     top: 50%;
-    margin-left: -0px;
     margin-top: -15px;
-    width: calc(100% - 50px);
-    height: 30px;
+    width: calc(100% - 2rem);
+    height: 2rem;
     text-align: center;
     color:#fff;
     font-size: 15pt;
@@ -55,46 +96,22 @@ div.inputbox {
     background-color: transparent;
     outline: 0 none;
 }
-input[id="name-input"]::-webkit-input-placeholder {
+input[id="longurl-input"]::-webkit-input-placeholder {
     color: #ffffff;
 }
-#short-btn {
-    position: absolute;
-    width: 150px;
-    margin-left: calc(50% - 75px);
-    margin-top: 20px;
-}
-#copy-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;
+    height: 2.5rem;
     background-color: #00BCD4;
     box-shadow: 3px 3px 10px #333;
-    border-radius: 20px;
+    border-radius: 1.25rem;
 }
 .btn-green{
     cursor: pointer;
-    height: 40px;
+    height: 2.5rem;
     background-color: #009688;
     box-shadow: 3px 3px 10px #333;
-    border-radius: 20px;
+    border-radius: 1.25rem;
 }
 .btn-text {
     position: absolute;
@@ -107,28 +124,27 @@ input[id="name-input"]::-webkit-input-placeholder {
 }
 .sym_btn-red{
     cursor: pointer;
-    height: 40px;
-    width: 40px;
+    height: 2.5rem;
+    width: 2.5rem;
     background-color: #E53935;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     box-shadow: 3px 3px 10px #333;
     float: left;
 }
 .sym_btn-blue{
     cursor: pointer;
-    height: 40px;
-    width: 40px;
+    height: 2.5rem;
+    width: 2.5rem;
     background-color: #1E88E5;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     box-shadow: 3px 3px 10px #333;
     float: left;
 }
 .sym_btn-invisible{
     cursor: pointer;
-    height: 40px;
-    width: 40px;
-    background-color: #fff0;
-    border-radius: 20px;
+    height: 2.5rem;
+    width: 2.5rem;
+    border-radius: 1.25rem;
     float: left;
 }
 img.icon {
@@ -150,11 +166,6 @@ img.icon {
     font-size: 20pt;
     font-family:"Roboto", bold, sans-serif;
 }
-#login-title {
-    position: absolute;
-    top: 0px;
-    margin-bottom: 30px;
-}
 .box-dark{
     position: relative;
     margin: auto;
@@ -168,93 +179,49 @@ img.icon {
     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;
+.error{
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+    height: 10rem;
+    width: 16rem;
+    background-color: #E53935;
+    border-radius: 15px;
 }
-td.right,th.right{
-    border-radius: 0px 8px 8px 0px;
+
+
+#short-btn {
+    position: absolute;
+    width: 10rem;
+    margin-left: calc(50% - 5rem);
+    margin-top: 20px;
 }
-td.mid,th.mid{
-    border-radius: 0px 0px 0px 0px;
+#copy-btn {
+    position: absolute;
+    width: 10rem;
+    margin-left: calc(50% - 5rem);
+    margin-top: 1rem;
 }
-#new-user-box{
+#surl-popup{
     position: fixed;
-    width: 500px;
-    height: 200px;
-    left: calc(50% - 250px);
-    top: calc(50% - 100px);
+    width: 30rem;
+    height: 14rem;
+    left: calc(50% - 15rem);
+    top: calc(50% - 7rem);
     display: none;
+    animation: slide-from-top alternate 0.4s;
 }
-#change-user-box{
-    position: fixed;
-    width: 400px;
-    height: 300px;
-    left: calc(50% - 200px);
-    top: calc(50% - 150px);
+#error-box{
     display: none;
 }
-.error{
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-    height: 150px;
-    width: 250px;
-    background-color: #E53935;
-    border-radius: 15px;
+
+
+
+@keyframes slide-from-top{
+     from{top:20%;opacity: 0}
+     to{top:calc(50% - 7rem);opacity: 1}
 }
-#error-box{
-    display: none;
+@keyframes slide-from-left{
+    from{left:-30rem;opacity: 0}
+    to{left:1rem;opacity: 1}
 }
\ No newline at end of file
