progress in background settings

diff --git a/backend/server/routers/logs.py b/backend/server/routers/logs.py
index e4dd8933919d067ac120d65ddf229b44be014021..14a7044e50704bbbbff9568c3d2bd027b630c21a 100644 (file)
--- a/backend/server/routers/logs.py
+++ b/backend/server/routers/logs.py
@@ -188,8 +188,7 @@ async def search(searchString: str, cookie = Depends(users.isLoggedIn)):
                         
         
     # sort by year and month and day
-    results.sort(key=lambda x: (int(x["year"]), int(x["month"]), int(x["day"])), reverse=True)
-    print(results)
+    results.sort(key=lambda x: (int(x["year"]), int(x["month"]), int(x["day"])), reverse=False)
     return results
 
 @router.get("/getMarkedDays")

diff --git a/frontend/src/lib/settingsStore.js b/frontend/src/lib/settingsStore.js
index 1b75a2fbf1e83fd5590b0d668adf0243ea58513b..f80b1e9d8d9b4b890c0550f8d43d4d0aae9ce1bb 100644 (file)
--- a/frontend/src/lib/settingsStore.js
+++ b/frontend/src/lib/settingsStore.js
@@ -1,3 +1,8 @@
 import {writable} from 'svelte/store';
 
-export const readingMode = writable(false);
\ No newline at end of file
+export const readingMode = writable(false);
+
+export const useTrianglify = writable(true);
+export const trianglifyOpacity = writable(0.8);
+export const trianglifyColor = writable('');
+export const backgroundColor = writable('');
\ No newline at end of file

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d998b2c3b55fe269d227f423a00514731d5c5e68..7cbf8a3df9ed9641eac08706fdd64d1bbee4f6c9 100644 (file)
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -10,6 +10,8 @@
        import { readingMode } from '$lib/settingsStore.js';
        import { page } from '$app/state';
        import { API_URL } from '$lib/APIurl.js';
+       import trianglify from 'trianglify';
+       import { useTrianglify, trianglifyOpacity } from '$lib/settingsStore.js';
 
        import {
                faRightFromBracket,
@@ -42,7 +44,36 @@
                        });
        }
 
