diff --git a/src/app.css b/src/app.css index 714d0a92..ce13eea5 100644 --- a/src/app.css +++ b/src/app.css @@ -4,7 +4,7 @@ @plugin "@tailwindcss/typography"; @layer base { - :root { + /* :root { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --muted: 0 0% 14.9%; @@ -63,6 +63,289 @@ --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; + } */ + :root { + --radius: 0.5rem; + } + + body:has(#theme.shadcn-zinc-light) { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5.9% 10%; + --sidebar-background: var(--primary-foreground); + --sidebar-foreground: var(--primary); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + } + + body:has(#theme.shadcn-zinc-dark) { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + --sidebar-background: var(--primary-foreground); + --sidebar-foreground: var(--primary); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + } + + body:has(#theme.black) { + --background: 0 0% 0%; + --foreground: 0 0% 100%; + --card: 0 0% 0%; + --card-foreground: 0 0% 100%; + --popover: 0 0% 0%; + --popover-foreground: 0 0% 100%; + --primary: 0 0% 100%; + --primary-foreground: 0 0% 0%; + --secondary: 0 0% 0%; + --secondary-foreground: 0 0% 100%; + --muted: 0 0% 0%; + --muted-foreground: 0 0% 100%; + --accent: 0 0% 100%; + --accent-foreground: 0 0% 0%; + --destructive: 0 0% 100%; + --destructive-foreground: 0 0% 0%; + --border: 0 0% 100%; + --input: 0 0% 100%; + --ring: 0 0% 100%; + --sidebar-background: var(--primary-foreground); + --sidebar-foreground: var(--primary); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + } + + body:has(#theme.catppuccin-latte) { + --background: 220 23.076923191547394% 94.90196108818054%; /* base */ + --foreground: 234 16.022099554538727% 35.49019694328308%; /* text */ + + --muted: 223 15.909090638160706% 82.74509906768799%; /* surface0 */ + --muted-foreground: 233 12.796208262443542% 41.372549533843994%; /* subtext1 */ + + --popover: 220 23.076923191547394% 94.90196108818054%; /* base */ + --popover-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */ + + --card: 220 23.076923191547394% 94.90196108818054%; /* base */ + --card-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */ + + --border: 225 13.55932205915451% 76.86274647712708%; /* surface1 */ + --input: 225 13.55932205915451% 76.86274647712708%; /* surface1 */ + + --primary: 266 85.04672646522522% 58.03921818733215%; /* accent - Mauve */ + --primary-foreground: 220 23.076923191547394% 94.90196108818054%; /* base */ + + --secondary: 223 15.909090638160706% 82.74509906768799%; /* surface0 */ + --secondary-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */ + + --accent: 223 15.909090638160706% 82.74509906768799%; /* surface0 */ + --accent-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */ + + --destructive: 347 86.66666746139526% 44.11764740943909%; /* red */ + --destructive-foreground: 220 21.95121943950653% 91.96078181266785%; /* mantle */ + + --ring: 234 16.022099554538727% 35.49019694328308%; /* text */ + + --chart-1: 347 86.66666746139526% 44.11764740943909%; /* red */ + --chart-2: 183 73.86363744735718% 34.50980484485626%; /* teal */ + --chart-3: 220 91.4893627166748% 53.921568393707275%; /* blue */ + --chart-4: 35 76.98412537574768% 49.41176474094391%; /* yellow */ + --chart-5: 109 57.63546824455261% 39.803922176361084%; /* green */ + + --sidebar-background: var(--primary-foreground); + --sidebar-foreground: var(--primary); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + } + + body:has(#theme.catppuccin-frappe) { + --background: 229 18.644067645072937% 23.137255012989044%; /* base */ + --foreground: 227 70.14925479888916% 86.86274290084839%; /* text */ + + --muted: 230 15.584415197372437% 30.19607961177826%; /* surface0 */ + --muted-foreground: 227 43.689319491386414% 79.8039197921753%; /* subtext1 */ + + --popover: 229 18.644067645072937% 23.137255012989044%; /* base */ + --popover-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */ + + --card: 229 18.644067645072937% 23.137255012989044%; /* base */ + --card-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */ + + --border: 227 14.73684161901474% 37.254902720451355%; /* surface1 */ + --input: 227 14.73684161901474% 37.254902720451355%; /* surface1 */ + + --primary: 277 59.01639461517334% 76.07843279838562%; /* accent - Mauve */ + --primary-foreground: 229 18.644067645072937% 23.137255012989044%; /* base */ + + --secondary: 230 15.584415197372437% 30.19607961177826%; /* surface0 */ + --secondary-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */ + + --accent: 230 15.584415197372437% 30.19607961177826%; /* surface0 */ + --accent-foreground: 227 70.14925479888916% 86.86274290084839%; /* text */ + + --destructive: 359 67.78523325920105% 70.78431248664856%; /* red */ + --destructive-foreground: 231 18.81188154220581% 19.80392187833786%; /* mantle */ + + --ring: 227 70.14925479888916% 86.86274290084839%; /* text */ + + --radius: 0.5rem; + + --chart-1: 359 67.78523325920105% 70.78431248664856%; /* red */ + --chart-2: 172 39.22652006149292% 64.50980305671692%; /* teal */ + --chart-3: 222 74.24242496490479% 74.11764860153198%; /* blue */ + --chart-4: 40 62.043797969818115% 73.13725352287292%; /* yellow */ + --chart-5: 96 43.90243887901306% 67.84313917160034%; /* green */ + + --sidebar-background: var(--primary-foreground); + --sidebar-foreground: var(--primary); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + } + + body:has(#theme.catppuccin-macchiato) { + --background: 232 23.404255509376526% 18.431372940540314%; /* base */ + --foreground: 227 68.2539701461792% 87.64705657958984%; /* text */ + + --muted: 230 18.796992301940918% 26.07843279838562%; /* surface0 */ + --muted-foreground: 228 39.21568691730499% 80.0000011920929%; /* subtext1 */ + + --popover: 232 23.404255509376526% 18.431372940540314%; /* base */ + --popover-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */ + + --card: 232 23.404255509376526% 18.431372940540314%; /* base */ + --card-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */ + + --border: 231 15.606936812400818% 33.92156958580017%; /* surface1 */ + --input: 231 15.606936812400818% 33.92156958580017%; /* surface1 */ + + --primary: 267 82.69230723381042% 79.60784435272217%; /* accent - Mauve */ + --primary-foreground: 232 23.404255509376526% 18.431372940540314%; /* base */ + + --secondary: 230 18.796992301940918% 26.07843279838562%; /* surface0 */ + --secondary-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */ + + --accent: 230 18.796992301940918% 26.07843279838562%; /* surface0 */ + --accent-foreground: 227 68.2539701461792% 87.64705657958984%; /* text */ + + --destructive: 351 73.9130437374115% 72.9411780834198%; /* red */ + --destructive-foreground: 233 23.076923191547394% 15.294118225574493%; /* mantle */ + + --ring: 227 68.2539701461792% 87.64705657958984%; /* text */ + + --radius: 0.5rem; + + --chart-1: 351 73.9130437374115% 72.9411780834198%; /* red */ + --chart-2: 171 46.83544337749481% 69.01960968971252%; /* teal */ + --chart-3: 220 82.8125% 74.90196228027344%; /* blue */ + --chart-4: 40 69.91150379180908% 77.84313559532166%; /* yellow */ + --chart-5: 105 48.25174808502197% 71.96078300476074%; /* green */ + + --sidebar-background: var(--primary-foreground); + --sidebar-foreground: var(--primary); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + } + + body:has(#theme.catppuccin-mocha) { + --background: 240 21.052631735801697% 14.901961386203766%; /* base */ + --foreground: 226 63.93442749977112% 88.03921341896057%; /* text */ + + --muted: 237 16.239316761493683% 22.94117659330368%; /* surface0 */ + --muted-foreground: 227 35.29411852359772% 80.0000011920929%; /* subtext1 */ + + --popover: 240 21.052631735801697% 14.901961386203766%; /* base */ + --popover-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */ + + --card: 240 21.052631735801697% 14.901961386203766%; /* base */ + --card-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */ + + --border: 234 13.20754736661911% 31.176471710205078%; /* surface1 */ + --input: 234 13.20754736661911% 31.176471710205078%; /* surface1 */ + + --primary: 267 83.50515365600586% 80.98039031028748%; /* accent - Mauve */ + --primary-foreground: 240 21.052631735801697% 14.901961386203766%; /* base */ + + --secondary: 237 16.239316761493683% 22.94117659330368%; /* surface0 */ + --secondary-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */ + + --accent: 237 16.239316761493683% 22.94117659330368%; /* surface0 */ + --accent-foreground: 226 63.93442749977112% 88.03921341896057%; /* text */ + + --destructive: 343 81.25% 74.90196228027344%; /* red */ + --destructive-foreground: 240 21.311475336551666% 11.96078434586525%; /* mantle */ + + --ring: 226 63.93442749977112% 88.03921341896057%; /* text */ + + --radius: 0.5rem; + + --chart-1: 343 81.25% 74.90196228027344%; /* red */ + --chart-2: 170 57.35294222831726% 73.33333492279053%; /* teal */ + --chart-3: 217 91.86992049217224% 75.88235139846802%; /* blue */ + --chart-4: 41 86.04651093482971% 83.13725590705872%; /* yellow */ + --chart-5: 115 54.09836173057556% 76.07843279838562%; /* green */ + + --sidebar-background: var(--primary-foreground); + --sidebar-foreground: var(--primary); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); } } diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte index 32aec682..cf0ce71f 100644 --- a/src/lib/components/app-sidebar.svelte +++ b/src/lib/components/app-sidebar.svelte @@ -3,11 +3,14 @@ import type { ComponentProps } from 'svelte'; import { slide } from 'svelte/transition'; import { page } from '$app/state'; + import clsx from 'clsx'; // UI Components import * as Sidebar from '$lib/components/ui/sidebar/index.js'; import * as Command from '$lib/components/ui/command/index.js'; import * as Collapsible from '$lib/components/ui/collapsible/index.js'; + import { useSidebar } from '$lib/components/ui/sidebar/index.js'; + const sidebar = useSidebar(); // Lucide icons import Wrench from 'lucide-svelte/icons/wrench'; @@ -18,10 +21,12 @@ import Check from 'lucide-svelte/icons/check'; import Code from 'lucide-svelte/icons/code'; import Settings from 'lucide-svelte/icons/settings'; + import PanelLeft from 'lucide-svelte/icons/panel-left'; // App state and data - import { preferencesStore } from '$lib/state.js'; + import { preferencesStore } from '$lib/stores'; import { gmaes } from '$lib/gmaes.js'; + import { settingsOpen } from '$lib/state.svelte'; // Props let { ref = $bindable(null), ...restProps }: ComponentProps = $props(); @@ -80,7 +85,7 @@ url: '/tools/password-generator' }, { - title: 'Random Number Generator', + title: 'Random Number Gen', url: '/tools/random-number-generator' } ] @@ -115,7 +120,9 @@ {#snippet child({ props })}
@@ -137,7 +144,7 @@ {...props} >
@@ -247,8 +254,8 @@ - {#if $preferencesStore.experimentalFeatures === true} - + + {#if $preferencesStore.experimentalFeatures === true} {#snippet child({ props })} @@ -260,13 +267,27 @@ - + { + settingsOpen.current = true; + }} + > Settings - - {/if} + {/if} + + { + sidebar.toggle(); + }} + > + + Sidebar + + + @@ -305,7 +326,12 @@ {/each} {#if $preferencesStore.experimentalFeatures} - + { + settingsOpen.current = true; + commandOpen = false; + }} + > Settings {/if} diff --git a/src/lib/components/settings.svelte b/src/lib/components/settings.svelte index f3ac0855..4c60d31e 100644 --- a/src/lib/components/settings.svelte +++ b/src/lib/components/settings.svelte @@ -1,13 +1,32 @@ - + Settings + Appearence + Most of these themes haven't been implemented yet. + + + {triggerContent} + + + {#each themes as theme} + {theme.label} + {/each} + + diff --git a/src/lib/state.svelte.ts b/src/lib/state.svelte.ts new file mode 100644 index 00000000..dbbf2e09 --- /dev/null +++ b/src/lib/state.svelte.ts @@ -0,0 +1 @@ +export let settingsOpen = $state({ current: false }); diff --git a/src/lib/state.ts b/src/lib/stores.ts similarity index 50% rename from src/lib/state.ts rename to src/lib/stores.ts index a6e7d119..989bc1aa 100644 --- a/src/lib/state.ts +++ b/src/lib/stores.ts @@ -2,7 +2,21 @@ import { persisted } from 'svelte-persisted-store'; export const preferencesStore = persisted('preferences', { experimentalFeatures: false, - open: 'tab' + open: 'tab', + theme: 'dark', + panic: { + enabled: false, + key: '`', + url: 'https://classroom.google.com', + disableExperimentalMode: true + }, + cloak: { + mode: 'off', + name: 'Home', + icon: 'https://ssl.gstatic.com/classroom/favicon.png' + }, + analytics: true, + history: true }); export const favoritesStore = persisted('favorites', [] as string[]); diff --git a/src/lib/theme.ts b/src/lib/theme.ts new file mode 100644 index 00000000..5d863576 --- /dev/null +++ b/src/lib/theme.ts @@ -0,0 +1,41 @@ +export const themes = [ + { value: 'shadcn-zinc-light', label: 'Shadcn Zinc Light' }, + { value: 'shadcn-zinc-dark', label: 'Shadcn Zinc Dark' }, + { value: 'black', label: 'Black' }, + { value: 'catppuccin-latte', label: 'Catppuccin Latte' }, + { value: 'catppuccin-frappe', label: 'Catppuccin Frappe' }, + { value: 'catppuccin-macchiato', label: 'Catppuccin Macchiato' }, + { value: 'catppuccin-mocha', label: 'Catppuccin Mocha' }, + { value: 'gruvbox-light', label: 'Gruvbox Light' }, + { value: 'gruvbox-dark', label: 'Gruvbox Dark' }, + { value: 'solarised', label: 'Solarised' }, + { value: 'github', label: 'GitHub' }, + { value: 'terminal', label: 'Terminal' }, + { value: 'material-red', label: 'Material Red' }, + { value: 'material-green', label: 'Material Green' }, + { value: 'material-blue', label: 'Material Blue' }, + { value: 'material-yellow', label: 'Material Yellow' }, + { value: 'shadcn-slate-light', label: 'Shadcn Slate Light' }, + { value: 'shadcn-slate-dark', label: 'Shadcn Slate Dark' }, + { value: 'shadcn-stone-light', label: 'Shadcn Stone Light' }, + { value: 'shadcn-stone-dark', label: 'Shadcn Stone Dark' }, + { value: 'shadcn-gray-light', label: 'Shadcn Gray Light' }, + { value: 'shadcn-gray-dark', label: 'Shadcn Gray Dark' }, + { value: 'shadcn-neutral-light', label: 'Shadcn Neutral Light' }, + { value: 'shadcn-neutral-dark', label: 'Shadcn Neutral Dark' }, + { value: 'shadcn-red-light', label: 'Shadcn Red Light' }, + { value: 'shadcn-red-dark', label: 'Shadcn Red Dark' }, + { value: 'shadcn-rose-light', label: 'Shadcn Rose Light' }, + { value: 'shadcn-rose-dark', label: 'Shadcn Rose Dark' }, + { value: 'shadcn-orange-light', label: 'Shadcn Orange Light' }, + { value: 'shadcn-orange-dark', label: 'Shadcn Orange Dark' }, + { value: 'shadcn-green-light', label: 'Shadcn Green Light' }, + { value: 'shadcn-green-dark', label: 'Shadcn Green Dark' }, + { value: 'shadcn-blue-light', label: 'Shadcn Blue Light' }, + { value: 'shadcn-blue-dark', label: 'Shadcn Blue Dark' }, + { value: 'shadcn-yellow-light', label: 'Shadcn Yellow Light' }, + { value: 'shadcn-yellow-dark', label: 'Shadcn Yellow Dark' }, + { value: 'shadcn-violet-light', label: 'Shadcn Violet Light' }, + { value: 'shadcn-violet-dark', label: 'Shadcn Violet Dark' }, + { value: 'google-classroom', label: 'Google Classroom :)' } +]; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 78023954..74009e5e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -13,12 +13,18 @@ // Third-party utilities import { ModeWatcher } from 'mode-watcher'; + import clsx from 'clsx'; + + import { preferencesStore } from '$lib/stores'; EduTools + +
+ @@ -26,6 +32,5 @@ {@render children()} - diff --git a/src/routes/g/[id]/+page.svelte b/src/routes/g/[id]/+page.svelte index ef63a3d1..446caf4b 100644 --- a/src/routes/g/[id]/+page.svelte +++ b/src/routes/g/[id]/+page.svelte @@ -7,14 +7,15 @@ import { toast } from 'svelte-sonner'; // Icons + import Refresh from 'lucide-svelte/icons/refresh-cw'; import Fullscreen from 'lucide-svelte/icons/maximize'; import OpenInNewTab from 'lucide-svelte/icons/external-link'; import Share from 'lucide-svelte/icons/share'; - import Star from 'lucide-svelte/icons/star'; + import Bookmark from 'lucide-svelte/icons/bookmark'; // App imports import { getGameById } from '$lib/gmaes'; - import { preferencesStore, favoritesStore } from '$lib/state.js'; + import { preferencesStore, favoritesStore } from '$lib/stores'; function openNewTab(url: string) { url = location.origin + url; @@ -50,31 +51,39 @@

{gmaedata?.name}

{gmaedata?.description}

-
+
+
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png new file mode 100644 index 00000000..daf079c4 Binary files /dev/null and b/static/apple-touch-icon.png differ diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 00000000..0a66a7e3 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/favicon.png b/static/favicon.png index 825b9e65..85ec093c 100644 Binary files a/static/favicon.png and b/static/favicon.png differ diff --git a/static/icon-192-maskable.png b/static/icon-192-maskable.png new file mode 100644 index 00000000..9248a32d Binary files /dev/null and b/static/icon-192-maskable.png differ diff --git a/static/icon-192.png b/static/icon-192.png new file mode 100644 index 00000000..85ec093c Binary files /dev/null and b/static/icon-192.png differ diff --git a/static/icon-512-maskable.png b/static/icon-512-maskable.png new file mode 100644 index 00000000..fbb27000 Binary files /dev/null and b/static/icon-512-maskable.png differ diff --git a/static/icon-512.png b/static/icon-512.png new file mode 100644 index 00000000..ae873491 Binary files /dev/null and b/static/icon-512.png differ