<!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>