From cbeec14a9f804fa0c0ed1923441de3abfa06aac3 Mon Sep 17 00:00:00 2001 From: Mirzaev Date: Mon, 28 Nov 2022 22:07:22 +1000 Subject: [PATCH] start working for create auth-panel --- composer.json | 2 +- .../account/system/public/css/account.css | 71 +++-- .../site/account/system/public/css/books.css | 52 ---- .../account/system/public/css/gradient.css | 144 +++++++++++ .../site/account/system/public/css/graph.css | 244 ------------------ .../account/system/public/css/hotline.css | 31 --- .../system/public/css/icon_authentication.css | 40 --- .../account/system/public/css/icon_close.css | 29 --- .../site/account/system/public/css/main.css | 3 + .../site/account/system/public/css/upload.css | 33 --- .../account/system/views/account/element.html | 27 +- mirzaev/site/account/system/views/aside.html | 4 - mirzaev/site/account/system/views/index.html | 7 +- 13 files changed, 223 insertions(+), 464 deletions(-) delete mode 100644 mirzaev/site/account/system/public/css/books.css create mode 100644 mirzaev/site/account/system/public/css/gradient.css delete mode 100644 mirzaev/site/account/system/public/css/graph.css delete mode 100644 mirzaev/site/account/system/public/css/hotline.css delete mode 100644 mirzaev/site/account/system/public/css/icon_authentication.css delete mode 100644 mirzaev/site/account/system/public/css/icon_close.css delete mode 100644 mirzaev/site/account/system/public/css/upload.css diff --git a/composer.json b/composer.json index d1cc990..d3920f4 100644 --- a/composer.json +++ b/composer.json @@ -1,6 +1,6 @@ { "name": "mirzaev/site-account", - "description": "Мой персональный сайт", + "description": "API for intersite authentication", "readme": "README.md", "keywords": [ "site", diff --git a/mirzaev/site/account/system/public/css/account.css b/mirzaev/site/account/system/public/css/account.css index 29984f0..65b3e98 100644 --- a/mirzaev/site/account/system/public/css/account.css +++ b/mirzaev/site/account/system/public/css/account.css @@ -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; } diff --git a/mirzaev/site/account/system/public/css/books.css b/mirzaev/site/account/system/public/css/books.css deleted file mode 100644 index 151e35d..0000000 --- a/mirzaev/site/account/system/public/css/books.css +++ /dev/null @@ -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; -} diff --git a/mirzaev/site/account/system/public/css/gradient.css b/mirzaev/site/account/system/public/css/gradient.css new file mode 100644 index 0000000..e8acf15 --- /dev/null +++ b/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%); +} diff --git a/mirzaev/site/account/system/public/css/graph.css b/mirzaev/site/account/system/public/css/graph.css deleted file mode 100644 index 6dadfd3..0000000 --- a/mirzaev/site/account/system/public/css/graph.css +++ /dev/null @@ -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); -} diff --git a/mirzaev/site/account/system/public/css/hotline.css b/mirzaev/site/account/system/public/css/hotline.css deleted file mode 100644 index a142e74..0000000 --- a/mirzaev/site/account/system/public/css/hotline.css +++ /dev/null @@ -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; -} diff --git a/mirzaev/site/account/system/public/css/icon_authentication.css b/mirzaev/site/account/system/public/css/icon_authentication.css deleted file mode 100644 index 7356bde..0000000 --- a/mirzaev/site/account/system/public/css/icon_authentication.css +++ /dev/null @@ -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 -} diff --git a/mirzaev/site/account/system/public/css/icon_close.css b/mirzaev/site/account/system/public/css/icon_close.css deleted file mode 100644 index ddd6fbb..0000000 --- a/mirzaev/site/account/system/public/css/icon_close.css +++ /dev/null @@ -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) -} diff --git a/mirzaev/site/account/system/public/css/main.css b/mirzaev/site/account/system/public/css/main.css index 041d95e..7539150 100644 --- a/mirzaev/site/account/system/public/css/main.css +++ b/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 { diff --git a/mirzaev/site/account/system/public/css/upload.css b/mirzaev/site/account/system/public/css/upload.css deleted file mode 100644 index 6d91f5f..0000000 --- a/mirzaev/site/account/system/public/css/upload.css +++ /dev/null @@ -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; -} diff --git a/mirzaev/site/account/system/views/account/element.html b/mirzaev/site/account/system/views/account/element.html index 10073c2..9087b40 100644 --- a/mirzaev/site/account/system/views/account/element.html +++ b/mirzaev/site/account/system/views/account/element.html @@ -1,17 +1,38 @@ {% block css %} - + {% endblock %} {% block body %} -
+
{% if account %} {{ account.getKey() }} {% if vk %} {{ vk.mail }} {% endif %} {% else %} - +
+ Пользователь +
+
+
+
+ Предоставить доступ: +
    +
  • Подпункт 2.1.
    • +
  • Подпункт 2.2. +
      +
    • Подпункт 2.2.1.
      • +
    • Подпункт 2.2.2.
      • +
    +
    • +
  • Подпункт 2.3.
    • +
+ https://mirzaev.sexy +
+ + +
{% endif %}
{% endblock %} diff --git a/mirzaev/site/account/system/views/aside.html b/mirzaev/site/account/system/views/aside.html index e9a280f..d652d48 100644 --- a/mirzaev/site/account/system/views/aside.html +++ b/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 %} {% endblock %} {% block js %} -{{ block('account_js') }} {% endblock %} {% block js_init %} diff --git a/mirzaev/site/account/system/views/index.html b/mirzaev/site/account/system/views/index.html index a00a3bf..a551c00 100644 --- a/mirzaev/site/account/system/views/index.html +++ b/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 @@
{% block main %} -{{ block('graph_main') }} -{% endblock %} + {{ block('account_body') }} + {% endblock %}
{# {% include 'footer.html' %} #} @@ -32,6 +34,7 @@ {{ block('header_js') }} {{ block('aside_js') }} {{ block('graph_js') }} +{{ block('account_js') }} {% endblock %} {% block js_init %}