diff --git a/website/src/app.html b/website/src/app.html index 123d0b6..e74ddd6 100644 --- a/website/src/app.html +++ b/website/src/app.html @@ -8,8 +8,18 @@ %sveltekit.head% + + +
%sveltekit.body%
diff --git a/website/src/lib/components/MapControls.svelte b/website/src/lib/components/MapControls.svelte index ea2c690..0172f79 100644 --- a/website/src/lib/components/MapControls.svelte +++ b/website/src/lib/components/MapControls.svelte @@ -6,11 +6,11 @@ let { showDropdown = true } = $props<{ showDropdown?: boolean }>(); const legendItems = $derived([ - { label: 'Harmful (80+ dB)', color: themeState.isColorBlindFriendly ? '#e66100' : '#f38ba8' }, - { label: 'Disruptive (65-79 dB)', color: themeState.isColorBlindFriendly ? '#ffb000' : '#fab387' }, - { label: 'Manageable (55-64 dB)', color: themeState.isColorBlindFriendly ? '#f0e442' : '#f9e2af' }, - { label: 'Great (40-54 dB)', color: themeState.isColorBlindFriendly ? '#56b4e9' : '#94e2d5' }, - { label: 'Ideal (0-39 dB)', color: themeState.isColorBlindFriendly ? '#0072b2' : '#89b4fa' } + { label: 'Harmful (80+ dB)', color: themeState.isColorBlindFriendly ? '#e66100' : (themeState.isLight ? '#d20f39' : '#f38ba8') }, + { label: 'Disruptive (65-79 dB)', color: themeState.isColorBlindFriendly ? '#ffb000' : (themeState.isLight ? '#fe640b' : '#fab387') }, + { label: 'Manageable (55-64 dB)', color: themeState.isColorBlindFriendly ? '#f0e442' : (themeState.isLight ? '#df8e1d' : '#f9e2af') }, + { label: 'Great (40-54 dB)', color: themeState.isColorBlindFriendly ? '#56b4e9' : (themeState.isLight ? '#179299' : '#94e2d5') }, + { label: 'Ideal (0-39 dB)', color: themeState.isColorBlindFriendly ? '#0072b2' : (themeState.isLight ? '#1e66f5' : '#89b4fa') } ]); diff --git a/website/src/routes/layout.css b/website/src/routes/layout.css index 0175be1..2f47305 100644 --- a/website/src/routes/layout.css +++ b/website/src/routes/layout.css @@ -15,41 +15,41 @@ --color-neon-primary: #f38ba8; --color-neon-alert: #f38ba8; --color-neon-blue: #f38ba8; - --color-panel-glass: rgba(24, 24, 37, 0.7); /* Mantle Glass */ + --color-panel-glass: rgba(24, 24, 37, 0.7); + - /* Glowing effects around elements */ --shadow-glow-primary: 0 0 15px rgba(243, 139, 168, 0.4); --shadow-glow-alert: 0 0 15px rgba(243, 139, 168, 0.4); --shadow-glow-blue: 0 0 15px rgba(243, 139, 168, 0.4); } .light-theme { - --color-crust: #ffffff; /* Pure white background */ - --color-mantle: #cdd6f4; - --color-base: #bac2de; - --color-surface0: #9399b2; /* Darker buttons */ - --color-surface1: #7f849c; - --color-surface2: #6c7086; - --color-red: #e07290; - --color-neon-primary: #e07290; /* Darker Pink */ - --color-neon-alert: #f38ba8; - --color-neon-blue: #e07290; /* Darker Pink Accent */ - --color-panel-glass: rgba(255, 255, 255, 0.95); /* Bright White Glass for sidebar */ - color: #585b70 !important; /* Darkest Text */ + --color-crust: #dce0e8; + --color-mantle: #e6e9ef; + --color-base: #eff1f5; + --color-surface0: #ccd0da; + --color-surface1: #bcc0cc; + --color-surface2: #acb0be; + --color-red: #d20f39; + --color-neon-primary: #ea76cb; + --color-neon-alert: #e64553; + --color-neon-blue: #fe640b; + --color-panel-glass: rgba(239, 241, 245, 0.9); + color: #4c4f69 !important; } -/* Override text colors globally for light mode */ + .light-theme .text-white, .light-theme .text-slate-200, .light-theme .text-slate-300, .light-theme .text-slate-400, .light-theme .text-slate-500 { - color: #585b70 !important; + color: #4c4f69 !important; } -/* Color Blind (Protanopia/Deuteranopia safe swaps) */ + :root.color-blind { --color-neon-primary: #ffb86c; --color-neon-blue: #8be9fd; } -/* High Contrast: Pitch black backgrounds and pure white texts */ + :root.high-contrast { --color-crust: #000000; --color-mantle: #0a0a0a; @@ -63,13 +63,13 @@ } .light-theme border-white { - border-color: rgba(88, 91, 112, 0.1); + border-color: rgba(76, 79, 105, 0.1); } .light-theme .border-white\/5, .light-theme .border-white\/10, .light-theme .border-white\/20 { - border-color: rgba(88, 91, 112, 0.15); + border-color: rgba(76, 79, 105, 0.15); } @utility glass-panel { diff --git a/website/src/routes/settings/+page.svelte b/website/src/routes/settings/+page.svelte index 2c33fb0..7a4a89b 100644 --- a/website/src/routes/settings/+page.svelte +++ b/website/src/routes/settings/+page.svelte @@ -5,19 +5,43 @@ function handleLightModeClick() { themeState.toggle(); } + + const supportedLanguages = [ + { code: 'en', name: 'English' }, + { code: 'es', name: 'Spanish' }, + { code: 'fr', name: 'French' }, + { code: 'de', name: 'German' }, + { code: 'zh-CN', name: 'Chinese (Simplified)' }, + { code: 'ja', name: 'Japanese' }, + { code: 'ko', name: 'Korean' }, + { code: 'hi', name: 'Hindi' }, + { code: 'ar', name: 'Arabic' } + ]; + + let currentLang = $state('en'); + + $effect(() => { + const match = document.cookie.match(/googtrans=\/en\/([^;]+)/); + if (match && match[1]) { + currentLang = match[1]; + } + }); + + function handleLanguageChange(event: Event) { + const langCode = (event.target as HTMLSelectElement).value; + if (langCode === 'en') { + document.cookie = 'googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; + document.cookie = `googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; domain=.${location.hostname}; path=/;`; + } else { + document.cookie = `googtrans=/en/${langCode}; path=/`; + document.cookie = `googtrans=/en/${langCode}; domain=.${location.hostname}; path=/`; + } + window.location.reload(); + } EchoNode | Settings - -
@@ -86,8 +110,26 @@

Global Translation

-
-
+
+ +
+ + + +
+ +
+