src/App.vue

@@ -1,16 +1,16 @@
 <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 MyDialog from "./components/MyDialog.vue";
-import copyToclipboard from './copyToclipboard';
+import MyDropMenu from "./components/MyDropMenu.vue";
-
+import copyToclipboard from "./copyToclipboard";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
-const listOfTrips = ref([])
+const listOfTrips = ref([]);
-const isModalVisible = ref(false)
+const isModalVisible = ref(false);
-let finallyText = '';
+let finallyText = "";
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -18,86 +18,82 @@ onMounted(()=>{
             variable: [],
             x: i % 10,
             y: 9 - Math.floor(i / 10),
-      index: i
+            index: i,
         });
     }
-})
+});
 
 function setNumber(item) {
     let valueOfMarker = item.variable[0];
     //если в клетке нет числа, то оно поставится
-  if (valueOfMarker === '') {
+    if (valueOfMarker === "") {
         item.variable.push(String(clickCount.value));
         listOfTrips.value.push(item);
         clickCount.value++;
-  } else if (valueOfMarker === clickCount.value - 1) {
-    //если мы нажимаем на последнюю выбранную клетку, то у неё удаляется число
-    item.variable.splice(0, 1) ;
-    const index = listOfTrips.value.indexOf(item);
-    if (index !== -1) {
-      listOfTrips.value.splice(index, 1);
-    }
-    clickCount.value--;
     } else {
         //если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
-    listOfTrips.value.push(item)
+        listOfTrips.value.push(item);
         if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
             izitoast.error({
-        title:'Ошибка', 
+                title: "Ошибка",
-        message:'Нельзя выбирать один и тот же aruco маркер 2 раза подряд'
+                message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
-      })
+            });
-      return 
+            return;
         }
-    numbers.value[item.index].variable.push(clickCount.value)
+        numbers.value[item.index].variable.push(clickCount.value);
         clickCount.value++;
