CampFire/CampFireID
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor loader fixes

Browse Source 
z-index в последнем коммите оставался поверх всего, исправил наложение
This commit is contained in:
Degradin 2025-03-05 16:23:09 +03:00
parent b588577e4f
commit 82306b76dd
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/index.html
View File

@ -1,20 +1,19 @@
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>CampFire ID</title>
<link rel="stylesheet" href="./styles/main.css">
</head>
<body>
<div class="containerloader">
<div class="block">
<span class="loader"></span>
</div>
<div class="containerloader" id="loader">
<div class="block">
<span class="loader"></span>
</div>
</div>
<main class="maincontainer">
<div class="userprofile">
<div class="userprofile_left">
<img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image">
@ -43,5 +42,8 @@
</div>
</main>
<!--connect backend-->
<script src="../backend/main.js"></script>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</body>
</html>

23
public/styles/main.css
View File

@ -150,13 +150,14 @@ body {
}
.containerloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--black);
z-index: 10 !important;
position: absolute;
width: 120%;
height: 120%;
opacity: 100%;
transform: translate(-8%, -21%);
z-index: 100;
opacity: 1;
padding: 35%;
animation: loadscreen 1s 1 normal forwards;
@ -200,15 +201,15 @@ body {
@keyframes loadscreen {
0% {
z-index: 1;
opacity: 100%;
z-index: 100;
opacity: 1;
}
80% {
z-index: 1;
opacity: 100%;
z-index: 100;
opacity: 1;
}
100% {
opacity: 0%;
opacity: 0;
z-index: -1
}
}