From 76bda1c0ee35aa77c3247c5de37ce67379a54c56 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Thu, 12 Mar 2026 21:51:23 +0300
Subject: [PATCH 01/20] =?UTF-8?q?=D0=9F=D1=80=D0=B5=D0=B4=D0=B2=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=20=D0=BF=D0=BE=20=D0=BD=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B3=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B2=20=D0=B1?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=BE=D0=B2=D0=BE=D0=B9=20=D0=BF=D0=B0=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        |  45 ++---
 src/components/MyDialog.vue        |  19 ++-
 src/components/MyDropMenu.vue      | 260 ++++++++++++++++++++---------
 src/components/UI/CustomButton.vue |  35 ++++
 4 files changed, 249 insertions(+), 110 deletions(-)
 create mode 100644 src/components/UI/CustomButton.vue

diff --git a/src/App.vue b/src/App.vue
index 8650d0d..910121b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,12 @@
 <script setup>
 import {ref, onMounted, h} from "vue";
-import izitoast from "./shared/izitoast";
+import izitoast from "@/shared/izitoast";
 import {useEventListener} from "@vueuse/core";
-import MyDialog from "./components/MyDialog.vue";
-import MyDropMenu from "./components/MyDropMenu.vue";
-import copyToclipboard from "./shared/copyToclipboard";
+import MyDialog from "@/components/MyDialog.vue";
+import MyDropMenu from "@/components/MyDropMenu.vue";
+import copyToclipboard from "@/shared/copyToclipboard";
 import ContextMenu from "@imengyu/vue3-context-menu";
+import CustomButton from '@/components/UI/CustomButton.vue'
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
@@ -214,6 +215,7 @@ function deletePointMap(item) {
         item.BgImg = 'images/ArUco-marker.jpg'
     }
 }
+
 function createIcon(src) {
     return h('img', {
         src: src,
@@ -223,6 +225,7 @@ function createIcon(src) {
         }
     })
 }
