svoboda/accounts
1
1
Fork 0
generated from mirzaev/pot
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

большая разработка аутентификации

Browse Source
This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich
2023-03-02 11:46:14 +10:00
parent 0aae5b6558
commit 687db4e4b1
129 changed files with 2282 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
mirzaev/site/account/system/public/css/account.css
View File

@@ -1,5 +1,4 @@
@keyframes glare {
2%,
100% {
left : 130%;
@@ -9,27 +8,78 @@
}
}
section#authentication {
main {
z-index: 1000;
top: 20%;
position: relative;
height: unset;
display: flex;
flex-direction: unset;
justify-content: center;
align-items: unset;
}
section.panel {
z-index : 1000;
width : 400px;
position : relative;
margin : 25vh auto;
position : absolute;
display : flex;
flex-direction: column;
}
section#authentication>section.header {
z-index : 1000;
height : 100px;
margin-left : -50px;
padding : 30px 0;
display : flex;
clip-path : url(#authentication-header-mask);
border-radius : 3px 3px 0 0;
animation-duration: 120s;
section.panel.medium {
width: 300px;
}
section#authentication>section.header>img.avatar {
section.panel.small {
width: 220px;
}
section.panel#mnemonic {
margin-left: -570px;
}
section.panel#classic {
margin-left: 570px;
}
section.panel>section.body>ul {
margin: 0 5%;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
list-style: square;
}
section.panel>section.body>ul>li {
font-size: 0.8rem;
word-break: break-word;
animation-duration : .35s;
animation-name : uprise;
animation-fill-mode : forwards;
animation-timing-function: cubic-bezier(.47,0,.74,.71);
}
section.panel>section.header {
z-index : 1000;
height : 50px;
display : flex;
justify-content: center;
align-items: end;
animation-duration: 120s;
border-radius : 3px 3px 0 0;
background-color : var(--background-above);
}
section#profile>section.header {
margin-left : -50px;
height : 100px;
padding : 30px 0;
clip-path : url(#profile-header-mask);
}
section#profile>section.header>img.avatar {
z-index : 1500;
left : 6px;
top : 36px;
@@ -46,7 +96,7 @@ section#authentication>section.header>img.avatar {
-moz-box-shadow : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
section#authentication>section.header>img.avatar:hover {
section#profile>section.header>img.avatar:hover {
left : 0;
top : 30px;
width : 100px;
@@ -56,7 +106,7 @@ section#authentication>section.header>img.avatar:hover {
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
}
section#authentication>section.header>img.cover {
section#profile>section.header>img.cover {
z-index : -5000;
left : -50px;
top : 0;
@@ -70,7 +120,7 @@ section#authentication>section.header>img.cover {
background : var(--background-above);
}
section#authentication>section.header>div.glare {
section#profile>section.header>div.glare {
z-index : 3000;
left : -30px;
top : -300px;
@@ -89,11 +139,11 @@ section#authentication>section.header>div.glare {
background-color : #fff;
}
section#authentication>section.header>div {
section#profile>section.header>div {
animation-duration: 80s;
}
section#authentication>section.header>a {
section#profile>section.header>a {
margin : auto;
width : 100%;
margin-left : 110px;
@@ -107,40 +157,38 @@ section#authentication>section.header>a {
text-shadow : 0 0 8px #00000080;
}
section.panel>section.header>:is(h1, h2, h3) {
margin-bottom: unset;
}
section#authentication>section.body {
margin-top : -160px;
padding : 180px 30px 20px 30px;
gap : 3ex;
section.panel>section.body {
padding : 20px 30px;
gap : 10px;
display : flex;
flex-direction : column;
border-radius : 3px;
border-radius : 0 0 3px 3px;
background-color : var(--background-above);
/* background-image : radial-gradient(circle at 70% 20%, #000000A0 0%, var(--background-above) 75%); */
box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
section#authentication>section.body>ul {
section#profile>section.body>ul {
margin : unset;
margin-left : 10%;
margin-bottom: 1ex;
}
section#authentication>section.body ul ul {
section#profile>section.body ul ul {
padding-top: 1ex;
}
section#authentication>section.body ul li:not(:last-child) {
section#profile>section.body ul li:not(:last-child) {
margin-bottom: 1ex;
}
section#authentication>section.body div.buttons {
section#profile>section.body div.buttons {
margin-top: 10px;
display: flex;
}
section#authentication>section.body div.buttons>button {
section#profile>section.body div.buttons>button {
padding : 1ex 2ex;
cursor : pointer;
border-radius : 3px;
@@ -148,35 +196,35 @@ section#authentication>section.body div.buttons>button {
background-color: unset;
}
section#authentication>section.body div.buttons>button:hover {
section#profile>section.body div.buttons>button:hover {
color: var(--text-hover);
}
section#authentication>section.body div.buttons>button:active {
section#profile>section.body div.buttons>button:active {
color : var(--text-active);
transition: unset;
}
section#authentication>section.body div.buttons>button:first-of-type {
section#profile>section.body div.buttons>button:first-of-type {
margin-left : auto;
margin-right: 5%;
}
section#authentication>section.body div.buttons>button:last-of-type {
section#profile>section.body div.buttons>button:last-of-type {
margin-right: auto;
}
section#authentication>section.body div.buttons>button.accept {
section#profile>section.body div.buttons>button.accept {
padding : 1ex 5ex;
color : var(--text-inverse);
background-color: #63954d;
}
section#authentication>section.body div.buttons>button.accept:hover {
section#profile>section.body div.buttons>button.accept:hover {
color : var(--text-inverse-above);
background-color: #6fa259;
}
section#authentication>section.body div.buttons>button.accept:active {
section#profile>section.body div.buttons>button.accept:active {
background-color: #63954d;
}

