From 871272563be77ac646455893be245da518238de5 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Fri, 20 Feb 2026 12:51:52 +0300
Subject: [PATCH 1/7] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=20=D1=83=D1=81=D0=BB=D0=BE=D0=B2=D0=B8=D0=B5=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D1=8F=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BA=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BA=20=D0=A1=D0=BA=D0=BE=D0=BF=D0=B8=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=82=D1=8C=20=D0=B8=20=D0=A1=D0=BA=D0=B0=D1=87?=
 =?UTF-8?q?=D0=B0=D1=82=D1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f61d5cb..f710199 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -135,8 +135,10 @@ function copyAndToast(text){
       </p>
     </template>
     <template #footer>
-      <button type="button"  class="btn-green" @click="isModalVisible = false">Скачать код</button>
-      <button type="button"  class="btn-green" @click="copyAndToast(finallyText)">Скопировать код</button>
+      <div v-if="listOfTrips.length">
+        <button type="button"  class="btn-green" @click="isModalVisible = false">Скачать код</button>
+        <button type="button"  class="btn-green" @click="copyAndToast(finallyText)">Скопировать код</button>
+      </div>
       <button type="button"  class="btn-green" @click="isModalVisible = false">ОК</button>
     </template>
   </MyDialog>

From 30100410399d01dbfcda930fe572e14d61d17443 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Mon, 23 Feb 2026 21:02:30 +0300
Subject: [PATCH 2/7] =?UTF-8?q?=D0=BF=D0=BE=D0=B4=D0=BE=D0=B3=D0=BD=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B2=D1=81=D1=91=20+-=20=D0=BF=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B8=D0=BD=20=D1=86=D0=B2=D0=B5=D1=82/=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=D0=BB=D1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- добавлены картинки аруко маркеров
- цвета изменены
- изменено положение кнопок Очистить, Сохранить и карты маркеров
---
 src/App.vue          | 237 +++++++++++++++++++++++++++++++------------
 src/Images/image.jpg | Bin 0 -> 2981 bytes
 2 files changed, 171 insertions(+), 66 deletions(-)
 create mode 100644 src/Images/image.jpg

diff --git a/src/App.vue b/src/App.vue
index f710199..ae0a11e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,37 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from "vue";
 import izitoast from "./izitoast";
-import { useEventListener } from '@vueuse/core';
-import MyDialog from './components/MyDialog.vue';
-import copyToclipboard from './copyToclipboard';
-
+import { useEventListener } from "@vueuse/core";
+import MyDialog from "./components/MyDialog.vue";
+import copyToclipboard from "./copyToclipboard";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
-const listOfTrips = ref([])
-const isModalVisible = ref(false)
-let finallyText = '';
+const listOfTrips = ref([]);
+const isModalVisible = ref(false);
+let finallyText = "";
 
-onMounted(()=>{
+onMounted(() => {
   for (let i = 0; i < 100; i++) {
     numbers.value.push({
       variable: [],
       x: i % 10,
       y: 9 - Math.floor(i / 10),
-      index: i
+      index: i,
     });
   }
-})
+});
 
 function setNumber(item) {
   let valueOfMarker = item.variable[0];
   //если в клетке нет числа, то оно поставится
-  if (valueOfMarker === '') {
+  if (valueOfMarker === "") {
     item.variable.push(String(clickCount.value));
     listOfTrips.value.push(item);
     clickCount.value++;
   } else if (valueOfMarker === clickCount.value - 1) {
     //если мы нажимаем на последнюю выбранную клетку, то у неё удаляется число
-    item.variable.splice(0, 1) ;
+    item.variable.splice(0, 1);
     const index = listOfTrips.value.indexOf(item);
     if (index !== -1) {
       listOfTrips.value.splice(index, 1);
@@ -40,138 +39,244 @@ function setNumber(item) {
     clickCount.value--;
   } else {
     //если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
-    listOfTrips.value.push(item)
-    if (numbers.value[item.index].variable.at(-1) === clickCount.value-1) {
+    listOfTrips.value.push(item);
+    if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
       izitoast.error({
-        title:'Ошибка', 
-        message:'Нельзя выбирать один и тот же aruco маркер 2 раза подряд'
-      })
-      return 
+        title: "Ошибка",
+        message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
+      });
+      return;
     }
-    numbers.value[item.index].variable.push(clickCount.value)
+    numbers.value[item.index].variable.push(clickCount.value);
     clickCount.value++;
-
   }
 }
 
 function saveResult() {
-  let navigate_waites = ''
+  let navigate_waites = "";
   for (const item of listOfTrips.value) {
     navigate_waites += `navigate_wait(${item.x}, ${item.y})\n\t`;
   }
-  fetch('/shablons/emergency_and_navigate.txt')
-    .then(response => response.text())
-    .then(textOfCode => {
-      finallyText = textOfCode.replace('<<navigate_wait>>', navigate_waites);
+  fetch("/shablons/emergency_and_navigate.txt")
+    .then((response) => response.text())
+    .then((textOfCode) => {
+      finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
     });
-  isModalVisible.value = true
+  isModalVisible.value = true;
 }
 
 function cleanResult() {
-  clickCount.value = 1
-  numbers.value = []
-  listOfTrips.value = []
+  clickCount.value = 1;
+  numbers.value = [];
+  listOfTrips.value = [];
   for (let i = 0; i < 100; i++) {
     numbers.value.push({
       variable: [],
       x: i % 10,
       y: 9 - Math.floor(i / 10),
-      index: i
+      index: i,
     });
   }
 }
 // Обрабатываем нажатие Ctrl + Z
 const handleKeydown = (event) => {
-  if (event.ctrlKey && event.code === 'KeyZ' && listOfTrips.value.length ) {
+  if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
     event.preventDefault();
     numbers.value[listOfTrips.value.at(-1).index].variable.pop();
     listOfTrips.value.pop();
-    
+
     if (clickCount.value === 1) {
-      return
-    } else{
+      return;
+    } else {
       clickCount.value--;
     }
   }
 };
-useEventListener('keydown', handleKeydown);
+useEventListener("keydown", handleKeydown);
 
-function copyAndToast(text){
-  copyToclipboard(text)
+function copyAndToast(text) {
+  copyToclipboard(text);
   izitoast.success({
-        title:'Успешно', 
-        message:'Код скопирован в буфер обмена'
-      })
+    title: "Успешно",
+    message: "Код скопирован в буфер обмена",
+  });
 }
 </script>
 
 <template>
   <div class="grid">
     <div
-        class="square"
-        v-for="(item, index) in numbers"
-        :data-key="index"
-        :key="index"
-        @click="setNumber(item)"
+      class="square"
+      v-for="(item, index) in numbers"
+      :data-key="index"
+      :key="index"
+      @click="setNumber(item)"
     >
-    {{ numbers[index].variable.join(', ') }}
+      {{ numbers[index].variable.join(", ") }}
     </div>
   </div>
-  <button
-    @click="saveResult"
-  >Сохранить</button>
-    <button
-    @click="cleanResult"
-  >Очистить</button>
 
-  <MyDialog v-show="isModalVisible" @close="isModalVisible = false">
+  <div class="SaveCleanBtn">
+    <button id="saveBtn" @click="saveResult">Сохранить</button>
+    <button id="cleanBtn" @click="cleanResult">Очистить</button>
+  </div>
+
+  <MyDialog
+    v-show="isModalVisible"
+    @close="isModalVisible = false"
+    class="dialogWindow"
+  >
     <template #header>
-      <strong v-if="listOfTrips.length">Код готов!</strong>
-      <strong v-else>Код не готов!</strong>
+      <strong id='codeIsReady' v-if="listOfTrips.length">Код готов!</strong>
+      <strong id='codeNotReady' v-else>Код не готов!</strong>
     </template>
     <template #body>
-      <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
-      <p v-else>Выстройте маршрут перед сохранением кода.
+      <p v-if="listOfTrips.length" id="headText1">
+        Скопируйте или скачайте ваш код
       </p>
+      <p v-else>Выстройте маршрут перед сохранением кода.</p>
     </template>
     <template #footer>
       <div v-if="listOfTrips.length">
-        <button type="button"  class="btn-green" @click="isModalVisible = false">Скачать код</button>
-        <button type="button"  class="btn-green" @click="copyAndToast(finallyText)">Скопировать код</button>
+        <button type="button" class="btn-green" @click="isModalVisible = false">
+          Скачать код
+        </button>
+        <button
+          type="button"
+          class="btn-green"
+          @click="copyAndToast(finallyText)"
+        >
+          Скопировать код
+        </button>
       </div>
-      <button type="button"  class="btn-green" @click="isModalVisible = false">ОК</button>
+      <button type="button" class="btn-green" @click="isModalVisible = false">
+        ОК
+      </button>
     </template>
   </MyDialog>
 
+  <div class="helptext">
+    <p>Для формирования маршрута</p>
+    <p>дрона нажимайте на маркеры,</p>
+    <p>по которым он полетит</p>
+    <p>Для отмены действия</p>
+    <p>нажмите Ctrl + Z</p>
+  </div>
 </template>
 
 <style>
-:root{
+html {
+  background-image: radial-gradient(#383838e2, #222222);
+  border: 3px solid rgb(251, 251, 251);
+}
+
+:root {
   --side: 70px;
 }
+
 .grid {
   display: grid;
+  padding: 3px;
   grid-template-columns: repeat(10, var(--side));
   gap: 10px;
   user-select: none;
 }
 
+.helptext {
+  position: absolute;
+  top: 15px;
+  left: 20px;
+  font-size: 25px;
+  color: rgb(251, 251, 251);
+}
+
 .square {
-  width: var(--side);  /* Ширина квадрата */
+  width: var(--side); /* Ширина квадрата */
   height: var(--side); /* Высота квадрата */
+  background-image: url("images/image.jpg");
+  background-size: cover;
+  border: 3px solid rgb(251, 251, 251);
   background-color: #e0e0e0;
+  margin-left: 340px;
   cursor: pointer;
   transition: background-color 0.3s;
   overflow-y: scroll;
+
+  background-blend-mode: multiply;
+  background-color: transparent;
+  transition: background-color 0.3s ease;
 }
 
 .square:hover {
-  background-color: #d0d0d0;
+  background-color: rgb(166, 162, 162);
+}
+.square:active {
+  background-color: rgb(164, 162, 162);
 }
 .square::-webkit-scrollbar {
   display: none;
 }
-.square[data-key='90'] {
-  background-color: red;
+.square[data-key="90"] {
+  background-color: rgba(0, 2, 0, 0.638);
 }
+
+.SaveCleanBtn button {
+  border: 2px solid rgb(251, 251, 251);
+  padding: 15px 30px;
+  font-size: 15px;
+  background-color: #383838;
+  color: white;
+  cursor: pointer;
+  margin: 5px;
+  transition: 0.3s;
+  position: absolute;
+}
+#saveBtn {
+  top: 320px;
+  left: 15px;
+}
+#cleanBtn {
+  top: 320px;
+  left: 180px;
+}
+
+.modal {
+  background-color: #2f2f2f;
+}
+
+.modal-body{
+  color: beige;
+  size: 20px;
+  font-size: 20px;
+}
+
+#headText1 {
+  color: white;
+  font-size: 20px;
+}
+
+.btn-green :hover {
+  background-color: rgb(229, 67, 67);
+}
+
+.modal-footer [type = 'button'] {
+  background-color: rgba(255, 255, 255, 0.777);
+  color: rgb(3, 3, 3);
+  border: 0;
+}
+
+.modal-header [type = 'button'] {
+  color: red;
+  font-size: 25px;
+}
+
+#codeIsReady {
+  color: white;
+}
+
+#codeNotReady{
+  color:rgb(248, 8, 8);
+  size: 20px;
+}
+
 </style>
diff --git a/src/Images/image.jpg b/src/Images/image.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bb06549c31067a1cafc7aaf03657136bdead0280
GIT binary patch
literal 2981
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

literal 0
HcmV?d00001


From 3c2ec962016fc699efdaa373527e5e0b00eb2d4a Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Wed, 25 Feb 2026 08:36:14 +0300
Subject: [PATCH 3/7] =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=86=D0=B2=D0=B5=D1=82=20=D1=86=D0=B8=D1=84=D1=80=20?=
 =?UTF-8?q?=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B8=20=D0=BC=D0=B0=D1=80=D0=BA?=
 =?UTF-8?q?=D0=B5=D1=80=D0=BE=D0=B2=20=D0=B4=D0=BB=D1=8F=20=D0=BB=D1=83?=
 =?UTF-8?q?=D1=87=D1=88=D0=B5=D0=B9=20=D0=B2=D0=B8=D0=B4=D0=B8=D0=BC=D0=BE?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ae0a11e..cfe8e29 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -112,7 +112,8 @@ function copyAndToast(text) {
       :key="index"
       @click="setNumber(item)"
     >
-      {{ numbers[index].variable.join(", ") }}
+    
+    <div id="idenx">{{ numbers[index].variable.join(", ") }}</div>
     </div>
   </div>
 
@@ -134,7 +135,7 @@ function copyAndToast(text) {
       <p v-if="listOfTrips.length" id="headText1">
         Скопируйте или скачайте ваш код
       </p>
-      <p v-else>Выстройте маршрут перед сохранением кода.</p>
+      <p v-else id='ReccomendText'>Выстройте маршрут перед сохранением кода.</p>
     </template>
     <template #footer>
       <div v-if="listOfTrips.length">
@@ -275,8 +276,20 @@ html {
 }
 
 #codeNotReady{
-  color:rgb(248, 8, 8);
+  color:rgb(248, 8, 8); 
   size: 20px;
 }
 
+#ReccomendText{
+  color: white;
+}
+
+#idenx{
+  color:white;
+  text-shadow: 
+    -1px -1px 0 black,
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
+}
 </style>

