From f02dd36728fcb9ed40c9f5dd12794dd7de5cf5f0 Mon Sep 17 00:00:00 2001
From: bloodwiing <bloodwiing+git@alchemix.dev>
Date: Thu, 16 May 2024 00:39:15 +0300
Subject: [PATCH] Add: New Register page styling

---
 src/routes/(login)/+layout.svelte             | 146 ++++++++++++++++++
 .../login/+page.server.js}                    |   0
 src/routes/(login)/login/+page.svelte         |   0
 .../{ => (login)}/register/+page.server.js    |   0
 src/routes/(login)/register/+page.svelte      |  11 ++
 5 files changed, 157 insertions(+)
 create mode 100644 src/routes/(login)/+layout.svelte
 rename src/routes/{register/+page.svelte => (login)/login/+page.server.js} (100%)
 create mode 100644 src/routes/(login)/login/+page.svelte
 rename src/routes/{ => (login)}/register/+page.server.js (100%)
 create mode 100644 src/routes/(login)/register/+page.svelte

diff --git a/src/routes/(login)/+layout.svelte b/src/routes/(login)/+layout.svelte
new file mode 100644
index 0000000..9454fe1
--- /dev/null
+++ b/src/routes/(login)/+layout.svelte
@@ -0,0 +1,146 @@
+<script>
+  /** @type {Element} */
+  let glow1;
+  
+  /** @type {Element} */
+  let background;
+
+  function mouseMoveGlow(/** @type {MouseEvent | TouchEvent} */ e) {
+    const rect = background.getBoundingClientRect();
+
+    const curX = 'clientX' in e ? e.clientX : e.touches[0].clientX;
+    const curY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
+    
+    const x = 1 - (curX - rect.left) / (rect.width - rect.left);
+    const y = 1 - (curY - rect.top) / (rect.height - rect.top);
+
+    const size = (Math.max(Math.abs(x - 0.5), Math.abs(y - 0.5)) * 2) * 10 + 100;
+
+    glow1.setAttribute('style', `--x: ${x * 100}%; --y: ${y * 100}%; --size: ${size}%;`);
+  }
+</script>
+
+<style lang="scss">
+  .page {
+    position: relative;
+    width: 100dvw;
+    height: 100dvh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  main {
+    position: relative;
+  }
+
+  .background {
+    position: absolute;
+
+    --background: black;
+    --color-1: #405bf3;
+    --color-2: #caad77;
+    --color-3: #f3404f;
+
+    background: var(--background);
+
+    overflow: hidden;
+
+    width: 100dvw;
+    height: 100dvh;
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  .fwh {
+    position: absolute;
+    width: max(100vh, 100vw);
+    height: max(100vh, 100vw);
+  }
+
+  .overlay {
+    background: radial-gradient(circle at center, var(--background) 40%, #3f0a0a, #8a0b06, #c95141, #cca6a6 45%);
+    mix-blend-mode: overlay;
+  }
+
+  .sphere {
+    background: radial-gradient(circle at center, var(--background) 40%, transparent 45%);
+  }
+
+  .glow.center {
+    background-size: 110% 110%;
+    background-position: center;
+
+    @keyframes glowloop {
+      from {
+        transform: translateX(-50%) translateY(-50%) rotate(0deg);
+      }
+      to {
+        transform: translateX(-50%) translateY(-50%) rotate(360deg);
+      }
+    }
+
+    &#glow-c {
+      background-image: radial-gradient(circle at center, #f5bfbf 30%, transparent 45%);
+      opacity: 0.3;
+    }
+
+    &#glow-1 {
+      background-image: radial-gradient(circle at center, var(--color-1) 10%, transparent 50%),
+                        radial-gradient(circle at center, var(--color-1) 25%, transparent 45%);
+      background-position: var(--x) var(--y);
+
+      background-size: var(--size) var(--size);
+
+      mix-blend-mode: color-dodge;
+    }
+
+    &#glow-2 {
+      background-image: radial-gradient(circle at center, var(--color-2) 20%, transparent 40%),
+                        radial-gradient(circle at center, var(--color-2) 25%, transparent 35%);
+      background-position: 100% 0%;
+      transform: rotate(120deg);
+      opacity: 0.3;
+
+      animation: glowloop 10s linear infinite forwards -7.5s;
+    }
+
+    &#glow-3 {
+      background-image: radial-gradient(circle at center, var(--color-3) 10%, transparent 44%),
+                        radial-gradient(circle at center, var(--color-3) 25%, transparent 42%);
+      background-position: 100% 0%;
+      transform: rotate(240deg);
+      opacity: 0.3;
+
+      animation: glowloop 15s linear infinite forwards reverse -12s;
+    }
+  }
+
+</style>
+
+<svelte:head>
+  <link rel="stylesheet" href="/css/form.scss">
+</svelte:head>
+
+<div class="page">
+  <div class="background" bind:this={background} on:mousemove={mouseMoveGlow} role="none">
+    <div class="glow fwh center" id="glow-c"></div>
+    <div class="glow fwh center" id="glow-3"></div>
+    <div class="glow fwh center" id="glow-2"></div>
+    <div class="glow fwh center" id="glow-1" bind:this={glow1}></div>
+    <div class="overlay fwh center"></div>
+    <div class="sphere fwh center"></div>
+
+    <!-- <div class="fwh" style="background: #999999;"></div> -->
+  </div>
+
+  <main class="content" on:mousemove={mouseMoveGlow} role="none">
+    <slot />
+  </main>
+</div>
diff --git a/src/routes/register/+page.svelte b/src/routes/(login)/login/+page.server.js
similarity index 100%
rename from src/routes/register/+page.svelte
rename to src/routes/(login)/login/+page.server.js
diff --git a/src/routes/(login)/login/+page.svelte b/src/routes/(login)/login/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/register/+page.server.js b/src/routes/(login)/register/+page.server.js
similarity index 100%
rename from src/routes/register/+page.server.js
rename to src/routes/(login)/register/+page.server.js
diff --git a/src/routes/(login)/register/+page.svelte b/src/routes/(login)/register/+page.svelte
new file mode 100644
index 0000000..87568a5
--- /dev/null
+++ b/src/routes/(login)/register/+page.svelte
@@ -0,0 +1,11 @@
+<style>
+
+</style>
+
+<form action="/register" method="post">
+  <h1 class="typeTitle">Register</h1>
+  <input type="text" name="username" id="username" autocomplete="username">
+  <input type="password" name="password" id="password" autocomplete="new-password">
+  <input type="password" name="repeatPassword" id="repeatPassword" autocomplete="new-password">
+  <button class="button" type="submit">go!</button>
+</form>