+       function createBackground() {
+               if ($useTrianglify) {
+                       //remove old canvas
+                       const oldCanvas = document.querySelector('canvas');
+                       if (oldCanvas) {
+                               oldCanvas.remove();
+                       }
+
+                       const canvas = trianglify({
+                               width: window.innerWidth,
+                               height: window.innerHeight
+                       });
+
+                       document.body.appendChild(canvas.toCanvas());
+                       document.querySelector('canvas').style =
+                               'position: fixed; top: 0; left: 0; z-index: -1; opacity: 0.8; width: 100%; height: 100%;';
+               }
+       }
+
+       $effect(() => {
+               if ($trianglifyOpacity) {
+                       if (document.querySelector('canvas')) {
+                               document.querySelector('canvas').style.opacity = $trianglifyOpacity;
+                       }
+               }
+       });
+
        onMount(() => {
+               createBackground();
+
                document.getElementById('settingsModal').addEventListener('shown.bs.modal', function () {
                        const height = document.getElementById('modal-body').clientHeight;
                        document.getElementById('settings-content').style.height = 'calc(' + height + 'px - 2rem)';
@@ -136,9 +167,11 @@
                                                <div class="col-4 overflow-y-auto">
                                                        <nav class="flex-column align-items-stretch" id="settings-nav">
                                                                <nav class="nav nav-pills flex-column">
+                                                                       <a class="nav-link mb-1" href="#appearance">Aussehen</a>
+                                                                       <a href="#lightdark" class="ms-3 mb-1 nav-link">Light/Dark-Mode</a>
+                                                                       <a href="#background" class="ms-3 mb-1 nav-link">Hintergrund</a>
                                                                        <a class="nav-link mb-1" href="#functions">Funktionen</a>
                                                                        <nav class="nav nav-pills flex-column">
-                                                                               <a href="#lightdark" class="ms-3 mb-1 nav-link">Light/Dark-Mode</a>
                                                                                <a href="#language" class="ms-3 mb-1 nav-link">Sprache</a>
                                                                                <a href="#timezone" class="ms-3 mb-1 nav-link">Zeitzone</a>
                                                                                <a href="#onthisday" class="ms-3 mb-1 nav-link">An diesem Tag</a>
@@ -169,7 +202,7 @@
                                                                data-bs-smooth-scroll="true"
                                                                id="settings-content"
                                                        >
-                                                               <div id="functions"><h4>Funktionen</h4></div>
+                                                               <div id="appearance"><h4>Aussehen</h4></div>
                                                                <div id="lightdark">
                                                                        <h5>Light/Dark-Mode</h5>
                                                                        Bla<br />
@@ -177,6 +210,31 @@
                                                                        bla <br />
                                                                        blub <br />
                                                                </div>
+                                                               <div id="background">
+                                                                       <h5>Hintergrund</h5>
+                                                                       <div class="d-flex flex-row justify-content-start">
+                                                                               <label for="trianglifyOpacity" class="form-label"
+                                                                                       >Transparenz der Dreiecke</label
+                                                                               >
+                                                                               <input
+                                                                                       bind:value={$trianglifyOpacity}
+                                                                                       type="range"
+                                                                                       class="mx-3 form-range"
+                                                                                       id="trianglifyOpacity"
+                                                                                       min="0"
+                                                                                       max="1"
+                                                                                       step="0.01"
+                                                                               />
+                                                                               <input
+                                                                                       bind:value={$trianglifyOpacity}
+                                                                                       type="number"
+                                                                                       id="trianglifyOpacityNumber"
+                                                                               />
+                                                                       </div>
+                                                               </div>
+
+                                                               <div id="functions"><h4>Funktionen</h4></div>
+
                                                                <div id="language">
                                                                        <h5>Sprache</h5>
                                                                        Bla<br />
@@ -224,7 +282,8 @@
                                        </div>
                                </div>
                                <div class="modal-footer">
-                                       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                       <button type="button" class="btn btn-primary">Speichern</button>
+                                       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                                </div>
                        </div>
                </div>
@@ -232,14 +291,22 @@
 </main>
 
 <style>
+       #trianglifyOpacity {
+               max-width: 300px;
+       }
+
+       #trianglifyOpacityNumber {
+               width: 80px;
+       }
+
        .modal-body {
                overflow-y: hidden;
        }
 
        .modal-content {
-               backdrop-filter: blur(5px) saturate(150%);
+               backdrop-filter: blur(10px) saturate(150%);
                /* background-color: rgba(43, 56, 78, 0.75); */
-               background-color: rgba(136, 143, 155, 0.75);
+               background-color: rgba(208, 208, 208, 0.61);
                /* color: rgb(22, 22, 22); */
        }
 
@@ -256,7 +323,7 @@
 
                /* background-image: linear-gradient(#ff8a00, #e52e71); */
                /* background-image: linear-gradient(to right, violet, darkred, purple); */
-               background: linear-gradient(40deg, #38bdf8, #fb7185, #84cc16);
+               /* background: linear-gradient(40deg, #38bdf8, #fb7185, #84cc16); */
        }
 
        .wrapper {

diff --git a/frontend/src/routes/read/+page.svelte b/frontend/src/routes/read/+page.svelte
index f0b6513ee980d06403c18cef5047a62be2da16b2..0aa4c4892fd1f885237a17404d0f50afad1eff63 100644 (file)
--- a/frontend/src/routes/read/+page.svelte
+++ b/frontend/src/routes/read/+page.svelte
@@ -142,9 +142,10 @@
 
 <style>
        .log {
-               backdrop-filter: blur(5px) saturate(150%);
-               background-color: rgba(182, 183, 185, 0.75);
+               backdrop-filter: blur(10px) saturate(150%);
+               background-color: rgba(199, 199, 201, 0.329);
                border-radius: 15px;
+               border: 1px solid rgba(223, 221, 221, 0.658);
        }
 
        .dateNumber {