adb
/
surl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

PWA manifest and some CSS

Browse Source
master
adb-sh 4 years ago
parent 8d1ff20376
commit 2424ffc15c
4 changed files with 151 additions and 167 deletions
Show Stats Download Patch File Download Diff File

2
index.js
Unescape Escape View File

@ -13,7 +13,7 @@ redis_cli.on("error", function (error) {
console.error(error) console.error(error)
}) })
const outpath = ['sym', ''] const outpath = ['sym', '', 'manifest.json']
//HTTP server //HTTP server
http.createServer(function (req, res) { http.createServer(function (req, res) {

58
public/index.html
Unescape Escape View File

@ -2,6 +2,11 @@
<head> <head>
<title>sURL</title> <title>sURL</title>
<meta charset="utf-8"> <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"> <link rel="stylesheet" type="text/css" href="./sym/dark.css">
<script src="./sym/script.js"></script> <script src="./sym/script.js"></script>
<script> <script>
@ -14,39 +19,42 @@
socket.onerror = (error) => { socket.onerror = (error) => {
console.log(`WebSocket error: ${error}`) console.log(`WebSocket error: ${error}`)
} }
socket.onclose = () => { socket.onclose = error => show_error('session timed out (refresh)')
document.getElementById('error-message').innerText = 'session timed out (refresh)'
document.getElementById('error-box').style.display = 'block'
}
socket.onmessage = (e) => { socket.onmessage = (e) => {
console.log(e.data) console.log(e.data)
let msg = e.data.split(";", 2) let msg = e.data.split(";", 2)
if (msg[0] === 'error') { if (msg[0] === 'error') show_error(msg[1])
document.getElementById('error-message').innerText = msg[1] else if (msg[0] === 'surl') {
document.getElementById('error-box').style.display = 'block'
} else if (msg[0] === 'surl') {
document.getElementById('surl-input').value = msg[1] 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() { function copy_url() {
document.getElementById('surl-input').select(); document.getElementById('surl-input').select()
document.execCommand("copy"); 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> </script>
</head> </head>
<body> <body>
<div class="login"> <div class="input-box">
<div class="title">short your url</div> <div class="title">short your url</div>
<form name="search" action="javascript:socket.send('long_url;'+document.getElementById('name-input').value)" method="POST"> <form name="surl_form" action="javascript:lurl_submit()">
<div class="inputbox" id="name"> <div class="input-field" id="longurl">
<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"> <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> </div>
<input type="hidden" value="search" name="login"> <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-blue" id="short-btn">
<div class="btn-text">short</div> <div class="btn-text">short</div>
</div> </div>
@ -54,10 +62,10 @@
</form> </form>
</div> </div>
<div class="box-dark" id="new-user-box"> <div class="box-dark" id="surl-popup">
<div class="login"> <div class="input-box">
<div class="title2">your sURL:</div> <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"> <input class="input" id="surl-input" type="text" onblur="deselected('surl');" onfocus="selected('surl');" size="30" value="" maxlength="20" placeholder="surl">
</div> </div>
<input type="hidden" value="search" name="login"> <input type="hidden" value="search" name="login">
@ -65,13 +73,13 @@
<div class="btn-text">copy</div> <div class="btn-text">copy</div>
</div> </div>
</div> </div>
<div onclick="visible('new-user-box','off')" 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" /> <img class="icon" src="./sym/ic_close_white_24px.svg" />
</div> </div>
</div> </div>
<div id="error-box" class="error"> <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"> <img class="icon" src="./sym/ic_close_white_24px.svg">
</div> </div>
<div id="error-message" class="btn-text"> <div id="error-message" class="btn-text">

9
public/manifest.json
Unescape Escape View File

@ -0,0 +1,9 @@
{
"name": "short url",
"short_name": "sURL",
"start_url": "/",
"display": "standalone",
"background_color": "#14181b",
"theme_color": "#00BCD4",
"orientation": "portrait-primary"
}

249
public/sym/dark.css
Unescape Escape View File

@ -10,43 +10,84 @@ 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: 1000px; max-width: 60rem;
min-width: 500px; min-width: 30rem;
margin: auto; margin: auto;
background-color: #1f262b; 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; position: absolute;
left: calc(50% - 200px); left: calc(50% - 14rem);
top: calc(50% - 100px); top: calc(50% - 100px);
margin-left: 0px; width: 28rem;
margin-top: 0px; height: 14rem;
width: 400px;
height: 200px;
background-color: #14181b00; background-color: #14181b00;
border-radius: 8px; border-radius: 8px;
border: 0px solid #fff; border: 0px solid #fff;
} }
div.inputbox { div.input-field {
position: relative; position: relative;
left: 0px; left: 0px;
top: 0px; top: 0px;
margin-left: 0px; margin-left: 5%;
margin-top: 20px; margin-top: 20px;
width: 100%; width: 90%;
height: 40px; height: 2.5rem;
background-color: #14181b; background-color: #14181b;
border-radius: 8px; border-radius: 0.6rem;
border: 1px solid #fff; border: 1px solid #fff;
} }
.input { .input {
position: absolute; position: absolute;
left: 25px; left: 1rem;
top: 50%; top: 50%;
margin-left: -0px;
margin-top: -15px; margin-top: -15px;
width: calc(100% - 50px); width: calc(100% - 2rem);
height: 30px; height: 2rem;
text-align: center; text-align: center;
color:#fff; color:#fff;
font-size: 15pt; font-size: 15pt;
@ -55,46 +96,22 @@ div.inputbox {
background-color: transparent; background-color: transparent;
outline: 0 none; outline: 0 none;
} }
input[id="name-input"]::-webkit-input-placeholder { input[id="longurl-input"]::-webkit-input-placeholder {
color: #ffffff; 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{ .btn-blue{
cursor: pointer; cursor: pointer;
height: 40px; height: 2.5rem;
background-color: #00BCD4; background-color: #00BCD4;
box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333;
border-radius: 20px; border-radius: 1.25rem;
} }
.btn-green{ .btn-green{
cursor: pointer; cursor: pointer;
height: 40px; height: 2.5rem;
background-color: #009688; background-color: #009688;
box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333;
border-radius: 20px; border-radius: 1.25rem;
} }
.btn-text { .btn-text {
position: absolute; position: absolute;
@ -107,28 +124,27 @@ input[id="name-input"]::-webkit-input-placeholder {
} }
.sym_btn-red{ .sym_btn-red{
cursor: pointer; cursor: pointer;
height: 40px; height: 2.5rem;
width: 40px; width: 2.5rem;
background-color: #E53935; background-color: #E53935;
border-radius: 20px; border-radius: 1.25rem;
box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333;
float: left; float: left;
} }
.sym_btn-blue{ .sym_btn-blue{
cursor: pointer; cursor: pointer;
height: 40px; height: 2.5rem;
width: 40px; width: 2.5rem;
background-color: #1E88E5; background-color: #1E88E5;
border-radius: 20px; border-radius: 1.25rem;
box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333;
float: left; float: left;
} }
.sym_btn-invisible{ .sym_btn-invisible{
cursor: pointer; cursor: pointer;
height: 40px; height: 2.5rem;
width: 40px; width: 2.5rem;
background-color: #fff0; border-radius: 1.25rem;
border-radius: 20px;
float: left; float: left;
} }
img.icon { img.icon {
@ -150,11 +166,6 @@ img.icon {
font-size: 20pt; font-size: 20pt;
font-family:"Roboto", bold, sans-serif; font-family:"Roboto", bold, sans-serif;
} }
#login-title {
position: absolute;
top: 0px;
margin-bottom: 30px;
}
.box-dark{ .box-dark{
position: relative; position: relative;
margin: auto; margin: auto;
@ -168,93 +179,49 @@ img.icon {
font-size: 15pt; font-size: 15pt;
font-family:"Roboto", regular, sans-serif; font-family:"Roboto", regular, sans-serif;
} }
#user-line{ .error{
position: relative; position: absolute;
margin: auto; bottom: 1rem;
width: calc(100% - 0px); left: 1rem;
height: 50px; height: 10rem;
max-width: 600px; width: 16rem;
background-color: #1f262b; background-color: #E53935;
border: 1px solid #fff; border-radius: 15px;
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;
#short-btn {
position: absolute;
width: 10rem;
margin-left: calc(50% - 5rem);
margin-top: 20px;
} }
td.mid,th.mid{ #copy-btn {
border-radius: 0px 0px 0px 0px; position: absolute;
width: 10rem;
margin-left: calc(50% - 5rem);
margin-top: 1rem;
} }
#new-user-box{ #surl-popup{
position: fixed; position: fixed;
width: 500px; width: 30rem;
height: 200px; height: 14rem;
left: calc(50% - 250px); left: calc(50% - 15rem);
top: calc(50% - 100px); top: calc(50% - 7rem);
display: none; display: none;
animation: slide-from-top alternate 0.4s;
} }
#change-user-box{ #error-box{
position: fixed;
width: 400px;
height: 300px;
left: calc(50% - 200px);
top: calc(50% - 150px);
display: none; display: none;
} }
.error{
position: absolute;
bottom: 10px;
left: 10px; @keyframes slide-from-top{
height: 150px; from{top:20%;opacity: 0}
width: 250px; to{top:calc(50% - 7rem);opacity: 1}
background-color: #E53935;
border-radius: 15px;
} }
#error-box{ @keyframes slide-from-left{
display: none; from{left:-30rem;opacity: 0}
to{left:1rem;opacity: 1}
} }
Write Preview
Loading…
Cancel
Save