Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remade most pages + UI fixes + Photobox integration + more #60

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Remade most pages + UI fixes + Photobox integration + more #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c36bdb2
progressfr
weebthedev Jul 31, 2024
b012f62
more progress
weebthedev Aug 1, 2024
8f0e53e
Co-authored-by: Ethan <[email protected]>
weebthedev Aug 1, 2024
136d75a
test
weebthedev Aug 1, 2024
a646f1a
font migrate
weebthedev Aug 1, 2024
1d34f3a
inter torture of hell
weebthedev Aug 1, 2024
5e37aad
finally
weebthedev Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions my-custom-theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@

import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';

export const myCustomTheme: CustomThemeConfig = {
name: 'my-custom-theme',
properties: {
// =~= Theme Properties =~=
'--theme-font-family-base':
"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
'--theme-font-family-heading': 'Inter, system-ui',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import the custom theme and change, just this

'--theme-font-color-base': 'var(--color-surface-900)',
'--theme-font-color-dark': 'var(--color-surface-50)',
'--theme-rounded-base': '24px',
'--theme-rounded-container': '24px',
'--theme-border-base': '1px',
'--on-primary': '255 255 255',
'--on-secondary': '255 255 255',
'--on-tertiary': '0 0 0',
'--on-success': '0 0 0',
'--on-warning': '0 0 0',
'--on-error': '0 0 0',
'--on-surface': '255 255 255',
'--color-primary-50': '249 220 226',
'--color-primary-100': '246 208 216',
'--color-primary-200': '244 197 206',
'--color-primary-300': '238 162 177',
'--color-primary-400': '225 92 119',
'--color-primary-500': '212 22 60',
'--color-primary-600': '191 20 54',
'--color-primary-700': '159 17 45',
'--color-primary-800': '127 13 36',
'--color-primary-900': '104 11 29',
'--color-secondary-50': '227 237 243',
'--color-secondary-100': '218 231 239',
'--color-secondary-200': '209 225 235',
'--color-secondary-300': '181 206 223',
'--color-secondary-400': '126 170 199',
'--color-secondary-500': '70 133 175',
'--color-secondary-600': '63 120 158',
'--color-secondary-700': '53 100 131',
'--color-secondary-800': '42 80 105',
'--color-secondary-900': '34 65 86',
'--color-tertiary-50': '246 244 244',
'--color-tertiary-100': '242 240 240',
'--color-tertiary-200': '239 237 236',
'--color-tertiary-300': '230 226 225',
'--color-tertiary-400': '211 204 203',
'--color-tertiary-500': '192 182 180',
'--color-tertiary-600': '173 164 162',
'--color-tertiary-700': '144 137 135',
'--color-tertiary-800': '115 109 108',
'--color-tertiary-900': '94 89 88',
'--color-success-50': '246 250 239',
'--color-success-100': '243 248 234',
'--color-success-200': '240 247 229',
'--color-success-300': '230 241 213',
'--color-success-400': '212 231 182',
'--color-success-500': '193 221 151',
'--color-success-600': '174 199 136',
'--color-success-700': '145 166 113',
'--color-success-800': '116 133 91',
'--color-success-900': '95 108 74',
'--color-warning-50': '251 246 231',
'--color-warning-100': '250 243 223',
'--color-warning-200': '248 240 215',
'--color-warning-300': '244 231 191',
'--color-warning-400': '236 212 142',
'--color-warning-500': '228 194 94',
'--color-warning-600': '205 175 85',
'--color-warning-700': '171 146 71',
'--color-warning-800': '137 116 56',
'--color-warning-900': '112 95 46',
'--color-error-50': '248 236 236',
'--color-error-100': '246 229 230',
'--color-error-200': '244 223 224',
'--color-error-300': '237 204 205',
'--color-error-400': '224 165 167',
'--color-error-500': '210 127 129',
'--color-error-600': '189 114 116',
'--color-error-700': '158 95 97',
'--color-error-800': '126 76 77',
'--color-error-900': '103 62 63',
'--color-surface-50': '223 224 226',
'--color-surface-100': '213 213 217',
'--color-surface-200': '202 203 207',
'--color-surface-300': '170 171 179',
'--color-surface-400': '107 109 121',
'--color-surface-500': '43 46 64',
'--color-surface-600': '39 41 58',
'--color-surface-700': '32 35 48',
'--color-surface-800': '26 28 38',
'--color-surface-900': '21 23 31'
},

}
2 changes: 1 addition & 1 deletion src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="h-full overflow-hidden" data-theme="">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

