add debug button (#88)

* add debug button
* move the "Show Logs" button

Author: taaziz1

static/index.css

@@ -71,6 +71,17 @@ input {
     margin-left: 10px;
 }
 
+#debug-btn{
+    height: 2.2em; 
+    background-color: orange; 
+    color: white; 
+    border: none; 
+    border-radius: 4px; 
+    padding: 8px 16px; 
+    cursor: pointer; 
+    margin-left: 10px;
+}
+
 .card {
     background: hsla(0, 0%, 31%, 0.7);
     border-radius: 12px;

static/index.html

@@ -16,9 +16,12 @@
         </div>
         <div class="card">
             <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
-                <div style="display: flex; justify-content: center; align-items: center; padding-bottom: 10px;">
+                <div style="display: flex; justify-content: center; align-items: center; padding-bottom: 5px;">
                     <h2 id="cache_tag">SCE TV</h2>
+                </div>
+                <div style="display: flex; justify-content: center; align-items: center; padding-bottom: 10px;">
                     <button id="show-logs-btn">Show Logs</button>
+                    <button id="debug-btn">Debug</button>
                 </div>
             </div>
 
@@ -250,6 +253,15 @@ <h2 id="title"></h2>
             // Scroll to bottom
             logsContent.scrollTop = logsContent.scrollHeight;
         }
+
+        // Adds a function to open the debug page in a new window when the debug button is clicked
+        document.getElementById("debug-btn").addEventListener("click", function () {
+            const debugURL = new URL(window.location.origin + window.location.pathname);
+            debugURL.pathname = debugURL.pathname.endsWith('/') 
+            ? `${debugURL.pathname}debug` 
+            : `${debugURL.pathname}/debug`;
+            window.open(debugURL);
+        });
     </script>
 </body>