add remote fancy screen through backend

2025-11-25 21:14:22 +00:00 · 2023-11-25 10:52:35 +01:00
parent 97bfd865cc
commit 8f8e63d8b7
11 changed files with 926 additions and 3 deletions
--- a/backend/ui/fancy/backgroundAnim.css
+++ b/backend/ui/fancy/backgroundAnim.css
@@ -0,0 +1,44 @@
+.background {
+    position: fixed;
+    left: -50vw;
+    width: 200vw;
+    height: 200vw;
+    top: -50vw;
+    z-index: -1;
+    filter: blur(10px);
+    background: conic-gradient( blue, green, red, blue );
+    animation: gradientAnim 10s infinite linear;
+    background-position: center;
+}
+
+.beat, .beat-manual {
+    height: 100%;
+    width: 100%;
+    background-color: rgba( 0, 0, 0, 0.15 );
+    display: none;
+}
+
+.beat {
+    animation: beatAnim 0.6s infinite linear;
+}
+
+@keyframes beatAnim {
+    0% {
+        background-color: rgba( 0, 0, 0, 0.2 );
+    }
+    20% {
+        background-color: rgba( 0, 0, 0, 0 );
+    }
+    100% {
+        background-color: rgba( 0, 0, 0, 0.2 );
+    }
+}
+
+@keyframes gradientAnim {
+    from {
+        transform: rotate( 0deg );
+    }
+    to {
+        transform: rotate( 360deg );
+    }
+}