pandotdoslashra/pan.do.html
2012-04-22 22:51:31 +02:00

195 lines
No EOL
7.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>pan.do - Social Bookmarking - Shorten, Share and Store your URLs in the Cloud</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/jpeg" href="pan.do.jpg"/>
<style>
body {
background: url(pan.do.jpeg) 0 0 no-repeat fixed;
background-color: rgb(142, 193, 218);
font-family: sans-serif;
text-align: center;
}
a, a:visited {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
.button {
height: 32px;
padding: 4px 8px;
border-radius: 4px;
margin-left: 16px;
background: -o-linear-gradient(top, rgb(142, 193, 218), rgb(110, 161, 186));
background: -moz-linear-gradient(top, rgb(142, 193, 218), rgb(110, 161, 186));
background: -webkit-linear-gradient(top, rgb(142, 193, 218), rgb(110, 161, 186));
font-size: 20px;
color: white;
cursor: pointer;
-moz-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
}
.separator {
color: rgba(255, 255, 255, 0.5);
}
#main {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 800px;
margin: auto;
background: rgba(0, 0, 0, 0.25);
text-align: center;
}
#header {
position: absolute;
left: 24px;
top: 16px;
right: 24px;
font-size: 13px;
text-align: right;
color: white;
}
#logo {
position: absolute;
left: 0;
top: 112px;
right: 0;
margin: auto;
}
#line {
position: absolute;
top: 208px;
width: 800px;
font-size: 13px;
color: white;
}
#both {
position: absolute;
top: 256px;
width: 800px;
text-align: center;
}
#long {
width: 400px;
padding: 2px 8px;
font-size: 20px;
color: rgb(128, 128, 128);
}
#long.placeholder {
color: rgb(192, 192, 192);
}
#result {
display: none; margin-top: 32px
}
#short {
padding: 0 8px 2px 8px;
border: 0px solid rgb(192, 222, 237);
border-radius: 4px;
background: rgba(0, 0, 0, 0.25);
font-size: 24px;
color: rgb(192, 222, 237)
}
#footer {
position: absolute;
bottom: 16px;
width: 800px;
font-size: 11px;
line-height: 20px;
color: white;
}
</style>
</head>
<body>
<div id="main">
<div id="header">
<a href="#">Sign Up</a>
<span class="separator">|</span> <a href="#">Sign In</a>
<span class="separator">|</span> <a href="#">Help</a>
</div>
<img id="logo" src="pan.do.png"/>
<div id="line">
Social bookmarking. Shorten, share and store your links in the cloud.
</div>
<div id="both">
<input id="long" class="placeholder" type="text" value="Paste your long URL here"/>
<span id="shorten" class="button">Shorten URL</span>
<div id="result" style="">
<span id="short">http://pan.do/ra</span>
<span id="share" class="button">Share</span>
<span id="store" class="button">Store in the Cloud</span>
</div>
</div>
<div id="footer">
<a href="#">About Us</a>
<span class="separator">|</span> <a href="#">Mission Statement</a>
<span class="separator">|</span> <a href="#">Terms of Service</a>
<span class="separator">|</span> <a href="#">Privacy Policy</a>
<span class="separator">|</span> <a href="#">Customer Service</a>
<span class="separator">|</span> <a href="#">Corporate Clients</a>
<span class="separator">|</span> <a href="#">Investor Relations</a>
<br>&copy;2012 Pando Social Media. All rights reserved.
</div>
</div>
<script>
(function() {
var long = document.getElementById('long'),
shorten = document.getElementById('shorten'),
result = document.getElementById('result'),
short = document.getElementById('short'),
share = document.getElementById('share'),
store = document.getElementById('store');
function go() {
parent.location.href = 'http://pan.do/ra';
}
function submit() {
if (long.className === '') {
long.value = long.value.replace(/[^\w\-\.:\/\?\&=\#,]/g, '');
if (long.value !== '') {
if (!/^https?:\/\//.test(long.value)) {
long.value = 'http://' + long.value;
}
if (!/\./.test(long.value)) {
long.value += '.com';
}
result.style.display = 'block';
}
}
}
long.onblur = function() {
if (this.value === '') {
this.className = 'placeholder';
this.value = 'Paste your long URL here';
}
document.onkeypress = null;
};
long.onchange = function() {
document.getElementById('result').style.display = 'none';
};
long.onfocus = function() {
if (this.className == 'placeholder') {
this.value = '';
this.className = '';
}
document.onkeypress = function(e) {
result.style.display = 'none';
if (e.keyCode == 13) {
long.blur();
submit();
}
}
};
shorten.onclick = submit;
share.onclick = go;
store.onclick = go;
}());
</script>
</body>
</html>