Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-23 19:02:29 +01:00
Code Issues Releases Activity

revamp splashscreen

Browse Source
This commit is contained in:
Puyodead1 2023-12-22 16:51:47 -05:00
parent 06c5f1ccbd
commit 4051540301
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
3 changed files with 88 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/Spacebar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

87
public/splashscreen.css
View File

@ -1,3 +1,15 @@
/* roboto-latin-400-normal */
@font-face {
font-family: "Roboto";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.woff2) format("woff2"),
url(https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.woff) format("woff");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
padding: 0;
margin: 0;
@ -5,76 +17,19 @@
body {
overflow: hidden;
background: url(Spacebar.png);
background-size: cover;
background-color: #121212;
color: #fff;
font-family: "Roboto", sans-serif;
}
img {
max-width: 100%;
max-height: 100vh;
margin: auto;
svg {
max-width: 80vw;
}
.loader-wrapper {
height: 100vh;
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
align-items: center;
height: 100vh;
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}

73
public/splashscreen.html
View File

@ -7,12 +7,73 @@
<title>Splashscreen</title>
</head>
<body>
<div class="loader-wrapper">
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
<div class="container">
<svg width="1442" viewBox="0 0 1442 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Iconmark">
<path
id="Vector"
fill-rule="evenodd"
clip-rule="evenodd"
d="M235.497 138C238.806 153.394 234.982 169.46 225.097 181.709C215.211 193.958 200.321 201.077 184.589 201.077H52.0732C36.3408 201.077 21.451 193.958 11.5658 181.709C1.67958 169.46 -2.14373 153.394 1.1649 138L24.4985 29.4245C25.5849 24.3682 29.0541 20.1534 33.8052 18.1191C38.5563 16.0838 43.9981 16.4817 48.4028 19.1861L118.331 62.1159L188.259 19.1861C192.664 16.4817 198.106 16.0838 202.857 18.1191C207.608 20.1534 211.077 24.3682 212.163 29.4245L235.497 138ZM181.883 112.957C181.883 105.091 175.511 98.7142 167.652 98.7142H140.235C132.375 98.7142 126.005 105.091 126.005 112.957V140.398C126.005 148.264 132.375 154.64 140.235 154.64H167.652C175.511 154.64 181.883 148.264 181.883 140.398V112.957ZM110.657 112.957C110.657 105.091 104.287 98.7142 96.4272 98.7142H69.0101C61.1507 98.7142 54.7792 105.091 54.7792 112.957V140.398C54.7792 148.264 61.1507 154.64 69.0101 154.64H96.4272C104.287 154.64 110.657 148.264 110.657 140.398V112.957Z"
fill="#0185FF"
/>
<path
id="RightEye"
d="M125.8 112.7C125.8 104.968 132.068 98.7 139.8 98.7H167.8C175.532 98.7 181.8 104.968 181.8 112.7V140.7C181.8 148.432 175.532 154.7 167.8 154.7H139.8C132.068 154.7 125.8 148.432 125.8 140.7V112.7Z"
fill="none"
/>
<path
id="LeftEye"
d="M54.8 112.7C54.8 104.968 61.068 98.7 68.8 98.7H96.8C104.532 98.7 110.8 104.968 110.8 112.7V140.7C110.8 148.432 104.532 154.7 96.8 154.7H68.8C61.068 154.7 54.8 148.432 54.8 140.7V112.7Z"
fill="none"
/>
</g>
<g id="Wordmark">
<path
id="Vector_2"
d="M379.118 10.8465C335.763 10.8465 309.821 35.8002 309.821 68.8373C309.821 103.909 339.541 116.525 361.461 124.852C379.37 131.916 392.488 136.963 392.488 148.065C392.488 158.158 382.145 165.474 364.487 165.474C344.578 165.474 324.177 156.643 310.828 145.289V190.428C324.177 199.754 345.838 207.064 369.532 207.064C413.897 207.064 441.098 182.111 441.098 146.551C441.098 108.703 409.615 96.5916 383.659 87.0039C366.253 80.1914 356.919 76.1541 356.919 67.3229C356.919 58.2396 366.506 52.4358 382.397 52.4358C398.281 52.4358 417.675 57.9874 429.765 66.5664V23.7016C416.667 16.14 398.785 10.8465 379.118 10.8465Z"
fill="#0185FF"
/>
<path
id="Vector_3"
d="M448.725 256H495.572V183.874C503.893 197.233 520.538 206.812 538.443 206.812C571.203 206.812 599.916 177.825 599.916 132.682C599.916 87.5075 569.943 58.269 537.183 58.269C516.752 58.269 501.623 69.1075 492.801 81.9626L488.519 62.0529H448.725V256ZM495.067 132.667C495.067 113.486 506.919 100.11 523.56 100.11C540.46 100.11 552.561 113.991 552.561 132.414C552.561 150.585 540.46 164.97 523.312 164.97C506.919 164.97 495.067 151.342 495.067 132.667Z"
fill="#0185FF"
/>
<path
id="Vector_4"
d="M667.938 206.812C689.12 206.812 703.748 195.973 712.318 183.118H712.566L717.102 203.028H756.899V62.0529H717.102L712.566 81.9626H712.318C703.748 69.1075 689.12 58.269 667.938 58.269C636.438 58.269 605.708 88.2641 605.708 132.903C605.708 176.817 636.438 206.812 667.938 206.812ZM653.056 132.682C653.056 114.496 665.164 100.11 682.312 100.11C698.702 100.11 710.804 113.739 710.804 132.667C710.804 151.342 698.702 164.97 682.312 164.97C665.164 164.97 653.056 151.096 653.056 132.682Z"
fill="#0185FF"
/>
<path
id="Vector_5"
d="M811.607 132.667C811.607 112.729 827.233 100.11 846.893 100.11C858.995 100.11 870.085 103.139 881.677 110.458V68.0988C869.328 61.2937 853.701 58.269 839.583 58.269C797.508 58.269 764.259 88.7677 764.259 132.414C764.259 176.061 797.254 206.812 839.583 206.812C854.204 206.812 869.576 203.283 881.677 196.982V154.623C870.085 162.951 858.238 164.97 847.148 164.97C827.233 164.97 811.607 152.604 811.607 132.667Z"
fill="#0185FF"
/>
<path
id="Vector_6"
d="M967.641 206.812C985.532 206.812 1001.9 203.031 1016.26 195.219V158.144C1003.41 165.216 989.311 170.52 973.939 170.52C954.534 170.52 937.896 162.185 931.852 145.263H1024.32C1025.07 140.728 1025.58 135.689 1025.58 130.146C1025.58 83.22 995.603 58.269 958.816 58.269C918.242 58.269 886.99 88.5129 886.99 132.918C886.99 175.56 915.971 206.812 967.641 206.812ZM930.84 118.304C934.619 103.654 945.709 94.5615 958.568 94.5615C971.923 94.5615 980.748 104.159 981.25 118.304H930.84Z"
fill="#0185FF"
/>
<path
id="Vector_7"
d="M1080.04 0H1033.19V203.028H1072.99L1077.27 183.118C1086.09 195.973 1101.22 206.812 1121.39 206.812C1154.15 206.812 1184.38 177.825 1184.38 132.667C1184.38 87.2554 1156.17 58.2691 1123.67 58.2691C1105.76 58.2691 1088.36 67.8474 1080.04 81.2061V0ZM1079.53 132.667C1079.53 113.739 1091.39 100.111 1107.78 100.111C1124.93 100.111 1137.03 114.496 1137.03 132.919C1137.03 151.09 1124.93 164.97 1108.03 164.97C1091.39 164.97 1079.53 151.595 1079.53 132.667Z"
fill="#0185FF"
/>
<path
id="Vector_8"
d="M1252.4 206.812C1273.59 206.812 1288.21 195.973 1296.78 183.118H1297.03L1301.57 203.028H1341.36V62.0529H1301.57L1297.03 81.9626H1296.78C1288.21 69.1075 1273.59 58.269 1252.4 58.269C1220.9 58.269 1190.17 88.2641 1190.17 132.903C1190.17 176.817 1220.9 206.812 1252.4 206.812ZM1237.52 132.682C1237.52 114.496 1249.63 100.11 1266.78 100.11C1283.17 100.11 1295.27 113.739 1295.27 132.667C1295.27 151.342 1283.17 164.97 1266.78 164.97C1249.63 164.97 1237.52 151.096 1237.52 132.682Z"
fill="#0185FF"
/>
<path
id="Vector_9"
d="M1351.05 203.028H1397.9V138.214C1397.9 112.471 1413.27 103.894 1429.65 103.894C1433.68 103.894 1437.97 104.399 1442 105.408V61.8008C1438.72 60.7907 1435.45 60.5392 1431.16 60.5392C1418.31 60.5392 1402.69 66.0862 1393.36 82.7312H1392.86L1388.33 62.0529H1351.05V203.028Z"
fill="#0185FF"
/>
</g>
</svg>
<div>
<span>Starting...</span>
</div>
</div>
</body>