diff --git a/package-lock.json b/package-lock.json
index 97674a5..4f5c1ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@imengyu/vue3-context-menu": "^1.5.4",
         "@vueuse/core": "^14.2.1",
         "copy-to-clipboard": "^3.3.3",
         "electron-squirrel-startup": "^1.0.1",
@@ -1406,6 +1407,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@imengyu/vue-scroll-rect": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.8.tgz",
+      "integrity": "sha512-Mg7rgHlsGPO0tcMFjp1kB2BZ3oRrRtFN8MoE52jTgQnlc+Y0N6ttFnbIxOh2fc9j82uhdQ8zgZcXlFHUXeGnCA==",
+      "license": "MIT"
+    },
+    "node_modules/@imengyu/vue3-context-menu": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.5.4.tgz",
+      "integrity": "sha512-/a6Quyn3V320/Mi6UoH+6wSTBYrln70RovT3iyfoXQQpIHpC7ZPWObzS0BXQTRlWtyJB92XmGDT703UxSO8Tvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@imengyu/vue-scroll-rect": "^0.1.4"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-3.0.1.tgz",
diff --git a/package.json b/package.json
index f0de7b3..dceac85 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "vite": "^5.4.21"
   },
   "dependencies": {
+    "@imengyu/vue3-context-menu": "^1.5.4",
     "@vueuse/core": "^14.2.1",
     "copy-to-clipboard": "^3.3.3",
     "electron-squirrel-startup": "^1.0.1",
diff --git a/src/Images/image.jpg b/public/images/ArUco-marker.jpg
similarity index 100%
rename from src/Images/image.jpg
rename to public/images/ArUco-marker.jpg
diff --git a/public/images/blue-platform.jpg b/public/images/blue-platform.jpg
new file mode 100644
index 0000000..bff4e73
Binary files /dev/null and b/public/images/blue-platform.jpg differ
diff --git a/public/images/red-platform.jpg b/public/images/red-platform.jpg
new file mode 100644
index 0000000..6a7e75a
Binary files /dev/null and b/public/images/red-platform.jpg differ
diff --git a/public/images/white-platform.jpg b/public/images/white-platform.jpg
new file mode 100644
index 0000000..3fac667
Binary files /dev/null and b/public/images/white-platform.jpg differ
diff --git a/public/shablons/color.txt b/public/shablons/color.txt
index 6571542..15781cc 100644
--- a/public/shablons/color.txt
+++ b/public/shablons/color.txt
@@ -43,12 +43,9 @@ class ColorDetect():
                 self.color = 'red'
             else:
                 self.color = None
-
-#в MAIN для вызова функции должно быть:
-# cd = ColorDetect()
-    #color_sub = rospy.Subscriber('main_camera/image_raw', Image, 
-                              #lambda img: cd.detect_color_callback(img, print_type='rgb'), 
-                              #queue_size=1)
-    # print(cd.getColor())
-    #rospy.sleep(2)
-    #color_sub.unregister()
+<<separator>>
+    cd = ColorDetect()
+    color_sub = rospy.Subscriber('main_camera/image_raw', Image, lambda img: cd.detect_color_callback(img, print_type='rgb'), queue_size=1)
+    print(cd.getColor())
+    rospy.sleep(2)
+    color_sub.unregister()
diff --git a/public/shablons/emergency_and_navigate.txt b/public/shablons/emergency_and_navigate.txt
index 5889c07..c0475f7 100644
--- a/public/shablons/emergency_and_navigate.txt
+++ b/public/shablons/emergency_and_navigate.txt
@@ -17,6 +17,7 @@ get_telemetry = rospy.ServiceProxy('get_telemetry', srv.GetTelemetry) #сеов
 navigate = rospy.ServiceProxy('navigate', srv.Navigate) #сервис для полета по указаным координатам
 land = rospy.ServiceProxy('land', Trigger) #сервис для посадки
 
+<<ColorDetect>>
 
 def navigate_wait(x=0, y=0, z=1, speed=0.5, frame_id='aruco_map', auto_arm=False, tolerance=0.2,sleep=2):
     """
@@ -91,7 +92,7 @@ def main():
     #в дальнейшем не передавать переменной auto_arm значение True
 
     
-<<navigate_wait>>
+<<main>>
  
 
     land() #посадка
diff --git a/src/App.vue b/src/App.vue
index 0ace86e..3acb136 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,17 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import {ref, onMounted} from "vue";
 import izitoast from "./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 "./copyToclipboard";
+import ContextMenu from '@imengyu/vue3-context-menu'
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([]);
 const isModalVisible = ref(false);
-let finallyText = "";
+let finallyText = ref("");
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -19,6 +20,8 @@ onMounted(() => {
             x: i % 10,
             y: 9 - Math.floor(i / 10),
             index: i,
+            isPlatform: false,
+            BgImg: 'images/ArUco-marker.jpg'
         });
     }
 });
@@ -31,8 +34,7 @@ function setNumber(item) {
         listOfTrips.value.push(item);
         clickCount.value++;
     } else {
-        //если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
-        listOfTrips.value.push(item);
+        //если нажимаем на ранее отмеченную клетку, то выводится ошибка
         if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
             izitoast.error({
                 title: "Ошибка",
@@ -40,46 +42,59 @@ function setNumber(item) {
             });
             return;
         }
+        listOfTrips.value.push(item);
         numbers.value[item.index].variable.push(clickCount.value);
         clickCount.value++;
     }
 }
 
-function saveResult() {
-    let navigate_waites = "";
-    for (const item of listOfTrips.value) {
-        navigate_waites += `\tnavigate_wait(${item.x}, ${item.y})\n`;
+async function saveResult() {
+    finallyText.value = "";
+    const mainCode = ref("");
+    const colorDetectClass = ref("");
+    const colorDetectCode = ref("");
+    const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
+
+    if (isUsedPlatform) {
+        const response = await fetch("/shablons/color.txt")
+        let textOfCode = await response.text()
+        textOfCode = textOfCode.split('<<separator>>')
+        colorDetectClass.value = textOfCode[0]
+        colorDetectCode.value += `\t${textOfCode[1].trim()}\n`;
+    }
+
+    for (const item of listOfTrips.value) {
+        mainCode.value += `\tnavigate_wait(${item.x}, ${item.y})\n`;
+        if (isUsedPlatform) {
+            mainCode.value += colorDetectCode.value + '\n'
+        }
+    }
+    const response = await fetch("/shablons/emergency_and_navigate.txt")
+    let textOfCode = await response.text()
+    finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
+    if (isUsedPlatform) {
+        finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
     }
-    fetch("/shablons/emergency_and_navigate.txt")
-        .then((response) => response.text())
-        .then((textOfCode) => {
-            finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
-        });
     isModalVisible.value = true;
 }
 
 function cancel() {
-    numbers.value[listOfTrips.value.at(-1).index].variable.pop();
-    listOfTrips.value.pop();
 
     if (clickCount.value === 1) {
         return;
     } else {
+        numbers.value[listOfTrips.value.at(-1).index].variable.pop();
+        listOfTrips.value.pop();
         clickCount.value--;
     }
 }
 
 function cleanResult() {
     clickCount.value = 1;
-    numbers.value = [];
     listOfTrips.value = [];
     for (let i = 0; i < 100; i++) {
-        numbers.value.push({
-            variable: [],
-            x: i % 10,
-            y: 9 - Math.floor(i / 10),
-            index: i,
-        });
+        numbers.value[i].variable = [];
+        numbers.value[i].BgImg = 'images/ArUco-marker.jpg'
     }
 }
 
@@ -102,10 +117,9 @@ function copyAndToast(text) {
 }
 
 function handleDownloadBtn() {
-    console.log(finallyText)
     // Создание файла
     const downloadUrl = ref('');
-    const blob = new Blob([finallyText], { type: 'text/plain' });
+    const blob = new Blob([finallyText.value], {type: 'text/plain'});
     downloadUrl.value = URL.createObjectURL(blob);
     // Задержка для избежания ошибок в некоторых браузерах
     setTimeout(() => {
@@ -124,13 +138,84 @@ function handleDownloadBtn() {
     })
     isModalVisible.value = false
 }
+
+function createPlatform(item, color) {
+    if (!item.isPlatform) {
+        listOfTrips.value.push(item)
+        numbers.value[item.index].variable.push(clickCount.value);
+    }
+    item['isPlatform'] = true
+    numbers.value[item.index].BgImg = `images/${color}-platform.jpg`
+    clickCount.value++
+}
+
+function deletePlatform(item) {
+    item['isPlatform'] = false
+    const index = listOfTrips.value.indexOf(item);
+    if (index !== -1) {
+        listOfTrips.value.splice(index, 1);
+    }
+    numbers.value[item.index].BgImg = 'images/ArUco-marker.jpg'
+    clickCount.value--
+}
+
+function onContextMenu(e, item) {
+    ContextMenu.showContextMenu({
+        theme: 'mac dark',
+        x: e.x,
+        y: e.y,
+        items: [
+            {
+                label: "Платформы",
+                children: [
+                    {
+                        label: "Белая",
+                        onClick: () => createPlatform(item, 'white'),
+                    },
+                    {
+                        label: "Синяя",
+                        onClick: () => createPlatform(item, 'blue'),
+                    },
+                    {
+                        label: "Красная",
+                        onClick: () => createPlatform(item, 'red'),
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => deletePlatform(item),
+                    },
+                ]
+            },
+            {
+                label: "QR код",
+                children: [
+                    {
+                        label: "Добавить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                ],
+            },
+            {
+                label: "Отмена",
+                onClick: () => {
+                    alert('Здесь ещё предстоит написать код')
+                }
+            },
+        ]
+    });
+}
 </script>
 
 <template>
     <div class="wraper">
         <div class="grid">
             <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index"
-                @click="setNumber(item)">
+                 @click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)"
+                 :style="{backgroundImage: `url(${item.BgImg})`}">
                 {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
@@ -140,12 +225,12 @@ function handleDownloadBtn() {
             <button @click="cleanResult">Очистить</button>
             <button @click="cancel">Отменить</button>
         </div>
-        <MyDropMenu />
+        <MyDropMenu/>
     </div>
 
 
     <MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
-        :is-success=Boolean(listOfTrips.length)>
+              :is-success=Boolean(listOfTrips.length)>
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
@@ -189,12 +274,9 @@ html {
 .square {
     width: var(--side);
     height: var(--side);
-    background-image: url("images/image.jpg");
     background-size: cover;
     border: 3px solid rgb(251, 251, 251);
-    background-color: #e0e0e0;
     cursor: pointer;
-    transition: background-color 0.3s;
     overflow-y: scroll;
 
     background-blend-mode: multiply;
@@ -203,9 +285,9 @@ 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;
 }
 
 .square:hover {
diff --git a/src/renderer.js b/src/renderer.js
index af6c62c..4099886 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -28,5 +28,6 @@
 
 import { createApp } from 'vue';
 import App from './App.vue';
-
-createApp(App).mount('#app');
\ No newline at end of file
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
+createApp(App).use(ContextMenu).mount('#app');