From: PhiTux <redacted>
Date: Mon, 18 Aug 2025 16:34:46 +0000 (+0200)
Subject: began background settings AND prepared light/dark-mode
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=9e0f102b111c69d904db14d48d04b5d82b15a4bc;p=DailyTxT.git

began background settings AND prepared light/dark-mode
---

diff --git a/backend/handlers/users.go b/backend/handlers/users.go
index cc98457..4127b13 100644
--- a/backend/handlers/users.go
+++ b/backend/handlers/users.go
@@ -428,6 +428,10 @@ func GetDefaultSettings() map[string]any {
 		"timezone":                   "UTC",
 		"useBrowserLanguage":         true,
 		"language":                   "en",
+		"darkModeAutoDetect":         true,
+		"useDarkMode":                false,
+		"background":                 "gradient",
+		"monochromeBackgroundColor":  "#ececec",
 	}
 }
 
diff --git a/frontend/src/lib/Datepicker.svelte b/frontend/src/lib/Datepicker.svelte
index d205d5a..09df692 100644
--- a/frontend/src/lib/Datepicker.svelte
+++ b/frontend/src/lib/Datepicker.svelte
@@ -134,7 +134,7 @@
 	const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 </script>
 
-<div class="datepicker">
+<div class="datepicker glassLight">
 	<div class="datepicker-header">
 		<button type="button" class="btn btnLeftRight" onclick={() => changeMonth(-1)}>&lt;</button>
 		<div class="date-selectors">
@@ -265,13 +265,13 @@
 	.datepicker {
 		display: inline-block;
 		font-family: Arial, sans-serif;
-		border: 1px solid #ececec77;
+		/* border: 1px solid #ececec77; */
 		border-radius: 8px;
 		/* overflow: hidden; */
 		/* width: 300px; */
 		box-sizing: border-box;
-		backdrop-filter: blur(8px) saturate(150%);
-		background-color: rgba(219, 219, 219, 0.45);
+		/* backdrop-filter: blur(8px) saturate(150%);
+		background-color: rgba(219, 219, 219, 0.45); */
 	}
 	.datepicker-header {
 		display: flex;
diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index 8607244..133f33b 100644
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -260,7 +260,7 @@
 	<div class="search d-flex flex-column">
 		<form onsubmit={searchForString} class="input-group">
 			<button
-				class="btnSearchPopover btn btn-outline-secondary"
+				class="btnSearchPopover btn btn-outline-secondary glassLight"
 				data-bs-toggle="popover"
 				data-bs-title="Suche"
 				data-bs-content="Du kannst nach <b>Text</b>, <b>Dateinamen</b> und <b>Tags</b> suchen.<br>
@@ -312,7 +312,7 @@
 						setTimeout(() => (showTagDropdown = false), 150);
 					}}
 				/>
