1 files changed, 91 insertions, 0 deletions
diff --git a/dist/landing.html b/dist/landing.html
new file mode 100644
index 0000000..2858718
--- /dev/null
+++ b/dist/landing.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<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;
+            padding-top: 20px;
+            overflow-wrap: break-word;
+        }
+        .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 */
+        }
+
+        @media screen and (max-height: 450px) {
+            .sidenav {
+                padding-top: 15px;
+            }
+
+            .sidenav a {
+                font-size: 18px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="sidenav">
+        <a>Public Lobbys:</a>
+        <h1 id="userlist"></h1>
+    </div>
+    <div class="main">
+        <h1>Spotify Intersect</h1>
+
+        <input type="text" id="lobby_name" placeholder="Lobby name">
+        <button id="lobby_button" onclick="lobby_button()">Create a new lobby</button>
+        <p id="status"></p>
+    </div>
+    <script>
+        //const host = "https://kobert.dev";
+        const host = "http://127.0.0.1:8000";
+        const api = host + "";
+        //const api = host + "/spotify-api";
+        function getParameterByName(name) {
+            let url = window.location.href;
+            name = name.replace(/[\[\]]/g, "\\$&");
+            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+                results = regex.exec(url);
+            if (!results) return null;
+            if (!results[2]) return '';
+            return decodeURIComponent(results[2].replace(/\+/g, " "));
+        }
+        function lobby_button() {
+            let lobby_name = document.getElementById("lobby_name").value;
+            fetch(api + "/lobby/" + lobby_name, {method: 'POST'})
+                .then(function (response) {
+                    if (!response.ok) {
+                        document.getElementById("status").innerHTML = `Error occured while generating new lobby: ${response.status}`;
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    response.text().then(function (message) {
+                        window.location = host + "/callback.html?lobby=" + message; 
+                    });
+                });
+        }
+    </script>
+</body>
+
+</html>