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

start working for create auth-panel

Browse Source
This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich
2022-11-28 22:07:22 +10:00
parent 293045c7da
commit cbeec14a9f
13 changed files with 223 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,33 +1,54 @@
section#account {
z-index : 10000;
right : 40px;
bottom : 40px;
position: absolute;
display : flex;
}
section#account>button#login {
width : 80px;
height : 80px;
#authentication {
width : 25vw;
margin : 25vh auto;
padding : 70px 40px;
display : flex;
border-radius : 100%;
cursor : pointer;
overflow : hidden;
background-color: var(--background-inverse);
flex-direction : column;
background-color: var(--background-light-1);
}
section#account>button#login>i.icon.authentication {
width : 12px;
margin : auto;
color : var(--text-inverse);
background-color: unset;
#authentication>section.header {
width : 100px;
height : 100px;
margin : auto;
display : flex;
border-radius: 100%;
overflow : hidden;
}
section#account>button#login:hover>i.icon.authentication {
background-color: var(--grey-dark);
#authentication>section {
margin: unset;
color : #fff;
}
section#account>button#login:active>i.icon.authentication {
background-color: unset;
#authentication>section.header>img {
width : 90%;
height : 90%;
margin : auto;
object-fit : cover;
border-radius : 100%;
box-shadow : 1px 0px 12px 0px rgba(0, 0, 0, 1);
-webkit-box-shadow: 1px 0px 12px 0px rgba(0, 0, 0, 1);
-moz-box-shadow : 1px 0px 12px 0px rgba(0, 0, 0, 1);
}
#authentication>:is(b, a) {
margin-left: 15%;
}
#authentication>b {
margin-top: 30px;
font-size : 1.2em;
}
#authentication>ul {
margin-left: 25%;
}
#authentication ul ul {
padding-top: 1ex;
}
#authentication ul li:not(:last-child) {
margin-bottom: 1ex;
}

52
mirzaev/site/account/system/public/css/books.css
View File

@@ -1,52 +0,0 @@
main>section#books {
display: flex;
flex-flow: row wrap;
}
main>section#books>* {
margin-bottom: 20px;
}
main>section#books>form.upload {
width: calc(100% / 3 - 20px - 9px * 2);
height: calc(220px - 9px * 2);
margin: 5px;
margin-right: 20px;
}
main>section#books>form.upload>p {
font-size: 3rem;
height: 0.3rem;
line-height: 0;
}
main>section#books>article.book {
width: calc(100% / 3 - 20px);
margin-right: 20px;
display: flex;
flex-direction: column;
}
main>section#books>article.book:nth-child(3) {
width: calc(100% / 3);
margin-right: unset;
}
main>section#books>article.book>img {
height: 220px;
object-fit: cover;
object-position: right;
overflow: hidden;
clip-path: polygon(5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 5px, 5px 5px);
}
main>section#books>article.book>h4 {
margin-top: 5px;
margin-bottom: 10px;
height: 50px;
text-align: center;
}
main>section#books>article.book>p {
margin: unset;
}

144
mirzaev/site/account/system/public/css/gradient.css Normal file
View File

