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)
})
const outpath = ['sym', '']
const outpath = ['sym', '', 'manifest.json']
//HTTP server
http.createServer(function (req, res) {

58
public/index.html
Unescape Escape View File

@ -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">

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-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}
}
Write Preview
Loading…
Cancel
Save