mirror of
https://git.suyu.dev/suyu/website.git
synced 2025-12-28 18:24:51 +01:00
disable signup/account
This commit is contained in:
not-nullptr
parent
a29636f8f9
commit
42e345b1e8
5 changed files with 147 additions and 18 deletions
28
src/routes/+error.svelte
Normal file
28
src/routes/+error.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
|
||||
let initialStatusGot = false;
|
||||
let status = 0;
|
||||
let message = "";
|
||||
page.subscribe((val) => {
|
||||
if (val.status && !initialStatusGot) {
|
||||
initialStatusGot = true;
|
||||
status = val.status;
|
||||
message = val.error?.message || "Unknown Error";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex h-[calc(100vh-300px)] w-full flex-col items-center justify-center gap-4 text-center"
|
||||
>
|
||||
<h1 class="text-[24px] leading-[1.41] md:text-[32px] md:leading-[1.1]">
|
||||
Well, that's an error...
|
||||
</h1>
|
||||
<h1 class="text-[42px] leading-[1.41] md:text-[84px] md:leading-[1.1]">
|
||||
{status}: "{message}"
|
||||
</h1>
|
||||
<p style="text-align: center;" class="max-w-[36rem] text-lg leading-relaxed text-[#A6A5A7]">
|
||||
Sorry about that. Click the suyu logo to go home.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -6,6 +6,11 @@
|
|||
import { browser } from "$app/environment";
|
||||
import { writable } from "svelte/store";
|
||||
import { setContext } from "svelte";
|
||||
import type { TransitionConfig } from "svelte/transition";
|
||||
import type { PageData } from "./$types";
|
||||
import { bounceOut } from "svelte/easing";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
// TODO: refactor
|
||||
interface NavItem {
|
||||
|
|
@ -39,6 +44,87 @@
|
|||
const transition =
|
||||
"linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001)";
|
||||
|
||||
function transitionIn(node: HTMLElement, { duration = 360 }: TransitionConfig) {
|
||||
const UA = navigator.userAgent;
|
||||
const ff = UA.indexOf("Firefox") > -1;
|
||||
if (!dropdownCloseFinished) {
|
||||
node.animate(
|
||||
[
|
||||
{
|
||||
top: "160px",
|
||||
opacity: "0",
|
||||
filter: ff ? "" : "blur(20px)",
|
||||
},
|
||||
{
|
||||
top: "0",
|
||||
opacity: "1",
|
||||
filter: ff ? "" : "blur(0px)",
|
||||
},
|
||||
],
|
||||
{
|
||||
easing: transition,
|
||||
duration,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
duration: 0,
|
||||
};
|
||||
}
|
||||
// FUCK YOUR DEFAULT SYSTEM, SVELTEKIT!!!
|
||||
node.animate(
|
||||
[
|
||||
{
|
||||
top: "-240px",
|
||||
opacity: "0",
|
||||
filter: ff ? "" : "blur(20px)",
|
||||
},
|
||||
{
|
||||
top: "0",
|
||||
opacity: "1",
|
||||
filter: ff ? "" : "blur(0px)",
|
||||
},
|
||||
],
|
||||
{
|
||||
easing: transition,
|
||||
duration,
|
||||
},
|
||||
);
|
||||
return {
|
||||
duration,
|
||||
};
|
||||
}
|
||||
|
||||
function transitionOut(node: HTMLElement, { duration = 360 }: TransitionConfig) {
|
||||
if (!dropdownCloseFinished)
|
||||
return {
|
||||
duration: 0,
|
||||
};
|
||||
const UA = navigator.userAgent;
|
||||
const ff = UA.indexOf("Firefox") > -1;
|
||||
node.animate(
|
||||
[
|
||||
{
|
||||
top: "0",
|
||||
opacity: "1",
|
||||
filter: ff ? "" : "blur(0px)",
|
||||
},
|
||||
{
|
||||
top: "240px",
|
||||
opacity: "0",
|
||||
filter: ff ? "" : "blur(80px)",
|
||||
},
|
||||
],
|
||||
{
|
||||
easing: transition,
|
||||
duration,
|
||||
},
|
||||
);
|
||||
return {
|
||||
duration,
|
||||
};
|
||||
}
|
||||
|
||||
let dropdownOpen = false;
|
||||
let dropdownCloseFinished = true;
|
||||
let dropdownOpenFinished = false;
|
||||
|
|
@ -108,7 +194,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
function openDropdown() {
|
||||
function toggleDropdown() {
|
||||
dropdownOpen = !dropdownOpen;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +239,12 @@
|
|||
: "mx-auto flex h-[120px] w-full max-w-[1300px] flex-row items-center justify-between px-8"}
|
||||
>
|
||||
<div class="flex w-full flex-row items-center justify-start gap-8">
|
||||
<a href="/">
|
||||
<a
|
||||
href="/"
|
||||
on:click={() => {
|
||||
if (dropdownOpen && window.innerWidth < 625) toggleDropdown();
|
||||
}}
|
||||
>
|
||||
<Logo size={28} />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -182,15 +273,15 @@
|
|||
>
|
||||
<DiscordSolid />
|
||||
</a>
|
||||
<a href={$token ? "/account" : "/signup"} class="button-sm"
|
||||
<!-- <a href={$token ? "/account" : "/signup"} class="button-sm"
|
||||
>{$token ? "Account" : "Sign up"}</a
|
||||
>
|
||||
> -->
|
||||
</div>
|
||||
<div class="relative mr-4 hidden flex-row gap-4 max-[625px]:flex">
|
||||
<button
|
||||
aria-label={dropdownOpen ? "Close navigation" : "Open navigation"}
|
||||
aria-expanded={dropdownOpen}
|
||||
on:click={openDropdown}
|
||||
on:click={toggleDropdown}
|
||||
>
|
||||
<div
|
||||
style="transition: 180ms; transition-property: opacity transform;"
|
||||
|
|
@ -214,7 +305,7 @@
|
|||
<div
|
||||
style="transition: 180ms ease;"
|
||||
aria-hidden={!dropdownOpenFinished && !dropdownOpen}
|
||||
class={`fixed left-0 z-10 h-screen w-full bg-black p-9 pt-[120px] ${dropdownOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none opacity-0"}`}
|
||||
class={`fixed left-0 z-10 h-screen w-full bg-black p-9 pt-[120px] ${dropdownOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none opacity-0"} ${dropdownOpen && !dropdownCloseFinished} ? "z-[99999]" : ""`}
|
||||
>
|
||||
<div class={`flex flex-col gap-8`}>
|
||||
<!-- <a href="##"><h1 class="w-full text-5xl">Blog</h1></a>
|
||||
|
|
@ -263,6 +354,7 @@
|
|||
? "translate-y-0 opacity-100 filter-none"
|
||||
: "-translate-y-24 opacity-0 blur-md"}
|
||||
href={item.href}
|
||||
on:click={() => toggleDropdown()}
|
||||
>
|
||||
<h1 class="w-full text-5xl">{item.name}</h1>
|
||||
</a>
|
||||
|
|
@ -270,12 +362,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div
|
||||
style="transition: 360ms {transition};"
|
||||
aria-hidden={dropdownOpenFinished && dropdownOpen}
|
||||
tabindex={dropdownOpen ? 0 : -1}
|
||||
class={`relative z-50 mx-auto flex w-full max-w-[1300px] flex-col px-8 pb-12 pt-[120px] ${dropdownOpen ? "pointer-events-none translate-y-[25vh] opacity-0" : ""} ${dropdownOpenFinished && dropdownOpen ? "invisible" : ""}`}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{#key data.url}
|
||||
<div
|
||||
in:transitionIn={{ duration: 500 }}
|
||||
out:transitionOut={{ duration: 500 }}
|
||||
style="transition: 360ms {transition};"
|
||||
aria-hidden={dropdownOpenFinished && dropdownOpen}
|
||||
tabindex={dropdownOpen ? 0 : -1}
|
||||
class={`absolute left-[50%] z-50 mx-auto flex w-screen max-w-[1300px] translate-x-[-50%] flex-col px-8 pb-12 pt-[120px] ${dropdownOpen ? "pointer-events-none translate-y-[25vh] opacity-0" : ""} ${dropdownOpenFinished && dropdownOpen ? "invisible" : ""}`}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{/key}
|
||||
</main>
|
||||
|
|
|
|||
5
src/routes/+layout.ts
Normal file
5
src/routes/+layout.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export function load({ url }) {
|
||||
return {
|
||||
url: url.pathname,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script lang="ts">
|
||||
<!-- <script lang="ts">
|
||||
import { browser } from "$app/environment";
|
||||
import { goto } from "$app/navigation";
|
||||
import { getContext } from "svelte";
|
||||
|
|
@ -77,4 +77,4 @@
|
|||
<a href="/account/rooms" class="button-sm">Rooms</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<script lang="ts">
|
||||
<!-- <script lang="ts">
|
||||
import { browser } from "$app/environment";
|
||||
import { goto } from "$app/navigation";
|
||||
import HCaptcha from "$components/HCaptcha.svelte";
|
||||
|
|
@ -81,4 +81,4 @@
|
|||
<button {disabled} on:click={signUp} class="cta-button mt-2">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue