summaryrefslogtreecommitdiff
path: root/dist
diff options
context:
space:
mode:
Diffstat (limited to 'dist')
-rw-r--r--dist/callback.html75
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>