✨ Add web page to display during the wasm bundle

2024-04-12 14:32:15 +02:00
parent 78cb65e054
commit df33e94a12
4 changed files with 248 additions and 3 deletions
--- a/public/assets/index.css
+++ b/public/assets/index.css
@@ -0,0 +1,191 @@
+html, body {
+    height: 100%;
+    width: 100%;
+
+    margin: 0;
+}
+
+#main {
+    height: 100%;
+    width: 100%;
+}
+
+@keyframes multicolor {
+    0%  { fill: #1DB2CF; /* color-primary-100 */ }
+    33% { fill: #7E6BB6; /* color-secondary-100 */ }
+    66% { fill: #D53583; /* color-ternary-100 */ }
+}
+
+:root {
+    --wallpaper-pattern-height: 128px;
+    --spinner-height: calc(32px * 2);
+    --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
+}
+
+/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
+@media (min-height: 0px) and (max-height: 640px) {
+    :root {
+        --spinner-top: var(--window-center-pos);
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
+@media (min-height: 640px) and (max-height: 768px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 1));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
+@media (min-height: 768px) and (max-height: 1024px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
+@media (min-height: 1024px) and (max-height: 1280px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
+@media (min-height: 1280px) and (max-height: 1536px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
+@media (min-height: 1536px) and (max-height: 1792px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
+@media (min-height: 1792px) and (max-height: 2048px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
+@media (min-height: 2048px) and (max-height: 2304px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
+@media (min-height: 2304px) and (max-height: 2560px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
+@media (min-height: 2560px) and (max-height: 2816px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
+@media (min-height: 2816px) and (max-height: 3072px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
+@media (min-height: 3072px) and (max-height: 3328px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
+@media (min-height: 3328px) and (max-height: 3584px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
+@media (min-height: 3584px) and (max-height: 3840px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
+@media (min-height: 3840px) and (max-height: 4096px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
+@media (min-height: 4096px) and (max-height: 4352px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
+@media (min-height: 4352px) and (max-height: 4608px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
+@media (min-height: 4608px) and (max-height: 4864px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
+@media (min-height: 4864px) and (max-height: 5120px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
+    }
+}
+
+.loader {
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .wallpaper {
+        height: 100%;
+        width: 100%;
+        z-index: -1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        overflow: hidden;
+
+        .content {
+            background-image: url("../images/wallpaper-pattern.svg");
+            background-position: center;
+
+            width: 150%;
+            height: 150%;
+        }
+    }
+
+    .spinner {
+        height: 5%;
+        aspect-ratio: 2;
+
+        position: absolute;
+
+        top: var(--spinner-top);
+
+        svg {
+            --fps: 4;
+            --duration_sec: 3;
+            --steps: calc(var(--duration_sec) * var(--fps));
+
+            height: 100%;
+            width: 100%;
+
+            fill: #1DB2CF; /* color-primary-100 */
+            stroke: #1B1B1B; /* greyscale-90 */
+
+            animation: 3s multicolor linear infinite;
+            animation-timing-function: steps(var(--steps), end);
+        }
+    }
+}