From c1d8b96f49d160ae5b3dce55d39ef62a9e22e975 Mon Sep 17 00:00:00 2001 From: Mirzaev Date: Wed, 30 Nov 2022 12:39:56 +1000 Subject: [PATCH] graphic update --- .../account/system/public/css/account.css | 185 ++++++++++--- .../account/system/public/css/gradient.css | 37 ++- .../site/account/system/public/css/graph.css | 245 ++++++++++++++++++ .../account/system/public/css/hotline.css | 31 +++ .../account/system/public/css/icon_close.css | 29 +++ .../site/account/system/public/css/main.css | 81 ++++-- .../account/system/views/account/element.html | 45 ++-- .../account/system/views/graph/index.html | 2 +- mirzaev/site/account/system/views/index.html | 4 +- 9 files changed, 564 insertions(+), 95 deletions(-) create mode 100644 mirzaev/site/account/system/public/css/graph.css create mode 100644 mirzaev/site/account/system/public/css/hotline.css create mode 100644 mirzaev/site/account/system/public/css/icon_close.css diff --git a/mirzaev/site/account/system/public/css/account.css b/mirzaev/site/account/system/public/css/account.css index 65b3e98..2460a7f 100644 --- a/mirzaev/site/account/system/public/css/account.css +++ b/mirzaev/site/account/system/public/css/account.css @@ -1,54 +1,175 @@ -#authentication { - width : 25vw; - margin : 25vh auto; - padding : 70px 40px; - display : flex; - flex-direction : column; - background-color: var(--background-light-1); +@keyframes glare { + + 2%, + 100% { + left : 130%; + bottom : -200%; + width : 120px; + opacity: 1; + } } -#authentication>section.header { - width : 100px; - height : 100px; - margin : auto; - display : flex; - border-radius: 100%; - overflow : hidden; +section#authentication { + z-index : 1000; + width : 400px; + position : relative; + margin : 25vh auto; + display : flex; + flex-direction: column; } -#authentication>section { - margin: unset; - color : #fff; +section#authentication>section.header { + z-index : 1000; + height : 100px; + margin-left : -50px; + padding : 30px 0; + display : flex; + 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.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; - font-size : 1.2em; +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; } -#authentication>ul { - margin-left: 25%; +section#authentication>section.header>div { + animation-duration: 80s; } -#authentication ul ul { +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; +} + +section#authentication>section.body>ul { + margin : unset; + margin-left : 10%; + margin-bottom: 1ex; +} + +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; +} diff --git a/mirzaev/site/account/system/public/css/gradient.css b/mirzaev/site/account/system/public/css/gradient.css index e8acf15..4a9bcdd 100644 --- a/mirzaev/site/account/system/public/css/gradient.css +++ b/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%, diff --git a/mirzaev/site/account/system/public/css/graph.css b/mirzaev/site/account/system/public/css/graph.css new file mode 100644 index 0000000..04271e4 --- /dev/null +++ b/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); +} diff --git a/mirzaev/site/account/system/public/css/hotline.css b/mirzaev/site/account/system/public/css/hotline.css new file mode 100644 index 0000000..a142e74 --- /dev/null +++ b/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; +} diff --git a/mirzaev/site/account/system/public/css/icon_close.css b/mirzaev/site/account/system/public/css/icon_close.css new file mode 100644 index 0000000..ddd6fbb --- /dev/null +++ b/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) +} diff --git a/mirzaev/site/account/system/public/css/main.css b/mirzaev/site/account/system/public/css/main.css index 7539150..3f174c8 100644 --- a/mirzaev/site/account/system/public/css/main.css +++ b/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-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; } diff --git a/mirzaev/site/account/system/views/account/element.html b/mirzaev/site/account/system/views/account/element.html index 9087b40..b3b9256 100644 --- a/mirzaev/site/account/system/views/account/element.html +++ b/mirzaev/site/account/system/views/account/element.html @@ -12,28 +12,39 @@ {% endif %} {% else %}
- Пользователь +
+ Пользователь +

Арсен Мирзаев

- Предоставить доступ: - - https://mirzaev.sexy -
- - -
+
+ https://mirzaev.sexy + +
+ + +
+
{% endif %} + + + + + + + {% endblock %} diff --git a/mirzaev/site/account/system/views/graph/index.html b/mirzaev/site/account/system/views/graph/index.html index ecac2dd..deb0fe3 100644 --- a/mirzaev/site/account/system/views/graph/index.html +++ b/mirzaev/site/account/system/views/graph/index.html @@ -3,7 +3,7 @@ {% endblock %} -{% block main %} +{% block body %} {% if graph.id != empty %}
diff --git a/mirzaev/site/account/system/views/index.html b/mirzaev/site/account/system/views/index.html index a551c00..a595187 100644 --- a/mirzaev/site/account/system/views/index.html +++ b/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') }} {# {% include 'footer.html' %} #} +{#
#} {% endblock %} {% block js %}