From 8e43925659f2703bbe273a56652b19d9fc67713a Mon Sep 17 00:00:00 2001 From: dispainn <1universer@gmail.com> Date: Tue, 4 Mar 2025 21:35:34 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B4=D1=82=D3=A7=D0=B4=20=D0=B2?= =?UTF-8?q?=D0=B5=D1=80=D0=BC=D3=A7=D0=BC=D1=8A=D1=8F=D1=81=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=BD=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (Добавлен контейнер ачивок) --- public/index.html | 44 ++++++++++++++------ public/styles/main.css | 93 ++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 120 insertions(+), 17 deletions(-) diff --git a/public/index.html b/public/index.html index 2c71713..c6f852c 100644 --- a/public/index.html +++ b/public/index.html @@ -9,21 +9,39 @@
-
- +
+ +
-
-
-
- Picture -

Profilename

+
+ +
+
+ Picture +

Profilename

+
+
+

Роль:
Campfire

+

Дата регистрации:
24.05.1941

+

Доступ к VPN:
NO

+

Доступ к Minecraft:
YES

+
-
-

Роль:
Campfire

-

Дата регистрации:
24.05.1941

-

Доступ к VPN:
NO

-

Доступ к Minecraft:
YES

+
+
+ none +

Ачивка

+
+
+ none +

Ачивка

+
+
+ none +

Ачивка

+
+
-
+
\ No newline at end of file diff --git a/public/styles/main.css b/public/styles/main.css index 2917367..1b3580a 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -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 } - } \ No newline at end of file + } + + .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) + } + }