New loading animation

fe_calckey/frontend/assets-be/style.template.css

@@ -32,9 +32,6 @@ html {
 	width: 64px;
 	height: 64px;
 	pointer-events: none;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-name: tada;
 }
 
 #splashSpinner {
@@ -44,13 +41,28 @@ html {
 	bottom: 0;
 	left: 0;
 	margin: auto;
-	display: inline-block;
 	width: 28px;
 	height: 28px;
 	transform: translateY(110px);
 	display: none;
 	color: var(--accent);
 }
+
+#splashText {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	display: inline-block;
+	width: 70%;
+	height: 0;
+	text-align: center;
+	padding-top: 100px;
+	font-family: sans-serif;
+}
+
 #splashSpinner > .spinner {
 	position: absolute;
 	top: 0;
@@ -79,34 +91,6 @@ html {
 	}
 }
 
-@keyframes tada {
-	0% {
-		transform: scale3d(1, 1, 1);
-	}
-
-	10%,
-	20% {
-		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
-	}
-
-	30%,
-	50%,
-	70%,
-	90% {
-		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-	}
-
-	40%,
-	60%,
-	80% {
-		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-	}
-
-	100% {
-		transform: scale3d(1, 1, 1);
-	}
-}
-
 @media(prefers-reduced-motion) {
 	#splashSpinner {
 		display: block;
@@ -117,17 +101,99 @@ html {
 	}
 }
 
-#splashText {
+.loadButterfly {
-	position: absolute;
+  position: absolute;
-	top: 0;
+  top: -68px;
-	right: 0;
+  right: 32px;
-	bottom: 0;
+  width: 64px;
-	left: 0;
+  height: 64px;
-	margin: auto;
+}
-	display: inline-block;
+
-	width: 70%;
+.loadButterfly .loadButterflyWingLeft {
-	height: 0;
+    position: absolute;
-	text-align: center;
+    left: 1px;
-	padding-top: 100px;
+    --butterfly-wl-0: rgb(255, 185, 158);
-	font-family: sans-serif;
+    --butterfly-wl-1: rgb(118, 70, 255);
+    animation-name: anim-lw;
+    animation-duration: 3s;
+    animation-timing-function: ease-out;
+    animation-iteration-count: infinite;
+}
+
+@media (prefers-reduced-motion) {
+	.loadButterfly .loadButterflyWingLeft {
+		animation-play-state: paused;
+	}
+}
+
+
+@keyframes anim-lw {
+  0% {
+    transform: rotate3d(1, 1, 0, 1deg);
+  }
+
+  10% {
+    filter: brightness(1.05);
+  }
+
+  25% {
+    transform: rotate3d(1, 1, 0, 45deg);
+    filter: brightness(1.25);
+  }
+
+  40% {
+    filter: brightness(1.05);
+  }
+
+  50% {
+    transform: rotate3d(1, 1, 0, 1deg);
+  }
+
+  100% {
+    transform: rotate3d(1, 1, 0, 1deg);
+  }
+}
+
+.loadButterfly .loadButterflyWingRight {
+	position: absolute;
+	top: 1px;
+    --butterfly-wr-0: rgb(255, 185, 158);
+    --butterfly-wr-1: rgb(118, 70, 255);
+	animation-name: anim-rw;
+	animation-duration: 3s;
+	animation-timing-function: ease-out;
+	animation-iteration-count: infinite;
+}
+
+@media (prefers-reduced-motion) {
+	.loadButterfly .loadButterflyWingRight {
+		animation-play-state: paused;
+	}
+}
+
+@keyframes anim-rw {
+	0% {
+		transform: rotate3d(1, 1, 0, -1deg);
+	}
+
+	10% {
+		filter: brightness(0.95);
+	}
+
+	25% {
+		transform: rotate3d(1, 1, 0, -45deg);
+		filter: brightness(0.8);
+	}
+
+	40% {
+		filter: brightness(0.95);
+	}
+
+	50% {
+		transform: rotate3d(1, 1, 0, -1deg);
+	}
+
+	100% {
+		transform: rotate3d(1, 1, 0, -1deg);
+	}
 }

