graphic update

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

@@ -1,54 +1,175 @@
-#authentication {
+@keyframes glare {
-    width           : 25vw;
+
+    2%,
+    100% {
+        left   : 130%;
+        bottom : -200%;
+        width  : 120px;
+        opacity: 1;
+    }
+}
+
+section#authentication {
+    z-index       : 1000;
+    width         : 400px;
+    position      : relative;
     margin        : 25vh auto;
-    padding         : 70px 40px;
     display       : flex;
     flex-direction: column;
-    background-color: var(--background-light-1);
 }
 
-#authentication>section.header {
+section#authentication>section.header {
-    width        : 100px;
+    z-index                  : 1000;
     height                   : 100px;
-    margin       : auto;
+    margin-left              : -50px;
+    padding                  : 30px 0;
     display                  : flex;
-    border-radius: 100%;
+    clip-path                : url(#authentication-header-mask);
-    overflow     : hidden;
+    border-radius            : 3px 3px 0 0;
+    animation-duration       : 120s;
+    animation-name           : background;
+    animation-iteration-count: infinite;
+    background-repeat        : no-repeat;
+    animation-timing-function: ease-in-out;
 }
 
-#authentication>section {
+section#authentication>section.header>img.avatar {
-    margin: unset;
+    z-index           : 1500;
-    color : #fff;
+    left              : 6px;
-}
+    top               : 36px;
-
+    width             : 88px;
-#authentication>section.header>img {
+    height            : 88px;
-    width             : 90%;
+    position          : absolute;
-    height            : 90%;
     margin            : auto;
     object-fit        : cover;
     border-radius     : 100%;
-    box-shadow        : 1px 0px 12px 0px rgba(0, 0, 0, 1);
+    cursor            : pointer;
-    -webkit-box-shadow: 1px 0px 12px 0px rgba(0, 0, 0, 1);
+    image-rendering   : smooth;
-    -moz-box-shadow   : 1px 0px 12px 0px rgba(0, 0, 0, 1);
+    box-shadow        : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow   : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
 }
 
-#authentication>:is(b, a) {
+section#authentication>section.header>img.avatar:hover {
-    margin-left: 15%;
+    left              : 0;
+    top               : 30px;
+    width             : 100px;
+    height            : 100px;
+    box-shadow        : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow   : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
 }
 
-#authentication>b {
+section#authentication>section.header>div.glare {
-    margin-top: 30px;
+    z-index                  : 3000;
+    left                     : -30px;
+    top                      : -300px;
+    width                    : 30px;
+    height                   : 400%;
+    position                 : absolute;
+    rotate                   : 25deg;
+    opacity                  : 0.2;
+    filter                   : unset;
+    pointer-events           : none;
+    animation-name           : glare;
+    animation-duration       : 32s;
+    animation-delay          : 2s;
+    animation-fill-mode      : forwards;
+    animation-timing-function: linear;
+    background-color         : #fff;
+}
+
+section#authentication>section.header>div {
+    animation-duration: 80s;
+}
+
+section#authentication>section.header>h3 {
+    margin        : auto;
+    width         : 100%;
+    margin-left   : 110px;
+    padding-bottom: 0.5ex;
+    white-space   : nowrap;
+    overflow-x    : hidden;
+    text-overflow : ellipsis;
+    font-size     : 1.3em;
+    color         : var(--text-inverse);
+    text-shadow   : 0 0 8px #00000080;
+}
+
+section#authentication>section.body {
+    margin-top        : -160px;
+    padding           : 180px 30px 20px 30px;
+    gap               : 3ex;
+    display           : flex;
+    flex-direction    : column;
+    border-radius     : 3px;
+    background-color  : var(--background-above);
+    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>a {
+    margin-left: 5%;
     font-size  : 1.2em;
+    font-weight: bold;
 }
 
-#authentication>ul {
+section#authentication>section.body>ul {
-    margin-left: 25%;
+    margin       : unset;
+    margin-left  : 10%;
+    margin-bottom: 1ex;
 }
 
-#authentication ul ul {
+section#authentication>section.body ul ul {
     padding-top: 1ex;
 }
 
-#authentication ul li:not(:last-child) {
+section#authentication>section.body ul li:not(:last-child) {
     margin-bottom: 1ex;
 }
