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'
+    if (item.isPlatform) {
-    item.isPlatform = false
+        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'
+    if (item.isQR) {
-    item.isQR = true
+        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"
+            <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)"
+                @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
-                 :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
+    <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
-        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>

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;
 }

src/components/MyDropMenu.vue

@@ -1,12 +1,7 @@
 <template>
     <div class="navigation-wrapper">
         <!-- Кнопка Бургер -->
-        <button
+        <button class="burger-btn" @click="toggleMenu" :class="{ 'is-active': isOpen }" aria-label="Menu">
-            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
+        <MyDialog isSuccess v-model:show="isModalVisible">
-            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>
+                <div class="navigation-wrapper__footer">
-                <custom-button title="Посмотреть в официальной документации">Документация</custom-button>
+                    <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
-                <custom-button>ОК</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',
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToDoc: 'https://www.ros.org/',
-        hrefToCourse: 'https://stepic.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>

src/components/UI/CustomButton.vue

@@ -13,11 +13,11 @@ const props = defineProps({
 </script>
 
 <template>
-    <a v-if="to" :href="props.to" class="btn">
+    <a v-if="to" :href="props.to" target="_blank" class="btn">
-        <slot/>
+        <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>