|
|
|
|
<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"/>
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="sym/dark.css"/>
|
|
|
|
|
<script src="sym/script.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
function copy_url() {
|
|
|
|
|
document.getElementById('surl-input').select()
|
|
|
|
|
document.execCommand("copy")
|
|
|
|
|
}
|
|
|
|
|
function lurl_submit() {
|
|
|
|
|
socket.send('long_url;'+document.getElementById('longurl-input').value)
|
|
|
|
|
fetch('/api/v1/key', {
|
|
|
|
|
method: 'PUT',
|
|
|
|
|
body: JSON.stringify({ url: document.getElementById('longurl-input').value }),
|
|
|
|
|
headers: {
|
|
|
|
|
'content-type': 'application/json'
|
|
|
|
|
}
|
|
|
|
|
}).then(async res => {
|
|
|
|
|
let data = await res.json();
|
|
|
|
|
console.log(data)
|
|
|
|
|
if (data?.url) show_surl(`${location.host}/${data.key}`);
|
|
|
|
|
else if (data?.status && data?.message) show_error(data.message);
|
|
|
|
|
else show_error('unknown error');
|
|
|
|
|
}).catch(() => show_error('request failed'));
|
|
|
|
|
}
|
|
|
|
|
function show_surl(surl) {
|
|
|
|
|
document.getElementById('surl-input').value = surl;
|
|
|
|
|
document.getElementById('surl-popup').style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
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(() => {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" autocomplete="off" 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>
|
