fixes: anime section is fully server rendered, added a loading screen for info and video page, minor css optimizations

1 files changed, 340 insertions, 0 deletions

diff --git a/src/app/video/loading.css b/src/app/video/loading.css
new file mode 100644
index 0000000..f73beca
--- /dev/null
+++ b/src/app/video/loading.css
@@ -0,0 +1,340 @@
+.loadingContainer {
+	color: white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 80dvh;
+}
+
+
+.text-flicker-in-glow {
+	-webkit-animation: text-flicker-in-glow 4s linear both;
+	animation: text-flicker-in-glow 4s linear both;
+	font-size: 36px;
+	font-family: "Kanit";
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2024-3-21 9:58:16
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation text-flicker-in-glow
+ * ----------------------------------------
+ */
+
+@-webkit-keyframes text-flicker-in-glow {
+	0% {
+		opacity: 0;
+	}
+
+	10% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	10.1% {
+		opacity: 1;
+		text-shadow: none;
+	}
+
+	10.2% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	20% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	20.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
+	}
+
+	20.6% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	30% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	30.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	30.5% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	30.6% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	45% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	45.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	50% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	55% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	55.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	57% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	57.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+	}
+
+	60% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+	}
+
+	60.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	65% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	65.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	75% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	75.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	77% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	77.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	85% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	85.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	86% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	86.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	100% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+}
+
+@keyframes text-flicker-in-glow {
+	0% {
+		opacity: 0;
+	}
+
+	10% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	10.1% {
+		opacity: 1;
+		text-shadow: none;
+	}
+
+	10.2% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	20% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	20.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
+	}
+
+	20.6% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	30% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	30.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	30.5% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	30.6% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	45% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	45.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	50% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	55% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
+	}
+
+	55.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	57% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	57.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+	}
+
+	60% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
+	}
+
+	60.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	65% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	65.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	75% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	75.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	77% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	77.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	85% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	85.1% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	86% {
+		opacity: 0;
+		text-shadow: none;
+	}
+
+	86.1% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+
+	100% {
+		opacity: 1;
+		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
+	}
+}
\ No newline at end of file