81 lines
1.9 KiB
Text
81 lines
1.9 KiB
Text
|
<!DOCTYPE HTML>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style type="text/css" media="screen">
|
||
|
|
.content {
|
||
|
|
width: 100%
|
||
|
|
}
|
||
|
|
.shorten_form {
|
||
|
|
width: 50%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
width: 50%;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
.url_data {
|
||
|
|
width: 50%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
button.copy_short_url {
|
||
|
|
width: 32px;
|
||
|
|
height:32px;
|
||
|
|
padding: 0px;
|
||
|
|
margin: 0;
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
button.copy_short_url > img {
|
||
|
|
display: block;
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
padding: 0px;
|
||
|
|
margin: 0;
|
||
|
|
margin-left: -6px;
|
||
|
|
margin-top: -4px;
|
||
|
|
}
|
||
|
|
textarea.short_url_text {
|
||
|
|
width: 300px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class=content>
|
||
|
|
<div class=title>
|
||
|
|
URL Shortener
|
||
|
|
</div>
|
||
|
|
<div class=shorten_form>
|
||
|
|
<form method=post>
|
||
|
|
<input type=text name=url>
|
||
|
|
<input type=submit value=short!>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<% if (exists($page_data->{'url'})) { %>
|
||
|
|
<div class=url_data>
|
||
|
|
<p>source url: <a href='<%== $page_data->{'url'} %>'><%= $page_data->{'url'} %></a></p>
|
||
|
|
<p><textarea autofocus class=short_url_text><%= $page_data->{'shorten_url'} %></textarea><button class="copy_short_url"><img src="/icons/copy2.png"></button></p>
|
||
|
|
</div>
|
||
|
|
<% } %>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
var copyTextareaBtn = document.querySelector('.copy_short_url');
|
||
|
|
|
||
|
|
copyTextareaBtn.addEventListener('click', function(event) {
|
||
|
|
var copyTextarea = document.querySelector('.short_url_text');
|
||
|
|
copyTextarea.focus();
|
||
|
|
copyTextarea.select();
|
||
|
|
|
||
|
|
try {
|
||
|
|
var successful = document.execCommand('copy');
|
||
|
|
var msg = successful ? 'successful' : 'unsuccessful';
|
||
|
|
console.log('Copying text command was ' + msg);
|
||
|
|
} catch (err) {
|
||
|
|
console.log('Oops, unable to copy');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|