Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement