diff options
| author | Dennis Kobert <dennis@kobert.dev> | 2020-02-13 00:37:44 +0000 |
|---|---|---|
| committer | Dennis Kobert <dennis@kobert.dev> | 2020-02-13 00:37:44 +0000 |
| commit | a1297dd77fff5882c6dd1891775739ea38a33b62 (patch) | |
| tree | 04f5afea8b4bbd3c6d8f68b58ba3e03bd3c7d3ef /dist | |
| parent | 05e6080ddad91ac96bb5921e77b2ff78648ff275 (diff) | |
Add styling, user request
Diffstat (limited to 'dist')
| -rw-r--r-- | dist/callback.html | 75 |
1 files changed, 72 insertions, 3 deletions
diff --git a/dist/callback.html b/dist/callback.html index cb49d45..8eab4d6 100644 --- a/dist/callback.html +++ b/dist/callback.html @@ -1,13 +1,69 @@ <!DOCTYPE html> <html> -<body> +<head> +<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; + overflow-x: hidden; + padding-top: 20px; +} + +.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: 20px; + color: #FFFFFF; + display: block; +} + +.sidenav a:hover { + color: #f1f1f1; +} + +.main { + margin-left: 160px; /* Same as the width of the sidenav */ + font-size: 28px; /* Increased text to enable scrolling */ + padding: 0px 10px; +} + +@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="Load_button" onclick="load_songs()">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> - <p id="output"></p> + <h1 id="output"></h1> +</div> <script> function getParameterByName(name) { let url = window.location.href; @@ -47,8 +103,21 @@ function match_users() { response.text().then(function(message) { document.getElementById("output").innerHTML = message.replace(/\n/g, '<br>\n'); }); - }); + }); } + function populate_users() { + 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 = message.replace(/\n/g, '<br>\n'); + }); + }); + + } </script> </body> </html> |