diff options
Diffstat (limited to 'dist/callback.html')
| -rw-r--r-- | dist/callback.html | 196 |
1 files changed, 105 insertions, 91 deletions
diff --git a/dist/callback.html b/dist/callback.html index 43e2aa5..f212b5f 100644 --- a/dist/callback.html +++ b/dist/callback.html @@ -1,76 +1,89 @@ <!DOCTYPE html> <html> + <head> -<meta name="viewport" content="width=device-width, initial-scale=1"> -<style> -body { - font-family: "Lato", sans-serif; -} + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + body { + font-family: "Lato", sans-serif; + } + + .sidenav { + height: 100%; + width: 160px; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #111; + padding-top: 20px; + overflow-wrap: break-word; + } + + .sidenav a { + padding: 6px 8px 6px 16px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; + } -.sidenav { - height: 100%; - width: 160px; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: #111; - padding-top: 20px; - overflow-wrap: break-word; -} + .sidenav h1 { + padding: 6px 8px 6px 16px; + text-decoration: none; + font-size: 14px; + color: #FFFFFF; + display: block; + } -.sidenav a { - padding: 6px 8px 6px 16px; - text-decoration: none; - font-size: 25px; - color: #818181; - display: block; -} -.sidenav h1 { - padding: 6px 8px 6px 16px; - text-decoration: none; - font-size: 14px; - color: #FFFFFF; - display: block; -} + .sidenav a:hover { + color: #f1f1f1; + } -.sidenav a:hover { - color: #f1f1f1; -} + .main { + margin-left: 162px; + /* Same as the width of the sidenav */ + font-size: 28px; + /* Increased text to enable scrolling */ + padding: 0px 10px; + } -.main { - margin-left: 162px; /* Same as the width of the sidenav */ - font-size: 28px; /* Increased text to enable scrolling */ - padding: 0px 10px; -} -.out { - margin-left: 162px; /* Same as the width of the sidenav */ - font-size: 16px; /* Increased text to enable scrolling */ -} + .out { + margin-left: 162px; + /* Same as the width of the sidenav */ + font-size: 16px; + /* Increased text to enable scrolling */ + } -@media screen and (max-height: 450px) { - .sidenav {padding-top: 15px;} - .sidenav a {font-size: 18px;} -} -</style> + @media screen and (max-height: 450px) { + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } + } + </style> </head> + <body onload="populate_users()"> <div class="sidenav"> - <a>Current Users</a> - <h1 id="userlist"></h1> -</div> -<div class="main"> - <h1>Spotify Intersect</h1> - <button id="Connect_button" onclick="connect_button()">Connect to Spotify</button> - <button id="Load_button" onclick="load_songs()" disabled=true>Load songs to database</button> - <p id="status"></p> - <input type="text" id="name1" value="First name"> - <input type="text" id="name2" value="Second name"> - <button id="Match_button" onclick="match_users()">Match users</button> -</div> -<div class="out"> - <p id="output"></p> -</div> + <a>Current Users</a> + <h1 id="userlist"></h1> + </div> + <div class="main"> + <h1>Spotify Intersect</h1> + <button id="Connect_button" onclick="connect_button()">Connect to Spotify</button> + <button id="Load_button" onclick="load_songs()" disabled=true>Load songs to database</button> + <p id="status"></p> + <input type="text" id="name1" placeholder="First name"> + <input type="text" id="name2" placeholder="Second name"> + <button id="Match_button" onclick="match_users()">Match users</button> + </div> + <div class="out"> + <p id="output"></p> + </div> <script> function getParameterByName(name) { let url = window.location.href; @@ -94,16 +107,16 @@ body { document.getElementById("Load_button").disabled = false; } fetch("https://kobert.dev/spotify-api/user") - .then(function(response) { - if (!response.ok) { - document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; - throw new Error(`HTTP error! status: ${response.status}`); - } - response.text().then(function(message) { - document.getElementById("userlist").innerHTML = '<p>' + message.replace(/\n/g, '</p>\n<p>') + '</p>'; + .then(function (response) { + if (!response.ok) { + document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; + throw new Error(`HTTP error! status: ${response.status}`); + } + response.text().then(function (message) { + document.getElementById("userlist").innerHTML = '<p>' + message.replace(/\n/g, '</p>\n<p>') + '</p>'; + }); }); - }); - + } function load_songs() { @@ -112,31 +125,32 @@ body { document.getElementById("Load_button").disabled = true; let token = sessionStorage.getItem('token'); fetch("https://kobert.dev/spotify-api/callback/" + token + "/" + getParameterByName("code")) - .then(function(response) { - if (!response.ok) { - document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; - throw new Error(`HTTP error! status: ${response.status}`); - } - document.getElementById("status").innerHTML = "Loaded songs"; - populate_users(); - }); + .then(function (response) { + if (!response.ok) { + document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; + throw new Error(`HTTP error! status: ${response.status}`); + } + document.getElementById("status").innerHTML = "Loaded songs"; + populate_users(); + }); //window.location = "https://kobert.dev/spotify-api/token/" + token; } -function match_users() { - let name1 = document.getElementById("name1").value; - let name2 = document.getElementById("name2").value; + function match_users() { + let name1 = document.getElementById("name1").value; + let name2 = document.getElementById("name2").value; fetch("https://kobert.dev/spotify-api/match/" + name1 + "/" + name2) - .then(function(response) { - if (!response.ok) { - document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; - throw new Error(`HTTP error! status: ${response.status}`); - } - response.text().then(function(message) { - document.getElementById("output").innerHTML = message.replace(/\n/g, '<br>\n'); + .then(function (response) { + if (!response.ok) { + document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; + throw new Error(`HTTP error! status: ${response.status}`); + } + response.text().then(function (message) { + document.getElementById("output").innerHTML = message.replace(/\n/g, '<br>\n'); + }); }); - }); -} + } </script> </body> + </html> |