Add Friday the 13th feature: implement CSS and JS for themed animations and visibility toggle

2026-02-24 19:21:49 +01:00
parent 5c0d8af5d8
commit 437569ec1d
2 changed files with 101 additions and 0 deletions
--- a/Jellyfin.Plugin.Seasonals/Web/friday13.css
+++ b/Jellyfin.Plugin.Seasonals/Web/friday13.css
@@ -0,0 +1,35 @@
+.friday13-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10000;
+    contain: strict;
+    overflow: hidden;
+}
+
+.friday13-cat {
+    position: absolute;
+    width: 100px;
+    height: auto;
+    user-select: none;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    opacity: 0;
+}
+
+@keyframes cat-walk-right {
+    0% { left: -10vw; transform: scaleX(1); opacity: 1; }
+    99% { left: 110vw; transform: scaleX(1); opacity: 1; }
+    100% { opacity: 0; }
+}
+
+@keyframes cat-walk-left {
+    0% { left: 110vw; transform: scaleX(-1); opacity: 1; }
+    99% { left: -10vw; transform: scaleX(-1); opacity: 1; }
+    100% { opacity: 0; }
+}
+