105 lines
3.4 KiB
HTML
105 lines
3.4 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Short a link</title>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var mouse = {x: 0, y: 0};
|
||
|
|
|
||
|
|
document.onreadystatechange = function () {
|
||
|
|
if (document.readyState == "complete") {
|
||
|
|
elements = [document.getElementById("http301info"), document.getElementById("http302"), document.getElementById("metaRefresh"), document.getElementById("javascript")];
|
||
|
|
document.addEventListener('mousemove', function(e){
|
||
|
|
mouse.x = e.clientX || e.pageX;
|
||
|
|
mouse.y = e.clientY || e.pageY;
|
||
|
|
elements.forEach(
|
||
|
|
function (item) {
|
||
|
|
if (item.style.display != "none") {
|
||
|
|
item.style.left = mouse.x + 10 + "px"
|
||
|
|
item.style.top = mouse.y + 15 + "px"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
.info {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
width: 200px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
border: 1px solid black;
|
||
|
|
padding: 4px;
|
||
|
|
background-color: #FEFFE2;
|
||
|
|
}
|
||
|
|
|
||
|
|
#targetinput {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#submit {
|
||
|
|
display: block;
|
||
|
|
width: 400px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
background-color: #9B9B9B;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 25px;
|
||
|
|
text-decoration: none;
|
||
|
|
cursor: pointer;
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#submit:hover {
|
||
|
|
border: none;
|
||
|
|
background: #C3C3C3;
|
||
|
|
box-shadow: 0px 0px 1px #777;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form action="/new" method="get">
|
||
|
|
URL: <input type="text" name="target" id="targetinput">
|
||
|
|
<br/>
|
||
|
|
Method:
|
||
|
|
<span>
|
||
|
|
<input type="radio" name="method" id="http301radio" value="http301" checked>
|
||
|
|
<label for="http301radio" onmouseover= 'document.getElementById("http301info").style.display = "block"'
|
||
|
|
onmouseout = 'document.getElementById("http301info").style.display = "none"'>
|
||
|
|
HTTP-Statuscode 301
|
||
|
|
</label>
|
||
|
|
</input>
|
||
|
|
<input type="radio" name="method" id="http302radio" value="http302">
|
||
|
|
<label for="http302radio" onmouseover= 'document.getElementById("http302").style.display = "block"'
|
||
|
|
onmouseout = 'document.getElementById("http302").style.display = "none"'>
|
||
|
|
HTTP-Statuscode 302
|
||
|
|
</label>
|
||
|
|
</input>
|
||
|
|
<input type="radio" name="method" id="metaRefreshradio" value="metaRefresh">
|
||
|
|
<label for="metaRefreshradio" onmouseover= 'document.getElementById("metaRefresh").style.display = "block"'
|
||
|
|
onmouseout = 'document.getElementById("metaRefresh").style.display = "none"'>
|
||
|
|
Meta refresh
|
||
|
|
</label>
|
||
|
|
</input>
|
||
|
|
<input type="radio" name="method" id="javascriptradio" value="javascript">
|
||
|
|
<label for="javascriptradio" onmouseover= 'document.getElementById("javascript").style.display = "block"'
|
||
|
|
onmouseout = 'document.getElementById("javascript").style.display = "none"'>
|
||
|
|
Javascript
|
||
|
|
</label>
|
||
|
|
</input>
|
||
|
|
<span>
|
||
|
|
|
||
|
|
<input type="submit" value="Generate new short link" id="submit">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="info" id="http301info">Use the 301 Moved Permanently HTTP status code to tell the client the target of the url.</div>
|
||
|
|
<div class="info" id="http302">Use the 302 Found HTTP status code to tell the client the target of the url.</div>
|
||
|
|
<div class="info" id="metaRefresh">Deliver a HTML site with a containing html-<meta>-tag to redirect to the new url.</div>
|
||
|
|
<div class="info" id="javascript">This will use javascript so set the window.location to the desired url.</div>
|
||
|
|
</body>
|
||
|
|
</html>
|