195 lines
7.2 KiB
HTML
195 lines
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>©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> |