From dffde0e4f565f2a64495d21327707deea61ea7c3 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Wed, 25 Feb 2026 13:59:48 +0300
Subject: [PATCH 4/7] =?UTF-8?q?=D0=9F=D1=80=D0=B5=D0=B4=D0=B2=D0=B0=D0=B0?=
 =?UTF-8?q?=D1=80=D0=B8=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BC=D0=B8=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   | 132 ++++++++++++----------------------
 src/components/MyDialog.vue   |  59 +++++++++------
 src/components/MyDropMenu.vue |  48 +++++++++++++
 3 files changed, 129 insertions(+), 110 deletions(-)
 create mode 100644 src/components/MyDropMenu.vue

diff --git a/src/App.vue b/src/App.vue
index cfe8e29..59a5661 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 import izitoast from "./izitoast";
 import { useEventListener } from "@vueuse/core";
 import MyDialog from "./components/MyDialog.vue";
+import MyDropMenu from "./components/MyDropMenu.vue";
 import copyToclipboard from "./copyToclipboard";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
@@ -104,77 +105,77 @@ function copyAndToast(text) {
 </script>
 
 <template>
-  <div class="grid">
-    <div
-      class="square"
-      v-for="(item, index) in numbers"
-      :data-key="index"
-      :key="index"
-      @click="setNumber(item)"
-    >
-    
-    <div id="idenx">{{ numbers[index].variable.join(", ") }}</div>
+  <div class="wraper">
+    <div class="grid">
+      <div
+        class="square"
+        v-for="(item, index) in numbers"
+        :data-key="index"
+        :key="index"
+        @click="setNumber(item)"
+      >
+      {{ numbers[index].variable.join(", ") }}
+      </div>
     </div>
+
+    <div class="actions">
+      <button @click="saveResult">Сохранить</button>
+      <button @click="cleanResult">Очистить</button>
+      <button @click="cleanResult">Отменить</button>
+    </div>
+    <!-- <MyDropMenu/> -->
   </div>
 
-  <div class="SaveCleanBtn">
-    <button id="saveBtn" @click="saveResult">Сохранить</button>
-    <button id="cleanBtn" @click="cleanResult">Очистить</button>
-  </div>
 
   <MyDialog
     v-show="isModalVisible"
     @close="isModalVisible = false"
     class="dialogWindow"
+    :is-success=listOfTrips.length
   >
     <template #header>
-      <strong id='codeIsReady' v-if="listOfTrips.length">Код готов!</strong>
-      <strong id='codeNotReady' v-else>Код не готов!</strong>
+      <strong v-if="listOfTrips.length">Код готов!</strong>
+      <strong v-else>Код не готов!</strong>
     </template>
     <template #body>
-      <p v-if="listOfTrips.length" id="headText1">
+      <p v-if="listOfTrips.length">
         Скопируйте или скачайте ваш код
       </p>
-      <p v-else id='ReccomendText'>Выстройте маршрут перед сохранением кода.</p>
+      <p v-else>Выстройте маршрут перед сохранением кода.</p>
     </template>
     <template #footer>
       <div v-if="listOfTrips.length">
-        <button type="button" class="btn-green" @click="isModalVisible = false">
+        <button type="button" @click="isModalVisible = false">
           Скачать код
         </button>
         <button
           type="button"
-          class="btn-green"
           @click="copyAndToast(finallyText)"
         >
           Скопировать код
         </button>
       </div>
-      <button type="button" class="btn-green" @click="isModalVisible = false">
+      <button type="button"@click="isModalVisible = false">
         ОК
       </button>
     </template>
   </MyDialog>
-
-  <div class="helptext">
-    <p>Для формирования маршрута</p>
-    <p>дрона нажимайте на маркеры,</p>
-    <p>по которым он полетит</p>
-    <p>Для отмены действия</p>
-    <p>нажмите Ctrl + Z</p>
-  </div>
 </template>
 
 <style>
 html {
   background-image: radial-gradient(#383838e2, #222222);
-  border: 3px solid rgb(251, 251, 251);
+  color: white;
 }
 
 :root {
   --side: 70px;
 }
 
+.wraper {
+  display: flex;
+}
+
 .grid {
   display: grid;
   padding: 3px;
@@ -183,14 +184,6 @@ html {
   user-select: none;
 }
 
-.helptext {
-  position: absolute;
-  top: 15px;
-  left: 20px;
-  font-size: 25px;
-  color: rgb(251, 251, 251);
-}
-
 .square {
   width: var(--side); /* Ширина квадрата */
   height: var(--side); /* Высота квадрата */
@@ -198,7 +191,6 @@ html {
   background-size: cover;
   border: 3px solid rgb(251, 251, 251);
   background-color: #e0e0e0;
-  margin-left: 340px;
   cursor: pointer;
   transition: background-color 0.3s;
   overflow-y: scroll;
@@ -206,6 +198,13 @@ html {
   background-blend-mode: multiply;
   background-color: transparent;
   transition: background-color 0.3s ease;
+
+  color:white;
+  text-shadow: 
+    -1px -1px 0 black,
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
 }
 
 .square:hover {
@@ -221,7 +220,12 @@ html {
   background-color: rgba(0, 2, 0, 0.638);
 }
 
-.SaveCleanBtn button {
+.actions {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.actions button {
   border: 2px solid rgb(251, 251, 251);
   padding: 15px 30px;
   font-size: 15px;
@@ -230,15 +234,6 @@ html {
   cursor: pointer;
   margin: 5px;
   transition: 0.3s;
-  position: absolute;
-}
-#saveBtn {
-  top: 320px;
-  left: 15px;
-}
-#cleanBtn {
-  top: 320px;
-  left: 180px;
 }
 
 .modal {
@@ -246,50 +241,11 @@ html {
 }
 
 .modal-body{
-  color: beige;
   size: 20px;
   font-size: 20px;
 }
 
-#headText1 {
-  color: white;
-  font-size: 20px;
-}
-
 .btn-green :hover {
   background-color: rgb(229, 67, 67);
 }
-
-.modal-footer [type = 'button'] {
-  background-color: rgba(255, 255, 255, 0.777);
-  color: rgb(3, 3, 3);
-  border: 0;
-}
-
-.modal-header [type = 'button'] {
-  color: red;
-  font-size: 25px;
-}
-
-#codeIsReady {
-  color: white;
-}
-
-#codeNotReady{
-  color:rgb(248, 8, 8); 
-  size: 20px;
-}
-
-#ReccomendText{
-  color: white;
-}
-
-#idenx{
-  color:white;
-  text-shadow: 
-    -1px -1px 0 black,
-    1px -1px 0 black,
-    -1px 1px 0 black,
-    1px 1px 0 black;
-}
 </style>
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 3e9c43e..c5fca6f 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -2,20 +2,20 @@
   <transition name="modal-fade">
     <div class="modal-backdrop" @click="closeModal">
       <div class="modal" @click.stop>
-        <header class="modal-header">
+        <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
           <slot name="header">
             <strong>Заголовок по умолчанию</strong>
           </slot>
-          <button type="button" class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+          <button class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
             ×
           </button>
         </header>
         <section class="modal-body">
           <slot name="body">Тело по умолчанию</slot>
         </section>
-        <footer class="modal-footer">
+        <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
           <slot name="footer">
-            <button type="button" class="btn-green" @click="closeModal">Закрыть</button>
+            <button  @click="closeModal">Закрыть</button>
           </slot>
         </footer>
       </div>
@@ -25,6 +25,12 @@
 
 <script setup>
 const emit = defineEmits(['close'])
+const props = defineProps({
+  isSuccess: {
+    type: Boolean,
+    required: true
+  }
+})
 function closeModal() {
     emit('close');
 }
@@ -62,13 +68,37 @@ function closeModal() {
 
 .modal-header {
   border-bottom: 1px solid #eeeeee;
-  color: #4AAE9B;
   justify-content: space-between;
 }
+.modal-header-success {
+  color: #4AAE9B;
+}
+.modal-header-error {
+  color: red;
+}
+
+.modal-header [type = 'button'] {
+  color: red;
+  font-size: 25px;
+}
 
 .modal-footer {
-  border-top: 1px solid #eeeeee;
   justify-content: flex-end;
+  border-top: 1px solid white;
+}
+.modal-footer [type = 'button'] {
+  justify-content: flex-end;
+  border-top: 1px solid white;
+  padding: 5px;
+}
+.modal-footer-success [type = 'button'] {
+  background-color: #4AAE9B;
+  border: none;
+  margin: 3px;
+}
+.modal-footer-error [type = 'button'] {
+  background: red;
+  border: none;
 }
 
 .modal-body {
@@ -82,25 +112,10 @@ function closeModal() {
   padding: 0;
   cursor: pointer;
   font-weight: bold;
-  color: #4AAE9B;
+  color: red;
   background: transparent;
 }
 
-.btn-green {
-  color: white;
-  background: #4AAE9B;
-  border: 1px solid #4AAE9B;
-  border-radius: 2px;
-  padding: 5px;
-  margin: 0 5px;
-}
-.btn-green:hover {
-  background-color: #0fa386;
-}
-.btn-green:active {
-  background-color: #65ebd2;
-}
-
 .modal-fade-enter,
 .modal-fade-leave-active {
   opacity: 0;
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
new file mode 100644
index 0000000..de86a3a
--- /dev/null
+++ b/src/components/MyDropMenu.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="dropdown">
+    <button @click="toggleDropdown">☰ Меню</button>
+    <ul v-show="isOpen" class="dropdown-menu-left">
+      <li><a href="#">Пункт 1</a></li>
+      <li><a href="#">Пункт 2</a></li>
+      <li><a href="#">Пункт 3</a></li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<style>
+.dropdown-menu-left {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  background: #fff;
+  border: 1px solid #ccc;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  min-width: 150px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.dropdown-menu-left li a {
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+  color: #333;
+}
+
+.dropdown-menu-left li a:hover {
+  background: #f0f0f0;
+}
+</style>
\ No newline at end of file

From 7b51b59b40e204bad52cf75af0715145b24dff77 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Wed, 25 Feb 2026 21:17:21 +0300
Subject: [PATCH 5/7] =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B4=D0=B2=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BC=D0=B8=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- сделала панель навигации
---
 src/App.vue                   |   2 +-
 src/components/MyDropMenu.vue | 130 ++++++++++++++++++++++++++--------
 2 files changed, 101 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 59a5661..8b3bda9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -123,7 +123,7 @@ function copyAndToast(text) {
       <button @click="cleanResult">Очистить</button>
       <button @click="cleanResult">Отменить</button>
     </div>
-    <!-- <MyDropMenu/> -->
+    <MyDropMenu/>
   </div>
 
 
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index de86a3a..1d7a56d 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -1,11 +1,37 @@
 <template>
-  <div class="dropdown">
-    <button @click="toggleDropdown">☰ Меню</button>
-    <ul v-show="isOpen" class="dropdown-menu-left">
-      <li><a href="#">Пункт 1</a></li>
-      <li><a href="#">Пункт 2</a></li>
-      <li><a href="#">Пункт 3</a></li>
-    </ul>
+  <div class="navigation-wrapper">
+    <!-- Кнопка Бургер -->
+    <button 
+      class="burger-btn" 
+      @click="toggleMenu" 
+      :class="{ 'is-active': isOpen }"
+      aria-label="Menu"
+    >
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+    </button>
+
+    <!-- Затемнение заднего фона (Overlay) -->
+    <transition name="fade">
+      <div v-if="isOpen" class="overlay" @click="closeMenu"></div>
+    </transition>
+
+    <!-- Выпадающая панель -->
+    <transition name="slide">
+      <aside v-if="isOpen" class="side-panel">
+        <div class="menu-header">
+          <h3>Навигация</h3>
+        </div>
+        
+        <nav class="menu-content">
+          <a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
+          <slot>
+            <p class="placeholder">Здесь будут ваши ссылки...</p>
+          </slot>
+        </nav>
+      </aside>
+    </transition>
   </div>
 </template>
 
@@ -14,35 +40,79 @@ import { ref } from 'vue';
 
 const isOpen = ref(false);
 
-function toggleDropdown() {
+const toggleMenu = () => {
   isOpen.value = !isOpen.value;
-}
+};
+
+const closeMenu = () => {
+  isOpen.value = false;
+};
+
+// Экспортируем методы, если захотим управлять меню извне
+defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
 </script>
 
-<style>
-.dropdown-menu-left {
-  position: absolute;
+<style scoped>
+.burger-btn {
+  position: fixed; /* Она всегда на одном месте при скролле */
+  top: 20px;
+  left: 20px;
+  z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 40px;      
+  height: 30px;
+  background: rgba(255, 255, 255, 0.508); 
+  border: 1px solid #383838;    
+  cursor: pointer;
+  padding: 5px;
+}
+
+.line {
+  width: 100%;
+  height: 4px;
+  background-color: #383838; /* Ярко-красный цвет для теста */
+  transition: all 0.3s ease;
+}
+
+/* Анимация бургера в крестик */
+.is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+.is-active .line:nth-child(2) { opacity: 0; }
+.is-active .line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
+
+/* Боковая панель */
+.side-panel {
+  position: fixed;
+  top: 0;
   left: 0;
-  top: 100%;
-  background: #fff;
-  border: 1px solid #ccc;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  min-width: 150px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
+  width: 300px;
+  height: 100vh;
+  background: white;
+  z-index: 1000;
+  padding: 80px 20px 20px;
 }
 
-.dropdown-menu-left li a {
-  display: block;
-  padding: 10px 15px;
-  text-decoration: none;
-  color: #333;
+/* Затемнение фона */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
 }
 
-.dropdown-menu-left li a:hover {
-  background: #f0f0f0;
+/* Анимации появления */
+.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
+.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
+.placeholder {
+  color: #00e44c; 
+  /* цвет текста */
+  font-style: italic;
 }
-</style>
\ No newline at end of file
+</style>

From 8fa0e9042aaa58328c9ed9aa5e41ffd490cc5b74 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Thu, 26 Feb 2026 12:52:21 +0300
Subject: [PATCH 6/7] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=D0=B8?=
 =?UTF-8?q?=20=D0=BC=D1=91=D1=80=D1=82=D0=B2=D1=8B=D0=B5=20=D0=BA=D0=BB?=
 =?UTF-8?q?=D0=B0=D1=81=D1=81=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 | 14 +-------------
 src/components/MyDialog.vue | 12 +-----------
 2 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8b3bda9..f8d1037 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -174,6 +174,7 @@ html {
 
 .wraper {
   display: flex;
+  justify-content: center;
 }
 
 .grid {
@@ -235,17 +236,4 @@ html {
   margin: 5px;
   transition: 0.3s;
 }
-
-.modal {
-  background-color: #2f2f2f;
-}
-
-.modal-body{
-  size: 20px;
-  font-size: 20px;
-}
-
-.btn-green :hover {
-  background-color: rgb(229, 67, 67);
-}
 </style>
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index c5fca6f..abb6ab5 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -50,7 +50,7 @@ function closeModal() {
 }
 
 .modal {
-  background: #FFFFFF;
+  background: #2f2f2f;
   box-shadow: 2px 2px 20px 1px;
   overflow-x: auto;
   display: flex;
@@ -115,14 +115,4 @@ function closeModal() {
   color: red;
   background: transparent;
 }
-
-.modal-fade-enter,
-.modal-fade-leave-active {
-  opacity: 0;
-}
-
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-  transition: opacity 0.5s ease;
-}
 </style>   
\ No newline at end of file

From b3f68e7c9844c8dfd6b2ce1893ffe2758c09f656 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Sat, 28 Feb 2026 21:54:46 +0300
Subject: [PATCH 7/7] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B8=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20=D0=BD=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=B0=D1=82=D0=B8=D1=8F=20=D0=BD=D0=B0=20=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=BA=D1=83=20=D0=9E=D1=82=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C,?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   | 31 +++++++++++++------------------
 src/components/MyDialog.vue   |  5 +++--
 src/components/MyDropMenu.vue | 12 +++++++-----
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f8d1037..bae7ced 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,14 +30,6 @@ function setNumber(item) {
     item.variable.push(String(clickCount.value));
     listOfTrips.value.push(item);
     clickCount.value++;
-  } else if (valueOfMarker === clickCount.value - 1) {
-    //если мы нажимаем на последнюю выбранную клетку, то у неё удаляется число
-    item.variable.splice(0, 1);
-    const index = listOfTrips.value.indexOf(item);
-    if (index !== -1) {
-      listOfTrips.value.splice(index, 1);
-    }
-    clickCount.value--;
   } else {
     //если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
     listOfTrips.value.push(item);
@@ -66,6 +58,17 @@ function saveResult() {
   isModalVisible.value = true;
 }
 
+function cancel(){
+  numbers.value[listOfTrips.value.at(-1).index].variable.pop();
+    listOfTrips.value.pop();
+
+    if (clickCount.value === 1) {
+      return;
+    } else {
+      clickCount.value--;
+    }
+}
+
 function cleanResult() {
   clickCount.value = 1;
   numbers.value = [];
@@ -83,14 +86,7 @@ function cleanResult() {
 const handleKeydown = (event) => {
   if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
     event.preventDefault();
-    numbers.value[listOfTrips.value.at(-1).index].variable.pop();
-    listOfTrips.value.pop();
-
-    if (clickCount.value === 1) {
-      return;
-    } else {
-      clickCount.value--;
-    }
+    cancel();
   }
 };
 useEventListener("keydown", handleKeydown);
@@ -121,7 +117,7 @@ function copyAndToast(text) {
     <div class="actions">
       <button @click="saveResult">Сохранить</button>
       <button @click="cleanResult">Очистить</button>
-      <button @click="cleanResult">Отменить</button>
+      <button @click="cancel">Отменить</button>
     </div>
     <MyDropMenu/>
   </div>
@@ -165,7 +161,6 @@ function copyAndToast(text) {
 <style>
 html {
   background-image: radial-gradient(#383838e2, #222222);
-  color: white;
 }
 
 :root {
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index abb6ab5..ff3d438 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -6,7 +6,7 @@
           <slot name="header">
             <strong>Заголовок по умолчанию</strong>
           </slot>
-          <button class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+          <button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
             ×
           </button>
         </header>
@@ -104,9 +104,10 @@ function closeModal() {
 .modal-body {
   position: relative;
   padding: 20px 10px;
+  color: white
 }
 
-.btn-close {
+.modal-btn-close {
   border: none;
   font-size: 20px;
   padding: 0;
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 1d7a56d..679e06c 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -21,7 +21,7 @@
     <transition name="slide">
       <aside v-if="isOpen" class="side-panel">
         <div class="menu-header">
-          <h3>Навигация</h3>
+          <h1>SkyVue</h1>
         </div>
         
         <nav class="menu-content">
@@ -68,7 +68,9 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
   cursor: pointer;
   padding: 5px;
 }
-
+h1{
+  text-align: center;
+}
 .line {
   width: 100%;
   height: 4px;
@@ -77,9 +79,9 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
 }
 
 /* Анимация бургера в крестик */
-.is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
 .is-active .line:nth-child(2) { opacity: 0; }
-.is-active .line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
+.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
 
 /* Боковая панель */
 .side-panel {
@@ -90,7 +92,7 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
   height: 100vh;
   background: white;
   z-index: 1000;
-  padding: 80px 20px 20px;
+  padding: 0 20px 20px;
 }
 
 /* Затемнение фона */