From 1edefddbbae6683a79f21e477acbecf252d785ec Mon Sep 17 00:00:00 2001
From: RomaFedoro <fedorovroman1506@gmail.com>
Date: Sun, 12 Dec 2021 01:23:53 +0700
Subject: [PATCH] Update Design

---
 src/assets/css/creation.css        |   6 +-
 src/assets/css/graph.css           | 342 ++++++++++++++++++++++++++---
 src/assets/icons/close.svg         |   2 +-
 src/assets/icons/help.svg          |   1 +
 src/assets/icons/info.svg          |   1 +
 src/assets/icons/matrix.svg        |   1 +
 src/assets/icons/next-step.svg     |   2 +-
 src/assets/icons/pause.svg         |   2 +-
 src/assets/icons/play.svg          |   2 +-
 src/assets/icons/previous-step.svg |   2 +-
 src/views/View.vue                 | 172 +++++++++++----
 11 files changed, 449 insertions(+), 84 deletions(-)
 create mode 100644 src/assets/icons/help.svg
 create mode 100644 src/assets/icons/info.svg
 create mode 100644 src/assets/icons/matrix.svg

diff --git a/src/assets/css/creation.css b/src/assets/css/creation.css
index 07ffcf0..6fae9ea 100644
--- a/src/assets/css/creation.css
+++ b/src/assets/css/creation.css
@@ -31,6 +31,7 @@ body {
   height: 100%;
   background-color: var(--body-color);
   color: var(--text-color);
+  padding: 0 64px;
 }
 
 html {
@@ -50,7 +51,7 @@ html {
   max-width: 100%;
   width: max-content;
   display: flex;
-  margin: 44px 0 56px;
+  margin: auto;
 }
 
 .matrix {
@@ -158,6 +159,7 @@ html {
   text-align: center;
   font-family: "Formular";
 }
+
 .number input[type="number"]::-webkit-outer-spin-button,
 .number input[type="number"]::-webkit-inner-spin-button {
   display: none;
@@ -221,4 +223,4 @@ html {
 .disabled-button {
   opacity: 0.2;
   cursor: auto;
-}
+}
\ No newline at end of file
diff --git a/src/assets/css/graph.css b/src/assets/css/graph.css
index e42e218..4a240b8 100644
--- a/src/assets/css/graph.css
+++ b/src/assets/css/graph.css
@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 :root {
   --main-color: rgb(97 196 189);
   --complement-color: rgb(46 105 120);
@@ -15,7 +13,7 @@
   background-color: var(--body-color);
 }
 
-body > #app {
+body>#app {
   margin: 0;
   font-family: "Formular";
   height: 100%;
@@ -31,6 +29,7 @@ html {
 .wrapper {
   display: flex;
   flex: 1;
+  padding: 0;
   padding-right: 32px;
   padding-left: 32px;
   flex-direction: column;
@@ -43,6 +42,7 @@ html {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
 .graph-cont,
@@ -52,16 +52,17 @@ html {
 
 header {
   width: 100%;
-  padding: 48px 0;
+  height: 60px;
+  margin: 48px 0 24px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  position: relative;
 }
 
 .header-step-cont {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-left: 48px;
 }
 
 .header-step-description {
@@ -80,33 +81,35 @@ header {
   width: 48px;
   height: 20px;
   margin: 0 12px;
-  background-image: url("~@/assets/icons/vector.svg");
+  background-image: url(~@/assets/icons/vector.svg);
 }
 
 .control-cont {
-  padding: 48px 0;
+  padding: 36px 0 48px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.menu-cont {
-  padding: 48px 64px;
+.addition-cont {
+  padding: 48px 0;
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
-  overflow-y: auto;
   display: flex;
+  width: 34px;
+  overflow-y: auto;
 }
 
-.menu-cont__left {
-  padding-right: 0;
-}
-
-.menu-cont__right {
-  padding-left: 0;
+.menu {
+  overflow-y: visible;
 }
 
 .step-cont,
-.btn-cont {
+.btn-cont,
+.menu-cont {
+  height: -webkit-max-content;
+  height: -moz-max-content;
   height: max-content;
   margin: auto;
 }
@@ -130,15 +133,6 @@ header {
   margin-bottom: 0;
 }
 
-.header-close-button {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  opacity: 0.4;
-  background-image: url("~@/assets/icons/close.svg");
-}
-
 .step::after {
   content: "";
   position: absolute;
@@ -168,15 +162,29 @@ header {
 }
 
 .dynamic-active-step::after {
+  -webkit-animation-name: next;
   animation-name: next;
+  -webkit-animation-duration: 4s;
   animation-duration: 4s;
+  -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 }
 
+@-webkit-keyframes next {
+  from {
+    background: #c1c1c1;
+  }
+
+  to {
+    background: #ff5c8e;
+  }
+}
+
 @keyframes next {
   from {
     background: #c1c1c1;
   }
+
   to {
     background: #ff5c8e;
   }
@@ -194,6 +202,7 @@ header {
   cursor: pointer;
   transition: 0.2s;
   opacity: 0.6;
+  position: relative;
 }
 
 .main-control-button {
@@ -202,19 +211,19 @@ header {
 }
 
 #previous-step {
-  background-image: url("~@/assets/icons/previous-step.svg");
+  background-image: url(~@/assets/icons/previous-step.svg);
 }
 
 #next-step {
-  background-image: url("~@/assets/icons/next-step.svg");
+  background-image: url(~@/assets/icons/next-step.svg);
 }
 
 #play {
-  background-image: url("~@/assets/icons/play.svg");
+  background-image: url(~@/assets/icons/play.svg);
 }
 
 #pause {
-  background-image: url("~@/assets/icons/pause.svg");
+  background-image: url(~@/assets/icons/pause.svg);
 }
 
 .control-button:hover {
@@ -225,3 +234,274 @@ header {
   opacity: 0.1;
   cursor: auto;
 }
+
+.empty-graph-cont {
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+  color: gray;
+}
+
+.render-area {
+  z-index: 1;
+}
+
+.inaccessible {
+  opacity: 0;
+}
+
+.adjacency_matrix-cont {
+  position: absolute;
+  background-color: #f3f3f3;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  display: flex;
+  justify-content: center;
+}
+
+.adjacency_matrix {
+  padding: 48px 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+
+.menu-icon {
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 20px;
+  cursor: pointer;
+  position: relative;
+}
+
+.menu-icon:hover {
+  opacity: 1;
+}
+
+.matrix-icon {
+  background-image: url(~@/assets/icons/matrix.svg);
+}
+
+.info-icon {
+  background-image: url(~@/assets/icons/info.svg);
+}
+
+.help-icon {
+  background-image: url(~@/assets/icons/help.svg);
+}
+
+.close-icon {
+  background-image: url(~@/assets/icons/close.svg);
+  width: 20px;
+  height: 20px;
+  opacity: 0.6;
+  transition: .2s;
+}
+
+.menu-icon:last-child {
+  margin-bottom: 0;
+}
+
+.adjacency_matrix-menu {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 52px;
+}
+
+.header {
+  font-size: 18px;
+  font-weight: 700;
+  margin-right: 36px;
+}
+
+.header-matrix {
+  margin-right: 12px;
+}
+
+.popup-cont {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  box-sizing: border-box;
+  overflow-y: auto;
+  display: flex;
+  padding: 48px 64px;
+  background: rgb(0 0 0 / 60%);
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.version {
+  color: gray;
+  font-size: 12px;
+  font-weight: 300;
+  margin-left: 4px;
+}
+
+.popup {
+  margin: auto;
+  padding: 32px 28px;
+  background: white;
+  border-radius: 6px;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+  width: 480px;
+}
+
+.popup-text {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.popup-el {
+  margin-bottom: 20px;
+}
+
+p {
+  margin: 0;
+  margin-bottom: 8px;
+}
+
+.popup-el:last-child {
+  margin-bottom: 0;
+}
+
+.gray {
+  color: #b8b8b8;
+  font-weight: 500;
+}
+
+.menu-prompt, .prompt {
+  left: 100%;
+  position: absolute;
+  z-index: 6;
+  visibility: hidden;
+  height: 12px;
+  /* margin-top: -2px; */
+  line-height: 1;
+  font-size: 12px;
+  padding: 8px 12px;
+  color: rgb(255 255 255);
+  font-weight: 500;
+  background: rgb(56 58 63);
+  border-radius: 4px;
+  opacity: 0;
+  box-shadow: 0px 1px 5px 1px 0px 1px 5px 1px rgb(56 58 63 / 35%);
+  transition: .2s;
+  display: block;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.menu-prompt {
+  margin-left: 8px;
+  margin-top: 2px;
+}
+
+.menu-prompt::before {
+  content: "";
+  position: absolute;
+  display: block;
+  left: -14px;
+  top: 7px;
+  border: 8px solid;
+  border-color: transparent rgb(56 58 63) transparent transparent;
+}
+
+.prompt {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  transform: translate(-50%, 0);
+  left: 50%;
+  top: -100%;
+  margin: -6px auto;
+}
+
+.prompt::after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 100%;
+  left: 50%;
+  border: 8px solid;
+  border-color: rgb(56 58 63) transparent transparent transparent;
+  transform: translate(-50%, 0);
+}
+
+.menu-icon:hover .menu-prompt, .control-button:hover .prompt {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: .5s;
+}
+
+.error {
+  background: rgb(255, 58, 58);
+  color: white;
+  display: flex;
+  padding: 12px 16px;
+  border-radius: 6px;
+  width: max-content;
+  align-items: center;
+  position: absolute;
+  z-index: 5;
+  box-shadow: 0px 1px 5px 1px rgb(56 58 63 / 15%);
+}
+
+.popup-el.popup-button-cont {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: 8px;
+}
+
+.popup-button {
+  padding: 6px 12px;
+  margin-right: 8px;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.main-popup-button {
+  padding: 10px 14px;
+  border: 1px solid;
+  border-radius: 28px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.hints {
+  user-select: none;
+  z-index: 0;
+  color: gray;
+  font-size: 14px;
+}
\ No newline at end of file
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
index dab4455..fac385c 100644
--- a/src/assets/icons/close.svg
+++ b/src/assets/icons/close.svg
@@ -1 +1 @@
-<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-miterlimit:10;stroke-width:10px;}</style></defs><line class="cls-1" x1="21" y1="21" x2="79" y2="79"/><line class="cls-1" x1="21" y1="79" x2="79" y2="21"/></svg>
\ No newline at end of file
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="21" y1="21" x2="79" y2="79"/><line class="cls-1" x1="21" y1="79" x2="79" y2="21"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/help.svg b/src/assets/icons/help.svg
new file mode 100644
index 0000000..3c3abd4
--- /dev/null
+++ b/src/assets/icons/help.svg
@@ -0,0 +1 @@
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M76.49,35a26.5,26.5,0,0,0-53-1.62c-.28,4.84,2.62,11.15,5.12,15.62a26.89,26.89,0,0,1,3.46,13.13v.19a4.18,4.18,0,0,0,4.18,4.18H63.68a4.18,4.18,0,0,0,4.18-4.18h0A26.47,26.47,0,0,1,71.43,49C73.8,44.91,76.49,39.32,76.49,35Z"/><path class="cls-1" d="M37.41,76.5H61.56A4.43,4.43,0,0,1,66,80.93v2.76a7.81,7.81,0,0,1-7.81,7.81H40.8A7.81,7.81,0,0,1,33,83.69V80.93A4.43,4.43,0,0,1,37.41,76.5Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
new file mode 100644
index 0000000..fcca45c
--- /dev/null
+++ b/src/assets/icons/info.svg
@@ -0,0 +1 @@
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#330522;}</style></defs><circle class="cls-1" cx="50" cy="50" r="40"/><path class="cls-2" d="M47.63,68.22a4.84,4.84,0,0,1-3.37-1.13,3.81,3.81,0,0,1-1.26-3,7,7,0,0,1,.15-1.29L47.48,41.2h7.2L50.41,62.41h3l-1.13,5.81Zm4.12-30a4.48,4.48,0,0,1-2.81-.72,2.38,2.38,0,0,1-.9-2,5.75,5.75,0,0,1,.11-1c.07-.38.13-.72.2-1a7.4,7.4,0,0,1,.47-1.34A3.55,3.55,0,0,1,49.69,31a4.57,4.57,0,0,1,1.44-.85,6.21,6.21,0,0,1,2.16-.33,4.48,4.48,0,0,1,2.81.72,2.37,2.37,0,0,1,.9,2,5.67,5.67,0,0,1-.1,1c-.07.38-.14.72-.21,1a7.09,7.09,0,0,1-.46,1.34A3.61,3.61,0,0,1,55.35,37a4.29,4.29,0,0,1-1.44.85A5.9,5.9,0,0,1,51.75,38.22Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/matrix.svg b/src/assets/icons/matrix.svg
new file mode 100644
index 0000000..802a083
--- /dev/null
+++ b/src/assets/icons/matrix.svg
@@ -0,0 +1 @@
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}</style></defs><rect class="cls-1" x="9.99" y="10" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="56.31" y="10" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="9.99" y="56.3" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="56.31" y="56.3" width="33.7" height="33.7" rx="3.43"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/next-step.svg b/src/assets/icons/next-step.svg
index 2e2cd9d..e3ec937 100644
--- a/src/assets/icons/next-step.svg
+++ b/src/assets/icons/next-step.svg
@@ -1 +1 @@
-<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M19.12,16.64V83.36a1.51,1.51,0,0,0,2.26,1.3L78.89,51.3a1.51,1.51,0,0,0,0-2.6L21.38,15.34A1.51,1.51,0,0,0,19.12,16.64Z"/><rect class="cls-1" x="77.88" y="25" width="3" height="50" rx="1.5" transform="translate(158.75 100) rotate(180)"/></svg>
\ No newline at end of file
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M19.12,16.64V83.36a1.51,1.51,0,0,0,2.26,1.3L78.89,51.3a1.51,1.51,0,0,0,0-2.6L21.38,15.34A1.51,1.51,0,0,0,19.12,16.64Z"/><rect class="cls-1" x="77.88" y="25" width="3" height="50" rx="1.5" transform="translate(158.75 100) rotate(180)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
index b2f537f..35e4df5 100644
--- a/src/assets/icons/pause.svg
+++ b/src/assets/icons/pause.svg
@@ -1 +1 @@
-<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><rect class="cls-1" x="15" y="8" width="21" height="84" rx="1.5"/><rect class="cls-1" x="64" y="8" width="21" height="84" rx="1.5"/></svg>
\ No newline at end of file
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><rect class="cls-1" x="15" y="8" width="21" height="84" rx="1.5"/><rect class="cls-1" x="64" y="8" width="21" height="84" rx="1.5"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg
index 22664d2..a780281 100644
--- a/src/assets/icons/play.svg
+++ b/src/assets/icons/play.svg
@@ -1 +1 @@
-<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M22.06,9.81V90.19a1.8,1.8,0,0,0,2.71,1.56L94.05,51.56a1.8,1.8,0,0,0,0-3.12L24.77,8.25A1.8,1.8,0,0,0,22.06,9.81Z"/></svg>
\ No newline at end of file
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M22.06,9.81V90.19a1.8,1.8,0,0,0,2.71,1.56L94.05,51.56a1.8,1.8,0,0,0,0-3.12L24.77,8.25A1.8,1.8,0,0,0,22.06,9.81Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/previous-step.svg b/src/assets/icons/previous-step.svg
index 1d38059..91950fc 100644
--- a/src/assets/icons/previous-step.svg
+++ b/src/assets/icons/previous-step.svg
@@ -1 +1 @@
-<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M80.88,83.36V16.64a1.51,1.51,0,0,0-2.26-1.3L21.11,48.7a1.51,1.51,0,0,0,0,2.6L78.62,84.66A1.51,1.51,0,0,0,80.88,83.36Z"/><rect class="cls-1" x="19.12" y="25" width="3" height="50" rx="1.5"/></svg>
\ No newline at end of file
+<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M80.88,83.36V16.64a1.51,1.51,0,0,0-2.26-1.3L21.11,48.7a1.51,1.51,0,0,0,0,2.6L78.62,84.66A1.51,1.51,0,0,0,80.88,83.36Z"/><rect class="cls-1" x="19.12" y="25" width="3" height="50" rx="1.5"/></svg>
\ No newline at end of file
diff --git a/src/views/View.vue b/src/views/View.vue
index c3b6cb6..3884bc7 100644
--- a/src/views/View.vue
+++ b/src/views/View.vue
@@ -1,5 +1,129 @@
 <template>
-  <div class="menu-cont">
+  <!--<div class="adjacency_matrix-cont">
+    <div class="adjacency_matrix">
+      <div class="adjacency_matrix-menu">
+        <div class="header  header-matrix">Матрица смежности</div>
+        <div class="menu-icon close-icon"></div>
+      </div>
+      <div class="matrix-cont">
+        <div class="value-rows-matrix-cont">
+          <div class="value-row-matrix">0</div>
+          <div class="value-row-matrix">1</div>
+          <div class="value-row-matrix">2</div>
+        </div>
+        <div class="body-matrix">
+          <div class="matrix">
+            <div class="matrix-column">
+              <div class="value-matrix-column">0</div>
+              <div class="auto-matrix-cell"></div>
+              <div class="auto-matrix-cell"></div>
+              <div class="auto-matrix-cell"></div>
+            </div>
+            <div class="matrix-column">
+              <div class="value-matrix-column">1</div>
+              <div class="auto-matrix-cell"></div>
+              <div class="auto-matrix-cell"></div>
+              <div class="auto-matrix-cell"></div>
+            </div>
+            <div class="matrix-column">
+              <div class="value-matrix-column">2</div>
+              <div class="auto-matrix-cell"></div>
+              <div class="auto-matrix-cell"></div>
+              <div class="auto-matrix-cell"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>-->
+  <!--<div class="popup-cont">
+    <div class="popup">
+      <div class="popup-el popup-header">
+        <div class="header">Эйлеров граф <span class="version">v0.1</span></div>
+        <div class="menu-icon close-icon"></div>
+      </div>
+      <div class="popup-el popup-text">
+        <p>
+          Граф как математический объект есть совокупность двух множеств —
+          множества самих объектов, называемого множеством вершин, и множества
+          их парных связей, называемого множеством рёбер.
+        </p>
+        <p>Элемент множества рёбер есть пара элементов множества вершин.</p>
+      </div>
+      <div class="popup-el popup-text gray">by Robonen</div>
+      <div class="popup-el popup-button-cont">
+        <div class="popup-button">Уволиться</div>
+        <div class="main-popup-button">Поставить 10 баллов</div>
+      </div>
+    </div>
+  </div>-->
+  <div class="addition-cont menu">
+    <div class="menu-cont">
+      <div class="menu-icon matrix-icon">
+        <div class="menu-prompt">Матрица смежности</div>
+      </div>
+      <div class="menu-icon help-icon">
+        <div class="menu-prompt">Обучение управлению</div>
+      </div>
+      <div class="menu-icon info-icon">
+        <div class="menu-prompt">О программе</div>
+      </div>
+    </div>
+  </div>
+  <div class="wrapper">
+    <header>
+      <!--<div class="error">Эйлерова цикла в этом графе нет</div>-->
+      <div class="header-step-cont inaccessible">
+        <div class="header-step-text">
+          <div class="header-vertex">
+            {{ stepExists ? steps[currentStep].source : "-" }}
+          </div>
+          <div class="header-arrow"></div>
+          <div class="header-vertex">
+            {{ stepExists ? steps[currentStep].target : "-" }}
+          </div>
+        </div>
+        <div class="header-step-description">
+          шаг {{ stepExists ? currentStep + 1 : "-" }} /
+          {{ stepExists ? stepsCount : "-" }}
+        </div>
+      </div>
+    </header>
+    <div class="graph-cont">
+      <div class="empty-graph-cont">
+        Нажмите ЛКМ дважды, чтобы добавить вершину
+      </div>
+      <graph @isEuler="getSteps" :stepData="currentStepData"></graph>
+      <div class="hints">Чтобы удалить вершину, нажмите ПКМ по ней</div>
+    </div>
+    <div class="control-cont">
+      <div class="control-button" id="previous-step" @click="prevStep">
+        <div class="prompt">Предыдущий шаг</div>
+      </div>
+      <div
+        class="main-control-button control-button"
+        id="pause"
+        v-if="played"
+        @click="stop"
+      >
+        <div class="prompt">Остановить</div>
+      </div>
+      <div
+        class="main-control-button control-button"
+        id="play"
+        v-else
+        :class="{ 'boundary-step': !stepExists }"
+        @click="play"
+      >
+        <div class="prompt">Продолжить</div>
+      </div>
+
+      <div class="control-button" id="next-step" @click="nextStep">
+        <div class="prompt">Следующий шаг</div>
+      </div>
+    </div>
+  </div>
+  <div class="addition-cont">
     <div class="step-cont">
       <div
         class="step"
@@ -15,56 +139,12 @@
       <div class="step">4</div> -->
     </div>
   </div>
-  <div class="wrapper">
-    <header>
-      <div></div>
-      <div class="header-step-cont">
-        <div class="header-step-text">
-          <div class="header-vertex">
-            {{ stepExists ? steps[currentStep].source : "-" }}
-          </div>
-          <div class="header-arrow"></div>
-          <div class="header-vertex">
-            {{ stepExists ? steps[currentStep].target : "-" }}
-          </div>
-        </div>
-        <div class="header-step-description">
-          шаг {{ stepExists ? currentStep + 1 : "-" }} /
-          {{ stepExists ? stepsCount : "-" }}
-        </div>
-      </div>
-      <router-link to="/">
-        <div class="header-close-button"></div>
-      </router-link>
-    </header>
-    <div class="graph-cont">
-      <graph @isEuler="getSteps" :stepData="currentStepData"></graph>
-    </div>
-    <div class="control-cont">
-      <div class="control-button" id="previous-step" @click="prevStep"></div>
-      <div
-        class="main-control-button control-button"
-        id="pause"
-        v-if="played"
-        @click="stop"
-      ></div>
-      <div
-        class="main-control-button control-button"
-        id="play"
-        v-else
-        :class="{ 'boundary-step': !stepExists }"
-        @click="play"
-      ></div>
-
-      <div class="control-button" id="next-step" @click="nextStep"></div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { computed, ref } from "vue";
 import Graph from "../components/Graph.vue";
-
+// Frontend не выдержит ещё одних правок. Тут и так сейчас много говна
 export default {
   name: "View",
   components: {