<html>
<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>
const wsurl = 'ws://127.0.0.1:8081'
const socket = new WebSocket(wsurl)
socket.onopen = () => {
socket.send('new session')
}
socket.onerror = (error) => {
console.log(`WebSocket error: ${error}`)
}
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') show_error(msg[1])
else if (msg[0] === 'surl') {
document.getElementById('surl-input').value = msg[1]
document.getElementById('surl-popup').style.display = 'block'
}
}
function copy_url() {
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="input-box">
<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">
</div>
<input type="hidden" value="search" name="login">
<a href="javascript:lurl_submit()">
<div class="btn-blue" id="short-btn">
<div class="btn-text">short</div>
</div>
</a>
</form>
</div>
<div class="box-dark" id="surl-popup">
<div class="input-box">
<div class="title2">your sURL:</div>
<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">
<div class="btn-green" id="copy-btn" onclick="copy_url()">
<div class="btn-text">copy</div>
</div>
</div>
<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="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">
</div>
</div>
</body>
</html>