mirzaev
/
site-account
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

graphic update

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2022-11-30 12:39:56 +10:00
parent cbeec14a9f
commit c1d8b96f49
9 changed files with 564 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,54 +1,175 @@
#authentication {
width : 25vw;
@keyframes glare {
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);
flex-direction: column;
}
#authentication>section.header {
width : 100px;
section#authentication>section.header {
z-index : 1000;
height : 100px;
margin : auto;
margin-left : -50px;
padding : 30px 0;
display : flex;
border-radius: 100%;
overflow : hidden;
clip-path : url(#authentication-header-mask);
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 {
margin: unset;
color : #fff;
}
#authentication>section.header>img {
width : 90%;
height : 90%;
section#authentication>section.header>img.avatar {
z-index : 1500;
left : 6px;
top : 36px;
width : 88px;
height : 88px;
position : absolute;
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);
cursor : pointer;
image-rendering : smooth;
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) {
margin-left: 15%;
section#authentication>section.header>img.avatar:hover {
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 {
margin-top: 30px;
section#authentication>section.header>div.glare {
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 {
margin-left: 25%;
section#authentication>section.body>ul {
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;
}

37
mirzaev/site/account/system/public/css/gradient.css
View File

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

245
mirzaev/site/account/system/public/css/graph.css Normal file
View File

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

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

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

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

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

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

@ -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-hover : #292929;
--text-active : #0c0c0c;
--text-inverse : #e6e6e6;
--text-inverse-hover : #fff;
--text-inverse-active : #d0d0d0;
--text : #151313;
--text-hover : #463e3e;
--text-active : #0e0e0e;
--text-inverse-above : #fff;
--text-inverse : #efefef;
--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-light-2: #322d2d;
--background-light-1: #2b2525;
--background-light : #252020;
--background-above-1: #322d2d;
--background-above : #2b2525;
--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;
--grey : #858585;
--grey-dark : #565656;
--link : #3c76ff;
--link-hover : #6594ff;
--link-active: #3064dd;
}
* {
@ -78,7 +98,8 @@ a:hover {
}
a:active {
color: var(--link-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;
@ -176,9 +213,9 @@ header>nav {
}
main {
z-index: 1000;
height: 100%;
display: flex;
z-index : 1000;
height : 100%;
display : flex;
flex-direction: column;
}

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

@ -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>Заблокировать</button>
<button class="accept">Разрешить</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 %}

2
mirzaev/site/account/system/views/graph/index.html
View File

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

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

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