Hackathons/HushMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

acessibility + light mode fix

Browse Source
This commit is contained in:
sameeranageshwar
2026-04-11 20:48:43 -04:00
parent 560d2bfd68
commit 53c67d569a
4 changed files with 88 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/app.html
+10
View File
@@ -8,8 +8,18 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
%sveltekit.head% %sveltekit.head%
<script type="text/javascript">
window.googleTranslateElementInit = function() {
new window.google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false
}, 'google_translate_element');
};
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head> </head>
<body data-sveltekit-preload-data="hover" class="bg-black text-slate-200 font-sans antialiased selection:bg-neon-primary/30 selection:text-neon-primary"> <body data-sveltekit-preload-data="hover" class="bg-black text-slate-200 font-sans antialiased selection:bg-neon-primary/30 selection:text-neon-primary">
<div id="google_translate_element" style="display:none;"></div>
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>
website/src/lib/components/MapControls.svelte
+5 -5
View File
@@ -6,11 +6,11 @@
let { showDropdown = true } = $props<{ showDropdown?: boolean }>(); let { showDropdown = true } = $props<{ showDropdown?: boolean }>();
const legendItems = $derived([ const legendItems = $derived([
{ label: 'Harmful (80+ dB)', color: themeState.isColorBlindFriendly ? '#e66100' : '#f38ba8' }, { label: 'Harmful (80+ dB)', color: themeState.isColorBlindFriendly ? '#e66100' : (themeState.isLight ? '#d20f39' : '#f38ba8') },
{ label: 'Disruptive (65-79 dB)', color: themeState.isColorBlindFriendly ? '#ffb000' : '#fab387' }, { label: 'Disruptive (65-79 dB)', color: themeState.isColorBlindFriendly ? '#ffb000' : (themeState.isLight ? '#fe640b' : '#fab387') },
{ label: 'Manageable (55-64 dB)', color: themeState.isColorBlindFriendly ? '#f0e442' : '#f9e2af' }, { label: 'Manageable (55-64 dB)', color: themeState.isColorBlindFriendly ? '#f0e442' : (themeState.isLight ? '#df8e1d' : '#f9e2af') },
{ label: 'Great (40-54 dB)', color: themeState.isColorBlindFriendly ? '#56b4e9' : '#94e2d5' }, { label: 'Great (40-54 dB)', color: themeState.isColorBlindFriendly ? '#56b4e9' : (themeState.isLight ? '#179299' : '#94e2d5') },
{ label: 'Ideal (0-39 dB)', color: themeState.isColorBlindFriendly ? '#0072b2' : '#89b4fa' } { label: 'Ideal (0-39 dB)', color: themeState.isColorBlindFriendly ? '#0072b2' : (themeState.isLight ? '#1e66f5' : '#89b4fa') }
]); ]);
</script> </script>
website/src/routes/layout.css
+20 -20
View File
@@ -15,41 +15,41 @@
--color-neon-primary: #f38ba8; --color-neon-primary: #f38ba8;
--color-neon-alert: #f38ba8; --color-neon-alert: #f38ba8;
--color-neon-blue: #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-primary: 0 0 15px rgba(243, 139, 168, 0.4);
--shadow-glow-alert: 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); --shadow-glow-blue: 0 0 15px rgba(243, 139, 168, 0.4);
} }
.light-theme { .light-theme {
--color-crust: #ffffff; /* Pure white background */ --color-crust: #dce0e8;
--color-mantle: #cdd6f4; --color-mantle: #e6e9ef;
--color-base: #bac2de; --color-base: #eff1f5;
--color-surface0: #9399b2; /* Darker buttons */ --color-surface0: #ccd0da;
--color-surface1: #7f849c; --color-surface1: #bcc0cc;
--color-surface2: #6c7086; --color-surface2: #acb0be;
--color-red: #e07290; --color-red: #d20f39;
--color-neon-primary: #e07290; /* Darker Pink */ --color-neon-primary: #ea76cb;
--color-neon-alert: #f38ba8; --color-neon-alert: #e64553;
--color-neon-blue: #e07290; /* Darker Pink Accent */ --color-neon-blue: #fe640b;
--color-panel-glass: rgba(255, 255, 255, 0.95); /* Bright White Glass for sidebar */ --color-panel-glass: rgba(239, 241, 245, 0.9);
color: #585b70 !important; /* Darkest Text */ 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 { .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 { :root.color-blind {
--color-neon-primary: #ffb86c; --color-neon-primary: #ffb86c;
--color-neon-blue: #8be9fd; --color-neon-blue: #8be9fd;
} }
/* High Contrast: Pitch black backgrounds and pure white texts */
:root.high-contrast { :root.high-contrast {
--color-crust: #000000; --color-crust: #000000;
--color-mantle: #0a0a0a; --color-mantle: #0a0a0a;
@@ -63,13 +63,13 @@
} }
.light-theme border-white { .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\/5,
.light-theme .border-white\/10, .light-theme .border-white\/10,
.light-theme .border-white\/20 { .light-theme .border-white\/20 {
border-color: rgba(88, 91, 112, 0.15); border-color: rgba(76, 79, 105, 0.15);
} }
@utility glass-panel { @utility glass-panel {
website/src/routes/settings/+page.svelte
+53 -11
View File
@@ -5,19 +5,43 @@
function handleLightModeClick() { function handleLightModeClick() {
themeState.toggle(); 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();
}
</script> </script>
<svelte:head> <svelte:head>
<title>EchoNode | Settings</title> <title>EchoNode | Settings</title>
<script>
window.googleTranslateElementInit = function() {
new window.google.translate.TranslateElement({
pageLanguage: 'en',
layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
};
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async defer></script>
</svelte:head> </svelte:head>
<div class="relative w-full h-full bg-crust border-l border-white/5 p-6 md:p-12 overflow-y-auto duration-500 transition-colors"> <div class="relative w-full h-full bg-crust border-l border-white/5 p-6 md:p-12 overflow-y-auto duration-500 transition-colors">
@@ -86,8 +110,26 @@
<h3 class="font-display font-medium text-white text-lg flex items-center gap-2"><Icon icon="mdi:translate" class="text-neon-primary" /> Global Translation</h3> <h3 class="font-display font-medium text-white text-lg flex items-center gap-2"><Icon icon="mdi:translate" class="text-neon-primary" /> Global Translation</h3>
</div> </div>
<div class="shrink-0 p-2 bg-surface0 border border-white/10 rounded-xl overflow-hidden min-h-[44px] flex items-center justify-center"> <div class="shrink-0 p-2 min-h-[44px] flex items-center justify-center">
<div id="google_translate_element" class="scale-90 origin-right"></div> <!-- Custom Styled Dropdown -->
<div class="glass-panel rounded-xl border border-white/10 overflow-hidden flex flex-col w-48 transition-all hover:border-neon-primary/40 bg-surface0 relative">
<select
bind:value={currentLang}
class="bg-transparent font-display text-sm md:text-base p-3 border-none outline-none focus:ring-0 cursor-pointer w-full font-medium"
style="color: {themeState.isLight ? '#4c4f69' : '#ffffff'} !important; appearance: none; -webkit-appearance: none;"
onchange={handleLanguageChange}
>
<option value="en" class="bg-crust" style="color: {themeState.isLight ? '#4c4f69' : '#ffffff'} !important;">English</option>
{#each supportedLanguages.filter(l => l.code !== 'en') as lang}
<option value={lang.code} class="bg-crust" style="color: {themeState.isLight ? '#4c4f69' : '#ffffff'} !important;">{lang.name}</option>
{/each}
</select>
<!-- Dropdown Arrow -->
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
<Icon icon="mdi:chevron-down" style="color: {themeState.isLight ? '#4c4f69' : '#ffffff'} !important;" />
</div>
</div>
</div> </div>
</div> </div>
</section> </section>