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>