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>
<body>
<div class="containerloader">
<div class="block">
<span class="loader"></span>
<div class="block">
<span class="loader"></span>
</div>
</div>
</div>
<div class="userprofile">
<div class="userprofile_left">
<img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image">
<p class="userprofile_left_name">Profilename</p>
<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">
<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 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 class="achievementcontainer">
<div class="achevement" id="achievement1">
<img src="Images/Campfire.png" alt="none" class="achievement_image">
<p class="achievement_name">Ачивка</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>
</main>
</body>
</html>

93
public/styles/main.css
View File

@ -38,11 +38,17 @@ body {
font-family: PetrovSans;
font-weight: 700;
}
.maincontainer {
display: flex;
justify-content: center;
flex-direction: column;
}
/* * {
border: 1px solid white;
} */
.userprofile {
margin:10% 20%;
margin: 20% 20% 0% 20%;
padding: 2% 8%;
@ -145,7 +151,7 @@ body {
.containerloader {
background-color: var(--black);
z-index: 1;
z-index: 10 !important;
position: absolute;
width: 120%;
height: 120%;
@ -156,7 +162,7 @@ body {
}
.block {
display: flex;
display: flex;
justify-content: center;
}
@ -169,6 +175,7 @@ body {
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
@ -204,4 +211,82 @@ body {
opacity: 0%;
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)
}
}