2 files changed, 56 insertions, 40 deletions
diff --git a/static/index.html b/static/index.html
index 69c19a5..061ca11 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,64 +4,38 @@
     <head>
         <meta charset="utf-8" />
         <title>Code Golf Leaderboard</title>
-        <link rel="stylesheet" href="default.css"/>
-        <script type="text/javascript">
-         async function fetch_problems() {
-             const response = await fetch("/problem");
-             if (!response.ok) {
-                 console.log("ummm");
-             }
-
-             const result = await response.json();
-             console.log(result);
-
-             const problems_div = document.getElementById("problems");
-             while (problems_div.firstChild) {
-                 problems_div.removeChild(problems_div.lastChild);
-             }
-
-             for (const problem of result) {
-                 const problem_div = document.createElement("div");
-                 problem_div.className = "problem";
-                 problems_div.appendChild(problem_div);
-                 
-                 const title = document.createElement("h2");
-                 title.innerHTML = problem.title;
-                 problem_div.appendChild(title);
-                 
-                 const description = document.createElement("p");
-                 description.innerHTML = problem.description;
-                 problem_div.appendChild(description);
-             }
-         }
-
-         async function on_load() {
-             const login_anchor = document.createElement("a");
-             login_anchor.innerText = "Login / Register";
-             login_anchor.href="google.com";
-             document.getElementById("login-notice").appendChild(login_anchor);
-             
-         }
-        </script>
+        <link rel="stylesheet" href="default.css">
+        <script type="text/javascript" src="main.js"></script>
     </head>
 
     <body onload="on_load()">
         <div id="layout">
             <div id="container">
                 <div id="content">
+                    <form id="login-form">
+                        <label for="login-email">Email</label>
+                        <input type="text" id="login-email" name="login-email">
+                        <br>
+                        <label for="login-password">Password</label>
+                        <input type="password" id="login-password" name="login-password">
+                        <br>
+                        <input type="submit" value="Login">
+                    </form>
                     <span id="login-notice"></span>
                     
                     <h1>C&amp;! Code Golf Leaderboard</h1>
 
                     <p>In golf, the goal is to get a ball into a hole in as few swings as possible. The goal of code golf is similarly to solve a problem in as few bytes (of source code) as possible. The following is a list of programming challenges. Your task is to try and solve them in Python with as little code as possible measured in bytes.</p>
 
-                    <button onclick="fetch_problems()">Refresh Problems</button>
+                    
                     <div id="problems">
                         <div class="problem">
                             <h2>Title</h2>
                             <p>Description</p>
                         </div>
                     </div>
+
+                    <button onclick="fetch_problems()">Refresh Problems</button>
                        
                     <center>&copy; 2026 Daniel Hader</center>
                 </div>
diff --git a/static/main.js b/static/main.js
new file mode 100644
index 0000000..e0c0b3e
--- /dev/null
+++ b/static/main.js
@@ -0,0 +1,42 @@
+async function login() {
+    
+}
+
+async function fetch_problems() {
+    const response = await fetch("/problem");
+    if (!response.ok) {
+        console.log("ummm");
+    }
+
+    const result = await response.json();
+    console.log(result);
+
+    const problems_div = document.getElementById("problems");
+    while (problems_div.firstChild) {
+        problems_div.removeChild(problems_div.lastChild);
+    }
+
+    for (const problem of result) {
+        const problem_div = document.createElement("div");
+        problem_div.className = "problem";
+        problems_div.appendChild(problem_div);
+                 
+        const title = document.createElement("h2");
+        title.innerHTML = problem.title;
+        problem_div.appendChild(title);
+                 
+        const description = document.createElement("p");
+        description.innerHTML = problem.description;
+        problem_div.appendChild(description);
+    }
+}
+
+async function on_load() {
+    await fetch_problems();
+    
+    const login_anchor = document.createElement("a");
+    login_anchor.innerText = "Login / Register";
+    login_anchor.href="google.com";
+    document.getElementById("login-notice").appendChild(login_anchor);
+             
+}