mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-04-27 15:31:21 +00:00
feat: particle mode switcher and linting
This commit is contained in:
parent
bbbca9f7da
commit
2ea6df9fbe
7 changed files with 42 additions and 34 deletions
|
|
@ -31,5 +31,5 @@ export const Icons = {
|
|||
facebook: FacebookLogo,
|
||||
google: GoogleLogo,
|
||||
instagram: InstagramLogo,
|
||||
twitter: TwitterLogo,
|
||||
twitter: TwitterLogo
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
topleft: '#FF6C22',
|
||||
topright: '#FF9209',
|
||||
bottomleft: '#2B3499',
|
||||
bottomright: '#FFD099',
|
||||
}
|
||||
bottomright: '#FFD099'
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
export let vx = 0;
|
||||
export let vy = 0;
|
||||
|
||||
export let color = $mode === 'dark' ? '#ffffff' : '#000000';
|
||||
let color = '#ffffff';
|
||||
let rgb = hexToRgb(color);
|
||||
|
||||
/**
|
||||
* @type {HTMLCanvasElement}
|
||||
|
|
@ -56,6 +57,33 @@
|
|||
return [red, green, blue];
|
||||
}
|
||||
|
||||
mode.subscribe((value) => {
|
||||
console.log('value', value);
|
||||
color = value === 'dark' ? '#ffffff' : '#000000';
|
||||
|
||||
// Move the `rgb` calculation inside the `mode.subscribe` callback
|
||||
rgb = hexToRgb(color);
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {{ x: any; y: any; translateX: any; translateY: any; size: any; alpha: any; targetAlpha?: number; dx?: number; dy?: number; magnetism?: number; }} circle
|
||||
*/
|
||||
function drawCircle(circle, update = false) {
|
||||
if (context) {
|
||||
const { x, y, translateX, translateY, size, alpha } = circle;
|
||||
context.translate(translateX, translateY);
|
||||
context.beginPath();
|
||||
context.arc(x, y, size, 0, 2 * Math.PI);
|
||||
context.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`;
|
||||
context.fill();
|
||||
context.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
|
||||
if (!update) {
|
||||
circles.push(circle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initCanvas() {
|
||||
resizeCanvas();
|
||||
drawParticles();
|
||||
|
|
@ -113,27 +141,6 @@
|
|||
};
|
||||
}
|
||||
|
||||
const rgb = hexToRgb(color);
|
||||
|
||||
/**
|
||||
* @param {{ x: any; y: any; translateX: any; translateY: any; size: any; alpha: any; targetAlpha?: number; dx?: number; dy?: number; magnetism?: number; }} circle
|
||||
*/
|
||||
function drawCircle(circle, update = false) {
|
||||
if (context) {
|
||||
const { x, y, translateX, translateY, size, alpha } = circle;
|
||||
context.translate(translateX, translateY);
|
||||
context.beginPath();
|
||||
context.arc(x, y, size, 0, 2 * Math.PI);
|
||||
context.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`;
|
||||
context.fill();
|
||||
context.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
|
||||
if (!update) {
|
||||
circles.push(circle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearContext() {
|
||||
if (context) {
|
||||
context.clearRect(0, 0, canvasSize.w, canvasSize.h);
|
||||
|
|
|
|||
|
|
@ -29,4 +29,4 @@ export const actions: Actions = {
|
|||
console.log('provider: ', provider);
|
||||
await locals.pocketBase.collection('users').authWithOAuth2({ provider: provider });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
const { providers } = data;
|
||||
const providersWithIcons = providers.map((provider) => ({
|
||||
...provider,
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
icon: (Icons as { [key: string]: any })[provider.name] || undefined
|
||||
}));
|
||||
let currentProvider = providersWithIcons[0];
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<div class="flex flex-col space-y-2 text-center">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Enter your email and password below to log into your account
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -90,11 +91,11 @@
|
|||
<span class="w-full border-t" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-background text-muted-foreground px-2 py-6"> Or continue with </span>
|
||||
<span class="bg-background px-2 py-6 text-muted-foreground"> Or continue with </span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-secondary text-secondary-foreground flex items-center justify-between rounded-md"
|
||||
class="flex items-center justify-between rounded-md bg-secondary text-secondary-foreground"
|
||||
>
|
||||
<input type="hidden" name="provider" bind:value={currentProvider.name} />
|
||||
<div class="flex w-full items-center justify-center space-x-2">
|
||||
|
|
@ -125,7 +126,7 @@
|
|||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="secondary" class="px-2 shadow-none">
|
||||
<ChevronDown class="text-secondary-foreground h-4 w-4" />
|
||||
<ChevronDown class="h-4 w-4 text-secondary-foreground" />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-80" align="end">
|
||||
|
|
@ -157,7 +158,7 @@
|
|||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
<p class="text-muted-foreground px-8 text-center text-sm">
|
||||
<p class="px-8 text-center text-sm text-muted-foreground">
|
||||
Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
|
||||
Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@ export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals })
|
|||
return {
|
||||
authenticated: locals.pocketBase.authStore.isValid,
|
||||
user,
|
||||
providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders,
|
||||
providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="pb-16 pt-52 md:pb-32 md:pt-60">
|
||||
<div class="container mx-auto text-center">
|
||||
<h1
|
||||
class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl font-extrabold tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60"
|
||||
class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl font-extrabold tracking-tight text-transparent dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60 sm:text-5xl md:text-6xl lg:text-7xl"
|
||||
>
|
||||
<span class="inline-block text-balance align-top decoration-inherit">
|
||||
One Dashboard
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
Countless Solutions
|
||||
</span>
|
||||
</h1>
|
||||
<p class="mb-8 text-sm text-zinc-800 md:text-xl dark:text-zinc-300">
|
||||
<p class="mb-8 text-sm text-zinc-800 dark:text-zinc-300 md:text-xl">
|
||||
Tame ticket overload and keep your operations teams sane
|
||||
</p>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in a new issue