From aa5209d225a3317ae81e4979e1cf3c39e0b3acfd Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Mon, 10 Feb 2025 22:27:30 +0000
Subject: [PATCH] add splash screen

---
 packages/app/index.html | 216 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 198 insertions(+), 18 deletions(-)
diff --git a/packages/app/index.html b/packages/app/index.html
index 8361d8ca..d5024502 100755
--- a/packages/app/index.html
+++ b/packages/app/index.html
@@ -1,22 +1,202 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+		<meta
+			name="viewport"
+			content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+		/>
+		<meta
+			name="description"
+			content="Comty, a prototype of social network."
+		/>
+		<meta name="title" content="Comty" />
+		<meta
+			name="description"
+			content="Comty, a prototype of social network."
+		/>
+		<meta property="og:title" content="Comty" />
+		<meta
+			property="og:description"
+			content="Comty, a prototype of social network."
+		/>
+		<meta
+			property="og:image"
+			content="https://storage.ragestudio.net/rstudio/branding/comty/iso/basic_alt.svg"
+		/>
+	</head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-  <meta name="viewport"
-    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="description" content="Comty, a prototype of social network." />
-  <meta name="title" content="Comty" />
-  <meta name="description" content="Comty, a prototype of social network." />
-  <meta property="og:title" content="Comty" />
-  <meta property="og:description" content="Comty, a prototype of social network." />
-  <meta property="og:image" content="https://storage.ragestudio.net/rstudio/branding/comty/iso/basic_alt.svg" />
-</head>
+	<style>
+		.app_splash_visible {
+			opacity: 1 !important;
+			pointer-events: auto;
+		}
 
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/App.jsx"></script>
-</body>
+		.app_splash {
+			z-index: 9999;
+			position: fixed;
 
-</html>
\ No newline at end of file
+			top: 0;
+			left: 0;
+
+			overflow: hidden;
+
+			background-color: #252525;
+			color: #d7d7d7;
+
+			width: 100vw;
+			height: 100vh;
+			height: 100dvh;
+
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			opacity: 0;
+			pointer-events: none;
+
+			transition: all 300ms ease-in-out;
+		}
+
+		.app_splash .app_splash_content {
+			position: relative;
+			z-index: 100;
+
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			padding: 70px;
+
+			width: 300px;
+			height: 300px;
+		}
+
+		.app_splash .app_splash_content .app_splash_content_logo {
+			width: 230px;
+			height: 230px;
+		}
+
+		.app_splash_content_loader_wrapper {
+			user-select: none;
+
+			position: fixed;
+
+			z-index: 1000;
+
+			right: 0;
+			bottom: 0;
+
+			width: fit-content;
+			height: 30px;
+
+			margin: 40px 50px;
+
+			background-color: #2d2d2dc2;
+			border-radius: 28px;
+		}
+
+		.app_splash_content_loader_wrapper .app_splash_content_loader {
+			transform: scale(0.28);
+			width: 54px;
+			height: 23px;
+		}
+
+		.app_splash_content_loader_wrapper .app_splash_content_loader > div {
+			width: 6px;
+			height: 20px;
+
+			position: absolute;
+
+			left: -10px;
+			bottom: 15px;
+			border-radius: 5px;
+			transform-origin: 10px 35px;
+			transform: rotate(0deg);
+			animation: loader 0.8s infinite;
+		}
+		.app_splash_content_loader_wrapper
+			.app_splash_content_loader
+			> div:nth-child(2) {
+			transform: rotate(45deg);
+			animation-delay: 0.1s;
+		}
+		.app_splash_content_loader_wrapper
+			.app_splash_content_loader
+			> div:nth-child(3) {
+			transform: rotate(90deg);
+			animation-delay: 0.2s;
+		}
+		.app_splash_content_loader_wrapper
+			.app_splash_content_loader
+			> div:nth-child(4) {
+			transform: rotate(135deg);
+			animation-delay: 0.3s;
+		}
+		.app_splash_content_loader_wrapper
+			.app_splash_content_loader
+			> div:nth-child(5) {
+			transform: rotate(180deg);
+			animation-delay: 0.4s;
+		}
+		.app_splash_content_loader_wrapper
+			.app_splash_content_loader
+			> div:nth-child(6) {
+			transform: rotate(225deg);
+			animation-delay: 0.5s;
+		}
+		.app_splash_content_loader_wrapper
+			.app_splash_content_loader
+			> div:nth-child(7) {
+			transform: rotate(270deg);
+			animation-delay: 0.6s;
+		}
+		.app_splash_content_loader_wrapper
+			.app_splash_content_loader
+			> div:nth-child(8) {
+			transform: rotate(315deg);
+			animation-delay: 0.7s;
+		}
+		@keyframes loader {
+			0% {
+				background: transparent;
+				left: -10px;
+				transform-origin: 10px 35px;
+			}
+			30% {
+				background: #fff;
+			}
+			100% {
+				background: transparent;
+				left: 10px;
+				transform-origin: -10px 35px;
+			}
+		}
+	</style>
+
+	<body>
+		<div id="splash-screen" class="app_splash app_splash_visible">
+			<div class="app_splash_content">
+				<img class="app_splash_content_logo" src="/basic_alt.svg" />
+
+				<div class="app_splash_content_loader_wrapper">
+					<div class="app_splash_content_loader">
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="root"></div>
+		<script type="module" src="/src/App.jsx"></script>
+	</body>
+</html>
