diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c6f9a44 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode/settings.json diff --git a/public/Images/Campfire.png b/public/Images/Campfire.png new file mode 100644 index 0000000..f27eb26 Binary files /dev/null and b/public/Images/Campfire.png differ diff --git a/public/index.html b/public/index.html index 8086f14..2c71713 100644 --- a/public/index.html +++ b/public/index.html @@ -3,23 +3,27 @@ - - CampfireID + + Document -
-
- -

shelby

-
-
-

Роль: Campfire -

-

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

-

VPN доступ:

-

Minecraft доступ:

-
-
+
+
+ +
+
+
+
+ Picture +

Profilename

+
+
+

Роль:
Campfire

+

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

+

Доступ к VPN:
NO

+

Доступ к Minecraft:
YES

+
+
\ No newline at end of file diff --git a/public/styles/main.css b/public/styles/main.css index a27226b..2917367 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -20,101 +20,188 @@ --black: #171717; --white: white; --orange: #ff5e00; - --oragne-emission: #702900; + --oragne-emission: #ff5e00; + --grey: #858585; } - -ul { - list-style: none; -} - -body { - background-color: var(--black); - color: var(--white); - font-family: PetrovSans; +* { + margin: 0; + padding: 0; + box-sizing: border-box; user-select: none; } - -header { - -} -.container { - display: flex; - column-gap: 10%px; - padding: 10px 10%; - max-width: 500px; - max-height: 500px; - background-color: var(--white); - color: var(--black); - list-style: none; - border-radius: 30px; - justify-content: center; - -} - -.profileimage { - max-width: 100px; - border-radius: 10rem; -} -.profilename { +body { + background-image: url(../Images/Campfire.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + color: black; font-family: PetrovSans; font-weight: 700; +} +/* * { + border: 1px solid white; +} */ +.userprofile { + margin:10% 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; +} +.userprofile_left { + max-width: 40%; + max-height: 100%; + animation: leftanimation 1s 1 normal; + animation-fill-mode: forwards; + +} +.userprofile_left_image { + max-width: 100%; + max-height: auto; + border-radius: 10rem; + object-fit: cover; + outline: 5px 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; + +} +.userprofile_left_image:hover{ + transform: scale(1.05); + box-shadow: 0 0 25px 10px var(--oragne-emission); +} +.userprofile_left_name { text-align: center; - font-size: 0.8em; -} -.profileblock { - animation: profileanimation 2s 0.5 normal; - animation-fill-mode: forwards; + font-size: clamp(6px, 3vw, 24px); + font-weight: 400; + background-color: var(--orange); + color: var(--white); + border-radius: 5px; + margin: 10px 0 0 0; } -@keyframes profileanimation { + +.userprofile_right_info { + text-align: center; + font-size: clamp(6px, 2vw, 24px); + opacity: 0%; + +} +.form { + background-color: var(--black); + color: transparent; + padding: 1% 10%; + border-radius: 5px; + font-weight: 400; + background: linear-gradient(90deg,#ff3c00, #ff8800); + background-clip: text; + text-shadow: 0 0 20px var(--oragne-emission); +} + +#info1 { + animation: rightanimation 1s 1 0s normal forwards; +} +#info2 { + animation: rightanimation 1s 1 0.2s normal forwards; +} +#info3 { + animation: rightanimation 1s 1 0.4s normal forwards; +} +#info4 { + animation: rightanimation 1s 1 0.8s normal forwards; +} + +@keyframes rightanimation{ 0% { - transform: translate(0%, 0%); - } - 100% { - transform: translate(-63%, 0%); - } -} - -.statsblock { - line-height: 100%; - font-size: 0.8em; -} - -.profilestats1 { - animation: profilestatsanimation 1s 1 normal; - animation-fill-mode: forwards; - transition: all 3s ease-in; - animation-delay: 0s; - opacity: 0%; -} -.profilestats2 { - animation: profilestatsanimation 1s 1 normal; - animation-fill-mode: forwards; - transition: all 3s ease-in; - animation-delay: 0.2s; - opacity: 0%; -} -.profilestats3 { - animation: profilestatsanimation 1s 1 normal; - animation-fill-mode: forwards; - transition: all 3s ease-in; - animation-delay: 0.4s; - opacity: 0%; -} -.profilestats4 { - animation: profilestatsanimation 1s 1 normal; - animation-fill-mode: forwards; - transition: all 3s ease-in; - animation-delay: 0.8s; - opacity: 0%; -} -@keyframes profilestatsanimation { - 0% { - transform: translate(300%, 0); + transform: translate(200%, 0); opacity: 0%; } 100% { transform: translate(0, 0); opacity: 100%; } -} \ No newline at end of file +} + +@keyframes leftanimation { + 0% { + overflow: hidden; + transform: translate(-200%, 0); + } + 100% { + display: block; + transform: translate(0, 0); + } +} + +.containerloader { + background-color: var(--black); + z-index: 1; + position: absolute; + width: 120%; + height: 120%; + opacity: 100%; + transform: translate(-8%, -21%); + padding: 35%; + animation: loadscreen 1s 1 normal forwards; + +} +.block { + display: flex; + justify-content: center; +} + +.loader { + width: 48px; + height: 48px; + border: 2px solid #FFF; + border-radius: 50%; + display: inline-block; + position: relative; + box-sizing: border-box; + animation: rotation 1s linear infinite; + } + .loader::after { + content: ''; + box-sizing: border-box; + position: absolute; + left: 50%; + top: 0; + background: #FF3D00; + width: 3px; + height: 24px; + transform: translateX(-50%); + } + + @keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + @keyframes loadscreen { + 0% { + z-index: 1; + opacity: 100%; + } + 80% { + z-index: 1; + opacity: 100%; + } + 100% { + opacity: 0%; + z-index: -1 + } + } \ No newline at end of file