-
     }
 }
 
 function saveResult() {
-  let navigate_waites = ''
+    let navigate_waites = "";
     for (const item of listOfTrips.value) {
     navigate_waites += `\tnavigate_wait(${item.x}, ${item.y})\n`;
     }
-  fetch('/shablons/emergency_and_navigate.txt')
+    fetch("/shablons/emergency_and_navigate.txt")
-    .then(response => response.text())
+        .then((response) => response.text())
-    .then(textOfCode => {
+        .then((textOfCode) => {
-      finallyText = textOfCode.replace('<<navigate_wait>>', navigate_waites);
+            finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
         });
-  isModalVisible.value = true
+    isModalVisible.value = true;
+}
+
+function cancel() {
+    numbers.value[listOfTrips.value.at(-1).index].variable.pop();
+    listOfTrips.value.pop();
+
+    if (clickCount.value === 1) {
+        return;
+    } else {
+        clickCount.value--;
+    }
 }
 
 function cleanResult() {
-  clickCount.value = 1
+    clickCount.value = 1;
-  numbers.value = []
+    numbers.value = [];
-  listOfTrips.value = []
+    listOfTrips.value = [];
     for (let i = 0; i < 100; i++) {
         numbers.value.push({
             variable: [],
             x: i % 10,
             y: 9 - Math.floor(i / 10),
-      index: i
+            index: i,
         });
     }
 }
+
 // Обрабатываем нажатие Ctrl + Z
 const handleKeydown = (event) => {
-  if (event.ctrlKey && event.code === 'KeyZ' && listOfTrips.value.length ) {
+    if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
         event.preventDefault();
-    numbers.value[listOfTrips.value.at(-1).index].variable.pop();
+        cancel();
-    listOfTrips.value.pop();
-    
-    if (clickCount.value === 1) {
-      return
-    } else{
-      clickCount.value--;
-    }
     }
 };
-useEventListener('keydown', handleKeydown);
+useEventListener("keydown", handleKeydown);
 
 function copyAndToast(text) {
-  copyToclipboard(text)
+    copyToclipboard(text);
     izitoast.success({
         title: 'Успешно',
         message: 'Код скопирован в буфер обмена'
@@ -131,6 +127,7 @@ function handleDownloadBtn(){
 </script>
 
 <template>
+    <div class="wraper">
         <div class="grid">
             <div
                 class="square"
@@ -139,41 +136,60 @@ function handleDownloadBtn(){
                 :key="index"
                 @click="setNumber(item)"
             >
-    {{ numbers[index].variable.join(', ') }}
+                {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
-  <button
-    @click="saveResult"
-  >Сохранить</button>
-    <button
-    @click="cleanResult"
-  >Очистить</button>
 
-  <MyDialog v-show="isModalVisible" @close="isModalVisible = false">
+        <div class="actions">
+            <button @click="saveResult">Сохранить</button>
+            <button @click="cleanResult">Очистить</button>
+            <button @click="cancel">Отменить</button>
+        </div>
+        <MyDropMenu/>
+    </div>
+
+
+    <MyDialog
+        v-show="isModalVisible"
+        @close="isModalVisible = false"
+        class="dialogWindow"
+        :is-success=listOfTrips.length
+    >
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
         </template>
         <template #body>
             <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
-      <p v-else>Выстройте маршрут перед сохранением кода.
+            <p v-else>Выстройте маршрут перед сохранением кода.</p>
-      </p>
         </template>
         <template #footer>
-      <button type="button"  class="btn-green" @click="handleDownloadBtn">Скачать код</button>
+            <div v-if="listOfTrips.length">
-      <button type="button"  class="btn-green" @click="copyAndToast(finallyText)">Скопировать код</button>
+                <button type="button" @click="handleDownloadBtn">Скачать код</button>
-      <button type="button"  class="btn-green" @click="isModalVisible = false">ОК</button>
+                <button type="button" @click="copyAndToast(finallyText)">Скопировать код</button>
+                <button type="button" @click="isModalVisible = false">ОК</button>
+            </div>
         </template>
     </MyDialog>
-
 </template>
 
 <style>
+html {
+    background-image: radial-gradient(#383838e2, #222222);
+}
+
 :root {
     --side: 70px;
 }
+
+.wraper {
+    display: flex;
+    justify-content: center;
+}
+
 .grid {
     display: grid;
+    padding: 3px;
     grid-template-columns: repeat(10, var(--side));
     gap: 10px;
     user-select: none;
@@ -182,19 +198,55 @@ function handleDownloadBtn(){
 .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;
+    background-color: transparent;
+    transition: background-color 0.3s ease;
+
+    color: white;
+    text-shadow: -1px -1px 0 black,
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
 }
 
 .square:hover {
-  background-color: #d0d0d0;
+    background-color: rgb(166, 162, 162);
 }
+
+.square:active {
+    background-color: rgb(164, 162, 162);
+}
+
 .square::-webkit-scrollbar {
     display: none;
 }
-.square[data-key='90'] {
+
-  background-color: red;
+.square[data-key="90"] {
+    background-color: rgba(0, 2, 0, 0.638);
+}
+
+.actions {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+.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;
 }
 </style>

src/components/MyDialog.vue

@@ -2,20 +2,20 @@
   <transition name="modal-fade">
     <div class="modal-backdrop" @click="closeModal">
       <div class="modal" @click.stop>
-        <header class="modal-header">
+        <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
           <slot name="header">
             <strong>Заголовок по умолчанию</strong>
           </slot>
-          <button type="button" class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+          <button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
             ×
           </button>
         </header>
         <section class="modal-body">
           <slot name="body">Тело по умолчанию</slot>
         </section>
-        <footer class="modal-footer">
+        <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
           <slot name="footer">
-            <button type="button" class="btn-green" @click="closeModal">Закрыть</button>
+            <button  @click="closeModal">Закрыть</button>
           </slot>
         </footer>
       </div>
@@ -25,6 +25,12 @@
 
 <script setup>
 const emit = defineEmits(['close'])
+const props = defineProps({
+  isSuccess: {
+    type: Boolean,
+    required: true
+  }
+})
 function closeModal() {
     emit('close');
 }
@@ -44,7 +50,7 @@ function closeModal() {
 }
 
 .modal {
-  background: #FFFFFF;
+  background: #2f2f2f;
   box-shadow: 2px 2px 20px 1px;
   overflow-x: auto;
   display: flex;
@@ -62,52 +68,52 @@ function closeModal() {
 
 .modal-header {
   border-bottom: 1px solid #eeeeee;
-  color: #4AAE9B;
   justify-content: space-between;
 }
+.modal-header-success {
+  color: #4AAE9B;
+}
+.modal-header-error {
+  color: red;
+}
+
+.modal-header [type = 'button'] {
+  color: red;
+  font-size: 25px;
+}
 
 .modal-footer {
-  border-top: 1px solid #eeeeee;
   justify-content: flex-end;
+  border-top: 1px solid white;
+}
+.modal-footer [type = 'button'] {
+  justify-content: flex-end;
+  border-top: 1px solid white;
+  padding: 5px;
+}
+.modal-footer-success [type = 'button'] {
+  background-color: #4AAE9B;
+  border: none;
+  margin: 3px;
+}
+.modal-footer-error [type = 'button'] {
+  background: red;
+  border: none;
 }
 
 .modal-body {
   position: relative;
   padding: 20px 10px;
+  color: white
 }
 
-.btn-close {
+.modal-btn-close {
   border: none;
   font-size: 20px;
   padding: 0;
   cursor: pointer;
   font-weight: bold;
-  color: #4AAE9B;
+  color: red;
   background: transparent;
 }
-
-.btn-green {
-  color: white;
-  background: #4AAE9B;
-  border: 1px solid #4AAE9B;
-  border-radius: 2px;
-  padding: 5px;
-  margin: 0 5px;
-}
-.btn-green:hover {
-  background-color: #0fa386;
-}
-.btn-green:active {
-  background-color: #65ebd2;
-}
-
-.modal-fade-enter,
-.modal-fade-leave-active {
-  opacity: 0;
-}
-
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-  transition: opacity 0.5s ease;
-}
 </style>   

src/components/MyDropMenu.vue

@@ -0,0 +1,120 @@
+<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>
+
+    <!-- Затемнение заднего фона (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>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+const toggleMenu = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const closeMenu = () => {
+  isOpen.value = false;
+};
+
+// Экспортируем методы, если захотим управлять меню извне
+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;
+}
+h1{
+  text-align: center;
+}
+.line {
+  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); }
+
+/* Боковая панель */
+.side-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 300px;
+  height: 100vh;
+  background: white;
+  z-index: 1000;
+  padding: 0 20px 20px;
+}
+
+/* Затемнение фона */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
+}
+
+/* Анимации появления */
+.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
+.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
+.placeholder {
+  color: #00e44c; 
+  /* цвет текста */
+  font-style: italic;
+}
+</style>