RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

add splash screen

Browse Source
This commit is contained in:
SrGooglo 2025-02-10 22:27:30 +00:00
parent 79b1f620a3
commit aa5209d225
1 changed files with 198 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
packages/app/index.html
View File

@ -1,22 +1,202 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" <meta
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> name="viewport"
<meta name="description" content="Comty, a prototype of social network." /> 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="title" content="Comty" />
<meta name="description" content="Comty, a prototype of social network." /> <meta
name="description"
content="Comty, a prototype of social network."
/>
<meta property="og:title" content="Comty" /> <meta property="og:title" content="Comty" />
<meta property="og:description" content="Comty, a prototype of social network." /> <meta
<meta property="og:image" content="https://storage.ragestudio.net/rstudio/branding/comty/iso/basic_alt.svg" /> property="og:description"
</head> content="Comty, a prototype of social network."
/>
<meta
property="og:image"
content="https://storage.ragestudio.net/rstudio/branding/comty/iso/basic_alt.svg"
/>
</head>
<body> <style>
.app_splash_visible {
opacity: 1 !important;
pointer-events: auto;
}
.app_splash {
z-index: 9999;
position: fixed;
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> <div id="root"></div>
<script type="module" src="/src/App.jsx"></script> <script type="module" src="/src/App.jsx"></script>
</body> </body>
</html> </html>