Scaffold signin and signup pages

qb-rs · Aug 31, 2023 · a9d7b0c · a9d7b0c
1 parent a8fbddb
commit a9d7b0c
Show file tree

Hide file tree

Showing 7 changed files with 361 additions and 0 deletions.
diff --git a/qb-frontend/package-lock.json b/qb-frontend/package-lock.json
diff --git a/qb-frontend/package.json b/qb-frontend/package.json
@@ -14,6 +14,8 @@
   },
   "type": "module",
   "dependencies": {
+    "@fontsource/inter": "^5.0.8",
+    "@fontsource/teko": "^5.0.11",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@sveltejs/adapter-static": "^2.0.3",

diff --git a/qb-frontend/src/app.css b/qb-frontend/src/app.css
@@ -7,3 +7,129 @@
 /* https://github.com/QuixByte/qb/blob/main/LICENSE */
 
 /* (c) Copyright 2023 The QuixByte Authors */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  background-image: url("/quixbyte_bg_light.svg");
+}
+
+h1,h2,h3,h4,h5 {
+  color: #000c2a;
+}
+
+p {
+  line-height: 1.4em;
+  color: #333f55;
+}
+
+button {
+  font-size: 18px;
+  display: inline-block;
+  padding: 0.4em 0.8em;
+  border-radius: 0.6em;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
+  background-color: #55f;
+  border: 2px solid transparent;
+  color: white;
+  transition: background-color 0.3s ease,
+    border-color 0.3s ease;
+}
+
+button:hover, button:active {
+  border-color: #44f;
+  background-color: #66f;
+}
+
+input:focus {
+  outline: 0.2em solid rgba(0, 0, 255, 0.2);
+  animation: 3s outline linear infinite;
+}
+
+button:focus {
+  outline: 0.2em solid rgba(0, 0, 255, 0.2);
+  animation: 3s outline linear infinite;
+}
+
+@keyframes outline {
+  50% {
+    outline-color: rgba(100, 100, 255, 0.2);
+  }
+}
+
+.link {
+  text-decoration: none;
+  color: blue;
+  position: relative;
+
+  transition: color 0.3s ease-in-out;
+}
+
+.link:hover {
+  color: #44f;
+}
+
+.link::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 0;
+  height: 1px;
+  background-color: #44f;
+  left: 0;
+  bottom: 0;
+  transition: width 0.3s ease-in-out;
+}
+
+.link:hover::before {
+  width: 100%;
+}
+
+.field {
+  position: relative;
+}
+
+.field label {
+  position: absolute;
+  left: 17px;
+  top: 0;
+  padding: 0px 5px;
+  transform: translateY(12px);
+  background-color: transparent;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  color: #888;
+}
+
+.field input:focus + label,
+.field.content label {
+  transform: translate(-10%, -50%) scale(0.8);
+  background-color: white;
+}
+
+.field input:focus + label {
+  color: #44f;
+}
+
+input {
+  padding: 10px 20px;
+  border-radius: 10px;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  width: 100%;
+  font-size: 16px;
+  font-family: "Inter", sans-serif;
+}
+
+input:focus {
+  border-color: rgba(100, 100, 255, 0.8);
+}
+
+.fnote {
+  font-size: 14px;
+}
diff --git a/qb-frontend/src/routes/+layout.svelte b/qb-frontend/src/routes/+layout.svelte
@@ -10,6 +10,21 @@
 
 <script lang="ts">
   import "../app.css";
+
+  import "@fontsource/inter/latin-400.css";
+  import "@fontsource/inter/latin-900.css";
+  import "@fontsource/inter/latin-700.css";
 </script>
 
 <slot />