set this using cookie like before

<body data-sveltekit-preload-data="hover" class="h-full overflow-hidden" data-theme="my-custom-theme">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont hardcode

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see hooks.server.ts and change that from modern to this, also change it's name from my-custom-theme to weeb-crimson or smthn like that

<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
8 changes: 4 additions & 4 deletions src/app.postcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

@tailwind base;
@tailwind components;
@tailwind utilities;
Expand All @@ -10,12 +11,11 @@ body {
@apply h-full;
}

@layer base {
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-VariableFont_slnt,wght.ttf');
}

:root {
--theme-font-family-base: 'Inter', sans-serif;
--theme-font-family-heading: 'Inter', sans-serif;
}


39 changes: 16 additions & 23 deletions src/routes/(auth)/login/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
users = users.map((user: User) => {
return {
...user,
profilePicture: guildedMediaLink(user.profilePicture ?? '/poop.png')
profilePicture: "https://photobox.cardboard.ink/user/avatar/" + user.id
};
});
if (userSearch == '') {
Expand All @@ -56,28 +56,18 @@
});
</script>

<main class="px-8 flex flex-col gap-4">
<main class="px-8 flex flex-col items-center text-center">
{#if message}
<p class="text-error-500">
{message}
</p>
{/if}
<h2 class="h1">Link Guilded</h2>
<h2 class="h1 text-4xl font-bold ">Link Guilded</h2>
<p class="p">
We need to <strong>verify</strong> your identity! Please complete following steps to confirm your
identity:
In order to <strong>verify</strong> your identity, please provide your Guilded username or ID.
</p>
<ol class="list-decimal">
<li>
Make sure you are signed in to <strong>Guilded</strong> with the <strong>Guilded</strong> account
you choose on this page.
</li>
<li>
Why do we need you to do this? <a href="/info" target="_blank">Read Here</a>.
</li>
</ol>
<div class="md:w-full lg:w-1/2">
<label class="label snap-center" for="Guilded Username">Guilded Username</label>
<div class="w-full mt-[3rem] md:w-1/2">
<label class="label" for="Guilded Username">Guilded Username</label>
<input
class="input"
id="Guilded Username"
Expand All @@ -95,19 +85,20 @@
/>
</div>

<div class="max-h-80 overflow-y-auto w-full lg:w-1/2 overflow-x-visible">
<div class="max-h-80 overflow-y-auto w-full lg:w-1/2 overflow-x-hidden">
<dl class="list-dl mt-5">
{#each users as user}
<form
action={`?/linkGuilded${redirectTo ? '&redirectTo=' + redirectTo : ''}`}
method="POST"
class="w-full"
>
<label for="guildedId" />
<input type="text" class="hidden" name="guildedId" value={user.id} />
<button class="btn w-full flex flex-row card card-hover variant-glass" type="submit">
<button class="btn w-full flex flex-row card variant-glass overflow-hidden" type="submit">
<Avatar
src={guildedMediaLink(user.profilePicture ?? '/poop.png')}
fallback={'/poop.png'}
initials="?"
/>
<span class="flex-auto">
<dt>{user.name}</dt>
Expand All @@ -120,7 +111,6 @@
viewBox="0 0 512 512"
class="fill-token"
>
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
/>
Expand All @@ -132,16 +122,19 @@
</dl>
</div>

<h3 class="h3">Or</h3>
<div class="divider font-bold text-2xl my-8 w-full lg:w-1/2">OR</div>

<form
action={`?/linkGuilded${redirectTo ? '&redirectTo=' + redirectTo : ''}`}
method="post"
class="flex flex-col gap-4 w-full lg:w-1/2"
>
<label for="guildedId">
Enter your Guilded ID directly
<input type="text" name="guildedId" class="input" placeholder="EdV9p2a4" />
<input type="text" name="guildedId" class="input" placeholder="Ann6LewA" />
</label>
<button class="btn variant-ghost-surface" type="submit">Link Guilded</button>
<button class="btn variant-ghost-primary bg-primary-500 w-full" type="submit"
>Link Guilded</button
>
</form>
</main>
2 changes: 1 addition & 1 deletion src/routes/(auth)/login/[userId]/+page.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const actions = {
if (createdBy !== userId) {
error(
403,
'Please make sure you create the post with the account you are trying to verify! For security purposes, this incident has been reported to the account owner.'
'Please make sure you create the post with the account you are trying to verify!'
);
}
db.guildedVerificationSessions.deleteMany({
Expand Down
97 changes: 55 additions & 42 deletions src/routes/(auth)/login/[userId]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { page } from '$app/stores';
import { clipboard } from '@skeletonlabs/skeleton';
import { onMount } from 'svelte';
import { CodeBlock } from '@skeletonlabs/skeleton';

export let data;

Expand All @@ -11,48 +12,60 @@
onMount(() => {
redirectTo = $page.url.searchParams.get('redirectTo');
});

let currentStep = 1;

function showNextStep() {
currentStep = 2;
}

function showPreviousStep() {
currentStep = 1;
}
</script>

<main class="px-8 flex flex-col w-full gap-4">
<h1 class="h1">Are you really who you say you are?</h1>
<p class="p">
We need to <strong>verify</strong> your identity! Please complete following steps to confirm your
identity:
</p>
<ol class="list-decimal">
<li>
Go to <a href={`https://www.guilded.gg/profile/${data.userId}`} target="_blank"
>Your Profile</a
>
</li>
<li>
Make sure you are signed in to the account you chose on the previous page and click on <strong
>"Write a post"</strong
>
</li>
<li>
Make the title of the post
<code style="code flex gap-0.5">
{data.userAuthToken}
<button class="btn btn-icon" use:clipboard={data.userAuthToken}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width="12px"
class="fill-token"
><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
d="M288 448H64V224h64V160H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64zm-64-96H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64z"
/></svg
>
</button>
</code>
. You can fill the body with anything! (Flex being a cool cardboard user!)
</li>
<li>
Click <strong>"Post"</strong> and then press <strong>"Check"</strong> over here.
</li>
<main class="px-8 flex flex-col items-left w-full gap-4 text-centlefter">
<h1 class="h1 text-3xl font-bold ">Is this <i>really</i> you?</h1>
<p class="p">Before you can access CardBoard we need to verify that you own this account, follow the steps below to verify.</p>

<ol class="text-left">
{#if currentStep === 1}
<p class="h1 text-2xl font-bold">Step 1:</p>
<li>
Go to <a href={`https://www.guilded.gg/profile/${data.userId}`} target="_blank" class="font-bold"
>your profile</a
> and click "write a post".
</li>
<img
src="/proof.png"
alt="Write a post button location"
class="mt-5 mr-[16rem] rounded-md max-w-full h-auto"
/>
<button class="btn variant-ghost-primary mt-5" on:click={showNextStep}>Next</button>
{:else if currentStep === 2}
<li>
<p class="h1 text-2xl font-bold">Step 2:</p>
Once in the post creator set your post's title to the code below, then click post.
<CodeBlock
language="cardboard"
class="mt-5 w-full sm:w-[22rem] md:w-[22rem] lg:w-[22rem] xl:w-[22rem] w-[19rem]"
code={`${data.userAuthToken}`}
>
<button class="btn variant-ghost-primary btn-icon" use:clipboard={data.userAuthToken}></button>
</CodeBlock>
</li>
<li class="mt-5">
Click <strong>"Post"</strong> and then press <strong>"Check"</strong> below.
</li>
<div class="flex justify-start gap-4 mt-5">
<button class="btn variant-ghost-primary rounded-md" on:click={showPreviousStep}>Back</button>
<form
action={`?/check${redirectTo ? '&redirectTo=' + redirectTo : ''}`}
method="post"
>
<button class="btn variant-ghost-primary rounded-md" type="submit">Check</button>
</form>
</div>
{/if}
</ol>
<form action={`?/check${redirectTo ? '&redirectTo=' + redirectTo : ''}`} method="post">
<button class="btn variant-ghost-primary rounded-md" type="submit">Check</button>
</form>
</main>
</main>
Loading