Add file viewer branding options

svelte/src/util/Konami.svelte

@@ -0,0 +1,31 @@
+<script>
+let sequence = [
+	"ArrowUp",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowLeft",
+	"ArrowRight",
+	"b",
+	"a",
+]
+let index = 0
+
+const keypress = e => {
+	if (e.key === sequence[index]) {
+		index++
+	} else {
+		index = 0
+	}
+
+	if (index === sequence.length) {
+		index = 0
+		let audio = new Audio("/res/misc/amogus.opus")
+		audio.play()
+	}
+}
+</script>
+
+<svelte:window on:keydown={keypress} />

svelte/src/util/SuccessMessage.svelte

@@ -0,0 +1,18 @@
+<script>
+let s = false
+let m = ""
+
+export const set = (success, message) => {
+	s = success
+	m = message
+}
+export const clear = () => {
+	m = ""
+}
+</script>
+
+{#if m}
+	<div class:highlight_green={s} class:highlight_red={!s}>
+		{m}
+	</div>
+{/if}

svelte/src/util/ThemePicker.svelte

@@ -0,0 +1,53 @@
+<script>
+import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher()
+
+export let theme = ""
+let set = s => {
+	theme = s
+	dispatch("theme_change", theme)
+}
+
+</script>
+
+<div class="center">
+	<button class:button_highlight={theme===""} on:click={() => {set("")}}>
+		None
+	</button>
+	<button class:button_highlight={theme==="default"} on:click={() => {set("default")}}>
+		Default (purple)
+	</button>
+	<button class:button_highlight={theme==="classic"} on:click={() => {set("classic")}}>
+		Classic
+	</button>
+	<button class:button_highlight={theme==="solarized_dark"} on:click={() => {set("solarized_dark")}}>
+		Solarized
+	</button>
+	<button class:button_highlight={theme==="maroon"} on:click={() => {set("maroon")}}>
+		Maroon
+	</button>
+	<button class:button_highlight={theme==="hacker"} on:click={() => {set("hacker")}}>
+		Hacker
+	</button>
+	<button class:button_highlight={theme==="canta"} on:click={() => {set("canta")}}>
+		Canta
+	</button>
+	<button class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
+		Nord
+	</button>
+	<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
+		Snowstorm
+	</button>
+	<button class:button_highlight={theme==="deepsea"} on:click={() => {set("deepsea")}}>
+		Deep sea
+	</button>
+	<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
+		Skeuos
+	</button>
+</div>
+
+<style>
+.center {
+	text-align: center;
+}
+</style>