+
+<p>Powered by <a class="link" href="https://quixbyte.tech">QuixByte</a></p>
+
+<style>
+  p {
+    position: absolute;
+    left: 10px;
+    bottom: 5px;
+    font-size: 14px;
+  }
+</style>
diff --git a/qb-frontend/src/routes/signin/+page.svelte b/qb-frontend/src/routes/signin/+page.svelte
@@ -0,0 +1,66 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-only -->
+
+<!-- ████████████████████████████████████████████████ -->
+<!-- █─▄▄▄─█▄─██─▄█▄─▄█▄─▀─▄█▄─▄─▀█▄─█─▄█─▄─▄─█▄─▄▄─█ -->
+<!-- █─██▀─██─██─███─███▀─▀███─▄─▀██▄─▄████─████─▄█▀█ -->
+<!-- ▀───▄▄▀▀▄▄▄▄▀▀▄▄▄▀▄▄█▄▄▀▄▄▄▄▀▀▀▄▄▄▀▀▀▄▄▄▀▀▄▄▄▄▄▀ -->
+<!-- https://github.com/QuixByte/qb/blob/main/LICENSE -->
+
+<!-- (c) Copyright 2023 The QuixByte Authors -->
+
+<script lang="ts">
+  export let name: string;
+  export let password: string;
+</script>
+
+<main>
+  <form>
+    <h1>Welcome back</h1>
+
+    <p>Please sign in to continue.</p>
+
+    <br />
+
+    <div class="field" class:content={name}>
+      <input name="name" id="name" bind:value={name} />
+      <label for="name">Name</label>
+    </div>
+
+    <div class="field" class:content={password}>
+      <input
+        name="password"
+        id="password"
+        type="password"
+        bind:value={password}
+      />
+      <label for="password">Password</label>
+    </div>
+
+    <button>Continue</button>
+
+    <p class="fnote">
+      Don't have an account? <a class="link" href="/signup">Sign up</a>
+    </p>
+  </form>
+</main>
+
+<style>
+  main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    width: 100%;
+    max-width: 450px;
+    padding: 40px 40px;
+    background-color: white;
+    border-radius: 20px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+</style>
diff --git a/qb-frontend/src/routes/signup/+page.svelte b/qb-frontend/src/routes/signup/+page.svelte
@@ -0,0 +1,80 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-only -->
+
+<!-- ████████████████████████████████████████████████ -->
+<!-- █─▄▄▄─█▄─██─▄█▄─▄█▄─▀─▄█▄─▄─▀█▄─█─▄█─▄─▄─█▄─▄▄─█ -->
+<!-- █─██▀─██─██─███─███▀─▀███─▄─▀██▄─▄████─████─▄█▀█ -->
+<!-- ▀───▄▄▀▀▄▄▄▄▀▀▄▄▄▀▄▄█▄▄▀▄▄▄▄▀▀▀▄▄▄▀▀▀▄▄▄▀▀▄▄▄▄▄▀ -->
+<!-- https://github.com/QuixByte/qb/blob/main/LICENSE -->
+
+<!-- (c) Copyright 2023 The QuixByte Authors -->
+
+<script lang="ts">
+  export let name: string;
+  export let password: string;
+  export let cpassword: string;
+</script>
+
+<main>
+  <form>
+    <h1>Create your account</h1>
+
+    <p>
+      Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum
+      sint consectetur cupidatat.
+    </p>
+
+    <br />
+
+    <div class="field" class:content={name}>
+      <input name="name" id="name" bind:value={name} />
+      <label for="name">Name</label>
+    </div>
+
+    <div class="field" class:content={password}>
+      <input
+        name="password"
+        id="password"
+        type="password"
+        bind:value={password}
+      />
+      <label for="password">Password</label>
+    </div>
+
+    <div class="field" class:content={cpassword}>
+      <input
+        name="cpassword"
+        id="cpassword"
+        type="cpassword"
+        bind:value={cpassword}
+      />
+      <label for="password">Confirm password</label>
+    </div>
+
+    <button>Continue</button>
+
+    <p class="fnote">
+      Already have an account? <a class="link" href="/signin">Sign in</a>
+    </p>
+  </form>
+</main>
+
+<style>
+  main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    width: 100%;
+    max-width: 450px;
+    padding: 40px 40px;
+    background-color: white;
+    border-radius: 20px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+</style>
diff --git a/qb-frontend/static/quixbyte_bg_light.svg b/qb-frontend/static/quixbyte_bg_light.svg