23
mirzaev/site/account/system/public/css/animations.css Normal file
View File

@@ -0,0 +1,23 @@
@keyframes input-error {
0%,
20% {
background-color: var(--input-error);
}
50%,
100% {
background-color: var(--background-above-1);
}
}
@keyframes uprise {
0% {
opacity: 0;
filter: blur(2px);
}
100% {
opacity: 1;
filter: blur(0px);
}
}

139
mirzaev/site/account/system/public/css/fonts/fira.css Normal file
View File

@@ -0,0 +1,139 @@
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Hair.woff2') format('woff2'), url('/fonts/fira/FiraSans-Hair.woff') format('woff');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-HairItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-HairItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-UltraLight.woff2') format('woff2'), url('/fonts/fira/FiraSans-UltraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-UltraLightItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-UltraLightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Light.woff2') format('woff2'), url('/fonts/fira/FiraSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-LightItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Regular.woff2') format('woff2'), url('/fonts/fira/FiraSans-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Italic.woff2') format('woff2'), url('/fonts/fira/FiraSans-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraMono-Medium.woff2') format('woff2'), url('/fonts/fira/FiraMono-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-MediumItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-SemiBold.woff2') format('woff2'), url('/fonts/fira/FiraSans-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-SemiBoldItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-SemiBoldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Bold.woff2') format('woff2'), url('/fonts/fira/FiraSans-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-BoldItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-BoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-ExtraBold.woff2') format('woff2'), url('/fonts/fira/FiraSans-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-ExtraBoldItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-ExtraBoldItalic.woff') format('woff');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-Heavy.woff2') format('woff2'), url('/fonts/fira/FiraSans-Heavy.woff') format('woff');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Fira;
src: url('/fonts/fira/FiraSans-HeavyItalic.woff2') format('woff2'), url('/fonts/fira/FiraSans-HeavyItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Fira Mono;
src: url('/fonts/fira/FiraMono-Regular.woff2') format('woff2'), url('/fonts/fira/FiraMono-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Fira Mono;
src: url('/fonts/fira/FiraMono-Bold.woff2') format('woff2'), url('/fonts/fira/FiraMono-Bold.woff') format('woff');
font-weight: 600;
font-style: normal;
}

63
mirzaev/site/account/system/public/css/fonts/hack.css Normal file
View File

@@ -0,0 +1,63 @@
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-regular.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-regular.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bold.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bold.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-italic.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-italic.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bolditalic.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-regular-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-regular-subset.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bold-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-italic-subset.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Hack';
src: url('/fonts/hack/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('/fonts/hack/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
}

10
mirzaev/site/account/system/public/css/icons/arrow_right.css
View File

@@ -2,9 +2,9 @@
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
width: 22px;
height: 22px
--height: 22px;
height: var(--height);
}
i.arrow.right::after,
@@ -13,7 +13,7 @@ i.arrow.right::before {
display: block;
box-sizing: border-box;
position: absolute;
right: 3px
right: 3px;
}
i.arrow.right::after {
@@ -22,12 +22,12 @@ i.arrow.right::after {
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
bottom: 7px
bottom: 7px;
}
i.arrow.right::before {
width: 16px;
height: 2px;
bottom: 10px;
background: currentColor
background: currentColor;
}

48
mirzaev/site/account/system/public/css/icons/keyhole.css Normal file
View File

@@ -0,0 +1,48 @@
i.keyhole,
i.keyhole::after,
i.keyhole::before {
display: block;
box-sizing: border-box;
border-radius: 20px;
}
i.keyhole {
--width: 20px;
--height: 20px;
position: relative;
width: 20px;
height: 20px;
border: 2px solid;
}
i.keyhole::after,
i.keyhole::before {
position: absolute;
content: '';
}
i.keyhole::before {
left: 5px;
top: 3px;
width: 6px;
height: 6px;
border: 2px solid;
}
i.keyhole::after {
left: 7px;
bottom: 3px;
width: 2px;
height: 5px;
background: currentColor;
}
label>i.keyhole:first-child {
left: 7px;
scale: .9;
border: 2.1px solid;
}
i.keyhole+input {
padding-left: 34px;
}

28
mirzaev/site/account/system/public/css/icons/lock.css Normal file
View File

@@ -0,0 +1,28 @@
i.lock {
--width: 12px;
--height: 11px;
position: relative;
margin-top: -12px;
width: 12px;
height: 11px;
display: block;
box-sizing: border-box;
border: 2px solid;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom: transparent;
}
i.lock::after {
left: -4px;
top: 9px;
position: absolute;
width: 16px;
height: 10px;
display: block;
box-sizing: border-box;
content: '';
box-shadow: 0 0 0 2px;
border-radius: 2px;
border: 2px solid transparent;
}

30
mirzaev/site/account/system/public/css/icons/mail.css Normal file
View File

@@ -0,0 +1,30 @@
i.mail,
i.mail::after {
--width: 18px;
--height: 14px;
height: 14px;
display: block;
box-sizing: border-box;
border: 2px solid;
}
i.mail {
position: relative;
width: 18px;
overflow: hidden;
border-radius: 2px;
}
i.mail::after {
position: absolute;
left: 0;
bottom: 3px;
width: 14px;
transform: rotate(-45deg);
content: "";
border-radius: 3px;
}
i.mail+input {
padding-left: 36px;
}

34
mirzaev/site/account/system/public/css/icons/nametag.css Normal file
View File

@@ -0,0 +1,34 @@
i.nametag {
--width: 6px;
--height: 6px;
box-sizing: border-box;
position: relative;
width: 6px;
height: 6px;
display: block;
border: 2px solid;
}
i.nametag::before {
left: -5px;
top: -5px;
position: absolute;
width: 12px;
height: 12px;
display: block;
box-sizing: border-box;
content: '';
box-shadow:
-5px -5px 0 -3px,
5px 5px 0 -3px,
5px -5px 0 -3px,
-5px 5px 0 -3px;
}
label>i.nametag:first-child {
left: 13px;
}
i.nametag+input {
padding-left: 32px;
}

53
mirzaev/site/account/system/public/css/icons/user_add.css Normal file
View File

@@ -0,0 +1,53 @@
i.user.add {
--width: 20px;
--height: 18px;
width: 20px;
height: 18px;
display: block;
box-sizing: border-box;
background:
linear-gradient(
to left,
currentColor 8px,
transparent 0)
no-repeat 14px 6px/6px 2px,
linear-gradient(
to left,
currentColor 8px,
transparent 0)
no-repeat 16px 4px/2px 6px;
}
i.user.add::after,
i.user.add::before {
content: '';
position: absolute;
display: block;
box-sizing: border-box;
border: 2px solid
}
i.user.add::before {
left: 2px;
top: 0;
width: 8px;
height: 8px;
border-radius: 30px;
}
i.user.add::after {
top: 9px;
width: 12px;
height: 9px;
border-bottom: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
label>i.user.add:first-child {
left: 9px;
}
i.user.add+input {
padding-left: 37px;
}

88
mirzaev/site/account/system/public/css/main.css
View File

@@ -35,11 +35,12 @@
--text : #e6e6e6;
--text-hover : #fff;
--text-active : #d0d0d0;
--text-inverse : 'dark';
--text-inverse : #020202;
--red-light-1 : #dc4343;
--red-light : #bf3737;
--red : #a43333;
--red-dark : #8d2a2a;
--input-error : #6c2424;
}
}
@@ -71,15 +72,6 @@
--link-active: #3064dd;
}
* {
text-decoration: none;
outline : none;
border : none;
color : var(--text);
font-family : 'Commissioner', sans-serif;
transition : 0.1s ease-out;
}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select : none;
@@ -89,6 +81,28 @@
user-select : none;
}
.hidden {
display: none !important;
opacity: 0;
}
* {
text-decoration: none;
outline : none;
border : none;
color : var(--text);
font-family : Fira, sans-serif;
transition : 0.1s ease-out;
}
pre, code {
font-family: Hack, monospace;
}
button {
cursor: pointer;
}
a {
color: var(--link);
}
@@ -102,10 +116,60 @@ a:active {
transition: unset;
}
label {
position: relative;
height: 26px;
display: flex;
overflow: hidden;
border-radius: 2px;
}
label>i:first-child {
left: 8px;
top: calc((26px - var(--height)) / 2);
position: absolute !important;
margin: auto;
color: #8c7d7d;
}
label * {
/* color: var(--text-inverse); */
}
label>input {
width: 100%;
padding: 0 8px;
background-color: var(--background-above-1);
}
label>input+button {
background-color: var(--red);
}
i+input {
padding-left: 30px;
}
input.error {
animation-duration : 1s;
animation-name : input-error;
animation-fill-mode : forwards;
animation-timing-function: ease-in;
}
section.header>h1 {
font-size: 1.3rem;
line-height: 1.3rem;
}
section.header>:is(h2, h3) {
font-size: 1.1rem;
line-height: 1.1rem;
}
body {
height : 100vh;
margin : 0;
overflow : hidden;
background-color: var(--background);
}
@@ -217,6 +281,8 @@ main {
height : 100%;
display : flex;
flex-direction: column;
justify-content : center;
align-items : center;
}
footer {