+
 function onContextMenu(e, item) {
     ContextMenu.showContextMenu({
         theme: 'mac dark',
@@ -293,24 +296,27 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <button @click="saveResult">Сохранить</button>
-            <button @click="cleanResult">Очистить</button>
-            <button @click="cancel">Отменить</button>
+            <custom-button class="actions__btn">Сохранить</custom-button>
+            <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
+            <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
         </div>
         <MyDropMenu/>
     </div>
 
 
-    <MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
-              :is-success=Boolean(listOfTrips.length)>
+    <MyDialog
+        v-model:show="isModalVisible"
+        class="dialogWindow"
+        :is-success=Boolean(listOfTrips.length)
+    >
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
         </template>
-        <template #body>
+        <main>
             <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
             <p v-else>Выстройте маршрут перед сохранением кода.</p>
-        </template>
+        </main>
         <template #footer>
             <div v-if="listOfTrips.length">
                 <button @click="handleDownloadBtn">Скачать код</button>
@@ -324,6 +330,7 @@ function onContextMenu(e, item) {
 <style>
 html {
     background-image: radial-gradient(#383838e2, #222222);
+    font-size: 18px;
 }
 
 :root {
@@ -356,7 +363,6 @@ html {
     transition: background-color 0.3s ease;
 
     color: white;
-    font-size: 18px;
     text-shadow: -1px -1px 0 black,
     1px -1px 0 black,
     -1px 1px 0 black,
@@ -380,19 +386,16 @@ html {
 }
 
 .actions {
-    margin-left: 10px;
+    margin: 3px 0 0 10px;
+
     display: flex;
     flex-direction: column;
+    gap: 10px;
+    width: 150px;
 }
 
 .actions 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;
+    padding: 20px 35px;
+    //background-color: red;
 }
 </style>
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index c27b895..10bdff8 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -1,21 +1,22 @@
 <template>
     <transition name="modal-fade">
-        <div class="modal-backdrop" @click="closeModal">
+        <div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
             <div class="modal" @click.stop>
                 <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
                     <slot name="header">
                         <strong>Заголовок по умолчанию</strong>
                     </slot>
-                    <button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+                    <button class="modal-btn-close" @click.stop="$emit('update:show', false)"
+                            aria-label="Закрыть модальное окно">
                         ×
                     </button>
                 </header>
                 <section class="modal-body">
-                    <slot name="body">Тело по умолчанию</slot>
+                    <slot>Тело по умолчанию</slot>
                 </section>
                 <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
                     <slot name="footer">
-                        <button @click="closeModal">Закрыть</button>
+                        <button @click.stop="$emit('update:show', false)">Закрыть</button>
                     </slot>
                 </footer>
             </div>
@@ -24,17 +25,16 @@
 </template>
 
 <script setup>
-const emit = defineEmits(['close'])
 const props = defineProps({
     isSuccess: {
         type: Boolean,
         required: true
+    },
+    show: {
+        type: Boolean,
+        default: false
     }
 })
-
-function closeModal() {
-    emit('close');
-}
 </script>
 
 <style>
@@ -48,6 +48,7 @@ function closeModal() {
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: 501;
 }
 
 .modal {
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 679e06c..9f5fec6 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -1,120 +1,220 @@
 <template>
-  <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>
+    <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>
+        <!-- Затемнение заднего фона (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">
-          <h1>SkyVue</h1>
-        </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>
+        <!-- Выпадающая панель -->
+        <transition name="slide">
+            <aside v-if="isOpen" class="side-panel">
+                <div class="menu-header">
+                    <h1>SkyVue</h1>
+                </div>
+
+                <nav class="menu-content">
+                    <custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
+                </nav>
+            </aside>
+        </transition>
+        <MyDialog
+            isSuccess
+            v-model:show="isModalVisible"
+        >
+            <template #header>
+                <strong>{{ infoCard.title }}</strong>
+            </template>
+            <main>
+                <p>{{ infoCard.body }}</p>
+            </main>
+            <template #footer>
+                <custom-button title="Посмотреть на stepike">Курс</custom-button>
+                <custom-button title="Посмотреть в официальной документации">Документация</custom-button>
+                <custom-button>ОК</custom-button>
+            </template>
+        </MyDialog>
+    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
+import MyDialog from "@/components/MyDialog.vue";
+import CustomButton from '@/components/UI/CustomButton.vue'
 
 const isOpen = ref(false);
+const isModalVisible = ref(false);
+const infoCard = ref({})
 
 const toggleMenu = () => {
-  isOpen.value = !isOpen.value;
+    isOpen.value = !isOpen.value;
 };
 
 const closeMenu = () => {
-  isOpen.value = false;
+    isOpen.value = false;
 };
 
+function openInfoCard(obj) {
+    isModalVisible.value = true
+    infoCard.value = obj
+}
+
+const links = [
+    {
+        title: 'Что такое ROS?',
+        body: 'ROS — переводится как robot operation system',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '2',
+        body: 'Информация для учащихся 2',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '3',
+        body: 'Информация для учащихся 3',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '4',
+        body: 'Информация для учащихся 4',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '5',
+        body: 'Информация для учащихся 5',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '6',
+        body: 'Информация для учащихся 6',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '7',
+        body: 'Информация для учащихся 7',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '8',
+        body: 'Информация для учащихся 8',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '9',
+        body: 'Информация для учащихся 9',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '0',
+        body: 'Информация для учащихся 0',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+]
+
 // Экспортируем методы, если захотим управлять меню извне
-defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
+defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
 
 <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;
+    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;
 }
-h1{
-  text-align: center;
+
+h1 {
+    text-align: center;
 }
+
 .line {
-  width: 100%;
-  height: 4px;
-  background-color: #383838; /* Ярко-красный цвет для теста */
-  transition: all 0.3s ease;
+    width: 100%;
+    height: 4px;
+    background-color: #383838; /* Ярко-красный цвет для теста */
+    transition: all 0.3s ease;
 }
 
 /* Анимация бургера в крестик */
-.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(-6px) 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(-6px) rotate(-45deg);
+}
 
 /* Боковая панель */
 .side-panel {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 300px;
-  height: 100vh;
-  background: white;
-  z-index: 1000;
-  padding: 0 20px 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 100%;
+    background: white;
+    z-index: 1000;
+    padding: 0 20px 20px;
+    overflow-y: scroll;
 }
 
 /* Затемнение фона */
 .overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 2;
 }
 
 /* Анимации появления */
-.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
-.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
+.slide-enter-active, .slide-leave-active {
+    transition: transform 0.3s ease;
+}
 
-.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
+.slide-enter-from, .slide-leave-to {
+    transform: translateX(-100%);
+}
 
-.placeholder {
-  color: #00e44c; 
-  /* цвет текста */
-  font-style: italic;
+.fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+    opacity: 0;
 }
 </style>
diff --git a/src/components/UI/CustomButton.vue b/src/components/UI/CustomButton.vue
new file mode 100644
index 0000000..153626e
--- /dev/null
+++ b/src/components/UI/CustomButton.vue
@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+    isSuccess: {
+        type: Boolean,
+        required: true
+    },
+    to: {
+        type: String,
+        default: null
+    }
+})
+
+</script>
+
+<template>
+    <a v-if="to" :href="props.to" class="btn">
+        <slot/>
+    </a>
+    <button v-else class="btn">
+        <slot/>
+    </button>
+</template>
+
+<style scoped>
+.btn {
+    border: 2px solid white;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 5px;
+    background-color: #383838;
+    color: white;
+    width: 100%;
+    font-size: 17px;
+}
+</style>
\ No newline at end of file
-- 
2.52.0


From ed5d626f24bda8065a1451efe672592fe5f1f36b Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Sat, 14 Mar 2026 11:24:50 +0300
Subject: [PATCH 02/20] =?UTF-8?q?=D0=BD=D0=B0=D0=B7=D0=BD=D0=B0=D1=87?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E?=
 =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B5=20=D1=81=D0=BE=D1=85?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=82=D1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/App.vue b/src/App.vue
index 910121b..a5f196a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -296,7 +296,7 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <custom-button class="actions__btn">Сохранить</custom-button>
+            <custom-button class="actions__btn" @click="saveResult">Сохранить</custom-button>
             <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
             <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
         </div>
@@ -396,6 +396,6 @@ html {
 
 .actions button {
     padding: 20px 35px;
-    //background-color: red;
+   /* background-color: red; */
 }
 </style>
-- 
2.52.0


From f7ae74dd9b49bdff8fafa931807db21fc31a02a9 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Sun, 15 Mar 2026 14:35:29 +0300
Subject: [PATCH 03/20] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=BC=D0=B0=D0=BB=D0=B5=D0=BD=D1=8C=D0=BA?=
 =?UTF-8?q?=D1=83=D1=8E=20=D0=BE=D0=BF=D0=B5=D1=87=D0=B0=D1=82=D0=BA=D1=83?=
 =?UTF-8?q?=20=D0=B2=20=D1=88=D0=B0=D0=B1=D0=BB=D0=BE=D0=BD=D0=B5=20=D0=BE?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20=D0=B8=20=D0=B8=D0=B7=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=BB=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD?=
 =?UTF-8?q?=D1=83=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20=D0=BD=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B3=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/shablons/color.txt     | 2 +-
 src/components/MyDropMenu.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/shablons/color.txt b/public/shablons/color.txt
index b61e0f9..71cdb2c 100644
--- a/public/shablons/color.txt
+++ b/public/shablons/color.txt
@@ -34,7 +34,7 @@ def color_detection(data, print_type='str'):
             color = 'green'
         elif r > b + 20 and r > g + 20 and r > 100:  
             color = 'red'
-        elif r > 150 and g > 150 and g > 150:
+        elif r > 150 and g > 150 and b > 150:
             color= 'white'
         else:
             color = None
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 9f5fec6..d848f09 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -183,7 +183,7 @@ h1 {
     position: fixed;
     top: 0;
     left: 0;
-    width: 300px;
+    width: 240px;
     height: 100%;
     background: white;
     z-index: 1000;
-- 
2.52.0


From b43057e750efeb33420dfcc5554e273b91213441 Mon Sep 17 00:00:00 2001
From: alisagerasimova <mixeeva3316@mail.ru>
Date: Mon, 16 Mar 2026 14:59:27 +0300
Subject: [PATCH 04/20] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B8=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BA=D0=BE=D1=82=D0=BE=D1=80=D1=8B=D0=B5=20?=
 =?UTF-8?q?=D1=83=D0=BA=D0=B0=D0=B7=D0=B0=D0=BB=20=D1=82=D0=B5=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D1=89=D0=B8=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 52 +++++++++++-----------
 src/components/MyDialog.vue        | 19 +++++---
 src/components/MyDropMenu.vue      | 69 +++++++++++++++++++-----------
 src/components/UI/CustomButton.vue | 12 ++++--
 4 files changed, 92 insertions(+), 60 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a5f196a..333ad51 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
-import {ref, onMounted, h} from "vue";
+import { ref, onMounted, h } from "vue";
 import izitoast from "@/shared/izitoast";
-import {useEventListener} from "@vueuse/core";
+import { useEventListener } from "@vueuse/core";
 import MyDialog from "@/components/MyDialog.vue";
 import MyDropMenu from "@/components/MyDropMenu.vue";
 import copyToclipboard from "@/shared/copyToclipboard";
@@ -112,7 +112,7 @@ function cancel() {
 
 function cleanResult() {
     clickCount.value = 1;
-    listOfTrips.value.forEach(item => {
+    numbers.value.forEach(item => {
         item.isPlatform = false;
         item.isQR = false;
         item.variable = [];
@@ -142,7 +142,7 @@ function copyAndToast(text) {
 function handleDownloadBtn() {
     // Создание файла
     const downloadUrl = ref('');
-    const blob = new Blob([finallyText.value], {type: 'text/plain'});
+    const blob = new Blob([finallyText.value], { type: 'text/plain' });
     downloadUrl.value = URL.createObjectURL(blob);
     // Задержка для избежания ошибок в некоторых браузерах
     setTimeout(() => {
@@ -174,8 +174,10 @@ function createPlatform(item, color) {
 }
 
 function deletePlatform(item) {
-    item.BgImg = 'images/ArUco-marker.jpg'
-    item.isPlatform = false
+    if (item.isPlatform) {
+        item.BgImg = 'images/ArUco-marker.jpg'
+        item.isPlatform = false
+    }
 }
 
 function createQR(item) {
@@ -190,8 +192,10 @@ function createQR(item) {
 }
 
 function deleteQR(item) {
-    item.BgImg = 'images/ArUco-marker.jpg'
-    item.isQR = true
+    if (item.isQR) {
+        item.BgImg = 'images/ArUco-marker.jpg'
+        item.isQR = false
+    }
 }
 
 function deletePointMap(item) {
@@ -288,9 +292,8 @@ function onContextMenu(e, item) {
 <template>
     <div class="wraper">
         <div class="grid">
-            <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index"
-                 @click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)"
-                 :style="{backgroundImage: `url(${item.BgImg})`}">
+            <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index" @click="setNumber(item)"
+                @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
                 {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
@@ -300,15 +303,11 @@ function onContextMenu(e, item) {
             <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
             <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
         </div>
-        <MyDropMenu/>
+        <MyDropMenu />
     </div>
 
 
-    <MyDialog
-        v-model:show="isModalVisible"
-        class="dialogWindow"
-        :is-success=Boolean(listOfTrips.length)
-    >
+    <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
@@ -328,13 +327,17 @@ function onContextMenu(e, item) {
 </template>
 
 <style>
+* {
+    font-family: 'Courier New', Courier, monospace;
+}
+
 html {
-    background-image: radial-gradient(#383838e2, #222222);
+    background-image: radial-gradient(#23aae3e2, #222222);
     font-size: 18px;
 }
 
 :root {
-    --side: 70px;
+    --side: 75px;
 }
 
 .wraper {
@@ -346,7 +349,7 @@ html {
     display: grid;
     padding: 3px;
     grid-template-columns: repeat(10, var(--side));
-    gap: 10px;
+    gap: 5px;
     user-select: none;
 }
 
@@ -364,9 +367,10 @@ html {
 
     color: white;
     text-shadow: -1px -1px 0 black,
-    1px -1px 0 black,
-    -1px 1px 0 black,
-    1px 1px 0 black;
+        1px -1px 0 black,
+        -1px 1px 0 black,
+        1px 1px 0 black;
+    box-sizing: border-box;
 }
 
 .square:hover {
@@ -396,6 +400,6 @@ html {
 
 .actions button {
     padding: 20px 35px;
-   /* background-color: red; */
+    /* background-color: red; */
 }
 </style>
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 10bdff8..d3bafa2 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -2,19 +2,19 @@
     <transition name="modal-fade">
         <div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
             <div class="modal" @click.stop>
-                <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
+                <header :class="['modal-header', isSuccess ? 'modal-header-success' : 'modal-header-error']">
                     <slot name="header">
                         <strong>Заголовок по умолчанию</strong>
                     </slot>
                     <button class="modal-btn-close" @click.stop="$emit('update:show', false)"
-                            aria-label="Закрыть модальное окно">
+                        aria-label="Закрыть модальное окно">
                         ×
                     </button>
                 </header>
                 <section class="modal-body">
                     <slot>Тело по умолчанию</slot>
                 </section>
-                <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
+                <footer :class="['modal-footer', isSuccess ? 'modal-footer-success' : 'modal-footer-error']">
                     <slot name="footer">
                         <button @click.stop="$emit('update:show', false)">Закрыть</button>
                     </slot>
@@ -38,6 +38,10 @@ const props = defineProps({
 </script>
 
 <style>
+:root {
+    --successColor: #4ee882
+}
+
 .modal-backdrop {
     position: fixed;
     top: 0;
@@ -74,7 +78,7 @@ const props = defineProps({
 }
 
 .modal-header-success {
-    color: #4AAE9B;
+    color: var(--successColor);
 }
 
 .modal-header-error {
@@ -89,17 +93,18 @@ const props = defineProps({
 .modal-footer {
     justify-content: flex-end;
     border-top: 1px solid white;
+
 }
 
 .modal-footer button {
     justify-content: flex-end;
     border-top: 1px solid white;
     padding: 5px;
-    color: white;
+    color: rgb(0, 0, 0);
 }
 
 .modal-footer-success button {
-    background-color: #4AAE9B;
+    background-color: var(--successColor);
     border: none;
     margin: 3px;
 }
@@ -124,4 +129,4 @@ const props = defineProps({
     color: red;
     background: transparent;
 }
-</style>   
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index d848f09..5ee4948 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -1,12 +1,7 @@
 <template>
     <div class="navigation-wrapper">
         <!-- Кнопка Бургер -->
-        <button
-            class="burger-btn"
-            @click="toggleMenu"
-            :class="{ 'is-active': isOpen }"
-            aria-label="Menu"
-        >
+        <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>
@@ -29,10 +24,7 @@
                 </nav>
             </aside>
         </transition>
-        <MyDialog
-            isSuccess
-            v-model:show="isModalVisible"
-        >
+        <MyDialog isSuccess v-model:show="isModalVisible">
             <template #header>
                 <strong>{{ infoCard.title }}</strong>
             </template>
@@ -40,16 +32,18 @@
                 <p>{{ infoCard.body }}</p>
             </main>
             <template #footer>
-                <custom-button title="Посмотреть на stepike">Курс</custom-button>
-                <custom-button title="Посмотреть в официальной документации">Документация</custom-button>
-                <custom-button>ОК</custom-button>
+                <div class="navigation-wrapper__footer">
+                    <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
+                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация</custom-button>
+                    <custom-button @click="isModalVisible = false">ОК</custom-button>
+                </div>
             </template>
         </MyDialog>
     </div>
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import { ref } from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
 
@@ -73,9 +67,9 @@ function openInfoCard(obj) {
 const links = [
     {
         title: 'Что такое ROS?',
-        body: 'ROS — переводится как robot operation system',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
+        hrefToDoc: 'https://www.ros.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
     },
     {
         title: '2',
@@ -134,15 +128,17 @@ const links = [
 ]
 
 // Экспортируем методы, если захотим управлять меню извне
-defineExpose({open: () => (isOpen.value = true), close: closeMenu});
+defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
 </script>
 
 <style scoped>
 .burger-btn {
-    position: fixed; /* Она всегда на одном месте при скролле */
+    position: fixed;
+    /* Она всегда на одном месте при скролле */
     top: 20px;
     left: 20px;
-    z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
+    z-index: 9999;
+    /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -158,10 +154,17 @@ h1 {
     text-align: center;
 }
 
+.menu-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
 .line {
     width: 100%;
     height: 4px;
-    background-color: #383838; /* Ярко-красный цвет для теста */
+    background-color: #383838;
+    /* Ярко-красный цвет для теста */
     transition: all 0.3s ease;
 }
 
@@ -185,7 +188,8 @@ h1 {
     left: 0;
     width: 240px;
     height: 100%;
-    background: white;
+    background-image: radial-gradient(#23aae3e2, #222222);
+    color: white;
     z-index: 1000;
     padding: 0 20px 20px;
     overflow-y: scroll;
@@ -199,22 +203,35 @@ h1 {
     width: 100vw;
     height: 100vh;
     z-index: 2;
+    background-color: #333333;
+    opacity: 90%;
+    display: flex;
+}
+
+.navigation-wrapper__footer {
+    display: flex;
+    gap: 10px;
+    width: 100%;
 }
 
 /* Анимации появления */
-.slide-enter-active, .slide-leave-active {
+.slide-enter-active,
+.slide-leave-active {
     transition: transform 0.3s ease;
 }
 
-.slide-enter-from, .slide-leave-to {
+.slide-enter-from,
+.slide-leave-to {
     transform: translateX(-100%);
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
     transition: opacity 0.3s ease;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
     opacity: 0;
 }
 </style>
diff --git a/src/components/UI/CustomButton.vue b/src/components/UI/CustomButton.vue
index 153626e..b77c445 100644
--- a/src/components/UI/CustomButton.vue
+++ b/src/components/UI/CustomButton.vue
@@ -13,11 +13,11 @@ const props = defineProps({
 </script>
 
 <template>
-    <a v-if="to" :href="props.to" class="btn">
-        <slot/>
+    <a v-if="to" :href="props.to" target="_blank" class="btn">
+        <slot />
     </a>
     <button v-else class="btn">
-        <slot/>
+        <slot />
     </button>
 </template>
 
@@ -31,5 +31,11 @@ const props = defineProps({
     color: white;
     width: 100%;
     font-size: 17px;
+
+    text-decoration: none;
+    box-sizing: border-box;
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+    margin: 0;
 }
 </style>
\ No newline at end of file
-- 
2.52.0


From fb5ec5e23882be408c414dc288b50828a466bf1d Mon Sep 17 00:00:00 2001
From: alisagerasimova <mixeeva3316@mail.ru>
Date: Mon, 16 Mar 2026 17:56:24 +0300
Subject: [PATCH 05/20] =?UTF-8?q?=D0=97=D0=B0=D0=BF=D0=BE=D0=BB=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=BD=D0=B0=D0=B2=D0=B8=D0=B3=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyDropMenu.vue | 72 ++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 5ee4948..8402735 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -72,59 +72,53 @@ const links = [
         hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
     },
     {
-        title: '2',
-        body: 'Информация для учащихся 2',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        title: 'Что такое нода?',
+        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
     },
     {
-        title: '3',
-        body: 'Информация для учащихся 3',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        title: 'Что такое topic?',
+        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
     },
     {
-        title: '4',
-        body: 'Информация для учащихся 4',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        title: 'Что такое издатель?',
+        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
     },
     {
-        title: '5',
-        body: 'Информация для учащихся 5',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        title: 'Что такое подписчик?',
+        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
     },
     {
-        title: '6',
-        body: 'Информация для учащихся 6',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        title: 'Что такое сервис?',
+        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
     },
     {
-        title: '7',
-        body: 'Информация для учащихся 7',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        title: 'navigate_wait',
+        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
+        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
+        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
     },
     {
-        title: '8',
-        body: 'Информация для учащихся 8',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        title: 'Системы координат',
+        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
+        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
+        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
     },
     {
-        title: '9',
-        body: 'Информация для учащихся 9',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
-    },
-    {
-        title: '0',
-        body: 'Информация для учащихся 0',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
-    },
+        title: 'OpenCV',
+        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
+        hrefToDoc: 'https://opencv.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
+    }
 ]
 
 // Экспортируем методы, если захотим управлять меню извне
-- 
2.52.0


From 0d85ac597b001e8cbc9f9d760429b8a7c34f49b6 Mon Sep 17 00:00:00 2001
From: alisagerasimova <mixeeva3316@mail.ru>
Date: Tue, 17 Mar 2026 13:47:52 +0300
Subject: [PATCH 06/20] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B8=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=BE=D0=B2=D0=B0=D0=BB=20=D0=BF=D1=80=D0=BE=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=82=20=D0=B8=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BB=D0=BE=D0=B3=D0=BE=D1=82=D0=B8=D0=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                         |   2 +-
 package-lock.json                  |   4 +-
 package.json                       |   4 +-
 public/images/logo.jpg             | Bin 0 -> 5415 bytes
 src/components/MyDialog.vue        |   2 +-
 src/components/MyDropMenu.vue      |  75 +++++++++++++++--------------
 src/components/UI/CustomButton.vue |   6 ++-
 src/main.js                        |   2 +
 8 files changed, 51 insertions(+), 44 deletions(-)
 create mode 100644 public/images/logo.jpg

diff --git a/index.html b/index.html
index 0694331..98f3860 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Probody</title>
+    <title>SkyVue</title>
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1/dist/css/iziToast.min.css">
   </head>
   <body>
diff --git a/package-lock.json b/package-lock.json
index 2c416e6..71ba7c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "probody",
+  "name": "SkyVue",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "probody",
+      "name": "SkyVue",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index dceac85..f1915ab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "probody",
-  "productName": "probody",
+  "name": "SkyVue",
+  "productName": "SkyVue",
   "version": "1.0.0",
   "description": "My Electron application description",
   "main": ".vite/build/main.js",
diff --git a/public/images/logo.jpg b/public/images/logo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..be449f01fa12456d7aadce0e2c2906f8ab03dd44
GIT binary patch
literal 5415
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

literal 0
HcmV?d00001

diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index d3bafa2..7d0ce6f 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -28,7 +28,7 @@
 const props = defineProps({
     isSuccess: {
         type: Boolean,
-        required: true
+        default: true,
     },
     show: {
         type: Boolean,
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 8402735..b255953 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -34,7 +34,8 @@
             <template #footer>
                 <div class="navigation-wrapper__footer">
                     <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
-                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация</custom-button>
+                    <custom-button :to="infoCard.hrefToDoc"
+                        title="Посмотреть в официальной документации">Документация</custom-button>
                     <custom-button @click="isModalVisible = false">ОК</custom-button>
                 </div>
             </template>
@@ -66,40 +67,16 @@ function openInfoCard(obj) {
 
 const links = [
     {
-        title: 'Что такое ROS?',
+        title: 'ROS',
         body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
         hrefToDoc: 'https://www.ros.org/',
         hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
     },
     {
-        title: 'Что такое нода?',
-        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
-    },
-    {
-        title: 'Что такое topic?',
-        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Что такое издатель?',
-        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Что такое подписчик?',
-        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Что такое сервис?',
-        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
+        title: 'OpenCV',
+        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
+        hrefToDoc: 'https://opencv.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
     },
     {
         title: 'navigate_wait',
@@ -107,18 +84,42 @@ const links = [
         hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
         hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
     },
+    {
+        title: 'Topic',
+        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Нода',
+        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
+    },
+    {
+        title: 'Издатель',
+        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Подписчик',
+        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Сервис',
+        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
+    },
     {
         title: 'Системы координат',
         body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
         hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
     },
-    {
-        title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
-        hrefToDoc: 'https://opencv.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
-    }
 ]
 
 // Экспортируем методы, если захотим управлять меню извне
@@ -187,6 +188,8 @@ h1 {
     z-index: 1000;
     padding: 0 20px 20px;
     overflow-y: scroll;
+    overflow: auto;
+    border-right: white 2px solid;
 }
 
 /* Затемнение фона */
diff --git a/src/components/UI/CustomButton.vue b/src/components/UI/CustomButton.vue
index b77c445..1552730 100644
--- a/src/components/UI/CustomButton.vue
+++ b/src/components/UI/CustomButton.vue
@@ -9,7 +9,6 @@ const props = defineProps({
         default: null
     }
 })
-
 </script>
 
 <template>
@@ -31,11 +30,14 @@ const props = defineProps({
     color: white;
     width: 100%;
     font-size: 17px;
-
     text-decoration: none;
     box-sizing: border-box;
     text-align: center;
     font-family: 'Courier New', Courier, monospace;
     margin: 0;
 }
+
+.success {
+    background-color: var(--successColor);
+}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 8668dab..0ca4c63 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,10 +15,12 @@ const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: width,
     height: height,
+    icon: './public/images/logo.jpg',
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },
   });
+  mainWindow.menuBarVisible = false;
 
   // and load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
-- 
2.52.0


From d9b7eef0662099e8fab27c38381e6a47e7bd62f5 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 21 Mar 2026 12:35:59 +0300
Subject: [PATCH 07/20] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B2=D1=8B=D0=BF=D0=B0=D0=B4=D0=B0=D1=8E?=
 =?UTF-8?q?=D1=89=D0=B8=D1=85=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyDialog.vue   |  2 +-
 src/components/MyDropMenu.vue | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 7d0ce6f..1c54557 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -52,7 +52,7 @@ const props = defineProps({
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 501;
+    z-index: 999;
 }
 
 .modal {
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index b255953..024a21c 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -36,7 +36,7 @@
                     <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
                     <custom-button :to="infoCard.hrefToDoc"
                         title="Посмотреть в официальной документации">Документация</custom-button>
-                    <custom-button @click="isModalVisible = false">ОК</custom-button>
+                    <custom-button @click="handleOkBtn">ОК</custom-button>
                 </div>
             </template>
         </MyDialog>
@@ -52,6 +52,10 @@ const isOpen = ref(false);
 const isModalVisible = ref(false);
 const infoCard = ref({})
 
+function handleOkBtn() {
+    isModalVisible.value = false
+    isOpen.value = true
+}
 const toggleMenu = () => {
     isOpen.value = !isOpen.value;
 };
@@ -62,6 +66,7 @@ const closeMenu = () => {
 
 function openInfoCard(obj) {
     isModalVisible.value = true
+    isOpen.value = false
     infoCard.value = obj
 }
 
@@ -129,11 +134,9 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
 <style scoped>
 .burger-btn {
     position: fixed;
-    /* Она всегда на одном месте при скролле */
     top: 20px;
     left: 20px;
-    z-index: 9999;
-    /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
+    z-index: 3;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -185,7 +188,7 @@ h1 {
     height: 100%;
     background-image: radial-gradient(#23aae3e2, #222222);
     color: white;
-    z-index: 1000;
+    z-index: 2;
     padding: 0 20px 20px;
     overflow-y: scroll;
     overflow: auto;
-- 
2.52.0


From 0dc248be8413947dedb168367efa2f3f41e39a91 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 21 Mar 2026 12:39:56 +0300
Subject: [PATCH 08/20] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20cancel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Теперь функция меняет задний фон если при отмене будет удалён этот пункт
---
 src/App.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 333ad51..c77839a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -105,6 +105,9 @@ function cancel() {
     if (clickCount.value === 1) {
         return;
     }
+    if (listOfTrips.value.at(-1).variable.length === 1) {
+        listOfTrips.value.at(-1).BgImg = 'images/ArUco-marker.jpg'
+    }
     listOfTrips.value.at(-1).variable.pop();
     listOfTrips.value.pop();
     clickCount.value--;
-- 
2.52.0


From eec6d2d4398858761c0fe0aeb21578091772965b Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 21 Mar 2026 13:32:15 +0300
Subject: [PATCH 09/20] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B4=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE?=
 =?UTF-8?q?=D1=82=D1=80=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 | 47 ++++++++++++++++++++-----------------
 src/components/CodeView.vue | 40 +++++++++++++++++++++++++++++++
 src/components/MyDialog.vue |  2 +-
 3 files changed, 66 insertions(+), 23 deletions(-)
 create mode 100644 src/components/CodeView.vue

diff --git a/src/App.vue b/src/App.vue
index c77839a..d46a8e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,14 @@ import MyDropMenu from "@/components/MyDropMenu.vue";
 import copyToclipboard from "@/shared/copyToclipboard";
 import ContextMenu from "@imengyu/vue3-context-menu";
 import CustomButton from '@/components/UI/CustomButton.vue'
+import CodeView from "@/components/CodeView.vue";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([]);
 const isModalVisible = ref(false);
-let finallyText = ref("");
+const isCodeViewVisible = ref(false);
+const finallyText = ref("");
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -293,7 +295,7 @@ function onContextMenu(e, item) {
 </script>
 
 <template>
-    <div class="wraper">
+    <div v-if="!isCodeViewVisible" class="wraper">
         <div class="grid">
             <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index" @click="setNumber(item)"
                 @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
@@ -302,31 +304,32 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <custom-button class="actions__btn" @click="saveResult">Сохранить</custom-button>
-            <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
-            <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
+            <custom-button @click="saveResult">Сохранить</custom-button>
+            <custom-button @click="cleanResult">Очистить</custom-button>
+            <custom-button @click="cancel">Отменить</custom-button>
         </div>
         <MyDropMenu />
+        <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
+            <template #header>
+                <strong v-if="listOfTrips.length">Код готов!</strong>
+                <strong v-else>Код не готов!</strong>
+            </template>
+            <main>
+                <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
+                <p v-else>Выстройте маршрут перед сохранением кода.</p>
+            </main>
+            <template #footer>
+                <div v-if="listOfTrips.length">
+                    <button @click="handleDownloadBtn">Скачать код</button>
+                    <button @click="isCodeViewVisible = true">Предпросмотр</button>
+                    <button @click="copyAndToast(finallyText)">Скопировать код</button>
+                </div>
+            </template>
+        </MyDialog>
     </div>
+    <CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
 
 
-    <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
-        <template #header>
-            <strong v-if="listOfTrips.length">Код готов!</strong>
-            <strong v-else>Код не готов!</strong>
-        </template>
-        <main>
-            <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
-            <p v-else>Выстройте маршрут перед сохранением кода.</p>
-        </main>
-        <template #footer>
-            <div v-if="listOfTrips.length">
-                <button @click="handleDownloadBtn">Скачать код</button>
-                <button @click="copyAndToast(finallyText)">Скопировать код</button>
-                <button @click="isModalVisible = false">ОК</button>
-            </div>
-        </template>
-    </MyDialog>
 </template>
 
 <style>
diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue
new file mode 100644
index 0000000..983c728
--- /dev/null
+++ b/src/components/CodeView.vue
@@ -0,0 +1,40 @@
+<script setup>
+import CustomButton from '@/components/UI/CustomButton.vue'
+
+const props = defineProps({
+    code: {
+        required: true,
+        type: String
+    },
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+console.log(props.code)
+</script>
+
+<template>
+    <div class="code-view" v-if="show">
+        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+        <pre>
+            {{ code }}
+        </pre>
+        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+    </div>
+</template>
+
+<style scoped>
+.code-view {
+    position: fixed;
+    top: 0;
+    left: 0;
+    //background-image: radial-gradient(#23aae3e2, #222222);
+    background-color: #222222;
+    overflow: auto;
+    color: #eeeeee;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 1c54557..68f556a 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -52,7 +52,7 @@ const props = defineProps({
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 999;
+    z-index: 998;
 }
 
 .modal {
-- 
2.52.0


From ad78917e914444a0be4bf2a3c38846099d564e6e Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sun, 22 Mar 2026 14:05:38 +0300
Subject: [PATCH 10/20] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=20=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B3=D0=B0=20=D0=B8=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CodeView.vue   | 11 +++++---
 src/components/MyDialog.vue   | 47 ++++++++++++++++++++++++++++++++---
 src/components/MyDropMenu.vue | 15 +++++------
 3 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue
index 983c728..9649103 100644
--- a/src/components/CodeView.vue
+++ b/src/components/CodeView.vue
@@ -16,11 +16,17 @@ console.log(props.code)
 
 <template>
     <div class="code-view" v-if="show">
-        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+        <CustomButton
+            @click.stop="$emit('update:show', false)">
+            Вернуться к сохранению сгенерированного кода
+        </CustomButton>
         <pre>
             {{ code }}
         </pre>
-        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+        <CustomButton
+            @click.stop="$emit('update:show', false)">
+            Вернуться к сохранению сгенерированного кода
+        </CustomButton>
     </div>
 </template>
 
@@ -29,7 +35,6 @@ console.log(props.code)
     position: fixed;
     top: 0;
     left: 0;
-    //background-image: radial-gradient(#23aae3e2, #222222);
     background-color: #222222;
     overflow: auto;
     color: #eeeeee;
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 68f556a..ad73a14 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -1,12 +1,12 @@
 <template>
     <transition name="modal-fade">
-        <div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
+        <div class="modal-backdrop" v-if="show" @click.stop="onClose">
             <div class="modal" @click.stop>
                 <header :class="['modal-header', isSuccess ? 'modal-header-success' : 'modal-header-error']">
                     <slot name="header">
                         <strong>Заголовок по умолчанию</strong>
                     </slot>
-                    <button class="modal-btn-close" @click.stop="$emit('update:show', false)"
+                    <button class="modal-btn-close" @click.stop="onClose"
                         aria-label="Закрыть модальное окно">
                         ×
                     </button>
@@ -16,7 +16,7 @@
                 </section>
                 <footer :class="['modal-footer', isSuccess ? 'modal-footer-success' : 'modal-footer-error']">
                     <slot name="footer">
-                        <button @click.stop="$emit('update:show', false)">Закрыть</button>
+                        <button @click.stop="onClose">Закрыть</button>
                     </slot>
                 </footer>
             </div>
@@ -25,7 +25,13 @@
 </template>
 
 <script setup>
-const props = defineProps({
+import {defineEmits} from 'vue'
+
+const emit = defineEmits({
+    close: null,
+    'update:show': false,
+})
+defineProps({
     isSuccess: {
         type: Boolean,
         default: true,
@@ -35,6 +41,11 @@ const props = defineProps({
         default: false
     }
 })
+
+function onClose() {
+    emit('update:show')
+    emit('close')
+}
 </script>
 
 <style>
@@ -129,4 +140,32 @@ const props = defineProps({
     color: red;
     background: transparent;
 }
+
+/* Начало появления: ниже и прозрачный */
+.modal-fade-enter-from {
+    opacity: 0;
+    transform: translateY(20px);
+}
+/* Конец появления: на месте и видим */
+.modal-fade-enter-to {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* Начало исчезания: на месте и видим */
+.modal-fade-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* Конец исчезания: выше и прозрачный */
+.modal-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-20px);
+}
+
+/* Общие настройки анимации (скорость + плавность) */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+    transition: transform 0.7s cubic-bezier(.22,.9,.31,1), opacity 0.7s ease;
+    will-change: transform, opacity;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 024a21c..97160d1 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -24,7 +24,7 @@
                 </nav>
             </aside>
         </transition>
-        <MyDialog isSuccess v-model:show="isModalVisible">
+        <MyDialog isSuccess v-model:show="isModalVisible" @close="handleOkBtn">
             <template #header>
                 <strong>{{ infoCard.title }}</strong>
             </template>
@@ -34,8 +34,8 @@
             <template #footer>
                 <div class="navigation-wrapper__footer">
                     <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
-                    <custom-button :to="infoCard.hrefToDoc"
-                        title="Посмотреть в официальной документации">Документация</custom-button>
+                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация
+                    </custom-button>
                     <custom-button @click="handleOkBtn">ОК</custom-button>
                 </div>
             </template>
@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
 
@@ -56,6 +56,7 @@ function handleOkBtn() {
     isModalVisible.value = false
     isOpen.value = true
 }
+
 const toggleMenu = () => {
     isOpen.value = !isOpen.value;
 };
@@ -128,7 +129,7 @@ const links = [
 ]
 
 // Экспортируем методы, если захотим управлять меню извне
-defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
+defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
 
 <style scoped>
@@ -217,7 +218,7 @@ h1 {
 /* Анимации появления */
 .slide-enter-active,
 .slide-leave-active {
-    transition: transform 0.3s ease;
+    transition: transform 0.39s ease;
 }
 
 .slide-enter-from,
@@ -227,7 +228,7 @@ h1 {
 
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 0.3s ease;
+    transition: opacity 0.39s ease;
 }
 
 .fade-enter-from,
-- 
2.52.0


From 39e8166ae914f49a0d90aea5b1495a283c36e70c Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Sun, 22 Mar 2026 19:14:17 +0300
Subject: [PATCH 11/20] =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BE=D0=BF=D1=80=D0=B5=D0=B4=D0=B5=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B2=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B8=D0=B3=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyDropMenu.vue | 52 +++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index b255953..53e65d1 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -68,58 +68,76 @@ function openInfoCard(obj) {
 const links = [
     {
         title: 'ROS',
-        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов. В приложении через ROS дрон получает команды, передает телеметрию и данные с камеры.',
         hrefToDoc: 'https://www.ros.org/',
         hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
     },
     {
         title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
+        body: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения. С её помощью дрон распознает цвета платформ и считывает QR-коды.',
         hrefToDoc: 'https://opencv.org/',
         hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
     },
     {
         title: 'navigate_wait',
-        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
+        body: 'Navigate_wait — функция из библиотеки Clover. Отправляет дрон в точку и ждёт, пока он туда долетит, и только потом выполняет следующую команду. Это важно, потому что обычная команда navigate не ждет: дрон ещё летит, а скрипт уже бежит дальше — из-за этого следующие команды могут выполняться раньше времени.',
         hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
         hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
     },
     {
-        title: 'Topic',
-        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Нода',
-        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
+        title: 'Нода (Node)',
+        body: 'Нода (Node/узел) в ROS - исполняемая программа, которая выполняет одну конкретную задачу. В сгенерированном коде вся логика полета и обработки камеры находится внутри одной ноды. Это позволяет запускать, останавливать и отлаживать программу как единое целое. ',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
     },
     {
-        title: 'Издатель',
-        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
+        title: 'Топик (Topic)',
+        body: 'Топик (Topic) в ROS — канал обмена данными. Например, камера публикует изображение в топик, а ваш скрипт подписывается на него и получает кадры.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
     },
     {
-        title: 'Подписчик',
-        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
+        title: 'Издатель (Publisher)',
+        body: 'Издатель (Publisher) в ROS — часть программы, которая отправляет данные в топик. Например, если нужно передать команду другому узлу или опубликовать координаты дрона — создается издатель, который публикует сообщения в нужный канал. Подписчики других узлов могут эти данные получать. ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Подписчик (Subscriber)',
+        body: 'Подписчик (Subscriber) в ROS — часть программы, которая получает данные из топика. Например, чтобы дрон "видел" изображение с камеры или считывал свои координаты, создаётся подписчик на соответствующий топик. Как только в топике появляются новые данные, подписчик автоматически их обрабатывает.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
     },
     {
         title: 'Сервис',
-        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
+        body: 'Сервис в ROS - способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные идут постоянно, сервис работает по принципу "запрос — ответ". Например, команда navigate — это сервис: вы отправляете координаты, а робот отвечает "команда принята". Команда get_telemetry возвращает текущие координаты дрона.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
     },
     {
         title: 'Системы координат',
-        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
+        body: 'Определяют, откуда отсчитывать координаты дрона. body — относительно самого дрона (вперед/назад/влево/вправо). aruco_map — относительно карты с ArUco-метками, где координаты привязаны к неподвижным маркерам. Выбор правильной системы координат позволяет дрону точно выполнять команды: лететь относительно себя для коротких маневров или по глобальной карте для точной навигации.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
         hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
     },
+    {
+        title: 'ArUco-маркер',
+        body: 'ArUco-маркер — квадратный визуальный маркер, который камера дрона может распознавать. Используется для навигации: по положению маркера дрон определяет свои координаты в пространстве.',
+        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
+        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/aruco.html'
+    },
+    {
+        title: 'Симулятор (Gazebo)',
+        body: 'Симулятор (Gazebo) — виртуальная среда, где дрон ведет себя как в реальности. Позволяет безопасно тестировать полетные задания перед запуском на реальном дроне.',
+        hrefToCourse: 'https://stepik.org/lesson/2278310/step/1?unit=2312564',
+        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/simulation.html'
+    },
+    {
+        title: 'unregister()',
+        body: 'unregister() — метод, который отключает подписчика от топика. Используется, чтобы перестать получать данные, когда они больше не нужны (например, после сканирования QR-кода).',
+        hrefToCourse: 'https://stepik.org/lesson/2272845/step/1?unit=2307058',
+        hrefToDoc: 'https://docs.ros.org/en/diamondback/api/rospy/html/rospy.topics.Subscriber-class.html'
+    },
 ]
 
 // Экспортируем методы, если захотим управлять меню извне
-- 
2.52.0


From 8cf2f8bd06ccf817255c08b14c039d48b7a6ede0 Mon Sep 17 00:00:00 2001
From: alisagerasimova <mixeeva3316@mail.ru>
Date: Tue, 24 Mar 2026 13:35:03 +0300
Subject: [PATCH 12/20] =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B8=20=D0=B8=D0=BC=D0=BF=D0=BE=D1=80=D1=82=D1=8B=20?=
 =?UTF-8?q?=D1=88=D0=B0=D0=B1=D0=BB=D0=BE=D0=BD=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                        | 14 ++++++++------
 {public => src}/shablons/README.md                 |  0
 public/shablons/color.txt => src/shablons/color.js |  4 ++--
 .../shablons/emergency_and_navigate.js             |  4 ++--
 public/shablons/qr.txt => src/shablons/qr.js       |  4 ++--
 5 files changed, 14 insertions(+), 12 deletions(-)
 rename {public => src}/shablons/README.md (100%)
 rename public/shablons/color.txt => src/shablons/color.js (93%)
 rename public/shablons/emergency_and_navigate.txt => src/shablons/emergency_and_navigate.js (98%)
 rename public/shablons/qr.txt => src/shablons/qr.js (82%)

diff --git a/src/App.vue b/src/App.vue
index 333ad51..88c3d2f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,11 @@ import copyToclipboard from "@/shared/copyToclipboard";
 import ContextMenu from "@imengyu/vue3-context-menu";
 import CustomButton from '@/components/UI/CustomButton.vue'
 
+import emergencyAndNavigate from './shablons/emergency_and_navigate.js'
+import color from './shablons/color.js'
+import qr from './shablons/qr.js'
+
+
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([]);
@@ -61,16 +66,14 @@ async function saveResult() {
     const isUsedQR = listOfTrips.value.some(item => item.isQR);
 
     if (isUsedPlatform) {
-        const response = await fetch("/shablons/color.txt")
-        let textOfCode = await response.text()
+        let textOfCode = color
         textOfCode = textOfCode.split('<<separator>>')
         colorDetectClass.value = textOfCode[0]
         colorDetectCode.value += `\t${textOfCode[1].trim()}\n`;
     }
 
     if (isUsedQR) {
-        const response = await fetch("/shablons/qr.txt")
-        let textOfCode = await response.text()
+        let textOfCode = qr
         textOfCode = textOfCode.split('<<separator>>')
         QRDetectClass.value = textOfCode[0]
         QRDetectCode.value += `\t${textOfCode[1].trim()}\n`;
@@ -85,8 +88,7 @@ async function saveResult() {
             mainCode.value += QRDetectCode.value + '\n'
         }
     }
-    const response = await fetch("/shablons/emergency_and_navigate.txt")
-    let textOfCode = await response.text()
+    let textOfCode = emergencyAndNavigate
     finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
     if (isUsedPlatform) {
         finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
diff --git a/public/shablons/README.md b/src/shablons/README.md
similarity index 100%
rename from public/shablons/README.md
rename to src/shablons/README.md
diff --git a/public/shablons/color.txt b/src/shablons/color.js
similarity index 93%
rename from public/shablons/color.txt
rename to src/shablons/color.js
index 71cdb2c..5ff4784 100644
--- a/public/shablons/color.txt
+++ b/src/shablons/color.js
@@ -1,4 +1,4 @@
-def color_detection(data, print_type='str'):
+export default `def color_detection(data, print_type='str'):
     '''определение цвета'''
 
     frame = bridge.imgmsg_to_cv2(data, 'bgr8')
@@ -42,4 +42,4 @@ def color_detection(data, print_type='str'):
 <<separator>>
     color_sub = rospy.Subscriber('main_camera/image_raw', Image, lambda img: color_detection(img, print_type='rgb'), queue_size=1)
     rospy.sleep(2)
-    color_sub.unregister()
\ No newline at end of file
+    color_sub.unregister()`
\ No newline at end of file
diff --git a/public/shablons/emergency_and_navigate.txt b/src/shablons/emergency_and_navigate.js
similarity index 98%
rename from public/shablons/emergency_and_navigate.txt
rename to src/shablons/emergency_and_navigate.js
index 1114350..1e8546c 100644
--- a/public/shablons/emergency_and_navigate.txt
+++ b/src/shablons/emergency_and_navigate.js
@@ -1,4 +1,4 @@
-#!/usr/bin/env python3
+export default `#!/usr/bin/env python3
 
 import rospy
 import time
@@ -102,4 +102,4 @@ def main():
     land() #посадка
 
 if __name__ == "__main__":
-    main()
+    main()`
diff --git a/public/shablons/qr.txt b/src/shablons/qr.js
similarity index 82%
rename from public/shablons/qr.txt
rename to src/shablons/qr.js
index c877557..46c5e82 100644
--- a/public/shablons/qr.txt
+++ b/src/shablons/qr.js
@@ -1,4 +1,4 @@
-def qr_detection(data):
+export default `def qr_detection(data):
     cv_image = bridge.imgmsg_to_cv2(data, 'bgr8')
     barcodes = pyzbar.decode(cv_image)
     
@@ -9,4 +9,4 @@ def qr_detection(data):
 <<separator>>
     qr_sub = rospy.Subscriber('main_camera/image_raw', Image, qr_detection, queue_size=1)
     rospy.sleep(2)
-    qr_sub.unregister()
\ No newline at end of file
+    qr_sub.unregister()`
\ No newline at end of file
-- 
2.52.0


From 2c490c835931662add37f9e0bb225f5566903fd1 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Wed, 25 Mar 2026 00:13:06 +0300
Subject: [PATCH 13/20] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B4=D1=81=D0=B2=D0=B5=D1=82=D0=BA=D1=83=20=D1=81?=
 =?UTF-8?q?=D0=B8=D0=BD=D1=82=D0=B0=D0=BA=D1=81=D0=B8=D1=81=D0=B0=20=D0=B8?=
 =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=B5=D1=89=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  | 29 ++++++++------
 package.json                       |  1 +
 src/App.vue                        |  5 +++
 src/components/CodeBlock.vue       | 26 +++++++++++++
 src/components/CodeView.vue        | 12 +++---
 src/components/MovementButtons.vue | 62 ++++++++++++++++++++++++++++++
 src/components/UI/CustomButton.vue |  2 +-
 src/renderer.js                    |  4 ++
 8 files changed, 122 insertions(+), 19 deletions(-)
 create mode 100644 src/components/CodeBlock.vue
 create mode 100644 src/components/MovementButtons.vue

diff --git a/package-lock.json b/package-lock.json
index 71ba7c7..bac231d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "copy-to-clipboard": "^3.3.3",
         "electron-squirrel-startup": "^1.0.1",
         "izitoast": "^1.4.0",
+        "prismjs": "^1.30.0",
         "vue": "^3.5.28"
       },
       "devDependencies": {
@@ -616,6 +617,7 @@
       "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chalk": "^4.1.1",
         "fs-extra": "^9.0.1",
@@ -1752,6 +1754,7 @@
       "integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^3.0.1",
         "@inquirer/confirm": "^4.0.1",
@@ -2910,6 +2913,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2976,6 +2980,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -3193,6 +3198,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4499,17 +4505,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/encoding": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.2"
-      }
-    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -6832,6 +6827,15 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proc-log": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
@@ -8030,6 +8034,7 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -8089,6 +8094,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
       "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
         "@vue/compiler-sfc": "3.5.28",
@@ -8142,6 +8148,7 @@
       "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
diff --git a/package.json b/package.json
index f1915ab..0c3547e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "copy-to-clipboard": "^3.3.3",
     "electron-squirrel-startup": "^1.0.1",
     "izitoast": "^1.4.0",
+    "prismjs": "^1.30.0",
     "vue": "^3.5.28"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index d46a8e0..8697757 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -342,6 +342,10 @@ html {
     font-size: 18px;
 }
 
+body {
+    margin: 0;
+}
+
 :root {
     --side: 75px;
 }
@@ -349,6 +353,7 @@ html {
 .wraper {
     display: flex;
     justify-content: center;
+    padding-top: 10px;
 }
 
 .grid {
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
new file mode 100644
index 0000000..598fde4
--- /dev/null
+++ b/src/components/CodeBlock.vue
@@ -0,0 +1,26 @@
+<template>
+    <pre><code class="language-python" v-html="highlighted"></code></pre>
+</template>
+
+<script setup>
+import {ref, onMounted} from 'vue'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-python'
+
+const props = defineProps({
+    code: {type: String, required: true},
+})
+
+const highlighted = ref('')
+
+function highlight() {
+    // безопасно экранируем HTML и подсвечиваем через Prism
+    const escaped = props.code
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+    highlighted.value = Prism.highlight(escaped, Prism.languages['python'], 'python')
+}
+
+onMounted(highlight)
+</script>
\ No newline at end of file
diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue
index 9649103..d7484fd 100644
--- a/src/components/CodeView.vue
+++ b/src/components/CodeView.vue
@@ -1,6 +1,7 @@
 <script setup>
 import CustomButton from '@/components/UI/CustomButton.vue'
-
+import CodeBlock from "./CodeBlock.vue";
+import MovementButtons from "./MovementButtons.vue";
 const props = defineProps({
     code: {
         required: true,
@@ -20,21 +21,18 @@ console.log(props.code)
             @click.stop="$emit('update:show', false)">
             Вернуться к сохранению сгенерированного кода
         </CustomButton>
-        <pre>
-            {{ code }}
-        </pre>
+        <CodeBlock :code="code" />
+
         <CustomButton
             @click.stop="$emit('update:show', false)">
             Вернуться к сохранению сгенерированного кода
         </CustomButton>
+        <MovementButtons/>
     </div>
 </template>
 
 <style scoped>
 .code-view {
-    position: fixed;
-    top: 0;
-    left: 0;
     background-color: #222222;
     overflow: auto;
     color: #eeeeee;
diff --git a/src/components/MovementButtons.vue b/src/components/MovementButtons.vue
new file mode 100644
index 0000000..0e16222
--- /dev/null
+++ b/src/components/MovementButtons.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="movement-buttons">
+        <button @click="scrollToTop" class="up">↑</button>
+        <button @click="scrollToBottom" class="down">↓</button>
+    </div>
+</template>
+
+<script setup>
+
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth' // Плавная прокрутка
+    });
+}
+
+function scrollToBottom() {
+    window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'smooth'
+    });
+}
+
+</script>
+
+<style scoped>
+:root {
+    --btnHeight: 50px;
+}
+.movement-buttons {
+    display: flex;
+    gap: 2px;
+    flex-direction: column;
+    position: fixed;
+    right: 25px;
+    bottom: calc(50% - 50px);
+}
+
+.movement-buttons > button {
+    width: auto;
+    font-size: 15px;
+    border: 2px solid white;
+    color: white;
+    background-color: #23aae3e2;
+    height: 50px;
+}
+
+@media (max-width: 900px) {
+    .movement-buttons > button {
+        width: 30px;
+        font-size: 15px;
+    }
+}
+
+.up {
+    border-radius: 10px 10px 0 0;
+}
+
+.down {
+    border-radius: 0 0 10px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/UI/CustomButton.vue b/src/components/UI/CustomButton.vue
index 1552730..cf2f853 100644
--- a/src/components/UI/CustomButton.vue
+++ b/src/components/UI/CustomButton.vue
@@ -2,7 +2,7 @@
 const props = defineProps({
     isSuccess: {
         type: Boolean,
-        required: true
+        required: false
     },
     to: {
         type: String,
diff --git a/src/renderer.js b/src/renderer.js
index 4099886..c191d27 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -29,5 +29,9 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import Prism from 'prismjs'
+import 'prismjs/themes/prism-okaidia.css'
+
+
 import ContextMenu from '@imengyu/vue3-context-menu'
 createApp(App).use(ContextMenu).mount('#app');
-- 
2.52.0


From 7818fe062f86bca32ab2d961716df7abebcef11b Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Wed, 25 Mar 2026 22:57:01 +0300
Subject: [PATCH 14/20] =?UTF-8?q?=D0=9D=D0=B5=D0=B1=D0=BE=D0=BB=D1=8C?=
 =?UTF-8?q?=D1=88=D0=B8=D0=B5=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D0=B8?=
 =?UTF-8?q?=20=D0=B8=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         | 29 ++++++++------
 src/components/CodeBlock.vue        |  8 +++-
 src/components/CodeView.vue         |  1 -
 src/components/MovementButtons.vue  |  6 +--
 src/components/MyDialog.vue         | 20 ++++++++--
 src/components/MyDropMenu.vue       | 60 +----------------------------
 src/data/informationForDirectory.js | 56 +++++++++++++++++++++++++++
 7 files changed, 101 insertions(+), 79 deletions(-)
 create mode 100644 src/data/informationForDirectory.js

diff --git a/src/App.vue b/src/App.vue
index 8697757..97917e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onMounted, h } from "vue";
+import {ref, onMounted, h} from "vue";
 import izitoast from "@/shared/izitoast";
-import { useEventListener } from "@vueuse/core";
+import {useEventListener} from "@vueuse/core";
 import MyDialog from "@/components/MyDialog.vue";
 import MyDropMenu from "@/components/MyDropMenu.vue";
 import copyToclipboard from "@/shared/copyToclipboard";
@@ -131,6 +131,12 @@ const handleKeydown = (event) => {
     if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
         event.preventDefault();
         cancel();
+    } else if (event.ctrlKey && event.code === "KeyS") {
+        event.preventDefault();
+        saveResult();
+    } else if (event.code === "Delete") {
+        event.preventDefault();
+        cleanResult();
     }
 };
 useEventListener("keydown", handleKeydown);
@@ -147,7 +153,7 @@ function copyAndToast(text) {
 function handleDownloadBtn() {
     // Создание файла
     const downloadUrl = ref('');
-    const blob = new Blob([finallyText.value], { type: 'text/plain' });
+    const blob = new Blob([finallyText.value], {type: 'text/plain'});
     downloadUrl.value = URL.createObjectURL(blob);
     // Задержка для избежания ошибок в некоторых браузерах
     setTimeout(() => {
@@ -298,7 +304,7 @@ function onContextMenu(e, item) {
     <div v-if="!isCodeViewVisible" class="wraper">
         <div class="grid">
             <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index" @click="setNumber(item)"
-                @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
+                 @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
                 {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
@@ -308,7 +314,7 @@ function onContextMenu(e, item) {
             <custom-button @click="cleanResult">Очистить</custom-button>
             <custom-button @click="cancel">Отменить</custom-button>
         </div>
-        <MyDropMenu />
+        <MyDropMenu/>
         <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
             <template #header>
                 <strong v-if="listOfTrips.length">Код готов!</strong>
@@ -320,16 +326,14 @@ function onContextMenu(e, item) {
             </main>
             <template #footer>
                 <div v-if="listOfTrips.length">
-                    <button @click="handleDownloadBtn">Скачать код</button>
                     <button @click="isCodeViewVisible = true">Предпросмотр</button>
+                    <button @click="handleDownloadBtn">Скачать код</button>
                     <button @click="copyAndToast(finallyText)">Скопировать код</button>
                 </div>
             </template>
         </MyDialog>
     </div>
     <CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
-
-
 </template>
 
 <style>
@@ -353,7 +357,8 @@ body {
 .wraper {
     display: flex;
     justify-content: center;
-    padding-top: 10px;
+    //padding: 20% 0;
+    //TODO: рассмотреть вариант
 }
 
 .grid {
@@ -378,9 +383,9 @@ body {
 
     color: white;
     text-shadow: -1px -1px 0 black,
-        1px -1px 0 black,
-        -1px 1px 0 black,
-        1px 1px 0 black;
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
     box-sizing: border-box;
 }
 
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index 598fde4..b36929d 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -23,4 +23,10 @@ function highlight() {
 }
 
 onMounted(highlight)
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+pre {
+    padding-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue
index d7484fd..d26ecfc 100644
--- a/src/components/CodeView.vue
+++ b/src/components/CodeView.vue
@@ -12,7 +12,6 @@ const props = defineProps({
         default: false
     }
 })
-console.log(props.code)
 </script>
 
 <template>
diff --git a/src/components/MovementButtons.vue b/src/components/MovementButtons.vue
index 0e16222..1d5ee6d 100644
--- a/src/components/MovementButtons.vue
+++ b/src/components/MovementButtons.vue
@@ -32,16 +32,16 @@ function scrollToBottom() {
     gap: 2px;
     flex-direction: column;
     position: fixed;
-    right: 25px;
+    right: 15px;
     bottom: calc(50% - 50px);
 }
 
 .movement-buttons > button {
     width: auto;
     font-size: 15px;
-    border: 2px solid white;
+    border: 2px solid #d0d0d0;
     color: white;
-    background-color: #23aae3e2;
+    background-color: #383838;
     height: 50px;
 }
 
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index ad73a14..4fdd8a2 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -7,7 +7,7 @@
                         <strong>Заголовок по умолчанию</strong>
                     </slot>
                     <button class="modal-btn-close" @click.stop="onClose"
-                        aria-label="Закрыть модальное окно">
+                            aria-label="Закрыть модальное окно">
                         ×
                     </button>
                 </header>
@@ -26,6 +26,7 @@
 
 <script setup>
 import {defineEmits} from 'vue'
+import {useEventListener} from "@vueuse/core";
 
 const emit = defineEmits({
     close: null,
@@ -46,6 +47,13 @@ function onClose() {
     emit('update:show')
     emit('close')
 }
+
+const handleKeydown = (event) => {
+    if (event.code === "Escape") {
+        emit('update:show')
+    }
+}
+useEventListener("keydown", handleKeydown);
 </script>
 
 <style>
@@ -104,14 +112,15 @@ function onClose() {
 .modal-footer {
     justify-content: flex-end;
     border-top: 1px solid white;
-
 }
 
 .modal-footer button {
     justify-content: flex-end;
     border-top: 1px solid white;
     padding: 5px;
-    color: rgb(0, 0, 0);
+    color: black;
+    font-size: 15px;
+    border-radius: 5px;
 }
 
 .modal-footer-success button {
@@ -146,16 +155,19 @@ function onClose() {
     opacity: 0;
     transform: translateY(20px);
 }
+
 /* Конец появления: на месте и видим */
 .modal-fade-enter-to {
     opacity: 1;
     transform: translateY(0);
 }
+
 /* Начало исчезания: на месте и видим */
 .modal-fade-leave-from {
     opacity: 1;
     transform: translateY(0);
 }
+
 /* Конец исчезания: выше и прозрачный */
 .modal-fade-leave-to {
     opacity: 0;
@@ -165,7 +177,7 @@ function onClose() {
 /* Общие настройки анимации (скорость + плавность) */
 .modal-fade-enter-active,
 .modal-fade-leave-active {
-    transition: transform 0.7s cubic-bezier(.22,.9,.31,1), opacity 0.7s ease;
+    transition: transform 0.7s cubic-bezier(.22, .9, .31, 1), opacity 0.7s ease;
     will-change: transform, opacity;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 97160d1..80653d9 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -20,7 +20,7 @@
                 </div>
 
                 <nav class="menu-content">
-                    <custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
+                    <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
                 </nav>
             </aside>
         </transition>
@@ -47,6 +47,7 @@
 import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
+import informationForDirectory from "../data/informationForDirectory";
 
 const isOpen = ref(false);
 const isModalVisible = ref(false);
@@ -71,63 +72,6 @@ function openInfoCard(obj) {
     infoCard.value = obj
 }
 
-const links = [
-    {
-        title: 'ROS',
-        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
-        hrefToDoc: 'https://www.ros.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
-    },
-    {
-        title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
-        hrefToDoc: 'https://opencv.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
-    },
-    {
-        title: 'navigate_wait',
-        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
-        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
-        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
-    },
-    {
-        title: 'Topic',
-        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Нода',
-        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
-    },
-    {
-        title: 'Издатель',
-        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Подписчик',
-        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Сервис',
-        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
-    },
-    {
-        title: 'Системы координат',
-        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
-        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
-        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
-    },
-]
-
 // Экспортируем методы, если захотим управлять меню извне
 defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
diff --git a/src/data/informationForDirectory.js b/src/data/informationForDirectory.js
new file mode 100644
index 0000000..2224cb6
--- /dev/null
+++ b/src/data/informationForDirectory.js
@@ -0,0 +1,56 @@
+export default [
+    {
+        title: 'ROS',
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
+        hrefToDoc: 'https://www.ros.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
+    },
+    {
+        title: 'OpenCV',
+        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
+        hrefToDoc: 'https://opencv.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
+    },
+    {
+        title: 'navigate_wait',
+        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
+        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
+        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
+    },
+    {
+        title: 'Topic',
+        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Нода',
+        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
+    },
+    {
+        title: 'Издатель',
+        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Подписчик',
+        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Сервис',
+        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
+    },
+    {
+        title: 'Системы координат',
+        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
+        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
+        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
+    },
+]
\ No newline at end of file
-- 
2.52.0


From 2cd9606949479cdd0c71357a64f6380011112e64 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Fri, 27 Mar 2026 14:52:29 +0300
Subject: [PATCH 15/20] =?UTF-8?q?=D0=A3=D0=BF=D1=80=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8E?=
 =?UTF-8?q?=20=D0=B2=20myDialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyDialog.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 4fdd8a2..3ef2430 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -153,25 +153,21 @@ useEventListener("keydown", handleKeydown);
 /* Начало появления: ниже и прозрачный */
 .modal-fade-enter-from {
     opacity: 0;
-    transform: translateY(20px);
 }
 
 /* Конец появления: на месте и видим */
 .modal-fade-enter-to {
     opacity: 1;
-    transform: translateY(0);
 }
 
 /* Начало исчезания: на месте и видим */
 .modal-fade-leave-from {
     opacity: 1;
-    transform: translateY(0);
 }
 
 /* Конец исчезания: выше и прозрачный */
 .modal-fade-leave-to {
     opacity: 0;
-    transform: translateY(-20px);
 }
 
 /* Общие настройки анимации (скорость + плавность) */
-- 
2.52.0


From f52fbd2f5dcedaf6ca351b5e474cc0f8e8f18445 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Fri, 27 Mar 2026 18:57:25 +0300
Subject: [PATCH 16/20] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BD=D1=91?=
 =?UTF-8?q?=D1=81=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20=D1=82=D0=B5=D1=80?=
 =?UTF-8?q?=D0=BC=D0=B8=D0=BD=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA=20=D1=81=20=D0=BE=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=D0=BC?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/informationForDirectory.js | 52 +++++++++++++++++++----------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/data/informationForDirectory.js b/src/data/informationForDirectory.js
index 2224cb6..adc9a74 100644
--- a/src/data/informationForDirectory.js
+++ b/src/data/informationForDirectory.js
@@ -1,56 +1,74 @@
 export default [
     {
         title: 'ROS',
-        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов. В приложении через ROS дрон получает команды, передает телеметрию и данные с камеры.',
         hrefToDoc: 'https://www.ros.org/',
         hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
     },
     {
         title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
+        body: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения. С её помощью дрон распознает цвета платформ и считывает QR-коды.',
         hrefToDoc: 'https://opencv.org/',
         hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
     },
     {
         title: 'navigate_wait',
-        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
+        body: 'Navigate_wait — функция из библиотеки Clover. Отправляет дрон в точку и ждёт, пока он туда долетит, и только потом выполняет следующую команду. Это важно, потому что обычная команда navigate не ждет: дрон ещё летит, а скрипт уже бежит дальше — из-за этого следующие команды могут выполняться раньше времени.',
         hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
         hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
     },
     {
-        title: 'Topic',
-        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Нода',
-        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
+        title: 'Нода (Node)',
+        body: 'Нода (Node/узел) в ROS - исполняемая программа, которая выполняет одну конкретную задачу. В сгенерированном коде вся логика полета и обработки камеры находится внутри одной ноды. Это позволяет запускать, останавливать и отлаживать программу как единое целое. ',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
     },
     {
-        title: 'Издатель',
-        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
+        title: 'Топик (Topic)',
+        body: 'Топик (Topic) в ROS — канал обмена данными. Например, камера публикует изображение в топик, а ваш скрипт подписывается на него и получает кадры.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
     },
     {
-        title: 'Подписчик',
-        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
+        title: 'Издатель (Publisher)',
+        body: 'Издатель (Publisher) в ROS — часть программы, которая отправляет данные в топик. Например, если нужно передать команду другому узлу или опубликовать координаты дрона — создается издатель, который публикует сообщения в нужный канал. Подписчики других узлов могут эти данные получать. ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Подписчик (Subscriber)',
+        body: 'Подписчик (Subscriber) в ROS — часть программы, которая получает данные из топика. Например, чтобы дрон "видел" изображение с камеры или считывал свои координаты, создаётся подписчик на соответствующий топик. Как только в топике появляются новые данные, подписчик автоматически их обрабатывает.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
     },
     {
         title: 'Сервис',
-        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
+        body: 'Сервис в ROS - способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные идут постоянно, сервис работает по принципу "запрос — ответ". Например, команда navigate — это сервис: вы отправляете координаты, а робот отвечает "команда принята". Команда get_telemetry возвращает текущие координаты дрона.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
     },
     {
         title: 'Системы координат',
-        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
+        body: 'Определяют, откуда отсчитывать координаты дрона. body — относительно самого дрона (вперед/назад/влево/вправо). aruco_map — относительно карты с ArUco-метками, где координаты привязаны к неподвижным маркерам. Выбор правильной системы координат позволяет дрону точно выполнять команды: лететь относительно себя для коротких маневров или по глобальной карте для точной навигации.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
         hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
     },
+    {
+        title: 'ArUco-маркер',
+        body: 'ArUco-маркер — квадратный визуальный маркер, который камера дрона может распознавать. Используется для навигации: по положению маркера дрон определяет свои координаты в пространстве.',
+        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
+        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/aruco.html'
+    },
+    {
+        title: 'Симулятор (Gazebo)',
+        body: 'Симулятор (Gazebo) — виртуальная среда, где дрон ведет себя как в реальности. Позволяет безопасно тестировать полетные задания перед запуском на реальном дроне.',
+        hrefToCourse: 'https://stepik.org/lesson/2278310/step/1?unit=2312564',
+        hrefToDoc: 'https://klever-doc.tech/ROS1/ru/simulation.html'
+    },
+    {
+        title: 'unregister()',
+        body: 'unregister() — метод, который отключает подписчика от топика. Используется, чтобы перестать получать данные, когда они больше не нужны (например, после сканирования QR-кода).',
+        hrefToCourse: 'https://stepik.org/lesson/2272845/step/1?unit=2307058',
+        hrefToDoc: 'https://docs.ros.org/en/diamondback/api/rospy/html/rospy.topics.Subscriber-class.html'
+    },
 ]
\ No newline at end of file
-- 
2.52.0


From 373467aebdb6ce1832ac6fe377d30671583ed53d Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Sat, 28 Mar 2026 12:19:13 +0300
Subject: [PATCH 17/20] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BB=D0=BE=D0=B3=D0=BE=20=D1=80=D0=B0=D0=B7?=
 =?UTF-8?q?=D0=BD=D1=8B=D1=85=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=B2=20=D0=BF=D0=B0=D0=BF=D0=BA=D1=83=20Images,=20?=
 =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D0=BB=D0=B0=20padding=20=D1=83=20wrapp?=
 =?UTF-8?q?er,=20=D1=87=D1=83=D1=82=D1=8C=20=D1=83=D0=BC=D0=B5=D0=BD=D1=8C?=
 =?UTF-8?q?=D1=88=D0=B8=D0=BB=D0=B0=20=D0=B2=D1=80=D0=B5=D0=BC=D1=8F=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=D0=BE=D0=B2=20=D1=83?=
 =?UTF-8?q?=20=D0=BC=D0=B0=D0=B9=20=D0=B4=D0=B8=D0=B0=D0=BB=D0=BE=D0=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |  19 +++++++++++--------
 public/images/logo128x128.jpg | Bin 0 -> 4343 bytes
 public/images/logo32x32.jpg   | Bin 0 -> 1245 bytes
 public/images/logo64x64.jpg   | Bin 0 -> 2102 bytes
 src/App.vue                   |   4 ++--
 src/components/MyDialog.vue   |   2 +-
 src/main.js                   |   2 +-
 7 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 public/images/logo128x128.jpg
 create mode 100644 public/images/logo32x32.jpg
 create mode 100644 public/images/logo64x64.jpg

diff --git a/package-lock.json b/package-lock.json
index bac231d..92321e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -617,7 +617,6 @@
       "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chalk": "^4.1.1",
         "fs-extra": "^9.0.1",
@@ -1754,7 +1753,6 @@
       "integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^3.0.1",
         "@inquirer/confirm": "^4.0.1",
@@ -2913,7 +2911,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2980,7 +2977,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -3198,7 +3194,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4505,6 +4500,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -8034,7 +8040,6 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -8094,7 +8099,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
       "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
         "@vue/compiler-sfc": "3.5.28",
@@ -8148,7 +8152,6 @@
       "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
diff --git a/public/images/logo128x128.jpg b/public/images/logo128x128.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..15f0b1eb88ba3968453191f9e757aca01290277f
GIT binary patch
literal 4343
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
TSN-va_?<~&#MpSt@z{R>Qy@g#

literal 0
HcmV?d00001

diff --git a/public/images/logo32x32.jpg b/public/images/logo32x32.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cf90dc271366da4a4ddc349414c987cfe2ad9d26
GIT binary patch
literal 1245
zcmex=<NpH&0WUXCHwH#VMg|WcWcdGx@rI|fb9_LMzniCzD^P-gf$;<b5U?09Fy!Wy
z6a~3EDMUm@DX>3aU<5)iNK7s+fUvNVKvmzaLDXK>#i|0oAZJQyaWYWJ2Ow4{0$L7q
zlL(M4k`7^OfY?b8whf3~UQ$p3R1*MV7li~l1KBA+wnjP<I|+%MTu=m3-vd-*lbcft
zvI_)2zT-*F3k?R+96&6?P|Og-;LhL#@;{Id1o?{?7%aXrFfdO*h$YQrVA$Tuz#wr8
zA*Ql`fq}n;fnnQugcu@B3KEMF!N#!wNv5<k28K_|85npY85o2wFfedMgXMq(4!0=)
zrDTBa$_K)9h8%`e1_cIBhCGI320b9lh{1rtkiqQ#Z3brs7G`D;Vqs=sWnp1u<6>t6
z0$xro4laIP0Retqem+5A2@yddaUni_Q5jKjNl9sGX#o*gd08oW2`OnQkRgmLtgLLT
zY&`7jJW_)Ef>I=d{|6WZIe-pRU}jWeU=n0x7G(T?gh2urh@jMl0Br0WEFc*T0R~29
z7A7V}W>%;qBNNaAY=S}z!t9C@MMRa94UHTVL1r*AFfk(x0J0dF7}(f>GD?CBOpGjy
ztOy$znVA?^gd7b86%!jLF8uKS76T76P`e<rAcH-_oSRvp+bx7dFK<82lcydSv7KdF
z-%-s&J6G`rb(i|L`_FnE$g`7oLtOmF{8E-T^#|vCoLl$f+4YZ;&3XBjy6#Bab!pab
zlk2I|BUbhNTM)?GV)|MotH}7bknM|!T3b)u4L&E#zTD3>fFt#sIZvB#qs)g)-#nWx
z*Ig+VrCNUMEV5a?$4y;WOVgiEslE7EI?H*VuJ2m^d0+WndU+lGYP_LXQ9C{1{^Mo0
zMH8Nf^6=@r4rg8Mw)$M&<-W%y$L<9wO~3m#>cS+4$T0S;jB}E&6&@9ieG)d!oApS3
zdh>60u_({pmZFrtEtc|Ar_IlcHtFgyy|cG_Is3)0nf-l-t{tu|{`-1P;i2!7R+hY0
z`@YD$RPDpoXKpXIKiGBnRh8sz&FDUxmY3J&@H$PM%HU>cwCT_4z6_St%k6FScSyR*
z-4mSs$E$sxk7$L;)8nECYOVf>6y+}LO4pfb{2_1Fx8qYYzUcG#E(_Z&v(914>uIkh
zwaN->ZZ-LMTf(oi@M^X4tv2I6Ey?XKMa!BNX=;9bA$;!k8l}zoT2{wSc@<g6Jl?c+
p=PCxEZ8AxsnF7z8RX6YaQ2x5^C1dWDB{TfR^f!DmeINS&CICmmNdf=>

literal 0
HcmV?d00001

diff --git a/public/images/logo64x64.jpg b/public/images/logo64x64.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..db5e66e47a4bec91514141d64e61324b878a66cc
GIT binary patch
literal 2102
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

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 1b21f6f..8e9f2bd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -359,8 +359,8 @@ body {
 .wraper {
     display: flex;
     justify-content: center;
-    //padding: 20% 0;
-    //TODO: рассмотреть вариант
+    padding: 1% 0;
+    
 }
 
 .grid {
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 3ef2430..36b47ad 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -173,7 +173,7 @@ useEventListener("keydown", handleKeydown);
 /* Общие настройки анимации (скорость + плавность) */
 .modal-fade-enter-active,
 .modal-fade-leave-active {
-    transition: transform 0.7s cubic-bezier(.22, .9, .31, 1), opacity 0.7s ease;
+    transition: transform 0.5s cubic-bezier(.22, .9, .31, 1), opacity 0.5s ease;
     will-change: transform, opacity;
 }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 0ca4c63..676d8c5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,7 +15,7 @@ const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: width,
     height: height,
-    icon: './public/images/logo.jpg',
+    icon: './public/images/logo32x32.jpg',
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },
-- 
2.52.0


From a3ce6d0ab0483078a93c53e143cc5deaaaa510c5 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 28 Mar 2026 23:33:20 +0300
Subject: [PATCH 18/20] =?UTF-8?q?=D0=9C=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   | 16 +++++++++++-----
 src/components/MyDialog.vue   |  4 ++++
 src/components/MyDropMenu.vue |  6 +++++-
 src/shared/izitoast.js        |  2 +-
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8e9f2bd..76feee5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,6 +67,10 @@ async function saveResult() {
     const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
     const isUsedQR = listOfTrips.value.some(item => item.isQR);
 
+    isModalVisible.value = true;
+    if (!listOfTrips.value.length) {
+        return
+    }
     if (isUsedPlatform) {
         let textOfCode = color
         textOfCode = textOfCode.split('<<separator>>')
@@ -102,7 +106,6 @@ async function saveResult() {
     } else {
         finallyText.value = finallyText.value.replace("<<qr_function>>", '');
     }
-    isModalVisible.value = true;
 }
 
 function cancel() {
@@ -125,7 +128,10 @@ function cleanResult() {
         item.variable = [];
         item.BgImg = 'images/ArUco-marker.jpg'
     })
-    listOfTrips.value = [];
+    izitoast.info({
+        title: 'Поле очищено',
+        message: 'Поле очищено. Можно строить маршрут заново',
+    })
 }
 
 // Обрабатываем нажатие Ctrl + Z
@@ -359,8 +365,9 @@ body {
 .wraper {
     display: flex;
     justify-content: center;
-    padding: 1% 0;
-    
+    padding-top: 20px;
+    //padding: 20% 0;
+    //TODO: рассмотреть вариант
 }
 
 .grid {
@@ -409,7 +416,6 @@ body {
 
 .actions {
     margin: 3px 0 0 10px;
-
     display: flex;
     flex-direction: column;
     gap: 10px;
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 36b47ad..e8b95c7 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -123,6 +123,10 @@ useEventListener("keydown", handleKeydown);
     border-radius: 5px;
 }
 
+.modal-footer a {
+    border-radius: 5px;
+}
+
 .modal-footer-success button {
     background-color: var(--successColor);
     border: none;
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 80653d9..6a1c6f0 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -129,7 +129,7 @@ h1 {
     position: fixed;
     top: 0;
     left: 0;
-    width: 240px;
+    width: 25%;
     height: 100%;
     background-image: radial-gradient(#23aae3e2, #222222);
     color: white;
@@ -153,6 +153,10 @@ h1 {
     display: flex;
 }
 
+main {
+    text-align: justify;
+}
+
 .navigation-wrapper__footer {
     display: flex;
     gap: 10px;
diff --git a/src/shared/izitoast.js b/src/shared/izitoast.js
index 91a9911..133c879 100644
--- a/src/shared/izitoast.js
+++ b/src/shared/izitoast.js
@@ -1,7 +1,7 @@
 import iziToast from 'iziToast';
 
 iziToast.settings({
-    timeout: 3000,
+    timeout: 2500,
     closeOnEscape: true,
     closeOnClick : true,
     resetOnHover: false,
-- 
2.52.0


From 8d3b8e689fb2c84c1872dcec415815f55cab50d3 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sun, 29 Mar 2026 22:36:19 +0300
Subject: [PATCH 19/20] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BB=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20?=
 =?UTF-8?q?=D1=81=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=D0=BC=D0=B8=20#11?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/trash.webp           | Bin 2468 -> 0 bytes
 src/App.vue                       |  95 +++++++++++++++++++++++-------
 src/components/MyDropMenu.vue     |  27 ++++++++-
 src/components/UI/svg/Back.vue    |   6 ++
 src/components/UI/svg/Preview.vue |   7 +++
 src/components/UI/svg/Save.vue    |   7 +++
 src/components/UI/svg/Trash.vue   |  22 +++++++
 7 files changed, 143 insertions(+), 21 deletions(-)
 delete mode 100644 public/icons/trash.webp
 create mode 100644 src/components/UI/svg/Back.vue
 create mode 100644 src/components/UI/svg/Preview.vue
 create mode 100644 src/components/UI/svg/Save.vue
 create mode 100644 src/components/UI/svg/Trash.vue

diff --git a/public/icons/trash.webp b/public/icons/trash.webp
deleted file mode 100644
index b4d66e4db7ff784713cedecb7cb83c8a7fa066b0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2468
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
QG;YQ7BkTX(9L5sUU-J>EYybcN

diff --git a/src/App.vue b/src/App.vue
index 76feee5..8bbc452 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,12 +6,14 @@ import MyDialog from "@/components/MyDialog.vue";
 import MyDropMenu from "@/components/MyDropMenu.vue";
 import copyToclipboard from "@/shared/copyToclipboard";
 import ContextMenu from "@imengyu/vue3-context-menu";
-import CustomButton from '@/components/UI/CustomButton.vue'
 import CodeView from "@/components/CodeView.vue";
-
-import emergencyAndNavigate from './shablons/emergency_and_navigate.js'
-import color from './shablons/color.js'
-import qr from './shablons/qr.js'
+import emergencyAndNavigate from '@/shablons/emergency_and_navigate.js'
+import color from '@/shablons/color.js'
+import qr from '@/shablons/qr.js'
+import Preview from "@/components/UI/svg/Preview.vue";
+import Save from "@/components/UI/svg/Save.vue";
+import Trash from "@/components/UI/svg/Trash.vue";
+import Back from "@/components/UI/svg/Back.vue";
 
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
@@ -20,6 +22,7 @@ const listOfTrips = ref([]);
 const isModalVisible = ref(false);
 const isCodeViewVisible = ref(false);
 const finallyText = ref("");
+const dropMenu = ref(null)
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -57,7 +60,24 @@ function setNumber(item) {
     }
 }
 
-async function saveResult() {
+function openPreview() {
+    generateCode()
+    if (!listOfTrips.value.length) {
+        izitoast.error({
+            title: 'Ошибка',
+            message: 'Для предпросмотра нужно создать маршрут'
+        })
+        return
+    }
+    isCodeViewVisible.value = true;
+}
+
+function saveResult() {
+    isModalVisible.value = true;
+    generateCode()
+}
+
+function generateCode() {
     finallyText.value = "";
     const mainCode = ref("");
     const colorDetectClass = ref("");
@@ -67,7 +87,6 @@ async function saveResult() {
     const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
     const isUsedQR = listOfTrips.value.some(item => item.isQR);
 
-    isModalVisible.value = true;
     if (!listOfTrips.value.length) {
         return
     }
@@ -128,6 +147,7 @@ function cleanResult() {
         item.variable = [];
         item.BgImg = 'images/ArUco-marker.jpg'
     })
+    listOfTrips.value = []
     izitoast.info({
         title: 'Поле очищено',
         message: 'Поле очищено. Можно строить маршрут заново',
@@ -142,6 +162,9 @@ const handleKeydown = (event) => {
     } else if (event.ctrlKey && event.code === "KeyS") {
         event.preventDefault();
         saveResult();
+    } else if (event.ctrlKey && event.code === "KeyN") {
+        event.preventDefault();
+        dropMenu.value.open();
     } else if (event.code === "Delete") {
         event.preventDefault();
         cleanResult();
@@ -277,7 +300,7 @@ function onContextMenu(e, item) {
                     {
                         label: "Удалить",
                         onClick: () => deletePlatform(item),
-                        icon: createIcon('icons/trash.webp'),
+                        icon: createIcon('icons/trash.svg'),
                     },
                 ]
             },
@@ -293,14 +316,14 @@ function onContextMenu(e, item) {
                     {
                         label: "Удалить",
                         onClick: () => deleteQR(item),
-                        icon: createIcon('icons/trash.webp')
+                        icon: createIcon('icons/trash.svg')
 
                     },
                 ],
             },
             {
                 label: "Удалить",
-                icon: createIcon('icons/trash.webp'),
+                icon: createIcon('icons/trash.svg'),
                 onClick: () => deletePointMap(item),
             },
         ]
@@ -318,11 +341,12 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <custom-button @click="saveResult">Сохранить</custom-button>
-            <custom-button @click="cleanResult">Очистить</custom-button>
-            <custom-button @click="cancel">Отменить</custom-button>
+            <Save @click="saveResult"/>
+            <Trash @click="cleanResult"/>
+            <Back @click="cancel"/>
+            <Preview @click="openPreview"/>
         </div>
-        <MyDropMenu/>
+        <MyDropMenu ref="dropMenu"/>
         <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
             <template #header>
                 <strong v-if="listOfTrips.length">Код готов!</strong>
@@ -365,9 +389,7 @@ body {
 .wraper {
     display: flex;
     justify-content: center;
-    padding-top: 20px;
-    //padding: 20% 0;
-    //TODO: рассмотреть вариант
+    padding: 20px 0 80px 0;
 }
 
 .grid {
@@ -415,11 +437,44 @@ body {
 }
 
 .actions {
-    margin: 3px 0 0 10px;
+    position: fixed;
+    bottom: 10px;
     display: flex;
-    flex-direction: column;
     gap: 10px;
-    width: 150px;
+    padding: 10px 20px;
+    border-radius: 10px;
+    background-color: #2f2f2f;
+
+
+    //background: rgba(255, 255, 255, 0.2);
+    //backdrop-filter: blur(10px);
+    //-webkit-backdrop-filter: blur(10px);
+    //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    //border: 2px solid rgba(255, 255, 255, 0.18);
+    /*
+        Эффект жидкого стекла
+        Оставил для обсуждения
+        Не удалять!
+    */
+}
+
+.actions svg {
+    width: 40px;
+    height: 40px;
+    transition: color 0.4s;
+}
+
+.actions svg:hover {
+    color: rgba(20, 104, 140, 0.89);
+}
+
+.actions svg:active {
+    transition: color 0s;
+    color: #23aae3e2;
+}
+
+path {
+    fill: currentColor;
 }
 
 .actions button {
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 6a1c6f0..93f5fce 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -20,7 +20,12 @@
                 </div>
 
                 <nav class="menu-content">
-                    <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
+                    <custom-button
+                        @click="openInfoCard(item)"
+                        v-for="item in informationForDirectory"
+                    >
+                        {{ item.title }}
+                    </custom-button>
                 </nav>
             </aside>
         </transition>
@@ -48,6 +53,7 @@ import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
 import informationForDirectory from "../data/informationForDirectory";
+import {useEventListener} from "@vueuse/core";
 
 const isOpen = ref(false);
 const isModalVisible = ref(false);
@@ -72,6 +78,14 @@ function openInfoCard(obj) {
     infoCard.value = obj
 }
 
+const handleKeydown = (event) => {
+    if (event.code === "Escape" && isOpen.value) {
+        event.preventDefault();
+        closeMenu();
+    }
+};
+useEventListener("keydown", handleKeydown);
+
 // Экспортируем методы, если захотим управлять меню извне
 defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
@@ -138,6 +152,17 @@ h1 {
     overflow-y: scroll;
     overflow: auto;
     border-right: white 2px solid;
+
+    //background: rgba(255, 255, 255, 0.2);
+    //backdrop-filter: blur(10px);
+    //-webkit-backdrop-filter: blur(10px);
+    //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    //border-right: 2px solid rgba(255, 255, 255, 0.18);
+    /*
+        Эффект жидкого стекла
+        Оставил для обсуждения
+        Не удалять!
+    */
 }
 
 /* Затемнение фона */
diff --git a/src/components/UI/svg/Back.vue b/src/components/UI/svg/Back.vue
new file mode 100644
index 0000000..8af36c8
--- /dev/null
+++ b/src/components/UI/svg/Back.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M7.29292 11.7071L2.58582 7L7.29292 2.29289L8.70714 3.70711L6.41424 6H14C17.866 6 21 9.13401 21 13C21 16.866 17.866 20 14 20H6V18H14C16.7614 18 19 15.7614 19 13C19 10.2386 16.7614 8 14 8H6.41424L8.70714 10.2929L7.29292 11.7071Z"
+              fill="black"/>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/UI/svg/Preview.vue b/src/components/UI/svg/Preview.vue
new file mode 100644
index 0000000..84fba1f
--- /dev/null
+++ b/src/components/UI/svg/Preview.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+        <g id="Reading_Mode" data-name="Reading Mode">
+            <path d="M12,20C6,20,1.35,12.84,1.16,12.54a1,1,0,0,1,0-1.08C1.35,11.16,6,4,12,4s10.65,7.16,10.84,7.46a1,1,0,0,1,0,1.08C22.65,12.84,18,20,12,20ZM3.22,12c1.14,1.56,4.72,6,8.78,6s7.65-4.43,8.78-6C19.64,10.44,16.06,6,12,6S4.35,10.43,3.22,12ZM12,16a4,4,0,1,1,4-4A4,4,0,0,1,12,16Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,12,10Z"/>
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/UI/svg/Save.vue b/src/components/UI/svg/Save.vue
new file mode 100644
index 0000000..0e8af8d
--- /dev/null
+++ b/src/components/UI/svg/Save.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg data-name="Livello 1" id="Livello_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+        <title/>
+        <path d="M61.88,93.12h0a3,3,0,0,0,.44.36l.24.13a1.74,1.74,0,0,0,.59.24l.25.07h0a3,3,0,0,0,1.16,0l.26-.08.3-.09a3,3,0,0,0,.3-.16l.21-.12a3,3,0,0,0,.46-.38L93,66.21A3,3,0,1,0,88.79,62L67,83.76V3a3,3,0,0,0-6,0V83.76L39.21,62A3,3,0,0,0,35,66.21Z"/>
+        <path d="M125,88a3,3,0,0,0-3,3v22a9,9,0,0,1-9,9H15a9,9,0,0,1-9-9V91a3,3,0,0,0-6,0v22a15,15,0,0,0,15,15h98a15,15,0,0,0,15-15V91A3,3,0,0,0,125,88Z"/>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/UI/svg/Trash.vue b/src/components/UI/svg/Trash.vue
new file mode 100644
index 0000000..33a5ab3
--- /dev/null
+++ b/src/components/UI/svg/Trash.vue
@@ -0,0 +1,22 @@
+<script setup>
+</script>
+<template>
+    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <title/>
+        <g data-name="Layer 2" id="Layer_2">
+            <path d="M20,29H12a5,5,0,0,1-5-5V12a1,1,0,0,1,2,0V24a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V12a1,1,0,0,1,2,0V24A5,5,0,0,1,20,29Z"/>
+            <path d="M26,9H6A1,1,0,0,1,6,7H26a1,1,0,0,1,0,2Z"/>
+            <path d="M20,9H12a1,1,0,0,1-1-1V6a3,3,0,0,1,3-3h4a3,3,0,0,1,3,3V8A1,1,0,0,1,20,9ZM13,7h6V6a1,1,0,0,0-1-1H14a1,1,0,0,0-1,1Z"/>
+            <path d="M14,23a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v7A1,1,0,0,1,14,23Z"/>
+            <path d="M18,23a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v7A1,1,0,0,1,18,23Z"/>
+        </g>
+        <g id="frame">
+            <rect class="cls-1" height="32" width="32"/>
+        </g>
+    </svg>
+</template>
+
+<style scoped>
+.cls-1{fill:none;}
+
+</style>
\ No newline at end of file
-- 
2.52.0


From 8436a64b75ec20ce1991a5e103e6466ef4d6b843 Mon Sep 17 00:00:00 2001
From: alisagerasimova <mixeeva3316@mail.ru>
Date: Mon, 30 Mar 2026 13:06:36 +0300
Subject: [PATCH 20/20] =?UTF-8?q?=D1=81=D0=BE=D0=B3=D0=BB=D0=B0=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BB=D0=B8=20=D1=8D=D1=84=D1=84=D0=B5=D0=BA?=
 =?UTF-8?q?=D1=82=20=D0=B6=D0=B8=D0=B4=D0=BA=D0=BE=D0=B3=D0=BE=20=D1=81?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BA=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   | 14 ++++----------
 src/components/MyDropMenu.vue | 11 -----------
 2 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8bbc452..6a248b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -446,16 +446,10 @@ body {
     background-color: #2f2f2f;
 
 
-    //background: rgba(255, 255, 255, 0.2);
-    //backdrop-filter: blur(10px);
-    //-webkit-backdrop-filter: blur(10px);
-    //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-    //border: 2px solid rgba(255, 255, 255, 0.18);
-    /*
-        Эффект жидкого стекла
-        Оставил для обсуждения
-        Не удалять!
-    */
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(5px);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    border: 2px solid rgba(255, 255, 255, 0.18);
 }
 
 .actions svg {
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 93f5fce..90b7ba7 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -152,17 +152,6 @@ h1 {
     overflow-y: scroll;
     overflow: auto;
     border-right: white 2px solid;
-
-    //background: rgba(255, 255, 255, 0.2);
-    //backdrop-filter: blur(10px);
-    //-webkit-backdrop-filter: blur(10px);
-    //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-    //border-right: 2px solid rgba(255, 255, 255, 0.18);
-    /*
-        Эффект жидкого стекла
-        Оставил для обсуждения
-        Не удалять!
-    */
 }
 
 /* Затемнение фона */
-- 
2.52.0