@@ -0,0 +1,144 @@
@keyframes red {
from {
left: -250%;
top : -300%;
}
25% {
left: -240%;
top : -130%;
}
50% {
left: -100%;
top : -120%;
}
75% {
left: -160%;
top : -230%;
}
to {
left: -250%;
top : -300%;
}
}
@keyframes blue {
from {
left: -280%;
top : -80%;
}
25% {
left: -180%;
top : -100%;
}
50% {
left: -120%;
top : -250%;
}
75% {
left: -250%;
top : -300%;
}
to {
left: -280%;
top : -80%;
}
}
@keyframes green {
from {
left: -180%;
top : -100%;
}
25% {
left: -120%;
top : -250%;
}
50% {
left: -250%;
top : -300%;
}
75% {
left: -280%;
top : -80%;
}
to {
left: -180%;
top : -100%;
}
}
@keyframes background {
from {
background-color: #ff5c5c;
}
25% {
background-color: #9395ff;
}
50% {
background-color: #fff393;
}
75% {
background-color: #534eff;
}
to {
background-color: #ff5c5c;
}
}
#authentication>section.header.gradient {
position : relative;
overflow : hidden;
animation-duration : 30s;
animation-name : background;
animation-iteration-count: infinite;
background-repeat : no-repeat;
animation-timing-function: ease-in-out;
}
#authentication>section.header.gradient>div {
z-index : -1000;
width : 500%;
height : 500%;
position : absolute;
animation-duration : 12s;
background-repeat : no-repeat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#authentication>section.header.gradient>div.red {
animation-name: red;
background-image: radial-gradient(circle,
rgba(255, 25, 25, 1) 0%,
rgba(0, 0, 0, 0) 35%);
}
#authentication>section.header.gradient>div.blue {
animation-name: blue;
background-image: radial-gradient(circle,
rgba(25, 25, 255, 0.6) 0%,
rgba(0, 0, 0, 0) 35%);
}
#authentication>section.header.gradient>div.green {
animation-name: green;
background-image: radial-gradient(circle,
rgba(25, 255, 25, 1) 0%,
rgba(0, 0, 0, 0) 35%);
}

244
mirzaev/site/account/system/public/css/graph.css
View File

@@ -1,244 +0,0 @@
@keyframes node-select {
from {
outline-offset: 0px;
}
to {
outline : 2px solid var(--grey-light);
outline-offset: 10px;
}
}
@keyframes node-select-revert {
from {
outline : 2px solid var(--grey-light);
outline-offset: 10px;
}
to {
outline-offset: 0px;
}
}
@keyframes description-select {
from {
outline-offset: 0px;
}
to {
outline : 2px solid var(--grey);
outline-offset: 10px;
}
}
@keyframes description-select-revert {
from {
outline : 2px solid var(--grey);
outline-offset: 10px;
}
to {
outline-offset: 0px;
}
}
section.graph {
width : 100vw;
height : 100vh;
position : absolute;
transition: unset;
}
section.graph * {
transition: unset;
}
section.graph:active {
cursor: move;
}
section.graph article.node {
z-index : 500;
position : absolute;
display : flex;
cursor : grab;
border-radius : 100%;
background-color : var(--node-background);
}
section.graph article.node.animated {
animation-duration : 0.1s;
animation-name : node-select-revert;
animation-fill-mode : forwards;
}
section.graph article.node.animated:hover {
animation-duration : 0.1s;
animation-name : node-select;
animation-fill-mode : forwards;
}
section.graph article.node:active {
cursor : grabbing;
background-color: var(--node-background-important);
}
section.graph article.node>h4.title {
margin : auto;
text-align: center;
cursor : pointer;
}
section.graph article.node>div.description {
z-index : 1000;
position : absolute;
text-align : justify;
text-align-last : center;
border-radius : 100%;
overflow : hidden;
background-color: var(--node-background-completed);
}
/* section.graph article.node>div.description.animated {
animation-duration : 0.1s;
animation-name : description-select-revert;
animation-fill-mode : forwards;
}
section.graph article.node>div.description.animated:hover {
animation-duration : 0.1s;
animation-name : description-select;
animation-fill-mode : forwards;
} */
section.graph article.node * {
transition: 0.1s ease-in;
}
section.graph article.node>div.description>span.wrapper {
width : 50%;
height : 100%;
shape-margin: 15px;
}
section.graph article.node>div.description>span.left.wrapper {
float : left;
shape-outside: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 68% 98%, 38% 90%, 10% 72%, 0% 50%, 10% 28%, 20% 20%, 100% 20%);
}
section.graph article.node>div.description>span.right.wrapper {
float : right;
shape-outside: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 20%, 82% 20%, 90% 28%, 100% 50%, 90% 72%, 60% 90%, 32% 98%);
}
section.graph article.node>div.description>p {
z-index : 1500;
position : relative;
margin : 0;
opacity : 0;
word-break: break-all;
color : var(--text-inverse);
}
section.graph article.node>div.description:hover>p {
opacity: 1;
}
section.graph article.node>div.description>a.source {
z-index : 2000;
top : calc(20% - 1.3em + (1em - 1.3ex));
left : 0;
position : absolute;
font-weight: bold;
font-size : 1.3em;
opacity : 0;
}
section.graph article.node.white>div.description>a.source {
color: var(--text-inverse);
}
section.graph article.node.white>div.description>a.source:active {
color: var(--text-inverse-active);
}
section.graph article.node.white>div.description>a.source:hover {
color: var(--text-inverse-hover);
}
section.graph article.node.red>div.description>a.source {
color: var(--text-red);
}
section.graph article.node.red>div.description>a.source:active {
color: var(--text-red-active);
}
section.graph article.node.red>div.description>a.source:hover {
color: var(--text-red-hover);
}
section.graph article.node>div.description>a.source.red:active {
color: var(--text-red-active);
}
section.graph article.node>div.description:hover>a.source {
opacity: 1;
}
section.graph article.node>div.description>a.source:visited ::after {
content : '';
width : 100%;
height : 100%;
background-color: var(--node-background-completed);
}
section.graph article.node>div.description>img.cover {
left : 0;
top : 0;
position : absolute;
width : 100%;
height : 100%;
object-fit : cover;
pointer-events: none;
filter : unset;
}
section.graph article.node>div.description:hover>img.cover {
filter: blur(5px) brightness(0.5);
}
section.graph article.node>i.close {
z-index : -2000;
top : -10%;
right : -10%;
position : absolute;
scale : 0;
opacity : 0;
cursor : pointer;
color : var(--text);
transition: 0.2s ease-out;
}
section.graph article.node>i.close:hover {
scale : 1.4 !important;
color : var(--text-hover);
transition: 0.1s ease-in;
}
section.graph article.node>i.close:active {
scale : 1.2 !important;
color : var(--text-active);
transition: unset;
}
section.graph svg.connection {
z-index : -500;
position: absolute;
width : 100%;
height : 100%;
}
section.graph svg.connection>line {
stroke: var(--connection);
}

