|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>sURL</title>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<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 = () => {
|
|
|
|
|
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)
|
|
|
|
|
if (msg[0] === 'error') {
|
|
|
|
|
document.getElementById('error-message').innerText = msg[1]
|
|
|
|
|
document.getElementById('error-box').style.display = 'block'
|
|
|
|
|
} else if (msg[0] === 'surl') {
|
|
|
|
|
document.getElementById('surl-input').value = msg[1]
|
|
|
|
|
document.getElementById('new-user-box').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");
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="login">
|
|
|
|
|
<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">
|
|
|
|
|
</div>
|
|
|
|
|
<input type="hidden" value="search" name="login">
|
|
|
|
|
<a href="javascript:socket.send('long_url;'+document.getElementById('name-input').value)">
|
|
|
|
|
<div class="btn-blue" id="short-btn">
|
|
|
|
|
<div class="btn-text">short</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="box-dark" id="new-user-box">
|
|
|
|
|
<div class="login">
|
|
|
|
|
<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" />
|
|
|
|
|
</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">
|
|
|
|
|
<img class="icon" src="./sym/ic_close_white_24px.svg">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="error-message" class="btn-text">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
