bump to version v0.0.11

Co-authored-by: 2mal3 <56305732+2mal3@users.noreply.github.com>

README.md

@@ -6,14 +6,7 @@ Open source solution for advanced remote control and coordination of one or more
 
 ## Display Requirements
 
-- Linux
-- Bash
-- Chromium
-- LibreOffice (optional, presentation view)
-- Xreader (optional, pdf view)
-- ImageMagick (optional, image preview)
-- ffmpeg (optional, video preview)
-- Ghostscript (optional, pdf preview)
+See [packages in the NixOS config](https://github.com/PLG-Development/PLG-MuDiCS/blob/b0a57f9c679e8c483d1a81cb3c749cf8555785f6/nixos/configuration.nix#L86).
 
 ## Contributing
 

control/frontend/src/app.css

@@ -26,7 +26,7 @@
 	}
 }
 
-main {
+html {
 	scrollbar-width: thin;
 	scrollbar-color: var(--color-stone-300) transparent;
 }

control/frontend/src/lib/ts/api_handler.ts

@@ -22,7 +22,10 @@ export async function open_file(ip: string, path_to_file: string): Promise<void>
 	await request_display(ip, get_sanitized_file_url(path_to_file), options);
 }
 
-export async function send_keyboard_input(ip: string, inputs: { key: string; action: 'press' | 'release'}[]): Promise<void> {
+export async function send_keyboard_input(
+	ip: string,
+	inputs: { key: string; action: 'press' | 'release' }[]
+): Promise<void> {
 	const options = {
 		method: 'PATCH',
 		headers: { 'content-type': 'application/json' },
@@ -294,7 +297,7 @@ async function run_shell_command(ip: string, command: string): Promise<RequestRe
 }
 
 export async function shutdown(ip: string): Promise<RequestResponse> {
-	return await run_shell_command(ip, 'shutdown -h now');
+	return await run_shell_command(ip, 'xfce4-session-logout --halt');
 }
 
 export async function startup(mac: string): Promise<RequestResponse> {

control/frontend/src/lib/ts/file_transfer_handler.ts

@@ -199,19 +199,10 @@ function generate_valid_file_name(original_file_name: string, used_file_names: s
 
 async function upload(task: FileTransferTask): Promise<void> {
 	const task_data = task.data;
-	if (task_data.type !== 'upload' || !task_data.file) return console.warn('Task cancelled: wrong task type:', task);
+	if (task_data.type !== 'upload' || !task_data.file)
+		return console.warn('Task cancelled: wrong task type:', task);
 
 	await upload_file_via_xhr(task, task.display, task_data.file);
-
-	// Generate Thumbnail if not done already
-	setTimeout(async () => {
-		const inode_element: Inode | undefined = await db.files.get(
-			JSON.parse(task.file_primary_key) as [string, string, number, string]
-		);
-		if (!!inode_element && inode_element.thumbnail === null) {
-			await generate_thumbnail(task.display.ip, task.path, inode_element);
-		}
-	}, 10);
 }
 
 export async function sync(task: FileTransferTask) {
@@ -271,7 +262,8 @@ export async function download_file(selected_file_id: string, selected_display_i
 		selected_file_id,
 		selected_display_ids
 	);
-	if (!file_data || file_data.file.type === 'inode/directory') return console.warn('Download cancelled: is folder');
+	if (!file_data || file_data.file.type === 'inode/directory')
+		return console.warn('Download cancelled: is folder');
 
 	try {
 		const url = `http://${file_data.short_display_with_file.ip}:1323/api${get_sanitized_file_url(file_data.file.path + file_data.file.name)}`;
@@ -305,8 +297,7 @@ async function start_task_loop() {
 		const current_task = tasks[0];
 		if (current_task.data.type === 'upload') {
 			await upload(current_task);
-		}
-		else if (current_task.data.type === 'sync') {
+		} else if (current_task.data.type === 'sync') {
 			await sync(current_task);
 		}
 		tasks.shift(); // Remove current_task from tasks
@@ -314,8 +305,13 @@ async function start_task_loop() {
 	is_processing = false;
 }
 
-async function upload_file_via_xhr(task: FileTransferTask, current_short_display: ShortDisplay, current_file: File) {
+async function upload_file_via_xhr(
+	task: FileTransferTask,
+	current_short_display: ShortDisplay,
+	current_file: File
+) {
 	const start_time = new Date();
+	const loading_type = task.data.type === 'upload' ? 'upload' : 'sync_upload';
 
 	return new Promise<void>((resolve) => {
 		const xhr = new XMLHttpRequest();
@@ -328,7 +324,13 @@ async function upload_file_via_xhr(task: FileTransferTask, current_short_display
 
 		xhr.upload.onprogress = (e) => {
 			const apply = async () => {
-				await update_current_loading_data(task.data.type === 'upload' ? 'upload' : 'sync_upload', task, e.loaded, start_time, current_short_display.id);
+				await update_current_loading_data(
+					loading_type,
+					task,
+					e.loaded,
+					start_time,
+					current_short_display.id
+				);
 			};
 			apply();
 		};
@@ -341,9 +343,20 @@ async function upload_file_via_xhr(task: FileTransferTask, current_short_display
 		xhr.onreadystatechange = async () => {
 			if (xhr.readyState === 4) {
 				if (xhr.status == 200) {
-					await db.files_on_display.update([current_short_display.ip, task.file_primary_key], {
+					// set loading_data to 100%
+					await db.files_on_display.update([current_short_display.id, task.file_primary_key], {
+						date_created: new Date(),
 						loading_data: null
-					}); // TODO: Stattdessen update machen und gucken, ob die Datei wirklich da ist
+					});
+					// Generate Thumbnail if not done already
+					setTimeout(async () => {
+						const inode_element: Inode | undefined = await db.files.get(
+							JSON.parse(task.file_primary_key) as [string, string, number, string]
+						);
+						if (!!inode_element && inode_element.thumbnail === null) {
+							await generate_thumbnail(task.display.ip, task.path, inode_element);
+						}
+					}, 10);
 				} else {
 					await show_error(task, `HTTP ${xhr.status}`);
 				}
@@ -352,21 +365,33 @@ async function upload_file_via_xhr(task: FileTransferTask, current_short_display
 		};
 
 		xhr.send(current_file);
-	})
+	});
 }
 
-async function update_current_loading_data(type: FileLoadingData['type'], task: FileTransferTask, current_bytes: number, start_time: Date, other_display_id: string | null = null) {
-	const current_percentage = task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1;
+async function update_current_loading_data(
+	type: FileLoadingData['type'],
+	task: FileTransferTask,
+	current_bytes: number,
+	start_time: Date,
+	other_display_id: string | null = null
+) {
+	const current_percentage = Math.min(
+		task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1,
+		99
+	); // calculate percantage, but maximum value is 99%
 	const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
 
-	await db.files_on_display.update([other_display_id ? other_display_id : task.display.id, task.file_primary_key], {
-		loading_data: {
-			type,
-			percentage: current_percentage,
-			bytes_per_second: prognosed_data.bytes_per_second,
-			seconds_until_finish: prognosed_data.seconds_until_finish
+	await db.files_on_display.update(
+		[other_display_id ? other_display_id : task.display.id, task.file_primary_key],
+		{
+			loading_data: {
+				type,
+				percentage: current_percentage,
+				bytes_per_second: prognosed_data.bytes_per_second,
+				seconds_until_finish: prognosed_data.seconds_until_finish
+			}
 		}
-	});
+	);
 }
 
 function get_prognosed_data(

control/frontend/src/lib/ts/stores/displays.ts

@@ -5,6 +5,7 @@ import { get_uuid, image_content_hash } from '../utils';
 import { get_screenshot } from '../api_handler';
 import { delete_and_deselect_unique_files_from_display } from './files';
 import { db } from '../database';
+import { dev } from '$app/environment';
 
 export async function is_display_name_taken(name: string): Promise<boolean> {
 	const exists = await db.displays.where('name').equals(name).first();
@@ -190,8 +191,10 @@ export async function set_new_display_group_order(new_ordered_items: DisplayGrou
 	}
 }
 
-setTimeout(add_testing_displays, 0);
-async function add_testing_displays() {
-	await add_display('127.0.0.1', '00:1A:2B:3C:4D:5E', 'PC', 'host_offline');
-	// await add_display("192.168.178.111", "D4:81:D7:C0:DF:3C", "Laptop", "host_offline");
+if (dev) {
+	setTimeout(add_testing_displays, 0);
+	async function add_testing_displays() {
+		await add_display('127.0.0.1', '00:1A:2B:3C:4D:5E', 'PC', 'host_offline');
+		// await add_display("192.168.178.111", "D4:81:D7:C0:DF:3C", "Laptop", "host_offline");
+	}
 }

control/frontend/src/lib/ts/stores/files.ts

@@ -211,17 +211,30 @@ export async function update_folder_elements_recursively(
 	const new_folder_elements = await get_file_data(display.ip, file_path);
 	if (!new_folder_elements) return;
 
-	const existing_file_keys_on_display_in_path: [string, string, number, string][] = (
-		await db.files_on_display.where('display_id').equals(display.id).toArray()
-	).map((e) => JSON.parse(e.file_primary_key) as [string, string, number, string]);
-	const existing_files_on_display_in_path: Inode[] = await db.files
+	const existing_files_on_display_in_path: FileOnDisplay[] = await db.files_on_display
+		.where('display_id')
+		.equals(display.id)
+		.toArray();
+	const existing_file_keys_on_display_in_path: [string, string, number, string][] =
+		existing_files_on_display_in_path.map(
+			(e) => JSON.parse(e.file_primary_key) as [string, string, number, string]
+		);
+	const existing_files: Inode[] = await db.files
 		.where('[path+name+size+type]')
 		.anyOf(existing_file_keys_on_display_in_path)
 		.filter((e) => e.path === file_path)
 		.toArray();
 
+	const existing_files_with_loading_state: { folder_element: Inode; is_loading: boolean }[] =
+		existing_files.map((folder_element) => ({
+			folder_element,
+			is_loading: !!existing_files_on_display_in_path.find(
+				(e) => e.file_primary_key === get_file_primary_key(folder_element)
+			)?.loading_data
+		}));
+
 	const diff = get_folder_elements_difference(
-		existing_files_on_display_in_path,
+		existing_files_with_loading_state,
 		new_folder_elements
 	);
 
@@ -262,13 +275,15 @@ export async function update_folder_elements_recursively(
 }
 
 function get_folder_elements_difference(
-	old_elements: Inode[],
+	old_elements: { folder_element: Inode; is_loading: boolean }[],
 	new_elements: { folder_element: Inode; date_created: Date }[]
 ): { deleted: Inode[]; new: { folder_element: Inode; date_created: Date }[] } {
-	const old_keys = new Set(old_elements.map((e) => get_file_primary_key(e)));
+	const old_keys = new Set(old_elements.map((e) => get_file_primary_key(e.folder_element)));
 	const new_keys = new Set(new_elements.map((e) => get_file_primary_key(e.folder_element)));
 
-	const only_in_old = old_elements.filter((e) => !new_keys.has(get_file_primary_key(e)));
+	const only_in_old = old_elements
+		.filter((e) => !new_keys.has(get_file_primary_key(e.folder_element)) && !e.is_loading)
+		.map((e) => e.folder_element);
 	const only_in_new = new_elements.filter(
 		(e) => !old_keys.has(get_file_primary_key(e.folder_element))
 	);

control/frontend/src/routes/+layout.svelte

@@ -1,10 +1,29 @@
 <script lang="ts">
 	import '../app.css';
 	import Notification from './Notification.svelte';
+	import SplashScreen from './../../../../shared/splash_screen.html?raw';
+	import version from './../../../../shared/version.txt?raw';
+	import { dev } from '$app/environment';
 
 	let { children } = $props();
+
+	let versionSplashScreen = SplashScreen.replaceAll('%%APP-VERSION%%', version.trim());
 </script>
 
+<svelte:head>
+	<title>PLG MuDiCS Control</title>
+</svelte:head>
+
+{#if !dev}
+	{@html versionSplashScreen}
+{/if}
+
 {@render children()}
 
 <Notification />
+
+<style>
+	:root {
+		--splash-fade-out-delay: 3.5s !important;
+	}
+</style>

control/frontend/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Monitor, Plus, Radio, Settings, Trash2, X } from 'lucide-svelte';
+	import { Monitor, Plus, Radio, Settings, Trash2, Menu } from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
 	import FileView from './FileView.svelte';
 	import ControlView from './ControlView.svelte';
@@ -185,7 +185,7 @@
 	<TextInput
 		bind:current_value={text_inputs_valid.mac.value}
 		bind:current_valid={text_inputs_valid.mac.valid}
-		title="MAC-Adresse (optional)"
+		title="MAC-Adresse (optional, wird zum aufwecken des Displays benötigt)"
 		placeholder="z.B. D4:81:A6:C4:BF:3F"
 		is_valid_function={(input: string) => {
 			return input === ''
@@ -221,8 +221,6 @@
 {/snippet}
 
 <main class="bg-stone-900 h-dvh w-dvw text-stone-200 px-4 py-2 gap-2 grid grid-rows-[3rem_auto]">
-	<!-- {@html SplashScreen} -->
-
 	<div class="w-[calc(100dvw-(8*var(--spacing)))] flex justify-between">
 		<span class="text-4xl font-bold content-center pl-1"> PLG MuDiCS </span>
 		<Button
@@ -240,7 +238,7 @@
 				}
 			]}
 		>
-			<Settings></Settings>
+			<Menu />
 		</Button>
 	</div>
 	<div class="w-[calc(100dvw-(8*var(--spacing)))] grid grid-cols-2 gap-2">

control/frontend/src/routes/ControlView.svelte

@@ -162,11 +162,13 @@
 						}}><ArrowBigRight /></Button
 					>
 				</div>
+
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
 					disabled={$selected_display_ids.length === 0}
 					click_function={show_text_popup}><TextAlignStart /> Text anzeigen</Button
 				>
+
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
 					disabled={$selected_display_ids.length === 0}
@@ -174,14 +176,14 @@
 						await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
 					}}><Presentation />Blackout</Button
 				>
+
 				<div class="flex flex-row justify-normal">
-					<Button
-						className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
-						disabled={$selected_display_ids.length === 0}
-						><TrafficCone /> Fallback-Bild anzeigen</Button
-					>
-					<Button className="rounded-l-none flex grow-0 w-10"><ChevronDown /></Button>
+					<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal" disabled>
+						<TrafficCone /> Fallback-Bild anzeigen
+					</Button>
+					<Button className="rounded-l-none flex grow-0 w-10" disabled><ChevronDown /></Button>
 				</div>
+
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
 					disabled={$selected_display_ids.length === 0}
@@ -208,11 +210,10 @@
 						>
 					{/await}
 				</div>
-				<Button
-					className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
-					><SquareTerminal /> Shell-Befehl ausführen</Button
-				>
+				<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal" disabled>
+					<SquareTerminal />
+					Shell-Befehl ausführen
+				</Button>
 			</div>
 		</div>
 		<PopUp

control/frontend/src/routes/DisplayView.svelte

@@ -20,7 +20,7 @@
 	import Button from '$lib/components/Button.svelte';
 	import OnlineState from '../lib/components/OnlineState.svelte';
 	import { cubicOut } from 'svelte/easing';
-	import { Menu, Pencil, PinOff, Settings, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
+	import { Menu, Pencil, PinOff, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
@@ -256,9 +256,9 @@
 						{#if ($display_groups || []).length === 0}
 							<div class="text-stone-500 px-10 py-6 leading-relaxed text-center">
 								Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf
-								<HighlightedText fg="text-stone-450" className="p-1!"
-									><Settings class="inline pb-1" /></HighlightedText
-								>
+								<HighlightedText fg="text-stone-450" className="p-1!">
+									<Menu class="inline pb-1" />
+								</HighlightedText>
 								und
 								<HighlightedText fg="text-stone-450">Neuen Bildschirm hinzufügen</HighlightedText>.
 							</div>

control/frontend/src/routes/FileView.svelte

@@ -363,7 +363,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="min-h-0 h-full overflow-y-auto bg-stone-750 rounded-xl">
+		<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
 			<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
 				{#if $selected_display_ids.length === 0}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">

control/frontend/src/routes/Notification.svelte

@@ -29,7 +29,7 @@
 				>
 			</div>
 
-			<span class="whitespace-break-spaces max-h-[60vh] overflow-y-auto">{n.message}</span>
+			<span class="max-h-[60vh] overflow-y-auto overflow-x-hidden whitespace-pre-line max-w-full break-normal wrap-anywhere">{n.message}</span>
 
 			<div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
 				<div class="block h-full w-full bg-white/80 origin-left animate-progress-bar"></div>

control/main.go

@@ -37,6 +37,9 @@ func main() {
 
 	e := echo.New()
 
+	// Allow requests from everywhere
+	e.Use(middleware.CORS())
+
 	// Serve the embedded SvelteKit frontend
 	e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
 		Filesystem: http.FS(frontend.BuildDirFS),
@@ -105,14 +108,17 @@ func wakeOnLanRoute(ctx echo.Context) error {
 	}
 	mac, err := net.ParseMAC(data.MACAddress)
 	if err != nil {
+		slog.Warn("Invalid MAC address provided", "mac_address", data.MACAddress, "error", err)
 		return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: "Invalid MAC address"})
 	}
 
 	client, err := wol.NewClient()
 	if err != nil {
+		slog.Error("Failed to create Wake-on-LAN client", "error", err)
 		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to create Wake-on-LAN client"})
 	}
-	if err := client.Wake("255.255.255.255", mac); err != nil {
+	if err := client.Wake("255.255.255.255:7", mac); err != nil {
+		slog.Error("Failed to send Wake-on-LAN packet", "error", err)
 		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to send Wake-on-LAN packet"})
 	}
 

display/main.go

@@ -9,8 +9,6 @@ import (
 	"plg-mudics/shared"
 )
 
-const VERSION = "0.1.0"
-
 //go:generate go tool templ generate
 
 func main() {
@@ -27,7 +25,7 @@ func main() {
 
 	// the order is important, the open browser command exitsts as soon as the winodw is closed
 	// and since its the last action in the main go func all other goroutines (e.g. the webserver) are killed
-	go web.StartWebServer(VERSION, port)
+	go web.StartWebServer(shared.Version, port)
 	err = shared.OpenBrowserWindow("http://localhost:"+port, true, true)
 	if err != nil {
 		slog.Error("Failed to open browser window", "error", err)

display/pkg/main.go

@@ -3,7 +3,6 @@ package pkg
 import (
 	"errors"
 	"fmt"
-	"log/slog"
 	"net"
 	"os"
 	"os/exec"
@@ -100,7 +99,6 @@ func TakeScreenshot() (string, error) {
 		if commandOutput.ExitCode == 0 {
 			return tempFilePath, nil
 		}
-		slog.Warn("Screenshot error", "error", commandOutput.Stderr)
 	}
 	return "", errors.New("no screenshot utility found or all failed")
 }

display/web/main.go

@@ -15,6 +15,7 @@ import (
 	"os/exec"
 	"path/filepath"
 	shared "plg-mudics/shared"
+	"strings"
 
 	"github.com/gabriel-vasile/mimetype"
 	"github.com/labstack/echo/v4"
@@ -35,7 +36,9 @@ func StartWebServer(v string, port string) {
 	e.GET("/", indexRoute)
 	e.GET("/sse", sseRoute)
 	e.GET("/splash", func(ctx echo.Context) error {
-		return ctx.HTML(http.StatusOK, shared.SplashScreenTemplate)
+		html := shared.SplashScreenTemplate
+		html = strings.ReplaceAll(html, "%%APP-VERSION%%", version)
+		return ctx.HTML(http.StatusOK, html)
 	})
 	e.GET("/qr", qrRoute)
 
@@ -325,7 +328,6 @@ func openFileRoute(ctx echo.Context) error {
 	err = resetView()
 	if err != nil {
 		slog.Error("Failed to reset view", "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to reset view"})
 	}
 
 	mType, err := mimetype.DetectFile(fullPath)
@@ -372,7 +374,6 @@ func showHTMLRoute(ctx echo.Context) error {
 	err := resetView()
 	if err != nil {
 		slog.Error("Failed to reset view", "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to reset view"})
 	}
 
 	sseConnection <- request.HTML

display/web/main.templ

@@ -1,16 +1,15 @@
 package web
 
 templ indexTemplate() {
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>PLG Connect Display</title>
-	<script src="/static/htmx.min.js"></script>
-	<script src="/static/htmx-ext-sse.min.js"></script>
-	<style>
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>PLG MuDiCS Display</title>
+			<script src="/static/htmx.min.js"></script>
+			<script src="/static/htmx-ext-sse.min.js"></script>
+			<style>
 		:root {
 			--background-color: black;
 			--foreground-color: oklch(92.3% 0.003 48.717);
@@ -33,6 +32,7 @@ templ indexTemplate() {
 			background-color: var(--background-color);
 			color: var(--foreground-color);
 			font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+			cursor: none;
 		}
 
 		video,
@@ -60,7 +60,7 @@ templ indexTemplate() {
 			padding-left: calc(var(--font-size)*1.5);
 		}
 	</style>
-	<script>
+			<script>
 		document.addEventListener('keydown', function (event) {
 			if (event.code === 'Space') {
 				event.preventDefault();
@@ -75,42 +75,45 @@ templ indexTemplate() {
 			}
 		});
 	</script>
-</head>
-<bod>
-	<div hx-get="/splash" hx-trigger="load"></div>
-	<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
-</bod>
-
-</html>
+		</head>
+		<bod>
+			<div hx-get="/splash" hx-trigger="load"></div>
+			<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
+		</bod>
+	</html>
 }
 
 templ videoTemplate(path string) {
-<video autoplay>
-	<source src={ "/api/file/" + path } type="video/mp4" />
-</video>
+	<video autoplay>
+		<source src={ "/api/file/" + path } type="video/mp4"/>
+	</video>
 }
 
 templ imageTemplate(path string) {
-<img src={ "/api/file/" + path } />
+	<img src={ "/api/file/" + path }/>
 }
 
 templ deviceInfoTemplate(ip string, mac string, showQR bool) {
-<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
-	<div
-		style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;">
-		{ ip }
-		<span style="text-transform: uppercase;">{ mac }</span>
-	</div>
-	if showQR {
-	<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
-		<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
-			<img style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
-				src={ "/qr?data=http://" + ip + ":8080" } alt="QR-Code" />
+	<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
+		<div
+			style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
+		>
+			{ ip }
+			<span style="text-transform: uppercase;">{ mac }</span>
 		</div>
+		if showQR {
+			<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
+				<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
+					<img
+						style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
+						src={ "/qr?data=http://" + ip + ":8080" }
+						alt="QR-Code"
+					/>
+				</div>
+			</div>
+		}
 	</div>
-	}
-</div>
-<style>
+	<style>
 	:root {
 		--splash-bg: transparent !important;
 		--splash-fade-out-state: paused !important;

nixos/configuration.nix

@@ -86,7 +86,7 @@
   environment.systemPackages = with pkgs; [
     # Programs
     libreoffice
-    #rustdesk
+    rustdesk
     ungoogled-chromium
     xfce.thunar-archive-plugin
     git
@@ -94,6 +94,8 @@
     unzip
     iputils
     xreader
+    tree
+    jq
 
     # Libraries
     imagemagick
@@ -137,6 +139,7 @@
     environment = {
       DISPLAY = ":0";
       XDG_RUNTIME_DIR = "/run/user/1000";
+      XDG_DATA_DIRS = "/run/current-system/sw/share";
     };
   };
 

nixos/flake.lock

@@ -7,32 +7,32 @@
         ]
       },
       "locked": {
-        "lastModified": 1763992789,
-        "narHash": "sha256-WHkdBlw6oyxXIra/vQPYLtqY+3G8dUVZM8bEXk0t8x4=",
+        "lastModified": 1767910483,
+        "narHash": "sha256-MOU5YdVu4DVwuT5ztXgQpPuRRBjSjUGIdUzOQr9iQOY=",
         "owner": "nix-community",
         "repo": "home-manager",
-        "rev": "44831a7eaba4360fb81f2acc5ea6de5fde90aaa3",
+        "rev": "82fb7dedaad83e5e279127a38ef410bcfac6d77c",
         "type": "github"
       },
       "original": {
         "owner": "nix-community",
-        "ref": "release-25.05",
+        "ref": "release-25.11",
         "repo": "home-manager",
         "type": "github"
       }
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1761999846,
-        "narHash": "sha256-IYlYnp4O4dzEpL77BD/lj5NnJy2J8qbHkNSFiPBCbqo=",
+        "lastModified": 1767799921,
+        "narHash": "sha256-r4GVX+FToWVE2My8VVZH4V0pTIpnu2ZE8/Z4uxGEMBE=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "3de8f8d73e35724bf9abef41f1bdbedda1e14a31",
+        "rev": "d351d0653aeb7877273920cd3e823994e7579b0b",
         "type": "github"
       },
       "original": {
         "owner": "NixOS",
-        "ref": "nixos-25.05",
+        "ref": "nixos-25.11",
         "repo": "nixpkgs",
         "type": "github"
       }

nixos/flake.nix

@@ -1,9 +1,9 @@
 {
   inputs = {
-    nixpkgs.url = "github:NixOS/nixpkgs/nixos-25.05";
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-25.11";
 
     home-manager = {
-      url = "github:nix-community/home-manager/release-25.05";
+      url = "github:nix-community/home-manager/release-25.11";
       inputs.nixpkgs.follows = "nixpkgs";
     };
   };

shared/embed.go

@@ -2,7 +2,12 @@ package shared
 
 import (
 	_ "embed"
+	"strings"
 )
 
 //go:embed splash_screen.html
 var SplashScreenTemplate string
+
+//go:embed version.txt
+var versionNotTrimmed string
+var Version = strings.TrimSpace(versionNotTrimmed)

shared/splash_screen.html

@@ -1,267 +1,486 @@
 <div id="splash">
-	<svg id="splash-svg" viewBox="0 0 950 550">
-		<!-- Paths -->
-		<!-- Disabled Paths -->
-		<path class="splash-stroke" d="M 385 350 V 270 H 100 V 112.5" />
-		<path class="splash-stroke" d="M 445 350 V 210 H 350 V 112.5" />
-		<path class="splash-stroke" d="M 505 350 V 210 H 600 V 112.5" />
-		<path class="splash-stroke" d="M 565 350 V 270 H 850 V 112.5" />
-		<!-- Masks -->
-		<defs>
-			<mask id="m1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
-				<path class="splash-mask" pathLength="100" d="M 385 350 V 270 H 100 V 112.5" />
-			</mask>
-			<mask id="m2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
-				<path class="splash-mask" pathLength="100" d="M 445 350 V 210 H 350 V 112.5" />
-			</mask>
-			<mask id="m3" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
-				<path class="splash-mask" pathLength="100" d="M 505 350 V 210 H 600 V 112.5" />
-			</mask>
-			<mask id="m4" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
-				<path class="splash-mask" pathLength="100" d="M 565 350 V 270 H 850 V 112.5" />
-			</mask>
-		</defs>
-		<!-- Active Paths -->
-		<path class="splash-stroke-active" mask="url(#m1)" d="M 385 350 V 270 H 100 V 112.5" />
-		<path class="splash-stroke-active" mask="url(#m2)" d="M 445 350 V 210 H 350 V 112.5" />
-		<path class="splash-stroke-active" mask="url(#m3)" d="M 505 350 V 210 H 600 V 112.5" />
-		<path class="splash-stroke-active" mask="url(#m4)" d="M 565 350 V 270 H 850 V 112.5" />
+  <svg id="splash-svg" class="fade-in" viewBox="0 0 950 550">
+    <!-- Paths -->
+    <!-- Disabled Paths -->
+    <path class="splash-stroke" d="M 385 350 V 270 H 100 V 112.5" />
+    <path class="splash-stroke" d="M 445 350 V 210 H 350 V 112.5" />
+    <path class="splash-stroke" d="M 505 350 V 210 H 600 V 112.5" />
+    <path class="splash-stroke" d="M 565 350 V 270 H 850 V 112.5" />
+    <!-- Masks -->
+    <defs>
+      <mask
+        id="m1"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          class="splash-mask"
+          pathLength="100"
+          d="M 385 350 V 270 H 100 V 112.5"
+        />
+      </mask>
+      <mask
+        id="m2"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          class="splash-mask"
+          pathLength="100"
+          d="M 445 350 V 210 H 350 V 112.5"
+        />
+      </mask>
+      <mask
+        id="m3"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          class="splash-mask"
+          pathLength="100"
+          d="M 505 350 V 210 H 600 V 112.5"
+        />
+      </mask>
+      <mask
+        id="m4"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          class="splash-mask"
+          pathLength="100"
+          d="M 565 350 V 270 H 850 V 112.5"
+        />
+      </mask>
+    </defs>
+    <!-- Active Paths -->
+    <path
+      class="splash-stroke-active"
+      mask="url(#m1)"
+      d="M 385 350 V 270 H 100 V 112.5"
+    />
+    <path
+      class="splash-stroke-active"
+      mask="url(#m2)"
+      d="M 445 350 V 210 H 350 V 112.5"
+    />
+    <path
+      class="splash-stroke-active"
+      mask="url(#m3)"
+      d="M 505 350 V 210 H 600 V 112.5"
+    />
+    <path
+      class="splash-stroke-active"
+      mask="url(#m4)"
+      d="M 565 350 V 270 H 850 V 112.5"
+    />
 
-		<!-- Displays -->
-		<rect x="0" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
-		<rect x="250" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
-		<rect x="500" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
-		<rect x="750" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
+    <!-- Displays -->
+    <rect
+      x="0"
+      y="0"
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
+    <rect
+      x="250"
+      y="0"
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
+    <rect
+      x="500"
+      y="0"
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
+    <rect
+      x="750"
+      y="0"
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
 
-		<!-- Text -->
-		<text class="splash-text" x="100" y="66.25" font-size="90">Mu</text>
-		<text class="splash-text" x="350" y="66.25" font-size="90">Di</text>
-		<text class="splash-text" x="600" y="66.25" font-size="90">C</text>
-		<text class="splash-text" x="850" y="66.25" font-size="90">S</text>
+    <!-- Text -->
+    <text class="splash-text" x="100" y="66.25" font-size="90">Mu</text>
+    <text class="splash-text" x="350" y="66.25" font-size="90">Di</text>
+    <text class="splash-text" x="600" y="66.25" font-size="90">C</text>
+    <text class="splash-text" x="850" y="66.25" font-size="90">S</text>
 
-		<!-- Controller -->
-		<rect x="325" y="350" width="300" height="168.75" rx="8" ry="8" class="splash-control-monitor" />
-		<rect x="335" y="390" width="135" height="120" rx="8" ry="8" class="splash-other-button" />
-		<rect x="480" y="390" width="135" height="55" rx="8" ry="8" class="splash-other-button" />
-		<rect x="480" y="455" width="135" height="55" rx="8" ry="8" class="splash-start-button" />
+    <!-- Controller -->
+    <rect
+      x="325"
+      y="350"
+      width="300"
+      height="168.75"
+      rx="8"
+      ry="8"
+      class="splash-control-monitor"
+    />
+    <rect
+      x="335"
+      y="390"
+      width="135"
+      height="120"
+      rx="8"
+      ry="8"
+      class="splash-other-button"
+    />
+    <rect
+      x="480"
+      y="390"
+      width="135"
+      height="55"
+      rx="8"
+      ry="8"
+      class="splash-other-button"
+    />
+    <rect
+      x="480"
+      y="455"
+      width="135"
+      height="55"
+      rx="8"
+      ry="8"
+      class="splash-start-button"
+    />
 
-		<!-- Window Controls -->
-		<path class="window-controls" d="M 600 360 L 615 375" />
-		<path class="window-controls" d="M 600 375 L 615 360" />
-		<path class="window-controls" fill="none" d="M 575 360 H 590 V 375 H 575 V 360" />
-		<path class="window-controls" d="M 550 375 H 565" />
+    <!-- Window Controls -->
+    <path class="window-controls" d="M 600 360 l 15 15" />
+    <path class="window-controls" d="M 600 375 l 15 -15" />
+    <path
+      class="window-controls"
+      fill="none"
+      d="M 575 360 h 15 v 15 h -15 v -15"
+    />
+    <path class="window-controls" d="M 550 375 h 15" />
+  </svg>
 
-		<svg class="cursor" width="50" height="50" viewBox="0 0 24 24" x="510" y="480" aria-hidden="true">
-			<g stroke="#ffffff" fill="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<path stroke="#000000" d="M 6.5 10 H 18 V 19 H 6" />
-				<path d="M22 14a8 8 0 0 1-8 8" />
-				<path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
-				<path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1" />
-				<path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10" />
-				<path
-					d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
-			</g>
-		</svg>
-	</svg>
+  <span id="version-label" aria-label="Version">%%APP-VERSION%%</span>
+
+  <div class="fade-in">
+    <div
+      class="cursor-x"
+      style="
+        position: absolute;
+        left: calc(50cqw + var(--mouse-start-x));
+        top: calc(50cqh + var(--mouse-start-y));
+      "
+    >
+      <svg class="cursor-y" width="50" height="50" viewBox="0 0 24 24">
+        <g
+          stroke="#ffffff"
+          fill="#000000"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="#000000" d="M 6.5 10 H 18 V 19 H 6" />
+          <path d="M22 14a8 8 0 0 1-8 8" />
+          <path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+          <path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1" />
+          <path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10" />
+          <path
+            d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
 </div>
 
 <style>
-	:root {
-		--splash-fade-out-delay: 0s;
-		--splash-fade-out-state: running;
+  :root {
+    --splash-fade-out-delay: 0s;
+    --splash-fade-out-state: running;
 
-		--base-stroke: #444444;
-		--base-stroke-active: #109e00;
+    --base-stroke: #444444;
+    --base-stroke-active: #109e00;
 
-		--splash-bg: oklch(21.6% 0.006 56.043);
-		--monitor-dark: #000000;
-		--monitor-active: #ffffff;
-		--window-controls: #cccccc;
-		--start-button-inactive: #cccccc;
-		--start-button-hover: #77a3b1;
-		--start-button-active: #2c819b;
-		--other-button: oklch(55.3% 0.013 58.071);
-		--splash-control-monitor: oklch(44.4% 0.011 73.639);
+    --splash-bg: oklch(21.6% 0.006 56.043);
+    --monitor-dark: #000000;
+    --monitor-active: #ffffff;
+    --window-controls: #cccccc;
+    --start-button-inactive: #cccccc;
+    --start-button-hover: #77a3b1;
+    --start-button-active: #2c819b;
+    --other-button: oklch(55.3% 0.013 58.071);
+    --splash-control-monitor: oklch(44.4% 0.011 73.639);
 
-		--stroke-strength: 8;
-		--dash: 16;
-		--gap: 20;
-	}
+    --version-color: oklch(55.3% 0.013 58.071);
 
+    --mouse-size: 50px;
+    --mouse-bounce-delay: 5s;
+    --mouse-start-x: calc((35 * 100vw) / 1920);
+    --mouse-start-y: calc((60 * 100vh) / 1080);
 
-	#splash {
-		position: fixed;
-		inset: 0;
-		background: var(--splash-bg);
-		color: white;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 9999;
-		/* animation: splash-fade 1s ease 4s forwards; */
-		height: 100vh;
-		width: 100vw;
+    --dur-x: 16s;
+    --dur-y: 9s;
 
-		animation-name: splash-fade;
-		animation-duration: 1s;
-		animation-timing-function: ease;
-		animation-fill-mode: forwards;
-		animation-delay: var(--splash-fade-out-delay);
-		animation-play-state: var(--splash-fade-out-state);
-	}
+    --stroke-strength: 8;
+    --dash: 16;
+    --gap: 20;
+  }
 
-	#splash-svg {
-		max-height: 50vh;
-		max-width: 80vw;
-		opacity: 0;
-		animation: fade-in 1s ease 500ms forwards;
-	}
+  #version-label {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    display: block;
+    color: var(--version-color);
+    padding: 0.4rem 0.8rem;
+    font-size: 1.4rem;
+    text-align: right;
+  }
 
-	.splash-monitor {
-		aspect-ratio: 16/9;
-		rx: 8;
-		ry: 8;
-		width: 200;
-		fill: var(--monitor-dark);
-	}
+  #splash {
+    position: fixed;
+    inset: 0;
+    background: var(--splash-bg);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    height: 100vh;
+    width: 100vw;
 
-	.splash-control-monitor {
-		fill: var(--splash-control-monitor);
-	}
+    animation-name: splash-fade;
+    animation-duration: 1s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+    animation-delay: var(--splash-fade-out-delay);
+    animation-play-state: var(--splash-fade-out-state);
+  }
 
-	.splash-other-button {
-		fill: var(--other-button);
-	}
+  #splash-svg {
+    max-height: 50vh;
+    max-width: 80vw;
+    transform: translateY(-12cqh);
+  }
 
-	.splash-stroke,
-	.splash-stroke-active {
-		fill: none;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		stroke-width: var(--stroke-strength);
-		stroke-dasharray: var(--dash) var(--gap);
-	}
+  .fade-in {
+    opacity: 0;
+    animation: fade-in 1s ease 500ms forwards;
+  }
 
-	.window-controls {
-		stroke: var(--window-controls);
-		stroke-width: 3;
-	}
+  .splash-monitor {
+    aspect-ratio: 16/9;
+    rx: 8;
+    ry: 8;
+    width: 200;
+    fill: var(--monitor-dark);
+  }
 
-	.splash-stroke {
-		stroke: var(--base-stroke);
-	}
+  .splash-control-monitor {
+    fill: var(--splash-control-monitor);
+  }
 
-	.splash-stroke-active {
-		stroke: var(--base-stroke-active);
-	}
+  .splash-other-button {
+    fill: var(--other-button);
+  }
 
-	.splash-mask {
-		fill: none;
-		stroke: #fff;
-		stroke-linecap: round;
-		stroke-width: var(--stroke-strength);
-		stroke-dasharray: 100;
-		stroke-dashoffset: 100;
-		animation: draw 1s ease-in-out 1.35s forwards;
-	}
+  .splash-stroke,
+  .splash-stroke-active {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: var(--stroke-strength);
+    stroke-dasharray: var(--dash) var(--gap);
+  }
 
-	.splash-text {
-		text-anchor: middle;
-		dominant-baseline: middle;
-		fill: var(--monitor-dark);
-		user-select: none;
-		font-family: sans-serif;
-	}
+  .window-controls {
+    stroke: var(--window-controls);
+    stroke-width: 3;
+  }
 
-	.splash-monitor {
-		fill: var(--monitor-dark);
-		animation: activate-monitor 0ms ease 2.35s forwards;
-	}
+  .splash-stroke {
+    stroke: var(--base-stroke);
+  }
 
-	.splash-start-button {
-		fill: var(--start-button-inactive);
-		animation: start-button-hover-press 1s ease-in-out 450ms forwards;
-	}
+  .splash-stroke-active {
+    stroke: var(--base-stroke-active);
+  }
 
-	.cursor {
-		animation: move-mouse 1s ease-in-out 0ms forwards;
-	}
+  .splash-mask {
+    fill: none;
+    stroke: #fff;
+    stroke-linecap: round;
+    stroke-width: var(--stroke-strength);
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: draw 1s ease-in-out 1.35s forwards;
+  }
 
-	@keyframes fade-in {
-		to {
-			opacity: 1;
-		}
-	}
+  .splash-text {
+    text-anchor: middle;
+    dominant-baseline: middle;
+    fill: var(--monitor-dark);
+    user-select: none;
+    font-family: sans-serif;
+  }
 
-	@keyframes move-mouse {
-		0% {
-			transform: translateX(-100px);
-		}
+  .splash-monitor {
+    fill: var(--monitor-dark);
+    animation: activate-monitor 0ms ease 2.35s forwards;
+  }
 
-		50% {
-			transform: translateX(-100px);
-		}
+  .splash-start-button {
+    fill: var(--start-button-inactive);
+    animation: start-button-hover-press 1s ease-in-out 450ms forwards;
+  }
 
-		100% {
-			transform: translateX(0px);
-		}
-	}
+  .cursor-x {
+    animation-name: move-mouse, mouse-bounceX;
+    animation-duration: 1s, var(--dur-x);
+    animation-delay: 0s, var(--mouse-bounce-delay);
+    animation-iteration-count: 1, infinite;
+    animation-direction: normal, normal;
+    animation-timing-function: ease-in-out, linear;
+    animation-fill-mode: both, none;
+    will-change: transform;
+  }
 
-	@keyframes start-button-hover-press {
-		0% {
-			fill: var(--start-button-inactive);
-		}
+  .cursor-y {
+    animation-name: mouse-bounceY;
+    animation-duration: var(--dur-y);
+    animation-delay: var(--mouse-bounce-delay);
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    will-change: transform;
+  }
 
-		30% {
-			fill: var(--start-button-inactive);
-		}
+  @keyframes fade-in {
+    to {
+      opacity: 1;
+    }
+  }
 
-		40% {
-			fill: var(--start-button-hover);
-		}
+  @keyframes move-mouse {
+    0% {
+      transform: translateX(-100px);
+    }
 
-		70% {
-			fill: var(--start-button-hover);
-		}
+    50% {
+      transform: translateX(-100px);
+    }
 
-		80% {
-			fill: var(--start-button-active);
-		}
+    100% {
+      transform: translateX(0px);
+    }
+  }
 
-		90% {
-			fill: var(--start-button-active);
-		}
+  @keyframes mouse-bounceX {
+    0% {
+      transform: translateX(0);
+    }
 
-		100% {
-			fill: var(--start-button-hover);
-		}
-	}
+    26% {
+      transform: translateX(calc(-50cqw - var(--mouse-start-x)));
+    }
 
-	@keyframes draw {
-		to {
-			stroke-dashoffset: 0;
-		}
-	}
+    76% {
+      transform: translateX(
+        calc(50cqw - var(--mouse-size) - var(--mouse-start-x))
+      );
+    }
+  }
 
-	@keyframes activate-monitor {
-		to {
-			fill: var(--monitor-active);
-		}
-	}
+  @keyframes mouse-bounceY {
+    0% {
+      transform: translateY(0);
+    }
 
-	@keyframes splash-fade {
-		to {
-			opacity: 0;
-			visibility: hidden;
-		}
-	}
+    27% {
+      transform: translateY(calc(-50cqh - var(--mouse-start-y)));
+    }
 
-	rect {
-		vector-effect: non-scaling-stroke;
-	}
+    77% {
+      transform: translateY(
+        calc(50cqh - var(--mouse-size) - var(--mouse-start-y))
+      );
+    }
+  }
 
-	/* verhindert, dass die Linien beim Skalieren dicker werden */
-	.cursor * {
-		vector-effect: non-scaling-stroke;
-	}
+  @keyframes start-button-hover-press {
+    0% {
+      fill: var(--start-button-inactive);
+    }
+
+    30% {
+      fill: var(--start-button-inactive);
+    }
+
+    40% {
+      fill: var(--start-button-hover);
+    }
+
+    70% {
+      fill: var(--start-button-hover);
+    }
+
+    80% {
+      fill: var(--start-button-active);
+    }
+
+    90% {
+      fill: var(--start-button-active);
+    }
+
+    100% {
+      fill: var(--start-button-hover);
+    }
+  }
+
+  @keyframes draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes activate-monitor {
+    to {
+      fill: var(--monitor-active);
+    }
+  }
+
+  @keyframes splash-fade {
+    to {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  rect {
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* verhindert, dass die Linien beim Skalieren dicker werden */
+  .cursor * {
+    vector-effect: non-scaling-stroke;
+  }
 </style>
+
+<script>
+  const r =
+    Math.random() < 0.01
+      ? 9 / 15.039473684
+      : 0.55 + (Math.random() - 0.5) * 0.18;
+  const tx = 13 + Math.random() * 5;
+  document.documentElement.style.setProperty("--dur-x", tx + "s");
+  document.documentElement.style.setProperty("--dur-y", tx * r + "s");
+</script>

shared/version.txt

@@ -0,0 +1 @@
+v0.0.11