fe_calckey/frontend/assets-be/template/base.html

@@ -41,7 +41,6 @@
     <script>
         var VERSION = "{{ version }}";
         var CLIENT_ENTRY = "{{ client_entry.file }}";
-        var LANGS = ["en-US"];
         var _HOST = "{{ instance_host }}";
 
         {% if base_url %}
@@ -57,6 +56,81 @@
     <noscript>
         Please turn on JavaScript to run {{ title | capitalize }}.
     </noscript>
+    <div id="splash">
+        <div id="splashIcon">
+            {% if splash_icon %}
+            <img id="splashIcon" src="{{ splashIcon }}" alt="{{ instance_name }} splash icon">
+            {% else %}
+            <div class="loadButterfly">
+                <svg
+                    class="loadButterflyWingLeft"
+                    width="128"
+                    height="128"
+                    version="1.1"
+                    viewBox="0 0 132.29 132.29"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <linearGradient
+                            id="left-wing-gradient"
+                            gradientUnits="userSpaceOnUse"
+                            x1="0"
+                            y1="132.29"
+                            x2="132.29"
+                            y2="0">
+                            <stop offset="0%" stop-color="var(--butterfly-wl-0)"/>
+                            <stop offset="100%" stop-color="var(--butterfly-wl-1)"/>
+                        </linearGradient>
+                    </defs>
+                    <path
+                        d="m69.68 67.053-16.078-1.6896-29.054 6.7403-15.672 10.996-0.12846 11.477 11.469 7.3293 20.661 9.219 10.9-7.602 0.0656 8.203 10.532 7.894 19.116 2.389 16.046-8.952-2.2676-13.201-7.7352-12.772-0.134-0.1705z"
+                        fill="url(#left-wing-gradient)"
+                    />
+                </svg>
+                <svg
+                    class="loadButterflyWingRight"
+                    width="128"
+                    height="128"
+                    version="1.1"
+                    viewBox="0 0 132.29 132.29"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <linearGradient
+                            id="right-wing-gradient"
+                            gradientUnits="userSpaceOnUse"
+                            x1="0"
+                            y1="132.29"
+                            x2="132.29"
+                            y2="0">
+                            <stop offset="0%" stop-color="var(--butterfly-wr-0)"/>
+                            <stop offset="100%" stop-color="var(--butterfly-wr-1)"/>
+                        </linearGradient>
+                    </defs>
+                    <path
+                        d="m92.532 8.4622-12.705 14.323-9.9988 28.101-0.1483 16.167 17.719 19.86 0.1565 0.1518 11.809 9.1357 12.859 3.7536 10.718-14.924-0.204-19.263-6.646-11.36-8.142-0.9981 8.79-9.9657-6.81-21.574-5.98-12.229z"
+                        fill="url(#right-wing-gradient)"
+                    />
+                </svg>
+            </div>
+            {% endif %}
+        </div>
+        <div id="splashText">
+            Loading <b>{{ instance_name }}</b>...
+            <br>
+            ({{ title ~ " " ~ version }})
+        </div>
+        <div id="splashSpinner">
+            <svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
+                <g transform="matrix(1,0,0,1,12,12)">
+                    <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+                </g>
+            </svg>
+            <svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
+                <g transform="matrix(1,0,0,1,12,12)">
+                    <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+                </g>
+            </svg>
+        </div>
+    </div>
     <div class="content">
 
     </div>

fe_calckey/frontend/client/src/store.ts

@@ -93,8 +93,8 @@ export const defaultStore = markRaw(
 				"💢",
 				"😥",
 				"😇",
-				"🥴",
+				"🦋",
-				"🍮",
+				"🦊",
 			],
 		},
 		mutedWords: {