feat: animated background

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tout-doux",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "private": true,
     "type": "module",
     "engines": {

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "tout-doux"
-version = "1.0.3"
+version = "1.0.4"
 description = ""
 requires-python = ">=3.14"
 dependencies = [

resources/css/style.css

@@ -10,3 +10,28 @@ body {
     font-style: normal;
     font-variation-settings: "wdth" 100;
 }
+
+.bg-hero {
+    --size: 5vh;
+    --angle: 45deg;
+    background: repeating-linear-gradient(
+        var(--angle),
+        var(--color-base-200) calc(0 * var(--size)),
+        var(--color-base-200) calc(1 * var(--size)),
+        var(--color-secondary) calc(1 * var(--size)),
+        var(--color-secondary) calc(2 * var(--size)),
+        var(--color-base-200) calc(2 * var(--size)),
+        var(--color-base-200) calc(3 * var(--size)),
+        var(--color-accent) calc(3 * var(--size)),
+        var(--color-accent) calc(4 * var(--size))
+    );
+    background-size: calc(4 * var(--size) / sin(var(--angle)))
+        calc(4 * var(--size) / sin(var(--angle)));
+    animation: BackgroundAnimate 10s linear infinite reverse;
+}
+
+@keyframes BackgroundAnimate {
+    0% {
+        background-position: calc(4 * var(--size) / sin(var(--angle))) 0;
+    }
+}

resources/ts/App.vue

@@ -22,7 +22,7 @@ onMounted(() => {
         :style="{ display: visible ? 'flex' : 'none' }"
         class="min-h-screen flex-col w-screen"
     >
-        <div class="hero bg-base-200 grow">
+        <div class="hero bg-hero grow">
             <div class="hero-content text-center p-0">
                 <div
                     class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md"

resources/ts/views/ListView.vue

@@ -25,6 +25,7 @@ import { shareLink } from "@/lib/share";
 const route = useRoute();
 
 const list = ref<string | null>(null);
+const loading = ref<boolean>(true);
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
 
@@ -54,6 +55,7 @@ function fetchTasks() {
             .then((data: Task[]) => {
                 tasks.value = data;
                 reSortTasks();
+                loading.value = false;
                 setTimeout(fetchTasks, 10000);
             })
             .catch(() => {
@@ -72,7 +74,7 @@ function reSortTasks() {
 }
 
 function onNewTask() {
-    if (taskInput.value.trim() && list.value) {
+    if (taskInput.value.trim() && list.value && !loading.value) {
         createTask(list.value, {
             name: taskInput.value.trim(),
             reset_cron: null,
@@ -179,7 +181,7 @@ onBeforeRouteUpdate((to) => {
             </li>
         </template>
         <li
-            v-if="empty"
+            v-if="!loading && empty"
             class="list-row italic text-xl font-extralight self-center"
         >
             <span
@@ -188,7 +190,7 @@ onBeforeRouteUpdate((to) => {
             ></span>
         </li>
         <li
-            v-else-if="allCompleted && separateCompleted"
+            v-else-if="!loading && allCompleted && separateCompleted"
             class="list-row italic text-xl font-extralight self-center"
         >
             <span
@@ -209,7 +211,7 @@ onBeforeRouteUpdate((to) => {
             <div>
                 <button
                     class="btn btn-square"
-                    :disabled="taskInput.trim().length === 0"
+                    :disabled="loading || taskInput.trim().length === 0"
                     @click="onNewTask"
                 >
                     <circle-plus-icon />

uv.lock

@@ -323,7 +323,7 @@ asyncpg = [
 
 [[package]]
 name = "tout-doux"
-version = "1.0.3"
+version = "1.0.4"
 source = { editable = "." }
 dependencies = [
     { name = "flask", extra = ["async"] },