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