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

Содтӧд вермӧмъяс контейнер

Browse Source 
(Добавлен контейнер ачивок)
This commit is contained in:
dispainn 2025-03-04 21:35:34 +05:00
parent ee88dfa11f
commit 8e43925659
2 changed files with 120 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/index.html
View File

@ -9,21 +9,39 @@
</head> </head>
<body> <body>
<div class="containerloader"> <div class="containerloader">
<div class="block"> <div class="block">
<span class="loader"></span> <span class="loader"></span>
</div>
</div> </div>
</div> <main class="maincontainer">
<div class="userprofile">
<div class="userprofile_left"> <div class="userprofile">
<img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image"> <div class="userprofile_left">
<p class="userprofile_left_name">Profilename</p> <img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image">
<p class="userprofile_left_name">Profilename</p>
</div>
<div class="userprofile_right">
<p class="userprofile_right_info" id="info1">Роль:<br><span class="form">Campfire</span> </p>
<p class="userprofile_right_info" id="info2">Дата регистрации:<br><span class="form">24.05.1941</span></p>
<p class="userprofile_right_info" id="info3">Доступ к VPN:<br><span class="form">NO</span></p>
<p class="userprofile_right_info" id="info4">Доступ к Minecraft:<br><span class="form">YES</span></p>
</div>
</div> </div>
<div class="userprofile_right"> <div class="achievementcontainer">
<p class="userprofile_right_info" id="info1">Роль:<br><span class="form">Campfire</span> </p> <div class="achevement" id="achievement1">
<p class="userprofile_right_info" id="info2">Дата регистрации:<br><span class="form">24.05.1941</span></p> <img src="Images/Campfire.png" alt="none" class="achievement_image">
<p class="userprofile_right_info" id="info3">Доступ к VPN:<br><span class="form">NO</span></p> <p class="achievement_name">Ачивка</p>
<p class="userprofile_right_info" id="info4">Доступ к Minecraft:<br><span class="form">YES</span></p> </div>
<div class="achevement" id="achievement2">
<img src="Images/Campfire.png" alt="none" class="achievement_image">
<p class="achievement_name">Ачивка</p>
</div>
<div class="achevement" id="achievement3">
<img src="Images/Campfire.png" alt="none" class="achievement_image">
<p class="achievement_name">Ачивка</p>
</div>
</div> </div>
</div> </main>
</body> </body>
</html> </html>

91
public/styles/main.css
View File

@ -38,11 +38,17 @@ body {
font-family: PetrovSans; font-family: PetrovSans;
font-weight: 700; font-weight: 700;
} }
.maincontainer {
display: flex;
justify-content: center;
flex-direction: column;
}
/* * { /* * {
border: 1px solid white; border: 1px solid white;
} */ } */
.userprofile { .userprofile {
margin:10% 20%; margin: 20% 20% 0% 20%;
padding: 2% 8%; padding: 2% 8%;
@ -145,7 +151,7 @@ body {
.containerloader { .containerloader {
background-color: var(--black); background-color: var(--black);
z-index: 1; z-index: 10 !important;
position: absolute; position: absolute;
width: 120%; width: 120%;
height: 120%; height: 120%;
@ -156,7 +162,7 @@ body {
} }
.block { .block {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@ -169,6 +175,7 @@ body {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;
} }
.loader::after { .loader::after {
content: ''; content: '';
@ -205,3 +212,81 @@ body {
z-index: -1 z-index: -1
} }
} }
.achievementcontainer {
margin: 5% 20% 0% 20%;
padding: 2% 8%;
background-color: var(--white);
box-shadow: 0 0 15px var(--black);
display: flex;
justify-content: space-between;
column-gap: 10%;
border-radius: 10px;
overflow: hidden;
}
.achievement_name {
padding: 10px 0 0 0;
text-align: center;
font-size: 120%;
}
.achievement_image {
max-width: 100%;
max-height: auto;
border-radius: 10rem;
object-fit: cover;
outline: 3px solid var(--orange);
outline-offset: -3px;
background-size: cover;
background-position: center;
box-shadow: 0 0 20px var(--oragne-emission);
transition: all 0.3s ease;
}
.achievement_image:hover {
box-shadow: 0 0 20px px var(--oragne-emission);
transform: scale(1.05);
}
#achievement1 {
animation: achievementleft 1s 1 normal forwards;
animation-delay: 0.5s;
}
#achievement2 {
z-index: 1;
animation: achievementbig 1s 1 normal forwards;
animation-delay: 0.5s;
}
#achievement3 {
animation: achievementright 1s 1 normal forwards;
animation-delay: 0.5s;
}
@keyframes achievementleft {
0% {
transform: translate(200%, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes achievementright {
0% {
transform: translate(-200%, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes achievementbig {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1)
}
}