31
mirzaev/site/account/system/public/css/hotline.css
View File

@@ -1,31 +0,0 @@
section.hotline {
display: inline-flex;
height : 100%;
}
section.hotline * {
transition: unset;
}
section.hotline:last-child {
margin-bottom: unset;
}
section.hotline>article {
margin-right : 18px;
width : 140px;
height : 190px;
display : flex;
align-self : flex-end;
border-radius : 3px;
background-color: var(--background-light-1);
box-shadow : 0px -6px 6px rgba(0, 0, 0, 0.3);
}
section.hotline>article:last-child {
margin-right: unset;
}
section.hotline>article>* {
margin: auto;
}

40
mirzaev/site/account/system/public/css/icon_authentication.css
View File

@@ -1,40 +0,0 @@
.icon.authentication {
box-sizing : border-box;
position : relative;
display : block;
transform : scale(var(--ggs, 1));
width : 6px;
height : 16px;
border : 2px solid;
border-left : 0;
border-top-right-radius : 2px;
border-bottom-right-radius: 2px;
margin-right : -10px
}
.icon.authentication::after,
.icon.authentication::before {
content : "";
display : block;
box-sizing: border-box;
position : absolute
}
.icon.authentication::after {
border-top : 2px solid;
border-right: 2px solid;
transform : rotate(45deg);
width : 8px;
height : 8px;
left : -8px;
bottom : 2px
}
.icon.authentication::before {
border-radius: 3px;
width : 10px;
height : 2px;
background : currentColor;
left : -11px;
bottom : 5px
}

29
mirzaev/site/account/system/public/css/icon_close.css
View File