+
+section#authentication>section.body div.buttons {
+    display: flex;
+}
+
+section#authentication>section.body div.buttons>button {
+    padding         : 1ex 2ex;
+    cursor          : pointer;
+    border-radius   : 3px;
+    font-size       : 0.9em;
+    background-color: unset;
+}
+
+section#authentication>section.body div.buttons>button:hover {
+    color: var(--text-hover);
+}
+
+section#authentication>section.body div.buttons>button:active {
+    color     : var(--text-active);
+    transition: unset;
+}
+
+section#authentication>section.body div.buttons>button:first-of-type {
+    margin-left : auto;
+    margin-right: 5%;
+}
+
+section#authentication>section.body div.buttons>button:last-of-type {
+    margin-right: auto;
+}
+
+section#authentication>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 {
+    color           : var(--text-inverse-above);
+    background-color: #6fa259;
+}
+
+section#authentication>section.body div.buttons>button.accept:active {
+    background-color: #63954d;
+}

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

@@ -1,9 +1,4 @@
 @keyframes red {
-    from {
-        left: -250%;
-        top : -300%;
-    }
-
     25% {
         left: -240%;
         top : -130%;
@@ -26,11 +21,6 @@
 }
 
 @keyframes blue {
-    from {
-        left: -280%;
-        top : -80%;
-    }
-
     25% {
         left: -180%;
         top : -100%;
@@ -53,11 +43,6 @@
 }
 
 @keyframes green {
-    from {
-        left: -180%;
-        top : -100%;
-    }
-
     25% {
         left: -120%;
         top : -250%;
@@ -79,7 +64,7 @@
     }
 }
 
-@keyframes background {
+@keyframes wrap-background {
     from {
         background-color: #ff5c5c;
     }
@@ -101,42 +86,50 @@
     }
 }
 
-#authentication>section.header.gradient {
+:is(div, section).gradient {
     position                 : relative;
     overflow                 : hidden;
     animation-duration       : 30s;
-    animation-name           : background;
+    animation-name           : wrap-background;
     animation-iteration-count: infinite;
     background-repeat        : no-repeat;
     animation-timing-function: ease-in-out;
 }
 
-#authentication>section.header.gradient>div {
+:is(div, section).gradient>div:not(.gradient) {
     z-index                  : -1000;
     width                    : 500%;
     height                   : 500%;
     position                 : absolute;
+    pointer-events           : none;
+    filter                   : blur(200px);
     animation-duration       : 12s;
     background-repeat        : no-repeat;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }
 
-#authentication>section.header.gradient>div.red {
+:is(div, section).gradient>div.red {
+    left          : -250%;
+    top           : -300%;
     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 {
+:is(div, section).gradient>div.blue {
+    left          : -280%;
+    top           : -80%;
     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 {
+:is(div, section).gradient>div.green {
+    left          : -180%;
+    top           : -100%;
     animation-name: green;
     background-image: radial-gradient(circle,
             rgba(25, 255, 25, 1) 0%,

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

@@ -0,0 +1,245 @@
+@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 {
+    z-index   : 0;
+    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

@@ -0,0 +1,31 @@
+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_close.css

@@ -0,0 +1,29 @@
+.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

@@ -2,7 +2,10 @@
 
 @media (prefers-color-scheme: light) {
     :root {
-        --background               : #eee;
+        --background-above-1       : #fff;
+        --background-above         : #fff6f6;
+        --background               : #e8dada;
+        --background-below         : #d7c5c5;
         --background-inverse       : #221e1e;
         --background-inverse-dark  : #120f0f;
         --node-background-important: #c3eac3;
@@ -10,29 +13,24 @@
         --node-background          : #bdb;
         --connection               : #b2b7b2;
         --connection-completed     : #d1d1d1;
-        --text                     : #131313;
+        --text                     : #151313;
-        --text-hover               : #292929;
+        --text-hover               : #463e3e;
-        --text-active              : #0c0c0c;
+        --text-active              : #0e0e0e;
-        --text-inverse             : #e6e6e6;
+        --text-inverse-above       : #fff;
-        --text-inverse-hover       : #fff;
+        --text-inverse             : #efefef;
-        --text-inverse-active      : #d0d0d0;
+        --text-inverse-below       : #d0d0d0;
         --text-red                 : #f8a2a2;
         --text-red-hover           : #ffbcbc;
         --text-red-active          : #e69191;
-        --link                     : #3c76ff;
-        --link-hover               : #6594ff;
-        --link-active              : #3064dd;
     }
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-light-3: #403939;
+        --background-above-1: #322d2d;
-        --background-light-2: #322d2d;
+        --background-above  : #2b2525;
-        --background-light-1: #2b2525;
-        --background-light  : #252020;
         --background        : #221e1e;
-        --block-background  : ;
+        --background-below  : #121010;
         --node-background   : #221e1e;
         --text              : #e6e6e6;
         --text-hover        : #fff;
@@ -45,10 +43,32 @@
     }
 }
 
+@keyframes page-background-gradient {
+    25% {
+        left: -350%;
+        top : 0%;
+    }
+
+    50% {
+        left: 0%;
+        top : 0%;
+    }
+
+    75% {
+        left: 0%;
+        top : -350%;
+    }
+
+    to {
+        left: -350%;
+        top : -350%;
+    }
+}
+
 :root {
-    --grey-light: #c0c0c0;
+    --link       : #3c76ff;
-    --grey      : #858585;
+    --link-hover : #6594ff;
-    --grey-dark : #565656;
+    --link-active: #3064dd;
 }
 
 * {
@@ -79,6 +99,7 @@ a:hover {
 
 a:active {
     color     : var(--link-active);
+    transition: unset;
 }
 
 body {
@@ -88,6 +109,22 @@ body {
     background-color: var(--background);
 }
 
+body>div.background {
+    z-index                  : -50000;
+    left                     : -350%;
+    top                      : -350%;
+    width                    : 500%;
+    height                   : 500%;
+    position                 : absolute;
+    filter                   : blur(200px);
+    animation-duration       : 15s;
+    animation-name           : page-background-gradient;
+    animation-iteration-count: infinite;
+    background-repeat        : no-repeat;
+    animation-timing-function: linear;
+    background-image         : radial-gradient(circle, var(--background-above) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
 aside {
     z-index    : 500;
     grid-column: 1/ 4;

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

@@ -12,12 +12,15 @@
     {% endif %}
     {% else %}
     <section class="header gradient">
-        <img src="/images/what.png" alt="Пользователь">
+        <div class="glare"></div>
+        <img class="avatar" src="/images/what.png" alt="Пользователь">
+        <h3>Арсен Мирзаев</h3>
         <div class="red"></div>
         <div class="green"></div>
         <div class="blue"></div>
     </section>
-    <b>Предоставить доступ:</b>
+    <section class="body">
+        <a href="https://mirzaev.sexy">https://mirzaev.sexy</a>
         <ul>
             <li>Подпункт 2.1.</li>
             <li>Подпункт 2.2.
@@ -28,12 +31,20 @@
             </li>
             <li>Подпункт 2.3.</li>
         </ul>
-    <a href="https://mirzaev.sexy">https://mirzaev.sexy</a>
         <div class="buttons">
-        <button>Принять</button>
+            <button class="accept">Разрешить</button>
-        <button>Заблокировать</button>
+            <button>Запретить</button>
         </div>
+    </section>
     {% endif %}
+    <svg width="0" height="0">
+        <defs>
+            <clipPath id="authentication-header-mask">
+                <path
+                    d="M50,160 L50,130 C22,130 0,107.612 0,80 C0,52 22,30 50,30 L50,3 C50,1.3 51.3,0 53,0 L447,0 C448,0 450,1.5 450,3 L450,160 L50,160 Z" />
+            </clipPath>
+        </defs>
+    </svg>
 </section>
 {% endblock %}
 

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

@@ -3,7 +3,7 @@
 <link type="text/css" rel="stylesheet" href="/css/icon_close.css" />
 {% endblock %}
 
-{% block main %}
+{% block body %}
 {% if graph.id != empty %}
 <section id="{{ graph.id }}" class="graph unselectable" {% for name, value in graph.attributes %} {{ name }}="{{value}}"
     {% endfor %}>

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

@@ -4,7 +4,7 @@
 {% 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 %}
-{% use 'graph/index.html' with css as graph_css, main as graph_main, js as graph_js, js_init as graph_js_init %}
+{% use 'graph/index.html' with css as graph_css, body as graph_body, js as graph_js, js_init as graph_js_init %}
 
 {% block css %}
 {{ block('core_css') }}
@@ -24,9 +24,11 @@
 	{% block main %}
 	{{ block('account_body') }}
 	{% endblock %}
+	{{ block('graph_body') }}
 </main>
 
 {# {% include 'footer.html' %} #}
+{# <div class="background"></div> #}
 {% endblock %}
 
 {% block js %}