Untitled

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="/socket.io/socket.io.js">
        </script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #333;
                text-align: center;
                font-family: sans-serif;
                font-family: Helvetica;
                color: white;
                font-size: 14px;
            }
            h1 {
                font-size: 60px;
                text-shadow: 0 0 7px rgba(0,0,0,0.5);
                font-weight: bold;
                color: white;
                padding: 1em 0 1em 0;
            }

            input {
                color: white;
            }
                /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

             #song_uri { border-color:#cccccc; text-align:center; border-style:solid; font-size:24px; background-color:#1f1b18; border-radius:3px; padding:6px; border-width:0px; box-shadow: 0px 0px 20px 2px rgba(214,214,214,.2); text-shadow:0px 0px 8px rgba(42,42,42,.69); font-weight:bold; font-style:italic; font-family:sans-serif; width: 70%; margin-bottom: 20px; }
		 #song_uri:focus { outline:none; }

            #username, #password { order-color:#cccccc; text-align:center; border-style:solid; font-size:20px; background-color:#1f1b18; border-radius:3px; padding:6px; border-width:0px; text-shadow:0px 0px 8px rgba(42,42,42,.69); font-weight:bold; font-style:normal; font-family:sans-serif; margin-bottom: 20px; }
		 #username:focus, #password:focus { outline:none; }

            #login {
cursor: pointer;
font-size: 1.375em;
margin: 0 0 1em;
padding: 0.75em 1.875em 0.5625em;
text-align: center;
display: inline-block;
background-color: #88BD32;
background-image: linear-gradient(to bottom, #ACD341 0px, #88BD32 100%);
background-repeat: repeat-x;
border: 1px solid #7EA613;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 #72942A;
border-radius: 3px;
}

            #dlbutton {
cursor: pointer;
font-size: 1.375em;
margin: 0 0 1em;
padding: 0.75em 1.875em 0.5625em;
text-align: center;
background-color: #0F3F80;
background-image: linear-gradient(to bottom, #4B54B3 0px, #0F3F80 100%);
background-repeat: repeat-x;
color: white;
border-radius: 3px;
}
            #dlbutton a {
                color: white;
                text-decoration: none;
            }

            #status {
                color: white;
                font-size: 1.2em;
            }

            #tracks {
                background-color: #1f1b18;
                display: inline-block;
                margin-top: 3em;
                padding: 2em 0;
            }

            #tracklist {
                list-style-type: none;
            }

            #tracklist li {
                padding: 0 2em;
            }

            .awaitingDownload {
                color: #828282;
            }

            .failedDownload {
                color: #E81B1B;
            }

            .successDownload {
                color: #29E81B;
            }

        </style>
    </head>


    <body>
       <div id="top_head">
           <h1>SilentAngel - Spotify MP3 Downloader</h1>
       </div>
        <form id="dl_auth">
            <p><input type="text" id="username" value="" placeholder="Username" />
            <input type="password" id="password" value="" placeholder="Password" /></p>
            <p><input type="text" id="song_uri" value="" placeholder="Song or Playlist URI/URL" /></p>
            <p><input type="submit" id="login" value="Login & Download!" /></p>
        </form>
        <p id="status" style="display: none;">Downloading... <span id="percentage">0</span>%</p>

        <div id="tracks">
            <ul id="tracklist"></ul>
        </div>

        <script type="text/javascript">
        var socket = io.connect( window.location.href );

        document.getElementById('dl_auth').addEventListener('submit', function(e) {

            e.preventDefault();
            document.getElementById('percentage').innerHTML = 0;
            document.getElementById('tracklist').innerHTML = "";
            socket.emit('dl_me', {
                username: document.getElementById('username').value,
                password: document.getElementById('password').value,
                song_uri: document.getElementById('song_uri').value
            }, function(result) {
                if(result.success == false) {
                    alert('Login failed');
                } else {
                    document.getElementById('status').setAttribute('style', 'display: block');
                }
            });
        });

        socket.on('wrong_login', function(result) {
            alert("Wrong input");
        });

        socket.on('percentage', function(result) {
            document.getElementById('percentage').innerHTML = result.percentage;
        });

        socket.on('metadata', function(result) {
            for(var i = 0; i < result.songTitles.length; i++) {
                var li = document.createElement('li');
                li.innerHTML = result.songTitles[i];
                li.className = "awaitingDownload"
                if(result.songUris.length != 0) {
                    li.setAttribute("uri", result.songUris[i]);
                }
                document.getElementById('tracklist').appendChild(li);
            }
        });

        socket.on('downloaded_title', function(result) {
            for(var i = 0; i < document.getElementById('tracklist').childNodes.length; i++) {
                if(document.getElementById('tracklist').childNodes[i].getAttribute("uri") == result.uri) {
                    document.getElementById('tracklist').childNodes[i].className = "successDownload";
                }
            }
        });

        socket.on('failed_title', function(result) {
            for(var i = 0; i < document.getElementById('tracklist').childNodes.length; i++) {
                if(document.getElementById('tracklist').childNodes[i].getAttribute("uri") == result.uri) {
                    document.getElementById('tracklist').childNodes[i].className = "failedDownload";
                }
            }
        });


    	</script>
    	<iframe src="/pingpong/worker.html" width="0" height="0" style="visibility: hidden;"></iframe>
    </body>
</html>