initial commit

frontend/src/lib/icons/checkmark-animated.svelte

@@ -0,0 +1,27 @@
+<svg
+	class="checkmark block stroke-green-600 stroke-[5px] {$$restProps.class}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 52 52"
+>
+	<path class="checkmark__check" fill="none" d="M5,26 L20,41 L47,14" />
+</svg>
+
+<style>
+	.checkmark {
+		stroke-miterlimit: 10;
+		stroke-linecap: round;
+	}
+
+	.checkmark__check {
+		transform-origin: 50% 50%;
+		stroke-dasharray: 72;
+		stroke-dashoffset: 72;
+		animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
+	}
+
+	@keyframes stroke {
+		100% {
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

frontend/src/lib/icons/connect-arrow.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { mode } from 'mode-watcher';
+</script>
+
+<svg
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 181.0484047549312 72.61928578581296"
+	class={$$restProps.class}
+>
+	<g stroke-linecap="round"
+		><g
+			transform="translate(11.145277371630073 36.74839942056428) rotate(0 79.30063906887085 0.9091689232315048)"
+			><path
+				d="M-1.15 0.32 C11.9 0.63, 64.54 5.67, 78.54 2.21 C92.54 -1.25, 87.24 -16.24, 82.86 -20.46 C78.48 -24.68, 53.29 -30.73, 52.26 -23.11 C51.23 -15.49, 66.97 22.37, 76.69 25.25 C86.4 28.14, 96.82 -0.58, 110.54 -5.8 C124.26 -11.02, 151.22 -5.98, 159.03 -6.04 M0.45 -0.56 C13.84 -0.08, 66.55 6.8, 80.7 3.71 C94.85 0.61, 90.01 -14.87, 85.35 -19.14 C80.69 -23.4, 54.44 -29.38, 52.74 -21.91 C51.04 -14.43, 65.36 23.23, 75.14 25.72 C84.92 28.21, 97.29 -1.48, 111.42 -6.95 C125.55 -12.43, 151.9 -7.26, 159.9 -7.14"
+				stroke={$mode == 'dark' ? 'white' : 'black'}
+				stroke-width="2"
+				fill="none"
+			></path></g
+		><g
+			transform="translate(11.145277371630073 36.74839942056428) rotate(0 79.30063906887085 0.9091689232315048)"
+			><path
+				d="M137.15 -1.16 C144.96 -4.61, 151.62 -6.07, 159.9 -7.14 M137.15 -1.16 C143.85 -2.87, 149.96 -4.97, 159.9 -7.14"
+				stroke={$mode == 'dark' ? 'white' : 'black'}
+				stroke-width="2"
+				fill="none"
+			></path></g
+		><g
+			transform="translate(11.145277371630073 36.74839942056428) rotate(0 79.30063906887085 0.9091689232315048)"
+			><path
+				d="M138.63 -17.19 C146.01 -15.51, 152.19 -11.82, 159.9 -7.14 M138.63 -17.19 C144.94 -14.07, 150.61 -11.36, 159.9 -7.14"
+				stroke={$mode == 'dark' ? 'white' : 'black'}
+				stroke-width="2"
+				fill="none"
+			></path></g
+		></g
+	><mask></mask></svg
+>

frontend/src/lib/icons/cross-animated.svelte

@@ -0,0 +1,35 @@
+<svg
+	class="stroke-red-600 stroke-[13px] {$$restProps.class}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 85 85"
+>
+	<path
+		class="line1"
+		d="M5,5 L80,80"
+	></path>
+	<path
+		class="line2"
+		d="M80,5 L5,80"
+	></path>
+</svg>
+
+<style>
+	.line1 {
+		stroke-dasharray: 107px;
+		stroke-dashoffset: 107px;
+		stroke-linecap: round;
+		animation: ani-error-line 0.15s 0.3s linear both;
+	}
+	.line2 {
+		stroke-dasharray: 107px;
+		stroke-dashoffset: 107px;
+		stroke-linecap: round;
+		animation: ani-error-line 0.2s 0.6s linear both;
+	}
+
+	@keyframes ani-error-line {
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+</style>