From b7a9a93905c40a3b849021094cd46246d4eae32c Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Thu, 21 Mar 2024 10:09:09 +0530
Subject: fixes: anime section is fully server rendered, added a loading screen
 for info and video page, minor css optimizations

---
 src/app/video/loading.css | 340 ++++++++++++++++++++++++++++++++++++++++++++++
 src/app/video/loading.jsx |   9 ++
 2 files changed, 349 insertions(+)
 create mode 100644 src/app/video/loading.css
 create mode 100644 src/app/video/loading.jsx

(limited to 'src/app/video')

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
diff --git a/src/app/video/loading.jsx b/src/app/video/loading.jsx
new file mode 100644
index 0000000..dfa397c
--- /dev/null
+++ b/src/app/video/loading.jsx
@@ -0,0 +1,9 @@
+import "./loading.css";
+
+export default function Loading() {
+	return (
+		<div className="loadingContainer">
+			<p className="text-flicker-in-glow">Loading</p>
+		</div>
+	);
+}
-- 
cgit v1.2.3