From 498028284f789a6a9f72410513f81369fe3e2a21 Mon Sep 17 00:00:00 2001
From: adb-sh <albandavidbecker@gmail.com>
Date: Mon, 10 Aug 2020 14:17:03 +0200
Subject: [PATCH] session-closed error message and some CSS

---
 public/index.html   | 21 +++++++++++++--------
 public/sym/dark.css | 14 +++++++-------
 2 files changed, 20 insertions(+), 15 deletions(-)
diff --git a/public/index.html b/public/index.html
index 7d34afa..f7f1552 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,6 +1,6 @@
 <html>
 	<head>
-		<title>short URL</title>
+		<title>sURL</title>
 		<meta charset="utf-8">
 		<link rel="stylesheet" type="text/css" href="./sym/dark.css">
 		<script src="./sym/script.js"></script>
@@ -14,6 +14,10 @@
 			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.onmessage = (e) => {
 				console.log(e.data)
 				let msg = e.data.split(";", 2)
@@ -52,13 +56,14 @@
 
 		<div class="box-dark" id="new-user-box">
 			<div class="login">
-					<div class="inputbox" 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">
-					<div class="btn-green" id="copy-btn" onclick="copy_url()">
-						<div class="btn-text">copy</div>
-					</div>
+				<div class="title2">your sURL:</div>
+				<div class="inputbox" 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">
+				<div class="btn-green" id="copy-btn" onclick="copy_url()">
+					<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" />
diff --git a/public/sym/dark.css b/public/sym/dark.css
index ab347fa..baaa673 100644
--- a/public/sym/dark.css
+++ b/public/sym/dark.css
@@ -112,11 +112,11 @@ div.control-buttons{
 div.login {
     position: absolute;
     left: calc(50% - 200px);
-    top: calc(50% - 125px);
+    top: calc(50% - 100px);
     margin-left: 0px;
     margin-top: 0px;
     width: 400px;
-    height: 250px;
+    height: 200px;
     background-color: #14181b00;
     border-radius: 8px;
     border: 0px solid #fff;
@@ -237,7 +237,7 @@ img.icon {
     font-family:"Roboto", bold, sans-serif;
 }
 .title2 {
-    margin-top: 50px;
+    margin-top: 20px;
     text-align: center;
     width: 100%;
     color:#fff;
@@ -326,10 +326,10 @@ td.mid,th.mid{
 }
 #new-user-box{
     position: fixed;
-    width: 400px;
-    height: 300px;
-    left: calc(50% - 200px);
-    top: calc(50% - 150px);
+    width: 500px;
+    height: 200px;
+    left: calc(50% - 250px);
+    top: calc(50% - 100px);
     display: none;
 }
 #change-user-box{
