shtuff

2025-09-12 21:09:41 -05:00
parent eff0c160a5
commit ffb4d1ef52
11 changed files with 214 additions and 735 deletions
--- a/ui/public/pages/signin.html
+++ b/ui/public/pages/signin.html
@@ -0,0 +1,122 @@
+<!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">
+    <link rel="stylesheet" href="index.css">
+    <style>
+      :root {
+          --green: #0B5538;
+          --tan: #FFDFB4;
+          --red: #BC1C02;
+          --brown: #c6a476
+      }
+
+      #items {
+          position: absolute;
+          top: 45vh;
+          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 */
+      }
+
+      #title {
+          font-size: 10vh;
+          position: absolute;
+          left: 2vw;
+          top: 2vh;
+      }
+
+      a {
+        cursor: default;
+        text-decoration: underline;
+        text-underline-offset: 5px;
+        transition: background .02s, color .2s;
+        user-select: none;
+        padding: 4px;
+        border-radius: 5px;
+        display: inline-block;   /* makes background and padding behave */
+        padding: 0.2em 0.5em;    /* adds breathing room */
+      }
+
+      a:hover {
+        text-decoration: none;
+        background: var(--green);
+        color: var(--tan);
+      }
+
+      a:active {
+        background: var(--red);   /* background color works now */
+        color: white;      /* optional: change text color for contrast */
+      }
+
+      input {
+        background-color: transparent;
+        border: none;
+        border-radius: 5px;
+        border-top: 2px solid var(--green);
+        border-bottom: 2px solid var(--green);
+        height: 2em;
+        width: 15vw;
+        padding: 0.2em;
+        transition: border .2s, padding .2s;
+      }
+
+      input:focus {
+        outline: none;
+        padding: 0.4em;
+        border-top: 2px solid var(--red);
+        border-bottom: 2px solid var(--red);
+      }
+
+      input:focus::placeholder {
+        color: var(--red)
+      }
+
+      input::placeholder {
+        color: var(--green);
+      }
+
+        input:-webkit-autofill,
+        input:-webkit-autofill:focus {
+            transition: background-color 600000s 0s, color 600000s 0s;
+        }
+        input[data-autocompleted] {
+            background-color: #c7a67b !important;
+        }
+
+    @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 onclick="window.location = '/'"id="title" style="cursor: default; font-family: Canterbury; color: var(--red); margin-bottom: 10vh">hyperia</span>
+    <div id="items">
+        <input placeholder="email"></input>
+        <br>
+        <input placeholder="password"></input>
+    </div>
+    <script>
+        Array.from($("a*")).forEach((link) => {
+          link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase()))
+        })
+    </script>
+  </body>
+</html>