adding dashboard, changing front page

2025-10-12 17:56:07 -05:00
parent d02103a0bc
commit 8a6f3da116
11 changed files with 225 additions and 178 deletions
--- a/ui/public/pages/about.html
+++ b/ui/public/pages/about.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hyperia</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="_/icons/logo.svg">
+    <link rel="stylesheet" href="_/code/shared.css">
+    <style>
+      #items {
+          position: absolute;
+          top: 50vh;
+          left: 50vw;
+          transform: translate(-50%, -50%);
+
+          display: flex;
+          flex-direction: column;
+          align-items: center; /* centers children horizontally */
+          text-align: center;  /* ensures text inside spans is centered */
+      }
+
+    @media (max-width: 600px) {
+        input {
+            width: 50vw
+        }
+    }
+    </style>
+    <script src="_/code/util.js"></script>
+    <script type="module">
+        import PageFooter from "./components/Footer.js"
+        import NavBar from "./components/NavBar.js"
+        import SideBar from "./components/SideBar.js"
+    </script>
+  </head>
+  <body>
+    <span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
+    <div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
+      <a href="join">join</a>
+      <span>|</span>
+      <a href="signin">sign in</a>
+    </div>
+
+    <div id="items">
+
+      <form id="signup-form">
+        <input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
+        <br>
+        <p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0; margin-bottom: 1em"></p>
+        <button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
+      </form>
+
+      <script>
+        document.getElementById('signup-form').addEventListener('submit', async (e) => {
+          e.preventDefault(); // prevent page reload
+
+          const email = document.getElementById('email').value;
+          const messageEl = document.getElementById('applicant-message');
+
+          try {
+            const res = await fetch('/api/signup', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+              },
+              body: new URLSearchParams({ email }),
+            });
+
+            if (res.ok) {
+              const data = await res.json();
+              messageEl.style.color = 'green';
+              messageEl.textContent = data.message;
+            } else {
+              const error = await res.text();
+              messageEl.style.color = 'red';
+              messageEl.textContent = 'Error: ' + error;
+            }
+          } catch (err) {
+            messageEl.style.color = 'red';
+            messageEl.textContent = 'Error submitting form.';
+            console.error(err);
+          }
+        });
+      </script>
+
+    </div>
+  </body>
+</html>