start working for create auth-panel

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "mirzaev/site-account",
-    "description": "Мой персональный сайт",
+    "description": "API for intersite authentication",
     "readme": "README.md",
     "keywords": [
         "site",

mirzaev/site/account/system/public/css/account.css

@@ -1,33 +1,54 @@
-section#account {
+#authentication {
-    z-index : 10000;
+    width           : 25vw;
-    right   : 40px;
+    margin          : 25vh auto;
-    bottom  : 40px;
+    padding         : 70px 40px;
-    position: absolute;
-    display : flex;
-}
-
-section#account>button#login {
-    width           : 80px;
-    height          : 80px;
     display         : flex;
-    border-radius   : 100%;
+    flex-direction  : column;
-    cursor          : pointer;
+    background-color: var(--background-light-1);
-    overflow        : hidden;
-    background-color: var(--background-inverse);
 }
 
-section#account>button#login>i.icon.authentication {
+#authentication>section.header {
-    width           : 12px;
+    width        : 100px;
-    margin          : auto;
+    height       : 100px;
-    color           : var(--text-inverse);
+    margin       : auto;
-    background-color: unset;
+    display      : flex;
+    border-radius: 100%;
+    overflow     : hidden;
 }
 
-section#account>button#login:hover>i.icon.authentication {
+#authentication>section {
-    background-color: var(--grey-dark);
+    margin: unset;
+    color : #fff;
 }
 
-
+#authentication>section.header>img {
-section#account>button#login:active>i.icon.authentication {
+    width             : 90%;
-    background-color: unset;
+    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;
 }

mirzaev/site/account/system/public/css/books.css

@@ -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;
-}

mirzaev/site/account/system/public/css/gradient.css

@@ -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%);
+}

mirzaev/site/account/system/public/css/graph.css

@@ -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);
-}

mirzaev/site/account/system/public/css/hotline.css

@@ -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;
-}

mirzaev/site/account/system/public/css/icon_authentication.css

@@ -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
-}

mirzaev/site/account/system/public/css/icon_close.css

@@ -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)
-}

mirzaev/site/account/system/public/css/main.css

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

mirzaev/site/account/system/public/css/upload.css

@@ -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;
-}

mirzaev/site/account/system/views/account/element.html

@@ -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 %}

mirzaev/site/account/system/views/aside.html

@@ -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 %}

mirzaev/site/account/system/views/index.html

@@ -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') }}
+	{{ block('account_body') }}
-{% endblock %}
+	{% 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 %}