-				<button class="btn btn-outline-secondary" type="submit" id="search-button">
+				<button class="btn btn-outline-secondary glassLight" type="submit" id="search-button">
 					{#if $isSearching}
 						<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
 					{:else}
@@ -322,7 +322,7 @@
 			{/if}
 		</form>
 		{#if showTagDropdown}
-			<div class="searchTagDropdown">
+			<div class="searchTagDropdown glass">
 				{#if filteredTags.length === 0}
 					<em style="padding: 0.2rem;">Kein Tag gefunden...</em>
 				{:else}
@@ -343,7 +343,7 @@
 				{/if}
 			</div>
 		{/if}
-		<div class="list-group flex-grow-1 mb-2">
+		<div class="list-group flex-grow-1 mb-2 glassLight">
 			{#if $searchResults.length > 0}
 				{#each $searchResults as result}
 					<button
@@ -439,13 +439,13 @@
 
 	.searchTagDropdown {
 		position: absolute;
-		background-color: white;
+		/* background-color: white; */
 		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 		z-index: 1000;
 		left: 60px;
 		margin-top: 38px;
 		max-height: 200px;
-		overflow-y: scroll;
+		overflow-y: auto;
 		overflow-x: hidden;
 		display: flex;
 		flex-direction: column;
@@ -490,9 +490,9 @@
 		border-top-right-radius: 0;
 		overflow-y: auto;
 		min-height: 250px;
-		backdrop-filter: blur(8px) saturate(150%);
+		/* backdrop-filter: blur(8px) saturate(150%);
 		background-color: rgba(219, 219, 219, 0.45);
-		border: 1px solid #ececec77;
+		border: 1px solid #ececec77; */
 	}
 
 	.input-group {
diff --git a/frontend/src/lib/helpers.js b/frontend/src/lib/helpers.js
index a453295..6213608 100644
--- a/frontend/src/lib/helpers.js
+++ b/frontend/src/lib/helpers.js
@@ -21,11 +21,42 @@ function sameDate(date1, date2) {
 	);
 }
 
+function generateNeonMesh(dark) {
+	/* const baseColors = ['#ff00ff', '#00ffff', '#ffea00', '#ff0080', '#00ff80', '#ff4500']; */
+	const baseColors = ["#ff00ff", "#00ffff", "#ffea00", "#ff0080", "#00ff80", "#ff4500",
+    "#ff1493", "#00ffcc", "#ff3333", "#66ff66", "#3399ff", "#ffcc00",
+    "#ff6666", "#00ccff", "#cc33ff", "#33ffcc", "#ffff99", "#ff99ff",
+    "#99ff99", "#66ccff", "#ff9900", "#ff0066", "#66ffcc", "#ff33cc",
+    "#99ccff"]
+	const numGradients = Math.floor(Math.random() * 3) + 3; // 3–5 Radial Gradients
+	let gradients = [];
+
+	for (let i = 0; i < numGradients; i++) {
+		const baseColor = baseColors[Math.floor(Math.random() * baseColors.length)];
+		const alpha = Math.random() * 0.4 + 0.1; // random alpha between 0.1 and 0.5
+
+		// convert hex color to rgba
+		const hex = baseColor.substring(1);
+		const r = parseInt(hex.substring(0, 2), 16);
+		const g = parseInt(hex.substring(2, 4), 16);
+		const b = parseInt(hex.substring(4, 6), 16);
+		const color = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+
+		const x = Math.floor(Math.random() * 100);
+		const y = Math.floor(Math.random() * 100);
+		const size = Math.floor(Math.random() * 30) + 30; // 30–60%
+		gradients.push(`radial-gradient(circle at ${x}% ${y}%, ${color}, transparent ${size}%)`);
+	}
+
+	document.querySelector('.background').style.background = dark ? gradients.join(', ') + ', #111' : gradients;
+	document.querySelector('.background').style.backgroundBlendMode = 'screen';
+}
+
 function loadFlagEmoji(language) {
 	return json[language] || '';
 }
 
-export { formatBytes, sameDate, loadFlagEmoji };
+export { formatBytes, sameDate, loadFlagEmoji, generateNeonMesh };
 
 export let alwaysShowSidenav = writable(true);
 
diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 5896330..b2c21fc 100644
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -14,7 +14,7 @@
 	import { API_URL } from '$lib/APIurl.js';
 	import { tags } from '$lib/tagStore.js';
 	import TagModal from '$lib/TagModal.svelte';
-	import { alwaysShowSidenav, loadFlagEmoji } from '$lib/helpers.js';
+	import { alwaysShowSidenav, generateNeonMesh, loadFlagEmoji } from '$lib/helpers.js';
 	import { templates } from '$lib/templateStore';
 	import {
 		faRightFromBracket,
@@ -24,7 +24,9 @@
 		faTriangleExclamation,
 		faTrash,
 		faCopy,
-		faCheck
+		faCheck,
+		faSun,
+		faMoon
 	} from '@fortawesome/free-solid-svg-icons';
 	import Tag from '$lib/Tag.svelte';
 	import SelectTimezone from '$lib/SelectTimezone.svelte';
@@ -128,8 +130,12 @@
 			.get(API_URL + '/users/getUserSettings')
 			.then((response) => {
 				$settings = response.data;
+				$tempSettings = JSON.parse(JSON.stringify($settings));
 				aLookBackYears = $settings.aLookBackYears.toString();
 				updateLanguage();
+
+				// set background
+				setBackground();
 			})
 			.catch((error) => {
 				console.error(error);
@@ -180,7 +186,6 @@
 	);
 
 	function updateLanguage() {
-		console.log('updateLanguage()');
 		if ($settings.useBrowserLanguage) {
 			let browserLanguage = tolgeesMatchForBrowserLanguage();
 			$tolgee.changeLanguage(
@@ -214,6 +219,16 @@
 		return '';
 	}
 
+	function setBackground() {
+		if ($settings.background === 'monochrome') {
+			document.querySelector('.background').style.background = '';
+			document.body.style.backgroundColor = $settings.monochromeBackgroundColor;
+		} else if ($settings.background === 'gradient') {
+			document.body.style.backgroundColor = '';
+			generateNeonMesh();
+		}
+	}
+
 	let isSaving = $state(false);
 	function saveUserSettings() {
 		if (isSaving) return;
@@ -233,6 +248,9 @@
 					// update language
 					updateLanguage();
 
+					// set background
+					setBackground();
+
 					// show toast
 					const toast = new bootstrap.Toast(document.getElementById('toastSuccessSaveSettings'));
 					toast.show();
@@ -685,7 +703,7 @@
 </script>
 
 <div class="d-flex flex-column h-100">
-	<nav class="navbar navbar-expand-lg bg-body-tertiary">
+	<nav class="navbar navbar-expand-lg glass">
 		<div class="row w-100">
 			<div class="col-lg-4 col-sm-5 col d-flex flex-row justify-content-start align-items-center">
 				{#if !$alwaysShowSidenav}
@@ -754,7 +772,7 @@
 		class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl modal-fullscreen-sm-down"
 	>
 		<!--  -->
-		<div class="modal-content shadow-lg">
+		<div class="modal-content shadow-lg glass">
 			<div class="modal-header">
 				<h1>{$t('settings.title')}</h1>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
@@ -786,32 +804,96 @@
 							<div id="appearance">
 								<h3 class="text-primary">🎨 Aussehen</h3>
 								<div id="lightdark">
-									<h5>Light/Dark-Mode</h5>
-									Bla<br />
-									blub <br />
-									bla <br />
-									blub <br />
+									{#if $tempSettings.darkModeAutoDetect !== $settings.darkModeAutoDetect || $tempSettings.useDarkMode !== $settings.useDarkMode}
+										<div class="unsaved-changes" transition:slide></div>
+									{/if}
+									<h5>Light-/Dark-Mode</h5>
+									<div class="form-check mt-2">
+										<input
+											class="form-check-input"
+											type="radio"
+											name="darkMode"
+											id="darkModeAutoTrue"
+											value={true}
+											bind:group={$tempSettings.darkModeAutoDetect}
+										/>
+										<label class="form-check-label" for="darkModeAutoTrue">
+											Light-/Dark-Mode automatisch erkennen (aktuell:
+											{#if window.matchMedia('(prefers-color-scheme: dark)').matches}
+												<b>Dark <Fa icon={faMoon} /></b>
+											{:else}
+												<b>Light <Fa icon={faSun} /></b>
+											{/if})
+										</label>
+									</div>
+									<div class="form-check mt-2">
+										<input
+											class="form-check-input"
+											type="radio"
+											name="darkMode"
+											id="darkModeAutoFalse"
+											value={false}
+											bind:group={$tempSettings.darkModeAutoDetect}
+										/>
+										<label class="form-check-label" for="darkModeAutoFalse">
+											Light-/Dark-Mode manuell festlegen
+										</label>
+										{#if $tempSettings.darkModeAutoDetect === false}
+											<div class="form-check form-switch d-flex flex-row ps-0" transition:slide>
+												<label class="form-check-label me-5" for="darkModeSwitch">
+													<Fa icon={faSun} />
+												</label>
+												<input
+													class="form-check-input"
+													bind:checked={$tempSettings.useDarkMode}
+													type="checkbox"
+													role="switch"
+													id="darkModeSwitch"
+												/>
+												<label class="form-check-label ms-2" for="darkModeSwitch">
+													<Fa icon={faMoon} />
+												</label>
+											</div>
+										{/if}
+									</div>
 								</div>
 								<div id="background">
+									{#if $tempSettings.background !== $settings.background || $tempSettings.monochromeBackgroundColor !== $settings.monochromeBackgroundColor}
+										<div class="unsaved-changes" transition:slide></div>
+									{/if}
+
 									<h5>Hintergrund</h5>
-									<div class="d-flex flex-row justify-content-start">
-										<label for="trianglifyOpacity" class="form-label"
-											>Transparenz der Dreiecke</label
-										>
+									<div class="form-check mt-2">
 										<input
-											bind:value={$trianglifyOpacity}
-											type="range"
-											class="mx-3 form-range"
-											id="trianglifyOpacity"
-											min="0"
-											max="1"
-											step="0.01"
+											class="form-check-input"
+											type="radio"
+											name="background"
+											id="background_gradient"
+											value={'gradient'}
+											bind:group={$tempSettings.background}
 										/>
+										<label class="form-check-label" for="background_gradient">
+											Farbverlauf (wird bei jedem Seitenaufruf neu generiert)
+										</label>
+									</div>
+									<div class="form-check mt-2">
 										<input
-											bind:value={$trianglifyOpacity}
-											type="number"
-											id="trianglifyOpacityNumber"
+											class="form-check-input"
+											type="radio"
+											name="background"
+											id="background_monochrome"
+											value={'monochrome'}
+											bind:group={$tempSettings.background}
 										/>
+										<label class="form-check-label" for="background_monochrome"> Einfarbig </label>
+										{#if $tempSettings.background === 'monochrome'}
+											<input
+												transition:slide
+												class="form-control form-control-color"
+												bind:value={$tempSettings.monochromeBackgroundColor}
+												type="color"
+											/>
+										{/if}
 									</div>
 								</div>
 							</div>
@@ -1870,9 +1952,10 @@
 	}
 
 	.modal-content {
-		backdrop-filter: blur(10px) saturate(150%);
+		/* backdrop-filter: blur(10px) saturate(150%);
+		background-color: rgba(208, 208, 208, 0.61); */
+
 		/* background-color: rgba(43, 56, 78, 0.75); */
-		background-color: rgba(208, 208, 208, 0.61);
 		/* color: rgb(22, 22, 22); */
 	}
 
diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index 4618e59..2a2e58d 100644
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -872,7 +872,7 @@
 		<!-- Center -->
 		<div class="d-flex flex-column pt-4 px-4 flex-grow-1" id="middle">
 			<!-- Input-Area -->
-			<div class="d-flex flex-row textAreaHeader">
+			<div class="d-flex flex-row textAreaHeader glassLight">
 				<div class="flex-fill textAreaDate">
 					{new Date(
 						Date.UTC($selectedDate.year, $selectedDate.month - 1, $selectedDate.day)
@@ -937,7 +937,7 @@
 		</div>
 
 		<div id="right" class="d-flex flex-column">
-			<div class="tags">
+			<div class="tags glass">
 				<div class="d-flex flex-row justify-content-between">
 					<div class="d-flex flex-row">
 						<h3>Tags</h3>
@@ -1012,7 +1012,7 @@
 				</div>
 			</div>
 
-			<div class="files d-flex flex-column">
+			<div class="files d-flex flex-column glass">
 				<button
 					class="btn btn-secondary {filesOfDay?.length > 0 ? 'mb-2' : ''}"
 					id="uploadBtn"
@@ -1449,10 +1449,11 @@
 		z-index: 10;
 		padding: 0.5rem;
 		margin-bottom: 2rem;
-		backdrop-filter: blur(8px) saturate(150%);
+		/* backdrop-filter: blur(8px) saturate(150%);
 		background-color: rgba(219, 219, 219, 0.45);
-		border: 1px solid #ececec77;
+		border: 1px solid #ececec77; */
 		border-radius: 10px;
+		/* color: #ececec; */
 	}
 
 	.loadImageBtn {
@@ -1482,9 +1483,9 @@
 		margin-bottom: 1rem;
 		border-radius: 10px;
 		padding: 1rem;
-		backdrop-filter: blur(8px) saturate(150%);
+		/* backdrop-filter: blur(8px) saturate(150%);
 		background-color: rgba(219, 219, 219, 0.45);
-		border: 1px solid #ececec77;
+		border: 1px solid #ececec77; */
 	}
 
 	:global(#uploadIcon) {
@@ -1536,9 +1537,9 @@
 	}
 
 	.textAreaHeader {
-		border-left: 1px solid #ccc;
-		border-top: 1px solid #ccc;
-		border-right: 1px solid #ccc;
+		border-left: 1px solid #6a6a6a;
+		border-top: 1px solid #6a6a6a;
+		border-right: 1px solid #6a6a6a;
 		border-top-left-radius: 5px;
 		border-top-right-radius: 5px;
 	}
@@ -1546,7 +1547,7 @@
 	.textAreaDate,
 	.textAreaWrittenAt,
 	.textAreaHistory {
-		border-right: 1px solid #ccc;
+		border-right: 1px solid #6a6a6a;
 		padding: 0.25em;
 	}
 
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index f0d2e02..d8a3b50 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,25 +1,16 @@
 <script>
 	import { blur } from 'svelte/transition';
 	import axios from 'axios';
-	//import { dev } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import '../scss/styles.scss';
-	import { useTrianglify, trianglifyOpacity } from '$lib/settingsStore.js';
+	import { trianglifyOpacity } from '$lib/settingsStore.js';
 	import { page } from '$app/state';
 	import { API_URL } from '$lib/APIurl.js';
-	import trianglify from 'trianglify';
-	import { alwaysShowSidenav } from '$lib/helpers.js';
+	import { alwaysShowSidenav, generateNeonMesh } from '$lib/helpers.js';
 	import * as bootstrap from 'bootstrap';
-	import {
-		TolgeeProvider,
-		Tolgee,
-		DevTools,
-		LanguageDetector,
-		LanguageStorage
-	} from '@tolgee/svelte';
+	import { TolgeeProvider, Tolgee, DevTools, LanguageStorage } from '@tolgee/svelte';
 	import { FormatIcu } from '@tolgee/format-icu';
-	import { use } from 'marked';
 
 	const tolgee = Tolgee()
 		.use(DevTools())
@@ -80,30 +71,6 @@
 		}
 	);
 
-	function createBackground() {
-		if ($useTrianglify) {
-			//remove old canvas
-			const oldCanvas = document.querySelector('canvas');
-			if (oldCanvas) {
-				oldCanvas.remove();
-			}
-
-			//xColors: ['#F3F3F3', '#FEFEFE', '#E5E5E5'],
-			const canvas = trianglify({
-				width: window.innerWidth,
-				height: window.innerHeight,
-				xColors: ['#FA2'],
-				fill: false,
-				strokeWidth: 1,
-				cellSize: 100
-			});
-
-			document.body.appendChild(canvas.toCanvas());
-			document.querySelector('canvas').style =
-				'position: fixed; top: 0; left: 0; z-index: -1; opacity: 0.4; width: 100%; height: 100%; background-color: #eaeaea;';
-		}
-	}
-
 	$effect(() => {
 		if ($trianglifyOpacity) {
 			if (document.querySelector('canvas')) {
@@ -126,16 +93,20 @@
 	});
 
 	onMount(() => {
-		createBackground();
 		calculateResize();
+
+		// if on login page, generate neon mesh
+		if (page.url.pathname === '/login') {
+			generateNeonMesh();
+		}
 	});
 
 	let routeToFromLoginKey = $derived(page.url.pathname === '/login');
 </script>
 
-<TolgeeProvider {tolgee}>
-	<main class="d-flex flex-column">
-		<div class="wrapper h-100">
+<main class="d-flex flex-column background" use:focus={generateNeonMesh}>
+	<TolgeeProvider {tolgee}>
+		<div class="wrapper h-100" transition:blur={{ duration: inDuration * 2 }}>
 			{#key routeToFromLoginKey}
 				<div
 					class="transition-wrapper h-100"
@@ -162,16 +133,12 @@
 				</div>
 			</div>
 		</div>
-	</main>
-</TolgeeProvider>
+	</TolgeeProvider>
+</main>
 
 <style>
 	main {
 		height: 100vh;
-
-		/* background-image: linear-gradient(#ff8a00, #e52e71); */
-		/* background-image: linear-gradient(to right, violet, darkred, purple); */
-		/* background: linear-gradient(40deg, #38bdf8, #fb7185, #84cc16); */
 	}
 
 	.wrapper {
@@ -185,4 +152,20 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	:global(.glass) {
+		backdrop-filter: blur(12px) saturate(130%);
+		/* background-color: rgba(219, 219, 219, 0.45); */
+		background-color: rgba(83, 83, 83, 0.73);
+		border: 1px solid #62626278;
+		color: #ececec;
+	}
+
+	:global(.glassLight) {
+		backdrop-filter: blur(8px) saturate(130%);
+		/* background-color: rgba(219, 219, 219, 0.45); */
+		background-color: rgba(83, 83, 83, 0.445);
+		border: 1px solid #62626278;
+		color: #ececec;
+	}
 </style>