@@ -1,29 +0,0 @@
.icon.close {
box-sizing : border-box;
position : relative;
display : block;
transform : scale(var(--ggs, 1));
width : 22px;
height : 22px;
border : 2px solid transparent;
border-radius: 40px
}
.icon.close::after,
.icon.close::before {
content : "";
display : block;
box-sizing : border-box;
position : absolute;
width : 16px;
height : 2px;
background : currentColor;
transform : rotate(45deg);
border-radius: 5px;
top : 8px;
left : 1px
}
.icon.close::after {
transform: rotate(-45deg)
}

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

@@ -177,6 +177,9 @@ header>nav {
main {
z-index: 1000;
height: 100%;
display: flex;
flex-direction: column;
}
footer {

33
mirzaev/site/account/system/public/css/upload.css
View File

@@ -1,33 +0,0 @@
form.upload {
width: 100%;
height: 100px;
position: relative;
display: flex;
border: 4px dashed #e5ddd1;
}
form.upload:hover {
background-color: #ccc6bd;
border: 4px dashed #fff7ea;
}
form.upload>p {
margin: auto;
font-weight: bold;
color: #eee6d9;
}
form.upload:hover>p {
color: #fff7ea;
}
form.upload>input {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
form.upload:hover>input {
cursor: pointer;
}

27
mirzaev/site/account/system/views/account/element.html
View File

@@ -1,17 +1,38 @@
{% block css %}
<link type="text/css" rel="stylesheet" href="/css/account.css">
<link type="text/css" rel="stylesheet" href="/css/icon_authentication.css">
<link type="text/css" rel="stylesheet" href="/css/gradient.css">
{% endblock %}
{% block body %}
<section id="account">
<section id="authentication">
{% if account %}
{{ account.getKey() }}
{% if vk %}
{{ vk.mail }}
{% endif %}
{% else %}
<button id="login" title="Войти в аккаунт" onclick="return account.authentication()"><i class='icon authentication'></i></button>
<section class="header gradient">
<img src="/images/what.png" alt="Пользователь">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</section>
<b>Предоставить доступ:</b>
<ul>
<li>Подпункт 2.1.</li>
<li>Подпункт 2.2.
<ul>
<li>Подпункт 2.2.1.</li>
<li>Подпункт 2.2.2.</li>
</ul>
</li>
<li>Подпункт 2.3.</li>
</ul>
<a href="https://mirzaev.sexy">https://mirzaev.sexy</a>
<div class="buttons">
<button>Принять</button>
<button>Заблокировать</button>
</div>
{% endif %}
</section>
{% endblock %}

4
mirzaev/site/account/system/views/aside.html
View File

@@ -1,17 +1,13 @@
{% use 'account/element.html' with css as account_css, body as account_body, js as account_js %}
{% block css %}
{{ block('account_css') }}
{% endblock %}
{% block body %}
<aside>
{{ block('account_body') }}
</aside>
{% endblock %}
{% block js %}
{{ block('account_js') }}
{% endblock %}
{% block js_init %}

7
mirzaev/site/account/system/views/index.html
View File

@@ -1,5 +1,6 @@
{% extends "core.html" %}
{% use 'account/element.html' with css as account_css, body as account_body, js as account_js %}
{% use "core.html" with css as core_css, body as core_body, js as core_js, js_init as core_js_init %}
{% use "header.html" with css as header_css, body as header_body, js as header_js, js_init as header_js_init %}
{% use "aside.html" with css as aside_css, body as aside_body, js as aside_js, js_init as aside_js_init %}
@@ -10,6 +11,7 @@
{{ block('header_css') }}
{{ block('aside_css') }}
{{ block('graph_css') }}
{{ block('account_css') }}
{% endblock %}
{% block body %}
@@ -20,8 +22,8 @@
<main>
<noscript>К сожалению мой сайт ещё пока не готов для работы без javascript</noscript>
{% block main %}
{{ block('graph_main') }}
{% endblock %}
{{ block('account_body') }}
{% endblock %}
</main>
{# {% include 'footer.html' %} #}
@@ -32,6 +34,7 @@
{{ block('header_js') }}
{{ block('aside_js') }}
{{ block('graph_js') }}
{{ block('account_js') }}
{% endblock %}
{% block js_init %}