diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte index 0941dc55..5da5f5ea 100644 --- a/src/svelte-interface/components/TabbedContainer.svelte +++ b/src/svelte-interface/components/TabbedContainer.svelte @@ -72,7 +72,7 @@ >
{#each tabs as { Content, props }, index} -
diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index 35f9869e..8705ac3c 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -13,6 +13,24 @@ import ColourPicker from '../components/ColourPicker.svelte' import { settingsPopup } from '../hooks/SettingsPopup' + let devModeSequence = ''; + + const handleDevModeToggle = () => { + const handleKeyDown = (event: KeyboardEvent) => { + devModeSequence += event.key.toLowerCase(); + if (devModeSequence.includes('dev')) { + document.removeEventListener('keydown', handleKeyDown); + settingsState.devMode = true; + alert('Dev mode is now enabled'); + } + }; + + document.addEventListener('keydown', handleKeyDown); + setTimeout(() => { + document.removeEventListener('keydown', handleKeyDown); + devModeSequence = ''; + }, 10000); + }; const openColourPicker = () => { showColourPicker = true; @@ -47,8 +65,13 @@
- Light logo - + + + Light logo + + + +
diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte index 87a9a44c..155313d9 100644 --- a/src/svelte-interface/pages/settings/general.svelte +++ b/src/svelte-interface/pages/settings/general.svelte @@ -148,4 +148,16 @@ ] as option} {@render Setting(option)} {/each} + + {#if $settingsState.devMode} +
+
+

Developer Mode

+

Enables developer mode, allowing you to test new features and changes.

+
+
+ settingsState.devMode = isOn} /> +
+
+ {/if}
\ No newline at end of file